:root{
    --bg:#0b1020;--card:#121830;--text:#e9eefc;--muted:#aab3d6;--accent:#5aa8ff;--accent2:#80ffd3;--border:#1f2749;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;background:linear-gradient(180deg,#0b1020,#0b1020 60%,#0c1226);color:var(--text)}
.app-header{position:sticky;top:0;background:rgba(11,16,32,.8);backdrop-filter:saturate(120%) blur(8px);border-bottom:1px solid var(--border);padding:14px 18px;display:flex;gap:16px;align-items:center;z-index:10}
.app-header h1{font-size:20px;margin:0;color:var(--accent)}
.search-bar{position:relative;flex:1;max-width:680px}
.search-bar input{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--border);background:#0e1430;color:var(--text);outline:none}
.suggestions{position:absolute;top:44px;left:0;right:0;background:#0f1533;border:1px solid var(--border);border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.35);max-height:380px;overflow:auto}
.suggestions.hidden{display:none}
.suggestions .group{padding:10px 12px;border-top:1px solid var(--border)}
.suggestions .group:first-child{border-top:none}
.suggestions .title{font-size:12px;color:var(--muted);margin-bottom:6px}
.suggestions .item{padding:8px 6px;border-radius:8px;display:flex;justify-content:space-between;color:var(--text);cursor:pointer}
.suggestions .item:hover{background:#141c3d}
.container{max-width:1100px;margin:22px auto;padding:0 16px}
.controls{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.control-group{display:flex;flex-direction:column;gap:6px}
select{padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:#0e1430;color:var(--text)}
.verses{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px}
.verse{padding:8px 10px;border-radius:8px;line-height:1.65}
.verse:hover{background:#121c42}
.verse-num{color:var(--muted);margin-right:8px}
.token{cursor:pointer;border-radius:6px;padding:1px 2px}
.token:hover{background:rgba(90,168,255,.15)}
.tooltip{position:fixed;transform:translate(-50%,-100%);min-width:240px;max-width:360px;background:#0f1533;border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.45);pointer-events:none}
.tooltip.hidden{display:none}
.tooltip-title{padding:10px 12px;border-bottom:1px solid var(--border);font-weight:600;color:var(--accent)}
.tooltip-body{padding:10px 12px;color:var(--text)}
.app-footer{padding:14px 18px;color:var(--muted);border-top:1px solid var(--border);margin-top:28px}

.occ-panel{position:fixed;top:0;right:0;width:420px;max-width:90vw;height:100vh;background:#0f1533;border-left:1px solid var(--border);box-shadow:-12px 0 32px rgba(0,0,0,.4);display:flex;flex-direction:column;z-index:30}
.occ-panel.hidden{display:none}
.occ-header{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--border);background:#0e1430}
.occ-title{font-weight:700;color:var(--accent)}
.occ-sub{font-size:12px;color:var(--muted)}
.occ-close{background:transparent;border:1px solid var(--border);color:var(--text);border-radius:8px;padding:4px 8px;cursor:pointer}
.occ-list{overflow:auto;padding:10px 12px;gap:8px;display:flex;flex-direction:column}
.occ-item{padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:#0e1430}
.occ-ref{color:var(--accent2);margin-bottom:6px}
.occ-controls{display:flex;align-items:center;gap:10px;padding:10px 12px;border-top:1px solid var(--border);background:#0e1430}
.occ-btn{background:transparent;border:1px solid var(--border);color:var(--text);border-radius:8px;padding:6px 10px;cursor:pointer}
.occ-pageinfo{color:var(--muted)}
.occ-perpage{margin-left:auto;background:#0e1430;border:1px solid var(--border);color:var(--text);border-radius:8px;padding:6px 8px}
.hl{background:rgb(255 217 0 / 96%);border-radius:4px;padding:0 2px;color:darkblue}