:root {
    --bg-base: #090909;
    --bg-elev-1: #121212;
    --bg-elev-2: #1a1a1a;
    --line: #353535;
    --line-soft: #2a2a2a;
    --text: #f2f2f2;
    --text-soft: #b8b8b8;
    --accent: #c8922f;
    --accent-2: #f2be62;
    --danger: #bf2b2b;
    --chip: #242424;
    --brand-red: #8f1e1e;
    --brand-red-soft: #c63434;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Rajdhani', sans-serif;
    color: var(--text);
    background:
        linear-gradient(180deg, rgba(6, 6, 6, 0.78) 0%, rgba(6, 6, 6, 0.9) 100%),
        radial-gradient(1200px 600px at -10% -10%, rgba(163, 38, 38, 0.38), transparent 56%),
        radial-gradient(1000px 550px at 120% 10%, rgba(195, 148, 52, 0.25), transparent 52%),
        url('https://mlpnk72yciwc.i.optimole.com/cqhiHLc.IIZS~2ef73/w:auto/h:auto/q:75/https://bleedingcool.com/wp-content/uploads/2020/09/Conquerors-of-Yohara-expansion-Metin2.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
    min-height: 100vh;
    letter-spacing: 0.2px;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea {
    font: inherit;
}

.container {
    width: min(1240px, calc(100% - 2rem));
    margin: 0 auto;
}

.top-ad-bar {
    background: linear-gradient(90deg, #861d1d, #b12828);
    border-bottom: 1px solid #c14141;
}

.top-ad-wrap {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.02rem;
}

.ad-label {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    padding: 0.15rem 0.65rem;
    font-weight: 700;
}

.top-ad-link {
    color: #f4dddd;
}

.main-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(9, 9, 9, 0.95);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(6px);
}

.header-inner {
    min-height: 78px;
    display: grid;
    grid-template-columns: minmax(250px, 300px) minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
}

.logo-wrap {
    width: min(100%, 300px);
    aspect-ratio: 300 / 80;
    border: 1px solid #6d5738;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(54, 42, 27, 0.92), rgba(23, 19, 15, 0.96));
}

.logo-wrap.has-image {
    border-color: #8e7344;
    background: #0f0f10;
}

.logo-wrap.is-empty {
    border-style: dashed;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.45rem;
}

.site-logo-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.site-logo-size {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #a88a57;
    border-radius: 999px;
    padding: 0.14rem 0.55rem;
    font-size: 0.78rem;
    color: #ffe1ad;
    background: rgba(54, 42, 27, 0.76);
}

.site-logo-note {
    color: #d5c2a1;
    font-size: 0.8rem;
    text-align: center;
    font-weight: 700;
}

.main-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    justify-content: center;
}

.main-nav a {
    padding: 0.45rem 0.7rem;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #dfdfdf;
    font-weight: 600;
    transition: 0.2s ease;
}

.main-nav a:hover,
.main-nav a.is-active {
    border-color: var(--line);
    background: #181818;
    color: #fff;
}

.auth-links {
    display: flex;
    gap: 0.55rem;
}

.ghost-btn,
.solid-btn,
.web-btn {
    padding: 0.48rem 0.85rem;
    border-radius: 6px;
    font-weight: 700;
    border: 1px solid var(--line);
    transition: 0.2s ease;
}

.ghost-btn {
    background: #171717;
    color: #d6d6d6;
    cursor: pointer;
}

.solid-btn {
    background: linear-gradient(180deg, var(--accent-2), var(--accent));
    border-color: #9c7429;
    color: #231708;
    cursor: pointer;
}

.web-btn {
    background: linear-gradient(180deg, #2f2f2f, #222);
    border-color: #454545;
    color: #e3e3e3;
    font-size: 0.83rem;
}

.ghost-btn:hover,
.solid-btn:hover,
.web-btn:hover {
    transform: translateY(-1px);
}

.news-ticker {
    overflow: hidden;
    border-bottom: 1px solid var(--line-soft);
    border-top: 1px solid #191919;
    background: #101010;
}

.ticker-track {
    display: flex;
    min-width: 100%;
    width: fit-content;
    animation: ticker 24s linear infinite;
}

.ticker-track span {
    white-space: nowrap;
    padding: 0.65rem 2rem;
    color: #d5d5d5;
    font-size: 0.92rem;
}

@keyframes ticker {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.page-shell {
    padding: 1.2rem 0 2rem;
}

.hero-panel {
    background:
        linear-gradient(135deg, rgba(195, 148, 52, 0.12), rgba(10, 10, 10, 0.9)),
        #121212;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1.2rem;
    margin-bottom: 1rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}

.hero-panel.compact {
    margin-bottom: 0.75rem;
}

.hero-kicker {
    margin: 0;
    color: var(--accent-2);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 1.1px;
}

.hero-panel h1 {
    margin: 0.35rem 0 1rem;
    font-size: clamp(1.18rem, 2vw, 1.9rem);
    font-family: 'Rajdhani', sans-serif;
    line-height: 1.25;
}

.hero-subtitle {
    margin: 0;
    color: #cbcbcb;
    font-size: 1.02rem;
}

.hero-search {
    display: flex;
    gap: 0.65rem;
    margin-bottom: 1rem;
}

.hero-search input {
    flex: 1;
    min-width: 0;
    border-radius: 10px;
    border: 1px solid #454545;
    background: #0f0f0f;
    color: #ececec;
    padding: 0.76rem 0.9rem;
    font-size: 1.02rem;
}

.hero-search input:focus {
    outline: 2px solid rgba(195, 148, 52, 0.25);
    border-color: var(--accent);
}

.hero-search button {
    border: 1px solid #9c7429;
    border-radius: 10px;
    background: linear-gradient(180deg, var(--accent-2), var(--accent));
    color: #251905;
    padding: 0.76rem 1.2rem;
    font-size: 0.98rem;
    font-weight: 700;
    cursor: pointer;
}

.category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.category-tabs a {
    padding: 0.42rem 0.8rem;
    border-radius: 999px;
    border: 1px solid #3b3b3b;
    background: #151515;
    color: #dedede;
    font-weight: 600;
    font-size: 0.92rem;
}

.category-tabs a.is-active {
    background: linear-gradient(180deg, var(--accent-2), var(--accent));
    border-color: #9c7429;
    color: #251905;
}

.content-grid {
    display: grid;
    grid-template-columns: minmax(0, 2.35fr) minmax(300px, 1fr);
    gap: 1rem;
    align-items: start;
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    background: #101010;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 0.65rem 0.85rem;
    margin-bottom: 0.75rem;
}

.section-head h2 {
    margin: 0;
    font-size: 1.02rem;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: #ececec;
}

.section-head a {
    color: var(--accent-2);
    font-weight: 600;
    font-size: 0.86rem;
}

.vip-grid,
.server-list {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 0.95rem;
}

.server-card {
    display: grid;
    grid-template-columns: minmax(210px, 320px) minmax(0, 1fr);
    align-items: start;
    background:
        linear-gradient(145deg, rgba(195, 148, 52, 0.16), rgba(20, 20, 20, 0.95)),
        var(--bg-elev-1);
    border: 1px solid #3f3420;
    border-radius: 13px;
    overflow: hidden;
    transition: 0.2s ease;
}

.server-card:hover {
    transform: translateY(-1px);
    border-color: #8a6a34;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
}

.server-card.is-vip {
    border-color: #7f5d23;
    box-shadow: inset 0 0 0 1px rgba(195, 148, 52, 0.35);
}

.server-thumb {
    position: relative;
    height: 190px;
    min-height: 190px;
    align-self: start;
    overflow: hidden;
    border-right: 1px solid #2f2f2f;
    background:
        radial-gradient(120% 100% at 50% 0%, rgba(194, 151, 77, 0.2), transparent 56%),
        #0d0d0f;
}

.server-thumb-link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}

.server-thumb-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    background: #0f0f10;
    filter: saturate(1.05) contrast(1.04);
}

.server-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(11, 9, 7, 0.04), rgba(11, 9, 7, 0.18));
}

.vip-ribbon {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #2d1f05;
    background: linear-gradient(180deg, #ffd184, #d49d42);
    border-radius: 999px;
    padding: 0.22rem 0.62rem;
    border: 1px solid #a97727;
}

.server-content {
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.66rem;
}

.server-title-row {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 0.6rem;
}

.server-title-row h3 {
    margin: 0;
    font-size: 1.15rem;
    font-family: 'Rajdhani', sans-serif;
    color: #fff9f2;
}

.server-category {
    border-radius: 999px;
    border: 1px solid #4b4b4b;
    padding: 0.2rem 0.58rem;
    font-size: 0.78rem;
    color: #cfcfcf;
    background: #151515;
    white-space: nowrap;
}

.server-content p {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.45;
    font-size: 1.02rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.server-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.server-meta span {
    padding: 0.23rem 0.58rem;
    border-radius: 999px;
    border: 1px solid #3d3d3d;
    background: #141414;
    color: #d9d9d9;
    font-size: 0.82rem;
}

.server-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}

.discord-btn {
    padding: 0.38rem 0.8rem;
    border-radius: 999px;
    background: linear-gradient(180deg, #3f62d8, #2b4cb8);
    border: 1px solid #1f3f9f;
    color: #f1f4ff;
    font-size: 0.83rem;
    font-weight: 700;
}

.stat-chip {
    padding: 0.34rem 0.62rem;
    border-radius: 999px;
    background: var(--chip);
    border: 1px solid #393939;
    color: #d6d6d6;
    font-size: 0.8rem;
    font-weight: 600;
}

.sidebar-card {
    background: var(--bg-elev-2);
    border: 1px solid var(--line-soft);
    border-radius: 13px;
    overflow: hidden;
    margin-bottom: 0.85rem;
}

.sidebar-head {
    background: linear-gradient(180deg, #b12828, #8f1d1d);
    border-bottom: 1px solid #7b1b1b;
    padding: 0.62rem 0.85rem;
}

.sidebar-head h3 {
    margin: 0;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.96rem;
}

.new-server-list,
.stats-list {
    margin: 0;
    padding: 0.72rem 0.82rem;
    list-style: none;
    display: grid;
    gap: 0.58rem;
}

.new-server-list li {
    border: 1px solid #323232;
    border-radius: 9px;
    padding: 0.56rem 0.62rem;
    background: #161616;
    display: grid;
    gap: 0.22rem;
}

.new-server-list strong {
    color: #f0f0f0;
    font-size: 1.02rem;
}

.new-server-list span {
    color: #c5c5c5;
    font-size: 0.82rem;
}

.stats-list li {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: center;
    border: 1px solid #323232;
    border-radius: 9px;
    background: #161616;
    padding: 0.52rem 0.62rem;
    font-size: 0.9rem;
}

.stats-list span {
    color: #c8c8c8;
}

.stats-list strong {
    color: #f9d287;
    font-weight: 700;
}

.sidebar-actions {
    border-top: 1px solid #2f2f2f;
    padding: 0.6rem 0.82rem 0.75rem;
}

.sidebar-actions a {
    color: var(--accent-2);
    font-weight: 700;
    font-size: 0.87rem;
}

.empty-state {
    border: 1px dashed #565656;
    border-radius: 12px;
    background: #111;
    padding: 1.1rem;
    display: grid;
    gap: 0.5rem;
}

.empty-state h3 {
    margin: 0;
    font-size: 1.1rem;
}

.empty-state p {
    margin: 0;
    color: #c8c8c8;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.95rem;
}

.category-card {
    border: 1px solid #40331d;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(195, 148, 52, 0.13), #131313);
    padding: 0.85rem;
    display: grid;
    gap: 0.45rem;
}

.category-card h3,
.blog-card h3 {
    margin: 0;
    font-family: 'Rajdhani', sans-serif;
}

.category-card p,
.blog-card p {
    margin: 0;
    color: #c5c5c5;
}

.category-card a,
.blog-card a {
    color: var(--accent-2);
    font-weight: 700;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.95rem;
}

.blog-card {
    border: 1px solid #323232;
    border-radius: 12px;
    background: #121212;
    padding: 0.9rem;
    display: grid;
    gap: 0.45rem;
}

.blog-date {
    color: #bca172;
    font-size: 0.82rem;
    font-weight: 700;
}

.contact-panel {
    border: 1px solid #343434;
    border-radius: 12px;
    background: #111;
    padding: 0.95rem;
}

.contact-form,
.auth-form {
    display: grid;
    gap: 0.75rem;
}

.contact-form label,
.auth-form label {
    display: grid;
    gap: 0.35rem;
    font-weight: 600;
}

.contact-form input,
.contact-form textarea,
.auth-form input {
    width: 100%;
    border: 1px solid #444;
    border-radius: 6px;
    background: #0c0c0c;
    color: #e8e8e8;
    padding: 0.62rem 0.72rem;
}

.detail-card {
    background: #121212;
    border: 1px solid #323232;
    border-radius: 13px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.detail-hero {
    position: relative;
    aspect-ratio: 16 / 9;
    min-height: 220px;
    max-height: 420px;
    overflow: hidden;
    background: #0d0f14;
}

.detail-hero img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    background: linear-gradient(180deg, rgba(10, 10, 12, 0.92), rgba(16, 14, 12, 0.96));
}

.detail-body {
    padding: 0.95rem;
    display: grid;
    gap: 0.7rem;
}

.detail-head {
    display: flex;
    justify-content: space-between;
    gap: 0.7rem;
    align-items: start;
}

.detail-head h1 {
    margin: 0;
    font-size: 1.5rem;
    font-family: 'Rajdhani', sans-serif;
}

.detail-body p {
    margin: 0;
    color: #d2d2d2;
    line-height: 1.5;
}

.detail-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.65rem;
}

.detail-metrics div {
    border: 1px solid #333;
    border-radius: 10px;
    background: #141414;
    padding: 0.6rem;
    display: grid;
    gap: 0.25rem;
}

.detail-metrics span {
    color: #afafaf;
    font-size: 0.86rem;
}

.detail-metrics strong {
    color: #f0f0f0;
    font-size: 1.02rem;
}

.detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.footer-banner-ad {
    margin: 0.75rem 0 1.2rem;
}

.footer-banner-ad .container {
    display: flex;
    justify-content: center;
}

.footer-banner-ad.is-home-column .container {
    display: grid;
    grid-template-columns: minmax(0, 2.35fr) minmax(300px, 1fr);
    gap: 1rem;
}

.footer-banner-ad.is-home-column .footer-banner-ad-card {
    grid-column: 1;
    width: 100%;
    max-width: 860px;
    margin: 0;
    justify-self: stretch;
}
.footer-banner-ad-card {
    flex: 0 1 860px;
    width: min(100%, 860px);
    aspect-ratio: 860 / 120;
    max-height: 120px;
    margin: 0 auto;
    border: 1px solid #8b6e3f;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background: linear-gradient(180deg, rgba(50, 39, 27, 0.86), rgba(24, 20, 15, 0.95));
}

.footer-banner-ad-card.has-ad img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.footer-banner-ad-card.is-placeholder {
    border-style: dashed;
    padding: 0.85rem;
    gap: 0.3rem;
    flex-direction: column;
    text-align: center;
    background:
        linear-gradient(180deg, rgba(54, 42, 27, 0.92), rgba(23, 19, 15, 0.96)),
        repeating-linear-gradient(
            -45deg,
            rgba(214, 166, 83, 0.08) 0,
            rgba(214, 166, 83, 0.08) 12px,
            rgba(16, 14, 11, 0.08) 12px,
            rgba(16, 14, 11, 0.08) 24px
        );
}

@media (max-width: 980px) {
    .footer-banner-ad {
        margin-bottom: 1rem;
    }

    .footer-banner-ad.is-home-column .container {
        display: flex;
        justify-content: center;
    }

    .footer-banner-ad.is-home-column .footer-banner-ad-card {
        width: min(100%, 860px);
        margin: 0 auto;
    }
}
.site-footer {
    margin-top: 1.5rem;
    border-top: 1px solid var(--line);
    background: linear-gradient(180deg, #0d0d0d, #080808);
}

.footer-grid {
    padding: 1.3rem 0;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.site-footer h3 {
    margin: 0 0 0.55rem;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.02rem;
}

.site-footer p,
.site-footer li {
    margin: 0;
    color: #bdbdbd;
    line-height: 1.45;
    font-size: 0.92rem;
}

.site-footer ul {
    margin: 0;
    padding-left: 1rem;
    display: grid;
    gap: 0.35rem;
}

.footer-section-desc {
    margin: 0 0 0.45rem;
    color: #c8b79a;
    font-size: 0.84rem;
}

.footer-link-list {
    gap: 0.42rem;
}

.footer-link-note {
    display: block;
    margin-top: 0.08rem;
    color: #a9997f;
    font-size: 0.78rem;
    line-height: 1.3;
}

.footer-rich-text {
    white-space: pre-line;
}
.footer-bottom {
    border-top: 1px solid #1f1f1f;
    padding: 0.65rem 0;
    background: #050505;
}

.footer-bottom p {
    margin: 0;
    text-align: center;
    color: #909090;
    font-size: 0.82rem;
}

.auth-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 90;
    padding: 1rem;
}

.auth-modal.is-open {
    display: flex;
}

.auth-dialog {
    width: min(420px, 100%);
    background: #111;
    border: 1px solid #393939;
    border-radius: 12px;
    padding: 0.9rem;
    position: relative;
}

.auth-close {
    position: absolute;
    top: 0.45rem;
    right: 0.55rem;
    border: 0;
    background: transparent;
    color: #d4d4d4;
    font-size: 1.2rem;
    cursor: pointer;
}

.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
    margin-bottom: 0.8rem;
}

.auth-tab {
    border-radius: 9px;
    border: 1px solid #3e3e3e;
    background: #161616;
    color: #d8d8d8;
    font-weight: 700;
    padding: 0.5rem;
    cursor: pointer;
}

.auth-tab.is-active {
    border-color: #9c7429;
    background: linear-gradient(180deg, var(--accent-2), var(--accent));
    color: #221603;
}

.auth-panel {
    display: none;
}

.auth-panel.is-active {
    display: block;
}

.auth-panel h3 {
    margin: 0 0 0.8rem;
}

.auth-form-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.auth-helper-link {
    color: #f0c67a;
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.auth-helper-link:hover {
    color: #ffd997;
}

@media (max-width: 1150px) {
    .content-grid {
        grid-template-columns: 1fr;
    }

    .server-card {
        grid-template-columns: minmax(190px, 260px) minmax(0, 1fr);
    }

    .blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .header-inner {
        grid-template-columns: 1fr;
        padding: 0.8rem 0;
    }

    .logo-wrap {
        width: min(100%, 300px);
        justify-self: start;
    }

    .main-nav,
    .auth-links {
        justify-content: start;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .detail-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .container {
        width: min(1240px, calc(100% - 1rem));
    }

    .logo-wrap {
        width: min(100%, 240px);
    }

    .hero-panel {
        padding: 0.95rem;
    }

    .hero-search {
        flex-direction: column;
    }

    .server-card {
        grid-template-columns: 1fr;
    }

    .server-thumb {
        min-height: 190px;
        border-right: 0;
        border-bottom: 1px solid #2f2f2f;
    }

    .section-head {
        flex-direction: column;
        align-items: start;
    }

    .category-grid,
    .blog-grid,
    .detail-metrics {
        grid-template-columns: 1fr;
    }

    .detail-head {
        flex-direction: column;
    }

    .detail-hero {
        min-height: 180px;
        max-height: 320px;
    }
}

/* auth and interaction extensions */
.auth-user {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.user-pill {
    border: 1px solid #4d4d4d;
    border-radius: 999px;
    background: #141414;
    color: #f0f0f0;
    padding: 0.35rem 0.75rem;
    font-size: 0.88rem;
    font-weight: 700;
}

.alert-strip {
    margin-top: 0.85rem;
    border: 1px solid #3a3a3a;
    border-radius: 10px;
    padding: 0.58rem 0.8rem;
    font-weight: 600;
}

.alert-strip.success {
    border-color: #2f7a4f;
    background: rgba(35, 101, 63, 0.32);
    color: #c8f2d8;
}

.alert-strip.warning {
    border-color: #8e5f23;
    background: rgba(114, 76, 30, 0.3);
    color: #f8ddaf;
}

.inline-vote {
    margin: 0;
}

.vote-btn {
    padding: 0.38rem 0.8rem;
    border-radius: 999px;
    background: linear-gradient(180deg, #cd4444, #a02b2b);
    border: 1px solid #7b1d1d;
    color: #f9e7e7;
    font-size: 0.83rem;
    font-weight: 700;
    cursor: pointer;
}

.check-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #d6d6d6;
    font-size: 0.9rem;
}

.check-line input {
    width: auto;
}

.form-errors {
    border: 1px solid #8a2525;
    background: rgba(122, 29, 29, 0.3);
    border-radius: 9px;
    padding: 0.48rem 0.6rem;
    margin-bottom: 0.65rem;
}

.form-errors p {
    margin: 0;
    color: #ffc7c7;
    font-size: 0.86rem;
}

.form-errors p + p {
    margin-top: 0.25rem;
}

@media (max-width: 980px) {
    .auth-user {
        justify-content: start;
    }
}
.fav-btn {
    padding: 0.38rem 0.8rem;
    border-radius: 999px;
    border: 1px solid #7a5d2f;
    background: linear-gradient(180deg, #3a3021, #282014);
    color: #f2d59d;
    font-size: 0.83rem;
    font-weight: 700;
    cursor: pointer;
}

.fav-btn.is-active {
    border-color: #9c7429;
    background: linear-gradient(180deg, #e3b15b, #c39434);
    color: #2a1b05;
}
.comment-panel {
    border: 1px solid #343434;
    border-radius: 12px;
    background: #101010;
    padding: 0.85rem;
    margin-bottom: 1rem;
}

.rating-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
    margin-bottom: 0.75rem;
}

.rating-main {
    font-size: 1.6rem;
    font-weight: 700;
    color: #f2d08d;
}

.rating-stars {
    color: #f2d08d;
    letter-spacing: 1px;
}

.rating-count {
    color: #bfbfbf;
    font-size: 0.9rem;
}

.comment-form {
    display: grid;
    gap: 0.65rem;
    border: 1px solid #2f2f2f;
    border-radius: 10px;
    background: #141414;
    padding: 0.75rem;
    margin-bottom: 0.85rem;
}

.comment-form label {
    display: grid;
    gap: 0.35rem;
    font-weight: 600;
}

.comment-form select,
.comment-form textarea {
    width: 100%;
    border: 1px solid #444;
    border-radius: 6px;
    background: #0c0c0c;
    color: #ececec;
    padding: 0.58rem 0.68rem;
}

.comment-list {
    display: grid;
    gap: 0.55rem;
}

.comment-item {
    border: 1px solid #323232;
    border-radius: 10px;
    background: #151515;
    padding: 0.7rem;
    display: grid;
    gap: 0.45rem;
}

.comment-top {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    align-items: center;
}

.comment-top strong {
    color: #f1f1f1;
}

.comment-top span {
    color: #e9bf6d;
    letter-spacing: 1px;
}

.comment-item p {
    margin: 0;
    color: #d3d3d3;
    line-height: 1.45;
}

.comment-meta {
    display: flex;
    justify-content: space-between;
    gap: 0.65rem;
    align-items: center;
}

.comment-meta small {
    color: #9f9f9f;
}

.comment-meta form {
    margin: 0;
}

.text-btn {
    border: 0;
    background: transparent;
    color: #ff9f9f;
    font-weight: 700;
    cursor: pointer;
}

.comment-login-box {
    border: 1px dashed #4d4d4d;
    border-radius: 10px;
    padding: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.85rem;
}

.comment-login-box p {
    margin: 0;
    color: #d0d0d0;
}
/* admin panel */
.is-admin-route .page-shell > .container {
    padding-right: 330px;
}

.admin-nav-groups {
    display: grid;
    gap: 0.65rem;
    margin-bottom: 0.9rem;
}

.is-admin-route .admin-nav-groups {
    position: fixed;
    top: 126px;
    right: 1rem;
    width: 300px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    padding-right: 0.2rem;
    z-index: 40;
}

.is-admin-route .admin-nav-groups::-webkit-scrollbar {
    width: 7px;
}

.is-admin-route .admin-nav-groups::-webkit-scrollbar-thumb {
    background: #4d4d4d;
    border-radius: 999px;
}

.admin-nav-group {
    border: 1px solid #313131;
    border-radius: 11px;
    background: #111;
    padding: 0.55rem;
}

.admin-nav-group-title {
    margin: 0 0 0.5rem;
    color: #f0d497;
    font-size: 0.78rem;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    font-weight: 700;
}

.admin-nav {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.42rem;
}

.admin-nav a {
    border: 1px solid #393939;
    background: #141414;
    color: #d8d8d8;
    border-radius: 6px;
    padding: 0.42rem 0.68rem;
    font-weight: 700;
    font-size: 0.88rem;
    line-height: 1.2;
}

.admin-nav a.is-active {
    background: linear-gradient(180deg, #e3b15b, #c39434);
    border-color: #9c7429;
    color: #2a1b05;
}

@media (max-width: 1320px) {
    .is-admin-route .page-shell > .container {
        padding-right: 0;
    }

    .is-admin-route .admin-nav-groups {
        position: static;
        width: auto;
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }

    .admin-nav {
        display: flex;
        flex-wrap: wrap;
        gap: 0.45rem;
    }

    .admin-nav a {
        border-radius: 999px;
    }
}

.admin-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
    margin-bottom: 1rem;
}

.admin-card {
    border: 1px solid #3a3a3a;
    border-radius: 11px;
    background: #121212;
    padding: 0.72rem;
    display: grid;
    gap: 0.25rem;
}

.admin-card span {
    color: #bfbfbf;
    font-size: 0.88rem;
}

.admin-card strong {
    color: #f0d497;
    font-size: 1.4rem;
    font-family: 'Rajdhani', sans-serif;
}

.admin-create-box {
    border: 1px solid #323232;
    border-radius: 11px;
    background: #111;
    padding: 0.8rem;
    margin-bottom: 0.9rem;
}

.admin-create-box h3 {
    margin: 0 0 0.7rem;
}

.admin-grid-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.55rem;
}

.admin-grid-form.compact {
    grid-template-columns: 1fr;
    margin-top: 0.5rem;
}

.admin-grid-form input,
.admin-grid-form textarea,
.admin-grid-form select {
    width: 100%;
    border: 1px solid #474747;
    border-radius: 6px;
    background: #0f0f0f;
    color: #e8e8e8;
    padding: 0.5rem 0.6rem;
}

.admin-grid-form textarea {
    grid-column: 1 / -1;
}

.admin-grid-form button {
    width: fit-content;
}

.admin-inline-search {
    display: flex;
    gap: 0.45rem;
}

.admin-inline-search input {
    border: 1px solid #444;
    border-radius: 6px;
    background: #0f0f0f;
    color: #e8e8e8;
    padding: 0.45rem 0.6rem;
    min-width: 220px;
}

.admin-table-wrap {
    border: 1px solid #2f2f2f;
    border-radius: 10px;
    overflow-x: auto;
    background: #101010;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 920px;
}

.admin-table th,
.admin-table td {
    border-bottom: 1px solid #252525;
    padding: 0.56rem 0.62rem;
    text-align: left;
    vertical-align: top;
    font-size: 0.9rem;
}

.admin-table th {
    color: #f2d08d;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.7px;
}

.admin-table td small {
    color: #9f9f9f;
}

.admin-action-stack {
    display: grid;
    gap: 0.35rem;
}

.ghost-btn.mini {
    padding: 0.32rem 0.62rem;
    font-size: 0.8rem;
}

.pagination-wrap {
    margin-top: 0.75rem;
}

.home-pagination-wrap {
    margin-top: 0.9rem;
    border: 1px solid #4f3b25;
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(59, 45, 33, 0.88), rgba(43, 34, 26, 0.92));
    padding: 0.95rem 0.85rem 0.85rem;
    display: grid;
    gap: 0.75rem;
    justify-items: center;
}

.home-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.46rem;
}

.home-page-item,
.home-page-arrow {
    min-width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid #615141;
    background: #3a3128;
    color: #f3efe8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1;
    transition: 0.18s ease;
}

.home-page-item:hover,
.home-page-arrow:hover {
    border-color: #b4894d;
    background: #4b3a2b;
    color: #fff;
}

.home-page-item.is-active {
    border-color: #b98a45;
    background: linear-gradient(180deg, #d9b067, #b98a45);
    color: #271708;
}

.home-page-arrow.is-disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

.home-page-gap {
    color: #cfbd9a;
    font-weight: 700;
    padding: 0 0.2rem;
    letter-spacing: 1px;
}

.home-pagination-note {
    margin: 0;
    text-align: center;
    color: #e0d5c3;
    font-size: 0.94rem;
}

.admin-server-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}

.admin-modal[hidden] {
    display: none;
}

.admin-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    background: rgba(5, 5, 5, 0.78);
    display: grid;
    place-items: center;
    padding: 1rem;
}

.admin-modal-panel {
    width: min(920px, 100%);
    max-height: 92vh;
    overflow: auto;
    border: 1px solid #4c3a25;
    border-radius: 14px;
    background:
        linear-gradient(160deg, rgba(35, 30, 22, 0.98), rgba(16, 16, 16, 0.98)),
        #141414;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    padding: 0.9rem;
}

.admin-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.8rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid #2f2f2f;
}

.admin-modal-head h3 {
    margin: 0;
    color: #f4d99e;
}

.admin-modal-head p {
    margin: 0.22rem 0 0;
    color: #b9b9b9;
    font-size: 0.84rem;
}

.admin-modal-close {
    border: 1px solid #4f4f4f;
    border-radius: 7px;
    background: #181818;
    color: #ddd;
    font-weight: 700;
    padding: 0.4rem 0.72rem;
    cursor: pointer;
}

.admin-server-edit-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.68rem;
}

.admin-field {
    display: grid;
    gap: 0.3rem;
}

.admin-field span {
    color: #f2d08d;
    font-size: 0.8rem;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    font-weight: 700;
}

.admin-field-full {
    grid-column: 1 / -1;
}

.admin-banner-preview-card,
.admin-change-summary {
    grid-column: 1 / -1;
    border: 1px solid #2f2f2f;
    border-radius: 10px;
    background: #141414;
    padding: 0.65rem 0.7rem;
}

.admin-banner-preview-card strong {
    display: block;
    color: #f0d497;
    margin-bottom: 0.45rem;
    font-size: 0.84rem;
}

.admin-banner-preview-media {
    border: 1px solid #2b2b2b;
    border-radius: 8px;
    min-height: 146px;
    background: #0f0f0f;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 0.45rem;
}

.admin-banner-preview-media img {
    width: 100%;
    max-height: 220px;
    object-fit: contain;
    border-radius: 6px;
}

.admin-banner-preview-media span {
    color: #a8a8a8;
    font-size: 0.84rem;
    text-align: center;
}

.admin-change-summary h4 {
    margin: 0 0 0.45rem;
    color: #f0d497;
    font-size: 0.88rem;
}

.admin-change-summary ul {
    margin: 0;
    padding-left: 1rem;
    display: grid;
    gap: 0.3rem;
}

.admin-change-summary li {
    color: #d8d8d8;
    font-size: 0.86rem;
    line-height: 1.42;
}

.admin-change-summary li strong {
    color: #ffe0a1;
}

.admin-server-edit-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding-top: 0.62rem;
    border-top: 1px solid #2f2f2f;
}

body.is-modal-open {
    overflow: hidden;
}

@media (max-width: 980px) {
    .admin-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-grid-form {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 700px) {
    .admin-cards,
    .admin-grid-form,
    .admin-server-edit-form {
        grid-template-columns: 1fr;
    }

    .admin-inline-search {
        width: 100%;
    }

    .admin-inline-search input {
        min-width: 0;
        flex: 1;
    }

    .admin-modal {
        padding: 0.55rem;
    }

    .admin-modal-panel {
        max-height: 95vh;
        padding: 0.7rem;
    }

    .admin-modal-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-server-edit-actions {
        justify-content: stretch;
    }

    .admin-server-edit-actions .ghost-btn,
    .admin-server-edit-actions .solid-btn {
        width: 100%;
    }
}

.top-ad-desc {
    color: #b6b6b6;
    font-size: 0.78rem;
}

.site-popup-ad {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: none;
}

.site-popup-ad.is-open {
    display: block;
}

.site-popup-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.64);
}

.site-popup-card {
    position: relative;
    max-width: 520px;
    margin: 10vh auto 0;
    border: 1px solid #434343;
    border-radius: 14px;
    background: linear-gradient(180deg, #1d1d1d, #111111);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.45);
    padding: 1rem;
    color: #ececec;
    z-index: 1;
}

.site-popup-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 10px;
    margin-top: 0.45rem;
}

.popup-ad-actions {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.75rem;
}

@media (max-width: 700px) {
    .site-popup-card {
        margin: 5vh 0.7rem 0;
    }

    .popup-ad-actions {
        flex-direction: column;
    }
}

.header-center-ad {
    margin-top: 0.45rem;
}

.header-center-slider {
    width: min(100%, 1280px);
    margin: 0 auto;
    position: relative;
}

.header-center-slider-track {
    position: relative;
    width: 100%;
    aspect-ratio: 1280 / 420;
    border: 1px solid #3a3428;
    border-radius: 12px;
    background: linear-gradient(180deg, #1a1712, #111111);
    overflow: hidden;
}

.header-center-slider.has-pager .header-center-slider-track {
    border-bottom: 1px solid #3a3428;
    border-radius: 12px;
}

.header-center-dots-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    pointer-events: none;
}

.header-center-slide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    text-decoration: none;
    color: #f4e7cf;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.45s ease;
    padding: 0.75rem;
    text-align: center;
}

.header-center-slide.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
}

.header-center-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.header-center-dots {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 0.52rem;
    margin-top: 0;
    overflow-x: auto;
    scrollbar-width: thin;
    padding: 0.33rem 0.68rem;
    border: 1px solid rgba(113, 103, 89, 0.92);
    border-radius: 999px;
    background: rgba(18, 16, 14, 0.6);
    backdrop-filter: blur(2px);
    pointer-events: auto;
    max-width: 100%;
}

.header-center-dots button {
    width: 13px;
    height: 13px;
    border: 1px solid #69655c;
    border-radius: 999px;
    background: rgba(135, 147, 140, 0.38);
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
    flex: 0 0 auto;
}

.header-center-dots button.is-active {
    background: #d8ae67;
    border-color: #f3cd8e;
    transform: scale(1.1);
}

.header-center-dots button:hover {
    background: #d09f53;
}

.header-center-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    text-decoration: none;
    width: min(100%, 1280px);
    aspect-ratio: 1280 / 420;
    margin: 0 auto;
    border: 1px solid #3a3428;
    border-radius: 12px;
    background: linear-gradient(180deg, #1a1712, #111111);
    overflow: hidden;
    padding: 0.6rem;
    text-align: center;
}

.header-center-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.header-center-card.is-placeholder {
    border-style: dashed;
    border-color: #8b6e3f;
    background:
        linear-gradient(180deg, rgba(54, 42, 27, 0.92), rgba(23, 19, 15, 0.96)),
        repeating-linear-gradient(
            -45deg,
            rgba(214, 166, 83, 0.08) 0,
            rgba(214, 166, 83, 0.08) 12px,
            rgba(16, 14, 11, 0.08) 12px,
            rgba(16, 14, 11, 0.08) 24px
        );
}


@media (max-width: 900px) {
    .header-center-slider-track,
    .header-center-card {
        border-radius: 10px;
    }

    .header-center-slider.has-pager .header-center-slider-track {
        border-radius: 10px;
    }

    .header-center-dots-bar {
        bottom: 10px;
        padding: 0 0.55rem;
    }

    .header-center-dots {
        gap: 0.4rem;
        padding: 0.28rem 0.52rem;
    }

    .header-center-dots button {
        width: 10px;
        height: 10px;
    }

    .header-center-slide {
        padding: 0.55rem;
    }
}

.floating-ad {
    --floating-ad-top: 170px;
    position: fixed;
    top: var(--floating-ad-top);
    width: 230px;
    z-index: 35;
    border: 1px solid #3f3b2f;
    border-radius: 12px;
    background: linear-gradient(180deg, #1a1712, #111111);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
}

.floating-ad a {
    display: block;
    color: #ececec;
    text-decoration: none;
    padding: 0.45rem;
}

.floating-ad a.has-image {
    padding: 0;
}

.floating-ad strong {
    display: block;
    font-size: 0.84rem;
    color: #f4cd88;
}

.floating-ad span {
    display: block;
    font-size: 0.78rem;
    color: #cfcfcf;
}

.floating-ad .slot-placeholder-size {
    margin-top: 0.22rem;
    margin-bottom: 0.2rem;
    font-weight: 700;
    color: #ffd694;
}

.floating-ad img {
    width: 100%;
    height: auto;
    max-height: min(950px, calc(100vh - var(--floating-ad-top) - 18px));
    object-fit: contain;
    display: block;
    border-radius: 10px;
}

.floating-ad-left {
    left: 12px;
}

.floating-ad-right {
    right: 12px;
}

.floating-ad.is-placeholder {
    border-style: dashed;
    border-color: #6b5a38;
}

@media (max-width: 1440px) {
    .floating-ad {
        display: none;
    }
}

/* theme refresh + icons */
.top-ad-bar {
    background: linear-gradient(90deg, var(--brand-red), var(--brand-red-soft));
    border-bottom: 1px solid #d34a4a;
}

.ad-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.ad-label i {
    color: #ffe09c;
    font-size: 0.78rem;
}

.main-nav a {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
}

.main-nav a:hover,
.main-nav a.is-active {
    border-color: #7a5e2e;
    background: linear-gradient(180deg, #262018, #181818);
}

.main-nav a i {
    color: #f0c77a;
    font-size: 0.8rem;
}

.main-nav a:hover i,
.main-nav a.is-active i {
    color: #ffe9be;
}

.auth-links .ghost-btn,
.auth-links .solid-btn,
.auth-user .ghost-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.sidebar-head h3 {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.sidebar-head h3 i {
    color: #ffd285;
    font-size: 0.82rem;
}

.new-server-list strong {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.new-server-list strong i {
    color: #f1c875;
    font-size: 0.78rem;
}

.new-server-list strong a:hover {
    color: #ffd48a;
}

.stats-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.stats-label i {
    color: #f0c57a;
    font-size: 0.75rem;
}

.admin-nav-group-title {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
}

.admin-nav-group-title i {
    color: #f3c36f;
    font-size: 0.78rem;
}






/* vivid theme lift */
:root {
    --bg-elev-1: #181614;
    --bg-elev-2: #221e1a;
    --line: #5b472f;
    --line-soft: #4a3b2d;
    --text: #fff5e3;
    --text-soft: #e8d8ba;
    --accent: #e0a941;
    --accent-2: #ffd27b;
    --brand-red: #ad2d2d;
    --brand-red-soft: #d74949;
}

body {
    background-image: url('https://mlpnk72yciwc.i.optimole.com/cqhiHLc.IIZS~2ef73/w:auto/h:auto/q:75/https://bleedingcool.com/wp-content/uploads/2020/09/Conquerors-of-Yohara-expansion-Metin2.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    background-attachment: fixed;
}

.main-header {
    background: rgba(20, 15, 11, 0.92);
    border-bottom-color: #6f5430;
}

.main-nav a {
    border-color: rgba(111, 84, 48, 0.35);
    background: rgba(28, 22, 18, 0.45);
}

.main-nav a:hover,
.main-nav a.is-active {
    background: linear-gradient(180deg, rgba(62, 45, 24, 0.92), rgba(39, 30, 22, 0.96));
}

.hero-panel,
.section-head,
.sidebar-card,
.detail-card,
.admin-card,
.admin-create-box,
.admin-table-wrap {
    background: linear-gradient(180deg, rgba(29, 24, 20, 0.94), rgba(22, 19, 16, 0.95));
    border-color: #5f4a2f;
}

.server-card {
    background: linear-gradient(145deg, rgba(224, 169, 65, 0.22), rgba(38, 30, 24, 0.96));
    border-color: #7a5c2e;
}

.server-card:hover {
    border-color: #c59442;
}

.stat-chip,
.server-meta span,
.new-server-list li,
.stats-list li,
.top-ad-link {
    color: #ffe7cb;
}

.sidebar-actions a,
.section-head a,
.blog-card a,
.category-card a {
    color: #ffd993;
}

.solid-btn {
    background: linear-gradient(180deg, #ffd885, #e5ac43);
    border-color: #b17a22;
    color: #2f1f06;
}

@media (max-width: 980px) {
    body {
        background-attachment: scroll;
    }
}




/* king catch helper */
.king-helper-frame {
    border: 2px solid #7a5938;
    border-radius: 20px;
    background:
        radial-gradient(900px 320px at 50% -10%, rgba(143, 104, 64, 0.28), transparent 64%),
        linear-gradient(180deg, rgba(67, 47, 30, 0.95), rgba(58, 40, 26, 0.96));
    box-shadow:
        inset 0 1px 0 rgba(255, 219, 164, 0.12),
        0 16px 34px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.king-helper-head {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 1.15rem 0.95rem;
    border-bottom: 1px solid rgba(159, 120, 74, 0.5);
}

.king-helper-head h2 {
    margin: 0;
    color: #ffe7bd;
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(2rem, 3.5vw, 3rem);
    letter-spacing: 1.1px;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
    text-align: center;
}

.king-rules-btn {
    justify-self: end;
    border: 1px solid #5f923d;
    border-radius: 999px;
    background: linear-gradient(180deg, #4f8b3f, #3b6f31);
    color: #d3f5b9;
    font-weight: 700;
    font-size: 1.02rem;
    min-width: 92px;
    padding: 0.35rem 1.05rem;
    cursor: pointer;
}

.king-helper-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.85rem 1.05rem;
    border-bottom: 1px solid rgba(159, 120, 74, 0.5);
}

.king-action-btn {
    border: 1px solid #9f453e;
    border-radius: 16px;
    min-width: 98px;
    padding: 0.5rem 1rem;
    color: #ffb9b9;
    font-size: 1.02rem;
    font-weight: 700;
    cursor: pointer;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
    box-shadow: inset 0 1px 0 rgba(255, 190, 190, 0.2);
}

.king-action-btn.is-red {
    border-color: #a24a48;
    background: linear-gradient(180deg, #973633, #752824);
}

.king-action-btn.is-blue {
    border-color: #4a82ad;
    background: linear-gradient(180deg, #3d8ac4, #2b5f8d);
    color: #cbebff;
}

.king-action-btn.is-green {
    border-color: #58833f;
    background: linear-gradient(180deg, #4f8840, #3a6830);
    color: #d7f5be;
}

.king-helper-palette {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.65rem;
    padding: 0.9rem 1.05rem 0.8rem;
    border-bottom: 1px solid rgba(159, 120, 74, 0.5);
}

.king-mini-card {
    position: relative;
    border: 1px solid #674929;
    border-radius: 6px;
    min-height: 54px;
    padding: 0.25rem;
    color: #fff9f2;
    font-weight: 800;
    cursor: pointer;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.king-mini-card::before,
.king-mini-card::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    pointer-events: none;
}

.king-mini-card::before {
    top: 4px;
    left: 4px;
    border-right: 0;
    border-bottom: 0;
}

.king-mini-card::after {
    right: 4px;
    bottom: 4px;
    border-left: 0;
    border-top: 0;
}

.king-mini-card.is-active {
    transform: translateY(-1px);
    box-shadow:
        inset 0 0 0 1px rgba(255, 245, 214, 0.28),
        0 0 0 2px rgba(255, 220, 153, 0.45);
}

.king-mini-card.is-empty-palette {
    opacity: 0.42;
}

.king-mini-card.is-one {
    border-color: #4b8a32;
    background: linear-gradient(160deg, #5aa53d, #3e762b);
}

.king-mini-card.is-two {
    border-color: #9a6b35;
    background: linear-gradient(160deg, #b27939, #845425);
}

.king-mini-card.is-three {
    border-color: #aa9d31;
    background: linear-gradient(160deg, #b4a92f, #857a1c);
}

.king-mini-card.is-four {
    border-color: #8b3b93;
    background: linear-gradient(160deg, #9f3faf, #71267d);
}

.king-mini-card.is-five {
    border-color: #365f97;
    background: linear-gradient(160deg, #2b5ea7, #21407e);
}

.king-mini-card.is-king {
    border-color: #9d2f2b;
    background: linear-gradient(160deg, #b3211f, #7f1a18);
}

.king-mini-value {
    display: block;
    font-size: 2rem;
    line-height: 1;
    text-align: center;
}

.king-mini-count {
    position: absolute;
    top: 4px;
    right: 6px;
    border-radius: 999px;
    background: rgba(30, 30, 30, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.24);
    font-size: 0.78rem;
    line-height: 1;
    color: #f0d7a2;
    padding: 0.12rem 0.35rem;
}

.king-helper-status {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 0.5rem;
    padding: 0.75rem 1rem 0.6rem;
    border-bottom: 1px solid rgba(159, 120, 74, 0.5);
}

.king-status-pill {
    border: 1px solid rgba(152, 112, 66, 0.78);
    border-radius: 8px;
    background: rgba(26, 18, 12, 0.72);
    color: #f4e0be;
    font-size: 0.88rem;
    font-weight: 700;
    padding: 0.3rem 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.king-status-pill strong {
    color: #fff5de;
}

.king-status-pill.is-wide {
    grid-column: span 2;
}

.king-helper-board {
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.66rem;
}

.king-cell {
    position: relative;
    min-height: 68px;
    border: 1px solid #8a765f;
    border-radius: 3px;
    background:
        radial-gradient(circle at 50% 45%, rgba(130, 130, 130, 0.42), rgba(45, 45, 45, 0.95) 70%),
        linear-gradient(180deg, #454545, #2b2b2b);
    color: #fff9f2;
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    text-shadow:
        -1px -1px 0 rgba(0, 0, 0, 0.4),
        1px 1px 0 rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.king-cell::before,
.king-cell::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    border: 1px solid rgba(220, 220, 220, 0.55);
    pointer-events: none;
}

.king-cell::before {
    top: 5px;
    left: 5px;
    border-right: 0;
    border-bottom: 0;
}

.king-cell::after {
    right: 5px;
    bottom: 5px;
    border-left: 0;
    border-top: 0;
}

.king-cell:hover {
    transform: translateY(-1px);
}

.king-cell.is-selected {
    box-shadow: 0 0 0 2px rgba(255, 204, 122, 0.72);
}

.king-cell.is-closed {
    color: transparent;
    font-size: 0;
}

.king-cell.is-best-move {
    box-shadow:
        0 0 0 2px rgba(255, 224, 142, 0.8),
        inset 0 0 0 1px rgba(255, 242, 192, 0.3);
    animation: helperBestMovePulse 1.4s ease-in-out infinite;
}

.king-cell.is-five-zone {
    border-color: #4b78c8;
    background:
        radial-gradient(circle at 50% 45%, rgba(88, 136, 226, 0.35), rgba(37, 71, 133, 0.92) 72%),
        linear-gradient(180deg, #2e5ba5, #24417c);
}

.king-cell.is-five-zone-flash {
    animation: helperFlashZone 1.2s ease;
}

.king-cell.is-card-1 {
    border-color: #5a9a42;
    background:
        radial-gradient(circle at 50% 45%, rgba(149, 215, 116, 0.5), rgba(64, 114, 43, 0.95) 70%),
        linear-gradient(180deg, #5ca741, #3f712d);
}

.king-cell.is-card-2 {
    border-color: #a9773d;
    background:
        radial-gradient(circle at 50% 45%, rgba(227, 169, 101, 0.5), rgba(132, 81, 35, 0.95) 70%),
        linear-gradient(180deg, #b67d3d, #7f4f24);
}

.king-cell.is-card-3 {
    border-color: #b0a834;
    background:
        radial-gradient(circle at 50% 45%, rgba(230, 223, 109, 0.5), rgba(134, 124, 25, 0.95) 70%),
        linear-gradient(180deg, #bab137, #837a1f);
}

.king-cell.is-card-4 {
    border-color: #9945a0;
    background:
        radial-gradient(circle at 50% 45%, rgba(216, 121, 227, 0.5), rgba(110, 38, 118, 0.95) 70%),
        linear-gradient(180deg, #ac4fbb, #762e82);
}

.king-cell.is-card-5 {
    border-color: #3f67a5;
    background:
        radial-gradient(circle at 50% 45%, rgba(115, 166, 233, 0.45), rgba(37, 70, 122, 0.95) 70%),
        linear-gradient(180deg, #3268b4, #264886);
}

.king-cell.is-card-k {
    border-color: #b9403d;
    background:
        radial-gradient(circle at 50% 45%, rgba(227, 122, 118, 0.45), rgba(126, 32, 30, 0.95) 70%),
        linear-gradient(180deg, #b92421, #851f1c);
}

.king-cell.is-highlight-five {
    box-shadow:
        0 0 0 2px rgba(120, 184, 255, 0.86),
        inset 0 0 0 1px rgba(188, 226, 255, 0.45);
    animation: helperFlashFive 1.3s ease;
}

.king-cell.is-highlight-safe {
    animation: helperFlashSafe 1.3s ease;
}

.king-helper-rules-box {
    border-top: 1px solid rgba(159, 120, 74, 0.5);
    padding: 0.75rem 1rem 1rem;
    background: rgba(34, 24, 15, 0.75);
}

.king-helper-rules-box ul {
    margin: 0;
    padding-left: 1rem;
    display: grid;
    gap: 0.35rem;
    color: #f5e1be;
    font-size: 0.9rem;
}

@keyframes helperFlashFive {
    0% { box-shadow: 0 0 0 rgba(194, 56, 53, 0); }
    50% { box-shadow: 0 0 0 2px rgba(194, 56, 53, 0.78); }
    100% { box-shadow: 0 0 0 rgba(194, 56, 53, 0); }
}

@keyframes helperFlashSafe {
    0% { box-shadow: 0 0 0 rgba(83, 157, 72, 0); }
    50% { box-shadow: 0 0 0 2px rgba(83, 157, 72, 0.78); }
    100% { box-shadow: 0 0 0 rgba(83, 157, 72, 0); }
}

@keyframes helperFlashZone {
    0% { box-shadow: 0 0 0 rgba(75, 120, 200, 0); }
    50% { box-shadow: 0 0 0 2px rgba(75, 120, 200, 0.84); }
    100% { box-shadow: 0 0 0 rgba(75, 120, 200, 0); }
}

@keyframes helperBestMovePulse {
    0% {
        box-shadow:
            0 0 0 2px rgba(255, 224, 142, 0.8),
            inset 0 0 0 1px rgba(255, 242, 192, 0.3);
    }
    50% {
        box-shadow:
            0 0 0 3px rgba(255, 224, 142, 1),
            inset 0 0 0 1px rgba(255, 248, 213, 0.45);
    }
    100% {
        box-shadow:
            0 0 0 2px rgba(255, 224, 142, 0.8),
            inset 0 0 0 1px rgba(255, 242, 192, 0.3);
    }
}

@media (max-width: 1120px) {
    .king-helper-status {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .king-helper-palette {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
}

@media (max-width: 760px) {
    .king-helper-head {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .king-helper-head-spacer {
        display: none;
    }

    .king-rules-btn {
        justify-self: center;
    }

    .king-helper-actions {
        gap: 0.4rem;
    }

    .king-helper-status {
        grid-template-columns: 1fr;
    }

    .king-status-pill.is-wide {
        grid-column: span 1;
    }

    .king-action-btn {
        min-width: 88px;
        font-size: 0.92rem;
        padding: 0.45rem 0.7rem;
    }

    .king-helper-palette {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .king-mini-value {
        font-size: 1.7rem;
    }

    .king-helper-board {
        gap: 0.5rem;
        padding: 0.75rem;
    }

    .king-cell {
        min-height: 52px;
        font-size: 2.1rem;
    }
}

/* okey helper */
.okey-helper-frame {
    border: 2px solid #7a5938;
    border-radius: 20px;
    background:
        radial-gradient(920px 320px at 50% -10%, rgba(143, 104, 64, 0.28), transparent 64%),
        linear-gradient(180deg, rgba(67, 47, 30, 0.95), rgba(58, 40, 26, 0.96));
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.okey-helper-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid rgba(159, 120, 74, 0.5);
}

.okey-helper-head h2 {
    margin: 0;
    color: #ffe7bd;
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(1.7rem, 2.8vw, 2.4rem);
    letter-spacing: 0.8px;
}

.okey-helper-head-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.okey-helper-btn {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    padding: 0.45rem 1rem;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    color: #ffe9c4;
    background: linear-gradient(180deg, rgba(126, 43, 36, 0.92), rgba(95, 30, 27, 0.96));
}

.okey-helper-btn.is-green {
    background: linear-gradient(180deg, rgba(79, 144, 56, 0.94), rgba(54, 103, 41, 0.97));
    color: #d8f5be;
}

.okey-helper-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 0.72rem;
    padding: 1rem;
}

.okey-card {
    position: relative;
    min-height: 84px;
    border-radius: 10px;
    border: 1px solid rgba(222, 185, 130, 0.55);
    color: #f3f9ff;
    font-weight: 800;
    font-size: 2.3rem;
    line-height: 1;
    text-shadow:
        -1px -1px 0 rgba(0, 0, 0, 0.45),
        1px 1px 0 rgba(0, 0, 0, 0.45);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.14),
        0 8px 16px rgba(0, 0, 0, 0.24);
    cursor: pointer;
    transition: transform 0.14s ease, filter 0.14s ease, box-shadow 0.14s ease;
}

.okey-card::before,
.okey-card::after {
    content: '';
    position: absolute;
    width: 13px;
    height: 13px;
    border: 1px solid rgba(219, 224, 230, 0.6);
    pointer-events: none;
}

.okey-card::before {
    top: 6px;
    left: 6px;
    border-right: 0;
    border-bottom: 0;
}

.okey-card::after {
    right: 6px;
    bottom: 6px;
    border-left: 0;
    border-top: 0;
}

.okey-card:hover {
    transform: translateY(-1px);
}

.okey-card-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.okey-card.is-red {
    background:
        radial-gradient(circle at 50% 45%, rgba(255, 63, 63, 0.64), rgba(139, 16, 18, 0.96) 72%),
        linear-gradient(180deg, #d42829, #81171a);
}

.okey-card.is-yellow {
    background:
        radial-gradient(circle at 50% 45%, rgba(255, 236, 92, 0.74), rgba(146, 134, 18, 0.96) 72%),
        linear-gradient(180deg, #d2c22b, #85791d);
    color: #06203d;
    text-shadow:
        -1px -1px 0 rgba(255, 245, 189, 0.38),
        1px 1px 0 rgba(15, 30, 60, 0.28);
}

.okey-card.is-blue {
    background:
        radial-gradient(circle at 50% 45%, rgba(62, 173, 255, 0.66), rgba(12, 73, 126, 0.96) 72%),
        linear-gradient(180deg, #227fc5, #145d9c);
}

.okey-card.is-muted {
    border-color: rgba(173, 175, 180, 0.62);
    background:
        radial-gradient(circle at 50% 45%, rgba(165, 169, 176, 0.48), rgba(86, 89, 95, 0.94) 72%),
        linear-gradient(180deg, #858993, #5f636b);
    color: #edf1f6;
    filter: saturate(0.35);
}

.okey-helper-rules {
    border-top: 1px solid rgba(159, 120, 74, 0.5);
    padding: 0.75rem 1rem 1rem;
    background: rgba(34, 24, 15, 0.75);
}

.okey-helper-rules ul {
    margin: 0;
    padding-left: 1rem;
    display: grid;
    gap: 0.35rem;
    color: #f5e1be;
    font-size: 0.9rem;
}

@media (max-width: 1120px) {
    .okey-helper-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .okey-helper-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .okey-helper-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.55rem;
        padding: 0.78rem;
    }

    .okey-card {
        min-height: 68px;
        font-size: 1.9rem;
    }
}

/* okey article seo */
.okey-article {
    margin-top: 0.9rem;
    border: 1px solid #3f3327;
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(26, 20, 16, 0.94), rgba(20, 16, 13, 0.95)),
        radial-gradient(700px 280px at 10% -10%, rgba(174, 126, 63, 0.16), transparent 64%);
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.27),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.okey-article .section-head {
    margin: 0;
    border-bottom: 1px solid rgba(148, 109, 67, 0.42);
    border-radius: 0;
}

.okey-article-intro {
    margin: 0;
    padding: 0.95rem 1rem 0.3rem;
    color: #ead8bc;
    line-height: 1.6;
}

.okey-article-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.7rem;
    padding: 0.7rem 1rem;
}

.okey-article-figure {
    margin: 0;
    border: 1px solid #4d3c2b;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(23, 18, 14, 0.88);
}

.okey-article-figure img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.okey-article-figure figcaption {
    padding: 0.55rem 0.65rem 0.65rem;
    font-size: 0.84rem;
    color: #cfb891;
}

.okey-article-body {
    padding: 0.25rem 1rem 0.5rem;
    display: grid;
    gap: 0.45rem;
}

.okey-article-body section {
    border: 1px solid rgba(102, 77, 49, 0.52);
    border-radius: 10px;
    padding: 0.7rem 0.8rem;
    background: rgba(32, 24, 18, 0.72);
}

.okey-article-body h3,
.okey-keyword-cloud h3,
.okey-faq h3 {
    margin: 0 0 0.4rem;
    color: #ffe2b1;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.05rem;
}

.okey-article-body p {
    margin: 0;
    color: #e2cfb2;
    line-height: 1.58;
}

.okey-article-body ul {
    margin: 0;
    padding-left: 1rem;
    color: #e2cfb2;
    display: grid;
    gap: 0.24rem;
}

.okey-keyword-cloud,
.okey-faq {
    margin: 0.15rem 1rem 0.9rem;
    border: 1px solid rgba(102, 77, 49, 0.52);
    border-radius: 10px;
    padding: 0.7rem 0.8rem;
    background: rgba(32, 24, 18, 0.72);
}

.okey-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.okey-keywords span {
    border: 1px solid #7e5f3e;
    border-radius: 999px;
    padding: 0.28rem 0.62rem;
    font-size: 0.82rem;
    color: #f0dbbb;
    background: linear-gradient(180deg, rgba(85, 63, 40, 0.7), rgba(63, 46, 30, 0.7));
}

.okey-faq details {
    border-top: 1px dashed rgba(150, 116, 76, 0.42);
    padding-top: 0.55rem;
    margin-top: 0.55rem;
}

.okey-faq details:first-of-type {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
}

.okey-faq summary {
    cursor: pointer;
    color: #ffe3b8;
    font-weight: 700;
}

.okey-faq p {
    margin: 0.4rem 0 0;
    color: #d8c4a5;
    line-height: 1.52;
}

@media (max-width: 1120px) {
    .okey-article-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .okey-article-intro,
    .okey-article-body,
    .okey-article-gallery,
    .okey-keyword-cloud,
    .okey-faq {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .okey-article-gallery {
        grid-template-columns: 1fr;
    }
}

/* king article seo */
.king-article {
    margin-top: 0.9rem;
    border: 1px solid #2d3f58;
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(14, 19, 29, 0.94), rgba(12, 17, 25, 0.95)),
        radial-gradient(760px 280px at 10% -10%, rgba(76, 132, 206, 0.18), transparent 64%);
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.27),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.king-article .section-head {
    margin: 0;
    border-bottom: 1px solid rgba(87, 130, 185, 0.4);
    border-radius: 0;
}

.king-article-intro {
    margin: 0;
    padding: 0.95rem 1rem 0.3rem;
    color: #d6e3f6;
    line-height: 1.6;
}

.king-article-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.7rem;
    padding: 0.7rem 1rem;
}

.king-article-figure {
    margin: 0;
    border: 1px solid #2f4564;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(15, 23, 35, 0.88);
}

.king-article-figure img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.king-article-figure figcaption {
    padding: 0.55rem 0.65rem 0.65rem;
    font-size: 0.84rem;
    color: #b8cceb;
}

.king-article-body {
    padding: 0.25rem 1rem 0.5rem;
    display: grid;
    gap: 0.45rem;
}

.king-article-body section {
    border: 1px solid rgba(70, 100, 140, 0.56);
    border-radius: 10px;
    padding: 0.7rem 0.8rem;
    background: rgba(16, 25, 39, 0.72);
}

.king-article-body h3,
.king-keyword-cloud h3,
.king-faq h3 {
    margin: 0 0 0.4rem;
    color: #ddecff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.05rem;
}

.king-article-body p {
    margin: 0;
    color: #ceddf0;
    line-height: 1.58;
}

.king-article-body ul {
    margin: 0;
    padding-left: 1rem;
    color: #ceddf0;
    display: grid;
    gap: 0.24rem;
}

.king-keyword-cloud,
.king-faq {
    margin: 0.15rem 1rem 0.9rem;
    border: 1px solid rgba(70, 100, 140, 0.56);
    border-radius: 10px;
    padding: 0.7rem 0.8rem;
    background: rgba(16, 25, 39, 0.72);
}

.king-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.king-keywords span {
    border: 1px solid #4b6b96;
    border-radius: 999px;
    padding: 0.28rem 0.62rem;
    font-size: 0.82rem;
    color: #d9eaff;
    background: linear-gradient(180deg, rgba(46, 71, 110, 0.7), rgba(34, 53, 83, 0.7));
}

.king-faq details {
    border-top: 1px dashed rgba(100, 137, 184, 0.46);
    padding-top: 0.55rem;
    margin-top: 0.55rem;
}

.king-faq details:first-of-type {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
}

.king-faq summary {
    cursor: pointer;
    color: #e2efff;
    font-weight: 700;
}

.king-faq p {
    margin: 0.4rem 0 0;
    color: #c6d8ef;
    line-height: 1.52;
}

@media (max-width: 1120px) {
    .king-article-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .king-article-intro,
    .king-article-body,
    .king-article-gallery,
    .king-keyword-cloud,
    .king-faq {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .king-article-gallery {
        grid-template-columns: 1fr;
    }
}

/* guild logo tool */
.guild-logo-frame {
    border: 2px solid #6b5e47;
    border-radius: 20px;
    background:
        radial-gradient(840px 320px at 50% -10%, rgba(121, 103, 73, 0.26), transparent 64%),
        linear-gradient(180deg, rgba(44, 38, 31, 0.96), rgba(37, 31, 25, 0.97));
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    overflow: hidden;
}

.guild-logo-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid rgba(138, 117, 83, 0.48);
}

.guild-logo-head h2 {
    margin: 0;
    color: #ffe3b8;
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(1.6rem, 2.8vw, 2.35rem);
}

.guild-logo-head-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.guild-logo-tools {
    padding: 0.9rem 1.05rem;
    border-bottom: 1px solid rgba(138, 117, 83, 0.48);
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 0.65rem;
    align-items: center;
}

.guild-logo-upload {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(76, 67, 56, 0.88), rgba(54, 47, 40, 0.95));
    color: #f4e1c2;
    font-weight: 700;
    cursor: pointer;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    padding: 0 0.9rem;
}

.guild-logo-upload input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.guild-logo-control {
    display: grid;
    gap: 0.35rem;
    color: #dbc7a5;
    font-size: 0.84rem;
}

.guild-logo-control input {
    width: 100%;
}

.guild-logo-action-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.guild-logo-btn {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 0.5rem 0.8rem;
    font-weight: 700;
    font-size: 0.86rem;
    cursor: pointer;
    color: #ffe9c4;
    background: linear-gradient(180deg, rgba(124, 41, 36, 0.94), rgba(91, 28, 27, 0.96));
}

.guild-logo-btn.is-blue {
    background: linear-gradient(180deg, rgba(56, 108, 178, 0.94), rgba(36, 75, 131, 0.97));
}

.guild-logo-btn.is-green {
    background: linear-gradient(180deg, rgba(78, 143, 55, 0.94), rgba(52, 102, 40, 0.97));
}

.guild-logo-status {
    margin: 0.8rem 1rem 0;
    border: 1px solid rgba(122, 105, 80, 0.55);
    border-radius: 10px;
    background: rgba(25, 22, 18, 0.75);
    color: #e7d4b4;
    padding: 0.55rem 0.7rem;
    font-size: 0.86rem;
}

.guild-logo-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    padding: 0.85rem 1rem 1rem;
}

.guild-logo-preview-card {
    margin: 0;
    border: 1px solid #4a3f31;
    border-radius: 12px;
    background: rgba(22, 19, 15, 0.88);
    padding: 0.6rem;
}

.guild-logo-preview-card figcaption {
    color: #e4cfac;
    margin-bottom: 0.5rem;
    font-size: 0.84rem;
}

.guild-logo-preview-card canvas {
    width: 100%;
    height: auto;
    image-rendering: pixelated;
    border: 1px solid rgba(109, 94, 72, 0.7);
    border-radius: 8px;
    background: #151515;
}

/* guild logo seo article */
.guild-logo-article {
    margin-top: 0.9rem;
    border: 1px solid #4a3a2b;
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(28, 22, 17, 0.94), rgba(22, 18, 14, 0.95)),
        radial-gradient(780px 280px at 10% -10%, rgba(177, 132, 76, 0.18), transparent 64%);
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.27),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.guild-logo-article .section-head {
    margin: 0;
    border-bottom: 1px solid rgba(148, 109, 67, 0.42);
    border-radius: 0;
}

.guild-logo-article-intro {
    margin: 0;
    padding: 0.95rem 1rem 0.3rem;
    color: #ead8bc;
    line-height: 1.6;
}

.guild-logo-article-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.7rem;
    padding: 0.7rem 1rem;
}

.guild-logo-article-figure {
    margin: 0;
    border: 1px solid #4d3c2b;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(23, 18, 14, 0.88);
}

.guild-logo-article-figure img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.guild-logo-article-figure figcaption {
    padding: 0.55rem 0.65rem 0.65rem;
    font-size: 0.84rem;
    color: #cfb891;
}

.guild-logo-article-body {
    padding: 0.25rem 1rem 0.5rem;
    display: grid;
    gap: 0.45rem;
}

.guild-logo-article-body section {
    border: 1px solid rgba(102, 77, 49, 0.52);
    border-radius: 10px;
    padding: 0.7rem 0.8rem;
    background: rgba(32, 24, 18, 0.72);
}

.guild-logo-article-body h3,
.guild-logo-keyword-cloud h3,
.guild-logo-faq h3 {
    margin: 0 0 0.4rem;
    color: #ffe2b1;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.05rem;
}

.guild-logo-article-body p {
    margin: 0;
    color: #e2cfb2;
    line-height: 1.58;
}

.guild-logo-article-body ul {
    margin: 0;
    padding-left: 1rem;
    color: #e2cfb2;
    display: grid;
    gap: 0.24rem;
}

.guild-logo-keyword-cloud,
.guild-logo-faq {
    margin: 0.15rem 1rem 0.9rem;
    border: 1px solid rgba(102, 77, 49, 0.52);
    border-radius: 10px;
    padding: 0.7rem 0.8rem;
    background: rgba(32, 24, 18, 0.72);
}

.guild-logo-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.guild-logo-keywords span {
    border: 1px solid #7e5f3e;
    border-radius: 999px;
    padding: 0.28rem 0.62rem;
    font-size: 0.82rem;
    color: #f0dbbb;
    background: linear-gradient(180deg, rgba(85, 63, 40, 0.7), rgba(63, 46, 30, 0.7));
}

.guild-logo-faq details {
    border-top: 1px dashed rgba(150, 116, 76, 0.42);
    padding-top: 0.55rem;
    margin-top: 0.55rem;
}

.guild-logo-faq details:first-of-type {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
}

.guild-logo-faq summary {
    cursor: pointer;
    color: #ffe3b8;
    font-weight: 700;
}

.guild-logo-faq p {
    margin: 0.4rem 0 0;
    color: #d8c4a5;
    line-height: 1.52;
}

@media (max-width: 1120px) {
    .guild-logo-tools {
        grid-template-columns: 1fr;
    }

    .guild-logo-action-row {
        justify-content: flex-start;
    }

    .guild-logo-preview-grid,
    .guild-logo-article-gallery {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .guild-logo-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .guild-logo-status,
    .guild-logo-tools,
    .guild-logo-preview-grid,
    .guild-logo-article-intro,
    .guild-logo-article-gallery,
    .guild-logo-article-body,
    .guild-logo-keyword-cloud,
    .guild-logo-faq {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

/* server panel */
.server-panel-form {
    border: 2px solid #6a4f32;
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(35, 29, 24, 0.96), rgba(28, 24, 20, 0.97)),
        radial-gradient(800px 320px at 50% -10%, rgba(145, 106, 58, 0.2), transparent 64%);
    padding: 0.95rem;
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.server-panel-save-top,
.server-panel-save-bottom {
    width: 100%;
    border: 1px solid #8c7a60;
    border-radius: 14px;
    min-height: 50px;
    color: #f4f4f4;
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    background: linear-gradient(180deg, rgba(126, 128, 131, 0.9), rgba(104, 106, 109, 0.95));
}

.server-panel-save-top {
    margin-bottom: 0.85rem;
}

.server-panel-save-bottom {
    margin-top: 0.7rem;
}

.sp-accordion {
    border: 1px solid #6b5c49;
    border-radius: 0;
    background: rgba(46, 37, 34, 0.9);
    margin-bottom: 0.62rem;
    overflow: hidden;
}

.sp-accordion-head {
    width: 100%;
    border: 0;
    display: flex;
    align-items: center;
    gap: 0.46rem;
    background: rgba(56, 43, 41, 0.95);
    color: #d8dce1;
    font-size: clamp(1.25rem, 2vw, 2rem);
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    padding: 0.78rem 0.76rem;
    cursor: pointer;
    text-align: left;
}

.sp-arrow {
    color: #c6d0dc;
    width: 20px;
    display: inline-flex;
    justify-content: center;
}

.sp-accordion-body {
    padding: 0.82rem 0.72rem;
    border-top: 1px solid rgba(135, 121, 100, 0.42);
    background: rgba(52, 56, 63, 0.72);
    color: #f2d37b;
    display: grid;
    gap: 0.72rem;
}

.sp-grid-two,
.sp-grid-three {
    display: grid;
    gap: 0.68rem;
}

.sp-grid-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sp-grid-three {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.sp-accordion-body label {
    display: grid;
    gap: 0.32rem;
    color: #f0cc76;
    font-weight: 700;
}

.sp-grow {
    grid-column: span 1;
}

.sp-accordion-body input,
.sp-accordion-body select,
.sp-accordion-body textarea {
    border: 1px solid #988461;
    border-radius: 12px;
    background: #8a7344;
    color: #f8e7c0;
    padding: 0.63rem 0.7rem;
}

.sp-accordion-body textarea {
    resize: vertical;
}

.field-error {
    color: #ff9e9e;
    font-weight: 600;
}

.sp-check-stack {
    display: grid;
    gap: 0.3rem;
    align-content: start;
}

.sp-check-line {
    display: inline-flex !important;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    color: #f2cc74;
}

.sp-check-line input {
    accent-color: #699947;
}

.sp-note {
    margin: 0;
    color: #f1cf79;
    line-height: 1.45;
}

.sp-lang-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.sp-lang-item {
    display: inline-flex !important;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid #8f7c5f;
    border-radius: 8px;
    padding: 0.24rem 0.48rem;
    background: rgba(52, 52, 52, 0.72);
    color: #e4e8eb;
    font-size: 0.95rem;
}

.sp-rule-box {
    border: 1px solid #836a4a;
    border-radius: 10px;
    padding: 0.6rem 0.72rem;
    background: rgba(32, 29, 24, 0.65);
}

.sp-rule-box h4 {
    margin: 0 0 0.35rem;
    color: #f6d280;
}

.sp-rule-box ul {
    margin: 0;
    padding-left: 1rem;
    color: #cfd6de;
    line-height: 1.4;
}

.sp-upload-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border: 1px solid #4d9348;
    border-radius: 9px;
    background: #3f853c;
    color: #dff2d2;
    font-weight: 700;
    min-height: 44px;
    width: 120px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.sp-upload-btn input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.sp-banner-preview {
    border: 1px solid #5e564c;
    border-radius: 10px;
    padding: 0.5rem;
    background: rgba(24, 23, 22, 0.7);
}

.sp-banner-preview p {
    margin: 0 0 0.4rem;
    color: #d9c6a7;
}

.sp-banner-media {
    min-height: 120px;
    display: grid;
    place-items: center;
    border: 1px dashed #7c6f5f;
    border-radius: 8px;
    color: #cfc6bb;
}

.sp-banner-media img,
.sp-banner-media video {
    width: min(468px, 100%);
    border-radius: 6px;
}

.sp-vote4buff-box {
    border: 1px solid #78674e;
    border-radius: 12px;
    background: rgba(24, 23, 21, 0.78);
    padding: 0.7rem;
}

.sp-vote4buff-box h4 {
    margin: 0 0 0.4rem;
    color: #f5dec0;
    font-size: 1.45rem;
    font-family: 'Rajdhani', sans-serif;
}

.sp-vote4buff-box ul {
    margin: 0;
    padding-left: 1rem;
    color: #d0d7df;
    line-height: 1.5;
}

.sp-vote4buff-actions {
    margin-top: 0.65rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.sp-vote4buff-gallery {
    margin-top: 0.7rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.sp-vote4buff-gallery img {
    width: 100%;
    border-radius: 8px;
    border: 1px solid #6e665a;
}

.sp-blue-btn {
    border: 1px solid #4d84c4;
    border-radius: 999px;
    min-height: 34px;
    padding: 0.35rem 0.85rem;
    text-decoration: none;
    color: #dceeff;
    background: linear-gradient(180deg, #3d79ba, #2a5f9a);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.sp-code-box {
    border: 1px solid #7e6e58;
    border-radius: 10px;
    padding: 0.5rem;
    background: rgba(35, 34, 30, 0.72);
}

.sp-code-box strong {
    color: #f0ca76;
    display: block;
    margin-bottom: 0.4rem;
}

.sp-code-box textarea {
    width: 100%;
    min-height: 76px;
    border-radius: 8px;
    font-family: Consolas, 'Courier New', monospace;
    font-size: 0.84rem;
    background: rgba(16, 17, 21, 0.8);
    color: #d7dee8;
}

.sp-copy-btn {
    margin-top: 0.4rem;
    border: 1px solid #bf8f57;
    border-radius: 999px;
    min-height: 30px;
    padding: 0.2rem 0.7rem;
    background: #ab7a43;
    color: #fff3dc;
    cursor: pointer;
}

.sp-markdown-preview {
    border: 1px solid #638fc0;
    border-radius: 10px;
    background: rgba(30, 58, 92, 0.35);
    color: #d9e9fb;
    padding: 0.6rem 0.7rem;
}

@media (max-width: 1120px) {
    .sp-grid-two,
    .sp-grid-three,
    .sp-vote4buff-gallery {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .sp-accordion-head {
        font-size: 1.08rem;
    }

    .sp-accordion-body {
        padding: 0.65rem 0.55rem;
    }
}

.sp-user-submissions {
    border: 1px solid #6b5c49;
    border-radius: 14px;
    background: rgba(27, 24, 21, 0.82);
    margin-bottom: 0.85rem;
    overflow: hidden;
}

.sp-user-submissions .section-head {
    margin: 0;
    border: 0;
    border-bottom: 1px solid rgba(107, 92, 73, 0.55);
    border-radius: 0;
    background: rgba(39, 33, 28, 0.9);
}

.sp-user-submissions .section-head span {
    color: #eac981;
    font-weight: 700;
}

.sp-user-submission-list {
    display: grid;
    gap: 0.45rem;
    padding: 0.7rem;
}

.sp-user-submission-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border: 1px solid #64533e;
    border-radius: 10px;
    background: rgba(47, 39, 32, 0.85);
    padding: 0.55rem 0.6rem;
}

.sp-user-submission-item strong {
    display: block;
    color: #ffe0a4;
    font-size: 1.04rem;
}

.sp-user-submission-item small {
    color: #d4c7b2;
    font-size: 0.86rem;
}

.sp-api-info-box {
    margin-top: 0.75rem;
}

.sp-api-info-box code {
    color: #ffe7b8;
}

@media (max-width: 760px) {
    .sp-user-submission-item {
        flex-direction: column;
        align-items: flex-start;
    }
}



/* blog v2 layout */
.blog-v2-page {
    margin-top: 0.7rem;
    margin-bottom: 1rem;
}

.blog-v2-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid #5f4a2f;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(32, 26, 21, 0.94), rgba(24, 20, 17, 0.96));
    padding: 0.75rem 0.85rem;
    margin-bottom: 0.75rem;
    color: #e7c98f;
    font-weight: 600;
}

.blog-v2-breadcrumb a {
    color: #f5d79b;
}

.blog-v2-breadcrumb strong {
    color: #ffeac4;
    font-weight: 700;
}

.blog-v2-grid {
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    gap: 0.95rem;
}

.blog-v2-main,
.blog-v2-aside {
    min-width: 0;
}

.blog-v2-toolbar {
    border: 1px solid #6a5333;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(109, 84, 51, 0.8), rgba(86, 65, 39, 0.84));
    padding: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    margin-bottom: 0.75rem;
}

.blog-v2-toolbar h1 {
    margin: 0;
    font-size: 1.7rem;
    color: #fff0d1;
}

.blog-v2-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.blog-v2-search input {
    width: 210px;
    border: 1px solid #937448;
    border-radius: 12px;
    background: rgba(173, 136, 73, 0.34);
    color: #fff0ce;
    padding: 0.48rem 0.7rem;
    font-weight: 600;
}

.blog-v2-search input::placeholder {
    color: #f2d7ac;
}

.blog-v2-search button {
    border: 1px solid #4b5e77;
    border-radius: 8px;
    background: linear-gradient(180deg, #2f4863, #1e2f43);
    color: #fff;
    padding: 0.42rem 0.85rem;
    font-weight: 700;
    cursor: pointer;
}

.blog-v2-filters {
    border: 1px solid rgba(112, 88, 56, 0.64);
    border-radius: 12px;
    background: rgba(35, 28, 23, 0.9);
    padding: 0.55rem 0.75rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 0.75rem;
    color: #eedfbe;
}

.blog-v2-filters strong {
    border: 1px solid rgba(138, 109, 73, 0.82);
    border-radius: 999px;
    padding: 0.08rem 0.52rem;
    color: #ffe4b6;
    background: rgba(85, 64, 37, 0.5);
}

.blog-v2-filters a {
    margin-left: auto;
    color: #ffd595;
    font-weight: 700;
}

.blog-v2-list {
    display: grid;
    gap: 0.9rem;
}

.blog-v2-card {
    border: 1px solid #6a5333;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(162, 132, 84, 0.85), rgba(104, 79, 47, 0.84));
    padding: 0.8rem;
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 0.95rem;
    box-shadow: inset 0 1px 0 rgba(255, 231, 189, 0.12);
}

.blog-v2-rank {
    border: 1px solid rgba(226, 201, 154, 0.38);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(164, 139, 97, 0.52), rgba(95, 78, 53, 0.5));
    min-height: 120px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 0.15rem;
    text-align: center;
}

.blog-v2-rank span {
    color: #f3dec0;
    letter-spacing: 1px;
    font-size: 0.86rem;
    font-weight: 600;
}

.blog-v2-rank strong {
    color: #fff4dc;
    font-size: 2rem;
    line-height: 1;
}

.blog-v2-card-body {
    display: grid;
    gap: 0.62rem;
    min-width: 0;
}

.blog-v2-card-body h2 {
    margin: 0;
    font-size: 2rem;
    line-height: 1.12;
    color: #fff1d1;
}

.blog-v2-card-body h2 a {
    color: inherit;
}

.blog-v2-card-body p {
    margin: 0;
    color: #f5e8cc;
    font-size: 1.28rem;
    line-height: 1.34;
    border-bottom: 1px solid rgba(232, 208, 167, 0.34);
    padding-bottom: 0.7rem;
}

.blog-v2-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem;
    color: #f7e8cd;
    font-size: 1.08rem;
}

.blog-v2-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
}

.blog-v2-meta i {
    color: #f3d093;
    font-size: 0.9rem;
}

.blog-v2-read-btn {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    border: 1px solid rgba(228, 202, 159, 0.52);
    border-radius: 999px;
    background: rgba(161, 132, 87, 0.52);
    color: #fff0d4;
    font-weight: 700;
    padding: 0.36rem 0.88rem;
}

.blog-v2-read-btn:hover {
    background: rgba(182, 149, 95, 0.66);
}

.blog-v2-pagination-wrap {
    margin-top: 0.82rem;
    border: 1px solid rgba(101, 79, 52, 0.72);
    border-radius: 0 0 14px 14px;
    background: linear-gradient(180deg, rgba(48, 39, 31, 0.66), rgba(37, 30, 25, 0.8));
    padding: 0.65rem;
}

.blog-v2-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.45rem;
}

.blog-v2-page-arrow,
.blog-v2-page-item {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    border: 1px solid #6f5735;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(72, 57, 40, 0.6);
    color: #fbe8c7;
    font-weight: 700;
}

.blog-v2-page-arrow:hover,
.blog-v2-page-item:hover {
    border-color: #c6964a;
    color: #fff7e7;
}

.blog-v2-page-item.is-active {
    background: linear-gradient(180deg, #c89b56, #a77834);
    border-color: #cf9e53;
    color: #251603;
}

.blog-v2-page-arrow.is-disabled {
    opacity: 0.45;
}

.blog-v2-page-gap {
    color: #d9c095;
    padding: 0 0.3rem;
}

.blog-side-widget {
    border-color: #725633;
    background: linear-gradient(180deg, rgba(38, 30, 24, 0.94), rgba(29, 24, 20, 0.94));
}

.blog-side-server-search {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.blog-side-server-search input {
    width: 100%;
    border: 1px solid #8a6a3d;
    border-radius: 8px;
    background: rgba(106, 82, 53, 0.35);
    color: #ffedca;
    padding: 0.42rem 0.62rem;
}

.blog-side-server-search input::placeholder {
    color: #ddc39a;
}

.blog-side-server-search button {
    border: 1px solid #51637a;
    border-radius: 8px;
    background: linear-gradient(180deg, #36506f, #22354b);
    color: #fff;
    font-weight: 700;
    padding: 0.4rem 0.72rem;
    cursor: pointer;
}

.blog-side-featured {
    border: 1px solid rgba(223, 193, 143, 0.26);
    border-radius: 12px;
    background: rgba(78, 57, 35, 0.25);
    padding: 0.7rem;
    display: grid;
    gap: 0.7rem;
}

.blog-side-featured ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.45rem;
}

.blog-side-featured li {
    color: #f7e6c6;
    font-size: 1rem;
}

.blog-side-featured li span {
    color: #dcc49c;
    font-weight: 600;
    margin-right: 0.3rem;
}

.blog-side-featured .solid-btn {
    text-align: center;
    width: 100%;
}

.blog-side-empty {
    margin: 0;
    color: #e8d9be;
}

.blog-side-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.48rem;
}

.blog-side-list li {
    border: 1px solid rgba(111, 89, 57, 0.66);
    border-radius: 8px;
    background: rgba(82, 64, 42, 0.32);
}

.blog-side-list li a,
.blog-side-list li span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
    padding: 0.55rem 0.62rem;
    color: #f4dfb7;
    font-weight: 600;
}

.blog-side-list li a strong {
    color: #ffe9c0;
    font-weight: 700;
}

.blog-side-list li.is-active {
    border-color: #c89a4e;
    background: rgba(134, 103, 62, 0.46);
}

.blog-side-list-titles li a {
    justify-content: flex-start;
}

@media (max-width: 1180px) {
    .blog-v2-card-body h2 {
        font-size: 1.75rem;
    }

    .blog-v2-card-body p {
        font-size: 1.14rem;
    }
}

@media (max-width: 980px) {
    .blog-v2-grid {
        grid-template-columns: 1fr;
    }

    .blog-v2-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .blog-v2-search input {
        width: 100%;
    }

    .blog-v2-search {
        width: 100%;
    }

    .blog-v2-card {
        grid-template-columns: 1fr;
    }

    .blog-v2-rank {
        min-height: 88px;
        grid-auto-flow: column;
        justify-content: center;
        gap: 0.9rem;
    }

    .blog-v2-rank strong {
        font-size: 1.45rem;
    }

    .blog-v2-card-body h2 {
        font-size: 1.45rem;
    }

    .blog-v2-card-body p,
    .blog-v2-meta {
        font-size: 1rem;
    }

    .blog-v2-read-btn {
        justify-self: start;
    }
}

@media (max-width: 640px) {
    .blog-v2-breadcrumb,
    .blog-v2-toolbar,
    .blog-v2-card,
    .blog-v2-pagination-wrap {
        border-radius: 10px;
    }

    .blog-v2-toolbar h1 {
        font-size: 1.42rem;
    }

    .blog-v2-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.3rem;
    }
}





/* home server card showcase layout */
.server-card.server-card-showcase {
    display: block;
    padding: 0.72rem;
}

.server-card-showcase .server-title-row {
    margin-bottom: 0.6rem;
}

.server-card-showcase .server-title-row h3 {
    margin: 0;
    font-size: 1.55rem;
}

.server-card-showcase .server-showcase-grid {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr) 130px;
    gap: 0.75rem;
    align-items: start;
}

.server-card-showcase .server-showcase-left {
    border: 1px solid #4a3925;
    border-radius: 10px;
    background: rgba(23, 18, 14, 0.82);
    padding: 0.6rem;
    display: grid;
    gap: 0.34rem;
    align-content: start;
}

.server-rank-label {
    color: #c9b28e;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.7px;
}

.server-rank-value {
    color: #f0c66d;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.85rem;
    line-height: 1;
}

.server-card-showcase .server-showcase-left p {
    margin: 0;
    color: #dfd2bf;
    font-size: 0.92rem;
}

.server-card-showcase .server-showcase-left b {
    color: #ffc857;
    font-weight: 700;
}

.server-rating-stars {
    color: #f0efe9;
    font-size: 0.96rem;
    letter-spacing: 2px;
}

.server-card-showcase .server-showcase-left small {
    color: #d6c5ab;
    font-size: 0.82rem;
}

.server-card-showcase .server-showcase-banner {
    position: relative;
    height: 190px;
    border-radius: 10px;
    border: 1px solid #4b3a25;
    overflow: hidden;
    background: #0e0f12;
}

.server-card-showcase .server-showcase-banner .server-thumb-link {
    display: block;
    width: 100%;
    height: 100%;
}

.server-card-showcase .server-showcase-banner .server-thumb-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.server-card-showcase .server-showcase-right {
    display: grid;
    gap: 0.6rem;
    align-content: start;
}

.server-score-chip {
    min-height: 48px;
    border-radius: 10px;
    border: 1px solid #6f5a3c;
    background: linear-gradient(180deg, rgba(66, 52, 34, 0.9), rgba(43, 34, 24, 0.94));
    color: #ffe5b3;
    font-weight: 700;
    font-size: 1.05rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    padding: 0.45rem 0.62rem;
}

.server-score-chip.is-vote {
    background: linear-gradient(180deg, rgba(96, 146, 78, 0.92), rgba(69, 114, 56, 0.96));
    border-color: #7fb16a;
    color: #f3ffe8;
}

.server-score-chip.is-id {
    background: linear-gradient(180deg, rgba(175, 138, 73, 0.92), rgba(140, 108, 55, 0.96));
    border-color: #c9a35b;
    color: #fff4de;
}

.server-showcase-desc {
    margin: 0.66rem 0 0;
    color: #dfd1bb;
    line-height: 1.45;
}

.server-language-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.33rem;
    align-items: center;
}

.server-language-flag {
    width: 24px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #6c5636;
    border-radius: 4px;
    background: rgba(16, 13, 10, 0.82);
    font-size: 0.92rem;
    line-height: 1;
}

.detail-language-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
}

.detail-language-row > span {
    color: #afafaf;
    font-size: 0.86rem;
}

@media (max-width: 1120px) {
    .server-card-showcase .server-showcase-grid {
        grid-template-columns: 1fr;
    }

    .server-card-showcase .server-showcase-right {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        display: grid;
    }
}

@media (max-width: 760px) {
    .server-card-showcase .server-title-row h3 {
        font-size: 1.3rem;
    }

    .server-card-showcase .server-showcase-banner {
        height: 172px;
    }

    .server-card-showcase .server-showcase-right {
        grid-template-columns: 1fr;
    }
}

/* centered title + highlighted icon buttons */
.server-card-showcase .server-title-row {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    text-align: center;
    min-height: 40px;
}

.server-card-showcase .server-title-row h3 {
    width: 100%;
    text-align: center;
}

.server-card-showcase .server-title-row .server-category {
    position: absolute;
    right: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
}

.server-card-showcase .server-actions {
    justify-content: center;
    margin-top: 0.75rem;
    gap: 0.52rem;
}

.server-card-showcase .server-actions .discord-btn,
.server-card-showcase .server-actions .web-btn,
.server-card-showcase .server-actions .vote-btn,
.server-card-showcase .server-actions .fav-btn {
    min-height: 38px;
    padding: 0 0.9rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    font-weight: 800;
    letter-spacing: 0.2px;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.34);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.server-card-showcase .server-actions .discord-btn {
    background: linear-gradient(180deg, #4f78ea, #3759c2);
    color: #f4f7ff;
    border: 1px solid #6d8ef0;
}

.server-card-showcase .server-actions .web-btn {
    background: linear-gradient(180deg, #30353c, #20252d);
    color: #eef5ff;
    border: 1px solid #4a5564;
}

.server-card-showcase .server-actions .vote-btn {
    background: linear-gradient(180deg, #e35a4c, #c63b36);
    color: #fff3ef;
    border: 1px solid #f17e6a;
}

.server-card-showcase .server-actions .fav-btn {
    background: linear-gradient(180deg, #6b4a1f, #4b3314);
    color: #ffd78f;
    border: 1px solid #b38745;
}

.server-card-showcase .server-actions .fav-btn.is-active {
    background: linear-gradient(180deg, #9f5a1d, #7b3f12);
    color: #fff1cc;
}

.server-card-showcase .server-actions .discord-btn:hover,
.server-card-showcase .server-actions .web-btn:hover,
.server-card-showcase .server-actions .vote-btn:hover,
.server-card-showcase .server-actions .fav-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 7px 16px rgba(0, 0, 0, 0.42);
    filter: brightness(1.06);
}

@media (max-width: 760px) {
    .server-card-showcase .server-title-row {
        min-height: auto;
    }

    .server-card-showcase .server-title-row .server-category {
        position: static;
        transform: none;
        margin-top: 0.25rem;
    }

    .server-card-showcase .server-title-row {
        flex-direction: column;
        gap: 0.35rem;
    }
}

/* server detail showcase */
.detail-card-showcase {
    padding: 1rem;
    border: 1px solid #8b6a3d;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(52, 41, 28, 0.9), rgba(34, 27, 20, 0.92));
}

.detail-showcase-head {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.85rem;
}

.detail-back-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid #7f6337;
    background: linear-gradient(180deg, #5e462a, #41311e);
    color: #ffd696;
    font-size: 1.5rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.detail-showcase-head h1 {
    margin: 0;
    font-size: 2rem;
    font-family: 'Rajdhani', sans-serif;
    color: #f8e4be;
}

.detail-showcase-grid {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 1rem;
}

.detail-showcase-banner {
    border: 1px solid #7a5e34;
    border-radius: 10px;
    overflow: hidden;
    height: 138px;
    background: #0f1114;
}

.detail-showcase-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.detail-side-buttons {
    margin-top: 0.72rem;
    display: grid;
    gap: 0.55rem;
}

.detail-side-btn {
    width: 100%;
    min-height: 46px;
    border-radius: 10px;
    border: 1px solid #856334;
    background: linear-gradient(180deg, #5f4a2f, #433521);
    color: #ffebb9;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0 0.75rem;
    font-weight: 800;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.34);
}

.detail-side-btn span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.detail-side-btn strong {
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.18);
    padding: 0.16rem 0.55rem;
    font-size: 0.95rem;
}

.detail-side-btn.is-vote {
    background: linear-gradient(180deg, #5f944a, #4a7339);
    border-color: #8abf74;
    color: #f3ffeb;
}

.detail-side-btn.is-web {
    background: linear-gradient(180deg, #c6a35d, #9f7f43);
    border-color: #e1bf79;
    color: #fff5de;
}

.detail-side-btn.is-fav {
    background: linear-gradient(180deg, #514028, #3b2f1d);
    border-color: #8f7247;
    color: #ffe3ad;
}

.detail-side-btn.is-fav.is-active {
    background: linear-gradient(180deg, #9f5b1e, #7f4314);
    color: #fff2d3;
}

.detail-showcase-info {
    border: 1px solid #705737;
    border-radius: 12px;
    background: rgba(62, 49, 33, 0.64);
    padding: 0.85rem;
    display: grid;
    gap: 0.52rem;
    align-content: start;
}

.detail-info-row {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    align-items: center;
    gap: 0.4rem;
}

.detail-info-row > span {
    color: #d2bc99;
    font-weight: 700;
}

.detail-info-row strong {
    color: #f8e7c2;
}

.detail-info-row .server-language-flags {
    gap: 0.4rem;
}

.detail-info-row .text-btn {
    margin-right: 0.35rem;
}

.detail-share-links {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.detail-share-links a {
    color: #f3ddb0;
    font-size: 1.05rem;
}

.detail-section-title {
    margin-top: 1rem;
    margin-bottom: 0.55rem;
    border-top: 1px solid #4d3d29;
    border-bottom: 1px solid #4d3d29;
    padding: 0.55rem 0;
}

.detail-section-title h2 {
    margin: 0;
    text-align: center;
    font-family: 'Rajdhani', sans-serif;
    font-size: 2rem;
}

.detail-description-box {
    border: 1px solid #7b5f36;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(56, 44, 30, 0.88), rgba(36, 28, 20, 0.9));
    padding: 1rem;
}

.detail-description-box p {
    margin: 0;
    color: #e7d8bf;
    line-height: 1.62;
}

@media (max-width: 980px) {
    .detail-showcase-grid {
        grid-template-columns: 1fr;
    }

    .detail-showcase-banner {
        height: 172px;
    }

    .detail-info-row {
        grid-template-columns: 1fr;
        gap: 0.24rem;
    }
}

/* admin settings detailed panel */
.settings-filter-box {
    margin-bottom: 0.8rem;
}

.settings-filter-box .admin-inline-search {
    align-items: center;
    flex-wrap: wrap;
}

.settings-filter-box .admin-inline-search select,
.settings-filter-box .admin-inline-search input {
    min-height: 40px;
}

.settings-create-box {
    margin-bottom: 0.85rem;
}

.settings-help {
    margin: 0 0 0.7rem;
    color: #d4c8b7;
    line-height: 1.5;
}

.settings-help code {
    padding: 0.12rem 0.4rem;
    border-radius: 6px;
    border: 1px solid #7f6238;
    background: rgba(15, 14, 13, 0.65);
    color: #ffe0a8;
}

.settings-template-wrap {
    display: grid;
    gap: 0.5rem;
    margin-bottom: 0.7rem;
}

.settings-template-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.settings-grid-form {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.admin-field {
    display: grid;
    gap: 0.28rem;
}

.admin-field > span {
    color: #dfcfb3;
    font-size: 0.84rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.admin-field-full {
    grid-column: 1 / -1;
}

.settings-autoload-line {
    grid-column: 1 / -1;
    border: 1px dashed #7f6540;
    border-radius: 10px;
    padding: 0.5rem 0.65rem;
    background: rgba(24, 20, 15, 0.58);
}

.settings-tip-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.5rem;
}

.settings-tip-card {
    border: 1px solid #6a5738;
    border-radius: 10px;
    background: rgba(24, 20, 15, 0.58);
    padding: 0.55rem;
    display: grid;
    gap: 0.25rem;
}

.settings-tip-card strong {
    color: #f5d08f;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem;
}

.settings-tip-card p,
.settings-tip-card code {
    margin: 0;
    color: #d9ccb7;
    font-size: 0.84rem;
    line-height: 1.42;
}

.settings-group-box {
    margin-bottom: 0.8rem;
}

.settings-group-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
}

.settings-group-item {
    border: 1px solid #6d5735;
    border-radius: 10px;
    background: rgba(28, 22, 16, 0.7);
    padding: 0.62rem;
    display: grid;
    gap: 0.2rem;
}

.settings-group-item strong {
    color: #ffe3b0;
}

.settings-group-item span {
    color: #e6d4b6;
    font-size: 0.9rem;
}

.settings-group-item small {
    color: #c5b293;
    font-size: 0.8rem;
}

.settings-value-preview {
    margin: 0;
    white-space: pre-wrap;
    font-family: Consolas, 'Courier New', monospace;
    font-size: 0.82rem;
    color: #ead9bc;
}

.settings-logo-grid {
    display: grid;
    grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
}

.settings-logo-preview {
    width: min(100%, 300px);
    aspect-ratio: 300 / 80;
    border: 1px solid #7a6037;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(54, 42, 27, 0.92), rgba(23, 19, 15, 0.96));
}

.settings-logo-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.settings-logo-preview.is-empty {
    border-style: dashed;
    flex-direction: column;
    gap: 0.25rem;
}

.settings-logo-form {
    grid-template-columns: 1fr;
}

.settings-logo-help {
    margin: 0;
}

.settings-toggle-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
    border: 1px dashed #7f6540;
    border-radius: 10px;
    padding: 0.6rem 0.7rem;
    background: rgba(24, 20, 15, 0.58);
}

.settings-toggle-status {
    border: 1px solid #6f5938;
    border-radius: 999px;
    padding: 0.34rem 0.75rem;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.settings-toggle-status.is-enabled {
    color: #d6ffdb;
    border-color: #2f8f45;
    background: linear-gradient(180deg, rgba(46, 132, 66, 0.42), rgba(33, 89, 44, 0.32));
}

.settings-toggle-status.is-disabled {
    color: #ffd4d4;
    border-color: #9a4b4b;
    background: linear-gradient(180deg, rgba(139, 58, 58, 0.38), rgba(95, 37, 37, 0.3));
}

.settings-toggle-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.settings-toggle-actions form {
    margin: 0;
}

.settings-logo-clear-form {
    margin: 0;
    align-self: center;
}

.settings-logs-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.settings-footer-builder {
    margin-top: 0.9rem;
    border: 1px dashed #7f6540;
    border-radius: 12px;
    padding: 0.75rem;
    background: rgba(24, 20, 15, 0.45);
    display: grid;
    gap: 0.7rem;
}

.settings-footer-create-form,
.settings-footer-section-form,
.settings-footer-item-form {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.settings-footer-section-list {
    display: grid;
    gap: 0.7rem;
}

.settings-footer-section-item {
    border: 1px solid #6f5938;
    border-radius: 10px;
    padding: 0.65rem;
    background: rgba(18, 16, 12, 0.68);
    display: grid;
    gap: 0.55rem;
}

.settings-footer-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.settings-footer-delete-form {
    margin: 0;
}

.settings-footer-links-wrap {
    border-top: 1px dashed #6a5436;
    padding-top: 0.55rem;
    display: grid;
    gap: 0.55rem;
}

.settings-footer-links-wrap h4 {
    margin: 0;
    color: #f2d69f;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem;
}

.settings-footer-item-list {
    display: grid;
    gap: 0.45rem;
}

.settings-footer-item-row {
    border: 1px solid #5f4d33;
    border-radius: 8px;
    padding: 0.5rem;
    background: rgba(20, 18, 14, 0.72);
    display: grid;
    gap: 0.42rem;
}

.settings-footer-item-check {
    align-self: end;
    min-height: 40px;
}
@media (max-width: 1120px) {
    .settings-tip-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-group-list,
    .settings-footer-create-form,
    .settings-footer-section-form,
    .settings-footer-item-form,
    .settings-logs-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .settings-tip-grid,
    .settings-group-list,
    .settings-logo-grid,
    .settings-footer-create-form,
    .settings-footer-section-form,
    .settings-footer-item-form,
    .settings-logs-form {
        grid-template-columns: 1fr;
    }

    .settings-footer-builder {
        padding: 0.6rem;
    }
}

/* server panel action buttons */
.sp-user-submission-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.sp-inline-form {
    margin: 0;
}

.sp-edit-btn {
    border-color: #4a8fb8;
    background: linear-gradient(180deg, #3e7dac, #2c6088);
}

.sp-danger-btn {
    border: 1px solid #b44a4a;
    border-radius: 999px;
    min-height: 34px;
    padding: 0.35rem 0.85rem;
    color: #ffe7e7;
    background: linear-gradient(180deg, #a53838, #7f2525);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* ad slot placeholders */
.header-center-card.is-placeholder {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.6rem;
}

.slot-placeholder-title {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    color: #f6d8a1;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.slot-placeholder-size {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #a88a57;
    border-radius: 999px;
    padding: 0.14rem 0.55rem;
    font-size: 0.8rem;
    color: #ffe1ad;
    background: rgba(54, 42, 27, 0.76);
}

.slot-placeholder-note {
    color: #d5c2a1;
    font-size: 0.75rem;
    text-align: center;
}

.floating-ad .slot-placeholder-size {
    margin-top: 0.22rem;
    margin-bottom: 0.2rem;
    font-weight: 700;
    color: #ffd694;
}

@media (max-width: 760px) {
    .sp-user-submission-actions {
        width: 100%;
    }

    .sp-user-submission-actions .sp-blue-btn,
    .sp-user-submission-actions .sp-danger-btn,
    .sp-user-submission-actions .sp-inline-form {
        flex: 1 1 calc(33.333% - 0.35rem);
    }
}
/* home sidebar 350x319 ad slot */
.sidebar-ad-card {
    padding: 0.75rem;
}

.sidebar-350-slider {
    width: min(100%, 350px);
    margin: 0 auto;
}

.sidebar-350-track {
    position: relative;
    width: 100%;
    aspect-ratio: 350 / 319;
    border: 1px solid #7e6339;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(50, 39, 27, 0.86), rgba(24, 20, 15, 0.95));
}

.sidebar-350-slide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.65rem;
    text-align: center;
    text-decoration: none;
    color: #f4e7cf;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.sidebar-350-slide.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
}

.sidebar-350-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sidebar-350-dots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.45rem;
}

.sidebar-350-dots button {
    width: 9px;
    height: 9px;
    border: 1px solid #8a6d3d;
    border-radius: 999px;
    background: rgba(23, 19, 15, 0.78);
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.sidebar-350-dots button.is-active {
    background: #d8ae67;
    border-color: #f3cd8e;
    transform: scale(1.1);
}

.sidebar-350-dots button:hover {
    background: #d09f53;
}

.sidebar-350-slot {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: min(100%, 350px);
    aspect-ratio: 350 / 319;
    margin: 0 auto;
    border: 1px dashed #8b6e3f;
    border-radius: 12px;
    padding: 0.85rem;
    text-align: center;
    background:
        linear-gradient(180deg, rgba(54, 42, 27, 0.92), rgba(23, 19, 15, 0.96)),
        repeating-linear-gradient(
            -45deg,
            rgba(214, 166, 83, 0.08) 0,
            rgba(214, 166, 83, 0.08) 12px,
            rgba(16, 14, 11, 0.08) 12px,
            rgba(16, 14, 11, 0.08) 24px
        );
}

.sidebar-350-slot .slot-placeholder-title {
    font-size: 0.95rem;
}

.sidebar-350-slot .slot-placeholder-note {
    font-size: 0.74rem;
}
/* popup lock mode */
.popup-lock-note {
    display: block;
    margin-top: 0.55rem;
    color: #ffd694;
    font-size: 0.82rem;
    font-weight: 700;
}

.site-popup-ad.is-locked .site-popup-backdrop {
    cursor: not-allowed;
}

.site-popup-ad.is-locked .site-popup-card [data-popup-close] {
    cursor: not-allowed;
}

/* server detail 800x185 ad slot */
.server-detail-top-ad {
    margin: 0.95rem 0 0.7rem;
    display: flex;
    justify-content: center;
}

.server-detail-top-ad-card {
    text-decoration: none;
    width: min(100%, 800px);
    aspect-ratio: 800 / 185;
    border: 1px solid #8b6e3f;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(50, 39, 27, 0.86), rgba(24, 20, 15, 0.95));
}

.server-detail-top-ad-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.server-detail-top-ad-card.is-placeholder {
    border-style: dashed;
    padding: 0.85rem;
    gap: 0.3rem;
    flex-direction: column;
    text-align: center;
    background:
        linear-gradient(180deg, rgba(54, 42, 27, 0.92), rgba(23, 19, 15, 0.96)),
        repeating-linear-gradient(
            -45deg,
            rgba(214, 166, 83, 0.08) 0,
            rgba(214, 166, 83, 0.08) 12px,
            rgba(16, 14, 11, 0.08) 12px,
            rgba(16, 14, 11, 0.08) 24px
        );
}

.server-detail-top-ad-card .slot-placeholder-title {
    font-size: 0.95rem;
}

.server-detail-top-ad-card .slot-placeholder-note {
    font-size: 0.74rem;
}

@media (max-width: 760px) {
    .server-detail-top-ad {
        margin-top: 0.8rem;
    }
}





/* ad rendering fixes */
.top-ad-wrap {
    flex-wrap: wrap;
    padding: 0.32rem 0;
}

.top-ad-link {
    min-width: 0;
    flex: 1 1 auto;
}

.top-ad-link:not(.has-image) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.top-ad-link.has-image {
    display: block;
    flex: 1 1 100%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    overflow: hidden;
    background: rgba(27, 17, 17, 0.62);
}

.top-ad-link.has-image img {
    display: block;
    width: 100%;
    max-height: 90px;
    object-fit: cover;
}

.top-ad-wrap .top-ad-desc {
    width: 100%;
    margin-top: 0.1rem;
}





/* admin ui refresh */
.is-admin-route .page-shell > .container {
    padding-right: 368px;
}

.is-admin-route .admin-nav-shell {
    position: fixed;
    top: 108px;
    right: 1rem;
    width: 336px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    padding: 0.9rem;
    border: 1px solid rgba(114, 86, 44, 0.8);
    border-radius: 14px;
    background:
        radial-gradient(420px 190px at 22% -18%, rgba(234, 174, 82, 0.2), transparent 64%),
        linear-gradient(180deg, rgba(25, 20, 16, 0.97), rgba(16, 14, 12, 0.98));
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    z-index: 45;
}

.is-admin-route .admin-nav-shell::-webkit-scrollbar {
    width: 8px;
}

.is-admin-route .admin-nav-shell::-webkit-scrollbar-thumb {
    background: rgba(193, 145, 66, 0.5);
    border-radius: 999px;
}

.is-admin-route .admin-nav-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
    align-items: flex-start;
    margin-bottom: 0.65rem;
}

.is-admin-route .admin-nav-kicker {
    margin: 0;
    color: #d5a85a;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-size: 0.72rem;
    font-weight: 800;
}

.is-admin-route .admin-nav-toolbar h3 {
    margin: 0.18rem 0 0.1rem;
    color: #fff1d8;
    font-size: 1.05rem;
    letter-spacing: 0.4px;
}

.is-admin-route .admin-nav-toolbar small {
    color: #c8af88;
    font-size: 0.78rem;
}

.is-admin-route .admin-nav-site-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid rgba(196, 145, 65, 0.5);
    border-radius: 999px;
    padding: 0.38rem 0.7rem;
    background: rgba(42, 31, 22, 0.74);
    color: #ffdca1;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.is-admin-route .admin-nav-site-link:hover {
    border-color: #d9a85a;
    color: #fff1d4;
}

.is-admin-route .admin-nav-search-wrap {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid rgba(121, 94, 54, 0.6);
    border-radius: 10px;
    background: rgba(14, 13, 12, 0.82);
    padding: 0.5rem 0.65rem;
    margin-bottom: 0.65rem;
}

.is-admin-route .admin-nav-search-wrap i {
    color: #d2ab6d;
    font-size: 0.78rem;
}

.is-admin-route .admin-nav-search-wrap input {
    width: 100%;
    border: 0;
    outline: none;
    background: transparent;
    color: #f4e7d1;
    font-size: 0.9rem;
}

.is-admin-route .admin-nav-search-wrap input::placeholder {
    color: #8f7a59;
}

.is-admin-route .admin-nav-quick-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
    margin-bottom: 0.72rem;
}

.is-admin-route .admin-nav-quick-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border: 1px solid rgba(124, 93, 52, 0.65);
    border-radius: 8px;
    padding: 0.45rem 0.3rem;
    background: rgba(31, 24, 19, 0.8);
    color: #f6deb3;
    font-size: 0.78rem;
    font-weight: 700;
}

.is-admin-route .admin-nav-quick-links a:hover,
.is-admin-route .admin-nav-quick-links a.is-active {
    background: linear-gradient(180deg, #e4b55f, #bf8b35);
    border-color: #d9a657;
    color: #231509;
}

.is-admin-route .admin-nav-groups {
    display: grid;
    gap: 0.58rem;
    margin-bottom: 0;
}

.is-admin-route .admin-nav-group {
    border: 1px solid rgba(102, 79, 48, 0.76);
    border-radius: 11px;
    background: rgba(20, 16, 13, 0.84);
    padding: 0.5rem;
}

.is-admin-route .admin-nav-group-toggle {
    width: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0;
    cursor: pointer;
}

.is-admin-route .admin-nav-group-title {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    color: #f6d39c;
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 800;
}

.is-admin-route .admin-nav-group-title i {
    color: #e6b76c;
    font-size: 0.8rem;
}

.is-admin-route .admin-nav-group-count {
    min-width: 24px;
    height: 24px;
    border-radius: 999px;
    border: 1px solid rgba(194, 146, 68, 0.55);
    color: #ffd99f;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.74rem;
    font-weight: 800;
}

.is-admin-route .admin-nav-group-toggle::after {
    content: '?';
    color: #ba9151;
    font-size: 0.85rem;
    margin-left: auto;
    transform-origin: center;
    transition: transform 0.2s ease;
}

.is-admin-route .admin-nav-group-toggle[aria-expanded='false']::after {
    transform: rotate(-90deg);
}

.is-admin-route .admin-nav {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.is-admin-route .admin-nav a {
    border: 1px solid rgba(99, 77, 50, 0.7);
    background: rgba(18, 14, 11, 0.84);
    color: #e4cfac;
    border-radius: 9px;
    padding: 0.5rem 0.62rem;
    font-size: 0.83rem;
    line-height: 1.2;
    display: grid;
    gap: 0.2rem;
}

.is-admin-route .admin-nav-link-main {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    font-weight: 700;
}

.is-admin-route .admin-nav-link-main i {
    color: #d9af6b;
    font-size: 0.78rem;
    width: 12px;
    text-align: center;
}

.is-admin-route .admin-nav a small {
    color: #a7906d;
    font-size: 0.72rem;
    margin-left: 1.18rem;
}

.is-admin-route .admin-nav a:hover,
.is-admin-route .admin-nav a.is-active {
    background: linear-gradient(180deg, rgba(226, 174, 88, 0.97), rgba(188, 134, 47, 0.98));
    border-color: #d6a557;
    color: #271606;
}

.is-admin-route .admin-nav a:hover .admin-nav-link-main i,
.is-admin-route .admin-nav a.is-active .admin-nav-link-main i,
.is-admin-route .admin-nav a:hover small,
.is-admin-route .admin-nav a.is-active small {
    color: #42260b;
}

.is-admin-route .admin-cards {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.75rem;
}

.is-admin-route .admin-card {
    border-radius: 12px;
    border: 1px solid rgba(123, 95, 56, 0.72);
    background:
        radial-gradient(220px 120px at 110% -30%, rgba(236, 178, 83, 0.22), transparent 65%),
        linear-gradient(180deg, rgba(29, 23, 18, 0.96), rgba(17, 14, 11, 0.96));
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.is-admin-route .admin-card:hover {
    transform: translateY(-1px);
    border-color: #d0a15c;
}

.is-admin-route .admin-card span {
    color: #cdb48d;
    text-transform: uppercase;
    letter-spacing: 0.55px;
    font-size: 0.74rem;
    font-weight: 700;
}

.is-admin-route .admin-card strong {
    color: #ffe7bc;
    font-size: 1.65rem;
    line-height: 1;
}

.is-admin-route .admin-table-wrap {
    border: 1px solid rgba(108, 84, 51, 0.72);
    border-radius: 12px;
}

.is-admin-route .admin-table thead th {
    background: rgba(58, 42, 23, 0.88);
    color: #ffe1ad;
    border-bottom-color: rgba(113, 86, 52, 0.8);
    position: sticky;
    top: 0;
    z-index: 2;
}

.is-admin-route .admin-table tbody tr:hover {
    background: rgba(226, 172, 84, 0.1);
}

.is-admin-route .admin-inline-search {
    flex-wrap: wrap;
    gap: 0.5rem;
}

.is-admin-route .admin-inline-search select,
.is-admin-route .admin-inline-search input {
    border-color: rgba(126, 95, 57, 0.74);
    border-radius: 8px;
    background: rgba(18, 14, 12, 0.88);
    color: #f1dfc1;
}

@media (max-width: 1360px) {
    .is-admin-route .page-shell > .container {
        padding-right: 0;
    }

    .is-admin-route .admin-nav-shell {
        position: static;
        width: 100%;
        max-height: none;
        margin-bottom: 0.95rem;
    }

    .is-admin-route .admin-nav-quick-links {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .is-admin-route .admin-nav-groups {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .is-admin-route .admin-nav-toolbar {
        flex-direction: column;
    }

    .is-admin-route .admin-nav-quick-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .is-admin-route .admin-nav-groups {
        grid-template-columns: 1fr;
    }

    .is-admin-route .admin-nav a {
        font-size: 0.88rem;
    }
}

/* admin menu hotfix */
.is-admin-route .admin-nav-shell {
    top: 126px;
    max-height: calc(100vh - 140px);
    overflow-x: hidden;
}

.is-admin-route .admin-nav-group {
    overflow: hidden;
}

.is-admin-route .admin-nav[hidden] {
    display: none !important;
}

.is-admin-route .admin-nav:not([hidden]) {
    display: grid !important;
}

.is-admin-route .admin-nav-group-toggle::after {
    content: 'v';
    font-family: inherit;
    font-size: 0.72rem;
    line-height: 1;
}

.is-admin-route .admin-nav-group-toggle[aria-expanded='false']::after {
    transform: rotate(-90deg);
}

.is-admin-route .admin-nav-quick-links {
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
}

@media (max-width: 1360px) {
    .is-admin-route .admin-nav-shell {
        position: static !important;
        top: auto;
        max-height: none;
    }
}

/* admin horizontal menu layout */
.is-admin-route .page-shell > .container {
    padding-right: 0 !important;
}

.is-admin-route .admin-nav-shell,
.is-admin-route .admin-nav-shell-horizontal {
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 0.95rem !important;
}

.is-admin-route .admin-nav-strip {
    border: 1px solid rgba(117, 88, 51, 0.84);
    border-radius: 14px;
    padding: 0.75rem;
    background:
        radial-gradient(420px 160px at 20% -20%, rgba(229, 173, 86, 0.2), transparent 62%),
        linear-gradient(180deg, rgba(28, 22, 18, 0.96), rgba(17, 14, 12, 0.97));
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.38);
}

.is-admin-route .admin-nav-strip-head {
    display: grid;
    grid-template-columns: auto auto minmax(220px, 1fr);
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.7rem;
}

.is-admin-route .admin-nav-kicker {
    margin: 0;
    color: #d7a95c;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-size: 0.72rem;
    font-weight: 800;
}

.is-admin-route .admin-nav-strip-head h3 {
    margin: 0.15rem 0 0;
    color: #ffe6bc;
    font-size: 1.02rem;
    letter-spacing: 0.35px;
}

.is-admin-route .admin-nav-strip-count {
    justify-self: start;
    border: 1px solid rgba(201, 154, 77, 0.7);
    border-radius: 999px;
    padding: 0.24rem 0.68rem;
    color: #f5d7a5;
    font-size: 0.77rem;
    font-weight: 700;
    background: rgba(44, 31, 18, 0.72);
}

.is-admin-route .admin-nav-strip-search {
    justify-self: end;
    width: min(100%, 360px);
    display: flex;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid rgba(125, 94, 57, 0.72);
    border-radius: 999px;
    padding: 0.46rem 0.72rem;
    background: rgba(14, 13, 12, 0.86);
}

.is-admin-route .admin-nav-strip-search i {
    color: #cfaa6d;
    font-size: 0.78rem;
}

.is-admin-route .admin-nav-strip-search input {
    width: 100%;
    border: 0;
    outline: none;
    background: transparent;
    color: #f5e5ca;
    font-size: 0.9rem;
}

.is-admin-route .admin-nav-strip-search input::placeholder {
    color: #8f7b5b;
}

.is-admin-route .admin-nav-strip-track {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.1rem 0.1rem 0.35rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(197, 151, 77, 0.62) transparent;
}

.is-admin-route .admin-nav-strip-track::-webkit-scrollbar {
    height: 8px;
}

.is-admin-route .admin-nav-strip-track::-webkit-scrollbar-thumb {
    background: rgba(197, 151, 77, 0.62);
    border-radius: 999px;
}

.is-admin-route .admin-strip-link {
    flex: 0 0 auto;
    min-width: 142px;
    border: 1px solid rgba(121, 93, 55, 0.72);
    border-radius: 11px;
    background: rgba(20, 16, 13, 0.86);
    color: #ead4b0;
    padding: 0.45rem 0.58rem;
    display: grid;
    gap: 0.12rem;
    transition: transform 0.18s ease, border-color 0.2s ease, background 0.2s ease;
}

.is-admin-route .admin-strip-link i {
    color: #d8ae6c;
    font-size: 0.78rem;
}

.is-admin-route .admin-strip-link small {
    color: #b59870;
    font-size: 0.68rem;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.is-admin-route .admin-strip-link strong {
    color: #f5e0bd;
    font-size: 0.9rem;
    line-height: 1.1;
}

.is-admin-route .admin-strip-link:hover,
.is-admin-route .admin-strip-link.is-active {
    border-color: #d4a75a;
    background: linear-gradient(180deg, rgba(230, 177, 88, 0.96), rgba(188, 134, 47, 0.96));
    color: #2c1a08;
    transform: translateY(-1px);
}

.is-admin-route .admin-strip-link:hover i,
.is-admin-route .admin-strip-link.is-active i,
.is-admin-route .admin-strip-link:hover small,
.is-admin-route .admin-strip-link.is-active small,
.is-admin-route .admin-strip-link:hover strong,
.is-admin-route .admin-strip-link.is-active strong {
    color: #2c1a08;
}

.is-admin-route .admin-nav-strip-empty {
    margin: 0.25rem 0 0;
    color: #d8bd93;
    font-size: 0.84rem;
}

@media (max-width: 1100px) {
    .is-admin-route .admin-nav-strip-head {
        grid-template-columns: 1fr;
        gap: 0.48rem;
    }

    .is-admin-route .admin-nav-strip-count,
    .is-admin-route .admin-nav-strip-search {
        justify-self: stretch;
        width: 100%;
    }
}

@media (max-width: 760px) {
    .is-admin-route .admin-strip-link {
        min-width: 128px;
    }

    .is-admin-route .admin-strip-link strong {
        font-size: 0.84rem;
    }
}

/* admin category menu (hover -> subcategory) */
.is-admin-route .admin-nav-shell-horizontal .admin-nav-categories {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.05rem 0.05rem 0.28rem;
    margin-bottom: 0.55rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(197, 151, 77, 0.6) transparent;
}

.is-admin-route .admin-nav-shell-horizontal .admin-nav-categories::-webkit-scrollbar {
    height: 7px;
}

.is-admin-route .admin-nav-shell-horizontal .admin-nav-categories::-webkit-scrollbar-thumb {
    background: rgba(197, 151, 77, 0.6);
    border-radius: 999px;
}

.is-admin-route .admin-nav-shell-horizontal .admin-cat-chip {
    flex: 0 0 auto;
    min-width: 188px;
    border: 1px solid rgba(121, 93, 55, 0.72);
    border-radius: 11px;
    background: rgba(20, 16, 13, 0.88);
    color: #ead4b0;
    padding: 0.42rem 0.58rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.42rem;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.2s ease, background 0.2s ease;
}

.is-admin-route .admin-nav-shell-horizontal .admin-cat-chip-main {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    font-size: 0.86rem;
    font-weight: 700;
}

.is-admin-route .admin-nav-shell-horizontal .admin-cat-chip-main i {
    color: #d8ae6c;
    font-size: 0.78rem;
}

.is-admin-route .admin-nav-shell-horizontal .admin-cat-chip small {
    min-width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 1px solid rgba(197, 151, 77, 0.56);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffd9a0;
    font-size: 0.72rem;
    font-weight: 700;
}

.is-admin-route .admin-nav-shell-horizontal .admin-cat-chip:hover,
.is-admin-route .admin-nav-shell-horizontal .admin-cat-chip.is-active {
    border-color: #d4a75a;
    background: linear-gradient(180deg, rgba(230, 177, 88, 0.96), rgba(188, 134, 47, 0.96));
    color: #2c1a08;
    transform: translateY(-1px);
}

.is-admin-route .admin-nav-shell-horizontal .admin-cat-chip:hover i,
.is-admin-route .admin-nav-shell-horizontal .admin-cat-chip.is-active i,
.is-admin-route .admin-nav-shell-horizontal .admin-cat-chip:hover small,
.is-admin-route .admin-nav-shell-horizontal .admin-cat-chip.is-active small {
    color: #2c1a08;
    border-color: rgba(44, 26, 8, 0.45);
}

.is-admin-route .admin-nav-shell-horizontal .admin-submenu-wrap {
    margin-top: 0.1rem;
}

.is-admin-route .admin-nav-shell-horizontal .admin-submenu-track {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.1rem 0.1rem 0.3rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(197, 151, 77, 0.62) transparent;
}

.is-admin-route .admin-nav-shell-horizontal .admin-submenu-track[hidden] {
    display: none !important;
}

.is-admin-route .admin-nav-shell-horizontal .admin-submenu-track::-webkit-scrollbar {
    height: 8px;
}

.is-admin-route .admin-nav-shell-horizontal .admin-submenu-track::-webkit-scrollbar-thumb {
    background: rgba(197, 151, 77, 0.62);
    border-radius: 999px;
}

@media (max-width: 980px) {
    .is-admin-route .admin-nav-shell-horizontal .admin-cat-chip {
        min-width: 164px;
    }
}

@media (max-width: 760px) {
    .is-admin-route .admin-nav-shell-horizontal .admin-cat-chip {
        min-width: 150px;
    }

    .is-admin-route .admin-nav-shell-horizontal .admin-cat-chip-main {
        font-size: 0.8rem;
    }
}

/* server panel interactions */
.server-panel-save-top.is-pending,
.server-panel-save-bottom.is-pending,
.server-panel-save-top:disabled,
.server-panel-save-bottom:disabled {
    border-color: #7e7262;
    background: linear-gradient(180deg, rgba(126, 128, 131, 0.78), rgba(92, 94, 98, 0.88));
    color: #d8d8d8;
    cursor: not-allowed;
    opacity: 0.86;
    box-shadow: none;
}

.server-panel-save-top.is-ready,
.server-panel-save-bottom.is-ready {
    border-color: #70a65f;
    background: linear-gradient(180deg, #5cb455, #3d7f3f);
    color: #f4ffeb;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 8px 20px rgba(46, 108, 51, 0.35);
    cursor: pointer;
    opacity: 1;
}

.server-panel-save-top.is-ready:hover,
.server-panel-save-bottom.is-ready:hover {
    filter: brightness(1.05);
}

.sp-code-grid {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.sp-logo-preview-card {
    border: 1px dashed #8a7355;
    border-radius: 10px;
    padding: 0.55rem;
    background: rgba(17, 16, 14, 0.72);
    display: grid;
    gap: 0.45rem;
    margin-bottom: 0.5rem;
}

.sp-logo-preview-card img {
    width: min(280px, 100%);
    margin: 0 auto;
    display: block;
    border-radius: 8px;
}

.sp-logo-preview-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
}

.sp-logo-url {
    color: #d6cab6;
    font-size: 0.78rem;
    word-break: break-all;
}

.sp-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.detail-side-btn.is-label-only {
    justify-content: flex-start;
}

.sp-check-stack-detailed {
    border: 1px dashed rgba(182, 154, 104, 0.5);
    border-radius: 10px;
    padding: 0.5rem 0.6rem;
    background: rgba(33, 31, 26, 0.46);
}

.sp-field-group {
    display: grid;
    gap: 0.3rem;
    align-content: start;
}

.sp-field-help {
    display: block;
    color: #d0bea0;
    font-size: 0.82rem;
    line-height: 1.35;
}

.sp-description-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(250px, 1fr);
    gap: 0.72rem;
    align-items: stretch;
}

.sp-description-card {
    border: 1px solid rgba(160, 129, 82, 0.66);
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(43, 37, 30, 0.9), rgba(35, 31, 27, 0.94)),
        radial-gradient(400px 140px at 80% -20%, rgba(210, 167, 91, 0.15), transparent 65%);
    padding: 0.68rem 0.72rem;
    display: grid !important;
    gap: 0.44rem;
}

.sp-description-title {
    color: #f2d183;
    font-weight: 700;
    font-size: 1.04rem;
}

.sp-description-card input,
.sp-description-card textarea {
    width: 100%;
    background: #8a7344;
    border-color: #a0865e;
}

.sp-description-card input::placeholder,
.sp-description-card textarea::placeholder {
    color: rgba(246, 227, 187, 0.56);
}

.sp-description-card textarea {
    min-height: 190px;
    line-height: 1.5;
    resize: vertical;
}

.sp-description-card-full {
    grid-column: 1 / -1;
}

.sp-description-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
}

.sp-description-meta small {
    color: #d8c39e;
    line-height: 1.35;
}

.sp-description-meta strong {
    border: 1px solid rgba(230, 196, 130, 0.48);
    border-radius: 999px;
    background: rgba(25, 23, 20, 0.72);
    color: #f6d58d;
    font-size: 0.79rem;
    font-weight: 700;
    padding: 0.2rem 0.58rem;
    min-width: 86px;
    text-align: center;
}

.sp-description-tips {
    border: 1px dashed rgba(177, 148, 100, 0.58);
    border-radius: 12px;
    background: rgba(28, 26, 22, 0.7);
    padding: 0.68rem 0.74rem;
}

.sp-description-tips h4 {
    margin: 0 0 0.45rem;
    color: #f4cf82;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.sp-description-tips ul {
    margin: 0;
    padding-left: 1rem;
    color: #d5dddf;
    line-height: 1.45;
    font-size: 0.89rem;
}

.sp-description-tips li + li {
    margin-top: 0.22rem;
}

@media (max-width: 1120px) {
    .sp-description-layout {
        grid-template-columns: 1fr;
    }

    .sp-description-meta {
        align-items: flex-start;
        flex-direction: column;
    }

    .sp-description-meta strong {
        align-self: flex-end;
    }
}

.sp-required-star {
    color: #ff6159;
    font-weight: 900;
    margin-left: 0.2rem;
    text-shadow: 0 0 8px rgba(255, 74, 66, 0.35);
}

#create-form-warning {
    margin: 0 0 0.72rem;
    font-weight: 700;
}

.sp-input-invalid {
    border-color: #c95b52 !important;
    box-shadow: 0 0 0 1px rgba(201, 91, 82, 0.38) inset;
}


.nav-with-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
}

.nav-badge {
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 1px solid #a66a22;
    background: linear-gradient(180deg, #ffcb7a, #dd9230);
    color: #2a1906;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.24rem;
}

.inbox-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.inbox-tabs {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.inbox-tabs a {
    border: 1px solid #3d3d3d;
    border-radius: 999px;
    padding: 0.3rem 0.72rem;
    font-size: 0.83rem;
    font-weight: 700;
    color: #dbdbdb;
    background: #161616;
}

.inbox-tabs a.is-active {
    border-color: #a47732;
    background: linear-gradient(180deg, #e8be75, #c08b34);
    color: #2e1d07;
}

.inbox-list {
    display: grid;
    gap: 0.68rem;
}

.inbox-item-card {
    border: 1px solid #353535;
    border-radius: 12px;
    background: #121212;
    padding: 0.75rem 0.8rem;
    display: grid;
    gap: 0.55rem;
}

.inbox-item-card.is-unread {
    border-color: #9f7534;
    box-shadow: inset 0 0 0 1px rgba(207, 161, 83, 0.22);
}

.inbox-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.inbox-item-tags {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.inbox-kind,
.inbox-level {
    border-radius: 999px;
    border: 1px solid #444;
    padding: 0.15rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.4px;
}

.inbox-kind.is-message {
    border-color: #6c86d8;
    background: rgba(58, 86, 172, 0.28);
    color: #dce6ff;
}

.inbox-kind.is-notification {
    border-color: #8f7a3d;
    background: rgba(144, 118, 43, 0.3);
    color: #ffe8bc;
}

.inbox-level {
    color: #d6d6d6;
    background: #1b1b1b;
}

.inbox-item-card h3 {
    margin: 0;
    font-size: 1.05rem;
}

.inbox-item-card p {
    margin: 0;
    color: #d1d1d1;
    line-height: 1.5;
}

.inbox-item-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.inbox-read-at {
    color: #a6cf98;
}

/* header layout tidy */
.main-header .header-inner {
    display: grid;
    grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 0.7rem 1rem;
    min-height: 0;
    padding: 0.65rem 0 0.75rem;
}

.main-header .logo-wrap {
    grid-column: 1;
    grid-row: 1;
}

.main-header .auth-user,
.main-header .auth-links {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.45rem;
}

.main-header .auth-user form {
    margin: 0;
}

.main-header .main-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
    gap: 0.5rem;
    padding-top: 0.45rem;
    border-top: 1px solid rgba(138, 104, 60, 0.48);
}

.main-header .main-nav a {
    padding: 0.42rem 0.68rem;
    line-height: 1.08;
}

.main-header .ghost-btn,
.main-header .solid-btn {
    padding: 0.42rem 0.72rem;
    white-space: nowrap;
}

.main-header .user-pill {
    padding: 0.31rem 0.68rem;
    font-size: 0.84rem;
    white-space: nowrap;
}

.main-header .nav-badge {
    margin-left: 0.12rem;
}

@media (max-width: 1240px) {
    .main-header .header-inner {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 0.62rem;
    }

    .main-header .logo-wrap {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
    }

    .main-header .auth-user,
    .main-header .auth-links {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
        justify-content: flex-start;
    }

    .main-header .main-nav {
        grid-column: 1;
        grid-row: 3;
    }
}

@media (max-width: 760px) {
    .main-header .main-nav a span,
    .main-header .ghost-btn span,
    .main-header .solid-btn span {
        font-size: 0.92rem;
    }

    .main-header .main-nav {
        gap: 0.42rem;
    }
}


/* contact discord cta */
.contact-discord-strip {
    margin-bottom: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    flex-wrap: wrap;
    border-color: #3d6fb9 !important;
    background: linear-gradient(135deg, rgba(51, 92, 153, 0.34), rgba(40, 65, 128, 0.46));
}

.contact-discord-strip > span {
    font-size: 1rem;
    font-weight: 700;
    color: #d6e5ff;
}

.discord-invite-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 46px;
    padding: 0.62rem 1.35rem;
    border-radius: 999px;
    border: 1px solid #476de7;
    background: linear-gradient(180deg, #6e89ff 0%, #4c68e8 100%);
    color: #f6f9ff;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.15px;
    box-shadow: 0 10px 22px rgba(47, 77, 184, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.discord-invite-cta i {
    font-size: 1.15rem;
}

.discord-invite-cta:hover {
    transform: translateY(-1px);
    filter: brightness(1.03);
    box-shadow: 0 12px 24px rgba(47, 77, 184, 0.44), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.discord-invite-cta:focus-visible {
    outline: 2px solid rgba(151, 179, 255, 0.95);
    outline-offset: 2px;
}

@media (max-width: 760px) {
    .contact-discord-strip {
        align-items: stretch;
    }

    .discord-invite-cta {
        width: 100%;
    }
}