/* Shared, fixed navigation with room for the phone's home indicator. */
:root { --bottom-nav-height:calc(72px + env(safe-area-inset-bottom, 0px)); }
body { padding-bottom:var(--bottom-nav-height); }
.app-bottom-nav {
  position:fixed; inset:auto 0 0; z-index:100;
  display:flex; justify-content:center; gap:8px;
  height:var(--bottom-nav-height); box-sizing:border-box;
  padding:8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  background:#163e49; border-top:1px solid #d5b57770;
  box-shadow:0 -5px 24px #102b3526;
}
.app-bottom-nav > a,.app-bottom-nav > button,.library-page .app-bottom-nav > a {
  position:relative; display:flex!important; align-items:center; justify-content:center; flex-direction:column; gap:3px;
  flex:1 1 0; max-width:210px; min-width:0; min-height:48px;
  margin:0; padding:4px 6px; border:0; border-radius:12px;
  background:transparent; color:#e2eceb!important; text-decoration:none;
  font:600 14px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  text-align:center; cursor:pointer; touch-action:manipulation;
}
.app-bottom-nav > [aria-current="page"],.library-page .app-bottom-nav > [aria-current="page"] {
  background:#2c5761; color:#f5d9a2!important;
}
.app-bottom-nav > [aria-current="page"]::before {
  content:""; position:absolute; top:0; width:26px; height:3px;
  background:#efd29b; border-radius:0 0 4px 4px;
}
.app-bottom-nav > a:hover,.app-bottom-nav > button:hover { background:#2c5761; }
.app-bottom-nav > :focus-visible { outline:2px solid #efd29b; outline-offset:0; }
.library-page:not(.is-reading) .reading-bar { display:none; }
.library-page .library-player { bottom:var(--bottom-nav-height); padding-bottom:14px; }
.library-page.has-library-audio .library-shell { padding-bottom:calc(220px + var(--bottom-nav-height)); }
@media(max-width:380px) {
  .app-bottom-nav { gap:4px; padding-left:6px; padding-right:6px; }
  .app-bottom-nav > a,.app-bottom-nav > button,.library-page .app-bottom-nav > a { font-size:12px; }
}
@media print { .app-bottom-nav { display:none; } body { padding-bottom:0; } }

/* Decorative SVG masks keep the translated button text and touch area intact. */
.app-bottom-nav > a::after,.app-bottom-nav > button::after { content:""; display:block; order:-1; width:20px; height:20px; flex:0 0 20px; background:currentColor; -webkit-mask:var(--nav-icon) center/contain no-repeat; mask:var(--nav-icon) center/contain no-repeat; }
.app-bottom-nav > :nth-child(1) { --nav-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M7%203v4m10-4v4M3%2010h18M7%2014h2m3%200h2m3%200h1M7%2017h2m3%200h2%22%2F%3E%3C%2Fsvg%3E"); }
.app-bottom-nav > :nth-child(2) { --nav-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%223%22%20width%3D%2216%22%20height%3D%2218%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M4%208h16M8%2012h8m-8%204h5%22%2F%3E%3C%2Fsvg%3E"); }
.app-bottom-nav > :nth-child(3) { --nav-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%205c-3-2-6-2-9-1v15c3-1%206-1%209%201%203-2%206-2%209-1V4c-3-1-6-1-9%201Zm0%200v15%22%2F%3E%3C%2Fsvg%3E"); }
.app-bottom-nav > :nth-child(4) { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M7 8h4v4H7zM15 8h2m-2 4h2M7 16h10'/%3E%3C/svg%3E"); }
@media(max-width:440px){.app-bottom-nav{gap:3px;padding-left:5px;padding-right:5px}.app-bottom-nav>a,.app-bottom-nav>button,.library-page .app-bottom-nav>a{font-size:12px;padding-left:2px;padding-right:2px}}