/*
 * Modern Crafto theme for WebMCR 3.x
 * Design system inspired by modern Tailwind + shadcn/ui patterns.
 * Bootstrap 2 remains underneath for legacy WebMCR widgets and JS APIs.
 */

:root {
    --background: #080b12;
    --background-soft: #0b1019;
    --card: rgba(16, 22, 33, 0.88);
    --card-solid: #101621;
    --popover: #121925;
    --foreground: #f5f7fb;
    --muted: #8f9bad;
    --muted-foreground: #aeb8c7;
    --primary: #7284ff;
    --primary-hover: #8796ff;
    --primary-foreground: #ffffff;
    --secondary: #151d2a;
    --secondary-hover: #1b2636;
    --border: rgba(148, 163, 184, 0.14);
    --border-strong: rgba(148, 163, 184, 0.24);
    --input: #0e1520;
    --success: #34d399;
    --warning: #fbbf24;
    --danger: #fb7185;
    --info: #38bdf8;
    --ring: rgba(114, 132, 255, 0.38);
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.16);
    --shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
    --shell: 1240px;
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body.theme-modern {
    min-height: 100vh;
    color: var(--foreground);
    background:
        radial-gradient(circle at 12% -10%, rgba(114,132,255,.12), transparent 32rem),
        radial-gradient(circle at 92% 20%, rgba(56,189,248,.07), transparent 28rem),
        var(--background);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

body.theme-modern a { color: #a9b5ff; text-decoration: none; transition: color .16s ease, opacity .16s ease, border-color .16s ease, background-color .16s ease, transform .16s ease; }
body.theme-modern a:hover { color: #d8deff; text-decoration: none; }
body.theme-modern img { max-width: 100%; height: auto; }
body.theme-modern ul { margin: 0; }
body.theme-modern button,
body.theme-modern input,
body.theme-modern select,
body.theme-modern textarea { font: inherit; }

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

.site-app { min-height: 100vh; display: flex; flex-direction: column; }
.site-container { width: min(calc(100% - 36px), var(--shell)); margin-left: auto; margin-right: auto; }

/* Header / navigation */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1040;
    background: rgba(8, 11, 18, .82);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.site-header-inner {
    width: min(calc(100% - 36px), var(--shell));
    min-height: 72px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 24px;
}
.site-brand { display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto; color: var(--foreground) !important; }
.site-brand:hover { transform: translateY(-1px); }
.site-brand-mark {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 11px;
    color: #fff;
    font-weight: 850;
    font-size: 17px;
    letter-spacing: -.04em;
    background: linear-gradient(145deg, #8796ff, #586be8 58%, #3c4fbd);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 10px 30px rgba(88,107,232,.24);
}
.site-brand-copy { display: flex; flex-direction: column; line-height: 1.15; }
.site-brand-copy strong { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 780; color: var(--foreground); }
.site-brand-copy small { margin-top: 4px; color: var(--muted); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.site-nav-wrap { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.site-navigation { min-width: 0; }
.site-navigation > .nav { display: flex; align-items: center; gap: 4px; float: none; }
.site-navigation > .nav > li { float: none; position: relative; }
.site-navigation > .nav > li > a {
    padding: 9px 11px;
    border-radius: 9px;
    color: #adb7c8;
    font-size: 13px;
    font-weight: 650;
    text-shadow: none;
}
.site-navigation > .nav > li > a:hover,
.site-navigation > .nav > li.active > a,
.site-navigation > .nav > li.open > a,
.site-navigation > .nav > li.dropdown.open > .dropdown-toggle {
    color: #fff;
    background: rgba(255,255,255,.055);
    box-shadow: none;
}
.site-navigation .caret { margin-left: 6px; border-top-color: #7f8a9c; opacity: .9; }
.site-navigation .dropdown-menu,
.site-search-wrap .dropdown-menu {
    min-width: 210px;
    padding: 7px;
    margin-top: 8px;
    background: rgba(15,21,32,.98);
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    box-shadow: var(--shadow);
}
.site-navigation .dropdown-menu li > a,
.site-search-wrap .dropdown-menu li > a {
    padding: 8px 10px;
    color: #b8c2d2;
    border-radius: 8px;
    font-size: 13px;
}
.site-navigation .dropdown-menu li > a:hover,
.site-navigation .dropdown-menu li.active > a,
.site-navigation .dropdown-submenu:hover > a,
.site-search-wrap .dropdown-menu li > a:hover {
    color: #fff;
    background: rgba(114,132,255,.12);
}
.site-navigation .dropdown-submenu > .dropdown-menu { margin-left: 9px; margin-top: -7px; }
.site-menu-toggle {
    display: none;
    width: 40px;
    height: 40px;
    padding: 0;
    margin-left: auto;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--secondary);
    box-shadow: none;
}
.site-menu-toggle > span:not(.sr-only) { display: block; width: 17px; height: 1.5px; margin: 4px auto; background: #c8d1df; border-radius: 999px; transition: transform .18s ease, opacity .18s ease; }
.site-menu-toggle[aria-expanded="true"] > span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.site-menu-toggle[aria-expanded="true"] > span:nth-child(2) { opacity: 0; }
.site-menu-toggle[aria-expanded="true"] > span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* Search */
.site-search-wrap { flex: 0 1 310px; min-width: 210px; }
.site-search-wrap .navbar-form { float: none !important; margin: 0; padding: 0; display: flex; align-items: center; gap: 6px; }
.site-search-wrap .navbar-form .input-append { display: flex; flex: 1; margin: 0; white-space: normal; }
.site-search-wrap .navbar-form .input-append input {
    width: 100% !important;
    min-width: 0;
    height: 38px;
    padding: 8px 11px;
    margin: 0;
    color: var(--foreground);
    background: rgba(14,21,32,.86);
    border: 1px solid var(--border);
    border-radius: 10px 0 0 10px;
    box-shadow: none;
}
.site-search-wrap .navbar-form .input-append input:focus { border-color: rgba(114,132,255,.58); box-shadow: 0 0 0 3px var(--ring); outline: none; }
.site-search-wrap .navbar-form .btn { height: 38px; margin: 0; border-radius: 10px; }
.site-search-wrap .navbar-form .input-append .btn { border-radius: 0 10px 10px 0; margin-left: -1px; }
.site-search-wrap .navbar-form .btn-group { display: inline-flex; flex: 0 0 auto; margin: 0; }
.site-search-wrap .navbar-form .btn-group > .btn { width: 38px; padding-left: 0; padding-right: 0; }

/* Hero */
.site-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, rgba(12,17,27,.85), rgba(8,11,18,.58)); }
.site-hero-inner { position: relative; z-index: 2; min-height: 320px; display: grid; grid-template-columns: minmax(0,1.35fr) minmax(280px,.65fr); align-items: center; gap: 50px; padding-top: 54px; padding-bottom: 54px; }
.site-kicker { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 17px; color: #9aa8c0; font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.site-kicker > span { width: 22px; height: 1px; background: var(--primary); box-shadow: 0 0 10px rgba(114,132,255,.75); }
.site-hero-copy h1 { max-width: 780px; margin: 0; color: #fff; font-size: clamp(34px, 5vw, 62px); line-height: 1.02; font-weight: 850; letter-spacing: -.05em; text-shadow: none; }
.site-hero-copy p { max-width: 760px; margin: 18px 0 0; color: #9ca9bc; font-size: 15px; line-height: 1.75; font-weight: 450; }
.site-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.site-hero .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 9px 15px; }
.modern-btn-icon { font-size: 16px; line-height: 1; }
.site-hero-glow { position: absolute; border-radius: 999px; filter: blur(2px); pointer-events: none; }
.site-hero-glow-a { width: 620px; height: 620px; left: -280px; top: -440px; background: radial-gradient(circle, rgba(114,132,255,.16), transparent 66%); }
.site-hero-glow-b { width: 500px; height: 500px; right: -230px; bottom: -360px; background: radial-gradient(circle, rgba(56,189,248,.09), transparent 68%); }
.site-hero-visual { position: relative; width: 290px; height: 220px; justify-self: end; display: grid; place-items: center; opacity: .94; }
.hero-orbit { position: absolute; border: 1px solid rgba(142,156,255,.16); border-radius: 50%; transform: rotate(-18deg); }
.hero-orbit-one { width: 265px; height: 115px; }
.hero-orbit-two { width: 220px; height: 88px; transform: rotate(28deg); border-color: rgba(56,189,248,.10); }
/* Minecraft-inspired voxel in the hero. Pure CSS, no external asset. */
.hero-cube {
    position: relative;
    width: 112px;
    height: 112px;
    filter: drop-shadow(0 24px 30px rgba(0,0,0,.34));
    transform: translateY(-8px);
}
.hero-cube span { position: absolute; display: block; }
.hero-cube-top {
    width: 96px;
    height: 96px;
    left: 8px;
    top: 0;
    clip-path: polygon(50% 0, 100% 25%, 50% 50%, 0 25%);
    background:
        linear-gradient(#a8d66f 0 0) 18px 9px/15px 11px no-repeat,
        linear-gradient(#4d8737 0 0) 63px 16px/13px 10px no-repeat,
        linear-gradient(#7fb44f 0 0) 45px 4px/11px 10px no-repeat,
        linear-gradient(#5f9b42 0 0) 29px 24px/12px 9px no-repeat,
        #72aa49;
    image-rendering: pixelated;
}
.hero-cube-left {
    width: 96px;
    height: 96px;
    left: 8px;
    top: 24px;
    clip-path: polygon(0 0, 50% 25%, 50% 100%, 0 75%);
    background:
        linear-gradient(#4d8d39 0 0) 0 0/100% 17px no-repeat,
        linear-gradient(#6c432b 0 0) 11px 29px/14px 13px no-repeat,
        linear-gradient(#9a6943 0 0) 31px 47px/12px 12px no-repeat,
        linear-gradient(#5f3927 0 0) 6px 62px/12px 11px no-repeat,
        linear-gradient(#a0714a 0 0) 27px 73px/15px 10px no-repeat,
        #7b5134;
    image-rendering: pixelated;
}
.hero-cube-right {
    width: 96px;
    height: 96px;
    left: 56px;
    top: 24px;
    clip-path: polygon(0 25%, 50% 0, 50% 75%, 0 100%);
    background:
        linear-gradient(#3f7f35 0 0) 0 0/100% 17px no-repeat,
        linear-gradient(#835637 0 0) 13px 32px/12px 11px no-repeat,
        linear-gradient(#5b3525 0 0) 27px 51px/13px 12px no-repeat,
        linear-gradient(#95613f 0 0) 7px 70px/14px 10px no-repeat,
        #68432d;
    image-rendering: pixelated;
}
.hero-pixel {
    position: absolute;
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 1px;
    background: rgba(126,143,255,.55);
    box-shadow: 0 0 14px rgba(126,143,255,.28);
}
.hero-pixel-a { left: 30px; top: 46px; transform: rotate(14deg); }
.hero-pixel-b { right: 34px; top: 74px; width: 5px; height: 5px; background: rgba(52,211,153,.55); }
.hero-pixel-c { left: 56px; bottom: 36px; width: 4px; height: 4px; opacity: .62; }
.hero-status { position: absolute; right: 4px; bottom: 18px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 999px; background: rgba(11,16,25,.72); color: #a9b4c5; font-size: 11px; backdrop-filter: blur(10px); }
.hero-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 10px rgba(52,211,153,.6); }

/* Main shell */
.site-main { flex: 1 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; padding-top: 28px; padding-bottom: 44px; }
.site-content { min-width: 0; }
.site-sidebar { min-width: 0; position: sticky; top: 94px; }
.site-sidebar > *:first-child { margin-top: 0; }

/* Cards / WebMCR blocks */
body.theme-modern .form-block,
body.theme-modern .static-page,
body.theme-modern .mcr-search,
body.theme-modern .file-manager,
body.theme-modern .adm-info-main,
body.theme-modern .adm-info-stats,
body.theme-modern .adm-info-modules {
    margin: 0 0 14px;
    padding: 0;
    color: var(--foreground);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    font-family: inherit;
    overflow: visible;
    backdrop-filter: blur(10px);
}
body.theme-modern .form-block:hover { border-color: rgba(148,163,184,.20); }
body.theme-modern .block-header { min-height: 49px; padding: 14px 16px 11px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #eef2f8; font-size: 13px; font-weight: 760; line-height: 1.4; }
body.theme-modern .block-name { min-width: 0; font-weight: 760; }
body.theme-modern .block-name a { color: #f2f4f8; }
body.theme-modern .block-name a:hover { color: #bfc8ff; }
body.theme-modern .block-right { flex: 0 0 auto; }
body.theme-modern .block-line { height: 1px; margin: 0; background: var(--border); border: 0; }
body.theme-modern .block-content,
body.theme-modern .new-id-content,
body.theme-modern .new-full-content,
body.theme-modern .profile-content,
body.theme-modern .static-content,
body.theme-modern .comment-list-content,
body.theme-modern .comment-form-content { padding: 16px; color: #bdc6d4; }
body.theme-modern .new-id-content,
body.theme-modern .new-full-content,
body.theme-modern .static-content { font-size: 14px; line-height: 1.75; }
body.theme-modern .new-id-content img,
body.theme-modern .new-full-content img,
body.theme-modern .static-content img { border-radius: 12px; }
body.theme-modern .block-footer { min-height: 44px; padding: 10px 14px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; color: var(--muted); font-size: 11px; background: rgba(255,255,255,.012); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
body.theme-modern .block-footer > div { margin: 0; float: none; }
body.theme-modern .block-footer .readmore { margin-left: auto; }
body.theme-modern .block-footer .views i { opacity: .65; margin-right: 4px; }
body.theme-modern .block-footer a { color: #9faaff; font-weight: 650; }

/* Sidebar profile */
body.theme-modern .block-profile { display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 13px; align-items: start; }
body.theme-modern .block-profile .avatar { float: none; width: 64px; margin: 0; }
body.theme-modern .block-profile .avatar img,
body.theme-modern .img-polaroid { padding: 0; background: #0b1018; border: 1px solid var(--border-strong); border-radius: 13px; box-shadow: none; }
body.theme-modern .block-profile .info { min-width: 0; }
body.theme-modern .block-profile .info li { padding: 3px 0; color: #9ba7b8; font-size: 12px; overflow-wrap: anywhere; }
body.theme-modern .block-profile .info li b { color: #cfd6e0; }
body.theme-modern .block-profile .info li .btn { margin-top: 5px; }
body.theme-modern .block-online .title { color: #dce2eb; font-weight: 700; margin-bottom: 9px; }
body.theme-modern #onl_count { margin-top: 12px; color: #8996a9; font-size: 12px; }
body.theme-modern #onl_count p { margin: 3px 0; }

/* Breadcrumbs */
body.theme-modern .breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 38px;
    margin: 0 0 14px;
    padding: 8px 11px;
    background: rgba(16,22,33,.62);
    border: 1px solid var(--border);
    border-radius: 11px;
    font-family: inherit;
    font-size: 11px;
    box-shadow: none;
}
body.theme-modern .breadcrumb > li { display: inline-flex; align-items: center; color: #79869a; text-shadow: none; }
body.theme-modern .breadcrumb > li > .divider { padding: 0 5px; color: #4d596a; }
body.theme-modern .breadcrumb a { color: #919daf; }
body.theme-modern .breadcrumb .active { color: #c6ceda; }

/* Buttons - shadcn-like */
body.theme-modern .btn {
    min-height: 36px;
    padding: 7px 12px;
    color: #d7deea;
    font-size: 12px;
    font-weight: 680;
    line-height: 1.2;
    text-shadow: none;
    background: var(--secondary);
    background-image: none;
    border: 1px solid var(--border-strong);
    border-radius: 9px;
    box-shadow: none;
    transition: background .16s ease, border-color .16s ease, color .16s ease, transform .12s ease;
}
body.theme-modern .btn:hover,
body.theme-modern .btn:focus,
body.theme-modern .btn.active,
body.theme-modern .btn:active { color: #fff; background: var(--secondary-hover); border-color: rgba(148,163,184,.32); background-image: none; box-shadow: none; outline: none; }
body.theme-modern .btn:active { transform: translateY(1px); }
body.theme-modern .btn-primary,
body.theme-modern .modern-primary { color: #fff; background: var(--primary); border-color: transparent; }
body.theme-modern .btn-primary:hover,
body.theme-modern .modern-primary:hover { color: #fff; background: var(--primary-hover); border-color: transparent; }
body.theme-modern .btn-success { color: #d8fff0; background: rgba(52,211,153,.13); border-color: rgba(52,211,153,.22); }
body.theme-modern .btn-success:hover { background: rgba(52,211,153,.20); }
body.theme-modern .modern-secondary { color: #c7d0de; background: rgba(255,255,255,.035); }
body.theme-modern .btn-mini { min-height: 27px; padding: 4px 8px; border-radius: 7px; font-size: 10px; }
body.theme-modern .btn-small { min-height: 31px; padding: 5px 9px; border-radius: 8px; }
body.theme-modern .btn-block { display: flex; width: 100%; justify-content: center; box-sizing: border-box; }
body.theme-modern .btn-group > .btn + .btn { margin-left: -1px; }

/* Forms */
body.theme-modern input[type="text"],
body.theme-modern input[type="email"],
body.theme-modern input[type="password"],
body.theme-modern input[type="number"],
body.theme-modern input[type="url"],
body.theme-modern input[type="search"],
body.theme-modern select,
body.theme-modern textarea {
    width: auto;
    min-height: 38px;
    padding: 8px 10px;
    margin: 0;
    color: #e3e8f0;
    background: var(--input);
    border: 1px solid var(--border-strong);
    border-radius: 9px;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
body.theme-modern textarea { min-height: 96px; resize: vertical; }
body.theme-modern input:focus,
body.theme-modern select:focus,
body.theme-modern textarea:focus { color: #fff; background: #111a27; border-color: rgba(114,132,255,.62); box-shadow: 0 0 0 3px var(--ring); outline: none; }
body.theme-modern input::placeholder,
body.theme-modern textarea::placeholder { color: #627086; }
body.theme-modern .input-block-level,
body.theme-modern input[class*="span"],
body.theme-modern select[class*="span"],
body.theme-modern textarea[class*="span"] { max-width: 100%; }
body.theme-modern .form-horizontal .control-group { margin-bottom: 14px; }
body.theme-modern .form-horizontal .control-label { width: 150px; padding-top: 8px; color: #aeb8c7; font-size: 12px; font-weight: 650; }
body.theme-modern .form-horizontal .controls { margin-left: 170px; }
body.theme-modern .checkbox { color: #9ea9ba; font-size: 12px; }
body.theme-modern .input-prepend,
body.theme-modern .input-append { white-space: normal; }
body.theme-modern .input-prepend .add-on,
body.theme-modern .input-append .add-on {
    min-width: 38px;
    min-height: 38px;
    padding: 8px 9px;
    color: #8491a5;
    text-shadow: none;
    background: #111926;
    border: 1px solid var(--border-strong);
    box-sizing: border-box;
}
body.theme-modern .input-prepend .add-on { border-radius: 9px 0 0 9px; }
body.theme-modern .input-prepend input { min-height: 38px; border-radius: 0 9px 9px 0; }
body.theme-modern .block-auth .input-prepend { display: flex; width: 100%; margin-bottom: 9px; }
body.theme-modern .block-auth .input-prepend input { flex: 1; width: 1%; }
body.theme-modern .block-auth .buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
body.theme-modern .block-auth .buttons .btn { flex: 1 1 auto; }

/* Tables / definitions */
body.theme-modern table { width: 100%; border-collapse: separate; border-spacing: 0; color: #b9c3d1; background: transparent; }
body.theme-modern table th { color: #d8dee8; background: rgba(255,255,255,.025); font-size: 11px; text-align: left; }
body.theme-modern table th,
body.theme-modern table td { padding: 10px 11px; border-top: 1px solid var(--border); }
body.theme-modern .table-bordered { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
body.theme-modern .dl-horizontal dt { color: #d4dbe5; }
body.theme-modern .dl-horizontal dd { color: #98a5b6; }

/* Nav tabs / profile */
body.theme-modern .profile-content > .navbar { position: static; margin: 0 0 15px; }
body.theme-modern .profile-content > .navbar .navbar-inner { min-height: 44px; padding: 5px; background: #0c121c; background-image: none; border: 1px solid var(--border); border-radius: 11px; box-shadow: none; }
body.theme-modern .profile-content > .navbar .brand { float: left; margin: 0 5px 0 0; padding: 8px 10px; color: #e0e5ed; font-size: 12px; text-shadow: none; }
body.theme-modern .profile-content > .navbar .nav { display: flex; gap: 3px; float: none; }
body.theme-modern .profile-content > .navbar .nav > li { float: none; }
body.theme-modern .profile-content > .navbar .nav > li > a { padding: 8px 10px; color: #8e9caf; text-shadow: none; border-radius: 8px; }
body.theme-modern .profile-content > .navbar .nav > .active > a,
body.theme-modern .profile-content > .navbar .nav > li > a:hover { color: #fff; background: rgba(114,132,255,.10); box-shadow: none; }
body.theme-modern .profile-info { display: grid; gap: 0; border: 1px solid var(--border); border-radius: 11px; overflow: hidden; }
body.theme-modern .profile-info .info-line { display: grid; grid-template-columns: minmax(120px, 180px) 1fr; gap: 14px; padding: 10px 12px; border-bottom: 1px solid var(--border); color: #9ca8b9; }
body.theme-modern .profile-info .info-line:last-child { border-bottom: 0; }
body.theme-modern .profile-info .info-line b { color: #cbd3de; }
body.theme-modern .skin-block { background: radial-gradient(circle at 50% 10%, rgba(114,132,255,.11), transparent 60%), #0b111a; border: 1px solid var(--border); border-radius: 13px; }

/* Alerts / toast */
body.theme-modern .alert {
    padding: 10px 12px;
    color: #eedda6;
    text-shadow: none;
    background: rgba(251,191,36,.09);
    border: 1px solid rgba(251,191,36,.20);
    border-radius: 11px;
}
body.theme-modern .alert-error { color: #ffd6dd; background: rgba(251,113,133,.10); border-color: rgba(251,113,133,.22); }
body.theme-modern .alert-success { color: #d9ffed; background: rgba(52,211,153,.09); border-color: rgba(52,211,153,.22); }
body.theme-modern .alert-info { color: #d7f4ff; background: rgba(56,189,248,.09); border-color: rgba(56,189,248,.22); }
body.theme-modern .modern-toast { display: none; position: sticky; top: 84px; z-index: 1030; margin: 0 0 14px; box-shadow: var(--shadow-sm); }
body.theme-modern .modern-toast #close { float: right; color: inherit; opacity: .55; font-size: 18px; line-height: 1; }
body.theme-modern .modern-toast #title { padding-right: 24px; font-weight: 760; }
body.theme-modern .modern-toast #message { margin-top: 2px; color: inherit; opacity: .84; }

/* Pagination */
body.theme-modern .pagination { margin: 18px 0 0; }
body.theme-modern .pagination ul { display: inline-flex; gap: 5px; border-radius: 0; box-shadow: none; }
body.theme-modern .pagination ul > li { display: inline-flex; }
body.theme-modern .pagination ul > li > a,
body.theme-modern .pagination ul > li > span {
    min-width: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    color: #9ca8ba;
    background: var(--card-solid);
    border: 1px solid var(--border) !important;
    border-radius: 9px !important;
}
body.theme-modern .pagination ul > li > a:hover,
body.theme-modern .pagination ul > li.active > a { color: #fff; background: rgba(114,132,255,.13); border-color: rgba(114,132,255,.30) !important; }

/* Modals / dropdowns */
body.theme-modern .modal { color: var(--foreground); background: var(--popover); border: 1px solid var(--border-strong); border-radius: 15px; box-shadow: var(--shadow); }
body.theme-modern .modal-header { border-bottom: 1px solid var(--border); }
body.theme-modern .modal-footer { background: rgba(255,255,255,.018); border-top: 1px solid var(--border); border-radius: 0 0 15px 15px; box-shadow: none; }
body.theme-modern .close { color: #f4f7fb; text-shadow: none; opacity: .55; }
body.theme-modern .dropdown-menu .divider { background: var(--border); border: 0; }

/* Progress */
body.theme-modern .progress { height: 8px; margin-bottom: 10px; background: #0b111a; background-image: none; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--border); }
body.theme-modern .progress .bar { background: linear-gradient(90deg, #6174f0, #8796ff); background-image: none; border-radius: 999px; box-shadow: none; }

/* Advice / special pages */
body.theme-modern .bs-docs-social { padding: 10px 0; color: #9ca8b8; background: #0c121c; border-color: var(--border); }
body.theme-modern .mcr-403,
body.theme-modern .mcr-404 { color: #dce2eb; }
body.theme-modern .mcr-403 h1,
body.theme-modern .mcr-404 h1 { color: #fff; }

/* Admin / old modules safety */
body.theme-modern .panel-blocks,
body.theme-modern .panel-categories,
body.theme-modern .panel-comments,
body.theme-modern .panel-logs,
body.theme-modern .panel-menu,
body.theme-modern .panel-menu-adm,
body.theme-modern .panel-menu-groups,
body.theme-modern .panel-menu-icons,
body.theme-modern .panel-modules,
body.theme-modern .panel-news,
body.theme-modern .panel-permissions,
body.theme-modern .panel-views,
body.theme-modern .panel-votes { overflow-x: auto; }
body.theme-modern code,
body.theme-modern pre { color: #cbd4ff; background: #0a0f17; border: 1px solid var(--border); border-radius: 8px; }

/* Loader */
body.theme-modern #js-loader {
    position: fixed;
    z-index: 1100;
    right: 18px;
    bottom: 18px;
    width: 46px;
    height: 46px;
    padding: 0;
    display: none;
    place-items: center;
    background: rgba(15,21,32,.94);
    border: 1px solid var(--border-strong);
    border-radius: 13px;
    box-shadow: var(--shadow);
}
body.theme-modern #js-loader > img { display: none; }
.modern-spinner { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.14); border-top-color: #8796ff; border-radius: 50%; animation: modern-spin .7s linear infinite; }
@keyframes modern-spin { to { transform: rotate(360deg); } }

/* Footer */
.site-footer { margin-top: auto; border-top: 1px solid var(--border); background: rgba(7,10,16,.72); }
.site-footer-inner { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 24px; color: #717e91; font-size: 11px; }
.site-footer-inner > div:first-child { display: flex; flex-direction: column; gap: 3px; }
.site-footer-inner strong { color: #c5ced9; font-size: 12px; }
.site-footer-meta { text-align: right; }
.site-footer-meta span { padding: 0 5px; opacity: .45; }

/* Remove obsolete fixed bootstrap shell from the default theme */
body.theme-modern > .navbar,
body.theme-modern > .jumbotron { display: none !important; }
body.theme-modern > .container { margin-bottom: 0; }
body.theme-modern .container > .container-fluid > .row-fluid > .span8 { margin-top: 0; }

/* Responsive */
@media (max-width: 1040px) {
    .site-hero-inner { grid-template-columns: minmax(0,1fr) 235px; gap: 24px; }
    .site-hero-visual { width: 230px; transform: scale(.88); transform-origin: center right; }
    .site-main { grid-template-columns: minmax(0,1fr) 270px; }
    .site-brand-copy small { display: none; }
    .site-search-wrap { flex-basis: 235px; }
}

@media (max-width: 860px) {
    .site-header-inner { min-height: 64px; flex-wrap: wrap; padding: 10px 0; }
    .site-menu-toggle { display: block; }
    .site-nav-wrap { display: none; flex: 1 0 100%; width: 100%; padding: 8px 0 5px; border-top: 1px solid var(--border); }
    .site-nav-wrap.is-open { display: block; }
    .site-navigation > .nav { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 4px; }
    .site-navigation > .nav > li { width: 100%; }
    .site-navigation > .nav > li > a { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 11px; }
    .site-navigation .dropdown-menu { position: static; float: none; width: 100%; margin: 4px 0 2px; box-shadow: none; }
    .site-navigation .dropdown-submenu > .dropdown-menu { margin: 4px 0 2px; }
    .site-search-wrap { min-width: 0; margin-top: 8px; }
    .site-search-wrap .navbar-form { display: flex; }
    .site-hero-inner { min-height: auto; grid-template-columns: 1fr; padding-top: 42px; padding-bottom: 42px; }
    .site-hero-visual { display: none; }
    .site-main { grid-template-columns: 1fr; }
    .site-sidebar { position: static; }
    .site-content { order: 1; }
    .site-sidebar { order: 2; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
    .site-sidebar > .form-block { margin-bottom: 0; }
}

@media (max-width: 620px) {
    .site-container,
    .site-header-inner { width: min(calc(100% - 24px), var(--shell)); }
    .site-brand-copy strong { max-width: 205px; font-size: 12px; }
    .site-navigation > .nav { grid-template-columns: 1fr; }
    .site-hero-inner { padding-top: 34px; padding-bottom: 36px; }
    .site-hero-copy h1 { font-size: clamp(30px, 10vw, 42px); }
    .site-hero-copy p { font-size: 13px; line-height: 1.68; }
    .site-hero-actions { align-items: stretch; }
    .site-hero-actions .btn { flex: 1 1 100%; }
    .site-main { width: min(calc(100% - 20px), var(--shell)); gap: 14px; padding-top: 18px; }
    .site-sidebar { grid-template-columns: 1fr; }
    body.theme-modern .block-header { padding-left: 13px; padding-right: 13px; }
    body.theme-modern .block-content,
    body.theme-modern .new-id-content,
    body.theme-modern .new-full-content,
    body.theme-modern .profile-content,
    body.theme-modern .static-content { padding: 13px; }
    body.theme-modern .form-horizontal .control-label { width: auto; float: none; padding-top: 0; margin-bottom: 6px; text-align: left; }
    body.theme-modern .form-horizontal .controls { margin-left: 0; }
    body.theme-modern .form-horizontal .controls input,
    body.theme-modern .form-horizontal .controls select,
    body.theme-modern .form-horizontal .controls textarea { width: 100% !important; }
    body.theme-modern .profile-content > .navbar .navbar-inner { overflow-x: auto; }
    body.theme-modern .profile-content > .navbar .brand { display: none; }
    body.theme-modern .profile-content > .navbar .nav { min-width: max-content; }
    body.theme-modern .profile-info .info-line { grid-template-columns: 1fr; gap: 3px; }
    body.theme-modern .block-footer .readmore { margin-left: 0; }
    .site-footer-inner { min-height: 100px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; }
    .site-footer-meta { text-align: left; }
}

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

/* === Post-review fixes for legacy WebMCR blocks === */
/* Attached/pinned news inherited an old pale warning skin from default theme. */
body.theme-modern .form-block.new-id.attached,
body.theme-modern .form-block.new-full.attached {
    background: linear-gradient(180deg, rgba(17,24,39,.94), rgba(11,16,24,.96));
    border: 1px solid rgba(126, 143, 255, .24);
    box-shadow: 0 0 0 1px rgba(126,143,255,.05) inset, 0 16px 36px rgba(2, 6, 23, .34);
}
body.theme-modern .form-block.new-id.attached .block-line,
body.theme-modern .form-block.new-full.attached .block-line {
    background: rgba(126, 143, 255, .14);
    border-top: 0;
}
body.theme-modern .form-block.new-id.attached .block-header,
body.theme-modern .form-block.new-full.attached .block-header,
body.theme-modern .form-block.new-id.attached .new-id-content,
body.theme-modern .form-block.new-full.attached .new-full-content,
body.theme-modern .form-block.new-id.attached .block-footer,
body.theme-modern .form-block.new-full.attached .block-footer {
    color: #cdd6e4;
}
body.theme-modern .form-block.new-id.attached .block-name a,
body.theme-modern .form-block.new-full.attached .block-name,
body.theme-modern .form-block.new-id.attached .block-footer a,
body.theme-modern .form-block.new-full.attached .block-footer a {
    color: #eef2ff;
}

/* Normalize news/article content typography that may inherit old inline/light styles. */
body.theme-modern .new-id-content,
body.theme-modern .new-full-content,
body.theme-modern .static-content,
body.theme-modern .comment-id-content,
body.theme-modern .comment-form-content,
body.theme-modern .comment-list-content {
    background: transparent;
}
body.theme-modern .new-id-content,
body.theme-modern .new-full-content {
    overflow-wrap: anywhere;
}
body.theme-modern .new-id-content > :first-child,
body.theme-modern .new-full-content > :first-child,
body.theme-modern .static-content > :first-child { margin-top: 0; }
body.theme-modern .new-id-content > :last-child,
body.theme-modern .new-full-content > :last-child,
body.theme-modern .static-content > :last-child { margin-bottom: 0; }
body.theme-modern .new-id-content p,
body.theme-modern .new-full-content p,
body.theme-modern .static-content p,
body.theme-modern .comment-id-content p { color: #c2cada; }
body.theme-modern .new-id-content a,
body.theme-modern .new-full-content a,
body.theme-modern .static-content a,
body.theme-modern .comment-id-content a { color: #aebaff; }
body.theme-modern .new-id-content img,
body.theme-modern .new-full-content img,
body.theme-modern .static-content img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 14px auto;
}

/* Fix white legacy comment containers. */
body.theme-modern .form-block.comment-list,
body.theme-modern .form-block.comment-id,
body.theme-modern .form-block.comment-form {
    background: var(--card);
    border: 1px solid var(--border);
    border-style: solid;
    box-shadow: var(--shadow-sm);
}

/* Cleaner admin/news dropdown toggle in cards. */
body.theme-modern .btn-group > .btn-mini,
body.theme-modern .btn-mini.dropdown-toggle {
    min-height: 28px;
    padding: 5px 9px;
    line-height: 1;
    border-radius: 9px;
}
body.theme-modern .btn-group > .dropdown-toggle .caret,
body.theme-modern .btn-mini.dropdown-toggle .caret {
    margin-top: 0;
    vertical-align: middle;
}

/* Profile block: prevent legacy fixed widths from deforming the mini profile. */
body.theme-modern .block-profile {
    text-align: left;
}
body.theme-modern .block-profile .avatar {
    display: block;
    width: 64px;
    min-width: 64px;
}
body.theme-modern .block-profile .avatar img {
    display: block;
    width: 64px;
    height: 64px;
    image-rendering: pixelated;
    object-fit: cover;
}
body.theme-modern .block-profile .info {
    width: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    display: block;
}
body.theme-modern .block-profile .info li {
    list-style: none;
}
body.theme-modern .block-profile .info li .btn,
body.theme-modern .block-profile .info li button.btn {
    width: 100%;
}

/* === Responsive hardening / legacy conflict audit === */
body.theme-modern,
body.theme-modern .site-app {
    width: 100%;
    max-width: 100%;
}
body.theme-modern .site-app {
    overflow-x: clip;
}
.site-header-inner,
.site-nav-wrap,
.site-navigation,
.site-search-wrap,
.site-hero-inner,
.site-hero-copy,
.site-main,
.site-content,
.site-sidebar,
body.theme-modern .form-block,
body.theme-modern .block-content {
    min-width: 0;
}
body.theme-modern .form-block,
body.theme-modern .static-page,
body.theme-modern .mcr-search,
body.theme-modern .file-manager,
body.theme-modern .adm-info-main,
body.theme-modern .adm-info-stats,
body.theme-modern .adm-info-modules {
    width: 100%;
    max-width: 100%;
}

/* Search is one stable responsive control instead of three unrelated Bootstrap-2 boxes. */
.site-search-wrap .modern-search-form {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    gap: 6px;
    background: transparent;
    border: 0;
    box-shadow: none;
}
.site-search-wrap .modern-search-type {
    display: flex;
    flex: 0 0 40px;
    width: 40px;
    margin: 0;
}
.site-search-wrap .modern-search-type > .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    border-radius: 10px;
}
.site-search-wrap .modern-search-field {
    display: flex;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    margin: 0;
    white-space: normal;
}
.site-search-wrap .modern-search-field > input[type="search"] {
    flex: 1 1 auto;
    width: 1% !important;
    min-width: 0;
    max-width: none;
    height: 40px;
    padding: 8px 11px;
    margin: 0;
    border-radius: 10px 0 0 10px;
}
.site-search-wrap .modern-search-field > .modern-search-submit {
    flex: 0 0 40px;
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 0;
    margin: 0 0 0 -1px;
    border-radius: 0 10px 10px 0;
}
.site-search-wrap .modern-search-field > .modern-search-submit i {
    margin: 0;
}

/* Generic content must never widen the layout. */
body.theme-modern .new-id-content iframe,
body.theme-modern .new-full-content iframe,
body.theme-modern .static-content iframe,
body.theme-modern .block-content iframe,
body.theme-modern .new-id-content video,
body.theme-modern .new-full-content video,
body.theme-modern .static-content video,
body.theme-modern .block-content video,
body.theme-modern .new-id-content canvas,
body.theme-modern .new-full-content canvas,
body.theme-modern .static-content canvas,
body.theme-modern .block-content canvas {
    max-width: 100%;
}
body.theme-modern pre,
body.theme-modern .qxbb-code {
    max-width: 100%;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
body.theme-modern table {
    max-width: 100%;
}
body.theme-modern .block-content > table,
body.theme-modern .profile-content > table,
body.theme-modern .static-content > table,
body.theme-modern .adm-info-main table,
body.theme-modern .adm-info-stats table,
body.theme-modern .adm-info-modules table {
    width: 100%;
}

/* Do not let Bootstrap's old floats escape modern cards. */
body.theme-modern .block-header::after,
body.theme-modern .block-footer::after,
body.theme-modern .block-content::after {
    content: "";
    display: table;
    clear: both;
}

/* Old thumbnail/admin collections should wrap instead of generating horizontal scroll. */
body.theme-modern .admin-menu-groups ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
body.theme-modern .admin-menu-groups ul li {
    float: none;
    max-width: 100%;
}

@media (max-width: 860px) {
    .site-header-inner {
        width: min(calc(100% - 24px), var(--shell));
        gap: 12px;
    }
    .site-nav-wrap.is-open {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        width: 100%;
    }
    .site-search-wrap {
        width: 100%;
        max-width: none;
        flex-basis: auto;
        margin-top: 0;
    }
    .site-search-wrap .modern-search-form {
        width: 100%;
    }
    .site-hero-visual {
        display: none !important;
    }
    .site-hero-inner {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .site-main {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .site-sidebar {
        width: 100%;
    }
}

@media (max-width: 620px) {
    .site-brand {
        min-width: 0;
        max-width: calc(100% - 52px);
    }
    .site-brand-copy {
        min-width: 0;
    }
    .site-brand-copy strong {
        max-width: 100%;
    }
    .site-search-wrap .modern-search-type,
    .site-search-wrap .modern-search-type > .btn,
    .site-search-wrap .modern-search-field > .modern-search-submit {
        flex-basis: 38px;
        width: 38px;
        min-width: 38px;
    }
    .site-search-wrap .modern-search-type > .btn,
    .site-search-wrap .modern-search-field > input[type="search"],
    .site-search-wrap .modern-search-field > .modern-search-submit {
        height: 38px;
    }
    body.theme-modern .site-sidebar > .form-block,
    body.theme-modern .site-content > .form-block {
        max-width: 100%;
    }
}

/* === High-specificity overrides for legacy.css rules === */
/* Authentication block: legacy theme forced fields and checkbox to 60%. */
body.theme-modern .form-block .block-content .block-auth .input-prepend {
    display: flex;
    width: 100%;
    margin: 0 0 9px;
    text-align: left;
}
body.theme-modern .form-block .block-content .block-auth .input-prepend input[type="text"],
body.theme-modern .form-block .block-content .block-auth .input-prepend input[type="password"],
body.theme-modern .form-block .block-content .block-auth .input-prepend input[type="email"] {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}
body.theme-modern .form-block .block-content .block-auth .checkbox {
    width: 100%;
    margin: 0;
    text-align: left;
}
body.theme-modern .form-block .block-content .block-auth .buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
    text-align: left;
}

/* News/static/comments: neutralize old margins, floats and white separators. */
body.theme-modern .form-block.new-id .new-id-content,
body.theme-modern .form-block.new-full .new-full-content,
body.theme-modern .form-block.static-page .static-content,
body.theme-modern .form-block.comment-id .comment-id-content {
    margin: 0;
    padding: 16px;
    font-size: 14px;
    line-height: 1.75;
}
body.theme-modern .form-block.new-id .block-footer,
body.theme-modern .form-block.new-full .block-footer,
body.theme-modern .form-block.static-page .block-footer,
body.theme-modern .form-block.comment-id .block-footer {
    margin: 0;
    padding: 10px 14px;
    color: var(--muted);
}
body.theme-modern .form-block.new-id .block-footer > div,
body.theme-modern .form-block.new-full .block-footer > div,
body.theme-modern .form-block.static-page .block-footer > div,
body.theme-modern .form-block.comment-id .block-footer > div,
body.theme-modern .form-block.new-id .block-footer .date,
body.theme-modern .form-block.new-id .block-footer .time,
body.theme-modern .form-block.new-id .block-footer .category,
body.theme-modern .form-block.new-id .block-footer .comments,
body.theme-modern .form-block.new-id .block-footer .views,
body.theme-modern .form-block.new-id .block-footer .readmore,
body.theme-modern .form-block.new-full .block-footer .date,
body.theme-modern .form-block.new-full .block-footer .time,
body.theme-modern .form-block.new-full .block-footer .category,
body.theme-modern .form-block.new-full .block-footer .views,
body.theme-modern .form-block.new-full .block-footer .readmore,
body.theme-modern .form-block.static-page .block-footer .date,
body.theme-modern .form-block.static-page .block-footer .time,
body.theme-modern .form-block.static-page .block-footer .readmore {
    float: none;
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
}
body.theme-modern .form-block.new-id .block-footer .readmore,
body.theme-modern .form-block.new-full .block-footer .readmore,
body.theme-modern .form-block.static-page .block-footer .readmore {
    margin-left: auto;
}
body.theme-modern .form-block.comment-id,
body.theme-modern .form-block.comment-form {
    margin: 0 0 14px;
}
body.theme-modern .form-block.comment-id .comment-id-content .edit-from,
body.theme-modern .form-block.comment-form .comment-form-content textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* WebMCR legacy CSS scaled every table on small screens; never do that in the modern theme. */
body.theme-modern table,
body.theme-modern .table {
    transform: none !important;
    -webkit-transform: none !important;
    transform-origin: initial !important;
    -webkit-transform-origin: initial !important;
}

/* Action toolbars were hard-locked to 30px while modern controls are taller. */
body.theme-modern .form-block.actions {
    height: auto;
    min-height: 48px;
    padding: 9px 10px;
}
body.theme-modern .form-block.actions .pagination {
    height: auto;
    min-height: 30px;
}

/* Profile/uploader module compatibility. */
body.theme-modern .skin-block {
    max-width: 100%;
    margin: 0 10px 10px 0;
    color: #c8d0dc;
    background: #0c121c;
    border-color: var(--border-strong);
    border-radius: 12px;
}
body.theme-modern .profile-info .info-line {
    margin: 0;
    padding: 9px 10px;
    color: #adb8c8;
    border-bottom-color: var(--border);
}
body.theme-modern .profile-info .info-line b { color: #d1d8e3; }
body.theme-modern .uploader-forms {
    width: min(100%, 720px);
    max-width: 100%;
}
body.theme-modern .uploader-forms .skin-uploader,
body.theme-modern .uploader-forms .cloak-uploader {
    width: calc(50% - 12px);
    max-width: 100%;
    margin: 0 5px 10px;
}
body.theme-modern .uploader-forms .skin-uploader .file-inputs,
body.theme-modern .uploader-forms .cloak-uploader .file-inputs {
    max-width: 100%;
    background-color: #0c121c;
    border-color: var(--border-strong);
    border-radius: 12px;
}
body.theme-modern .uploader-forms .skin-uploader .file-inputs:hover,
body.theme-modern .uploader-forms .cloak-uploader .file-inputs:hover {
    background-color: #101925;
}

/* Search result legacy colors. */
body.theme-modern .search-block > .search-block-id {
    border-top-color: var(--border);
}
body.theme-modern .search-block > .search-block-id .search-selected {
    color: #c2caff;
}
body.theme-modern .search-block > .search-block-id > .subinfo {
    color: #8793a5;
}

@media (max-width: 620px) {
    body.theme-modern .form-block.new-id .new-id-content,
    body.theme-modern .form-block.new-full .new-full-content,
    body.theme-modern .form-block.static-page .static-content,
    body.theme-modern .form-block.comment-id .comment-id-content {
        padding: 13px;
    }
    body.theme-modern .uploader-forms,
    body.theme-modern .uploader-forms .skin-uploader,
    body.theme-modern .uploader-forms .cloak-uploader {
        display: block;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    body.theme-modern .profile-info .info-line span {
        float: none;
        display: block;
        margin-top: 3px;
    }
}

/* Bootstrap 2 sets form controls to content-box. Force predictable modern sizing. */
body.theme-modern input[type="text"],
body.theme-modern input[type="email"],
body.theme-modern input[type="password"],
body.theme-modern input[type="number"],
body.theme-modern input[type="url"],
body.theme-modern input[type="search"],
body.theme-modern input[type="file"],
body.theme-modern select,
body.theme-modern textarea,
body.theme-modern .btn,
body.theme-modern .add-on {
    box-sizing: border-box;
}


/* === 1.0.4: admin/settings form system === */
/* The original WebMCR admin forms use Bootstrap 2 span classes with fixed pixel widths.
   Replace those dimensions with a predictable modern form grid. */
body.theme-modern .adm-settings {
    padding: 0;
}
body.theme-modern .adm-settings > .nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    padding: 8px 10px 0;
    list-style: none;
    background: rgba(7, 11, 18, .42);
    border: 0;
    border-bottom: 1px solid var(--border);
}
body.theme-modern .adm-settings > .nav-tabs::before,
body.theme-modern .adm-settings > .nav-tabs::after { display: none; }
body.theme-modern .adm-settings > .nav-tabs > li {
    float: none;
    margin: 0;
}
body.theme-modern .adm-settings > .nav-tabs > li > a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    margin: 0;
    padding: 8px 12px;
    color: #95a2b7;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 9px 9px 0 0;
    text-shadow: none;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}
body.theme-modern .adm-settings > .nav-tabs > li > a:hover {
    color: #e8edf6;
    background: rgba(255,255,255,.035);
    border-color: rgba(148,163,184,.12);
}
body.theme-modern .adm-settings > .nav-tabs > .active > a,
body.theme-modern .adm-settings > .nav-tabs > .active > a:hover,
body.theme-modern .adm-settings > .nav-tabs > .active > a:focus {
    color: #f4f6fb;
    background: rgba(114,132,255,.11);
    border-color: rgba(114,132,255,.20);
    border-bottom-color: transparent;
    box-shadow: inset 0 -2px 0 rgba(126,143,255,.85);
}
body.theme-modern .adm-settings .tab-content {
    overflow: visible;
    padding: 18px 18px 20px;
}
body.theme-modern .adm-settings .tab-pane > .form-horizontal {
    width: min(100%, 820px);
    margin: 0;
}
body.theme-modern .adm-settings .form-horizontal .control-group {
    display: grid;
    grid-template-columns: minmax(155px, 190px) minmax(0, 1fr);
    align-items: center;
    gap: 10px 18px;
    margin: 0;
    padding: 9px 0;
}
body.theme-modern .adm-settings .form-horizontal .control-label {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    color: #aeb8c8;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.35;
    text-align: right;
}
body.theme-modern .adm-settings .form-horizontal .controls {
    min-width: 0;
    margin: 0;
}
body.theme-modern .adm-settings .form-horizontal .controls > input[type="text"],
body.theme-modern .adm-settings .form-horizontal .controls > input[type="email"],
body.theme-modern .adm-settings .form-horizontal .controls > input[type="password"],
body.theme-modern .adm-settings .form-horizontal .controls > input[type="number"],
body.theme-modern .adm-settings .form-horizontal .controls > input[type="url"],
body.theme-modern .adm-settings .form-horizontal .controls > input[type="search"],
body.theme-modern .adm-settings .form-horizontal .controls > select,
body.theme-modern .adm-settings .form-horizontal .controls > textarea {
    display: block;
    float: none;
    width: min(100%, 620px) !important;
    max-width: 100%;
    margin: 0;
}
body.theme-modern .adm-settings .form-horizontal .controls > select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 38px;
    background-color: var(--input);
    background-image:
        linear-gradient(45deg, transparent 50%, #718096 50%),
        linear-gradient(135deg, #718096 50%, transparent 50%);
    background-position:
        calc(100% - 16px) calc(50% - 2px),
        calc(100% - 11px) calc(50% - 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
body.theme-modern .adm-settings .form-horizontal legend {
    width: 100%;
    margin: 22px 0 7px;
    padding: 0 0 9px;
    color: #e7ebf3;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.3;
    letter-spacing: .02em;
    border: 0;
    border-bottom: 1px solid var(--border);
}
body.theme-modern .adm-settings .form-horizontal .help-block,
body.theme-modern .adm-settings .form-horizontal .help-inline {
    color: #77859a;
    font-size: 11px;
}
body.theme-modern .adm-settings .form-horizontal .control-group:last-child {
    margin-top: 7px;
    padding-top: 15px;
    border-top: 1px solid rgba(148,163,184,.09);
}
body.theme-modern .adm-settings .form-horizontal .control-group:last-child .btn {
    min-width: 120px;
}

/* Generic fixed-width Bootstrap 2 span fields inside modern forms should not clip values. */
body.theme-modern .form-horizontal .controls > input[class*="span"],
body.theme-modern .form-horizontal .controls > select[class*="span"],
body.theme-modern .form-horizontal .controls > textarea[class*="span"] {
    float: none;
    max-width: 100%;
}

@media (max-width: 760px) {
    body.theme-modern .adm-settings > .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    body.theme-modern .adm-settings > .nav-tabs > li { flex: 0 0 auto; }
    body.theme-modern .adm-settings .tab-content { padding: 14px; }
    body.theme-modern .adm-settings .form-horizontal .control-group {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 8px 0;
    }
    body.theme-modern .adm-settings .form-horizontal .control-label {
        text-align: left;
    }
    body.theme-modern .adm-settings .form-horizontal .controls > input,
    body.theme-modern .adm-settings .form-horizontal .controls > select,
    body.theme-modern .adm-settings .form-horizontal .controls > textarea {
        width: 100% !important;
    }
}


/* === 1.0.5: admin/settings cleanup === */
/* The 1.0.4 two-column settings grid still feels too legacy and leaves awkward empty space.
   Switch settings pages to a cleaner stacked layout: label above control, full-width fields,
   predictable save area. */
body.theme-modern .adm-settings .tab-content {
    padding: 20px 22px 24px;
}
body.theme-modern .adm-settings .tab-pane > .form-horizontal {
    width: min(100%, 760px);
    margin: 0;
}
body.theme-modern .adm-settings .form-horizontal .control-group {
    display: block;
    margin: 0;
    padding: 0 0 16px;
}
body.theme-modern .adm-settings .form-horizontal .control-label {
    display: block;
    float: none;
    width: auto;
    margin: 0 0 8px;
    padding: 0;
    color: #c7d0dd;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    text-align: left;
}
body.theme-modern .adm-settings .form-horizontal .controls {
    min-width: 0;
    margin: 0;
}
body.theme-modern .adm-settings .form-horizontal .controls > input[type="text"],
body.theme-modern .adm-settings .form-horizontal .controls > input[type="email"],
body.theme-modern .adm-settings .form-horizontal .controls > input[type="password"],
body.theme-modern .adm-settings .form-horizontal .controls > input[type="number"],
body.theme-modern .adm-settings .form-horizontal .controls > input[type="url"],
body.theme-modern .adm-settings .form-horizontal .controls > input[type="search"],
body.theme-modern .adm-settings .form-horizontal .controls > select,
body.theme-modern .adm-settings .form-horizontal .controls > textarea,
body.theme-modern .adm-settings .form-horizontal .controls > input[class*="span"],
body.theme-modern .adm-settings .form-horizontal .controls > select[class*="span"],
body.theme-modern .adm-settings .form-horizontal .controls > textarea[class*="span"] {
    display: block;
    float: none;
    width: 100% !important;
    max-width: none;
    margin: 0;
}
body.theme-modern .adm-settings .form-horizontal textarea {
    min-height: 120px;
    resize: vertical;
}
body.theme-modern .adm-settings .form-horizontal legend {
    margin: 24px 0 12px;
    padding: 0 0 10px;
}
body.theme-modern .adm-settings .form-horizontal .control-group:last-child {
    margin-top: 4px;
    padding-top: 18px;
    border-top: 1px solid rgba(148,163,184,.10);
}
body.theme-modern .adm-settings .form-horizontal .control-group:last-child .controls {
    display: flex;
    align-items: center;
    gap: 10px;
}
body.theme-modern .adm-settings .form-horizontal .control-group:last-child .btn {
    min-width: 132px;
}
@media (max-width: 760px) {
    body.theme-modern .adm-settings .tab-content {
        padding: 14px;
    }
}