/* =========================
   Fonts
   ========================= */
@import url('https://fonts.googleapis.com/css2?family=Amaranth&family=Josefin+Sans:ital,wght@0,400;1,300&display=swap');

/* =========================
   Theme variables — change only these
   ========================= */
:root {
  --bg: #f9fafb;                 /* page background */
  --text: #0f172a;               /* dark heading text */
  --muted-text: #475569;         /* muted paragraph text */

  --primary: #0f766e;            /* deep teal for section headers/footer */
  --primary-contrast: #ffffff;

  --accent: #f97316;             /* coral/orange accent */
  --accent-contrast: #ffffff;

  --link: #0284c7;               /* cyan link */
  --link-hover: #0ea5e9;

  --panel: #ffffff;              /* card/panel */
  --panel-alt: #f1f5f9;          /* alternate panel bg */
  --border: #e2e8f0;             /* light border */

  --cta: #0f766e;                /* teal button bg */
  --cta-hover: #115e59;

  --scrollbar-track: #e0f2fe;    /* scrollbar colors */
  --scrollbar-thumb: #0284c7;

  --grad1: #0f766e;              /* gradients */
  --grad2: #14b8a6;
  --grad3: #06b6d4;
}


/* =========================
   Base
   ========================= */
*{ margin:0; box-sizing:border-box; }
body{
  color:var(--text);
  background:var(--bg);
  font-family:'Josefin Sans','Amaranth',sans-serif;
  font-size:14px;
  line-height:20px;
}
a img,:link img,:visited img{ border:none; }
a{ text-decoration:none; color:var(--link); padding:5px; outline:none; }
a:hover{ color:var(--link-hover); }
b{ font-weight:700; }
input,select{ padding:2px; }
textarea{ font-size:small; }
img{ vertical-align:middle; }

/* =========================
   Headings / Footer bar
   ========================= */
h1, h2, h3, footer{
  background:var(--primary);
  color:var(--primary-contrast);
  text-align:left;
  font-size:110%;
  padding:6px;
  border-top:1px solid rgba(0,0,0,.15);
  border-bottom:1px solid rgba(0,0,0,.15);
  text-shadow:0 1px 0 rgba(0,0,0,.35);
}
h2 a{ color:var(--primary-contrast); }

/* =========================
   Utility blocks
   ========================= */
.az{ text-align:center; padding:3px; background:#dde7f1; }
.az a{
  padding:5px 8px; margin:2px 5px; display:inline-block;
  background:#fff; border:1px solid var(--border); border-radius:3px; font-weight:700;
}
.az a:hover{ background:var(--accent); color:var(--accent-contrast); border-color:var(--accent); }

.search, .SearchBox{ background:#eef2f7; text-align:center; padding:5px; }
.search input, .SearchBox input{
  padding:8px; width:45%; border:1px solid var(--border); outline:none;
}
.search input:focus, .SearchBox input:focus{
  border:1px solid var(--accent); color:var(--accent-contrast); background:#fff; font-weight:700;
}
.search button,
.SearchBox input[type="submit"],
.SearchBtn{
  background:var(--cta);
  color:#fff;
  border:1px solid var(--cta);
  border-radius:4px;
  padding:7px;
  margin-left:10px;
  font-weight:700;
  cursor:pointer;
}
.search button:hover,
.SearchBox input[type="submit"]:hover,
.SearchBtn:hover{
  background:var(--cta-hover);
  border-color:var(--cta-hover);
  color:#fff;
}
.SearchBtn{ width:55px; font-weight:500; }

/* =========================
   Content blocks
   ========================= */
.tag, .description{
  background:#fff; padding:7px; border:1px solid var(--border);
  line-height:1.7; margin:1px 0; font-size:11px; text-align:justify;
}

.catRow{ border-bottom:1px solid var(--border); font-weight:700; }
.row{ background:#fff; font-weight:700; }
.row:nth-of-type(even), .odd:nth-of-type(even){ background:var(--panel-alt); }
.odd{
  background:#fff; border-bottom:1px solid var(--border); font-weight:700;
}
.odd:nth-of-type(even){ color:#7c3aed; }

.absmiddle{ border:1px solid #cbd5e1; padding:1px; box-shadow:0 0 2px #cbd5e1; }

.audio{
  width:99%; height:30px; background:#f2f3f5;
  margin-top:0; border:1px solid var(--border); border-radius:4px;
}

.page_btn{
  display:inline-block; background:#fff; padding:3px 6px;
  border:1px solid #caccd1; color:#000; margin:2px; border-radius:5px; font-weight:400;
}
.page_btn_current{
  display:inline-block; background:var(--primary); padding:3px 6px;
  border:1px solid var(--primary); color:#fff; margin:2px; border-radius:5px;
}

.path{
  background:#e5e7eb; padding:8px; margin-top:0; font-weight:700;
  border:1px solid var(--border); border-radius:4px;
}

.fl span{ font-weight:400; }
.fl .ar{ color:#b45309; font-style:italic; }
.fl a{ display:block; padding:8px; }
.fl a img{ border:1px solid var(--border); border-radius:3px; margin-right:5px; }
.fl a div div{ vertical-align:middle; display:table-cell; }

.pgn div{ padding-top:5px; }

/* =========================
   Branding / sections
   ========================= */
.logo{ background:var(--accent); padding:10px; }
.logo a{ color:var(--accent-contrast); padding:10px; }

.center{ margin:5px; }
.ads, .more, .pages{
  background:#f8fafc; margin:5px 1px; border-radius:4px; padding:6px; text-align:center;
}
.more{ text-align:left; font-weight:700; }
.links{ color:#000; }
.line{ border-bottom:1px solid var(--border); padding:2px; margin:1px; }
.gap{ margin:5px; }

.shareIcon{ transition:all .5s ease; }
.shareIcon:hover{ border-radius:50%; transform:rotate(360deg); }

.sort{ text-align:center; padding:3px; background:#f8fafc; }
.sort span{ padding:7px; margin:3px; background:#a9a9a9; border:1px solid #ccc; border-radius:5px; }
.sort a{
  padding:5px 10px; margin:2px; display:inline-block; background:#fff;
  border:1px solid #ccc; border-radius:5px; font-weight:700;
}
.sort a:hover{ background:var(--accent); color:var(--accent-contrast); border-color:var(--accent); }

.DownloadBtn{
  background:var(--accent);
  color:var(--accent-contrast);
  border:2px solid #000;
  border-radius:10px;
  padding:10px 15px;
  font-weight:700; font-size:13px;
  transition: background .3s linear, color .3s linear, border .3s linear;
}
.DownloadBtn:hover{
  background:#374151; color:#fff; border-color:#374151;
}

/* Remote player pill button (with gradient) */
.remotePlayer{
  width:55px;
  margin:10px 0;
  text-transform:capitalize;
  padding:5px;
  cursor:pointer; border:none; outline:none; color:#fff;
  background:linear-gradient(to right, var(--grad1), var(--grad2), var(--grad3));
  background-size:180% auto;
  transition:.5s all;
  transform:skewX(-20deg);
}
.remotePlayer:hover{ background-position:right center; }

/* =========================
   Scrollbar (WebKit)
   ========================= */
::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-track{
  background-color:var(--scrollbar-track);
  box-shadow:inset 0 0 6px rgba(0,0,0,.3);
}
::-webkit-scrollbar-thumb{
  background-color:var(--scrollbar-thumb);
  box-shadow:inset 0 0 6px rgba(0,0,0,.3);
}
::-webkit-scrollbar-corner{ background-color:var(--scrollbar-thumb); }