/* =========================
audio.css
========================= */

body.audio-mode {

margin: 0;

font-family:
'Pyidaungsu',
sans-serif;

background: #f4ecd8;

color: #443300;

overflow-x: hidden;
}

/* =========================
TOP BAR
========================= */

.top-controls {

position: fixed;

top: 0;
left: 0;

width: 100%;

height: 60px;

display: flex;

align-items: center;

justify-content: space-between;

padding: 0 15px;

box-sizing: border-box;

background: #eadebc;

border-bottom:
1px solid #d4c5a0;

z-index: 1000;
}

.back-link {

display: flex;

align-items: center;

gap: 4px;

text-decoration: none;

color: #443300;

font-weight: bold;
}

.nav-icon {

font-size: 28px;
}

.nav-text {

font-size: 18px;
}

.top-title {

font-size: 18px;

font-weight: bold;
}

.setting-btn {

width: 35px;
height: 35px;

border-radius: 8px;

border: 1px solid #443300;

background: #f4ecd8;

font-size: 22px;

cursor: pointer;
}

/* =========================
CONTENT
========================= */

.audio-content {

padding-top: 80px;

padding-bottom: 130px;

max-width: 700px;

margin: 0 auto;
}

.chapter-card {

background: #eadebc;

margin: 15px;

padding: 18px;

border-radius: 12px;

border: 1px solid #443300;
}

.chapter-card h1 {

margin-top: 0;
}

.play-btn {

margin-top: 10px;

padding: 10px 16px;

border: none;

border-radius: 8px;

background: #443300;

color: #f4ecd8;

font-weight: bold;

cursor: pointer;
}

/* =========================
MINI PLAYER
========================= */

.mini-player {

position: fixed;

bottom: 0;
left: 0;

width: 100%;

background: #eadebc;

border-top:
1px solid #443300;

padding: 12px;

box-sizing: border-box;

z-index: 2000;
}

.mini-info {

margin-bottom: 10px;
}

#now-playing {

font-weight: bold;

margin-bottom: 4px;
}

.mini-controls {

display: flex;

gap: 10px;

margin-bottom: 10px;
}

.mini-controls button {

padding: 8px 14px;

border: none;

border-radius: 8px;

background: #443300;

color: #f4ecd8;

font-weight: bold;

cursor: pointer;
}

#seekbar {

width: 100%;
}

/* =========================
SETTING
========================= */

.setting-overlay {

display: none;

position: fixed;

top: 0;
left: 0;

width: 100%;
height: 100%;

background: rgba(0,0,0,0.5);

z-index: 3000;
}

.setting-content {

background: #f4ecd8;

width: 320px;

margin: 80px auto;

border-radius: 12px;

overflow: hidden;
}

.setting-header {

display: flex;

justify-content: space-between;

align-items: center;

padding: 12px;

background: #eadebc;
}

.close-btn {

font-size: 30px;

cursor: pointer;
}

.setting-body {

padding: 15px;
}

.timer-buttons {

display: flex;

flex-wrap: wrap;

gap: 10px;
}

.timer-buttons button {

padding: 10px 14px;

border: none;

border-radius: 8px;

background: #443300;

color: #f4ecd8;

cursor: pointer;
}