body.is-dark a {
  color: #e4e4e4;
  transition: color 0.3s ease;
}
.subtitle{
margin-top: -1rem!important;
}
body.is-dark strong {
color: #f5f5f5 !important;
font-weight: normal!important;
}
@media screen and (max-width: 1023px) {
  body.is-dark .navbar-menu {
    background-color: #1a1a1a;
  }
}
body .has-text-info{
color: #ffe08a!important;
}
.navbar-item {
font-weight: bold;
}
.navbar-item .icon {
margin-right: 0.5rem;
}
.navbar-item .icon.has-text-info {
color: hsl(204, 86%, 53%) !important;
}
@media (max-width: 765px) {
body.is-dark .chapter-content .box{
  background-color: #1a1a1a!important;
  box-shadow: none!important;
}
}
body.is-dark input::placeholder {
color: #e4e4e4;
}
.navbar-item img {

}body.is-dark .button.is-primary {
background-color: #375a7f;
}
.dark-mode-toggle {
cursor: pointer;
}
.hero-body {
padding: 2rem 1.5rem;
}
.card {
height: 100%;
display: flex;
flex-direction: column;
}
.card-content {
flex-grow: 1;
padding: 0.75rem;
display: flex;
flex-direction: column;
}
.novel-card {
transition: transform 0.3s;
position: relative;
overflow: hidden;
height: 340px;
}
.novel-card .image {
height: 180px;
overflow: hidden;
}
.novel-card .image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.novel-card .title {
font-size: 1.1rem;
margin-bottom: 0.4rem;
line-height: 1.3;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.novel-card .subtitle {
font-size: 0.85rem;
line-height: 1.3;
margin-bottom: 0.5rem;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
color: #666;
}
.novel-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.novel-card .progress {
position: absolute;
top: 10px;
right: 10px;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.9);
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 0.8rem;
z-index: 2;
}
.novel-card .status {
position: absolute;
top: 10px;
left: 10px;
padding: 0.2rem 0.5rem;
border-radius: 4px;
font-size: 0.7rem;
z-index: 2;
}
.ongoing {
background-color: #23d160;
color: white;
}
.completed {
background-color: #ffdd57;
color: #363636;
}
.section-title {
margin-bottom: 1.5rem;
position: relative;
display: flex;
align-items: center;
}
.section-title::after {
content: '';
flex-grow: 1;
height: 1px;
background-color: #dbdbdb;
margin-left: 1rem;
margin-right: 0;
}

section:not(.genres-section):not(.announcement-section):not(.recent-updates-section) .section-title::after {
display: none;
}

body.is-dark .section-title::after {
background-color: #333;
}
.genre-card {
height: 100px;
display: flex;
align-items: center;
justify-content: center;
background-size: cover;
background-position: center;
border-radius: 6px;
color: white;
font-weight: bold;
text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
transition: transform 0.3s;
}
.genre-card:hover {
transform: scale(1.05);
}
.announcement-card {
border-left: 4px solid #3273dc;
}
.footer {
background-color: #f5f5f5;
padding: 3rem 1.5rem;
}
.footer a {
color: #4a4a4a;
}
.footer a:hover {
color: #3273dc;
}.language-selector .icon {
color: #3273dc;
margin-right: 0.5rem;
font-size: 1rem;
}
body.is-dark {
background-color: #1a1a1a;
color: #e4e4e4;
}
body.is-dark .navbar {
background-color: transparent !important;
border-bottom: 1px solid #2c2c2c;
}
body.is-dark .navbar-item, 
body.is-dark .navbar-link {
color: #f5f5f5 !important;
}
body.is-dark .navbar-item:hover,
body.is-dark .navbar-link:hover {
background-color: #2a2a2a !important;
color: #ffffff !important;
}
body.is-dark .navbar-dropdown {
background-color: #1a1a1a;
border-top: 1px solid #333;
}
body.is-dark .navbar-dropdown .navbar-item:hover {
background-color: #2a2a2a;
}
body.is-dark .footer {
background-color: #1a1a1a;
color: #f5f5f5;
border-top: 1px solid #2c2c2c;
}
body.is-dark .footer a {
color: #e4e4e4;
}
body.is-dark .footer a:hover {
color: #5c9ce6;
}
body.is-dark .footer .title {
color: #f5f5f5;
}
body.is-dark .footer .input {
background-color: #2a2a2a;
border-color: #2c2c2c;
color: #f5f5f5;
}
body.is-dark .footer .input:focus {
border-color: #375a7f;
box-shadow: 0 0 0 0.125em rgba(55, 90, 127, 0.25);
}
body.is-dark .search-wrapper .input {
background-color: #2a2a2a;
border-color: #2a2a2a;
color: #e4e4e4;
}
body.is-dark .search-wrapper .input:focus {
border-color: #375a7f;
background-color: #333;
box-shadow: 0 0 0 0.125em rgba(55, 90, 127, 0.25);
}
body.is-dark .search-wrapper .input:focus + .icon {
color: #375a7f;
}
body.is-dark .language-selector {
color: #e4e4e4;
}
body.is-dark .language-selector .icon {
color: #5c9ce6;
}
body.is-dark a {
color: #e4e4e4;
transition: color 0.3s ease;
}
body.is-dark a:hover {
color: #5c9ce6;
}
body.is-dark input.input {
background-color: #2a2a2a;
color: #f5f5f5;
border-color: #444;
}
body.is-dark input.input:focus {
border-color: #375a7f;
box-shadow: 0 0 0 0.125em rgba(55, 90, 127, 0.25);
}
body.is-dark .chapter-content .box {
background-color: #1e1e1e;
color: #f5f5f5 !important;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

body.is-dark .chapter-content .box[style*="楷体"],
body.is-dark .chapter-content .box[style*="KaiTi"],
body.is-dark .chapter-content .box[style*="宋体"],
body.is-dark .chapter-content .box[style*="SimSun"],
body.is-dark .chapter-content .box[style*="黑体"],
body.is-dark .chapter-content .box[style*="SimHei"],
body.is-dark .chapter-content .box[style*="明朝体"],
body.is-dark .chapter-content .box[style*="Mincho"],
body.is-dark .chapter-content .box[style*="ゴシック体"],
body.is-dark .chapter-content .box[style*="Gothic"],
body.is-dark .chapter-content .box[style*="바탕체"],
body.is-dark .chapter-content .box[style*="Batang"],
body.is-dark .chapter-content .box[style*="돋움체"],
body.is-dark .chapter-content .box[style*="Dotum"] {
color: #f5f5f5 !important;
}
body.is-dark .breadcrumb a {
color: #7cb3ff;
}
body.is-dark .breadcrumb li.is-active a {
color: #f5f5f5;
}
body.is-dark .chapter-header .title {
color: #f5f5f5;
}
body.is-dark .chapter-header .subtitle {
color: #b5b5b5;
}
body.is-dark .chapter-controls .button {
background-color: #2a2a2a;
color: #f5f5f5;
border-color: #444;
}
body.is-dark .chapter-controls .button:hover {
background-color: #375a7f;
color: #ffffff;
}
body.is-dark .chapter-controls .button.is-primary {
background-color: #375a7f;
border-color: transparent;
}
body.is-dark .chapter-controls .button.is-primary:hover {
background-color: #2c4c6e;
}
.section:first-of-type {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.section:first-of-type .columns {
margin-top: 0;
}

.column.is-6-desktop .novel-card {
height: 340px;
}
.column.is-6-desktop .novel-card .title {
font-size: 1.2rem;
-webkit-line-clamp: 1;
}
.column.is-6-desktop .novel-card .subtitle {
-webkit-line-clamp: 2;
}

body.is-dark .novel-card .subtitle {
color: #b5b5b5;
}
body.is-dark .card-footer {
border-top: 1px solid #2c2c2c;
}

.card-content .title:not(.is-spaced)+.subtitle {
margin-top: 0 !important;
}

.section .container .tabs {
margin-bottom: 0;
}
.tabs li a {
cursor: pointer;
padding: 0.5em 1em;
border-bottom: 2px solid transparent;
transition: all 0.3s ease;
}
.tabs li.is-active a {
border-bottom-color: #3273dc;
color: #3273dc;
}
.tab-content .tab-pane {
display: none;
}
.tab-content .tab-pane.is-active {
display: block;
animation: fadeIn 0.5s;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

body.is-dark .tabs li.is-active a {
border-bottom-color: #375a7f;
color: #5c9ce6;
}

.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
padding: 0;
}

.section-title {
margin: 0 !important;
flex: 1;
padding: 0;
display: flex;
align-items: center;
}

/* Only show line for specific sections */
.genres-section .section-title::after,
.announcement-section .section-title::after,
.recent-updates-section .section-title::after {
content: '';
flex-grow: 1;
height: 1px;
background-color: #dbdbdb;
margin-left: 1rem;
margin-right: 0;
}

body.is-dark .genres-section .section-title::after,
body.is-dark .announcement-section .section-title::after,
body.is-dark .recent-updates-section .section-title::after {
background-color: #333;
}

.section-controls {
display: flex;
align-items: center;
z-index: 1;
padding: 0;
margin-left: 0;
}

.novel-detail-section .box {
background: #fff;
border-radius: 10px;
box-shadow: 0 2px 16px rgba(0,0,0,0.04);
margin-bottom: 2.5rem;
padding: 2.5rem 2rem;
transition: box-shadow 0.3s, transform 0.3s;
animation: fadeInUp 0.7s;
}
.novel-detail-section .box:hover {
box-shadow: 0 8px 32px rgba(50,115,220,0.08);
transform: translateY(-2px) scale(1.01);
}
.novel-info-row {
margin-bottom: 2.5rem;
}
.novel-info-box {
min-height: 260px;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
.novel-cover-wrapper {
box-shadow: 0 4px 16px rgba(50,115,220,0.08);
border-radius: 10px;
overflow: hidden;
padding: 0.5rem;
animation: fadeIn 1s;
height: 100%;
}
.novel-cover {
width: 100%;
height: 100%;
border-radius: 8px;
transition: transform 0.3s;
object-fit: cover;
}
.novel-cover:hover {
transform: scale(1.04);
}
.novel-meta span {
margin-right: 1.5rem;
color: #888;
font-size: 1rem;
}
.novel-actions .button {
margin-right: 0.7rem;
margin-bottom: 0.5rem;
min-width: 110px;
font-weight: 500;
font-size: 1rem;
box-shadow: 0 2px 8px rgba(50,115,220,0.06);
animation: bounceIn 0.7s;
}
.novel-tags {
margin-top: 1rem;
}
.novel-tags .tag {
margin-right: 0.5rem;
margin-bottom: 0.5rem;
font-size: 0.95rem;
padding: 0.5em 1.1em;
border-radius: 20px;
background: #eaeaea;
color: #666;
transition: background 0.3s, color 0.3s, transform 0.2s;
}
.novel-tags .tag:hover {
background: #d0d0d0;
color: #333;
transform: scale(1.08);
}
body.is-dark .novel-tags .tag {
background-color: #3a3a3a;
color: #d4d4d4;
}
body.is-dark .novel-tags .tag:hover {
background-color: #4a4a4a;
color: #ffffff;
}
.novel-description-box {
line-height: 1.8;
color: #333;
font-size: 1.1rem;
background: #f8fafc;
border-left: 4px solid #3273dc;
animation: fadeIn 1s;
}
.chapter-list-box {
background: #f8fafc;
animation: fadeIn 1s;
}
.chapter-list .chapter-item {
padding: 1rem 0.5rem;
border-bottom: 1px solid #eaeaea;
font-size: 1.08rem;
transition: background 0.2s, transform 0.2s;
animation: fadeInUp 0.7s;
}
.chapter-list .chapter-item:last-child {
border-bottom: none;
}
.chapter-list .chapter-item:hover {
background: #f0f4fa;
transform: translateX(8px) scale(1.01);
}
.chapter-list .chapter-item.is-locked {
color: #bbb;
}
.chapter-list .chapter-item.is-locked .icon {
color: #bbb;
}
.animate-fade-in {
animation: fadeIn 1s;
}
.animate-fade-in-up {
animation: fadeInUp 0.7s;
}
.animate-bounce-in {
animation: bounceIn 0.7s;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(40px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes bounceIn {
0% { opacity: 0; transform: scale(0.8); }
60% { opacity: 1; transform: scale(1.05); }
100% { opacity: 1; transform: scale(1); }
}
@media (max-width: 768px) {
.novel-info-row { flex-direction: column; }
.novel-info-box { padding: 1rem; }
.novel-cover-wrapper { margin-bottom: 1.5rem; }
.novel-detail-section .box { padding: 1.2rem 0.7rem; }
}

/* Add novel-grid style */
.novel-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1.5rem;
}

@media screen and (max-width: 768px) {
.novel-grid {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
}
}

@media screen and (max-width: 480px) {
.novel-grid {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.5rem;
}
}

.cultivation-level {
position: absolute;
top: 10px;
right: 10px;
padding: 0.2rem 0.5rem;
border-radius: 4px;
font-size: 0.7rem;
background-color: rgba(255, 255, 255, 0.9);
color: #333;
font-weight: bold;
z-index: 2;
}

.novel-cover-wrapper .cultivation-level {
padding: 0.3rem 0.6rem;
margin: 5px;
}

.tag.is-cultivation {
background-color: #eef8ff;
color: #3273dc;
}

.novel-stats {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
margin-top: 0.5rem;
font-size: 0.8rem;
color: #777;
}

.novel-stats span {
display: flex;
align-items: center;
}
@media screen and (min-width: 1024px) {
  .section {
      padding: 0;
  }
}
.novel-stats i {
margin-right: 0.3rem;
color: #3273dc;
}

.section-title.recommendations-title {
margin-bottom: 1.5rem !important;
}

.recommendations-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
margin: 0;
padding: 0;
}

.section.animate-fade-in-up.mt-6 .container {
padding: 0;
}

.recommendations-grid .card {
margin: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}

.recommendations-grid .card-image {
position: relative;
width: 100%;
height: 180px;
overflow: hidden;
}

.recommendations-grid .card-image figure {
height: 100%;
margin: 0;
}

.recommendations-grid .card-image img {
width: 100%;
height: 100%;
object-fit: cover;
}

.recommendations-grid .card-content {
flex-grow: 1;
padding: 0.75rem;
}

@media screen and (max-width: 1023px) {
.recommendations-grid {
  grid-template-columns: repeat(2, 1fr);
}
}

@media screen and (max-width: 480px) {
.recommendations-grid {
  grid-template-columns: repeat(1, 1fr);
}
}

.novel-info-box:hover,
.novel-description-box:hover,
.chapter-list-box:hover {
transform: none !important;
box-shadow: 0 2px 16px rgba(0,0,0,0.04) !important;
}

.chapter-list .chapter-item:hover {
background: #f0f4fa;
transform: translateX(8px) scale(1.01);
}

body.is-dark .novel-info-box:hover,
body.is-dark .novel-description-box:hover,
body.is-dark .chapter-list-box:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}

.chapter-content-section {
padding: 2rem 0;
margin: 0 auto;
}

.chapter-content-section .container {
max-width: 1200px;
width: 100%;
padding: 0 1.5rem;
margin: 0 auto;
}
@media screen and (max-width: 768px) {

.chapter-content-section .container {
  padding: 0 10px;
}
}

.chapter-header {
animation: fadeInDown 0.5s;
}

.chapter-content {
font-size: 1.2rem;
line-height: 1.6;
letter-spacing: 0.01em;
animation: fadeIn 1s;
}

.chapter-content .box {
padding: 2rem;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
margin: 0;
width: 100%;
}

.chapter-controls {
animation: fadeInUp 0.5s;
padding: 0 1rem;
}

.chapter-controls .button {
min-width: 120px;
transition: all 0.3s ease;
}

.chapter-controls .button:hover {
transform: translateY(-2px);
}

.breadcrumb {
animation: fadeInDown 0.5s;
padding: 0 1rem;
}

@media screen and (max-width: 768px) {
  .chapter-controls {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 8px;
    padding: 0 10px;
  }

  .chapter-controls .button {
    flex: 1;
    min-width: 0;
    padding: 0 8px;
    height: 40px;
    font-size: 0.9rem;
  }

  .chapter-controls .button .icon {
    margin: 0 2px;
  }

  .chapter-controls .button span:not(.icon) {
    display: none;
  }

  .chapter-controls .button.is-primary span:not(.icon) {
    display: none;
  }

  /* Hide breadcrumb on non-PC devices */
  .breadcrumb {
    display: none;
  }
}

@media screen and (max-width: 320px) {
.chapter-controls {
  padding: 0 5px;
  gap: 5px;
}

.chapter-controls .button {
  padding: 0 5px;
  height: 36px;
}
}

.reading-settings-panel {
position: fixed;
top: 50%;
right: 80px;
transform: translateY(-50%);
width: 300px;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
z-index: 1000;
padding: 1.5rem;
}

.panel-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}

.panel-header .title {
margin: 0;
}

.setting-group {
margin-bottom: 1.5rem;
}

.setting-group:last-child {
margin-bottom: 0;
}

.setting-group .label {
margin-bottom: 0.5rem;
color: #363636;
font-weight: 600;
}

.slider {
width: 100%;
height: 6px;
background: #dbdbdb;
border-radius: 3px;
outline: none;
-webkit-appearance: none;
}

.slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 16px;
height: 16px;
background: #3273dc;
border-radius: 50%;
cursor: pointer;
}

.size-labels {
display: flex;
justify-content: space-between;
margin-top: 0.5rem;
color: #666;
font-size: 0.9rem;
}

.color-options {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.8rem;
margin-top: 0.5rem;
}

.color-btn {
width: 40px;
height: 40px;
border-radius: 8px;
border: 2px solid #dbdbdb;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}

.color-btn:hover {
transform: scale(1.1);
border-color: #3273dc;
}

.color-btn.active {
border-color: #3273dc;
border-width: 3px;
}

.color-btn:hover::after {
content: attr(title);
position: absolute;
bottom: -25px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 2px 8px;
border-radius: 4px;
font-size: 12px;
white-space: nowrap;
z-index: 1000;
}

.chapter-content .box {
transition: background-color 0.3s ease;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
font-size: 1.2rem;
line-height: 1.6;
letter-spacing: 0.01em;
}

.chapter-content .box[style*="楷体"],
.chapter-content .box[style*="KaiTi"] {
font-family: "楷体", "KaiTi", "DFKai-SB", "BiauKai", serif !important;
}

.chapter-content .box[style*="宋体"],
.chapter-content .box[style*="SimSun"] {
font-family: "宋体", "SimSun", "NSimSun", "FangSong", serif !important;
}

.chapter-content .box[style*="黑体"],
.chapter-content .box[style*="SimHei"] {
font-family: "黑体", "SimHei", "Microsoft YaHei", "PingFang SC", sans-serif !important;
}

.chapter-content .box[style*="明朝体"],
.chapter-content .box[style*="Mincho"] {
font-family: "明朝体", "Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif !important;
}

.chapter-content .box[style*="ゴシック体"],
.chapter-content .box[style*="Gothic"] {
font-family: "ゴシック体", "Gothic", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif !important;
}

.chapter-content .box[style*="바탕체"],
.chapter-content .box[style*="Batang"] {
font-family: "바탕체", "Batang", "BatangChe", "Gulim", serif !important;
}

.chapter-content .box[style*="돋움체"],
.chapter-content .box[style*="Dotum"] {
font-family: "돋움체", "Dotum", "DotumChe", "Gulim", sans-serif !important;
}

body.is-dark .chapter-content .box,
body.is-dark .chapter-content .box p,
body.is-dark .chapter-content .box div,
body.is-dark .chapter-content .box span {
color: #f5f5f5 !important;
}

.chapter-content .box[style*="background-color: #2c3e50"] {
color: #ffffff;
}

body.is-dark .chapter-content .box[style*="background-color: #ffffff"],
body.is-dark .chapter-content .box[style*="background-color: #f4ecd8"],
body.is-dark .chapter-content .box[style*="background-color: #e9ebee"],
body.is-dark .chapter-content .box[style*="background-color: #cce8cf"],
body.is-dark .chapter-content .box[style*="background-color: #eae4d3"],
body.is-dark .chapter-content .box[style*="background-color: #d4e3ff"],
body.is-dark .chapter-content .box[style*="background-color: #ffe7e7"] {
color: #333333;
}

.reading-settings {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1000;
}

.reading-settings .button {
width: 40px;
height: 40px;
border-radius: 50%;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}

.reading-settings .button:hover {
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.font-system {
font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

.font-serif {
font-family: "Times New Roman", "Noto Serif", Georgia, serif;
}

.font-sans {
font-family: "Roboto", "Open Sans", "Noto Sans", Arial, sans-serif;
}

body.is-dark .reading-settings-panel {
background-color: #1e1e1e;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
body.is-dark .reading-settings-panel .title {
color: #f5f5f5;
}
body.is-dark .setting-group .label {
color: #f5f5f5;
}
body.is-dark .size-labels {
color: #b5b5b5;
}
body.is-dark .slider {
background: #363636;
}
body.is-dark .slider::-webkit-slider-thumb {
background: #375a7f;
}
body.is-dark .color-btn {
border-color: #444;
}
body.is-dark .color-btn:hover {
border-color: #5c9ce6;
}
body.is-dark .color-btn.active {
border-color: #5c9ce6;
}
body.is-dark .reading-settings .button {
background-color: #2a2a2a;
color: #f5f5f5;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
body.is-dark .reading-settings .button:hover {
background-color: #375a7f;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.navbar-item .icon.has-text-primary {
color: hsl(171, 100%, 41%) !important;
}
.navbar-item .icon.has-text-info {
color: hsl(204, 86%, 53%) !important;
}
.navbar-item .icon.has-text-warning {
color: hsl(48, 100%, 67%) !important;
}
.navbar-item .icon.has-text-danger {
color: hsl(348, 100%, 61%) !important;
}
.navbar-item .icon.has-text-success {
color: hsl(141, 71%, 48%) !important;
}
@media screen and (max-width: 768px) {
.title.is-2{
  font-size: 1.5rem;
}
.chapter-content .box{
  box-shadow:none;
  padding: 0;
}
.reading-settings-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
  width: calc(100% - 40px);
  max-width: 350px;
  z-index: 2000;
}

.reading-settings {
  bottom: 10px;
  right: 10px;
}
}

.search-wrapper {
position: relative;
margin: 0 1rem;
}
.search-wrapper .control {
width: 100%;
}
.search-wrapper .input {
width: 100%;
height: 2.5em;
padding: 0.5em 1em 0.5em 2.5em;
border: 1px solid #dbdbdb;
border-radius: 50px;
background-color: #f5f5f5;
transition: all 0.3s ease;
font-size: 0.95rem;
}
.search-wrapper .input:focus {
border-color: #3273dc;
background-color: white;
box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.15);
}
.search-wrapper .icon {
position: absolute;
left: 1em;
top: 50%;
transform: translateY(-50%);
color: #7a7a7a;
width: 1em;
height: 1em;
pointer-events: none;
transition: color 0.3s ease;
}
.search-wrapper .input:focus + .icon {
color: #3273dc;
}
body.is-dark .search-wrapper .input {
background-color: #2a2a2a;
border-color: #2a2a2a;
color: #e4e4e4;
}
body.is-dark .search-wrapper .input:focus {
border-color: #375a7f;
background-color: #333;
box-shadow: 0 0 0 0.125em rgba(55, 90, 127, 0.25);
}
body.is-dark .search-wrapper .input:focus + .icon {
color: #375a7f;
}
a.navbar-item:focus{
    background-color: transparent!important;
  }

/* Active language highlighting for desktop navbar */
.navbar-dropdown .navbar-item.is-active {
background-color: #f0f4fa !important;
color: #2160c4 !important;
font-weight: bold;
}

body.is-dark .navbar-dropdown .navbar-item.is-active {
background-color: #1a1a1a !important;
color: #5c9ce6 !important;
font-weight: bold;
}