/* ====== Panel autoscroll mengambang ====== */
.floating-controls{
  position:fixed; right:12px; bottom:12px; z-index:9999;
  display:inline-flex; gap:6px; align-items:center; flex-wrap:wrap;
  background:rgba(0,0,0,.6); border:1px solid var(--lc-accent); border-radius:8px;
  padding:8px; backdrop-filter:blur(2px); font-family:inherit;
}
.button{
  background:none; border:1px solid var(--lc-accent); color:var(--lc-accent);
  padding:4px 8px; cursor:pointer; font-size:14px;
  box-sizing:border-box;
}
.button:hover{ background:#001018; border-color:#7fe9ff; }
.speed-controls{ display:none; gap:4px; }
.speed-btn.active{ outline:2px solid #7fe9ff; }

/* ====== Toolbar atas ====== */
.transpose-toolbox{ margin:8px 0; }
.lc-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; flex-wrap:wrap; background:#000;
  border:1px solid var(--lc-accent); border-radius:8px; padding:8px;
}
.lc-badge{ display:inline-flex; align-items:center; gap:6px; color:var(--lc-accent); }
.lc-badge-icon{ fill:var(--lc-accent); }

/* ====== Anchor chord ====== */
.kunci-gitar{
  font-weight:700; color:var(--lc-accent);
  text-decoration:none; display:inline-block; min-width:24px; text-align:center;
  margin:0 0.3ch;
}

/* ====== Area konten ====== */
#post{ 
  white-space:normal; word-wrap:break-word; overflow-wrap:anywhere;
  transform:none !important; transform-origin:top left !important;
  font-size:18px;
}
#post pre,
#post .lc-pre{
  white-space:pre-wrap;
  word-wrap:break-word;
  margin:0;
  line-height:var(--lc-lineheight, 0.90) !important;
}

/* Tombol zoom kanan */
.zoom-controls{ display:inline-flex; gap:6px; }

/* Tombol transpose */
:root{ --lc-trans-width:84px; }
.lc-trans--down,
.lc-trans--up{
  width:var(--lc-trans-width);
  text-align:center;
  white-space:nowrap;
}
.lc-trans--down{ margin-right:4px; }

/* ========== Mobile layout (<=480px) ========== */
@media (max-width:480px){
  #post{ font-size:var(--lc-base-font-mobile, inherit); }
  .lc-toolbar{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto;
    gap:8px 12px;
  }
  .lc-left{
    display:grid;
    grid-template-rows:auto auto;
    grid-template-columns:max-content max-content max-content;
    row-gap:6px; column-gap:3px;
  }
  .lc-left .lc-badge{ grid-row:1; grid-column:1 / -1; }
  #transdown{ grid-row:2; grid-column:1; }
  #transup{ grid-row:2; grid-column:2; }
  #transreset{ grid-row:2; grid-column:3; }
  :root{ --lc-trans-width-mobile:44px; }
  .lc-left > .button{ padding:6px 10px; font-size:14px; }
  .lc-trans--down, .lc-trans--up{ width:var(--lc-trans-width-mobile); }
  .lc-right{
    display:grid; grid-template-rows:auto auto;
    justify-items:end; row-gap:6px;
  }
  .lc-right::before{
    content:"Perbesar:"; font-weight:700; color:var(--lc-accent);
  }
  .zoom-controls{ gap:6px; }
  .zoom-controls .button{ min-width:44px; padding:6px 10px; font-size:14px; }
  .zoom-controls .button[data-zoom="reset"]{ display:none !important; }
}
@media (max-width:360px){
  :root{ --lc-trans-width-mobile:40px; }
  .lc-left > .button, .zoom-controls .button{ padding:5px 8px; font-size:13px; }
}

/* ===== Header ===== */
:root{ --lc-header-bg:#455968; }
.lc-header{ box-shadow:0 1px 0 rgba(255,255,255,0.08); margin:8px 0 16px; }
.lc-header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--lc-header-bg);
  border:none; border-radius:8px; padding:12px 14px;
}
.lc-site-title{ margin:0; font-size:28px; color:var(--lc-accent); }
.lc-site-title a{ color:inherit; text-decoration:none; }
.lc-search{ display:flex; align-items:center; gap:8px; }
.lc-search-input{
  background:#fff; color:#111; border:1px solid #fff;
  padding:8px 10px; min-width:260px;
}
.lc-search-btn{
  background:#e02424; color:#fff; border:1px solid #e02424;
  padding:8px 12px;
}
.lc-search-btn:hover{ background:#b91c1c; border-color:#b91c1c; }

/* Mobile header */
@media (max-width:768px){
  .lc-header-inner{ flex-direction:column; align-items:stretch; }
  .lc-search-input{ width:100%; min-width:0; }
}

/* ===== Hero search (homepage) ===== */
.lc-hero-search{
  margin:10px 0 16px; padding:12px;
  border:1px solid var(--lc-accent); border-radius:8px;
  background:#000;
}
.lc-hero-search .lc-search{ display:flex; gap:8px; justify-content:center; }
.lc-hero-search .lc-search-input{
  width:100%; max-width:720px; background:#fff; color:#111; border:1px solid #fff;
  padding:10px 12px;
}
.lc-hero-search .lc-search-btn{
  background:#e02424; color:#fff; border:1px solid #e02424;
  padding:10px 14px;
}

/* ========== HOMEPAGE GRID & CARD LIST ========== */
.lc-grid{
  display:grid; grid-template-columns:2fr 1fr; gap:18px; align-items:start;
}
@media (max-width:768px){ .lc-grid{ grid-template-columns:1fr; } }

.lc-panel{
  background:#0f161c;
  border:1px solid #20303d;
  border-radius:14px;
  box-shadow:0 6px 20px rgba(0,0,0,.3);
  padding:16px;
}
.lc-section-title{
  margin:0 0 12px; font-size:20px; font-weight:700; color:var(--lc-accent);
}

/* POPULAR chord list → card */
.lc-pop-list{ list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr; gap:10px; }
@media(min-width:720px){ .lc-pop-list{ grid-template-columns:1fr 1fr; } }
.lc-item{
  background:#111a22; border:1px solid #20303d;
  border-radius:12px; padding:10px 12px;
  transition:.15s; 
}
.lc-item a{ color:#e9faff; text-decoration:none; display:block; }
.lc-item:hover{ transform:translateY(-2px); border-color:#2a3f4f; }

/* Sidebar artist grid */
.lc-taglist{ list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.lc-taglist li{
  background:#111a22; border:1px solid #20303d;
  border-radius:12px; padding:8px 10px;
}
.lc-taglist a{ color:#9feaff; text-decoration:none; font-weight:600; }
.lc-taglist a:hover{ text-decoration:underline; }
@media(max-width:768px){ .lc-taglist{ grid-template-columns:1fr; } }

/* Pastikan <pre> dan .lc-pre mewarisi ukuran dari .lc-post/#post */
.lc-post pre,
#post pre,
#post .lc-pre {
  font-size: 1em !important;  /* ikut container */
}