:root {
  --ig:   #0F3C3B;
  --igl:  #1a5c5a;
  --igb:  #e8f2f2;
  --igb2: #d0e8e7;
  --ip:   #EEA070;
  --ipb:  #fdf0e8;
  --ipl2: #f5c4a3;
  --iw:   #EBEBEB;
  --igr:  #6b7280;
  --ibr:  #d1dede;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font); background: #f5f7f7; color: #1a1a1a; }

.app { max-width: 900px; margin: 0 auto; padding: 1rem; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem; padding: 10px 18px;
  background: var(--ig); border-radius: 12px;
  overflow: hidden; min-width: 0;
}
.topbar-nome { font-family: Georgia, serif; font-style: italic; font-size: 20px; color: #EBEBEB; letter-spacing: .5px; }
.topbar-sub  { font-family: Arial, sans-serif; font-size: 7px; color: var(--ip); letter-spacing: 3px; text-transform: uppercase; margin-top: 2px; }
.topbar-user { font-size: 12px; color: var(--iw); opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100px; }

.nav { display: flex; gap: 3px; flex-wrap: wrap; margin-bottom: 1rem; }
.nav button { font-size: 12px; padding: 5px 10px; border-radius: 6px; border: 1px solid var(--ibr); background: #fff; color: var(--igr); cursor: pointer; transition: all .12s; }
.nav button.active { background: var(--ig); color: var(--iw); border-color: var(--ig); }
.nav button:hover:not(.active) { background: var(--igb); color: var(--ig); }

.sec { display: none; }
.sec.active { display: block; }

.card { background: #fff; border: 1px solid var(--ibr); border-radius: 12px; padding: 1rem 1.25rem; margin-bottom: 10px; }
.csm  { background: #fff; border: 1px solid var(--ibr); border-radius: 8px; padding: .65rem .9rem; margin-bottom: 6px; }
.csm.click { cursor: pointer; }
.csm.click:hover { border-color: var(--ig); }
.csm.sel2 { border: 2px solid var(--ig); background: var(--igb); }

.stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 1rem; }
.stat   { background: var(--igb); border-radius: 8px; padding: 10px; text-align: center; }
.stat-n { font-size: 22px; font-weight: 500; color: var(--ig); }
.stat-l { font-size: 11px; color: var(--igr); margin-top: 1px; }

.bdg { font-size: 11px; padding: 2px 7px; border-radius: 99px; font-weight: 500; display: inline-block; white-space: nowrap; }
.bge   { background: var(--igb);  color: var(--ig);  border: 1px solid var(--igb2); }
.bp    { background: var(--ipb);  color: #a0522d;    border: 1px solid var(--ipl2); }
.bgr   { background: #f3f4f6;    color: #374151;    border: 1px solid #d1d5db; }
.bred  { background: #fef2f2;    color: #991b1b;    border: 1px solid #fca5a5; }
.bdg-papel { background: rgba(238,160,112,.2); color: var(--ip); border: 1px solid rgba(238,160,112,.4); }

.mcifra { background:#E6F1FB; color:#0C447C; border:1px solid #85B7EB; font-size:11px; padding:2px 7px; border-radius:99px; font-weight:500; display:inline-block; }
.mletra { background:#E1F5EE; color:#085041; border:1px solid #5DCAA5; font-size:11px; padding:2px 7px; border-radius:99px; font-weight:500; display:inline-block; }
.maudio { background:#FAEEDA; color:#633806; border:1px solid #FAC775; font-size:11px; padding:2px 7px; border-radius:99px; font-weight:500; display:inline-block; }
.mspot  { background:#EAF3DE; color:#27500A; border:1px solid #97C459; font-size:11px; padding:2px 7px; border-radius:99px; font-weight:500; display:inline-block; }
.myt    { background:#FAECE7; color:#712B13; border:1px solid #F0997B; font-size:11px; padding:2px 7px; border-radius:99px; font-weight:500; display:inline-block; }

.ti   { background:#E6F1FB; color:#0C447C; border:1px solid #85B7EB; font-size:11px; padding:2px 8px; border-radius:99px; font-weight:500; display:inline-block; cursor:pointer; margin:2px; }
.ti.s { background:#0C447C; color:#E6F1FB; }
.tv   { background:#FBEAF0; color:#72243E; border:1px solid #ED93B1; font-size:11px; padding:2px 8px; border-radius:99px; font-weight:500; display:inline-block; cursor:pointer; margin:2px; }
.tv.s { background:#72243E; color:#FBEAF0; }

.lt-louvor   { background:#fdf0e8; color:#7a3a00; border:1px solid #f5c4a3; font-size:10px; padding:2px 8px; border-radius:99px; font-weight:600; white-space:nowrap; }
.lt-leitura  { background:#eff6ff; color:#1d4ed8; border:1px solid #93c5fd; font-size:10px; padding:2px 8px; border-radius:99px; font-weight:600; white-space:nowrap; }
.lt-oracao   { background:#f0fdf4; color:#166534; border:1px solid #86efac; font-size:10px; padding:2px 8px; border-radius:99px; font-weight:600; white-space:nowrap; }
.lt-oferta   { background:#fffbeb; color:#92400e; border:1px solid #fcd34d; font-size:10px; padding:2px 8px; border-radius:99px; font-weight:600; white-space:nowrap; }
.lt-criancas { background:#fdf4ff; color:#6b21a8; border:1px solid #d8b4fe; font-size:10px; padding:2px 8px; border-radius:99px; font-weight:600; white-space:nowrap; }
.lt-pregacao { background:#e8f2f2; color:#0F3C3B; border:1px solid #d0e8e7; font-size:10px; padding:2px 8px; border-radius:99px; font-weight:600; white-space:nowrap; }
.lt-ceia     { background:#fdf2f8; color:#9d174d; border:1px solid #fbcfe8; font-size:10px; padding:2px 8px; border-radius:99px; font-weight:600; white-space:nowrap; }
.lt-amen     { background:#fef2f2; color:#991b1b; border:1px solid #fca5a5; font-size:10px; padding:2px 8px; border-radius:99px; font-weight:600; white-space:nowrap; }
.lt-avisos   { background:#f8fafc; color:#475569; border:1px solid #cbd5e1; font-size:10px; padding:2px 8px; border-radius:99px; font-weight:600; white-space:nowrap; }

.li            { display:flex; gap:0; padding:0; border-bottom:1px solid var(--ibr); align-items:stretch; }
.li:last-child { border-bottom:none; }
.li-bar        { width:4px; flex-shrink:0; }
.bar-louvor    { background:#EEA070; }
.bar-leitura   { background:#3b82f6; }
.bar-oracao    { background:#22c55e; }
.bar-oferta    { background:#eab308; }
.bar-criancas  { background:#a855f7; }
.bar-pregacao  { background:#0F3C3B; }
.bar-ceia      { background:#9d174d; }
.bar-avisos    { background:#94a3b8; }
.bar-amen      { background:#ef4444; }
.li-inner      { display:flex; gap:7px; padding:8px 10px; flex:1; align-items:flex-start; }
.li-seq        { font-size:11px; color:var(--igr); min-width:20px; padding-top:3px; flex-shrink:0; font-weight:600; }

.lit-legend { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:10px; padding:8px 10px; background:#f8fafc; border-radius:8px; border:1px solid var(--ibr); }

.pc   { display:inline-flex; align-items:center; font-size:11px; padding:3px 9px; border-radius:99px; border:1px solid var(--ibr); background:transparent; color:var(--igr); cursor:pointer; margin:2px; }
.pc.s { background:var(--igb); color:var(--ig); border-color:var(--ig); }
.pc.p { background:var(--ig); color:var(--iw); }

.g2  { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ng  { display:grid; grid-template-columns:repeat(5,1fr); gap:4px; width:100%; max-width:100%; overflow:hidden; box-sizing:border-box; }
.nc  { background:var(--igb); border-radius:6px; padding:5px 4px; min-width:0; overflow:hidden; box-sizing:border-box; }
.nl  { font-size:9px; color:var(--igr); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nv  { font-size:11px; font-weight:500; color:var(--ig); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dg3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-top:8px; }
.ds  { background:var(--igb); border-radius:8px; padding:8px 10px; }
.dst { font-size:10px; font-weight:600; color:var(--ig); text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; border-bottom:1px solid var(--igb2); padding-bottom:4px; }
.dr  { font-size:12px; color:#1a1a1a; padding:3px 0; display:flex; gap:4px; align-items:baseline; border-bottom:1px solid var(--igb2); }
.dr:last-child { border-bottom:none; }
.dl  { color:var(--igr); font-size:10px; flex-shrink:0; min-width:66px; }
.dv2 { font-size:12px; color:#1a1a1a; flex:1; }

.av  { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:500; flex-shrink:0; background:var(--igb); color:var(--ig); }
.row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.rsb { display:flex; align-items:center; justify-content:space-between; gap:6px; }
.dv  { border:none; border-top:1px solid var(--ibr); margin:8px 0; }
.h2  { font-size:16px; font-weight:500; color:var(--ig); margin-bottom:10px; }
.h3  { font-size:13px; font-weight:500; color:var(--ig); margin-bottom:5px; }
.sem { width:8px; height:8px; border-radius:50%; flex-shrink:0; display:inline-block; }
.sv  { background:#059669; }
.sa  { background:#d97706; }
.pb  { height:4px; border-radius:2px; background:var(--igb2); margin-top:3px; }
.pbf { height:4px; border-radius:2px; }

.alw  { font-size:12px; padding:8px 12px; border-radius:8px; margin-bottom:8px; background:var(--ipb);  color:#a0522d;  border:1px solid var(--ipl2); }
.ainf { font-size:12px; padding:8px 12px; border-radius:8px; margin-bottom:8px; background:var(--igb);  color:var(--ig); border:1px solid var(--igb2); }
.aerr { font-size:12px; padding:8px 12px; border-radius:8px; margin-bottom:8px; background:#fef2f2; color:#991b1b;     border:1px solid #fca5a5; }

label { font-size:12px; color:var(--igr); display:block; margin-bottom:3px; margin-top:7px; }
input, select, textarea { width:100%; font-size:13px; margin-bottom:2px; padding:6px 8px; border:1px solid var(--ibr); border-radius:6px; background:#fff; color:#1a1a1a; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--ig); }
textarea { resize:vertical; min-height:80px; }

.btn  { font-size:13px; font-weight:500; padding:8px 14px; border-radius:6px; border:1px solid var(--ig); background:var(--ig); color:var(--iw); cursor:pointer; margin-top:7px; width:100%; }
.btn:hover { background:var(--igl); }
.btno { background:transparent; color:var(--ig); }
.bsm  { font-size:11px; padding:3px 8px; border-radius:6px; border:1px solid var(--ibr); background:transparent; color:var(--igr); cursor:pointer; white-space:nowrap; }
.bsm:hover { background:var(--igb); color:var(--ig); }
.bsmg { color:var(--ig); border-color:var(--ig); }
.bsmr { color:#dc2626; border-color:#fca5a5; }
.bsm-inv { color:var(--iw); border-color:rgba(235,235,235,.4); }
.bsm-inv:hover { background:rgba(255,255,255,.1); color:var(--iw); }
.cbtn { font-size:11px; padding:3px 8px; border-radius:99px; border:1px solid; cursor:pointer; font-weight:500; }
.cpd  { background:#fffbeb; color:#92400e; border-color:#fcd34d; }
.csim { background:var(--igb); color:var(--ig); border-color:var(--igb2); }
.cnao { background:#fef2f2; color:#991b1b;  border-color:#fca5a5; }

.tab2 { display:flex; gap:3px; flex-wrap:wrap; margin-bottom:10px; }
.tab2 button { font-size:11px; padding:4px 10px; border-radius:6px; border:1px solid var(--ibr); background:transparent; color:var(--igr); cursor:pointer; }
.tab2 button.active { background:var(--ig); color:var(--iw); border-color:var(--ig); }

.fld     { border:1px solid var(--ibr); border-radius:8px; margin-bottom:7px; overflow:hidden; }
.fldhd   { display:flex; align-items:center; justify-content:space-between; padding:7px 12px; cursor:pointer; background:var(--igb); }
.fldhd:hover { background:var(--igb2); }
.fldbody { padding:8px 12px; display:none; border-top:1px solid var(--ibr); }
.fldbody.open { display:block; }
.mrow    { display:flex; align-items:center; gap:7px; padding:5px 0; border-bottom:1px solid var(--ibr); }
.mrow:last-child { border-bottom:none; }

.sc  { border:1px solid var(--ibr); border-radius:8px; padding:8px 10px; margin-bottom:6px; }
.sok { border-color:var(--ig);   background:var(--igb); }
.spd { border-color:var(--ipl2); background:var(--ipb); }

.eb   { border:1px solid var(--ibr); border-radius:8px; padding:8px 10px; margin-bottom:7px; }
.eb-d { border:1px solid var(--ig);  border-radius:8px; padding:8px 10px; margin-bottom:7px; background:var(--igb); }
.dir-blk { border:1px solid var(--ibr); border-radius:6px; padding:7px 10px; margin-bottom:5px; }
.dir-lbl { font-size:11px; font-weight:600; color:var(--ig); margin-bottom:4px; }
.dir-sel { font-size:11px; color:var(--ig); margin-top:3px; }

.gpan { border:1px solid var(--ig); border-radius:8px; padding:10px; margin-top:8px; background:var(--igb); }
.grow { display:flex; align-items:center; gap:6px; padding:5px 0; border-bottom:1px solid var(--igb2); flex-wrap:wrap; }
.grow:last-child { border-bottom:none; }

.mtag       { display:inline-flex; align-items:center; gap:3px; font-size:11px; padding:3px 9px; border-radius:99px; border:1px solid var(--ig); background:var(--igb); color:var(--ig); cursor:pointer; margin:2px; font-weight:500; }
.mtag:hover { background:var(--igb2); }
.mpan       { background:var(--igb); border:1px solid var(--igb2); border-radius:6px; padding:7px 10px; margin-top:4px; }

.cabl {
  background:var(--ig); border-radius:10px; padding:18px 20px; margin-bottom:14px;
  display:flex; flex-direction:column; align-items:stretch; gap:0; width:100%; box-sizing:border-box;
}
.cabl-titulo    { font-size:10px; color:rgba(235,235,235,.45); text-transform:uppercase; letter-spacing:.14em; text-align:center; margin-bottom:14px; }
.cabl-main      { display:flex; align-items:center; gap:0; width:100%; }
.cabl-logo-col  { display:flex; flex-direction:column; align-items:center; justify-content:center; padding-right:20px; flex-shrink:0; min-width:160px; }
.cabl-logo-nome { font-family:Georgia,serif; font-style:italic; font-size:clamp(16px,4vw,28px); color:#EBEBEB; letter-spacing:1px; line-height:1.1; white-space:nowrap; }
.cabl-logo-sub  { font-family:Arial,sans-serif; font-size:clamp(6px,1.4vw,8px); color:var(--ip); letter-spacing:clamp(1px,.5vw,3px); text-transform:uppercase; margin-top:3px; white-space:nowrap; }
.cabl-divider   { width:1px; background:rgba(255,255,255,.12); align-self:stretch; flex-shrink:0; margin:0 20px; }
.cabl-info-col  { flex:1; display:flex; flex-direction:column; gap:0; min-width:0; }
.cabl-data-inline { font-size:12px; color:var(--ip); font-weight:500; margin-bottom:10px; }
.cabl-grid      { display:grid; grid-template-columns:1fr 1fr; gap:7px 16px; width:100%; }
.cabl-grid-item { display:flex; flex-direction:column; gap:1px; min-width:0; }
.cabl-grid-label { font-size:8px; color:var(--ip); text-transform:uppercase; letter-spacing:.08em; opacity:.75; }
.cabl-grid-valor { font-size:12px; color:#EBEBEB; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cabl-grid-valor.destaque { color:#fff; font-weight:700; }
.cabl-sep2      { width:100%; height:1px; background:rgba(255,255,255,.1); margin:14px 0 10px; }
.cabl-banda-nome { font-size:11px; color:var(--ip); font-weight:600; text-align:center; margin-bottom:6px; }
.cabl-banda-lista { display:flex; flex-wrap:wrap; justify-content:center; gap:5px 14px; width:100%; }
.cabl-banda-membro { display:flex; flex-direction:column; align-items:center; gap:1px; }
.cabl-banda-membro-nome { color:rgba(235,235,235,.85); font-size:11px; font-weight:500; }
.cabl-banda-membro-func { font-size:9px; color:rgba(235,235,235,.4); text-transform:uppercase; letter-spacing:.04em; }

.bdr            { display:flex; align-items:center; gap:6px; padding:4px 0; border-bottom:1px solid var(--ibr); }
.bdr:last-child { border-bottom:none; }

.lwr  { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:2rem; background:var(--ig); }
.lbx  { background:#fff; border-radius:12px; padding:2rem; width:100%; max-width:380px; }
.login-logo { text-align:center; padding:1.5rem 1rem; background:var(--ig); border-radius:8px; margin-bottom:1.5rem; }
.logo-nome  { font-family:Georgia,serif; font-style:italic; font-size:38px; color:#EBEBEB; letter-spacing:1px; }
.logo-sub   { font-family:Arial,sans-serif; font-size:9px; color:var(--ip); letter-spacing:4px; text-transform:uppercase; margin-top:6px; }

.dst-banda { font-size:10px; font-weight:600; color:var(--ip); text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; border-bottom:1px solid var(--igb2); padding-bottom:4px; }
.resumo-banda-membros { display:flex; flex-direction:column; gap:3px; }
.resumo-banda-membro  { display:flex; justify-content:space-between; align-items:baseline; font-size:11px; color:#1a1a1a; padding:2px 0; border-bottom:1px solid var(--igb2); }
.resumo-banda-membro:last-child { border-bottom:none; }
.resumo-banda-membro-nome { font-weight:500; color:var(--ig); }
.resumo-banda-membro-func { font-size:10px; color:var(--igr); }

.btn-lit-drop { font-size:11px; font-weight:500; padding:5px 11px; border-radius:6px; border:1px solid rgba(238,160,112,.5); background:transparent; color:rgba(238,160,112,.85); cursor:pointer; white-space:nowrap; flex-shrink:0; transition:all .15s ease; }
.btn-lit-drop:hover { background:rgba(238,160,112,.18); border-color:var(--ip); color:var(--ip); }

.detalhe-header { background:var(--ig); border-radius:8px; padding:12px 16px; margin-bottom:6px; display:flex; align-items:flex-start; justify-content:space-between; gap:10px; flex-wrap:nowrap; }
.detalhe-header-info    { flex:1; min-width:0; }
.detalhe-header-data    { font-size:14px; font-weight:700; color:#fff; margin-bottom:6px; word-break:break-word; line-height:1.3; }
.detalhe-header-badges  { display:flex; flex-wrap:wrap; gap:4px; }
.detalhe-header-btn     { flex-shrink:0; align-self:flex-start; padding-top:2px; }

@media (max-width: 640px) {
  .app { padding: .6rem; }
  .topbar { padding: 8px 12px; border-radius: 8px; }
  .topbar-nome { font-size: 17px; }
  .card { padding: .8rem 1rem; }
  .csm  { padding: .55rem .75rem; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .stat-n    { font-size: 20px; }
  .dg3 { grid-template-columns: 1fr; }
  .g2  { grid-template-columns: 1fr; }
  .rsb { flex-wrap: wrap; }
  .nav button { font-size: 11px; padding: 4px 8px; }
  .btn { font-size: 12px; padding: 7px 12px; }
  .bsm { font-size: 10px; padding: 2px 6px; }
  .lt-louvor,.lt-leitura,.lt-oracao,.lt-oferta,.lt-criancas,.lt-pregacao,.lt-ceia,.lt-avisos,.lt-amen { font-size:9px; padding:2px 6px; }
  .detalhe-header { flex-direction: column; align-items: stretch; gap: 8px; }
  .detalhe-header-btn { align-self: flex-end; padding-top: 0; }
  .detalhe-header-data { font-size: 13px; }
}

@media (max-width: 560px) {
  .cabl { padding: 14px 12px; align-items: center; text-align: center; }
  .cabl-main { flex-direction: column; align-items: center; gap: 10px; width: 100%; }
  .cabl-logo-col { padding-right: 0; max-width: 100%; width: 100%; align-items: center; }
  .cabl-divider  { width: 40px; height: 1px; margin: 0; align-self: auto; }
  .cabl-info-col { align-items: center; width: 100%; }
  .cabl-data-inline { text-align: center; margin-bottom: 8px; }
  .cabl-grid { grid-template-columns: 1fr 1fr; gap: 8px 14px; max-width: 300px; margin: 0 auto; text-align: center; }
  .cabl-grid-item { align-items: center; }
}

@media (max-width: 480px) {
  .topbar { padding: 8px 10px; }
  .topbar-nome { font-size: 15px; }
  .topbar-sub  { display: none; }
  .topbar-user { max-width: 60px; font-size: 10px; }
  .btn-lit-drop { font-size: 10px; padding: 4px 9px; }
}

@media (max-width: 400px) {
  .ng { gap: 2px; }
  .nc { padding: 3px 2px; }
  .nl { font-size: 7px; }
  .nv { font-size: 9px; }
}

@media (max-width: 380px) {
  .stat-grid { gap: 5px; }
  .stat-n    { font-size: 18px; }
  .stat-l    { font-size: 10px; }
  .cabl-grid { grid-template-columns: 1fr 1fr; gap: 7px 10px; max-width: 260px; }
}

@media (max-width: 320px) {
  .cabl-grid { grid-template-columns: 1fr; max-width: 200px; }
}