/* ═══════════════════════════════════════════
   SELAH — Styles  ·  by B@nerg3s
   Paleta: cielo nocturno + oro de Salmos
   ═══════════════════════════════════════════ */

:root{
  --night:#12132a; --deep:#1c1d3e; --dusk:#2d2352;
  --gold:#c9a24d; --gold-l:#e3c97a; --cream:#f5f0e6;
  --rose:#c47a6c; --muted:#8b8aa0; --ok:#5a9e6f;
  --chat:#181932; --ubbl:#2a2550; --abbl:#1e1f3d;
  --bdr:rgba(201,162,77,.15); --card:rgba(255,255,255,.04);
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{height:100%;overflow:hidden;position:fixed;width:100%}
body{height:100%;overflow:hidden;position:fixed;width:100%;font-family:var(--sans);background:var(--night);color:var(--cream);-webkit-font-smoothing:antialiased;overscroll-behavior:none;-webkit-overflow-scrolling:touch}
#root{height:100%;width:100%;overflow:hidden}
::placeholder{color:var(--muted)}
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-thumb{background:var(--bdr);border-radius:4px}

/* Shell */
.shell{max-width:430px;height:100%;margin:0 auto;display:flex;flex-direction:column;overflow:hidden;background:var(--night)}
.screen{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}

/* Splash */
.splash{height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px}
.splash__t{font-family:var(--serif);font-size:26px;color:var(--gold);letter-spacing:8px;text-transform:uppercase;animation:pulse 2s ease-in-out infinite}

/* Shared */
.hdr{padding:16px 20px 12px;border-bottom:1px solid var(--bdr);background:linear-gradient(180deg,var(--night),var(--chat));display:flex;align-items:center;gap:12px}
.hdr__t{font-family:var(--serif);font-size:18px;color:var(--cream);letter-spacing:2px}
.hdr__s{font-size:10px;color:var(--muted);letter-spacing:3px;text-transform:uppercase;margin-top:3px}
.bi{background:none;border:none;cursor:pointer;padding:4px;display:flex}
.card{background:var(--card);border:1px solid var(--bdr);border-radius:16px;padding:16px 18px;transition:background .2s}
.card--tap{cursor:pointer}
.card--tap:active{background:rgba(255,255,255,.06)}

/* Auth */
.auth{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;position:relative;overflow:hidden}
.auth__brand{font-family:var(--serif);font-size:11px;letter-spacing:6px;text-transform:uppercase;color:var(--gold);opacity:.8}
.auth__verse{font-family:var(--serif);font-size:18px;line-height:1.6;color:var(--cream);text-align:center;max-width:300px;margin-bottom:36px;font-style:italic}
.auth__box{width:100%;max-width:320px;display:flex;flex-direction:column;gap:12px}
.inp{width:100%;border:1px solid var(--bdr);border-radius:14px;padding:14px 18px;background:rgba(255,255,255,.04);font-family:var(--sans);font-size:14px;color:var(--cream);outline:none;transition:border .2s}
.inp:focus{border-color:var(--gold)}
.btn{width:100%;padding:15px;border:1px solid var(--gold);border-radius:14px;background:rgba(201,162,77,.1);font-family:var(--serif);font-size:15px;color:var(--cream);letter-spacing:1px;cursor:pointer;transition:background .3s}
.btn:hover{background:rgba(201,162,77,.2)}
.btn:disabled{opacity:.4;cursor:default}
.btn--fill{background:var(--gold);color:var(--night);font-weight:500;border-color:var(--gold)}
.btn--fill:hover{background:var(--gold-l)}
.auth__toggle{background:none;border:none;color:var(--gold-l);font-family:var(--sans);font-size:12px;cursor:pointer;margin-top:8px;opacity:.7}
.auth__err{font-size:12px;color:var(--rose);text-align:center;margin-top:4px}

/* Home */
.home{flex:1;display:flex;flex-direction:column;position:relative;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}
.home__c{position:relative;z-index:1;padding:40px 24px 24px;flex:1;display:flex;flex-direction:column}
.home__hi{font-size:13px;color:rgba(245,240,230,.6)}
.home__logo{font-family:var(--serif);font-size:11px;letter-spacing:5px;text-transform:uppercase;color:var(--gold);margin-top:8px;opacity:.8}
.streak{display:flex;align-items:center;gap:6px;background:rgba(201,162,77,.12);padding:6px 12px;border-radius:20px;border:1px solid var(--bdr)}
.streak__n{font-size:14px;font-weight:500;color:var(--gold)}
.vcard__lab{font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);opacity:.7;margin-bottom:10px}
.vcard__txt{font-family:var(--serif);font-size:17px;line-height:1.6;color:var(--cream);font-style:italic;margin-bottom:12px}
.vcard__ref{font-size:11px;color:var(--gold-l);opacity:.7}
.home__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
.act{text-align:center;padding:18px 12px;cursor:pointer}
.act__i{font-size:24px;margin-bottom:8px}
.act__l{font-size:11px;color:var(--cream);line-height:1.4;white-space:pre-line}
.home__cta{width:100%;padding:16px;border:1px solid var(--gold);border-radius:14px;background:rgba(201,162,77,.1);cursor:pointer;margin-top:auto;backdrop-filter:blur(10px)}
.home__cta span{font-family:var(--serif);font-size:15px;color:var(--cream);letter-spacing:1px}

/* Stars */
.stars{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.star{position:absolute;border-radius:50%;background:var(--cream)}

/* Chat */
.chat{flex:1;display:flex;flex-direction:column;background:var(--chat);min-height:0}
.chat__msgs{flex:1;overflow-y:auto;overflow-x:hidden;padding:20px 16px;display:flex;flex-direction:column;gap:14px;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}
.msg{display:flex;flex-direction:column;max-width:85%;word-break:break-word}
.msg--u{align-items:flex-end;align-self:flex-end}
.msg--a{align-items:flex-start;align-self:flex-start}
.msg__who{display:flex;align-items:center;gap:5px;margin-bottom:3px;padding-left:4px}
.msg__name{font-size:9px;color:var(--gold);letter-spacing:1px;text-transform:uppercase}
.bbl{padding:12px 16px;font-size:14px;line-height:1.65;white-space:pre-wrap;word-break:break-word;overflow-wrap:break-word}
.bbl--u{border-radius:18px 18px 4px 18px;background:var(--ubbl);color:var(--cream)}
.bbl--a{border-radius:18px 18px 18px 4px;background:var(--abbl);border:1px solid var(--bdr);color:#d0cfe0}
.chips{padding:0 16px 8px;display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;flex-shrink:0;-webkit-overflow-scrolling:touch}
.chip{padding:8px 14px;border-radius:20px;border:1px solid var(--bdr);background:rgba(201,162,77,.06);cursor:pointer;white-space:nowrap;font-family:var(--sans);font-size:12px;color:var(--gold-l);flex-shrink:0}
.chat__bar{padding:12px 16px 20px;border-top:1px solid var(--bdr);background:linear-gradient(0deg,var(--night),var(--chat));display:flex;gap:10px;align-items:flex-end}
.chat__ta{flex:1;resize:none;border:1px solid var(--bdr);border-radius:14px;padding:12px 16px;background:rgba(255,255,255,.04);font-family:var(--sans);font-size:14px;color:var(--cream);outline:none;line-height:1.5;max-height:120px;overflow:auto}
.chat__ta:focus{border-color:var(--gold)}
.chat__send{width:44px;height:44px;border-radius:14px;border:none;display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;transition:background .2s}
.chat__send--on{background:var(--gold)}
.chat__send--off{background:rgba(201,162,77,.2);cursor:default}
.chat__limit{text-align:center;font-size:13px;color:var(--rose);padding:8px 0}
.chat__rem{text-align:center;padding:0 0 8px;font-size:10px;color:var(--muted)}

/* Typing */
.dots{display:flex;gap:5px;padding:8px 4px;align-items:center}
.dot{width:7px;height:7px;border-radius:50%;background:var(--gold);opacity:.5}

/* Plans */
.plans{flex:1;display:flex;flex-direction:column;background:var(--chat);min-height:0}
.plans__list{flex:1;overflow-y:auto;overflow-x:hidden;padding:20px;display:flex;flex-direction:column;gap:14px;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}
.pbar{height:3px;border-radius:2px;background:rgba(255,255,255,.06);overflow:hidden}
.pbar__f{height:100%;background:var(--gold);border-radius:2px;transition:width .5s}
.dnum{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid var(--bdr);background:rgba(201,162,77,.08);font-size:13px;color:var(--muted)}
.dnum--ok{background:rgba(90,158,111,.15);border-color:var(--ok)}
.mark{width:100%;padding:16px;border-radius:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--sans);font-size:14px}
.mark--todo{border:1px solid var(--gold);background:rgba(201,162,77,.1);color:var(--cream)}
.mark--done{border:1px solid var(--ok);background:rgba(90,158,111,.1);color:var(--ok)}

/* Prayer */
.prayer{flex:1;display:flex;flex-direction:column;background:var(--chat);min-height:0}
.prayer__c{flex:1;overflow-y:auto;overflow-x:hidden;padding:20px;display:flex;flex-direction:column;gap:14px;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}
.jinp{display:flex;gap:8px;margin-bottom:16px}
.jinp input{flex:1}
.jinp button{width:40px;height:40px;border-radius:12px;border:1px solid var(--bdr);background:rgba(201,162,77,.08);cursor:pointer;display:flex;align-items:center;justify-content:center}
.pchk{width:24px;height:24px;border-radius:8px;border:1.5px solid var(--bdr);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.pchk--ok{border-color:var(--ok);background:rgba(90,158,111,.15)}
.ptxt{font-size:13px;color:var(--cream);line-height:1.5}
.ptxt--ok{color:rgba(208,207,224,.5);text-decoration:line-through}
.pdel{background:none;border:none;cursor:pointer;padding:4px;opacity:.5}

/* Profile */
.prof{flex:1;display:flex;flex-direction:column;background:var(--chat);min-height:0}
.prof__c{flex:1;overflow-y:auto;overflow-x:hidden;padding:20px;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}
.prof__av{width:72px;height:72px;border-radius:50%;border:2px solid var(--gold);margin:0 auto 14px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--dusk),var(--deep));font-size:28px}
.prof__name{font-family:var(--serif);font-size:20px;color:var(--cream);text-align:center;cursor:pointer}
.prof__ni{border:1px solid var(--gold);border-radius:10px;padding:6px 12px;background:rgba(255,255,255,.04);font-family:var(--sans);font-size:15px;color:var(--cream);outline:none;text-align:center;width:160px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:24px}
.st{text-align:center;padding:16px}
.st__i{font-size:20px}
.st__v{font-family:var(--serif);font-size:24px;color:var(--cream);margin:6px 0 2px}
.st__l{font-size:10px;color:var(--muted);letter-spacing:1px;text-transform:uppercase}
.brand{text-align:center;padding:20px 0;opacity:.4}
.brand__n{font-family:var(--serif);font-size:12px;color:var(--gold);letter-spacing:4px;text-transform:uppercase}
.brand__b{font-size:9px;color:var(--muted);margin-top:4px}
.logout{width:100%;padding:12px;border-radius:12px;border:1px solid rgba(196,122,108,.3);background:rgba(196,122,108,.06);cursor:pointer;font-family:var(--sans);font-size:12px;color:var(--rose);margin-top:8px}

/* Nav */
.nav{display:flex;border-top:1px solid var(--bdr);background:var(--night);padding:6px 0 10px;flex-shrink:0}
.nav__i{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;border:none;background:none;cursor:pointer;padding:5px 0}
.nav__l{font-family:var(--sans);font-size:8px;letter-spacing:1.2px;text-transform:uppercase}

/* Deco */
.deco{text-align:center;margin-top:24px}
.deco__line{width:40px;height:1px;background:var(--gold);opacity:.2;margin:0 auto 16px}
.deco__q{font-family:var(--serif);font-size:14px;color:var(--gold-l);opacity:.4;font-style:italic}
.deco__r{font-size:10px;color:var(--muted);opacity:.4;margin-top:4px}
.empty{text-align:center;padding:40px 20px}
.empty__t{font-family:var(--serif);font-size:16px;color:var(--muted)}
.empty__s{font-size:12px;color:var(--muted);opacity:.6;margin-top:6px}
.fade{animation:fadeIn .3s ease-out}

/* Animations */
@keyframes pulse{0%,100%{opacity:.3;transform:scale(1)}50%{opacity:.8;transform:scale(1.2)}}
@keyframes twinkle{0%,100%{opacity:.2}50%{opacity:.8}}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ─── Modo Vigilia (22:00–06:00) ─── */
.vigilia{--night:#08091a;--deep:#0f1028;--chat:#0e0f25;--card:rgba(255,255,255,.02);--bdr:rgba(201,162,77,.08)}
.vigilia .bbl,.vigilia .ptxt,.vigilia .inp,.vigilia .chat__ta,.vigilia .card{font-size:15px}
.vigilia .vcard__txt{font-size:19px}
.vigilia .hdr__t{font-size:20px}
.vigilia .home__logo,.vigilia .auth__brand{opacity:.5}
.vigilia .streak,.vigilia .chip{opacity:.7}
.vigilia .nav{background:#08091a}
.vigilia .act__i{font-size:28px}
.vigilia .home{background:linear-gradient(180deg,#050610 0%,#08091a 40%,#0f1028 100%) !important}