/* ======================================================================================
   book.css — ชุดสไตล์ร่วมของระบบหนังสือ daasee.com
   ใช้ทั้ง bookindex.php (อ่าน) และ bookeditor.php (แก้ไข)
   ธีม: สว่าง · กระดาษเก่า · กลางคืน
   ====================================================================================== */

@font-face { font-family:'fontar01'; src:url('../fonts/font1.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'fontar02'; src:url('../fonts/font2.otf') format('opentype'); font-display:swap; }
@font-face { font-family:'fontth01'; src:url('../fonts/font5.ttf') format('truetype'); font-display:swap; }

:root{
  --font-scale:1;
  --read-width:72rem;
  --read-leading:1.65;

  --green-900:#0f2e22;
  --green-800:#1b4332;
  --green-700:#245a44;
  --green-600:#2f7355;

  --gold-600:#a8832a;
  --gold-500:#c9a227;
  --gold-400:#dfc05a;
  --gold-300:#f0d78c;

  --paper:#f8f6ef;
  --surface:#ffffff;
  --surface-2:#f3f0e6;
  --line:#e6e0d2;
  --ink:#22201c;
  --ink-2:#5d5a52;
  --ink-3:#8b877e;

  --ok:#1e7a4c;
  --warn:#b26a00;
  --danger:#c0392b;

  --primary-color:var(--green-800);
  --secondary-color:var(--gold-500);
  --third-color:#000;
  --bg-color:var(--paper);
  --text-color:var(--ink);
  --border-color:var(--line);

  --shadow-1:0 1px 2px rgba(15,46,34,.05), 0 2px 6px rgba(15,46,34,.05);
  --shadow-2:0 8px 26px rgba(15,46,34,.10);
  --shadow-3:0 20px 50px rgba(15,46,34,.18);

  --header-h:58px;
  --radius:14px;
  --ease:cubic-bezier(.4,0,.2,1);
}

/* กระดาษเก่า — ถนอมสายตาตอนอ่านยาว */
html.sepia{
  --paper:#f2e8d5;
  --surface:#fbf3e3;
  --surface-2:#eadfc7;
  --line:#ddcdac;
  --ink:#3a2f1f;
  --ink-2:#6a5b45;
  --ink-3:#948468;
}

html.dark{
  --green-900:#050f0c;
  --green-800:#0a1a14;
  --green-700:#12291f;
  --green-600:#1b3a2c;
  --gold-600:#8a7439;
  --gold-500:#a08a4a;
  --gold-400:#bda662;
  --gold-300:#d6c48a;

  --paper:#101211;
  --surface:#181b1a;
  --surface-2:#202422;
  --line:#2c322f;
  --ink:#e6e2d8;
  --ink-2:#a8a49a;
  --ink-3:#7c7972;

  --ok:#6dc99a;
  --warn:#e0a955;
  --danger:#ef8b7c;

  --third-color:#fff;
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 8px 26px rgba(0,0,0,.5);
  --shadow-3:0 20px 50px rgba(0,0,0,.6);
}

*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0;
  font-family:'fontth01','Sarabun',system-ui,sans-serif;
  background-color:var(--bg-color);
  color:var(--text-color);
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  transition:background-color .25s var(--ease), color .25s var(--ease), opacity .15s ease;
}
body.is-navigating{ opacity:0; }

:focus-visible{ outline:3px solid var(--gold-500); outline-offset:2px; border-radius:6px; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important;
  }
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------------------------------------------------------------- แถบหัวเรื่อง */
.bk-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  min-height:var(--header-h);
  display:flex; align-items:center;
  background:var(--green-800);
  border-bottom:1px solid rgba(201,162,39,.45);
  box-shadow:0 2px 14px rgba(0,0,0,.16);
}
.bk-header-inner{ display:flex; align-items:center; gap:4px; width:100%; height:100%; padding:0 8px 0 4px; }
.bk-titles{ min-width:0; flex:1; padding-right:6px; }
.bk-eyebrow{ display:block; color:rgba(255,255,255,.62); font-size:12px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bk-h1{ display:block; color:var(--gold-300); font-weight:700; font-size:17px; line-height:1.25; letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:0; }

.bk-cover-mini{
  flex:0 0 auto; width:34px; height:44px; border-radius:5px; object-fit:cover;
  border:1px solid rgba(201,162,39,.5); box-shadow:0 2px 8px rgba(0,0,0,.35); margin-right:8px;
}

.ic-btn{
  flex:0 0 auto; width:38px; height:38px; border-radius:10px; border:0;
  background:transparent; color:#fff; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.ic-btn:hover{ background:rgba(255,255,255,.12); color:var(--gold-300); }
.ic-btn.is-on{ color:var(--gold-400); }
.ic-btn .material-icons{ font-size:22px; }

.bk-pill{
  flex:0 0 auto; background:rgba(0,0,0,.22); color:var(--gold-300);
  font-family:'Sarabun',sans-serif; font-weight:600; font-size:13px;
  font-variant-numeric:tabular-nums; letter-spacing:.5px;
  border:1px solid rgba(201,162,39,.4); border-radius:999px;
  padding:4px 12px; cursor:pointer; transition:.2s var(--ease);
  min-width:62px; text-align:center;
}
.bk-pill:hover{ background:var(--gold-500); color:#1a1a1a; border-color:var(--gold-500); }

.bk-progress{ position:absolute; left:0; bottom:0; height:3px; width:100%; background:rgba(0,0,0,.28); }
.bk-progress > i{ display:block; height:100%; background:var(--gold-500); transition:width .3s var(--ease); }

/* ---------------------------------------------------------------- รูปประจำตัว */
.bk-ava-wrap{ position:relative; flex:0 0 auto; }
.bk-ava-btn{
  border:0; background:transparent; padding:2px; cursor:pointer; border-radius:50%;
  display:inline-flex; line-height:0;
}
.bk-ava-btn > :first-child,
.bk-ava{
  width:34px; height:34px; border-radius:50%; object-fit:cover;
  border:2px solid var(--gold-500); display:inline-flex; align-items:center; justify-content:center;
  transition:transform .2s var(--ease), border-color .2s var(--ease);
}
.bk-ava-btn:hover > :first-child{ transform:scale(1.08); border-color:#fff; }
.bk-ava-letter{
  background:var(--green-600); color:var(--gold-300);
  font-weight:700; font-size:15px; font-family:'Sarabun',sans-serif;
}

.bk-menu{
  position:absolute; top:calc(100% + 10px); right:0; z-index:1400; width:250px;
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow-3); padding:8px; font-family:'Sarabun',sans-serif;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s var(--ease);
}
.bk-menu.is-open{ opacity:1; visibility:visible; transform:none; }
.bk-menu-head{ padding:10px 12px 12px; border-bottom:1px solid var(--line); margin-bottom:6px; }
.bk-menu-name{ font-weight:700; font-size:15px; color:var(--ink); word-break:break-word; }
.bk-menu-role{ font-size:12px; color:var(--ink-3); margin-top:3px; line-height:1.5; }
.bk-menu a, .bk-menu button.bk-menu-item{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:10px 12px; border:0; border-radius:9px; background:transparent;
  color:var(--ink-2); text-decoration:none; font-family:inherit; font-size:14px;
  cursor:pointer; text-align:left; transition:background .16s var(--ease), color .16s var(--ease);
}
.bk-menu a:hover, .bk-menu button.bk-menu-item:hover{ background:var(--surface-2); color:var(--green-700); }
html.dark .bk-menu a:hover, html.dark .bk-menu button.bk-menu-item:hover{ color:var(--gold-300); }
.bk-menu .material-icons{ font-size:19px; color:var(--ink-3); }
.bk-menu-sep{ height:1px; background:var(--line); margin:6px 4px; }
.bk-menu .is-danger{ color:var(--danger); }
.bk-menu .is-danger .material-icons{ color:var(--danger); }

/* ---------------------------------------------------------------- แผงข้าง */
.bk-panel{
  position:fixed; top:0; height:100%; width:0; z-index:2000;
  background:var(--surface); overflow-x:hidden;
  display:flex; flex-direction:column;
  transition:width .28s var(--ease);
}
.bk-panel-left{ left:0; box-shadow:4px 0 24px rgba(0,0,0,.22); }
.bk-panel-right{ right:0; box-shadow:-4px 0 24px rgba(0,0,0,.22); }

.bk-panel-head{
  flex:0 0 auto; padding:14px 16px; background:var(--green-800); color:var(--gold-300);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  border-bottom:2px solid var(--gold-500);
}
.bk-panel-head h2{ margin:0; font-family:'Sarabun',sans-serif; font-size:16px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bk-panel-head .ic-btn{ color:var(--gold-300); }

.bk-tabs{ flex:0 0 auto; display:flex; background:var(--surface-2); border-bottom:1px solid var(--line); }
.bk-tabs button{
  flex:1; padding:11px 6px; border:0; background:transparent; cursor:pointer;
  font-family:'Sarabun',sans-serif; font-size:13.5px; font-weight:600; color:var(--ink-3);
  border-bottom:2px solid transparent; transition:.18s var(--ease);
}
.bk-tabs button:hover{ color:var(--green-700); }
.bk-tabs button.is-on{ color:var(--green-800); border-bottom-color:var(--gold-500); background:var(--surface); }
html.dark .bk-tabs button.is-on{ color:var(--gold-300); }

.bk-panel-search{ flex:0 0 auto; padding:10px 12px; border-bottom:1px solid var(--line); background:var(--surface-2); }
.bk-panel-search input{
  width:100%; padding:9px 14px; border:1px solid var(--line); border-radius:999px;
  outline:none; font-size:15px; font-family:'Sarabun',sans-serif;
  background:var(--surface); color:var(--ink);
}
.bk-panel-search input:focus{ border-color:var(--gold-500); box-shadow:0 0 0 3px rgba(201,162,39,.18); }

.bk-panel-body{ flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.bk-panel-foot{
  flex:0 0 auto; padding:9px 14px; border-top:1px solid var(--line);
  font-family:'Sarabun',sans-serif; font-size:12px; color:var(--ink-3); background:var(--surface-2);
}
.bk-empty{ padding:26px 16px; text-align:center; color:var(--ink-3); font-family:'Sarabun',sans-serif; font-size:14px; line-height:1.7; }

.bk-backdrop{
  position:fixed; inset:0; z-index:1500; background:rgba(0,0,0,.55);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  opacity:0; visibility:hidden; transition:opacity .28s var(--ease), visibility .28s var(--ease);
}
.bk-backdrop.is-open{ opacity:1; visibility:visible; }

/* ---------------------------------------------------------------- รายการในแผง */
.toc-item, .lib-item, .bm-item{
  display:block; width:100%; text-align:left; padding:11px 16px;
  border:0; border-bottom:1px solid var(--line); background:transparent;
  color:var(--ink-2); cursor:pointer; font-family:inherit; text-decoration:none; line-height:1.45;
  transition:background .18s var(--ease), color .18s var(--ease);
}
.toc-item{ display:flex; align-items:baseline; gap:10px; }
.toc-item:hover, .lib-item:hover, .bm-item:hover{ background:var(--surface-2); color:var(--green-700); }
html.dark .toc-item:hover, html.dark .lib-item:hover, html.dark .bm-item:hover{ color:var(--gold-300); }

.toc-num{
  flex:0 0 auto; font-family:'Sarabun',sans-serif; font-size:11px;
  font-variant-numeric:tabular-nums; color:var(--ink-3); min-width:2.4em; text-align:right;
}
.toc-text{ flex:1; min-width:0; }

.toc-item.is-current{ background:linear-gradient(90deg, rgba(201,162,39,.16), transparent); box-shadow:inset 3px 0 0 var(--gold-500); }
.toc-item.is-current .toc-text{ color:var(--green-800); font-weight:700; }
html.dark .toc-item.is-current .toc-text{ color:var(--gold-300); }

.toc-lvl-0 .toc-text{ font-weight:800; font-size:calc(19px * var(--font-scale)); color:var(--green-800); }
.toc-lvl-1 .toc-text{ font-weight:600; font-size:calc(18px * var(--font-scale)); color:#20408f; padding-left:14px; }
.toc-lvl-2 .toc-text{ font-size:calc(17px * var(--font-scale)); color:var(--ink); padding-left:28px; }
.toc-lvl-3 .toc-text{ font-size:calc(16px * var(--font-scale)); color:var(--ink-2); padding-left:42px; }
.toc-lvl-4 .toc-text{ font-size:calc(15px * var(--font-scale)); color:var(--ink-3); padding-left:56px; }
html.dark .toc-lvl-0 .toc-text{ color:var(--gold-400); }
html.dark .toc-lvl-1 .toc-text{ color:#8fb0e8; }
html.dark .toc-lvl-2 .toc-text, html.dark .toc-lvl-3 .toc-text{ color:var(--ink); }

.lib-item{ display:flex; align-items:center; gap:12px; font-size:calc(16px * var(--font-scale)); }
.lib-cover{
  flex:0 0 auto; width:38px; height:50px; border-radius:5px; object-fit:cover;
  border:1px solid var(--line); background:var(--surface-2);
}
.lib-cover-fallback{
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--gold-600); background:var(--surface-2);
}
.lib-cover-fallback .material-icons{ font-size:20px; }
.lib-meta{ min-width:0; flex:1; }
.lib-name{ display:block; line-height:1.4; }
.lib-section{ display:block; font-family:'Sarabun',sans-serif; font-size:11.5px; color:var(--ink-3); margin-top:2px; }
.lib-item.is-current{ background:var(--surface-2); box-shadow:inset 3px 0 0 var(--gold-500); font-weight:700; color:var(--green-800); }
html.dark .lib-item.is-current{ color:var(--gold-300); }

.bm-item{ display:flex; align-items:flex-start; gap:10px; }
.bm-body{ flex:1; min-width:0; }
.bm-title{ display:block; font-size:15px; line-height:1.4; }
.bm-meta{ display:block; font-family:'Sarabun',sans-serif; font-size:11.5px; color:var(--ink-3); margin-top:3px; }
.bm-del{
  flex:0 0 auto; border:0; background:transparent; color:var(--ink-3); cursor:pointer;
  border-radius:8px; padding:4px; line-height:0;
}
.bm-del:hover{ background:rgba(192,57,43,.12); color:var(--danger); }
.bm-del .material-icons{ font-size:18px; }

/* ---------------------------------------------------------------- ปุ่มและฟอร์ม */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink-2);
  padding:9px 16px; font-family:'Sarabun',sans-serif; font-size:14px; font-weight:600;
  cursor:pointer; text-decoration:none; transition:.18s var(--ease); white-space:nowrap;
}
.btn:hover{ border-color:var(--gold-500); color:var(--green-700); }
.btn .material-icons{ font-size:18px; }
.btn:disabled{ opacity:.4; cursor:not-allowed; }
.btn-primary{ background:linear-gradient(135deg, var(--green-700), var(--green-800)); border-color:var(--green-800); color:var(--gold-300); }
.btn-primary:hover{ color:#fff; border-color:var(--green-700); box-shadow:0 5px 16px rgba(27,67,50,.28); transform:translateY(-1px); }
.btn-gold{ background:var(--gold-500); border-color:var(--gold-600); color:#1f1a08; }
.btn-gold:hover{ background:var(--gold-400); color:#1f1a08; }
.btn-danger{ color:var(--danger); border-color:rgba(192,57,43,.4); }
.btn-danger:hover{ background:rgba(192,57,43,.1); color:var(--danger); border-color:var(--danger); }
.btn-sm{ padding:6px 11px; font-size:13px; border-radius:8px; }

.field{
  padding:9px 13px; border:1px solid var(--line); border-radius:9px;
  font-family:'Sarabun',sans-serif; font-size:14.5px;
  background:var(--surface); color:var(--ink); outline:none; transition:.18s var(--ease);
}
.field:focus{ border-color:var(--green-600); box-shadow:0 0 0 3px rgba(36,90,68,.13); }

/* ---------------------------------------------------------------- แผงตั้งค่า */
.bk-pop{
  position:fixed; top:calc(var(--header-h) + 8px); right:10px; z-index:1400;
  width:min(310px, calc(100vw - 20px));
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow-3); padding:16px; font-family:'Sarabun',sans-serif;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s var(--ease);
}
.bk-pop.is-open{ opacity:1; visibility:visible; transform:none; }
.set-row{ margin-bottom:15px; }
.set-row:last-child{ margin-bottom:0; }
.set-label{ font-size:12px; font-weight:600; color:var(--ink-3); letter-spacing:.4px; margin-bottom:7px; display:block; }
.seg{ display:flex; gap:6px; }
.seg button{
  flex:1; padding:8px 4px; border:1px solid var(--line); border-radius:9px;
  background:var(--surface-2); color:var(--ink-2); cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:600; transition:.18s var(--ease);
}
.seg button:hover{ border-color:var(--gold-500); color:var(--green-700); }
.seg button.is-on{ background:var(--green-800); border-color:var(--green-800); color:var(--gold-300); }
html.dark .seg button.is-on{ background:var(--gold-600); border-color:var(--gold-600); color:#11150f; }
.set-hint{ font-size:11px; color:var(--ink-3); margin:9px 0 0; line-height:1.8; }
.set-hint kbd{
  background:var(--surface-2); border:1px solid var(--line); border-bottom-width:2px;
  border-radius:4px; padding:0 5px; font-size:10px; font-family:inherit;
}

/* ---------------------------------------------------------------- กล่องข้อความ */
.bk-modal{
  position:fixed; inset:0; z-index:2500; display:none;
  background:rgba(0,0,0,.55); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  padding:56px 14px 24px; overflow-y:auto;
}
.bk-modal.is-open{ display:block; }
.modal-card{
  background:var(--surface); color:var(--ink); border-radius:18px; overflow:hidden;
  box-shadow:var(--shadow-3); max-width:min(900px, 94vw); margin:0 auto;
  animation:bkZoom .22s var(--ease);
}
@keyframes bkZoom{ from{ opacity:0; transform:scale(.96); } to{ opacity:1; transform:none; } }
.modal-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 10px 14px 20px; background:var(--green-800); color:var(--gold-300);
}
.modal-head h2{ margin:0; font-family:'Sarabun',sans-serif; font-size:17px; font-weight:700; }
.modal-head .ic-btn{ color:var(--gold-300); }
.modal-body{ padding:22px; max-height:72vh; overflow-y:auto; overscroll-behavior:contain; }

.arabic-body{
  direction:rtl; font-family:'fontar02','Amiri',serif; font-weight:400;
  text-align:justify; line-height:1.9; font-size:calc(30px * var(--font-scale));
}
.arabic-body > div{ padding:2px 0; }
.bk-ar-rule{ border:0; border-top:1px dashed var(--line); margin:16px 0; }

/* ---------------------------------------------------------------- แจ้งเตือนลอย */
.bk-toast-wrap{
  position:fixed; left:50%; top:calc(var(--header-h) + 12px); transform:translateX(-50%);
  z-index:3000; display:flex; flex-direction:column; gap:8px; align-items:center;
  pointer-events:none; width:max-content; max-width:calc(100vw - 24px);
}
.bk-toast{
  display:flex; align-items:center; gap:9px;
  background:var(--green-800); color:#fff; border:1px solid rgba(201,162,39,.45);
  padding:10px 18px; border-radius:999px; box-shadow:var(--shadow-3);
  font-family:'Sarabun',sans-serif; font-size:14px; font-weight:600;
  animation:bkToastIn .28s var(--ease);
}
.bk-toast.is-out{ animation:bkToastOut .3s var(--ease) forwards; }
.bk-toast .material-icons{ font-size:19px; color:var(--gold-400); }
.bk-toast.is-error{ background:var(--danger); border-color:rgba(255,255,255,.3); }
.bk-toast.is-error .material-icons{ color:#fff; }
@keyframes bkToastIn{ from{ opacity:0; transform:translateY(-14px); } to{ opacity:1; transform:none; } }
@keyframes bkToastOut{ to{ opacity:0; transform:translateY(-10px); } }

/* ---------------------------------------------------------------- w3.css โหมดกลางคืน */
html.dark .w3-white, html.dark .w3-card-2, html.dark .w3-card-4{ background-color:var(--surface)!important; color:var(--ink)!important; }
html.dark .w3-sand{ background-color:var(--surface-2)!important; color:#f0c48a!important; }
html.dark .w3-text-indigo{ color:#7ea6df!important; }
html.dark .w3-text-teal{ color:#5fc7bb!important; }
html.dark .w3-text-orange{ color:#f0ad5e!important; }
html.dark .w3-text-red{ color:#ef8b7c!important; }
html.dark .w3-text-green{ color:#6dc99a!important; }
html.dark .w3-text-yellow{ color:#e8cf72!important; }
html.dark .w3-text-blue{ color:#7fb2ea!important; }
html.dark .w3-text-gray, html.dark .w3-text-grey{ color:var(--ink-3)!important; }
html.dark img:not(.no-dim){ filter:brightness(.82); }

html.sepia .w3-white{ background-color:var(--surface)!important; color:var(--ink)!important; }
html.sepia .w3-sand{ background-color:var(--surface-2)!important; }

/* ---------------------------------------------------------------- บล็อกเนื้อหา */
.reference-box{
  margin-top:26px; padding:20px 22px;
  border-left:4px solid var(--gold-500); border-right:4px solid var(--gold-500);
  background:var(--surface-2); color:var(--ink-2);
  font-family:'Sarabun',sans-serif; border-radius:10px;
}
.section-rule{ color:var(--gold-500); opacity:.65; margin:22px 0; }
.line-number{ font-size:.8em; color:#c0392b; min-width:30px; }
html.dark .line-number{ color:#ef8b7c; }

.poem-table{ width:100%!important; border-collapse:collapse; }
.poem-table td{ padding:8px; vertical-align:middle; }
@media (max-width:600px){
  .poem-table tr{ display:flex; flex-direction:column; }
  .poem-table td{ width:100%!important; text-align:center!important; }
}

.inline-arabic{
  font-family:'fontar02','Amiri',serif; direction:rtl; unicode-bidi:embed;
  font-size:1.15em; vertical-align:middle; font-weight:normal; display:inline-block;
}

mark{ background:rgba(201,162,39,.38); color:inherit; border-radius:3px; padding:0 2px; }

/* ---------------------------------------------------------------- จอเล็ก */
@media (max-width:600px){
  :root{ --header-h:54px; }
  .bk-h1{ font-size:15px; }
  .bk-eyebrow{ font-size:11px; }
  .ic-btn{ width:34px; height:34px; }
  .ic-btn .material-icons{ font-size:20px; }
  .bk-pill{ padding:3px 9px; font-size:12px; min-width:54px; }
  .bk-cover-mini{ display:none; }
}