:root{
    --bg:#FFF9EE;
    --card:#FFFFFF;
    --ink:#2B2118;
    --ink-soft:#7A6A57;
    --teal:#2F8FE0;
    --teal-dark:#1D3A7C;
    --teal-pale:#E1F0FD;
    --gold:#FFB627;
    --gold-dark:#946200;
    --gold-pale:#FFF1D2;
    --coral:#F0563A;
    --coral-dark:#A0301C;
    --coral-pale:#FFE3DB;
    --purple:#8B5FBF;
    --purple-dark:#523477;
    --purple-pale:#F1E9FB;
    --green:#2FAE6B;
    --green-dark:#1B6B41;
    --green-pale:#E1F6EA;
    --border:#F1E0BE;
    --radius:14px;
    --shadow:0 2px 10px rgba(139,95,29,0.10);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#1A1610; --card:#241F17; --ink:#F3ECDD; --ink-soft:#B8AC94; --border:#3A3225;
      --gold-pale:#3A2E0E; --coral-pale:#3A1F16; --teal-pale:#12253C; --purple-pale:#241A38; --green-pale:#123322;
      --shadow:0 2px 10px rgba(0,0,0,0.4);
    }
  }
  :root[data-theme="dark"]{
    --bg:#1A1610; --card:#241F17; --ink:#F3ECDD; --ink-soft:#B8AC94; --border:#3A3225;
    --gold-pale:#3A2E0E; --coral-pale:#3A1F16; --teal-pale:#12253C; --purple-pale:#241A38; --green-pale:#123322;
    --shadow:0 2px 10px rgba(0,0,0,0.4);
  }
  *{box-sizing:border-box;}
  :root{ padding-top:env(safe-area-inset-top, 0px); padding-bottom:env(safe-area-inset-bottom, 0px); }
  html{ scroll-padding-top:env(safe-area-inset-top, 0px); }
  body{
    margin:0;
    font-family:'Inter',sans-serif;
    background:
      radial-gradient(circle at 8% 0%, rgba(255,182,39,0.16), transparent 40%),
      radial-gradient(circle at 95% 10%, rgba(139,95,191,0.12), transparent 45%),
      var(--bg);
    color:var(--ink);
    min-height:100vh;
  }
  h1,h2,h3{font-family:'Fraunces',serif; margin:0; font-weight:600;}
  a{color:inherit;}
  .app{display:flex; min-height:100vh;}
  .sidebar{
    width:230px; flex-shrink:0; color:#fff;
    background:linear-gradient(160deg, var(--purple-dark) 0%, var(--teal-dark) 55%, #12294F 100%);
    padding:24px 14px; display:flex; flex-direction:column; gap:4px;
    position:relative;
  }
  .brand{font-family:'Fraunces',serif; font-size:21px; font-weight:700; padding:0 10px 6px; letter-spacing:.2px;}
  .brand .cross{color:var(--gold); margin-right:4px;}
  .brand small{display:block; font-family:'Inter',sans-serif; font-size:12px; font-weight:400; opacity:.8; margin-top:2px;}
  .verse{font-family:'Fraunces',serif; font-style:italic; font-size:12.5px; line-height:1.5; color:#FFE9B8; padding:0 10px 20px; opacity:.95;}
  .nav-btn{
    display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px;
    background:transparent; border:none; color:#F3EFFF; font-size:14px; font-family:'Inter',sans-serif;
    cursor:pointer; text-align:left; width:100%; font-weight:500;
  }
  .nav-btn:hover{background:rgba(255,255,255,0.10);}
  .nav-btn.active{background:rgba(255,182,39,0.24); color:#fff; font-weight:700; box-shadow:inset 3px 0 0 var(--gold);}
  .main{flex:1; padding:28px 34px; max-width:1100px;}
  .topbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; gap:16px; flex-wrap:wrap;}
  #pageTitle{background:linear-gradient(90deg, var(--purple-dark), var(--coral-dark)); -webkit-background-clip:text; background-clip:text; color:transparent;}
  .toggle-row{display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--border); border-radius:999px; padding:6px 14px; box-shadow:var(--shadow); font-size:13px;}
  .switch{position:relative; width:40px; height:22px; flex-shrink:0;}
  .switch input{opacity:0; width:0; height:0;}
  .slider{position:absolute; cursor:pointer; inset:0; background:#E5D9BC; border-radius:999px; transition:.2s;}
  .slider:before{content:""; position:absolute; height:16px; width:16px; left:3px; top:3px; background:white; border-radius:50%; transition:.2s;}
  input:checked + .slider{background:var(--gold);}
  input:checked + .slider:before{transform:translateX(18px);}
  .card{background:var(--card); border:1px solid var(--border); border-top:4px solid var(--gold); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow); margin-bottom:16px;}
  .card:nth-of-type(4n+2){border-top-color:var(--teal);}
  .card:nth-of-type(4n+3){border-top-color:var(--coral);}
  .card:nth-of-type(4n+4){border-top-color:var(--purple);}
  .grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
  .badge{display:inline-block; font-size:11.5px; padding:3px 9px; border-radius:999px; background:var(--teal-pale); color:var(--teal-dark); margin:2px 4px 2px 0; font-weight:700;}
  .badge.gold{background:var(--gold-pale); color:var(--gold-dark);}
  .badge.coral{background:var(--coral-pale); color:var(--coral-dark);}
  .badge.purple{background:var(--purple-pale); color:var(--purple-dark);}
  .badge.green{background:var(--green-pale); color:var(--green-dark);}
  .row{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
  .between{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;}
  button{
    font-family:'Inter',sans-serif; cursor:pointer; border-radius:9px; border:1px solid var(--border);
    background:#fff; padding:8px 14px; font-size:13.5px; font-weight:700; color:var(--ink);
  }
  button.primary{background:linear-gradient(120deg, var(--gold), var(--coral)); color:#fff; border-color:transparent;}
  button.primary:hover{filter:brightness(1.06);}
  button.ghost{background:transparent; border-color:transparent; color:var(--ink-soft);}
  button.wa{background:#1F8A4C; color:#fff; border-color:#1F8A4C; padding:6px 11px; font-size:12.5px;}
  button.danger-outline{color:var(--coral-dark); border-color:var(--coral-pale);}
  button:hover{opacity:.92;}
  input[type=text], input[type=tel], input[type=email], input[type=number], input[type=date], input[type=password], textarea, select{
    font-family:'Inter',sans-serif; padding:8px 10px; border-radius:8px; border:1px solid var(--border);
    font-size:13.5px; width:100%; background:#FFFDF7; color:var(--ink);
  }
  textarea{resize:vertical; min-height:70px;}
  label{font-size:12px; color:var(--ink-soft); font-weight:700; display:block; margin-bottom:4px;}
  .field{margin-bottom:10px;}
  .list-item{border:1px solid var(--border); border-left:4px solid var(--teal); border-radius:12px; padding:12px 14px; margin-bottom:10px; background:#FFFDF7;}
  .list-item h3{font-size:15px;}
  .muted{color:var(--ink-soft); font-size:12.5px;}
  .search{max-width:280px;}
  .modal-bg{position:fixed; inset:0; background:rgba(43,33,24,0.5); display:flex; align-items:center; justify-content:center; z-index:50; padding:20px;}
  .modal{background:#fff; border-radius:16px; padding:22px 24px; max-width:520px; width:100%; max-height:86vh; overflow-y:auto; border-top:5px solid var(--gold);}
  .tag-check{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--border); border-radius:8px; padding:5px 9px; font-size:12.5px; margin:3px 4px 3px 0; cursor:pointer; background:#FFFDF7;}
  .tag-check input{width:auto;}
  .empty{color:var(--ink-soft); font-size:13.5px; padding:20px 0; text-align:center;}
  .hero{
    background:linear-gradient(120deg, var(--purple) 0%, var(--coral) 55%, var(--gold) 100%);
    color:#fff; border-radius:20px; padding:28px 30px; margin-bottom:18px; position:relative; overflow:hidden;
  }
  .hero::before{
    content:""; position:absolute; inset:0; opacity:.18; pointer-events:none;
    background:repeating-conic-gradient(from 0deg, rgba(255,255,255,0.5) 0deg 4deg, transparent 4deg 18deg);
    -webkit-mask-image:radial-gradient(circle at 85% -10%, black 0%, transparent 55%);
    mask-image:radial-gradient(circle at 85% -10%, black 0%, transparent 55%);
  }
  .hero-inner{position:relative;}
  .hero .verse-hero{font-family:'Fraunces',serif; font-style:italic; font-size:14.5px; opacity:.97; margin-bottom:10px;}
  .date-block{display:flex; align-items:flex-end; gap:10px; margin-top:10px; flex-wrap:wrap;}
  .date-day{
    font-family:'Fraunces',serif; font-weight:700; font-size:40px; line-height:1;
    background:rgba(255,255,255,0.22); border:1px solid rgba(255,255,255,0.4);
    border-radius:12px; padding:10px 16px; backdrop-filter:blur(2px);
  }
  .date-meta{display:flex; flex-direction:column; margin-left:4px; padding-bottom:6px;}
  .date-meta span{font-size:12.5px; letter-spacing:.14em; opacity:.9;}
  .date-meta strong{font-family:'Fraunces',serif; font-size:20px;}
  .countdown{font-size:13px; opacity:.95; margin-top:8px; font-weight:600;}
  .pill-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px;}
  .stat{background:rgba(255,255,255,0.22); border-radius:10px; padding:10px 14px; min-width:110px;}
  .stat .n{font-size:20px; font-weight:700; font-family:'Fraunces',serif;}
  .stat .l{font-size:11.5px; opacity:.9;}
  .prayer{border-left:3px solid var(--purple); padding:10px 14px; background:var(--purple-pale); border-radius:0 10px 10px 0; margin-bottom:10px;}
  table{width:100%; border-collapse:collapse; font-size:13px;}
  th{text-align:left; font-size:11.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.03em; padding:6px 8px; border-bottom:1px solid var(--border);}
  td{padding:8px 8px; border-bottom:1px solid var(--border); vertical-align:top;}
  .msg-item{padding:10px 12px; border-radius:10px; background:var(--teal-pale); margin-bottom:8px; border-left:3px solid var(--teal);}
  .copybox{background:#FDF6E5; border:1px dashed var(--border); border-radius:10px; padding:14px; white-space:pre-wrap; font-size:12.8px; font-family:'Inter',monospace; line-height:1.6;}
  @media(max-width:820px){
    .app{flex-direction:column;}
    .sidebar{width:100%; flex-direction:row; overflow-x:auto; padding:10px 12px;}
    .brand, .verse{display:none;}
    .nav-btn{white-space:nowrap; width:auto;}
    .main{padding:18px 16px;}
    .grid2{grid-template-columns:1fr;}
  }

  /* ---- extras da versão Supabase ---- */
  #menu{display:contents;}
  a.wa-btn{display:inline-block; background:#1F8A4C; color:#fff; padding:6px 11px; border-radius:9px; font-size:12.5px; font-weight:700; text-decoration:none;}
  a.wa-btn:hover{opacity:.92;}
  .login-erro{color:var(--coral-dark); font-size:13px; margin:6px 0 0; display:none;}
  .aviso-config{border-top-color:var(--coral)!important;}
  .aviso-config code{background:var(--gold-pale); padding:2px 6px; border-radius:6px; font-size:12.5px;}
  .toggle-row button{padding:6px 12px; font-size:12.5px;}