/* =========================================================
   BHAGAVATAM VOICE RECORDER — light saffron / cream theme
========================================================= */

.bvr-tool {
	max-width: 900px;
	margin: 18px auto;
	padding: 12px 10px 10px;
	background: #FFFDF7;
	border: 2px solid #C97A1E;
	border-radius: 12px;
	box-sizing: border-box;
	text-align: center;
	color: #3a2c1a;
	line-height: 1.4;
	box-shadow: 0 2px 10px rgba(166, 83, 26, .12);
	font-size: 14px;
}
.bvr-tool *, .bvr-float * { box-sizing: border-box; }
.bvr-tool.bvr-is-rec { border-color: #D84315; box-shadow: 0 0 0 3px rgba(216, 67, 21, .18); }
.bvr-loading { padding: 10px; font-weight: 700; color: #A6531A; }

.bvr-head {
	display: flex; justify-content: space-between; align-items: center;
	gap: 8px; flex-wrap: wrap; margin-bottom: 10px;
}
.bvr-title { font-weight: 800; color: #A6531A; font-size: 15px; text-align: left; }
.bvr-sub { font-weight: 700; color: #3a2c1a; }
.bvr-tool .bvr-lang button {
	border: 1.5px solid #C97A1E; background: #FFF6E8; color: #A6531A;
	font-weight: 800; font-size: 12px; padding: 4px 10px; margin: 0 0 0 4px;
	border-radius: 20px; cursor: pointer; line-height: 1.3; min-height: 0;
}
.bvr-tool .bvr-lang button.on { background: #C97A1E; color: #fff; }

.bvr-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.bvr-tool button.bvr-btn, .bvr-float button.bvr-fbtn {
	border: 0; border-radius: 8px; padding: 10px 14px; color: #fff;
	font-weight: 800; font-size: 14px; cursor: pointer; line-height: 1.2;
	min-height: 42px; margin: 0; text-transform: none; letter-spacing: 0;
	transition: transform .08s, opacity .15s; box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}
.bvr-tool button.bvr-btn:active, .bvr-float button.bvr-fbtn:active { transform: scale(.95); }
.bvr-tool button.bvr-btn:disabled { opacity: .35; cursor: not-allowed; transform: none; }
.bvr-tool button[hidden], .bvr-float button[hidden], .bvr-float input[hidden] { display: none !important; }
.bvr-b-record { background: #D84315 !important; }
.bvr-b-stop   { background: #A6531A !important; }
.bvr-b-play   { background: #2E7D32 !important; }
.bvr-b-pause  { background: #C97A1E !important; }
.bvr-b-dl     { background: #1565C0 !important; }
.bvr-b-save   { background: #6A1B9A !important; }

.bvr-tool button.bvr-mini {
	border: 1.5px solid #C97A1E; background: #FFF6E8; color: #A6531A;
	font-weight: 800; font-size: 12px; padding: 5px 9px; border-radius: 7px;
	cursor: pointer; line-height: 1.2; margin: 0; min-height: 0; white-space: nowrap;
}
.bvr-tool button.bvr-mini.bvr-red { border-color: #C62828; color: #C62828; background: #FFF1F0; }

/* recording row */
.bvr-rec { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 10px; font-weight: 800; font-size: 18px; color: #D84315; }
.bvr-rec[hidden] { display: none; }
.bvr-dot { width: 12px; height: 12px; border-radius: 50%; background: #D84315; animation: bvrPulse 1s infinite; }
@keyframes bvrPulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.bvr-level { display: inline-block; width: 120px; height: 8px; background: #FFE0B2; border-radius: 4px; overflow: hidden; }
.bvr-level i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #7CB342, #FBC02D, #E64A19); transition: width .06s linear; }

/* seek area */
.bvr-seekarea { margin: 12px auto 0; max-width: 760px; }
.bvr-seekarea[hidden] { display: none; }
.bvr-seekrow { display: flex; align-items: center; gap: 8px; }
.bvr-range {
	-webkit-appearance: none; appearance: none; flex: 1; width: 100%; height: 10px;
	border-radius: 6px; border: 0; margin: 0; padding: 0; outline: none; cursor: pointer;
	background: linear-gradient(to right, #C97A1E 0%, #C97A1E var(--p, 0%), #FFE0B2 var(--p, 0%), #FFE0B2 100%);
	touch-action: none;
}
.bvr-range::-webkit-slider-thumb {
	-webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%;
	background: #A6531A; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); cursor: grab;
}
.bvr-range::-moz-range-thumb {
	width: 20px; height: 20px; border-radius: 50%; background: #A6531A;
	border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); cursor: grab;
}
.bvr-range::-moz-range-track { background: transparent; }
.bvr-timerow { display: flex; justify-content: space-between; font-size: 13px; font-weight: 800; margin: 4px 52px 0; color: #3a2c1a; }
.bvr-opts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 16px; margin-top: 8px; font-size: 13px; font-weight: 700; color: #3a2c1a; }
.bvr-opts label { display: inline-flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; }
.bvr-opts select { font-weight: 800; color: #3a2c1a; background: #FFF6E8; border: 1.5px solid #C97A1E; border-radius: 6px; padding: 2px 4px; height: auto; min-height: 0; }
.bvr-opts .bvr-offset { width: 90px; }
.bvr-opts input[type=checkbox] { width: 18px; height: 18px; accent-color: #C97A1E; margin: 0; }

.bvr-status { margin-top: 10px; font-size: 14px; font-weight: 800; color: #3a2c1a; }
.bvr-heard { margin-top: 4px; font-size: 12px; color: #6d5a43; font-weight: 600; min-height: 1em; }

/* save box */
.bvr-savebox { margin: 10px auto 0; max-width: 520px; padding: 10px; background: #FFF6E8; border: 1.5px dashed #C97A1E; border-radius: 10px; text-align: left; }
.bvr-savebox[hidden] { display: none; }
.bvr-savebox label { display: block; font-weight: 800; font-size: 13px; margin-bottom: 8px; color: #3a2c1a; }
.bvr-savebox label[hidden] { display: none; }
.bvr-tool .bvr-in {
	display: block; width: 100%; margin-top: 4px; padding: 8px 10px; font-size: 15px;
	font-weight: 700; color: #3a2c1a; background: #fff; border: 1.5px solid #C97A1E; border-radius: 7px;
}
.bvr-tool .bvr-in:focus { background: #FFF9C4; color: #000; outline: 2px solid #C97A1E; }
.bvr-savebtns { display: flex; gap: 8px; justify-content: center; }
.bvr-progress { height: 8px; background: #FFE0B2; border-radius: 4px; overflow: hidden; margin-top: 8px; }
.bvr-progress[hidden] { display: none; }
.bvr-progress i { display: block; height: 100%; width: 0; background: #6A1B9A; transition: width .2s; }

/* saved list */
.bvr-list { margin-top: 12px; border-top: 1px solid #F1D9B5; padding-top: 8px; text-align: left; }
.bvr-list[hidden] { display: none; }
.bvr-list-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; color: #A6531A; font-size: 14px; }
.bvr-adm { display: inline-flex; align-items: center; gap: 6px; }
.bvr-admlogin { display: inline-flex; gap: 6px; align-items: center; }
.bvr-admlogin[hidden] { display: none; }
.bvr-admlogin .bvr-in { width: 90px; margin: 0; padding: 4px 8px; font-size: 14px; }
.bvr-items { margin-top: 6px; }
.bvr-none { font-size: 13px; color: #6d5a43; font-weight: 600; padding: 4px 0; }
.bvr-item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 8px; border-radius: 8px; background: #FFFFFF; border: 1px solid #F1D9B5; margin-bottom: 6px; }
.bvr-item.on { background: #FFF6E8; border-color: #C97A1E; }
.bvr-it { flex: 1; min-width: 160px; display: flex; flex-direction: column; word-break: break-word; }
.bvr-it b { font-weight: 800; color: #3a2c1a; font-size: 14px; }
.bvr-it small { font-size: 12px; color: #6d5a43; font-weight: 600; }
.bvr-it .bvr-in { display: inline-block; width: auto; min-width: 180px; }
.bvr-badge { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 10px; }
.bvr-badge.pub { background: #E8F5E9; color: #2E7D32; }
.bvr-badge.hid { background: #FFF3E0; color: #A6531A; }

/* =========================================================
   WORD / SLOKA HIGHLIGHT
========================================================= */

.bvr-word { border-radius: 3px; cursor: pointer; transition: background-color .12s linear, box-shadow .12s linear; }
.bvr-word.bvr-done { background: #FFE7C2; }
.bvr-word.bvr-cur { background: #FFEB3B !important; color: #000 !important; box-shadow: 0 0 0 2px #FFC107; }
.bvr-word.bvr-startw { box-shadow: inset 0 -3px 0 #E65100; }
.bvr-word.bvr-cur.bvr-startw { box-shadow: 0 0 0 2px #FFC107, inset 0 -3px 0 #E65100; }
.bvr-block { transition: background-color .3s, box-shadow .3s; border-radius: 4px; }
.bvr-block.bvr-active { background: #FFFBEA; box-shadow: -5px 0 0 #C97A1E; }
.bvr-block.bvr-startb { outline: 2px dashed #E65100; outline-offset: 4px; }

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

.bvr-float {
	position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%);
	width: calc(100% - 20px); max-width: 720px; z-index: 999999;
	display: flex; align-items: center; gap: 8px; padding: 8px 10px;
	background: #FFF6E8; border: 2px solid #C97A1E; border-radius: 14px;
	box-shadow: 0 4px 18px rgba(166, 83, 26, .28); color: #3a2c1a;
}
.bvr-float[hidden] { display: none; }
.bvr-float.bvr-f-rec { border-color: #D84315; justify-content: center; }
.bvr-float button.bvr-fbtn { padding: 8px 12px; min-height: 38px; font-size: 16px; }
.bvr-float button.bvr-f-up { background: #FFFDF7; color: #A6531A; border: 1.5px solid #C97A1E; box-shadow: none; }
.bvr-f-time { font-weight: 800; font-size: 13px; white-space: nowrap; }

@media (max-width: 520px) {
	.bvr-tool button.bvr-btn { padding: 9px 10px; font-size: 13px; flex: 1 1 30%; }
	.bvr-timerow { margin: 4px 0 0; }
	.bvr-title { font-size: 14px; }
}