/* modern.css — the remaining stock DLE / CENTROARTS furniture redrawn in the template
   author's own block style (2026-11-02). Loaded after pages.css, before mobile.css.

   Source of the look: the author's sidebar block in styles.css —
     border 1px #cbdfe8 · radius 8px · #f0f5f8 title strip · #f0f5f8 on hover.
   Palette: border #cbdfe8 · divider #dbe8ed · fill #f0f5f8 · slate #3f4b51 ·
            muted #516168 · grey #6c838e · blue #398dd8 / #2b7cc4.
   Every sprite image of the stock skin is replaced by flat CSS; no shadows, no gradients.
   Markup changes that go with it: main.tpl (toolbar, menu button), sidebar.tpl (#mainnav),
   login.tpl (mob-only items), js/libs.js (menu panel, current section). */

/* ---------- top bar: login, search ---------- */
#toolbar { height: auto; background: #fff none; border-bottom: 1px solid #cbdfe8; }
#toolbar .shadow { display: none; }
#toolbar .dpad { display: flex; align-items: center; gap: 12px; min-height: 60px; }
#toolbar .loginbox { order: 1; }
#toolbar .searchform { order: 2; display: block; margin-left: auto; }
.navbtn { display: none; }

/* search: one bordered field with the button inside, like a sidebar block row */
.searchbar { float: none; display: flex; margin: 0; width: auto; height: auto; background: #fff none;
	border: 1px solid #cbdfe8; border-radius: 6px; overflow: hidden; }
.searchbar:focus-within { border-color: #398dd8; }
.searchbar li { float: none; height: auto; }
.searchbar .lfield { width: auto; padding: 0; overflow: visible; }
.searchbar .lfield input { float: none; display: block; box-sizing: border-box; width: 220px; height: 34px; margin: 0;
	padding: 0 10px; border: 0; background: #fff; color: #3f4b51; font-size: 14px; -webkit-appearance: none; appearance: none; }
.searchbar .lfield input::placeholder { color: #8a9ca5; }
.searchbar .lbtn button { display: block; width: 38px; height: 34px; margin: 0; padding: 0; cursor: pointer;
	border: 0; border-left: 1px solid #cbdfe8; background: #f0f5f8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='6.5' cy='6.5' r='5' fill='none' stroke='%23516168' stroke-width='2'/%3E%3Cpath d='M10.3 10.3L15 15' stroke='%23516168' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 50% 50%; }
.searchbar .lbtn button:hover { background-color: #e4eef3; }

/* login: a quiet button with a caret instead of the glossy sprite tab */
.loginbox { display: flex; align-items: center; gap: 14px; }
.loginbox > li { float: none; }
.loginbox .loginbtn, .loginbox .loginava { float: none; margin: 0; }
.lbn, .lbn b { float: none; height: auto; background: none; }
.lbn { display: inline-block; padding: 7px 12px; line-height: 18px; font-size: 14px; color: #3f4b51;
	background: #f0f5f8; border: 1px solid #cbdfe8; border-radius: 6px; }
.lbn:hover { background-color: #e4eef3; text-decoration: none; }
.lbn b { position: relative; display: block; padding: 0 18px 0 0; }
.lbn b:after { content: ""; position: absolute; right: 2px; top: 50%; margin-top: -2px; border: 5px solid transparent; border-bottom: 0;
	border-top-color: #6c838e; }
.lbn.selected { background: #fff; border-color: #398dd8; border-radius: 6px 6px 0 0; }
.lbn.selected b { background: none; }
.lbn.selected b:after { border-top: 0; border-bottom: 5px solid #398dd8; }

.loginbox #logform { top: 100%; margin-top: -1px; width: 230px; box-sizing: border-box; padding: 12px;
	background: #fff; border: 1px solid #398dd8; border-radius: 0 8px 8px 8px; }
.loginbox #logform .lfield input { box-sizing: border-box; width: 100%; height: 32px; padding: 0 8px; background: #fff; border: 1px solid #cbdfe8; border-radius: 4px; }
.loginbox #logform .lfield input:focus { border-color: #398dd8; }
.loginbox #logform .lbtn .fbutton { width: 100%; }
.loginenter { border-top: 0; margin: -4px 0; }
.loginenter li a { box-sizing: border-box; padding: 7px 4px; color: #398dd8; border-bottom: 1px solid #dbe8ed; }
.loginenter li:last-child a { border-bottom: 0; }
.loginenter li a:hover { background-color: #f0f5f8; text-decoration: none; }
.loginbox .mob-only { display: none; }
.loginbox .lreg { margin-top: 10px; padding-top: 8px; text-align: center; border-top: 1px solid #dbe8ed; }

.loginbox .lvsep { float: none; height: auto; margin: 0; padding: 0; background: none; font-size: 14px; line-height: 20px; }
.loginbox .lvsep .radial { float: none; display: inline-block; margin-right: 5px; padding: 0 7px; border-radius: 9px; }
.loginbox .loginava { width: 34px; height: 34px; overflow: hidden; border: 1px solid #cbdfe8; border-radius: 50%; }
.loginbox .loginava img { display: block; width: 34px; height: 34px; object-fit: cover; }
.loginbox .loginava b { display: none; }
.loginbox .lexit { float: none; display: inline-block; vertical-align: middle; width: auto; height: auto; overflow: visible;
	margin-left: 6px; padding: 0; background: none; font-size: 13px; color: #6c838e; }
.loginbox .lexit:hover { color: #c0504d; text-decoration: none; }
.loginbtn { white-space: nowrap; }

/* ---------- speedbar (breadcrumbs) ---------- */
.speedbar { margin-bottom: 12px; padding: 8px 16px; font-size: 0.95em; color: #6c838e; background: #f0f5f8 none;
	border: 1px solid #cbdfe8; border-radius: 8px; }
.speedbar a { color: #398dd8; }

/* ---------- announcements: each one is a block, like the article page and the menu ---------- */
.base.shortstory:not(.sk) { overflow: hidden; background: #fff; border: 1px solid #cbdfe8; border-radius: 8px; margin-bottom: 18px; }
.base.shortstory:not(.sk) > .dpad { padding: 0 16px 4px; }
.base.shortstory:not(.sk) > .dpad > .btl { margin: 0 -16px 10px; padding: 9px 16px; font: bold 1.2em/1.3 Arial, Helvetica, sans-serif;
	background-color: #f0f5f8; border-bottom: 1px solid #cbdfe8; }
.base.shortstory:not(.sk) > .dpad > .btl a { color: #2b7cc4; }
.base.shortstory:not(.sk) .maincont { text-align: left; line-height: 1.5; }
.base.shortstory:not(.sk) .mlink { border-bottom: 0; }
.base.shortstory:not(.sk) > .dpad > .mlink { margin: 8px -16px -4px; }   /* members list keeps its bar inside .dpad */

/* author / date line and rating: plain text and a star row instead of sprites */
.bhinfo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; height: auto; padding-bottom: 8px; margin-bottom: 10px; }
.bhinfo .isicons { order: 2; }
.bhinfo .ratebox { order: 3; margin-left: auto; }
.bhinfo .isicons, .bhinfo .isicons li { height: auto; }
.baseinfo { float: none; height: auto; padding: 0; background: none; font-size: 0.9em; line-height: 20px; color: #6c838e; }
.ratebox, .pheading .ratebox { float: none; width: auto; height: auto; padding: 0; background: none; }
.ratebox .rate { width: 85px; height: 17px; margin: 0; }

.unit-rating { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24'%3E%3Cpath fill='%23c3d4dd' d='M12 2.6l2.9 6 6.6.9-4.8 4.6 1.2 6.6L12 17.5l-5.9 3.2 1.2-6.6-4.8-4.6 6.6-.9z'/%3E%3C/svg%3E") repeat-x 0 0; }
.unit-rating li.current-rating { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24'%3E%3Cpath fill='%23e2a93b' d='M12 2.6l2.9 6 6.6.9-4.8 4.6 1.2 6.6L12 17.5l-5.9 3.2 1.2-6.6-4.8-4.6 6.6-.9z'/%3E%3C/svg%3E") repeat-x 0 0; }
.unit-rating li a:hover { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24'%3E%3Cpath fill='%23398dd8' d='M12 2.6l2.9 6 6.6.9-4.8 4.6 1.2 6.6L12 17.5l-5.9 3.2 1.2-6.6-4.8-4.6 6.6-.9z'/%3E%3C/svg%3E") repeat-x 0 0; }

/* pictures in announcements and articles: no stray padding, rounded like the blocks */
.maincont img { padding: 0; max-width: 100%; height: auto; border-radius: 6px; }
.maincont div[align="center"] img, .maincont p[style*="center"] img { margin: 4px 0 8px; }

/* ---------- «Члени клубу»: a grid of member cards (shortstory_members.tpl) instead of
   one full-width photo per member; browsers without :has() keep the plain list ---------- */
#dle-content:has(> .base.member) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; }
#dle-content:has(> .base.member) > :not(.member) { grid-column: 1 / -1; }
.base.member { display: flex; flex-direction: column; }
.base.shortstory.member > .dpad { flex: 1 1 auto; display: flex; flex-direction: column; padding: 0 12px; }
.base.shortstory.member > .dpad > .btl { margin: 0 -12px 8px; padding: 8px 12px; font-size: 1.1em; }
.base.member .maincont { flex: 1 1 auto; margin-bottom: 10px; font-size: 0.95em; line-height: 1.35; }
.base.member .maincont p, .base.member .maincont div { margin: 0; text-align: left !important; }
.base.member .maincont div:empty, .base.member .maincont p:empty, .base.member .maincont .clr { display: none; }
.base.member .maincont img { float: none !important; display: block; width: 100% !important; height: auto !important;
	aspect-ratio: 4 / 3; object-fit: cover; margin: 8px 0 0; }
.base.shortstory.member > .dpad > .mlink { margin: auto -12px 0; }

/* ---------- «Подібні матеріали» ---------- */
.related { padding: 0 16px 8px; background: #fff none; border-top: 1px solid #cbdfe8; border-bottom: 0; }
.related .dtop { height: auto; margin: 0 -16px 6px; padding: 8px 16px; background: #f0f5f8; border-bottom: 1px solid #dbe8ed; }
.related .dtop span, .related .dtop span b { float: none; height: auto; padding: 0; line-height: 1.3; background: none;
	font-size: 1em; font-weight: bold; color: #516168; }
.related ul li { position: relative; margin: 0; padding: 4px 4px 4px 16px; background: none; }
.related ul li:before { content: ""; position: absolute; left: 4px; top: 11px; width: 4px; height: 4px; border-radius: 2px; background: #398dd8; }
.related ul li:hover { background-color: #f0f5f8; }
.related br { display: none; }

/* ---------- comments ---------- */
.pheading { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 18px 0 12px; padding: 0 0 10px;
	background: none; border-bottom: 1px solid #dbe8ed; }
.pheading h2 { color: #516168; font-size: 1.3em; font-weight: bold; }
.pheading .lcol { float: none; margin: 0; }
.pheading .clr { display: none; }
.addcombtn { float: none; width: auto; height: auto; padding: 0 14px; font: 14px/30px Arial, Helvetica, sans-serif; color: #fff;
	background: #398dd8 none; border: 1px solid #2b7cc4; border-radius: 4px; }
.addcombtn:hover { background-color: #2b7cc4; }
.addcombtn b { font-weight: normal; }

.bcomment { margin-bottom: 14px; padding: 0; overflow: hidden; background: #fff none; border: 1px solid #cbdfe8; border-radius: 8px; }
.bcomment .dtop { height: auto; min-height: 44px; padding: 8px 16px 8px 68px; background: #f0f5f8; border-top: 0; border-bottom: 1px solid #cbdfe8; }
.bcomment .dtop .lcol { width: 40px; padding: 0; margin-left: -52px; }
.bcomment .dtop .lcol span { margin-top: 2px; border-radius: 50%; }
.bcomment .dtop .lcol span img { display: block; height: 40px; object-fit: cover; }
.bcomment .dtop .rcol ul { height: auto; margin: 0 14px 0 0; padding: 0; line-height: 20px; }
.bcomment .dtop .rcol h4 { font-size: 1.05em; color: #3f4b51; }
.cmsep { padding-left: 0; background: none; }
.reply a, .reply a b { height: auto; background: none; }
.reply a { float: right; margin: 6px 0 0; line-height: 26px; color: #516168; background: #fff; border: 1px solid #cbdfe8; border-radius: 4px; }
.reply a:hover { color: #398dd8; background-color: #e7eff4; }
.reply a b { float: none; display: block; padding: 0 12px; font-weight: normal; }
div.cominfo { height: auto; color: #6c838e; background: #fff none; border-bottom: 1px solid #dbe8ed; }
div.cominfo .dpad { padding: 5px 16px; }
div.cominfo .thide { display: none; }
ul.cominfo { margin: 0 0 0 -8px; }
ul.cominfo li { margin: 0 8px 0 0; padding-left: 8px; border-left: 1px solid #dbe8ed; }
.comedit ul li, .selectmass input { margin: 0 0 0 10px; }
.comedit ul li a { color: #398dd8; }
.bcomment .dcont { padding: 10px 16px 12px; line-height: 1.5; }
.bcomment .dcont h3 { font-size: 1.1em; color: #2b7cc4; }
.bcomment .dcont h3 a { color: inherit; }

/* ---------- pages of a list: square page numbers, flat arrows ---------- */
.basenavi { display: flex; align-items: center; height: auto; margin: 18px 0; font-size: 1em; }
.bnnavi { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; float: none; height: auto; margin: 0; padding: 0; background: none; }
.navigation { display: flex; flex-wrap: wrap; gap: 4px; float: none; margin: 0; }
.navigation a, .navigation span { float: none; display: block; min-width: 32px; height: 32px; box-sizing: border-box; padding: 0 6px;
	line-height: 30px; text-align: center; font-weight: normal; border: 1px solid #cbdfe8; border-radius: 4px; background: #fff; }
.navigation a { color: #3f4b51; }
.navigation a:hover { color: #fff; background-color: #398dd8; border-color: #2b7cc4; }
.navigation span { color: #fff; background-color: #398dd8; border-color: #2b7cc4; font-weight: bold; }
.navigation span.nav_ext { color: #6c838e; background: none; border-color: transparent; font-weight: normal; }
.nextprev { display: flex; gap: 4px; float: none; }
.nextprev > span, .nextprev > a { display: block; }
.nextprev .thide { float: none; display: block; width: 32px; height: 32px; padding: 0; box-sizing: border-box; overflow: hidden;
	text-indent: -999px; border: 1px solid #cbdfe8; border-radius: 4px; background: #fff none; position: relative; }
.nextprev .thide:after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -4px 0 0 -5px;
	border: solid #398dd8; border-width: 2px 2px 0 0; transform: rotate(45deg); }
.nextprev .pprev:after { margin-left: -2px; transform: rotate(-135deg); }
.nextprev > span .thide { opacity: .4; }
.nextprev > span .thide:after { border-color: #6c838e; }
.nextprev a:hover .thide { background-color: #f0f5f8; border-color: #398dd8; }
.toptop { display: block; float: none; width: auto; height: auto; margin-left: auto; padding: 0 12px; overflow: visible;
	line-height: 30px; font-size: 13px; color: #516168; background: #fff none; border: 1px solid #cbdfe8; border-radius: 4px; cursor: pointer; }
.toptop:hover { color: #398dd8; background-color: #f0f5f8; }

/* ---------- sidebar ---------- */
.block .btl { position: relative; }
.block .btl h4 { color: #516168; }
.navclose { display: none; }
.bluemenu li { border-radius: 4px; }
.bluemenu li.active { padding-left: 1px; background-color: #f0f5f8; border-left: 3px solid #398dd8; border-radius: 0 4px 4px 0; }
.bluemenu li.active a { color: #3f4b51; font-weight: bold; }
.bluemenu li.hot a { color: #c0504d; font-weight: bold; }

/* news archive: two small tab buttons instead of the icon sprite */
.tabmenu { position: absolute; right: 10px; top: 50%; margin-top: -12px; display: flex; gap: 4px; }
.tabmenu a { float: none; display: block; width: 26px; height: 24px; margin: 0; padding: 0; box-sizing: border-box; overflow: hidden;
	text-indent: -999px; position: relative; background: #fff none; border: 1px solid #cbdfe8; border-radius: 4px; }
.tabmenu a.selected { background: #398dd8 none; border-color: #2b7cc4; }
.tabmenu a:after { content: ""; position: absolute; left: 6px; right: 6px; top: 6px; height: 2px; background: #6c838e;
	box-shadow: 0 4px 0 #6c838e, 0 8px 0 #6c838e; }
.tabmenu a.tabcal:after { top: 5px; bottom: 5px; height: auto; background: none; border: 2px solid #6c838e; border-top-width: 4px; box-shadow: none; border-radius: 2px; }
.tabmenu a.selected:after { background-color: #fff; box-shadow: 0 4px 0 #fff, 0 8px 0 #fff; }
.tabmenu a.tabcal.selected:after { background: none; border-color: #fff; box-shadow: none; }
#news-arch p { height: auto; margin: 0 0 8px; padding: 6px 16px; line-height: 1.3; color: #6c838e; background: none; border-bottom: 1px solid #dbe8ed; font-size: 0.9em; }
#news-arch .dpad { padding: 0 12px 12px; }
#news-arch .tabcont > a, #news-arch .tabcont > br { margin-left: 16px; }
table.calendar { width: 100%; }
table.calendar th, table.calendar td { text-align: center; }

/* ---------- footer ---------- */
#footmenu { margin-top: 24px; background: #f0f5f8 none; border-top: 1px solid #cbdfe8; border-bottom: 1px solid #cbdfe8; }
#footmenu .shadow { display: none; }
#footmenu .dpad { height: auto; overflow: hidden; }
#footmenu ul { display: flex; flex-wrap: wrap; float: none; margin: 0; padding: 8px 0; }
#footmenu ul li { float: none; }
#footmenu ul a { float: none; display: block; height: auto; padding: 4px 10px; line-height: 20px; background: none; border-radius: 4px; color: #3f4b51; }
#footmenu ul a:hover { color: #398dd8; background-color: #fff; text-decoration: none; }
#footer { padding: 16px 0 28px; }
.copyright { line-height: 1.5; }
.copyright .iaru { float: left; margin-right: 24px; }

/* ---------- footer bar of announcements and articles (.mlink) ----------
   One flex row instead of floats, so nothing wraps around the button:
   wide:   Категорія: …                     Коментарів: 0  Переглядів: 224  [Детальніше]
   narrow: Категорія: …
           Переглядів: 224  Коментарів: 0                                  [Детальніше]
   Only layout here; colours stay in pages.css (light bar, Silent Key dark bar). */
#midside .base .mlink { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; height: auto; min-height: 0; padding: 8px 16px; }
.base .mlink > * { float: none; margin: 0; padding: 0; }
.base .mlink > .mlarrow, .base .mlink > span:empty { display: none; }
.base .mlink .argcat { order: 0; margin: 0 auto 0 0; line-height: 20px; }
.base .mlink .argcoms { order: 1; }
.base .mlink .argviews { order: 2; }
.base .mlink .argmore, .base .mlink .argback { order: 3; }
.base .mlink .argviews span, .base .mlink .argcoms span { float: none; display: inline; margin: 0; line-height: 20px; white-space: nowrap; }
.base .mlink .argmore a, .base .mlink .argback a { float: none; display: inline-block; margin: 0; vertical-align: middle; }

@media screen and (max-width: 620px) {
	#midside .base .mlink { padding: 8px 12px; gap: 6px 12px; }
	.base .mlink .argcat { flex: 1 0 100%; margin: 0; }
	.base .mlink .argviews { order: 1; }
	.base .mlink .argcoms { order: 2; }
	.base .mlink .argmore, .base .mlink .argback { margin-left: auto; }
}
#midside .base.member .mlink { padding: 7px 12px; gap: 6px 10px; }
@media screen and (max-width: 800px) { #midside .base.member .mlink { padding: 6px 10px; } }

/* ---------- search page (do=search) ----------
   DLE prints the form as nested tables with inline widths; flatten them into blocks and lay
   the parts out with flex/grid. #full_search tells the simple form (0) from the advanced one (1). */
.searchpage .searchtable { padding: 14px 0 2px; }
#searchtable table, #searchtable tbody, #searchtable tr, #searchtable td { display: block; width: auto; margin: 0; padding: 0; border: 0; text-align: left; }
#searchtable div[align] { text-align: left; }
#searchtable br { display: none; }
#searchtable .textin, #searchtable select, #searchtable #searchinput, #searchtable #searchuser {
	width: 100% !important; max-width: 100%; height: 38px; margin: 0; padding: 6px 10px; font-size: 15px; color: #3f4b51; }
#searchtable select[multiple] { height: auto !important; padding: 4px; }
#searchtable select[multiple] option { padding: 3px 6px; border-radius: 3px; }
#searchtable #searchinput { padding-left: 36px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236c838e' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") no-repeat 12px 50%; }
#searchtable .textin:focus, #searchtable select:focus { border-color: #398dd8; outline: 0; box-shadow: 0 0 0 3px rgba(57,141,216,.15); }
#searchtable input[type=checkbox], #searchtable input[type=radio] { margin: 0; accent-color: #398dd8; }
#searchtable label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

/* buttons: «Почати пошук» is the primary action, the rest stay quiet */
#searchtable .bbcodes { height: 38px; margin: 0 !important; padding: 0 18px; border-radius: 6px; }
#searchtable #dosearch { color: #fff; background-color: #398dd8; border-color: #2b7cc4; }
#searchtable #dosearch:hover { background-color: #2b7cc4; }

/* simple form: [ 🔍 field ............ ][ Почати пошук ]  розширений пошук */
#full_search[value="0"] ~ table td.search > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 !important; }
#full_search[value="0"] ~ table #searchinput { flex: 1 1 240px; width: auto !important; height: 42px; font-size: 16px; }
#full_search[value="0"] ~ table #dosearch { height: 42px; }
#full_search[value="0"] ~ table #dofullsearch { height: auto; padding: 4px 2px; font-weight: normal; color: #398dd8; background: none; border: 0; }
#full_search[value="0"] ~ table #dofullsearch:hover { color: #2b7cc4; text-decoration: underline; }

/* advanced form: two columns of cards, buttons across the bottom */
#full_search[value="1"] ~ table div[align] > table > tbody { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
#full_search[value="1"] ~ table div[align] > table > tbody > tr { display: contents; }
#full_search[value="1"] ~ table div[align] > table > tbody > tr > td { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
#full_search[value="1"] ~ table div[align] > table > tbody > tr > td[colspan] { grid-column: 1 / -1; }
#full_search[value="1"] ~ table div[align] > table > tbody > tr > td > fieldset:only-child { flex: 1 1 auto; }
#searchtable fieldset { margin: 0 !important; padding: 10px 14px 14px !important; background: #fff; border: 1px solid #dbe8ed; border-radius: 8px; min-width: 0; }
#searchtable fieldset legend { padding: 0 6px; font-size: 0.95em; font-weight: bold; color: #516168; }
#searchtable fieldset table td.search + td.search, #searchtable fieldset tr + tr td.search { margin-top: 10px; }
#searchtable fieldset td.search > div:first-child:not(#userfield) { margin-bottom: 4px; font-size: 0.9em; color: #6c838e; }
#searchtable #userfield label { margin-top: 10px; }
#searchtable fieldset > div[style] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 !important; color: #516168; }
#searchtable fieldset > div[style] > select { flex: 1 1 150px; width: auto !important; }
#searchtable fieldset > div[style] > div { flex: 1 1 100%; }
#searchtable #replylimit { flex: 0 0 76px; width: 76px !important; text-align: center; }
#searchtable td.search:has(> label[for=rb_showposts_0]) { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 0; }
#searchtable td.search > label[for^=rb_showposts] { font-size: 15px; color: #3f4b51; }
#full_search[value="1"] ~ table td[colspan] > div { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 !important; padding-top: 2px; }

/* the "found N results" line and the title-only result list */
.searchpage .searchmsg { margin-top: 14px; padding: 9px 14px; font-size: 0.95em; color: #516168; background: #f0f5f8; border: 1px solid #dbe8ed; border-radius: 6px; }
.searchpage .searchmsg:empty { display: none; }
#dle-content .searchitem { margin: 0 0 8px; padding: 10px 16px; background: #fff; border: 1px solid #cbdfe8; border-radius: 8px; }
#dle-content .searchitem h3 { margin: 0 0 4px; font-size: 1.1em; line-height: 1.3; }
.searchitem .simeta { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 0.88em; color: #6c838e; }
.searchitem .simeta span:empty { display: none; }
/* searched words, marked by libs.js */
mark.hl { padding: 0 2px; color: inherit; background: #fff1a8; border-radius: 3px; }

@media screen and (min-width: 621px) {   /* the category list fills its card down to the left column's bottom */
	#searchtable fieldset:has(select[multiple]) { display: flex; flex-direction: column; }
	#searchtable fieldset:has(select[multiple]) > div, #searchtable fieldset:has(select[multiple]) > div > div { display: flex; flex-direction: column; flex: 1 1 auto; }
	#searchtable select[multiple] { flex: 1 1 auto; min-height: 220px; }
}
@media screen and (max-width: 620px) {
	#full_search[value="1"] ~ table div[align] > table > tbody { grid-template-columns: 1fr; }
	#full_search[value="0"] ~ table #searchinput { flex-basis: 100%; }
	#full_search[value="0"] ~ table #dosearch { flex: 1 1 auto; }
	#full_search[value="1"] ~ table td[colspan] > div > #dosearch { flex: 1 1 100%; }
	#full_search[value="1"] ~ table td[colspan] > div > .bbcodes { flex: 1 1 0; }
	#searchtable .textin, #searchtable select, #searchtable #searchinput, #searchtable #searchuser { font-size: 16px; }   /* no zoom-in on iOS */
}

/* ---------- «Популярні матеріали» (sidebar banner, {topnews}): numbered rows ---------- */
#sidebar #popular ul { margin: 0; padding: 4px 0; list-style: none; counter-reset: top; background: none; }
/* number and title share one line height and sit on the same first baseline */
#sidebar #popular li { counter-increment: top; display: flex; align-items: baseline; gap: 10px; margin: 0; padding: 7px 16px; line-height: 1.35; background: none; border-top: 1px solid #dbe8ed; }
#sidebar #popular li:first-child { border-top: 0; }
#sidebar #popular li::before { content: counter(top); flex: 0 0 18px; font-weight: bold; line-height: inherit; color: #8a9ca5; text-align: right; }
#sidebar #popular li a { flex: 1 1 auto; min-width: 0; padding: 0; color: #2b7cc4; line-height: inherit; text-decoration: none; }
#sidebar #popular li a:hover { color: #398dd8; text-decoration: underline; }
@media screen and (max-width: 800px) { #sidebar #popular li { padding: 9px 12px; } }

/* ---------- profile: gallery counts under the call-sign line ---------- */
.usgal { clear: both; flex: 1 0 100%; padding-top: 6px; color: #6c838e; }