/* ------------------------------------------------------------------
   Custom flipbook viewer (self-hosted FlipHTML5 "Metro" look-alike)
   ------------------------------------------------------------------ */
html.cfb-html, body.cfb-body {
    width: 100%; height: 100%; left: 0; top: 0; margin: 0; padding: 0 !important;
    position: fixed; overflow: hidden !important; border: 0;
    -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
    font-family: Arial, Helvetica, sans-serif;
    -webkit-tap-highlight-color: transparent;
}
body.cfb-body { background: #505050; }

.cfb-app { position: absolute; inset: 0; overflow: hidden; background: #505050; }

/* ---- loading ---- */
.cfb-loading { position: absolute; inset: 0; background: #323232; z-index: 5000; display: flex; align-items: center; justify-content: center; transition: opacity .3s; }
.cfb-loading.hide { opacity: 0; pointer-events: none; }
.cfb-loading-spinner { width: 42px; height: 42px; border-radius: 50%; border: 3px solid rgba(221,221,221,.25); border-top-color: #DDDDDD; animation: cfb-spin .8s linear infinite; }
@keyframes cfb-spin { to { transform: rotate(360deg); } }

/* ---- stage / book ---- */
.cfb-stage { position: absolute; inset: 0; overflow: hidden; }
.cfb-zoom-layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; will-change: transform; }
.cfb-zoom-layer.zoomed { cursor: grab; }
.cfb-zoom-layer.zoomed.panning { cursor: grabbing; }

.cfb-book { position: absolute; transform-origin: 50% 50%; transition: transform .3s ease; }
.cfb-book.no-transition { transition: none; }
.cfb-book-shadow { position: absolute; top: 0; height: 100%; box-shadow: 0 0 5px rgba(40,40,40,.7); pointer-events: none; transition: left .3s ease, width .3s ease; }
.cfb-book.no-transition .cfb-book-shadow { transition: none; }

.cfb-slot { position: absolute; top: 0; height: 100%; overflow: hidden; background: #fff; }
.cfb-slot.left  { left: 0; }
.cfb-slot.right { right: 0; }
.cfb-slot.empty { background: transparent; }
.cfb-slot img, .cfb-flip-page img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; pointer-events: none; -webkit-user-drag: none; }
.cfb-slot .cfb-spine-shadow { position: absolute; top: 0; height: 100%; pointer-events: none; }
.cfb-slot.left  .cfb-spine-shadow { right: 0; background: linear-gradient(to left, rgba(60,60,60,.4) 0, rgba(50,50,50,.1) 54%, rgba(200,200,200,0) 100%); }
.cfb-slot.right .cfb-spine-shadow { left: 0;  background: linear-gradient(to right, rgba(53,53,53,.5) 0, rgba(53,53,53,.2) 40%, rgba(53,53,53,.1) 60%, rgba(200,200,200,0) 100%); }

/* page thickness: a few 1px lines at the outer edges */
.cfb-thickness { position: absolute; top: 0; height: 100%; pointer-events: none; }
.cfb-thickness.left  { right: 100%; }
.cfb-thickness.right { left: 100%; }
.cfb-thickness i { position: absolute; top: 0; bottom: 0; width: 1px; background: #FFFFFF; }
.cfb-thickness i:nth-child(even) { background: #c9c9c9; }

/* link hotspots */
.cfb-links { position: absolute; inset: 0; }
.cfb-link { position: absolute; display: block; background: rgba(128,128,128,0); cursor: pointer; transition: background-color .15s; }
.cfb-link:hover { background: rgba(128,128,128,.5); }

/* ---- flipping layer ---- */
.cfb-flip-layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; }
.cfb-flip-page { position: absolute; top: 0; height: 100%; transform-origin: 0 0; overflow: hidden; background: #fff; will-change: transform, clip-path; }
.cfb-flip-page.back img { transform: scaleX(-1); }
.cfb-back-paper { position: absolute; inset: 0; background: rgba(255,255,255,.8); pointer-events: none; }
.cfb-fold-shade { position: absolute; left: 0; top: 0; transform-origin: 50% 50%; pointer-events: none; }
.cfb-fold-svg { position: absolute; pointer-events: none; overflow: visible; }

/* ---- bars ---- */
.cfb-topbar, .cfb-toolbar { position: absolute; left: 0; width: 100%; height: 46px; z-index: 99; background: rgba(51,51,51,.8); transition: transform .3s ease; }
.cfb-topbar { top: 0; }
.cfb-toolbar { bottom: 0; overflow: hidden; }
.cfb-app.phone .cfb-topbar { height: 40px; }
.cfb-app.phone .cfb-toolbar { height: 60px; }
.cfb-app.phone.bars-hidden .cfb-topbar  { transform: translateY(-100%); }
.cfb-app.phone.bars-hidden .cfb-toolbar { transform: translateY(100%); }

.cfb-logobar { position: absolute; left: 5px; top: 0; height: 100%; z-index: 1; display: flex; align-items: center; }
.cfb-logobar a { display: block; padding: 0 12px; line-height: 0; }
.cfb-logobar img { height: 34px; width: auto; max-width: 290px; display: block; object-fit: contain; }
.cfb-app.phone .cfb-logobar a { padding: 0 5px; }
.cfb-app.phone .cfb-logobar img { height: 30px; }

.cfb-toprightbar { position: absolute; right: 12px; top: 0; height: 100%; display: flex; align-items: center; gap: 8px; z-index: 99; }

.cfb-searchbar { background: #939393; padding-left: 10px; padding-right: 5px; height: 32px; width: 330px; box-sizing: border-box; display: flex; align-items: center; transition: background-color .15s; }
.cfb-searchbar input { flex: 1; min-width: 0; background: #939393; color: #B3B3B3; font-family: Arial; border: 0; height: 18px; line-height: 18px; outline: none; font-size: 14px; transition: background-color .15s, color .15s; }
.cfb-searchbar input::placeholder { color: #B3B3B3; opacity: 1; }
.cfb-searchbar:hover, .cfb-searchbar.focus { background: #fff; }
.cfb-searchbar:hover input, .cfb-searchbar.focus input { background: #fff; color: #000; }
.cfb-searchbar:hover input::placeholder, .cfb-searchbar.focus input::placeholder { color: #666; }
.cfb-searchbar .cfb-btn { width: 30px; height: 30px; flex: 0 0 30px; }
.cfb-searchbar .cfb-btn svg { width: 22px; height: 22px; margin: 4px 0 0 5px; color: #535353; }
.cfb-searchbar .cfb-btn:hover { background: transparent; }
.cfb-searchbar .cfb-btn .cfb-btn-border { display: none !important; }

.cfb-buttonbar { position: absolute; top: 0; height: 100%; white-space: nowrap; overflow: hidden; }
.cfb-buttonbar.left  { left: 0; text-align: left; }
.cfb-buttonbar.right { right: 0; text-align: right; }
.cfb-pagebar { position: absolute; top: 0; height: 100%; }

.cfb-btn { position: relative; display: inline-block; vertical-align: top; width: 45px; height: 46px; cursor: pointer; box-sizing: border-box; background: transparent; transition: background-color .12s; outline: none; border: 0; padding: 0; margin: 0; color: #EEEEEE; }
.cfb-btn svg { width: 22px; height: 22px; display: block; margin: 12px auto 0; color: #EEEEEE; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.cfb-btn:hover, .cfb-btn.active { background: rgba(255,255,255,.2); }
.cfb-btn .cfb-btn-border { position: absolute; left: 1px; bottom: 0; width: 42px; height: 2px; background: #EEEEEE; display: none; pointer-events: none; }
.cfb-btn:hover .cfb-btn-border, .cfb-btn.active .cfb-btn-border { display: block; }
.cfb-pagebar .cfb-btn { position: absolute; top: 0; }

.cfb-pagenumber { position: absolute; top: 10px; height: 27px; }
.cfb-pagenumber input { box-sizing: border-box; width: 100%; height: 25px; line-height: 25px; border: 0; background: #fff; text-align: center; font-family: Arial; font-size: 13px; color: #1B2930; padding: 0; border-radius: 0; }
.cfb-pagenumber input:focus { outline: none; }

/* "more" extended menu */
.cfb-extbar { position: absolute; z-index: 101; width: 160px; overflow: hidden; background: rgba(51,51,51,.8); display: none; right: 12px; top: 46px; }
.cfb-extbar.open { display: block; }
.cfb-extbar .cfb-btn { display: block; width: 160px; height: 46px; text-align: left; }
.cfb-extbar .cfb-btn svg { display: inline-block; vertical-align: top; margin: 12px 0 0 5px; }
.cfb-extbar .cfb-btn span { position: absolute; left: 37px; top: 0; line-height: 46px; color: #fff; font-size: 13px; white-space: nowrap; }
.cfb-extbar .cfb-btn .cfb-btn-border { display: none !important; }

/* side navigation */
.cfb-float-btn { position: absolute; z-index: 100; width: 63px; height: 160px; opacity: .95; cursor: pointer; background: transparent; transition: background-color .15s; }
.cfb-float-btn.left  { left: 0; }
.cfb-float-btn.right { right: 0; }
.cfb-float-btn svg { position: absolute; left: 50%; top: 50%; width: 24px; height: 46px; margin: -23px 0 0 -12px; color: #fff; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: butt; stroke-linejoin: miter; }
.cfb-float-btn:hover { background: var(--cfb-hover, rgba(51,51,51,.8)); }
.cfb-shortcut { position: absolute; z-index: 100; width: 40px; height: 40px; bottom: 56px; cursor: pointer; opacity: .2; transition: opacity .15s; }
.cfb-shortcut.left  { left: 10px; }
.cfb-shortcut.right { right: 10px; }
.cfb-shortcut svg { width: 22px; height: 22px; margin: 9px; color: #fff; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; display: block; }
.cfb-shortcut:hover { opacity: .9; }
.cfb-app.zoomed .cfb-float-btn, .cfb-app.zoomed .cfb-shortcut { opacity: .15; }

/* tooltip bubble */
.cfb-tip { position: absolute; z-index: 1200; background: rgb(51,51,51); color: #EEEEEE; font-size: 12px; font-family: Arial; line-height: 14px; padding: 6px; border-radius: 2px; white-space: nowrap; pointer-events: none; display: none; }
.cfb-tip::after { content: ''; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-top-color: rgb(51,51,51); border-bottom: 0; }
.cfb-tip.below::after { bottom: auto; top: -6px; border-top: 0; border-bottom: 6px solid rgb(51,51,51); }
.cfb-tip.show { display: block; }

/* zoom control bar (top centre while zoomed) */
.cfb-zoombar { display: none; flex-direction: row; align-items: center; height: 40px; position: absolute; left: 50%; top: 52px; transform: translateX(-50%); z-index: 1020; border-radius: 4px; padding: 0 2px; box-sizing: border-box; background: rgba(0,0,0,.6); }
.cfb-zoombar.show { display: flex; }
.cfb-zoombar .cfb-btn { width: 40px; height: 40px; }
.cfb-zoombar .cfb-btn svg { width: 16px; height: 16px; margin-top: 12px; color: #fff; }
.cfb-zoombar .cfb-btn:hover { background: transparent; opacity: .8; }
.cfb-zoombar .cfb-btn .cfb-btn-border { display: none !important; }
.cfb-zoom-range { position: relative; width: 100px; height: 40px; display: flex; align-items: center; }
.cfb-zoom-range input[type=range] { width: 100%; margin: 0; accent-color: #ffffff; cursor: pointer; height: 4px; }
.cfb-zoom-bubble { position: absolute; top: -26px; transform: translateX(-50%); background: rgba(0,0,0,.6); color: #fff; font-size: 12px; line-height: 20px; padding: 0 6px; border-radius: 3px; pointer-events: none; }
.cfb-zoom-bubble::after { content: ''; position: absolute; left: 50%; bottom: -4px; margin-left: -4px; border: 4px solid transparent; border-top-color: rgba(0,0,0,.6); border-bottom: 0; }

/* centre hint (zoom instruction) */
.cfb-center-hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background: rgba(0,0,0,.6); color: #fff; font-size: 16px; padding: 30px 60px; border-radius: 10px; z-index: 1500; pointer-events: none; opacity: 0; transition: opacity .3s; white-space: nowrap; }
.cfb-center-hint.show { opacity: 1; }

/* ---- panels (forms) ---- */
.cfb-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.3); z-index: 900; display: none; }
.cfb-backdrop.show { display: block; }
.cfb-form { position: absolute; z-index: 1000; background: #3963A5; color: #EEEEEE; font-size: 15px; font-family: Calibri, Helvetica, Arial, sans-serif; line-height: 20px; padding: 20px; box-sizing: border-box; text-align: left; display: none; }
.cfb-form.open { display: block; }
.cfb-form .cfb-form-handle { position: absolute; left: 50%; top: 8px; width: 24px; height: 5px; margin-left: -12px; border-top: 1px solid rgba(255,255,255,.55); border-bottom: 1px solid rgba(255,255,255,.55); }
.cfb-form .cfb-form-title { margin: 0 0 8px; font-size: 19px; font-weight: normal; padding-right: 30px; display: flex; align-items: center; gap: 10px; line-height: 24px; }
.cfb-form .cfb-form-title .cfb-title-icon { width: 20px; height: 20px; color: #EEEEEE; stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.cfb-form .cfb-close { position: absolute; right: 12px; top: 14px; width: 26px; height: 26px; cursor: pointer; background: transparent; border: 0; padding: 0; }
.cfb-form .cfb-close svg { width: 13px; height: 13px; margin: 6px; color: #EEEEEE; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; display: block; }
.cfb-form .cfb-close:hover { opacity: .8; }
.cfb-form input[type=text] { box-sizing: border-box; height: 30px; border: 0; padding: 0 10px; font-size: 14px; font-family: inherit; color: #333; background: #fff; }
.cfb-form input[type=text]:focus { outline: none; }
.cfb-form .cfb-scroll { overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.35) transparent; }
.cfb-form .cfb-scroll::-webkit-scrollbar { width: 5px; }
.cfb-form .cfb-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 2px; }
.cfb-form .cfb-empty { opacity: .7; padding: 10px 0; font-size: 14px; }

/* search / toc: side panels */
.cfb-form.search, .cfb-form.toc { border: 2px solid #c8c8d3; box-sizing: border-box; }
.cfb-form.search .cfb-search-row { position: relative; margin: 10px 0 8px; }
.cfb-form.search input { width: 100%; padding-right: 32px; }
.cfb-form.search .cfb-search-go { position: absolute; right: 5px; top: 4px; width: 22px; height: 22px; cursor: pointer; border: 0; background: transparent; padding: 0; }
.cfb-form.search .cfb-search-go svg { width: 20px; height: 20px; color: #666; stroke: currentColor; fill: none; stroke-width: 1.4; display: block; }
.cfb-form.search .cfb-pages-found { font-size: 15px; margin: 0 0 4px; }
.cfb-form.search .cfb-pages-found b { color: #FFB000; font-weight: normal; }
.cfb-form.search .cfb-scroll { height: calc(100% - 100px); margin: 0 -12px 0 -8px; padding: 0 8px; }
.cfb-form.search .cfb-item { padding: 5px 12px; cursor: pointer; }
.cfb-form.search .cfb-item:hover { background: rgba(255,255,255,.25); }
.cfb-form.search .cfb-item .cfb-title { font-size: 15px; }
.cfb-form.search .cfb-item .cfb-desc { font-size: 15px; margin-top: 3px; opacity: .8; color: #d8e0ee; }
.cfb-form.search .cfb-item mark { background: transparent; color: #FFB000; }

.cfb-form.toc .cfb-scroll { height: calc(100% - 50px); margin: 10px -20px 0; padding: 0 20px; }
.cfb-form.toc .cfb-item { padding: 5px 0 5px 10px; font-size: 15px; cursor: pointer; position: relative; display: flex; justify-content: space-between; }
.cfb-form.toc .cfb-item:hover { background: rgba(255,255,255,.1); }
.cfb-form.toc .cfb-item .cfb-page { padding: 0 15px; opacity: .8; }

/* thumbnails */
.cfb-form.thumbs { left: 0; width: 100%; height: 254px; padding: 10px 0; }
.cfb-form.thumbs .cfb-form-handle { display: none; }
.cfb-form.thumbs .cfb-close { top: -24px; right: 20px; width: 26px; height: 24px; background: #3963A5; }
.cfb-form.thumbs .cfb-close svg { width: 10px; height: 10px; margin: 7px 8px; }
.cfb-form.thumbs .cfb-thumb-stage { position: relative; overflow-x: auto; overflow-y: hidden; height: 225px; margin: 20px; white-space: nowrap; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; scroll-behavior: smooth; cursor: grab; }
.cfb-form.thumbs .cfb-thumb-stage.dragging { cursor: grabbing; scroll-behavior: auto; }
.cfb-form.thumbs .cfb-thumb-stage::-webkit-scrollbar { height: 8px; }
.cfb-form.thumbs .cfb-thumb-stage::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 4px; }
.cfb-form.thumbs .cfb-thumb-stage.centered { text-align: center; }
.cfb-form.thumbs .cfb-thumb-inner { display: inline-block; white-space: nowrap; }
.cfb-form.thumbs .cfb-thumb-group { display: inline-block; vertical-align: top; height: 190px; margin-right: 12px; position: relative; cursor: pointer; }
.cfb-form.thumbs .cfb-thumb-group:last-child { margin-right: 0; }
.cfb-form.thumbs .cfb-thumb-item { display: inline-block; vertical-align: top; position: relative; height: 170px; }
.cfb-form.thumbs .cfb-thumb-item img { height: 170px; width: 120px; display: block; box-sizing: border-box; border: 2px solid transparent; pointer-events: none; background: #fff; object-fit: cover; }
.cfb-form.thumbs .cfb-thumb-item.leftp img { border-right-width: 0; }
.cfb-form.thumbs .cfb-thumb-item.rightp img { border-left-width: 0; }
.cfb-form.thumbs .cfb-thumb-group.highlight img { border-color: #8fd0ff; }
.cfb-form.thumbs .cfb-thumb-group:hover img { border-color: #f18200; }
.cfb-form.thumbs .cfb-thumb-group p { position: absolute; left: 0; bottom: 0; width: 100%; height: 20px; line-height: 20px; margin: 0; text-align: center; font-size: 12px; }

/* share (centred modal) */
.cfb-form.share { width: 415px; font-size: 12px; padding: 18px 20px 20px; }
.cfb-form.share .cfb-share-content { position: relative; margin-top: 12px; display: flex; gap: 0; }
.cfb-form.share .cfb-qr { width: 160px; text-align: center; flex: 0 0 160px; border-right: 1px solid rgba(255,255,255,.35); padding: 4px 0 6px; }
.cfb-form.share .cfb-qr .cfb-qr-box { width: 110px; height: 110px; margin: 0 auto; background: #fff; padding: 5px; box-sizing: border-box; }
.cfb-form.share .cfb-qr canvas, .cfb-form.share .cfb-qr img { width: 100px !important; height: 100px !important; display: block; }
.cfb-form.share .cfb-qr span { display: block; margin-top: 10px; font-size: 14px; }
.cfb-form.share .cfb-social { flex: 1; padding-left: 20px; }
.cfb-form.share .cfb-social-title { font-size: 15px; margin: 4px 0 10px; }
.cfb-form.share .cfb-social-list { display: flex; flex-wrap: wrap; gap: 10px; }
.cfb-form.share .cfb-share-item { display: inline-block; width: 42px; height: 42px; cursor: pointer; border-radius: 50%; }
.cfb-form.share .cfb-share-item:hover { opacity: .8; }
.cfb-form.share .cfb-share-item svg { width: 42px; height: 42px; display: block; }
.cfb-form.share .cfb-link-box { position: relative; margin-top: 18px; height: 30px; }
.cfb-form.share .cfb-link-box input { width: calc(100% - 75px); height: 30px; font-size: 14px; }
.cfb-form.share .cfb-link-box .cfb-copy { position: absolute; right: 0; top: 0; width: 75px; height: 30px; line-height: 30px; text-align: center; cursor: pointer; background: rgba(255,255,255,.25); color: #EEEEEE; font-size: 14px; }
.cfb-form.share .cfb-link-box .cfb-copy:hover { background: rgba(255,255,255,.35); }

/* help */
.cfb-form.help { width: 310px; text-align: center; }
.cfb-form.help .cfb-help-icon { width: 90px; height: 90px; margin: 10px auto; display: block; color: #EEEEEE; stroke: currentColor; fill: none; stroke-width: 1.2; }
.cfb-form.help p { margin: 10px; }

/* go to page (phone) */
.cfb-form.go { left: 0; right: 0; bottom: 60px; width: 100%; padding: 14px 20px; text-align: center; }
.cfb-form.go .cfb-form-handle { display: none; }
.cfb-form.go .cfb-close { display: none; }
.cfb-form.go .cfb-go-label { font-size: 15px; margin-bottom: 6px; }
.cfb-form.go input[type=range] { width: 100%; accent-color: #fff; }

/* ---- toast messages ---- */
.cfb-msg-container { position: fixed; top: 20px; left: 0; right: 0; z-index: 9999; pointer-events: none; box-sizing: border-box; }
.cfb-msg { position: relative; box-sizing: border-box; width: fit-content; max-width: calc(100% - 32px); margin: 0 auto 16px; padding: 11px 15px; border-radius: 4px; border: 1px solid #e9e9eb; display: flex; align-items: center; gap: 8px; background: #f4f4f5; color: #909399; pointer-events: all; opacity: 0; transform: translateY(-100%); transition: opacity .3s, transform .4s; font-size: 14px; line-height: 1; }
.cfb-msg.show { opacity: 1; transform: translateY(0); }
.cfb-msg.success { background: #f0f9eb; border-color: #e1f3d8; color: #67c23a; }
.cfb-msg.warning { background: #fdf6ec; border-color: #faecd8; color: #e6a23c; }
.cfb-msg .cfb-msg-close { cursor: pointer; font-size: 16px; color: #a8abb2; line-height: 1; }

/* ---- phone ---- */
.cfb-app.phone .cfb-toolbar .cfb-buttonbar, .cfb-app.phone .cfb-toolbar .cfb-pagebar { display: none; }
.cfb-app.phone .cfb-phonebar { position: absolute; left: 0; top: 10px; width: 100%; height: 40px; display: flex; justify-content: space-around; align-items: center; padding: 0 10px; box-sizing: border-box; }
.cfb-app.phone .cfb-phonebar .cfb-btn { width: 40px; height: 40px; }
.cfb-app.phone .cfb-phonebar .cfb-btn svg { width: 22px; height: 22px; margin-top: 9px; }
.cfb-app.phone .cfb-btn:hover { background: transparent; }
.cfb-app.phone .cfb-btn .cfb-btn-border { display: none !important; }
.cfb-app.phone .cfb-btn.active { background: rgba(255,255,255,.15); }
.cfb-app.phone .cfb-toprightbar { right: 10px; gap: 10px; }
.cfb-app.phone .cfb-toprightbar .cfb-searchbar { display: none; }
.cfb-app.phone .cfb-phone-topbtns { display: flex; align-items: center; gap: 10px; }
.cfb-app.phone .cfb-phone-topbtns .cfb-btn { width: 40px; height: 40px; }
.cfb-app.phone .cfb-phone-topbtns .cfb-btn svg { width: 20px; height: 20px; margin-top: 10px; }
.cfb-app.phone .cfb-phone-pagenum { color: #EEEEEE; font-size: 13px; }
.cfb-app.phone .cfb-extbar { top: auto; bottom: 60px; right: 0; width: 100%; border-bottom: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.85) !important; padding: 10px 0; }
.cfb-app.phone .cfb-extbar .cfb-btn { display: inline-block; width: 70px; height: 62px; margin: 0 0 0 20px; text-align: center; }
.cfb-app.phone .cfb-extbar .cfb-btn svg { display: block; width: 32px; height: 32px; margin: 0 auto; padding: 7px; box-sizing: border-box; border-radius: 16px; background: rgba(255,255,255,.1); }
.cfb-app.phone .cfb-extbar .cfb-btn span { position: static; display: block; line-height: 20px; font-size: 12px; margin-top: 4px; width: 70px; overflow: hidden; text-overflow: ellipsis; }
.cfb-app.phone .cfb-form.share { width: calc(100% - 20px); left: 10px !important; padding: 18px 14px 20px; }
.cfb-app.phone .cfb-form.share .cfb-share-content { flex-wrap: wrap; }
.cfb-app.phone .cfb-form.share .cfb-qr { border-right: 0; flex: 1 1 100%; width: 100%; }
.cfb-app.phone .cfb-form.share .cfb-social { padding-left: 0; margin-top: 10px; }
.cfb-app.phone .cfb-form.help { width: calc(100% - 40px); left: 20px !important; }
.cfb-app.phone .cfb-form.search, .cfb-app.phone .cfb-form.toc { border: 0; }
.cfb-app.phone .cfb-form.thumbs { height: 220px; }
.cfb-app.phone .cfb-form.thumbs .cfb-thumb-stage { height: 190px; margin: 10px; }
.cfb-app.phone .cfb-form.thumbs .cfb-thumb-group { height: 160px; }
.cfb-app.phone .cfb-form.thumbs .cfb-thumb-item, .cfb-app.phone .cfb-form.thumbs .cfb-thumb-item img { height: 140px; }
.cfb-app.phone .cfb-form.thumbs .cfb-thumb-item img { width: 99px; }
.cfb-app.phone .cfb-zoombar, .cfb-app.phone .cfb-center-hint { display: none !important; }