/*
 * SP Tech 0.9.3
 * Matte titanium / gunmetal child style for phpBB 3.3.17
 * Author: soerpaule
 */

@import url("../../prosilver/theme/stylesheet.css");

:root {
    --sp-page: #465563;
    --sp-page-deep: #33424f;
    --sp-wrap: #263541;
    --sp-nav-top: #4d5f6d;
    --sp-nav-bottom: #354653;
    --sp-panel-top: #415362;
    --sp-panel-bottom: #314250;
    --sp-row-top: #394b59;
    --sp-row-bottom: #2e3f4c;
    --sp-row-hover-top: #465c6c;
    --sp-row-hover-bottom: #384d5c;
    --sp-line: #71889a;
    --sp-line-soft: #526b7d;
    --sp-blue: #35b5fa;
    --sp-blue-dark: #0c689f;
    --sp-blue-light: #9cddff;
    --sp-text: #f4f7f9;
    --sp-muted: #d6dfe5;
    --sp-subtle: #afbec9;
    --sp-admin: #ff8c8c;
    --sp-shadow: 0 18px 44px rgba(0, 0, 0, .28);

    /* Public SP theme variables for compatible extensions. */
    --sp-background: var(--sp-page);
    --sp-surface: var(--sp-wrap);
    --sp-panel: var(--sp-panel-bottom);
    --sp-panel-light: var(--sp-panel-top);
    --sp-border: var(--sp-line-soft);
    --sp-accent: var(--sp-blue);
    --sp-link: var(--sp-blue-light);
    --sp-link-hover: #d7f2ff;
    --sp-text-main: var(--sp-text);
    --sp-text-muted: var(--sp-muted);
    --sp-role-admin: var(--sp-admin);
}

html,
body {
    background:
        radial-gradient(circle at 50% -12%, rgba(187, 210, 225, .30) 0, rgba(109, 137, 156, .22) 25%, transparent 55%),
        linear-gradient(180deg, var(--sp-page), var(--sp-page-deep));
    color: var(--sp-text);
}

body {
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.45;
}

.wrap {
    width: calc(100% - 40px);
    max-width: 1200px;
    margin: 16px auto;
    padding: 0;
    overflow: hidden;
    color: var(--sp-text);
    background:
        linear-gradient(180deg, rgba(46, 63, 76, .99), rgba(35, 49, 60, .99));
    border: 1px solid #8094a3;
    border-radius: 24px 24px 10px 10px;
    box-shadow: var(--sp-shadow), inset 0 1px 0 rgba(255, 255, 255, .10);
}

/* Fixed SP Tech header banner.
 * The image is stored unchanged at its original 1200 x 300 pixels. */
.headerbar {
    position: relative;
    width: 1200px;
    max-width: 100%;
    height: 300px;
    min-height: 300px;
    margin: 0 auto 10px;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 30px;
    background-color: #182733;
    background-image: url("./images/headerbanner.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 1200px 300px;
    box-shadow:
        inset 0 0 0 1px rgba(156, 221, 255, .34),
        0 8px 20px rgba(0, 0, 0, .28);
}

.headerbar::after {
    display: none;
}

.headerbar .inner {
    min-height: 0;
    padding: 0;
}

/* The complete identity is already contained in the fixed banner. */
.headerbar #site-description,
.headerbar .site-description,
.headerbar .search-header,
.headerbar .site_logo {
    display: none !important;
}

/* Ignore output from header-banner extensions in this fixed-banner release. */
.headerbar .sphb-wrap,
.headerbar .sphb-image,
.headerbar .header-banner,
.headerbar .banner-header {
    display: none !important;
}

/* Main navigation */
.navbar {
    margin: 0;
    padding: 10px 16px;
    border: 0;
    border-radius: 0;
    color: var(--sp-text);
    background:
        linear-gradient(180deg, rgba(255,255,255,.07), transparent 35%),
        linear-gradient(180deg, var(--sp-nav-top), var(--sp-nav-bottom));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        inset 0 -1px 0 rgba(53,181,250,.34),
        0 4px 13px rgba(0,0,0,.22);
}

.navbar a,
.navbar .icon,
.navbar .dropdown-trigger,
ul.linklist > li,
ul.linklist > li a,
.breadcrumbs .crumb a {
    color: var(--sp-text);
}

.navbar a:hover,
.navbar a:focus,
.breadcrumbs .crumb a:hover {
    color: var(--sp-blue-light);
    text-shadow: 0 0 10px rgba(53,181,250,.30);
}

.page-body {
    padding-bottom: 8px;
}

.action-bar,
.time,
.mark-read {
    color: var(--sp-muted);
}

.page-body > h2,
.page-body > h2 a,
.action-bar + h2,
h2,
h3,
.panel h2 {
    color: #ffffff;
}

/* Forum/category blocks */
.forabg,
.forumbg {
    margin: 12px 14px;
    overflow: hidden;
    border: 1px solid var(--sp-line-soft);
    border-radius: 11px;
    background: linear-gradient(180deg, var(--sp-panel-top), var(--sp-panel-bottom));
    box-shadow: 0 10px 25px rgba(0,0,0,.23), inset 0 1px 0 rgba(255,255,255,.05);
}

.forabg .header,
.forumbg .header {
    padding: 12px 14px;
    color: #fff;
    font-size: 1.02rem;
    background:
        linear-gradient(90deg, rgba(53,181,250,.16), transparent 24%, transparent 80%, rgba(53,181,250,.08)),
        linear-gradient(180deg, #5c6e7b, #3e5261);
    border-top: 3px solid var(--sp-blue);
    border-bottom: 1px solid #688092;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.13);
}

.forabg .header a,
.forumbg .header a,
.forabg .header dt,
.forabg .header dd,
.forumbg .header dt,
.forumbg .header dd {
    color: #fff;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0,0,0,.65);
}

ul.topiclist li.row {
    color: var(--sp-text);
    background: linear-gradient(180deg, var(--sp-row-top), var(--sp-row-bottom));
    border-top: 1px solid rgba(255,255,255,.055);
    border-bottom: 1px solid rgba(0,0,0,.30);
    transition: background .16s ease, box-shadow .16s ease;
}

ul.topiclist li.row:hover {
    background: linear-gradient(180deg, var(--sp-row-hover-top), var(--sp-row-hover-bottom));
    box-shadow: inset 4px 0 0 var(--sp-blue);
}

ul.topiclist dt,
ul.topiclist dd,
ul.topiclist dd.posts,
ul.topiclist dd.views,
ul.topiclist dd.lastpost {
    color: var(--sp-muted);
}

li.row a.forumtitle,
li.row a.topictitle {
    color: #fff;
    font-size: 1.08rem;
    font-weight: 700;
}

li.row a.forumtitle:hover,
li.row a.topictitle:hover {
    color: var(--sp-blue-light);
}

li.row .list-inner,
li.row .list-inner p {
    color: var(--sp-muted);
}

/* Panels, posts and statistics */
.panel,
.bg1,
.bg2,
.bg3,
.post,
.post.bg1,
.post.bg2 {
    color: var(--sp-text);
    background: linear-gradient(180deg, rgba(62,80,94,.99), rgba(48,64,76,.99));
    border-color: var(--sp-line-soft);
}

.panel,
.post {
    margin: 11px 14px;
    border: 1px solid var(--sp-line-soft);
    border-radius: 10px;
    box-shadow: 0 9px 23px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05);
}

.post {
    box-shadow: 0 9px 23px rgba(0,0,0,.22), inset 3px 0 0 rgba(53,181,250,.30);
}

.postprofile {
    color: var(--sp-muted);
    background: rgba(12,22,29,.15);
    border-color: #60798b;
}

.postbody,
.content,
.content p,
.signature,
.stat-block,
.stat-block p,
.stat-block h3 {
    color: var(--sp-text);
}

.postbody .content {
    font-size: 1.05rem;
    line-height: 1.58;
}

.stat-block h3 {
    color: var(--sp-blue-light);
    border-bottom-color: #7d919f;
}

/* User names and role colours */
.username,
a.username,
.username-coloured,
a.username-coloured {
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0,0,0,.80);
}

.username-coloured[style*="AA0000"],
a.username-coloured[style*="AA0000"],
.username-coloured[style*="aa0000"],
a.username-coloured[style*="aa0000"] {
    color: var(--sp-admin) !important;
}

/* General links */
a,
a:link,
a:visited,
.postlink {
    color: var(--sp-blue-light);
}

a:hover,
a:focus,
.postlink:hover {
    color: #d7f2ff;
    text-decoration: none;
}

/* Quotes and code */
blockquote {
    color: #edf4f8;
    background: #344754;
    border: 1px solid #607b8e;
    border-left: 4px solid var(--sp-blue);
    border-radius: 7px;
}

blockquote blockquote {
    background: #2a3c49;
}

.codebox {
    color: #eaf2f7;
    background: #192832;
    border: 1px solid #607b8e;
    border-left: 4px solid #75cfff;
    border-radius: 7px;
}

.codebox p,
.codebox code {
    color: #eaf2f7;
}

/* Buttons */
.button,
.button1,
.button2,
input.button1,
input.button2,
a.button1,
a.button2 {
    color: #fff;
    border: 1px solid #7a95a8;
    border-radius: 7px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.15), transparent 43%),
        linear-gradient(180deg, #4b687b, #294555);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 3px 7px rgba(0,0,0,.24);
    transition: all .16s ease;
}

.button:hover,
.button1:hover,
.button2:hover,
.button:focus,
.button1:focus,
.button2:focus {
    color: #fff;
    border-color: #72d4ff;
    background: linear-gradient(180deg, #3ab9f5, #0b689f);
    box-shadow: 0 0 0 2px rgba(53,181,250,.16), 0 0 15px rgba(53,181,250,.28);
}

/* Forms */
input.inputbox,
textarea.inputbox,
select,
.inputbox {
    color: #f8fbfd;
    background: #263946;
    border: 1px solid #7690a2;
    border-radius: 6px;
    box-shadow: inset 0 1px 4px rgba(0,0,0,.25);
}

input.inputbox::placeholder,
textarea.inputbox::placeholder {
    color: #b8c6cf;
}

input.inputbox:focus,
textarea.inputbox:focus,
select:focus,
.inputbox:focus {
    border-color: var(--sp-blue);
    box-shadow: 0 0 0 2px rgba(53,181,250,.17), 0 0 13px rgba(53,181,250,.22);
}

label,
dd label,
fieldset.fields1 dt,
fieldset.fields2 dt {
    color: var(--sp-muted);
}

/* Tabs, pagination and dropdowns */
.tabs .tab > a,
.minitabs .tab > a,
.pagination li a,
.pagination li span {
    color: #edf5f9;
    background: #334a5a;
    border-color: #60798b;
}

.tabs .activetab > a,
.tabs .activetab > a:hover,
.minitabs .activetab > a,
.minitabs .activetab > a:hover,
.pagination li.active span,
.pagination li a:hover {
    color: #fff;
    background: linear-gradient(180deg, #2eadeb, #0b689f);
    border-color: #72d4ff;
}

.dropdown .dropdown-contents {
    color: var(--sp-text);
    background: #314552;
    border-color: #71899a;
    box-shadow: 0 10px 25px rgba(0,0,0,.34);
}

.dropdown-contents a {
    color: #eef5f9;
}

.dropdown-contents li:hover,
.dropdown-contents a:hover {
    color: #fff;
    background: #466175;
}

/* Footer */
.page-footer {
    margin-top: 18px;
    padding: 18px 16px 14px;
    color: #c4d0d8;
    background: linear-gradient(180deg, #344957, #263743);
    border-top: 2px solid rgba(53,181,250,.66);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.copyright,
.copyright a {
    color: #c4d0d8;
}

.copyright::before {
    content: "SP Extensions  •  ";
    color: #edf4f8;
    font-weight: 700;
}

/* Messages */
.error,
.errorbox {
    color: #fff0f0;
    background: #744048;
    border-color: #b96772;
}

.successbox {
    color: #edfff1;
    background: #356046;
    border-color: #69a77e;
}

@media (max-width: 900px) {
    .wrap {
        width: 100%;
        margin: 0;
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }

    .headerbar,
    .headerbar .sphb-wrap,
    .headerbar .sphb-image,
    .headerbar .header-banner,
    .headerbar .banner-header {
        border-radius: 0;
    }
}

@media (max-width: 700px) {
    body {
        font-size: 15px;
    }

    .navbar {
        padding: 8px 9px;
    }

    .forabg,
    .forumbg,
    .panel,
    .post {
        margin-left: 6px;
        margin-right: 6px;
    }

}

/* ============================================================
 * SP Tech 0.9.3 – contrast and readability pass
 * Ensures inherited prosilver text colours remain readable on
 * the dark titanium surfaces throughout profiles, UCP and MCP.
 * ============================================================ */

:root {
    --sp-label: #f4f7f9;
    --sp-value: #c9d5dd;
    --sp-disabled: #9dabb6;
    --sp-admin-bright: #ff6666;
}

/* Never allow prosilver's dark default text on dark panels. */
body,
.wrap,
.page-body,
.panel,
.panel p,
.panel li,
.panel dl,
.panel dt,
.panel dd,
.bg1,
.bg2,
.bg3,
.post,
.postbody,
.postprofile,
.content,
.details,
.details dt,
.details dd,
fieldset,
fieldset dl,
fieldset dt,
fieldset dd,
fieldset.fields1,
fieldset.fields2,
.memberlist,
.memberlist dt,
.memberlist dd,
.stat-block,
.stat-block p,
.stat-block dl,
.stat-block dt,
.stat-block dd,
.cp-main,
.cp-main .panel,
.cp-mini,
.cp-mini .panel,
#viewprofile,
#viewprofile .panel {
    color: var(--sp-text) !important;
}

/* Labels are bright white; values are softer but still accessible. */
.panel dt,
.details dt,
fieldset.fields1 dt,
fieldset.fields2 dt,
.memberlist dt,
#viewprofile dt,
.profile-details dt {
    color: var(--sp-label) !important;
}

.panel dd,
.details dd,
fieldset.fields1 dd,
fieldset.fields2 dd,
.memberlist dd,
#viewprofile dd,
.profile-details dd,
.profile-details dd span,
.profile-details .value {
    color: var(--sp-value) !important;
}

/* Headings and section captions. */
.panel h2,
.panel h3,
.panel h4,
.panel .panel-header,
.panel .panel-title,
#viewprofile h2,
#viewprofile h3,
.cp-main h2,
.cp-main h3,
fieldset legend {
    color: #ffffff !important;
}

/* Meta and secondary text must not fade into the background. */
.postdetails,
.postprofile dd,
.postprofile dt,
.postprofile strong,
.postprofile span,
.topic-poster,
.topic-time,
.lastpost,
.lastpost span,
.lastpost time,
.time,
.author,
.author a,
.pagination,
.pagination span,
.panel .small,
.panel small,
.dimmed,
.disabled,
.explain,
.hint,
.notice,
.content .notice,
.profile-details .joined,
.profile-details .active,
.profile-details .posts,
.profile-details .warnings {
    color: var(--sp-muted) !important;
}

/* All ordinary links use the bright SP blue. */
.panel a:not(.button):not(.button1):not(.button2),
.details a,
.memberlist a,
#viewprofile a,
.cp-main a,
.postbody a,
.postprofile a,
.stat-block a,
.action-bar a,
.jumpbox a,
.breadcrumbs a {
    color: var(--sp-blue-light) !important;
}

.panel a:hover,
.details a:hover,
.memberlist a:hover,
#viewprofile a:hover,
.cp-main a:hover,
.postbody a:hover,
.postprofile a:hover,
.stat-block a:hover {
    color: #ffffff !important;
}

/* User and group colours: improve red without changing phpBB roles. */
.username-coloured[style*="AA0000"],
a.username-coloured[style*="AA0000"],
.username-coloured[style*="aa0000"],
a.username-coloured[style*="aa0000"],
[style*="color: #AA0000"],
[style*="color:#AA0000"],
[style*="color: #aa0000"],
[style*="color:#aa0000"] {
    color: var(--sp-admin-bright) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .85), 0 0 7px rgba(255, 102, 102, .16) !important;
}

/* phpBB sometimes prints group/rank text without a dedicated class. */
.rank-img + br + span,
.profile-rank,
.member-rank,
.group-name,
.group-description {
    color: var(--sp-value) !important;
}

/* Profile/UCP/MCP lists and tabs. */
.cplist,
.cplist li,
.cplist li a,
.cp-main .panel-container,
.cp-main .panel-container p,
.cp-main .panel-container li,
.cp-main .panel-container dt,
.cp-main .panel-container dd {
    color: var(--sp-text) !important;
}

#cp-menu .panel,
#cp-main .panel,
#cp-main .pm,
#cp-main .post,
#cp-main .panel-container {
    background: linear-gradient(180deg, #3f5261, #314452) !important;
    border-color: var(--sp-line-soft) !important;
}

#cp-menu .activetab a,
#cp-menu .activetab a:hover,
#cp-menu a:hover {
    color: #ffffff !important;
}

/* Tables used by member lists, MCP and profile areas. */
table.table1,
table.table1 tbody,
table.table1 tr,
table.table1 td,
table.table1 th {
    color: var(--sp-text) !important;
}

table.table1 tbody tr {
    background: rgba(52, 70, 83, .72) !important;
}

table.table1 tbody tr:hover {
    background: rgba(68, 91, 108, .88) !important;
}

table.table1 thead th {
    color: #ffffff !important;
    background: #364b5a !important;
}

/* Form controls and their option text. */
select,
select option,
input,
textarea,
.inputbox {
    color: #ffffff !important;
}

select option {
    background: #263946 !important;
}

/* Keep button text readable regardless of inherited link colours. */
.button,
.button1,
.button2,
a.button,
a.button1,
a.button2,
input.button1,
input.button2 {
    color: #ffffff !important;
}

/* Stronger separation between page and content, still matte. */
.page-body {
    background: linear-gradient(180deg, rgba(34, 48, 59, .58), rgba(28, 41, 51, .72));
}

.panel,
.bg1,
.bg2,
.bg3,
.post,
.post.bg1,
.post.bg2 {
    background: linear-gradient(180deg, #435767, #354957) !important;
}

/* Mobile: preserve contrast and avoid tiny inherited text. */
@media (max-width: 700px) {
    .panel,
    .panel p,
    .panel dt,
    .panel dd,
    .details dt,
    .details dd,
    #viewprofile,
    #viewprofile p,
    #viewprofile dt,
    #viewprofile dd {
        font-size: 1rem;
        line-height: 1.48;
    }
}


/* ============================================================
 * SP Tech 0.9.0 – complete UCP/MCP contrast pass
 * Dark, matte surfaces with clearly separated navigation states.
 * ============================================================ */

:root {
    --sp-090-page: #25333f;
    --sp-090-panel: #3b4d5c;
    --sp-090-panel-deep: #30424f;
    --sp-090-menu: #2d3e4b;
    --sp-090-menu-hover: #425a6b;
    --sp-090-active: #177fb8;
    --sp-090-border: #668197;
    --sp-090-text: #ffffff;
    --sp-090-muted: #d7e0e7;
    --sp-090-link: #9edcff;
    --sp-090-link-hover: #ffffff;
}

/* UCP/MCP page shell */
#cp-main,
#cp-main .panel,
#cp-main .panel-container,
#cp-main .pm,
#cp-main .post,
.cp-main,
.cp-main .panel,
.cp-main .panel-container {
    color: var(--sp-090-text) !important;
    background: linear-gradient(180deg, var(--sp-090-panel), var(--sp-090-panel-deep)) !important;
    border-color: var(--sp-090-border) !important;
}

#cp-main h2,
#cp-main h3,
#cp-main h4,
.cp-main h2,
.cp-main h3,
.cp-main h4,
#cp-main legend,
.cp-main legend {
    color: #ffffff !important;
}

#cp-main p,
#cp-main li,
#cp-main dt,
#cp-main dd,
#cp-main label,
#cp-main span,
.cp-main p,
.cp-main li,
.cp-main dt,
.cp-main dd,
.cp-main label,
.cp-main span {
    color: var(--sp-090-text) !important;
}

#cp-main .explain,
#cp-main .hint,
#cp-main .notice,
#cp-main small,
#cp-main .small,
.cp-main .explain,
.cp-main .hint,
.cp-main .notice,
.cp-main small,
.cp-main .small {
    color: var(--sp-090-muted) !important;
}

/* Left UCP/MCP navigation – remove prosilver's light backgrounds. */
#cp-menu,
#cp-menu .panel,
#cp-menu .cp-mini,
#cp-menu .panel-container,
#cp-menu .inner,
.cp-menu,
.cp-menu .panel,
.cp-menu .cp-mini {
    color: var(--sp-090-text) !important;
    background: var(--sp-090-menu) !important;
    border-color: var(--sp-090-border) !important;
}

#cp-menu ul,
#cp-menu ul.menu,
#cp-menu ul.menu li,
#cp-menu .menu,
#cp-menu .menu li,
.cp-menu ul,
.cp-menu ul.menu,
.cp-menu ul.menu li {
    margin: 0 !important;
    color: var(--sp-090-text) !important;
    background: transparent !important;
    border-color: rgba(158, 220, 255, .24) !important;
}

#cp-menu ul.menu li a,
#cp-menu .menu li a,
#cp-menu a,
.cp-menu ul.menu li a,
.cp-menu a {
    display: block;
    color: var(--sp-090-link) !important;
    background: var(--sp-090-menu) !important;
    border-color: rgba(158, 220, 255, .22) !important;
    text-shadow: none !important;
}

#cp-menu ul.menu li a:hover,
#cp-menu .menu li a:hover,
#cp-menu a:hover,
.cp-menu ul.menu li a:hover,
.cp-menu a:hover {
    color: #ffffff !important;
    background: var(--sp-090-menu-hover) !important;
}

#cp-menu ul.menu li.activetab a,
#cp-menu .menu li.activetab a,
#cp-menu .activetab a,
#cp-menu .activetab a:hover,
.cp-menu ul.menu li.activetab a,
.cp-menu .activetab a {
    color: #ffffff !important;
    background: linear-gradient(180deg, #2298d3, var(--sp-090-active)) !important;
    border-color: #79d4ff !important;
    box-shadow: inset 4px 0 0 #d8f3ff !important;
}

/* Horizontal UCP/MCP tabs */
.tabs,
.tabs ul,
.tabs .tab,
.minitabs,
.minitabs ul,
.minitabs .tab {
    background: transparent !important;
}

.tabs .tab > a,
.minitabs .tab > a {
    color: var(--sp-090-link) !important;
    background: linear-gradient(180deg, #405667, #304450) !important;
    border: 1px solid var(--sp-090-border) !important;
    text-shadow: none !important;
}

.tabs .tab > a:hover,
.minitabs .tab > a:hover {
    color: #ffffff !important;
    background: #4a6375 !important;
}

.tabs .activetab > a,
.tabs .activetab > a:hover,
.minitabs .activetab > a,
.minitabs .activetab > a:hover {
    color: #ffffff !important;
    background: linear-gradient(180deg, #31ace6, #1476ad) !important;
    border-color: #8addff !important;
}

/* UCP lists, attachment lists and PM folders */
#cp-main ul.topiclist,
#cp-main ul.topiclist li,
#cp-main ul.topiclist li.row,
#cp-main .cplist,
#cp-main .cplist li,
#cp-main .pm,
#cp-main .pm_marked_colour,
#cp-main .pm_replied_colour,
.cp-main ul.topiclist,
.cp-main ul.topiclist li,
.cp-main .cplist,
.cp-main .cplist li {
    color: var(--sp-090-text) !important;
    background: linear-gradient(180deg, #3b5060, #304451) !important;
    border-color: #607b8f !important;
}

#cp-main ul.topiclist li.row:hover,
#cp-main .cplist li:hover,
.cp-main ul.topiclist li.row:hover,
.cp-main .cplist li:hover {
    background: linear-gradient(180deg, #4a6273, #3a5262) !important;
}

/* Fields and selectors */
#cp-main input,
#cp-main textarea,
#cp-main select,
#cp-main .inputbox,
.cp-main input,
.cp-main textarea,
.cp-main select,
.cp-main .inputbox {
    color: #ffffff !important;
    background: #213541 !important;
    border-color: #7894a8 !important;
}

#cp-main input::placeholder,
#cp-main textarea::placeholder,
.cp-main input::placeholder,
.cp-main textarea::placeholder {
    color: #bac8d2 !important;
}

/* Tables in UCP/MCP */
#cp-main table,
#cp-main table td,
#cp-main table th,
.cp-main table,
.cp-main table td,
.cp-main table th {
    color: var(--sp-090-text) !important;
    border-color: #607b8f !important;
}

#cp-main table th,
.cp-main table th {
    background: #2f4656 !important;
}

#cp-main table td,
.cp-main table td {
    background: #3a4e5d !important;
}

/* Generic text safety net for dark surfaces. */
.panel .inner,
.panel .inner p,
.panel .inner li,
.panel .inner dt,
.panel .inner dd,
.panel .inner label,
.panel .inner strong,
.panel .inner em,
.panel .inner span:not(.username-coloured),
.bg1,
.bg2,
.bg3 {
    color: var(--sp-090-text) !important;
}

.panel a:not(.button):not(.button1):not(.button2),
#cp-main a:not(.button):not(.button1):not(.button2),
#cp-menu a:not(.button):not(.button1):not(.button2),
.cp-main a:not(.button):not(.button1):not(.button2) {
    color: var(--sp-090-link) !important;
}

.panel a:hover,
#cp-main a:hover,
#cp-menu a:hover,
.cp-main a:hover {
    color: var(--sp-090-link-hover) !important;
}

/* Keep phpBB group colours visible while lifting very dark red. */
.username-coloured[style*="AA0000"],
a.username-coloured[style*="AA0000"],
.username-coloured[style*="aa0000"],
a.username-coloured[style*="aa0000"],
[style*="color: #AA0000"],
[style*="color:#AA0000"],
[style*="color: #aa0000"],
[style*="color:#aa0000"] {
    color: #ff7070 !important;
}

@media (max-width: 700px) {
    #cp-menu ul.menu li a,
    #cp-menu .menu li a,
    .tabs .tab > a,
    .minitabs .tab > a {
        font-size: 1rem !important;
        line-height: 1.35 !important;
    }
}


/* SP Tech 0.9.3 — compact typography without changing phpBB column geometry. */
body {
    font-size: 14px;
    line-height: 1.42;
}

.navbar,
ul.linklist,
.breadcrumbs,
.action-bar,
.time,
.mark-read,
.page-footer,
.copyright {
    font-size: 13px;
}

h1 {
    font-size: 26px;
    line-height: 1.2;
}

h2,
.page-body > h2,
.panel h2 {
    font-size: 21px;
    line-height: 1.24;
}

h3,
.panel h3,
.stat-block h3 {
    font-size: 15px;
    line-height: 1.28;
}

.forabg .header,
.forumbg .header,
.forabg .header dt,
.forabg .header dd,
.forumbg .header dt,
.forumbg .header dd {
    font-size: 13px;
    line-height: 18px;
}

li.row a.forumtitle,
li.row a.topictitle {
    font-size: 15px;
    line-height: 1.3;
}

li.row .list-inner,
li.row .list-inner p,
ul.topiclist dd,
ul.topiclist dd.lastpost,
ul.topiclist dd.posts,
ul.topiclist dd.views {
    font-size: 13px;
    line-height: 1.35;
}

.postbody,
.postbody .content,
.content,
.signature,
.postprofile,
.panel,
.cp-main,
#cp-main,
fieldset,
label,
input,
textarea,
select,
.button,
.button1,
.button2 {
    font-size: 14px;
}

.tabs .tab > a,
.minitabs .tab > a,
.pagination li a,
.pagination li span,
.dropdown .dropdown-contents {
    font-size: 13px;
}

@media (max-width: 1200px) {
    .headerbar {
        /* Keep the image itself unchanged; narrow viewports show a centred crop. */
        width: 100%;
        background-size: 1200px 300px;
    }
}

@media (max-width: 700px) {
    h1 { font-size: 23px; }
    h2,
    .page-body > h2,
    .panel h2 { font-size: 19px; }
}