html {
    min-height: 100%;
    overflow-x: hidden;
}

body {
    min-height: 100%;
    margin: 0;
    color: #172026;
    background:
        linear-gradient(180deg, #071018 0, #102529 360px, #f5f7f8 920px);
    font-family: "Segoe UI", "Malgun Gothic", Arial, sans-serif;
    overflow-x: hidden;
}

.legal-hero {
    padding: 88px 0 54px;
    background:
        radial-gradient(circle at 82% 20%, rgba(126, 213, 206, 0.16), transparent 34%),
        linear-gradient(135deg, #071418 0%, #102a2c 58%, #152a28 100%);
    color: #fff;
}

.legal-hero h1 {
    margin: 8px 0 14px;
    color: #fff;
    font-size: clamp(2.35rem, 7vw, 5rem);
    line-height: 1.02;
}

.legal-hero p {
    max-width: 760px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.08rem;
    line-height: 1.75;
}

.legal-page {
    display: grid;
    gap: 18px;
}

.legal-card {
    border: 1px solid rgba(36, 86, 83, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 40px rgba(12, 31, 32, 0.08);
    padding: clamp(22px, 4vw, 34px);
}

.legal-card h2 {
    margin: 0 0 12px;
    color: #102024;
    font-size: clamp(1.35rem, 3.5vw, 2rem);
}

.legal-card p {
    margin: 0;
    color: #344448;
    font-size: 1.02rem;
    line-height: 1.85;
}

.legal-card p + p {
    margin-top: 14px;
}

.legal-card a {
    color: #245d59;
    font-weight: 800;
}

.legal-updated {
    color: #69777a !important;
    font-size: 0.95rem !important;
}

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

.legal-link-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

@media (max-width: 767px) {
    .legal-hero {
        padding: 54px 0 34px;
    }

    .legal-hero h1 {
        font-size: clamp(2.2rem, 12vw, 3.4rem);
        word-break: keep-all;
    }

    .legal-hero p,
    .legal-card p {
        font-size: 0.98rem;
    }

    .legal-page,
    .contact-page {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .legal-card {
        padding: 22px 18px;
    }
}

body.admin-route {
    background: #f5f7f8;
}

body.public-route {
    background: #eef4f2;
}

a {
    color: #17635b;
    text-decoration: none;
}

a:hover {
    color: #0f4742;
    text-decoration: underline;
}

.arka-nav {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(12, 24, 29, 0.88);
    border-bottom: 1px solid rgba(137, 244, 232, 0.14);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(18px);
}

.arka-brand {
    color: #fff;
    font-weight: 900;
    letter-spacing: 0;
    text-shadow: 0 0 18px rgba(137, 244, 232, 0.22);
}

.arka-nav .navbar-nav {
    align-items: center;
    gap: 2px;
}

.arka-nav .nav-link {
    border-radius: 8px;
    padding: 8px 11px;
    color: rgba(255, 255, 255, 0.76);
    font-weight: 800;
}

.arka-nav .nav-link:hover,
.arka-nav .nav-link:focus {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    text-decoration: none;
}

.arka-nav .nav-link-strong {
    color: #f0c65c;
}

.arka-nav .nav-auth-item {
    margin-left: auto;
}

.arka-nav .nav-link-member {
    color: rgba(255, 255, 255, 0.88);
}

.arka-nav .nav-link-join {
    margin-left: 4px;
    border: 1px solid rgba(240, 198, 92, 0.45);
    color: #f6d77b;
    background: rgba(240, 198, 92, 0.08);
}

.arka-nav .nav-link-join:hover,
.arka-nav .nav-link-join:focus {
    color: #152126;
    background: #f0c65c;
}

.arka-nav .navbar-nav .nav-link-notice {
    color: #f6d77b;
}

.arka-nav .navbar-nav .nav-link-notice:hover,
.arka-nav .navbar-nav .nav-link-notice:focus {
    color: #152126;
    background: #f0c65c;
}

.arka-dropdown-menu {
    min-width: 180px;
    border: 1px solid #d8e3e0;
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 18px 44px rgba(21, 33, 38, 0.18);
}

.arka-dropdown-menu .dropdown-item {
    border-radius: 6px;
    padding: 9px 10px;
    color: #172026;
    font-weight: 800;
}

.arka-dropdown-menu .dropdown-item:hover,
.arka-dropdown-menu .dropdown-item:focus {
    color: #0f4742;
    background: #eef6f4;
}

.nav-mobile-sub {
    display: none;
}

.body-content {
    min-height: calc(100vh - 142px);
    width: 100%;
    overflow-x: clip;
}

.arka-hero {
    color: #fff;
    background:
        linear-gradient(105deg, rgba(13, 21, 24, 0.94), rgba(20, 66, 63, 0.78)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='800' viewBox='0 0 1600 800'%3E%3Crect width='1600' height='800' fill='%231b2c31'/%3E%3Cg fill='none' stroke='%236bb4a8' stroke-opacity='.22'%3E%3Cpath d='M0 640 C240 560 320 720 560 640 S920 520 1180 610 1440 720 1600 660'/%3E%3Cpath d='M0 260 C210 220 310 360 520 300 S890 180 1110 280 1400 410 1600 330'/%3E%3Cpath d='M210 0 L430 800 M760 0 L620 800 M1210 0 L1380 800'/%3E%3C/g%3E%3Ccircle cx='1130' cy='250' r='120' fill='%23d9b650' fill-opacity='.18'/%3E%3C/svg%3E");
    background-size: cover;
    background-position: center;
    padding: 104px 0 88px;
}

.arka-hero h1 {
    max-width: 820px;
    margin: 0;
    font-size: 56px;
    line-height: 1.08;
    font-weight: 800;
}

.hero-copy {
    max-width: 620px;
    margin: 22px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 20px;
    line-height: 1.65;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.page-header {
    color: #fff;
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(115deg, rgba(7, 16, 24, 0.96), rgba(14, 42, 45, 0.9)),
        url("/Content/arka-hero-celestial-archive.png");
    background-size: cover;
    background-position: center right;
    padding: 76px 0 64px;
}

.page-header::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(137, 244, 232, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(137, 244, 232, 0.035) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(90deg, rgba(0,0,0,0.62), rgba(0,0,0,0.18) 70%, rgba(0,0,0,0));
}

.page-header .container {
    position: relative;
    z-index: 1;
}

.page-header h1 {
    margin: 0;
    font-size: clamp(40px, 4.6vw, 72px);
    line-height: 0.98;
    font-weight: 900;
    text-shadow: 0 16px 54px rgba(0, 0, 0, 0.46);
}

.page-header p:last-child {
    max-width: 720px;
    margin: 16px 0 0;
    color: rgba(255, 255, 255, 0.76);
    font-size: 18px;
}

.eyebrow {
    margin: 0 0 12px;
    color: #d0a83f;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.arka-section {
    padding-top: 52px;
    padding-bottom: 52px;
}

.section-heading {
    margin-bottom: 22px;
}

.section-heading h2,
.content-block h2,
.fact-panel h2,
.notice-panel h2 {
    margin: 0;
    font-size: 26px;
    line-height: 1.25;
    font-weight: 800;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.feature-card,
.entity-list a,
.notice-panel,
.fact-panel {
    display: block;
    height: 100%;
    color: #172026;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(242, 249, 247, 0.96));
    border: 1px solid rgba(137, 176, 169, 0.34);
    border-radius: 8px;
    padding: 22px;
    box-shadow: 0 18px 44px rgba(21, 33, 38, 0.1);
}

.feature-card:hover,
.entity-list a:hover {
    border-color: rgba(47, 143, 131, 0.58);
    box-shadow: 0 22px 54px rgba(21, 33, 38, 0.14);
    transform: translateY(-2px);
    text-decoration: none;
}

.codex-clean-card,
.community-board-card,
.community-thread-card,
.community-side-card,
.community-write-panel,
.community-article,
.community-empty,
.community-read,
.community-reply-list,
.community-reply-write {
    border-color: rgba(137, 176, 169, 0.34);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(242, 249, 247, 0.96));
    box-shadow: 0 18px 44px rgba(21, 33, 38, 0.1);
}

.codex-clean-card,
.community-board-card,
.community-thread-card {
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.codex-clean-card:hover,
.community-board-card:hover,
.community-thread-card:hover {
    border-color: rgba(47, 143, 131, 0.52);
    box-shadow: 0 22px 54px rgba(21, 33, 38, 0.14);
}

.feature-card span {
    display: block;
    color: #657276;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}

.feature-card strong {
    display: block;
    margin-top: 10px;
    font-size: 24px;
}

.feature-card p,
.entity-list span,
.link-list span,
.notice-panel p,
.content-block p {
    margin: 10px 0 0;
    color: #536167;
    line-height: 1.75;
}

.arka-two-column {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.8fr);
    gap: 32px;
}

.readable {
    max-width: 840px;
}

.content-block {
    margin-bottom: 26px;
}

.link-list,
.entity-list,
.chip-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.link-list {
    display: grid;
    gap: 12px;
}

.link-list li {
    display: grid;
    gap: 4px;
    padding: 16px 0;
    border-bottom: 1px solid #dfe6e5;
}

.link-list a {
    font-weight: 800;
}

.entity-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.entity-list strong {
    display: block;
    font-size: 22px;
}

.codex-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.codex-list a {
    overflow: hidden;
    padding: 0;
}

.codex-list img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center top;
    background: #10151b;
}

.codex-list strong,
.codex-list span {
    padding-right: 18px;
    padding-left: 18px;
}

.codex-list strong {
    padding-top: 18px;
}

.codex-list span {
    display: block;
    padding-bottom: 18px;
}

.codex-portrait {
    margin: 0 0 26px;
}

.codex-portrait img {
    display: block;
    width: min(100%, 520px);
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center top;
    border: 1px solid #202b33;
    border-radius: 8px;
    background: #10151b;
}

.codex-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 30px;
    align-items: start;
}

.codex-main {
    display: grid;
    gap: 18px;
}

.codex-clean-card {
    border: 1px solid #dde5e4;
    border-radius: 8px;
    padding: 22px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(21, 33, 38, 0.06);
}

.codex-clean-card h2,
.codex-clean-card h3 {
    margin-top: 0;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.compact-heading {
    margin-bottom: 14px;
}

.codex-clean-card p {
    margin: 0 0 12px;
    color: #39474c;
    font-size: 16px;
    line-height: 1.8;
}

.codex-clean-card p:last-child {
    margin-bottom: 0;
}

.codex-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.codex-gallery-image {
    display: block;
    overflow: hidden;
    border: 1px solid #dde5e4;
    border-radius: 8px;
    background: #10151b;
}

.codex-gallery-image img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center top;
    transition: transform 180ms ease;
}

.codex-gallery-image:hover img,
.codex-gallery-image:focus img {
    transform: scale(1.03);
}

.poster-gallery-hero {
    position: relative;
    display: grid;
    align-items: end;
    min-height: min(74vh, 720px);
    overflow: hidden;
    padding: 110px 0 52px;
    color: #fff;
    background: #10151b;
}

.poster-gallery-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(10, 16, 19, 0.92), rgba(10, 16, 19, 0.42) 48%, rgba(10, 16, 19, 0.76));
}

.poster-gallery-hero > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    filter: saturate(0.95);
}

.poster-gallery-hero .container {
    position: relative;
    z-index: 2;
}

.poster-gallery-hero h1 {
    max-width: 760px;
    margin: 0 0 14px;
    font-size: clamp(46px, 8vw, 104px);
    line-height: 0.92;
    letter-spacing: 0;
}

.poster-gallery-hero p:not(.eyebrow) {
    max-width: 560px;
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 18px;
    line-height: 1.7;
}

.poster-gallery-page {
    padding-top: 34px;
}

.poster-gallery-grid {
    column-count: 3;
    column-gap: 18px;
}

.poster-gallery-item {
    display: inline-block;
    width: 100%;
    margin: 0 0 18px;
    overflow: hidden;
    border: 1px solid #d9e2e0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(20, 30, 34, 0.08);
    break-inside: avoid;
}

.poster-gallery-item a {
    display: block;
    background: #10151b;
}

.poster-gallery-item img {
    display: block;
    width: 100%;
    height: auto;
}

.poster-gallery-item figcaption {
    display: grid;
    gap: 4px;
    padding: 13px 14px 15px;
}

.poster-gallery-item figcaption strong {
    color: #172026;
    font-size: 15px;
    font-weight: 900;
}

.poster-gallery-item figcaption span {
    color: #5d6a70;
    font-size: 13px;
    line-height: 1.55;
}

.poster-gallery-empty {
    border: 1px dashed #cbd7d5;
    border-radius: 8px;
    padding: 34px;
    background: #f8faf9;
}

.clean-fact-grid {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 10px 16px;
    margin: 0;
}

.clean-fact-grid dt {
    color: #657276;
    font-weight: 900;
}

.clean-fact-grid dd {
    margin: 0;
    color: #172026;
    line-height: 1.6;
}

.codex-side-panel {
    position: sticky;
    top: 18px;
}

.fact-panel {
    align-self: start;
}

.fact-panel dl {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 8px 14px;
    margin: 20px 0 24px;
}

.fact-panel dt {
    color: #647175;
    font-weight: 700;
}

.fact-panel dd {
    margin: 0;
}

.fact-panel h3 {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 800;
}

.chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chip-list li {
    border: 1px solid #d2ddda;
    border-radius: 999px;
    padding: 6px 10px;
    color: #39474c;
    background: #f8faf9;
    font-size: 13px;
}

.notice-panel {
    border-left: 4px solid #d0a83f;
}

.timeline-list {
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.timeline-list li {
    position: relative;
    padding: 18px 20px 18px 28px;
    background: #fff;
    border: 1px solid #dde5e4;
    border-radius: 8px;
}

.timeline-list li::before {
    position: absolute;
    top: 24px;
    left: 12px;
    width: 8px;
    height: 8px;
    content: "";
    background: #d0a83f;
    border-radius: 50%;
}

.timeline-list span {
    display: block;
    color: #657276;
    font-size: 13px;
    font-weight: 700;
}

.timeline-list strong {
    display: block;
    margin-top: 6px;
    font-size: 20px;
}

.timeline-list p {
    margin: 8px 0 0;
    color: #536167;
    line-height: 1.7;
}

.timeline-hero {
    padding: 96px 0 70px;
    color: #fff;
    background: linear-gradient(135deg, rgba(12, 20, 24, 0.98), rgba(16, 31, 36, 0.94)), #10151b;
}

.timeline-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 28px;
    align-items: end;
}

.timeline-hero h1 {
    max-width: 820px;
    margin: 0 0 16px;
    font-size: clamp(42px, 7vw, 86px);
    line-height: 0.96;
    letter-spacing: 0;
}

.timeline-hero p:not(.eyebrow) {
    max-width: 780px;
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 17px;
    line-height: 1.8;
}

.timeline-season-card,
.timeline-progress-panel,
.timeline-episode-panel,
.timeline-empty-state,
.timeline-event-card {
    border: 1px solid #dde5e4;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(20, 30, 34, 0.07);
}

.timeline-season-card {
    display: grid;
    gap: 4px;
    border-color: rgba(255, 255, 255, 0.14);
    padding: 20px;
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

.timeline-season-card span,
.timeline-season-card em {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
}

.timeline-season-card strong {
    color: #fff;
    font-size: 54px;
    line-height: 1;
}

.timeline-season-card a {
    margin-top: 8px;
    color: #e1b745;
    font-weight: 900;
}

.timeline-page,
.timeline-main-flow {
    display: grid;
    gap: 28px;
}

.timeline-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.65fr);
    gap: 16px;
}

.timeline-progress-panel {
    padding: 22px;
}

.timeline-progress-track {
    overflow: hidden;
    height: 12px;
    border-radius: 999px;
    background: #e6eeec;
}

.timeline-progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #17635b, #e1b745);
}

.timeline-progress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
}

.timeline-progress-meta strong {
    color: #172026;
    font-size: 18px;
    font-weight: 900;
}

.timeline-progress-meta span {
    color: #657276;
    font-size: 13px;
    font-weight: 800;
}

.timeline-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    gap: 28px;
    align-items: start;
}

.timeline-road {
    position: relative;
    display: grid;
    gap: 18px;
    margin: 0;
    padding: 0 0 0 28px;
    list-style: none;
}

.timeline-road::before {
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 8px;
    width: 2px;
    content: "";
    background: #cfdad8;
}

.timeline-road li {
    position: relative;
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.timeline-marker {
    position: relative;
    padding-top: 4px;
}

.timeline-marker::before {
    position: absolute;
    top: 10px;
    left: -25px;
    width: 14px;
    height: 14px;
    border: 3px solid #fff;
    border-radius: 999px;
    content: "";
    background: #e1b745;
    box-shadow: 0 0 0 2px #d7e2e0;
}

.timeline-marker span {
    display: inline-flex;
    max-width: 100%;
    border-radius: 999px;
    padding: 5px 9px;
    color: #17635b;
    background: #e8f4f1;
    font-size: 12px;
    font-weight: 900;
}

.timeline-event-card {
    display: grid;
    gap: 10px;
    padding: 20px;
}

.timeline-event-card h3 {
    margin: 0;
    color: #172026;
    font-size: 24px;
    line-height: 1.25;
}

.timeline-event-card p {
    margin: 0;
    color: #39474c;
    line-height: 1.75;
}

.timeline-summary-source {
    justify-self: start;
    border-radius: 999px;
    padding: 3px 8px;
    color: #17635b;
    background: #e8f4f1;
    font-size: 11px;
    font-weight: 900;
}

.timeline-event-card a,
.timeline-episode-list a {
    color: #17635b;
    font-size: 13px;
    font-weight: 900;
}

.timeline-empty-state {
    padding: 28px;
}

.timeline-empty-state h2 {
    margin-top: 0;
}

.timeline-episode-panel {
    position: sticky;
    top: 86px;
    padding: 22px;
}

.timeline-episode-list {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.timeline-episode-list li {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    border-top: 1px solid #e4ebe9;
    padding-top: 12px;
    scroll-margin-top: 96px;
}

.timeline-episode-list li:target {
    border-radius: 8px;
    margin: -8px;
    padding: 12px 8px 8px;
    background: #fff8df;
    box-shadow: 0 0 0 2px rgba(208, 168, 63, 0.35);
}

.timeline-episode-list li > span {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    color: #172026;
    background: #f3f6f5;
    font-weight: 900;
}

.timeline-episode-list strong {
    display: block;
    color: #172026;
    font-weight: 900;
}

.timeline-episode-list p {
    margin: 5px 0 6px;
    color: #5b686d;
    font-size: 13px;
    line-height: 1.55;
}

.timeline-episode-summary {
    margin: 2px 0 6px;
}

.timeline-episode-summary summary {
    display: inline-flex;
    cursor: pointer;
    color: #17635b;
    font-size: 12px;
    font-weight: 900;
}

.timeline-episode-summary p {
    margin: 8px 0 0;
    border-left: 3px solid #d8e3e0;
    padding-left: 10px;
}

.timeline-admin-live-board {
    display: grid;
    gap: 14px;
    margin: 18px 0 22px;
    border: 1px solid #d8e3e0;
    border-radius: 8px;
    padding: 18px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(20, 34, 38, 0.06);
}

.timeline-admin-live-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
}

.timeline-admin-live-head h2 {
    margin: 0;
    font-size: 22px;
    line-height: 1.25;
}

.timeline-admin-live-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.timeline-admin-live-grid article {
    border: 1px solid #e2ebe8;
    border-radius: 8px;
    padding: 14px;
    background: #f8fbfa;
}

.timeline-admin-live-grid article > strong {
    display: block;
    margin-bottom: 10px;
    color: #172026;
    font-size: 15px;
}

.timeline-admin-live-grid ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.timeline-admin-live-grid li {
    display: grid;
    gap: 2px;
    border-top: 1px solid #e3ebe8;
    padding-top: 8px;
}

.timeline-admin-live-grid li:first-child {
    border-top: 0;
    padding-top: 0;
}

.timeline-admin-live-grid span {
    color: #172026;
    font-weight: 900;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.timeline-admin-live-grid em {
    color: #637174;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.timeline-page-link-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.6fr);
    gap: 14px;
    padding: 14px;
}

.timeline-page-link-note {
    align-self: stretch;
    display: grid;
    align-content: center;
    gap: 6px;
    border: 1px solid #e2ebe8;
    border-radius: 8px;
    padding: 14px;
    background: #f8fbfa;
}

.timeline-page-link-note strong {
    color: #172026;
}

.timeline-page-link-note span {
    color: #59686b;
    line-height: 1.6;
}

.compact-list li {
    padding: 12px 0;
}

.admin-header {
    color: #fff;
    background: #11191d;
    padding: 46px 0;
}

.admin-header h1 {
    margin: 0;
    font-size: 38px;
    font-weight: 800;
}

.admin-header p:last-child {
    max-width: 780px;
    margin: 14px 0 0;
    color: rgba(255, 255, 255, 0.72);
}

.admin-page {
    box-sizing: border-box;
    width: min(100%, 1520px);
    margin: 0 auto;
    padding: 34px 28px 72px;
}

.admin-page .admin-hero {
    display: flex;
    justify-content: space-between;
    gap: 28px;
    align-items: end;
    margin-bottom: 8px;
}

.admin-page .admin-hero h1 {
    margin: 0;
    font-size: 38px;
    line-height: 1.15;
}

.admin-page .admin-hero p:last-child {
    max-width: 760px;
    margin: 12px 0 0;
    color: #46575c;
    line-height: 1.65;
}

.admin-page .admin-hero-actions {
    flex: 0 0 auto;
    margin-top: 0;
}

.admin-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    border-radius: 8px;
    border: 1px solid #cfdad8;
    padding: 8px 12px;
    color: #172026;
    background: #fff;
    font-weight: 900;
    text-decoration: none;
}

.admin-page .btn-primary,
.admin-page .btn.btn-primary {
    border-color: #17635b;
    color: #fff;
    background: #17635b;
}

.admin-page .btn-sm {
    min-height: 34px;
    padding: 7px 11px;
    font-size: 13px;
}

.admin-page .btn.danger {
    border-color: #edd4d0;
    color: #9d1c1c;
    background: #fff7f6;
}

.admin-home-header {
    padding: 58px 0 52px;
}

.admin-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.admin-hero-actions .admin-button:not(.primary) {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.22);
}

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

.admin-stat-grid-clean {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.admin-stat {
    display: grid;
    align-content: start;
    min-height: 132px;
    background: #fff;
    border: 1px solid #dde5e4;
    border-radius: 8px;
    padding: 16px 18px;
    overflow: hidden;
}

.admin-stat span {
    display: block;
    color: #657276;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
    word-break: keep-all;
    overflow-wrap: normal;
}

.admin-stat strong {
    display: block;
    margin-top: 10px;
    color: #172026;
    font-size: 30px;
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: 0;
    word-break: keep-all;
    overflow-wrap: normal;
}

.admin-stat-link {
    color: #172026;
    text-decoration: none;
}

.admin-stat-link:hover {
    color: #172026;
    text-decoration: none;
    border-color: #83b7ae;
}

.admin-stat.needs-attention {
    border-color: #e2b4a5;
    background: #fff8f5;
}

.admin-stat.needs-attention strong {
    color: #9a332d;
}

.admin-search-home {
    padding-bottom: 0;
}

.admin-search-panel {
    max-width: none;
}

.admin-search-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

.admin-search-results {
    display: grid;
    gap: 10px;
}

.admin-search-result {
    display: grid;
    gap: 6px;
    border: 1px solid #dde5e4;
    border-radius: 8px;
    padding: 14px;
    background: #fff;
}

.admin-search-result span {
    color: #17635b;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.admin-search-result strong {
    color: #172026;
    font-size: 18px;
}

.admin-search-result p,
.admin-search-result small {
    margin: 0;
    overflow-wrap: anywhere;
    color: #536167;
}

.admin-command-center {
    padding-top: 24px;
    padding-bottom: 28px;
}

.admin-command-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
    gap: 14px;
    align-items: stretch;
    margin-bottom: 14px;
}

.admin-command-main {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: 14px;
    min-width: 0;
}

.admin-command-status,
.admin-command-search,
.admin-notice-mini {
    border: 1px solid #d8e3e0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(20, 30, 34, 0.06);
}

.admin-command-status {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.8fr);
    gap: 16px;
    align-items: center;
    padding: 18px;
}

.admin-command-status.needs-attention {
    border-color: #e2b4a5;
    background: #fff8f5;
}

.admin-command-status h2,
.admin-command-search h2,
.admin-notice-mini h2 {
    margin: 0;
    color: #172026;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 900;
}

.admin-command-status p {
    margin: 8px 0 0;
    color: #536167;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.admin-command-status dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.admin-command-status dl div {
    min-width: 0;
    border: 1px solid #e0e8e6;
    border-radius: 8px;
    padding: 10px 12px;
    background: #f8faf9;
}

.admin-command-status dt {
    color: #657276;
    font-size: 12px;
    font-weight: 900;
}

.admin-command-status dd {
    margin: 4px 0 0;
    color: #172026;
    font-size: 20px;
    line-height: 1.1;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.admin-command-search {
    display: grid;
    align-content: center;
    gap: 14px;
    padding: 18px;
}

.admin-command-search .eyebrow,
.admin-command-status .eyebrow,
.admin-notice-mini .eyebrow {
    margin-bottom: 7px;
}

.admin-command-search .admin-search-box {
    gap: 8px;
}

.admin-command-search .admin-search-box input {
    min-height: 44px;
}

.admin-command-search .admin-search-box .admin-button {
    min-height: 44px;
    padding-inline: 18px;
}

.admin-notice-mini {
    display: grid;
    align-content: start;
    gap: 8px;
    min-height: 100%;
    padding: 18px;
    background:
        linear-gradient(135deg, rgba(240, 198, 92, 0.16), rgba(255, 255, 255, 0) 46%),
        #fff;
}

.admin-notice-mini strong {
    color: #172026;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.admin-notice-mini small {
    color: #657276;
    line-height: 1.45;
    font-weight: 800;
}

.admin-notice-mini .admin-notice-actions {
    grid-template-columns: 1fr;
    margin-top: 6px;
}

.admin-guide-panel {
    max-width: 1040px;
    margin-bottom: 16px;
    border: 1px solid #d7e2df;
    border-radius: 8px;
    background: #fff;
}

.admin-guide-panel summary {
    cursor: pointer;
    padding: 13px 16px;
    color: #172026;
    font-weight: 900;
}

.admin-guide-panel ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0 18px 16px 34px;
    color: #536167;
}

.admin-guide-panel strong {
    color: #17635b;
}

.admin-preflight-panel {
    display: grid;
    gap: 10px;
    margin: 14px 0 18px;
    border: 1px solid #d7e2df;
    border-radius: 8px;
    padding: 14px;
    background: #f8faf9;
}

.admin-preflight-panel strong,
.admin-preflight-panel summary {
    color: #172026;
    font-weight: 900;
}

.admin-preflight-panel ul {
    display: grid;
    gap: 5px;
    margin: 8px 0 0 18px;
    padding: 0;
    color: #536167;
}

.admin-preflight-panel pre {
    max-height: 320px;
    overflow: auto;
    border: 1px solid #dde5e4;
    border-radius: 8px;
    padding: 12px;
    white-space: pre-wrap;
    background: #fff;
}

.resource-bulk-bar {
    display: grid;
    grid-template-columns: minmax(170px, 0.7fr) minmax(180px, 1fr) auto auto;
    gap: 8px;
    align-items: center;
    border: 1px solid #dde5e4;
    border-radius: 8px;
    padding: 10px;
    background: #f8faf9;
}

.resource-bulk-bar span {
    color: #536167;
    font-size: 13px;
    font-weight: 900;
}

.resource-select-row {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    margin: 0;
    color: #536167;
    font-size: 12px;
    font-weight: 900;
}

.resource-select-row input {
    width: auto;
}

.admin-ops-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.ops-simple-list,
.ops-log-list,
.admin-guide-book {
    display: grid;
    gap: 10px;
}

.ops-simple-list article,
.ops-log-list article,
.admin-guide-book article {
    display: grid;
    gap: 5px;
    border: 1px solid #dde5e4;
    border-radius: 8px;
    padding: 12px;
    background: #fff;
}

.ops-simple-list strong,
.ops-log-list strong,
.admin-guide-book h2 {
    margin: 0;
    color: #172026;
}

.ops-simple-list span,
.ops-simple-list code,
.ops-log-list span,
.ops-log-list code,
.ops-log-list p,
.admin-guide-book p {
    margin: 0;
    overflow-wrap: anywhere;
    color: #536167;
}

.ops-simple-list form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.admin-workbench {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: 16px;
}

.admin-command-card {
    display: grid;
    min-height: 210px;
    align-content: space-between;
    gap: 14px;
    border: 1px solid #dde5e4;
    border-radius: 8px;
    padding: 22px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(21, 33, 38, 0.06);
}

.admin-command-card.primary-command {
    background: #102326;
    color: #fff;
    border-color: #102326;
}

.admin-command-card span {
    color: #657276;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.admin-command-card.primary-command span {
    color: #f0c65c;
}

.admin-command-card h2 {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
}

.admin-command-card p {
    margin: 0;
    color: #536167;
    line-height: 1.7;
}

.admin-command-card.primary-command p {
    color: rgba(255, 255, 255, 0.76);
}

.admin-flow {
    border: 1px solid #dde5e4;
    border-radius: 8px;
    padding: 22px;
    background: #fff;
}

.admin-flow-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.admin-flow-list li {
    display: grid;
    gap: 8px;
    min-height: 170px;
    align-content: start;
    border: 1px solid #dce6e4;
    border-radius: 8px;
    padding: 16px;
    background: #f8faf9;
}

.admin-flow-list strong {
    color: #172026;
    font-size: 17px;
}

.admin-flow-list span {
    color: #536167;
    line-height: 1.6;
}

.admin-flow-list a {
    align-self: end;
    font-weight: 800;
}

.easy-guide {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 18px;
    border: 1px solid #d8e3e0;
    border-radius: 8px;
    padding: 22px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(21, 33, 38, 0.06);
}

.easy-guide.compact-guide {
    align-items: start;
    margin-bottom: 18px;
}

.easy-guide h2 {
    margin: 0 0 14px;
    font-size: 28px;
    font-weight: 800;
}

.easy-guide p {
    color: #536167;
    line-height: 1.75;
}

.easy-steps {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.easy-steps li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
    align-items: center;
    border: 1px solid #dde5e4;
    border-radius: 8px;
    padding: 14px;
    background: #f8faf9;
}

.easy-steps strong {
    color: #172026;
    font-size: 17px;
}

.easy-steps span {
    color: #536167;
    line-height: 1.55;
}

.easy-steps a {
    grid-row: span 2;
}

.easy-terms {
    border: 1px solid #d7e2df;
    border-radius: 8px;
    padding: 16px;
    background: #f6fbfa;
}

.easy-terms h3 {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 800;
}

.easy-terms dl {
    display: grid;
    gap: 8px;
    margin: 0;
}

.easy-terms dt {
    color: #17635b;
    font-weight: 800;
}

.easy-terms dd {
    margin: -6px 0 4px;
    color: #536167;
    line-height: 1.55;
}

.simple-action-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.simple-action-card {
    display: grid;
    min-height: 190px;
    gap: 10px;
    align-content: start;
    color: #172026;
    background: #fff;
    border: 1px solid #dde5e4;
    border-radius: 8px;
    padding: 20px;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(21, 33, 38, 0.06);
}

.simple-action-card:hover {
    color: #172026;
    border-color: #83b7ae;
    text-decoration: none;
}

.simple-action-card.primary-simple {
    color: #fff;
    background: #102326;
    border-color: #102326;
}

.simple-action-card span {
    color: #657276;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.simple-action-card.primary-simple span {
    color: #f0c65c;
}

.simple-action-card strong {
    font-size: 25px;
    line-height: 1.2;
}

.simple-action-card p {
    margin: 0;
    color: #536167;
    line-height: 1.65;
}

.simple-action-card.primary-simple p {
    color: rgba(255, 255, 255, 0.76);
}

.admin-help-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: center;
    margin-bottom: 16px;
    border: 1px solid #d7e2df;
    border-left: 4px solid #d0a83f;
    border-radius: 8px;
    padding: 14px 16px;
    color: #172026;
    background: #fffdf5;
}

.admin-help-strip strong {
    font-size: 16px;
}

.admin-help-strip span {
    flex: 1 1 420px;
    color: #536167;
}

.admin-filter-bar {
    display: grid;
    grid-template-columns: minmax(240px, 360px) minmax(0, 1fr);
    gap: 12px;
    align-items: end;
    margin-bottom: 14px;
    border: 1px solid #d8e3e0;
    border-radius: 8px;
    padding: 14px;
    background: #fff;
}

.admin-filter-bar label {
    display: grid;
    gap: 6px;
    margin: 0;
    font-weight: 800;
}

.admin-filter-bar span {
    color: #536167;
    font-size: 12px;
    text-transform: uppercase;
}

.admin-filter-bar input {
    width: 100%;
    max-width: none;
    border: 1px solid #cfdad8;
    border-radius: 8px;
    padding: 10px 12px;
}

.segmented-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.segmented-filter button {
    min-height: 38px;
    border: 1px solid #cfdad8;
    border-radius: 8px;
    padding: 8px 12px;
    color: #172026;
    background: #fff;
    font-weight: 800;
}

.segmented-filter button.active {
    color: #fff;
    background: #17635b;
    border-color: #17635b;
}

.friendly-table strong,
.friendly-table small {
    display: block;
}

.friendly-table small {
    margin-top: 5px;
    color: #657276;
    font-size: 12px;
    overflow-wrap: anywhere;
}

.status-pill {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 12px;
    font-weight: 900;
}

.status-pill.good {
    color: #0f4f47;
    background: #e5f4f1;
}

.status-pill.muted {
    color: #6b5250;
    background: #f4eceb;
}

.admin-global-return {
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid rgba(16, 34, 37, 0.12);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(10px);
}

.admin-global-return .container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.admin-work-directory {
    display: flex;
    flex: 1 1 auto;
    gap: 8px;
    align-items: center;
    min-width: 0;
}

.admin-global-home,
.admin-global-site,
.admin-directory-menu summary {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    border: 1px solid #cfdad8;
    border-radius: 8px;
    padding: 8px 12px;
    text-decoration: none;
    font-weight: 900;
}

.admin-global-shortcuts {
    display: flex;
    flex: 1 1 auto;
    gap: 6px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.admin-global-shortcuts::-webkit-scrollbar {
    display: none;
}

.admin-global-shortcuts a {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid #dce7e4;
    border-radius: 8px;
    padding: 8px 11px;
    color: #243238;
    background: #f6fbfa;
    text-decoration: none;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.admin-global-shortcuts a:first-child {
    color: #0f4c46;
    border-color: #9ecbc4;
    background: #e9f7f4;
}

.admin-global-shortcuts a:hover,
.admin-global-shortcuts a:focus-visible {
    color: #172026;
    border-color: #9ecbc4;
    background: #eef8f6;
    text-decoration: none;
}

.admin-directory-menu {
    position: relative;
    flex: 0 0 auto;
}

.admin-directory-menu summary {
    color: #172026;
    background: #fff;
    cursor: pointer;
    list-style: none;
}

.admin-directory-menu summary::-webkit-details-marker {
    display: none;
}

.admin-directory-menu summary::after {
    content: ">";
    margin-left: 8px;
    color: #6a777b;
    font-size: 11px;
}

.admin-directory-panel {
    position: fixed;
    top: 86px;
    right: max(16px, calc((100vw - 1520px) / 2 + 28px));
    z-index: 30;
    display: grid;
    grid-template-columns: repeat(3, minmax(150px, 1fr));
    gap: 8px;
    width: min(660px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    max-height: min(74vh, 560px);
    overflow: auto;
    border: 1px solid #cfdad8;
    border-radius: 8px;
    padding: 10px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(21, 33, 38, 0.18);
}

.admin-directory-panel a {
    display: grid;
    gap: 3px;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 10px;
    color: #172026;
    text-decoration: none;
    min-width: 0;
}

.admin-directory-panel a:hover {
    border-color: #cfdad8;
    background: #f6fbfa;
    text-decoration: none;
}

.admin-directory-panel strong {
    font-size: 14px;
}

.admin-directory-panel span {
    color: #6a777b;
    font-size: 12px;
    font-weight: 700;
}

.admin-global-home {
    color: #fff;
    border-color: #17635b;
    background: #17635b;
}

.admin-global-site {
    color: #172026;
    background: #fff;
}

.admin-global-home:hover,
.admin-global-site:hover,
.admin-directory-menu summary:hover {
    text-decoration: none;
    filter: brightness(0.96);
}

.admin-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    gap: 14px;
    margin: 24px 0 18px;
}

.admin-metrics article {
    border: 1px solid #d8e3e0;
    border-radius: 8px;
    padding: 16px;
    background: #fff;
}

.admin-metrics article.needs-attention {
    border-color: #e6c9a4;
    background: #fff9ed;
}

.admin-metrics strong {
    display: block;
    color: #132728;
    font-size: 28px;
    line-height: 1;
}

.admin-metrics span {
    display: block;
    margin-top: 8px;
    color: #59686b;
    font-weight: 800;
}

.admin-warning-text {
    color: #9a4b16 !important;
    font-weight: 900;
}

.admin-filterbar {
    display: grid;
    grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
    gap: 16px;
    align-items: end;
    margin: 20px 0 28px;
    border: 1px solid #d8e3e0;
    border-radius: 8px;
    padding: 14px;
    background: #fff;
}

.admin-search {
    display: grid;
    gap: 6px;
}

.admin-search label {
    margin: 0;
    color: #536167;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.admin-search input {
    width: 100%;
    max-width: none;
    border: 1px solid #cfdad8;
    border-radius: 8px;
    padding: 10px 12px;
}

.admin-segments {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.admin-segments button {
    min-height: 38px;
    border: 1px solid #cfdad8;
    border-radius: 8px;
    padding: 8px 12px;
    color: #172026;
    background: #fff;
    font-weight: 900;
}

.admin-segments button.is-active {
    border-color: #17635b;
    color: #fff;
    background: #17635b;
}

.admin-section {
    margin: 36px 0;
}

.admin-section-heading {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: end;
    margin-bottom: 14px;
}

.admin-section-heading h2 {
    margin: 0;
}

.admin-section-heading > span {
    color: #59686b;
    font-weight: 900;
}

.admin-empty {
    border: 1px dashed #b8c8c4;
    border-radius: 8px;
    padding: 22px;
    background: #fbfdfc;
}

.admin-version-line {
    margin: -8px 0 12px;
    color: #657276;
    font-size: 12px;
    font-weight: 900;
    text-align: right;
}

.admin-home-menu-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.admin-runtime-section {
    margin: 28px 0 34px;
}

.admin-runtime-card {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
    gap: 20px;
    border: 1px solid #d8e3e0;
    border-radius: 8px;
    padding: 22px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(20, 34, 38, 0.06);
}

.admin-runtime-card.needs-attention {
    border-color: #d9b2aa;
    background: #fff8f6;
}

.admin-runtime-card h2 {
    margin: 0 0 8px;
    font-size: 24px;
    line-height: 1.25;
}

.admin-runtime-card p {
    margin: 0;
    color: #59686b;
    line-height: 1.65;
}

.admin-runtime-card dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.admin-runtime-card dl div {
    min-width: 0;
    border: 1px solid #e4ebe9;
    border-radius: 8px;
    padding: 10px 12px;
    background: #f8fbfa;
}

.admin-runtime-card dt {
    color: #647277;
    font-size: 12px;
    font-weight: 900;
}

.admin-runtime-card dd {
    margin: 4px 0 0;
    color: #172026;
    font-size: 15px;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.admin-runtime-error {
    margin-top: 12px;
    border-radius: 8px;
    padding: 10px 12px;
    color: #8d3328;
    background: #fdecea;
    font-weight: 900;
}

.admin-bulkbar {
    position: sticky;
    top: 0;
    z-index: 5;
    margin: 18px 0 10px;
}

.admin-bulkbar form {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto minmax(320px, auto);
    align-items: center;
    gap: 12px;
    border: 1px solid #d8e3e0;
    border-radius: 8px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 10px 24px rgba(20, 34, 38, 0.07);
    backdrop-filter: blur(10px);
}

.admin-check-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #334246;
    font-weight: 900;
}

.admin-check-row.compact {
    min-height: 40px;
}

.admin-check-row input,
.wiki-card-check input {
    width: 18px;
    height: 18px;
    accent-color: #17635b;
}

.admin-bulkbar-status {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    color: #59686b;
    font-weight: 900;
    white-space: nowrap;
}

.admin-bulkbar-status strong {
    color: #172026;
    font-size: 22px;
}

.admin-bulkbar-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.wiki-inline-status {
    min-height: 22px;
    margin: 10px 0 0;
}

.wiki-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 18px;
}

.wiki-admin-card {
    position: relative;
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 16px;
    border: 1px solid #d8e3e0;
    border-radius: 8px;
    padding: 16px 16px 16px 46px;
    background: #fff;
}

.wiki-card-check {
    position: absolute;
    top: 16px;
    left: 16px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
}

.wiki-admin-card-media {
    width: 108px;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 8px;
    display: grid;
    place-items: center;
    border: 1px solid #d8e3e0;
    color: #17635b;
    background: #eef5f3;
    font-size: 26px;
    font-weight: 900;
}

.wiki-admin-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wiki-admin-card-body {
    min-width: 0;
}

.wiki-admin-card-title {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: start;
}

.wiki-admin-card-title h3 {
    margin: 0;
    font-size: 20px;
    line-height: 1.25;
}

.wiki-admin-card-title span {
    flex: 0 0 auto;
    color: #59686b;
    font-size: 12px;
    font-weight: 900;
}

.wiki-admin-card-body p {
    margin: 10px 0 12px;
    color: #536167;
    line-height: 1.7;
}

.wiki-admin-card-body small {
    display: block;
    color: #7a8789;
    overflow-wrap: anywhere;
}

.admin-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.admin-pill {
    border-radius: 999px;
    padding: 4px 9px;
    color: #4d5c60;
    background: #eef2f1;
    font-size: 12px;
    font-weight: 900;
}

.admin-pill.is-public {
    color: #0f4f47;
    background: #e5f4f1;
}

.admin-pill.is-hidden {
    color: #7c433f;
    background: #f7e8e6;
}

.wiki-admin-card-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid #edf2f1;
}

.wiki-admin-card-actions form {
    margin: 0;
    min-width: 0;
}

.wiki-admin-card-actions > * {
    min-width: 0;
}

.wiki-admin-card-actions .btn,
.wiki-admin-card-actions button {
    box-sizing: border-box;
}

.admin-check-row.compact {
    min-height: 44px;
    cursor: pointer;
}

.admin-check-row.compact input {
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.wiki-admin-card {
    padding-left: 66px;
    cursor: pointer;
    transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease, transform 140ms ease;
}

.wiki-admin-card:hover,
.wiki-admin-card:focus {
    border-color: #83b7ae;
    box-shadow: 0 14px 32px rgba(20, 34, 38, 0.09);
    outline: none;
}

.wiki-admin-card:focus-visible {
    outline: 3px solid rgba(47, 102, 92, 0.22);
    outline-offset: 3px;
}

.wiki-admin-card.is-selected {
    border-color: #17635b;
    background: #f3faf8;
    box-shadow: 0 0 0 2px rgba(23, 99, 91, 0.18), 0 16px 36px rgba(20, 34, 38, 0.1);
}

.wiki-admin-card-actions,
.wiki-admin-card-actions *,
.wiki-card-check,
.wiki-card-check * {
    cursor: auto;
}

.wiki-card-check {
    top: 10px;
    left: 10px;
    z-index: 2;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(23, 99, 91, 0.22);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 8px 18px rgba(20, 34, 38, 0.12);
    cursor: pointer;
}

.wiki-card-check input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.wiki-card-check span {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 2px solid #9fb9b4;
    border-radius: 7px;
    background: #fff;
    transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.wiki-card-check input:focus-visible + span {
    outline: 3px solid rgba(47, 102, 92, 0.24);
    outline-offset: 3px;
}

.wiki-card-check input:checked + span {
    border-color: #17635b;
    background: #17635b;
    box-shadow: inset 0 0 0 3px #fff;
}

.wiki-card-check input:checked + span::after {
    content: "";
    width: 10px;
    height: 6px;
    border-bottom: 3px solid #fff;
    border-left: 3px solid #fff;
    transform: rotate(-45deg) translate(1px, -1px);
}

.wiki-admin-card.is-selected .wiki-card-check {
    border-color: rgba(23, 99, 91, 0.42);
    background: #e5f4f1;
}

.wiki-admin-card .btn,
.wiki-admin-card button,
.wiki-admin-card a {
    cursor: pointer;
}

@media (max-width: 1180px) {
    .admin-page {
        width: min(100%, 1280px);
        padding-right: 20px;
        padding-left: 20px;
    }

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

    .wiki-card-grid {
        grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    }

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

    .admin-bulkbar form {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .admin-bulkbar-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .admin-global-return .container {
        display: grid;
        grid-template-columns: 1fr;
        justify-content: stretch;
        gap: 10px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .admin-work-directory {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 8px;
    }

    .admin-global-home,
    .admin-global-site,
    .admin-directory-menu summary {
        flex: 1 1 0;
        min-height: 44px;
        padding: 9px 10px;
        font-size: 14px;
    }

    .admin-global-home {
        justify-content: flex-start;
    }

    .admin-global-shortcuts {
        grid-column: 1 / -1;
        order: 3;
        padding-bottom: 2px;
    }

    .admin-global-shortcuts a {
        min-height: 40px;
        padding: 8px 12px;
        font-size: 13px;
    }

    .admin-directory-menu {
        justify-self: end;
    }

    .admin-directory-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        top: 154px;
        right: 10px;
        width: min(100vw - 20px, 520px);
        max-height: 70vh;
        overflow: auto;
    }

    .admin-page {
        width: min(100%, 1520px);
        padding-right: 10px;
        padding-left: 10px;
        padding-top: 20px;
        padding-bottom: 48px;
    }

    .admin-page .admin-hero {
        display: grid;
        gap: 14px;
        align-items: start;
    }

    .admin-page .admin-hero h1 {
        font-size: 30px;
    }

    .admin-page .admin-hero p:last-child {
        font-size: 14px;
        line-height: 1.6;
    }

    .admin-page .admin-hero-actions,
    .admin-page .admin-hero-actions .btn {
        width: 100%;
    }

    .admin-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin: 18px 0 14px;
    }

    .admin-metrics article {
        padding: 13px;
    }

    .admin-metrics strong {
        font-size: 24px;
    }

    .admin-metrics span {
        font-size: 13px;
    }

    .admin-filterbar {
        grid-template-columns: 1fr;
        gap: 12px;
        margin: 14px 0 24px;
        padding: 12px;
    }

    .admin-search input {
        min-height: 44px;
        font-size: 16px;
    }

    .admin-segments {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: visible;
        padding-bottom: 0;
    }

    .admin-segments button {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        padding: 9px 14px;
    }

    .wiki-card-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .wiki-admin-card {
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 12px;
        padding: 13px;
    }

    .wiki-admin-card-media {
        width: 82px;
    }

    .wiki-admin-card-title {
        align-items: center;
    }

    .wiki-admin-card-title h3 {
        font-size: 18px;
    }

    .wiki-admin-card-body p {
        margin: 7px 0 10px;
        font-size: 14px;
        line-height: 1.55;
    }

    .wiki-admin-card-body small {
        font-size: 12px;
    }

    .admin-pill-row {
        gap: 5px;
    }

    .admin-pill {
        padding: 4px 8px;
        font-size: 11px;
    }

    .wiki-admin-card-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .wiki-admin-card-actions .btn,
    .wiki-admin-card-actions button {
        width: 100%;
        min-height: 42px;
        padding-left: 6px;
        padding-right: 6px;
    }
}

@media (max-width: 430px) {
    .admin-metrics {
        grid-template-columns: 1fr 1fr;
    }

    .wiki-admin-card {
        grid-template-columns: 70px minmax(0, 1fr);
    }

    .wiki-admin-card-media {
        width: 70px;
    }

    .wiki-admin-card-title {
        display: grid;
        gap: 4px;
        justify-content: start;
    }

    .wiki-admin-card-actions {
        grid-template-columns: 1fr;
    }
}

.easy-edit-panel {
    max-width: 1120px;
}

.easy-publish-box {
    margin: 18px 0;
    border: 1px solid #d7e2df;
    border-radius: 8px;
    padding: 18px;
    background: #f6fbfa;
}

.easy-publish-box h2 {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 800;
}

.easy-publish-box p {
    margin: 0 0 14px;
    color: #536167;
}

.advanced-settings {
    margin: 18px 0;
    border: 1px solid #d8e3e0;
    border-radius: 8px;
    padding: 0;
    background: #fff;
}

.advanced-settings summary {
    cursor: pointer;
    padding: 14px 16px;
    color: #172026;
    font-weight: 900;
}

.advanced-settings > *:not(summary) {
    margin-right: 16px;
    margin-left: 16px;
}

.advanced-settings > :last-child {
    margin-bottom: 16px;
}

.admin-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.admin-form-panel {
    max-width: 1040px;
    background: #fff;
    border: 1px solid #dde5e4;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(21, 33, 38, 0.06);
}

.admin-form-panel label {
    display: grid;
    gap: 7px;
    margin-bottom: 16px;
    color: #26343a;
    font-weight: 700;
}

.admin-form-panel label span {
    color: #536167;
    font-size: 13px;
    text-transform: uppercase;
}

.admin-form-panel label small {
    color: #6a777b;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}

.admin-form-panel label.inline-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0 18px;
}

.admin-form-panel label.inline-check input {
    width: 18px;
    height: 18px;
    margin: 0;
}

.admin-form-panel label.inline-check span {
    color: #26343a;
    font-size: 14px;
    text-transform: none;
}

.ajax-save-status {
    min-height: 22px;
    margin-top: 12px;
    color: #536167;
    font-weight: 800;
}

.ajax-save-status.is-success {
    color: #17635b;
}

.ajax-save-status.is-error {
    color: #9d1c1c;
}

.admin-form-panel input,
.admin-form-panel select,
.admin-form-panel textarea {
    width: 100%;
    max-width: none;
    border: 1px solid #cfdad8;
    border-radius: 8px;
    padding: 11px 12px;
    color: #172026;
    background: #fff;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.form-grid.compact {
    gap: 10px;
}

.admin-editor-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 18px;
    align-items: start;
}

.editor-main-panel {
    max-width: none;
}

.editor-side-panel {
    position: sticky;
    top: 18px;
}

.slug-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
    border: 1px solid #cfdad8;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    background: #f6f8f7;
}

.editor-toolbar + textarea {
    border-radius: 0 0 8px 8px;
    min-height: 520px;
    font-family: Consolas, "Courier New", monospace;
    line-height: 1.65;
}

.editor-status-card {
    display: grid;
    gap: 6px;
    margin-bottom: 16px;
    border: 1px solid #d7e2df;
    border-radius: 8px;
    padding: 12px;
    background: #f6fbfa;
}

.editor-status-card span {
    color: #536167;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.editor-status-card strong {
    overflow-wrap: anywhere;
    color: #17635b;
    font-size: 14px;
}

.editor-status-card em {
    color: #6a777b;
    font-size: 12px;
    font-style: normal;
}

.sticky-actions {
    position: sticky;
    bottom: 12px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #dde5e4;
    background: #fff;
}

.intake-browser-panel {
    max-width: 1180px;
}

.intake-panel-heading {
    display: flex;
    gap: 16px;
    align-items: start;
    justify-content: space-between;
    margin-bottom: 18px;
}

.intake-panel-heading h2 {
    margin-bottom: 6px;
}

.intake-count {
    flex: 0 0 auto;
    border: 1px solid #cfdad8;
    border-radius: 999px;
    padding: 6px 10px;
    color: #17635b;
    background: #f2faf8;
    font-size: 13px;
    font-weight: 900;
}

.intake-entity-list {
    display: grid;
    max-height: 420px;
    overflow: auto;
    border: 1px solid #dde5e4;
    border-radius: 8px;
    background: #fff;
}

.intake-entity-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.72fr);
    gap: 14px;
    width: 100%;
    border: 0;
    border-bottom: 1px solid #e6eceb;
    padding: 13px 14px;
    text-align: left;
    background: #fff;
    cursor: pointer;
}

.intake-entity-row:last-child {
    border-bottom: 0;
}

.intake-entity-row:hover,
.intake-entity-row:focus {
    outline: none;
    background: #f6fbfa;
}

.intake-entity-row span {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.intake-entity-row strong {
    overflow: hidden;
    color: #172026;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.intake-entity-row small {
    overflow: hidden;
    color: #6a777b;
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.intake-modal-backdrop {
    position: fixed;
    z-index: 4000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(11, 18, 21, 0.58);
}

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

.intake-modal {
    display: grid;
    gap: 16px;
    width: min(880px, 100%);
    max-height: min(760px, calc(100vh - 40px));
    overflow: auto;
    border: 1px solid #cfdad8;
    border-radius: 8px;
    padding: 22px;
    background: #fff;
    box-shadow: 0 24px 80px rgba(11, 18, 21, 0.32);
}

.intake-modal-header {
    display: flex;
    gap: 14px;
    align-items: start;
    justify-content: space-between;
}

.intake-modal-header h2 {
    margin: 0;
    color: #172026;
}

.intake-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.intake-meta-grid div {
    border: 1px solid #dde5e4;
    border-radius: 8px;
    padding: 10px 12px;
    background: #f8faf9;
}

.intake-meta-grid dt {
    color: #6a777b;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.intake-meta-grid dd {
    margin: 3px 0 0;
    overflow-wrap: anywhere;
    color: #172026;
    font-weight: 800;
}

.intake-modal-body {
    display: grid;
    gap: 8px;
}

.intake-modal-body h3 {
    margin: 8px 0 0;
    color: #26343a;
    font-size: 15px;
}

.intake-modal-body p,
.intake-modal-body pre {
    margin: 0;
    border: 1px solid #dde5e4;
    border-radius: 8px;
    padding: 12px;
    color: #26343a;
    background: #fbfcfc;
    line-height: 1.65;
    white-space: pre-wrap;
}

.resource-picker-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.resource-picker-preview {
    display: grid;
    min-height: 96px;
    place-items: center;
    overflow: hidden;
    border: 1px solid #dde5e4;
    border-radius: 8px;
    background: #f8faf9;
}

.resource-picker-preview img {
    width: 100%;
    max-height: 220px;
    object-fit: contain;
}

.wiki-image-field .resource-picker-preview {
    min-height: 420px;
    padding: 14px;
    background:
        linear-gradient(45deg, rgba(15, 111, 100, 0.05), rgba(255, 255, 255, 0) 42%),
        #f8faf9;
}

.wiki-image-field .resource-picker-preview img {
    width: auto;
    max-width: 100%;
    max-height: 520px;
    border-radius: 8px;
    box-shadow: 0 16px 38px rgba(18, 28, 34, 0.14);
}

.wiki-gallery-field .resource-picker-field {
    grid-template-columns: minmax(0, 1fr) 132px;
    align-items: start;
}

.wiki-gallery-field textarea {
    min-height: 96px;
    resize: vertical;
}

.wiki-gallery-preview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.wiki-gallery-empty {
    grid-column: 1 / -1;
    display: grid;
    min-height: 92px;
    place-items: center;
    border: 1px dashed #cbd7d5;
    border-radius: 8px;
    color: #6a777b;
    font-size: 13px;
    font-weight: 800;
    background: #f8faf9;
}

.wiki-gallery-thumb {
    position: relative;
    overflow: hidden;
    margin: 0;
    border: 1px solid #dde5e4;
    border-radius: 8px;
    background: #10151b;
}

.wiki-gallery-thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center top;
}

.wiki-gallery-thumb button {
    position: absolute;
    right: 8px;
    bottom: 8px;
    border: 0;
    border-radius: 999px;
    padding: 6px 10px;
    color: #fff;
    background: rgba(11, 18, 21, 0.84);
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.resource-picker-preview span {
    color: #6a777b;
    font-size: 13px;
    font-weight: 800;
}

.settings-image-preview {
    margin-top: 8px;
    min-height: 132px;
}

.settings-image-preview img {
    max-height: 180px;
    object-fit: contain;
}

.resource-picker-backdrop {
    position: fixed;
    z-index: 4100;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 24px;
    background: rgba(11, 18, 21, 0.62);
}

.resource-picker-backdrop[hidden] {
    display: none;
}

.resource-picker-modal {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 14px;
    width: min(1320px, calc(100vw - 48px));
    height: min(820px, calc(100vh - 48px));
    max-height: calc(100vh - 48px);
    overflow: hidden;
    border: 1px solid #cfdad8;
    border-radius: 8px;
    padding: 22px;
    background: #fff;
    box-shadow: 0 24px 80px rgba(11, 18, 21, 0.32);
}

body.resource-picker-open {
    overflow: hidden;
}

.resource-picker-header,
.resource-picker-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: start;
}

.resource-picker-controls {
    grid-template-columns: minmax(0, 1fr) 180px;
}

.resource-picker-controls label {
    display: grid;
    gap: 6px;
}

.resource-picker-controls input,
.resource-picker-controls select {
    width: 100%;
    max-width: none;
    min-height: 38px;
}

.resource-picker-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 14px;
    min-height: 0;
}

.resource-picker-tree {
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    border: 1px solid #d7e2e0;
    border-radius: 8px;
    padding: 8px;
    background: #f8faf9;
}

.resource-picker-folder {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: 0;
    border-radius: 6px;
    padding: 8px 9px 8px calc(9px + (var(--depth, 0) * 14px));
    color: #26343a;
    text-align: left;
    background: transparent;
    cursor: pointer;
}

.resource-picker-folder,
.resource-picker-card {
    overflow-wrap: anywhere;
}

.resource-picker-folder:hover,
.resource-picker-folder:focus {
    outline: none;
    background: #eef6f4;
}

.resource-picker-folder.active {
    color: #fff;
    background: #17635b;
}

.resource-picker-folder span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    font-weight: 900;
    line-height: 1.28;
}

.resource-picker-folder small {
    border-radius: 999px;
    padding: 2px 7px;
    color: #526267;
    background: #e4ecea;
    font-size: 11px;
    font-weight: 900;
}

.resource-picker-folder.active small {
    color: #17635b;
    background: #fff;
}

.resource-picker-browser {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 10px;
    min-height: 0;
}

.resource-picker-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 34px;
    color: #6a777b;
    font-weight: 900;
}

.resource-picker-breadcrumb button {
    border: 1px solid #d7e2e0;
    border-radius: 999px;
    padding: 5px 10px;
    color: #26343a;
    background: #fff;
    cursor: pointer;
}

.resource-picker-breadcrumb button:hover,
.resource-picker-breadcrumb button:focus {
    outline: none;
    border-color: #83b7ae;
    color: #0f6c62;
    background: #f6fbfa;
}

.resource-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    align-content: start;
    gap: 12px;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 2px 6px 2px 2px;
}

.resource-picker-card {
    display: grid;
    gap: 8px;
    border: 1px solid #dde5e4;
    border-radius: 8px;
    padding: 8px;
    text-align: left;
    background: #fff;
}

.resource-picker-card-select {
    display: grid;
    gap: 8px;
    width: 100%;
    border: 0;
    padding: 0;
    text-align: left;
    background: transparent;
    cursor: pointer;
}

.resource-picker-card:hover,
.resource-picker-card:focus-within {
    outline: none;
    border-color: #83b7ae;
    background: #f6fbfa;
}

.resource-picker-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    border-radius: 6px;
    background: #edf3f1;
}

.resource-picker-folder-card .resource-picker-card-select {
    height: 100%;
}

.resource-picker-folder-tile {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    color: #17635b;
    background: #e8f4f1;
    font-size: 13px;
    font-weight: 900;
}

.resource-picker-card span {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.resource-picker-card strong,
.resource-picker-card small {
    overflow: hidden;
    text-overflow: ellipsis;
}

.resource-picker-card strong {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: #172026;
    font-size: 13px;
    line-height: 1.32;
    white-space: normal;
}

.resource-picker-card small {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.3;
    white-space: normal;
}

.resource-picker-card small,
.resource-picker-empty {
    color: #6a777b;
    font-size: 12px;
    font-weight: 800;
}

.resource-picker-card-actions {
    display: grid;
    grid-template-columns: 1fr;
}

.resource-picker-card-actions button {
    min-height: 34px;
    border: 1px solid #cfdad8;
    border-radius: 6px;
    color: #0f6f64;
    background: #fff;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.resource-picker-card-actions button:hover,
.resource-picker-card-actions button:focus {
    outline: none;
    border-color: #0f6f64;
    background: #eef8f6;
}

.resource-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    margin-top: 4px;
}

.resource-pagination button {
    min-width: 68px;
    min-height: 36px;
    border: 1px solid #cfdad8;
    border-radius: 999px;
    padding: 7px 13px;
    color: #0f6f64;
    background: #fff;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.resource-pagination button:hover,
.resource-pagination button:focus {
    outline: none;
    border-color: #0f6f64;
    background: #eef8f6;
}

.resource-pagination button:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

.resource-pagination span {
    min-width: 118px;
    color: #657276;
    text-align: center;
    font-size: 12px;
    font-weight: 900;
}

.resource-preview-backdrop {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(9, 16, 19, 0.72);
}

.resource-preview-backdrop[hidden] {
    display: none;
}

.resource-preview-modal {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 12px;
    width: min(980px, calc(100vw - 54px));
    height: min(760px, calc(100vh - 54px));
    min-height: 0;
    overflow: hidden;
    border-radius: 10px;
    padding: 16px;
    background: #fff;
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.38);
}

.resource-preview-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
}

.resource-preview-header strong,
.resource-preview-header span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resource-preview-header strong {
    color: #172026;
    font-size: 16px;
    font-weight: 900;
}

.resource-preview-header span {
    margin-top: 4px;
    color: #6a777b;
    font-size: 12px;
    font-weight: 800;
}

.resource-preview-stage {
    display: grid;
    min-height: 0;
    place-items: center;
    overflow: auto;
    border-radius: 8px;
    background: #11191d;
}

.resource-preview-stage img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.resource-preview-actions {
    display: flex;
    justify-content: flex-end;
}

.resource-picker-empty {
    grid-column: 1 / -1;
    margin: 0;
    border: 1px dashed #cfdad8;
    border-radius: 8px;
    padding: 24px;
    text-align: center;
    background: #f8faf9;
}

.resource-manager {
    display: grid;
    gap: 18px;
}

.resource-audit-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.resource-audit-card {
    display: grid;
    gap: 4px;
    min-height: 76px;
    border: 1px solid #d7e2e0;
    border-radius: 8px;
    padding: 12px;
    text-align: left;
    background: #f8faf9;
    cursor: pointer;
}

.resource-audit-card span {
    color: #657276;
    font-size: 12px;
    font-weight: 900;
}

.resource-audit-card strong {
    color: #172026;
    font-size: 24px;
    line-height: 1;
}

.resource-audit-card.active {
    border-color: #17635b;
    background: #eaf7f4;
}

.resource-audit-card.has-warning strong {
    color: #9a332d;
}

.resource-broken-panel {
    margin-bottom: 16px;
    border: 1px solid #e2b4a5;
    border-radius: 8px;
    background: #fff8f5;
}

.resource-broken-panel summary {
    cursor: pointer;
    padding: 12px 14px;
    color: #852722;
    font-weight: 900;
}

.resource-broken-list {
    display: grid;
    gap: 8px;
    padding: 0 14px 14px;
}

.resource-broken-list article {
    display: grid;
    gap: 4px;
    border: 1px solid #f0d2c8;
    border-radius: 8px;
    padding: 10px;
    background: #fff;
}

.resource-broken-list strong {
    color: #852722;
    font-size: 13px;
}

.resource-broken-list span,
.resource-broken-list code {
    overflow-wrap: anywhere;
}

.resource-broken-list a {
    margin-right: 10px;
    color: #17635b;
    font-weight: 900;
}

.resource-upload-panel,
.resource-folder-panel,
.resource-library-panel {
    display: grid;
    gap: 16px;
}

.resource-dropzone {
    display: grid;
    gap: 6px;
    place-items: center;
    min-height: 150px;
    border: 2px dashed #b8cbc7;
    border-radius: 8px;
    padding: 22px;
    color: #26343a;
    text-align: center;
    background: #f6fbfa;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.resource-dropzone input {
    width: min(100%, 360px);
}

.resource-dropzone strong {
    font-size: 18px;
    font-weight: 900;
}

.resource-dropzone span {
    color: #65757a;
    font-size: 13px;
    font-weight: 800;
}

.resource-dropzone.is-dragging {
    border-color: #0f6f64;
    background: #eaf7f4;
    transform: translateY(-1px);
}

.resource-create-folder {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

.resource-manager-toolbar {
    display: grid;
    gap: 12px;
}

.resource-manager-toolbar input {
    width: 100%;
    max-width: none;
}

.resource-quick-folders {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.resource-quick-folders button {
    border: 1px solid #cfdad8;
    border-radius: 999px;
    padding: 7px 11px;
    color: #17635b;
    background: #fff;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.resource-quick-folders button:hover,
.resource-quick-folders button:focus {
    border-color: #83b7ae;
    background: #eef8f5;
}

.resource-upload-status {
    color: #536167;
    font-size: 13px;
    font-weight: 900;
}

.resource-current-folder {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid #d7e2e0;
    border-radius: 8px;
    padding: 11px 13px;
    background: #f8faf9;
}

.resource-current-folder span {
    color: #657276;
    font-size: 12px;
    font-weight: 900;
}

.resource-current-folder strong {
    overflow: hidden;
    color: #172026;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resource-breadcrumb {
    display: flex;
    align-items: center;
    gap: 7px;
    overflow-x: auto;
    padding: 3px 0;
    color: #657276;
}

.resource-breadcrumb button {
    border: 0;
    padding: 0;
    color: #17635b;
    background: transparent;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}

.resource-folder-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.resource-folder-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    border: 1px solid #cfdad8;
    border-radius: 999px;
    padding: 7px 12px;
    color: #26343a;
    background: #fff;
    font-weight: 900;
    cursor: pointer;
}

.resource-folder-chip small {
    border-radius: 999px;
    padding: 2px 7px;
    color: #526267;
    background: #e8efed;
    font-size: 11px;
}

.resource-folder-chip.active {
    color: #fff;
    border-color: #17635b;
    background: #17635b;
}

.resource-folder-chip.active small {
    color: #17635b;
    background: #fff;
}

.resource-folder-chip.is-drop-target {
    border-color: #0f6f64;
    background: #dff4ef;
    box-shadow: 0 0 0 3px rgba(15, 111, 100, 0.16);
}

.resource-admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.resource-admin-card {
    display: grid;
    gap: 8px;
    border: 1px solid #dde5e4;
    border-radius: 8px;
    padding: 9px;
    background: #fff;
    cursor: grab;
}

.resource-admin-card:focus-within,
.resource-admin-card:hover {
    border-color: #9fc7c0;
    box-shadow: 0 10px 22px rgba(21, 33, 38, 0.08);
}

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

.resource-admin-card.is-dragging {
    opacity: 0.55;
    cursor: grabbing;
}

.resource-admin-thumb {
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 0.9;
    overflow: hidden;
    border-radius: 7px;
    background: #edf3f1;
}

.resource-admin-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.resource-folder-card {
    border-style: dashed;
    cursor: pointer;
}

.resource-folder-icon {
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 0.9;
    border-radius: 7px;
    color: #17635b;
    background: #e8f4f1;
    font-size: 13px;
    font-weight: 900;
}

.resource-admin-meta {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.resource-admin-meta strong,
.resource-admin-meta span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resource-admin-meta strong {
    color: #172026;
    font-size: 13px;
}

.resource-admin-meta span {
    color: #6a777b;
    font-size: 12px;
    font-weight: 800;
}

.resource-card-footer {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: space-between;
}

.resource-card-footer button {
    border: 0;
    padding: 2px 0;
    color: #17635b;
    background: transparent;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.resource-status {
    border-radius: 999px;
    padding: 3px 7px;
    font-size: 11px;
    font-weight: 900;
}

.resource-status.is-used {
    color: #13544d;
    background: #e6f5f1;
}

.resource-status.is-unused {
    color: #7a5420;
    background: #fff0d6;
}

.resource-empty {
    grid-column: 1 / -1;
    margin: 0;
    border: 1px dashed #cfdad8;
    border-radius: 8px;
    padding: 24px;
    color: #6a777b;
    text-align: center;
    background: #f8faf9;
    font-weight: 900;
}

.resource-folder-empty {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    border: 1px dashed #cfdad8;
    border-radius: 999px;
    padding: 7px 12px;
    color: #6a777b;
    background: #f8faf9;
    font-size: 12px;
    font-weight: 900;
}

.resource-detail-panel {
    position: sticky;
    bottom: 16px;
    z-index: 20;
    max-width: none;
}

.resource-detail-panel[hidden] {
    display: none;
}

.resource-detail-head {
    display: flex;
    gap: 12px;
    align-items: start;
    justify-content: space-between;
    margin-bottom: 14px;
}

.resource-detail-head h2 {
    margin: 0;
}

.resource-detail-preview {
    display: grid;
    place-items: center;
    max-height: 360px;
    overflow: hidden;
    border: 1px solid #dde5e4;
    border-radius: 8px;
    background: #edf3f1;
}

.resource-detail-preview img {
    max-width: 100%;
    max-height: 360px;
    object-fit: contain;
}

.resource-detail-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 14px 0;
}

.resource-detail-list div {
    min-width: 0;
    border: 1px solid #dde5e4;
    border-radius: 8px;
    padding: 10px;
    background: #f8faf9;
}

.resource-detail-list dt {
    color: #657276;
    font-size: 12px;
    font-weight: 900;
}

.resource-detail-list dd {
    margin: 4px 0 0;
    overflow-wrap: anywhere;
    color: #172026;
    font-weight: 800;
}

.resource-detail-actions,
.resource-usage-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.resource-usage-list {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.resource-usage-list article {
    display: grid;
    gap: 4px;
    border: 1px solid #dde5e4;
    border-radius: 8px;
    padding: 10px;
    background: #fff;
}

.resource-usage-list strong {
    color: #17635b;
    font-size: 13px;
}

.resource-usage-list span {
    color: #26343a;
    font-weight: 800;
}

.resource-usage-actions a {
    color: #17635b;
    font-size: 13px;
    font-weight: 900;
}

.resource-empty.compact {
    padding: 12px;
    text-align: left;
}

.gallery-upload-panel {
    display: grid;
    gap: 16px;
    margin-bottom: 18px;
}

.gallery-upload-panel summary {
    cursor: pointer;
    font-size: 18px;
    font-weight: 900;
    color: #152126;
}

.gallery-admin-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.gallery-admin-stats span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #d7e2df;
    border-radius: 999px;
    padding: 8px 12px;
    color: #24343a;
    background: #fff;
    font-size: 14px;
    font-weight: 800;
}

.gallery-admin-stats strong {
    color: #17635b;
}

.gallery-admin-controls {
    position: sticky;
    top: 56px;
    z-index: 20;
    display: grid;
    gap: 14px;
    margin-bottom: 16px;
    border: 1px solid #dbe5e3;
    border-radius: 8px;
    padding: 14px;
    background: rgba(248, 251, 250, 0.97);
    box-shadow: 0 12px 28px rgba(20, 34, 38, 0.08);
    backdrop-filter: blur(10px);
}

.gallery-filter-bar,
.gallery-bulk-panel {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(220px, 280px) minmax(120px, 150px);
    gap: 12px;
    align-items: end;
}

.gallery-filter-bar label,
.gallery-bulk-panel label {
    display: grid;
    gap: 5px;
    margin: 0;
}

.gallery-filter-bar label span,
.gallery-bulk-panel label span {
    color: #526167;
    font-size: 12px;
    font-weight: 900;
}

.gallery-search-field input {
    width: 100%;
}

.gallery-status-filters,
.gallery-view-tools,
.gallery-bulk-actions,
.gallery-bulk-form,
.gallery-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.gallery-status-filters .admin-button.active {
    color: #fff;
    border-color: #17635b;
    background: #17635b;
}

.gallery-view-tools .admin-button.active {
    color: #fff;
    border-color: #26343a;
    background: #26343a;
}

.gallery-bulk-panel {
    grid-template-columns: minmax(320px, 1fr) auto auto;
}

.gallery-bulk-actions span,
.gallery-visible-count,
.gallery-pagination span {
    color: #405057;
    font-size: 13px;
    font-weight: 900;
}

.gallery-pagination {
    justify-content: center;
    margin: 12px 0;
}

.gallery-admin-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.gallery-admin-card {
    display: grid;
    grid-template-columns: 44px 112px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    border: 1px solid #dde5e4;
    border-radius: 8px;
    padding: 12px 14px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(21, 33, 38, 0.05);
}

.gallery-admin-card.is-hidden {
    opacity: 0.72;
}

.gallery-admin-card[hidden] {
    display: none !important;
}

.gallery-select-row {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #26343a;
    font-size: 13px;
    font-weight: 900;
}

.gallery-row-select {
    align-self: stretch;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    min-width: 36px;
    text-align: center;
}

.gallery-select-row input {
    width: auto;
    min-height: 0;
}

.gallery-card-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
    min-width: 0;
}

.gallery-status,
.gallery-folder-label {
    display: inline-flex;
    max-width: 160px;
    align-items: center;
    border-radius: 999px;
    padding: 5px 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 900;
}

.gallery-status.published {
    color: #11524a;
    background: #dff2ee;
}

.gallery-status.hidden {
    color: #7a4b16;
    background: #fff0cf;
}

.gallery-folder-label {
    color: #3b4a50;
    background: #edf3f1;
}

.gallery-admin-image {
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 8px;
    background: #10151b;
}

.gallery-preview-button {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: zoom-in;
}

.gallery-admin-image img {
    width: 100%;
    height: 132px;
    object-fit: contain;
}

.gallery-row-body {
    display: grid;
    min-width: 0;
    gap: 8px;
}

.gallery-row-meta {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.gallery-compact-summary {
    display: none;
    min-width: 0;
}

.gallery-compact-summary strong,
.gallery-compact-summary span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gallery-compact-summary strong {
    color: #172026;
    font-size: 14px;
    font-weight: 900;
}

.gallery-compact-summary span {
    margin-top: 3px;
    color: #526167;
    font-size: 12px;
    font-weight: 800;
}

.gallery-file-name {
    margin: 0;
    overflow: hidden;
    color: #526167;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 800;
}

.gallery-admin-card form {
    min-width: 0;
}

.gallery-admin-card .gallery-row-form {
    display: grid;
    grid-template-columns: minmax(170px, 0.8fr) minmax(260px, 1.2fr) 88px 126px;
    gap: 8px;
    align-items: end;
}

.gallery-admin-card .gallery-row-form label {
    display: grid;
    min-width: 0;
    gap: 4px;
    margin: 0;
}

.gallery-admin-card .gallery-row-form label span,
.gallery-row-select span {
    color: #526167;
    font-size: 12px;
    font-weight: 900;
}

.gallery-admin-card input,
.gallery-admin-card select,
.gallery-admin-card textarea {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 34px;
    border-radius: 6px;
    padding: 7px 8px;
    font-size: 13px;
}

.gallery-admin-card textarea {
    min-height: 62px;
    resize: vertical;
}

.gallery-admin-card .admin-actions {
    grid-column: 1 / -1;
    gap: 6px;
    align-self: end;
    flex-wrap: nowrap;
}

.gallery-admin-card .admin-button {
    min-height: 36px;
    padding: 7px 10px;
}

.gallery-row-delete {
    margin: 0;
}

.gallery-delete-hidden {
    display: none;
}

.gallery-row-delete .admin-button {
    white-space: nowrap;
}

.gallery-density-compact .gallery-admin-grid {
    gap: 7px;
}

.gallery-density-compact .gallery-admin-card {
    grid-template-columns: 38px 74px minmax(0, 1fr);
    gap: 12px;
    padding: 9px 12px;
}

.gallery-density-compact .gallery-admin-image img {
    height: 82px;
}

.gallery-density-compact .gallery-row-meta {
    gap: 8px;
}

.gallery-density-compact .gallery-admin-card .gallery-row-form {
    display: block;
}

.gallery-density-compact .gallery-compact-summary {
    display: block;
}

.gallery-density-compact .gallery-admin-card .gallery-row-form > label,
.gallery-density-compact .gallery-admin-card .admin-actions .admin-button.primary {
    display: none;
}

.gallery-density-compact .gallery-admin-card .admin-actions {
    display: flex;
    grid-column: auto;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.gallery-density-compact .gallery-admin-card .admin-button {
    min-height: 32px;
    padding: 5px 8px;
    font-size: 12px;
}

.gallery-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 14px;
    padding: 28px;
    background: rgba(11, 17, 20, 0.9);
}

.gallery-preview-modal[hidden] {
    display: none !important;
}

.gallery-preview-modal img {
    max-width: min(100%, 980px);
    max-height: 78vh;
    align-self: center;
    justify-self: center;
    object-fit: contain;
    border-radius: 8px;
    background: #10151b;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
}

.gallery-preview-close {
    justify-self: end;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 8px;
    padding: 9px 14px;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    font-weight: 900;
}

.gallery-preview-caption {
    max-width: 980px;
    justify-self: center;
    color: #eef5f3;
    text-align: center;
    line-height: 1.6;
    font-weight: 800;
}

.gallery-preview-open {
    overflow: hidden;
}

@media (max-width: 1180px) {
    .gallery-admin-card {
        grid-template-columns: 38px 100px minmax(0, 1fr);
    }

    .gallery-admin-image img {
        height: 128px;
    }

    .gallery-admin-card .gallery-row-form {
        grid-template-columns: minmax(170px, 1fr) minmax(240px, 1.2fr) 88px 120px;
    }

    .gallery-admin-card .admin-actions {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .gallery-row-delete {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .gallery-density-compact .gallery-admin-card {
        grid-template-columns: 38px 74px minmax(0, 1fr);
    }

    .gallery-density-compact .gallery-admin-card .admin-actions,
    .gallery-density-compact .gallery-row-delete {
        grid-column: 1 / -1;
    }
}

@media (max-width: 860px) {
    .gallery-filter-bar,
    .gallery-bulk-panel {
        grid-template-columns: 1fr;
    }

    .gallery-admin-card {
        grid-template-columns: 34px 92px minmax(0, 1fr);
        align-items: start;
    }

    .gallery-admin-image img {
        height: 122px;
    }

    .gallery-row-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

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

    .gallery-admin-card .gallery-row-form label:nth-of-type(1),
    .gallery-admin-card .gallery-row-form label:nth-of-type(2),
    .gallery-admin-card .admin-actions {
        grid-column: 1 / -1;
    }

    .gallery-row-delete {
        grid-column: 3;
    }
}

@media (max-width: 620px) {
    .gallery-admin-card {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .gallery-admin-card .gallery-row-form,
    .gallery-density-compact .gallery-admin-card .gallery-row-form {
        grid-template-columns: 1fr;
    }

    .gallery-admin-card .gallery-row-form label,
    .gallery-admin-card .admin-actions,
    .gallery-density-compact .gallery-admin-card .admin-actions {
        grid-column: 1 / -1;
    }

    .gallery-admin-card .admin-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .gallery-admin-card .admin-actions .admin-button {
        width: 100%;
    }

    .gallery-admin-image {
        grid-column: 2;
        width: 112px;
        max-width: 100%;
    }

    .gallery-row-body,
    .gallery-row-delete {
        grid-column: 1 / -1;
    }
}

.admin-check-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 900;
}

.admin-check-row input {
    width: auto;
    min-height: 0;
}

.admin-button.danger {
    color: #fff;
    border-color: #94352f;
    background: #94352f;
}

.form-error {
    margin-bottom: 16px;
    border: 1px solid #e2a3a0;
    border-radius: 8px;
    padding: 12px;
    color: #852722;
    background: #fff3f2;
    font-weight: 700;
}

.admin-inline-result {
    margin-bottom: 16px;
    border: 1px solid #cfdad8;
    border-radius: 8px;
    padding: 12px 14px;
    color: #26343a;
    background: #f8faf9;
    font-weight: 800;
    line-height: 1.55;
}

.admin-inline-result.is-loading {
    color: #536167;
    background: #f8faf9;
}

.admin-inline-result.is-success {
    color: #13544d;
    border-color: #b8dcd5;
    background: #eef9f6;
}

.admin-inline-result.is-error {
    color: #852722;
    border-color: #e2a3a0;
    background: #fff3f2;
}

.admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.top-actions {
    margin-bottom: 16px;
}

.row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.row-actions form {
    margin: 0;
}

.admin-button {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    border: 1px solid #cfdad8;
    border-radius: 8px;
    padding: 8px 13px;
    color: #172026;
    background: #fff;
    font-weight: 800;
    text-decoration: none;
}

.admin-button:hover {
    color: #172026;
    text-decoration: none;
    border-color: #83b7ae;
}

.admin-button.primary {
    color: #fff;
    background: #17635b;
    border-color: #17635b;
}

.admin-button.danger {
    color: #fff;
    background: #9a332d;
    border-color: #9a332d;
}

.admin-button.small {
    min-height: 32px;
    padding: 5px 9px;
    font-size: 13px;
}

.admin-table-wrap {
    overflow-x: auto;
    background: #fff;
    border: 1px solid #dde5e4;
    border-radius: 8px;
}

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

.admin-table th,
.admin-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #e6eceb;
    text-align: left;
    vertical-align: top;
}

.admin-table th {
    color: #425056;
    background: #f8faf9;
    font-size: 13px;
    text-transform: uppercase;
}

.admin-table td {
    color: #27343a;
    line-height: 1.55;
}

.admin-clean-header {
    background: #142024;
}

.admin-home-layout,
.admin-list-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
}

.admin-home-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    max-width: 420px;
}

.admin-home-quick .admin-button:not(.primary) {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.22);
}

.admin-ops-section {
    padding-bottom: 0;
}

.admin-today-panel {
    display: grid;
    grid-template-columns: minmax(260px, 0.78fr) minmax(0, 1.22fr);
    gap: 18px;
    border: 1px solid #d8e3e0;
    border-radius: 8px;
    padding: 22px;
    background: #fff;
}

.admin-today-panel h2 {
    margin: 0 0 10px;
    font-size: 28px;
    font-weight: 800;
}

.admin-today-panel p {
    margin: 0;
    color: #536167;
    line-height: 1.7;
}

.admin-step-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.admin-step-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    align-items: center;
    border: 1px solid #dde5e4;
    border-radius: 8px;
    padding: 13px 14px;
    background: #f8faf9;
}

.admin-step-list strong {
    color: #172026;
}

.admin-step-list span {
    color: #536167;
}

.admin-step-list a {
    grid-row: span 2;
    font-weight: 800;
}

.admin-stat-grid-clean .admin-stat small {
    display: block;
    margin-top: 10px;
    color: #657276;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.admin-stat-grid-clean .admin-stat strong {
    font-size: 24px;
    line-height: 1.15;
}

.admin-notice-section {
    padding-bottom: 0;
}

.admin-notice-command {
    display: grid;
    grid-template-columns: minmax(220px, 0.75fr) minmax(0, 1.25fr) auto;
    gap: 18px;
    align-items: center;
    border: 1px solid #d4dfdc;
    border-radius: 8px;
    padding: 20px;
    color: #172026;
    background:
        linear-gradient(135deg, rgba(240, 198, 92, 0.18), rgba(255, 255, 255, 0) 42%),
        #fff;
    box-shadow: 0 14px 34px rgba(20, 30, 34, 0.07);
}

.admin-notice-copy h2 {
    margin: 0 0 8px;
    font-size: 28px;
    line-height: 1.18;
    font-weight: 900;
}

.admin-notice-copy p:not(.eyebrow) {
    margin: 0;
    color: #536167;
    line-height: 1.65;
}

.admin-notice-current {
    display: grid;
    gap: 5px;
    border-left: 1px solid #dce6e3;
    padding-left: 18px;
}

.admin-notice-current span {
    color: #17635b;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.admin-notice-current strong {
    color: #172026;
    font-size: 22px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.admin-notice-current small {
    color: #657276;
    font-weight: 800;
}

.admin-notice-actions {
    display: grid;
    gap: 8px;
    min-width: 150px;
}

.admin-action-board {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.admin-action-board.four-actions {
    margin-bottom: 14px;
}

.admin-action-tile {
    display: grid;
    min-height: 172px;
    align-content: start;
    gap: 10px;
    border: 1px solid #dde5e4;
    border-radius: 8px;
    padding: 20px;
    color: #172026;
    background: #fff;
    text-decoration: none;
}

.admin-action-tile:hover {
    color: #172026;
    border-color: #83b7ae;
    text-decoration: none;
}

.admin-action-tile span {
    color: #657276;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.admin-action-tile strong {
    font-size: 24px;
    line-height: 1.2;
}

.admin-action-tile p {
    margin: 0;
    color: #536167;
    line-height: 1.6;
}

.admin-action-tile.primary-tile {
    color: #fff;
    background: #17635b;
    border-color: #17635b;
}

.admin-action-tile.primary-tile span,
.admin-action-tile.primary-tile p {
    color: rgba(255, 255, 255, 0.78);
}

.admin-workflow-board {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.admin-workflow-card {
    display: grid;
    gap: 12px;
    border: 1px solid #d8e3e0;
    border-radius: 8px;
    padding: 20px;
    color: #172026;
    background: #fff;
    box-shadow: 0 12px 30px rgba(20, 30, 34, 0.06);
}

.admin-workflow-card.is-primary {
    color: #fff;
    border-color: #17635b;
    background:
        linear-gradient(135deg, rgba(240, 198, 92, 0.16), rgba(255, 255, 255, 0) 46%),
        #17635b;
}

.admin-workflow-card span {
    color: #17635b;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.admin-workflow-card.is-primary span,
.admin-workflow-card.is-primary p {
    color: rgba(255, 255, 255, 0.78);
}

.admin-workflow-card h2 {
    margin: 0;
    font-size: 26px;
    line-height: 1.2;
    font-weight: 900;
}

.admin-workflow-card p {
    margin: 0;
    color: #536167;
    line-height: 1.65;
}

.admin-workflow-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 4px;
}

.admin-workflow-actions .admin-button {
    width: 100%;
}

.admin-analytics-header.admin-clean-header {
    background:
        linear-gradient(135deg, rgba(23, 99, 91, 0.92), rgba(18, 33, 38, 0.96)),
        radial-gradient(circle at 82% 10%, rgba(240, 198, 92, 0.2), transparent 32%);
}

.admin-analytics-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.admin-analytics-card {
    display: grid;
    min-height: 132px;
    align-content: space-between;
    gap: 12px;
    border: 1px solid #d8e3e0;
    border-radius: 8px;
    padding: 18px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(20, 30, 34, 0.06);
}

.admin-analytics-card.is-primary {
    color: #fff;
    border-color: #17635b;
    background:
        linear-gradient(135deg, rgba(240, 198, 92, 0.2), rgba(255, 255, 255, 0) 48%),
        #17635b;
}

.admin-analytics-card span {
    color: #17635b;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.admin-analytics-card.is-primary span,
.admin-analytics-card.is-primary small {
    color: rgba(255, 255, 255, 0.78);
}

.admin-analytics-card strong {
    color: #172026;
    font-size: 34px;
    line-height: 1;
    font-weight: 900;
}

.admin-analytics-card.is-primary strong {
    color: #fff;
}

.admin-analytics-card small {
    color: #657276;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.45;
}

.admin-compact-table td:first-child {
    max-width: 420px;
    overflow-wrap: anywhere;
}

.admin-direct-menu {
    border: 1px solid #d8e3e0;
    border-radius: 8px;
    padding: 22px;
    background:
        linear-gradient(135deg, rgba(23, 99, 91, 0.05), rgba(240, 198, 92, 0.08)),
        #fff;
    box-shadow: 0 12px 30px rgba(20, 30, 34, 0.06);
}

.admin-direct-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.admin-direct-card {
    display: grid;
    align-content: start;
    gap: 8px;
    min-width: 0;
    border: 1px solid #dbe6e3;
    border-radius: 8px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.84);
}

.admin-direct-card h3 {
    margin: 0 0 4px;
    color: #172026;
    font-size: 17px;
    line-height: 1.25;
    font-weight: 900;
}

.admin-direct-card a {
    display: flex;
    min-height: 34px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 7px 9px;
    color: #314348;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.admin-direct-card a::after {
    content: ">";
    color: #17635b;
    font-weight: 900;
}

.admin-direct-card a:hover {
    color: #172026;
    border-color: #c9dad6;
    background: #f6faf9;
}

.admin-plain-help {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-items: center;
    border: 1px solid #d7e2df;
    border-left: 4px solid #d0a83f;
    border-radius: 8px;
    padding: 14px 16px;
    color: #172026;
    background: #fffdf5;
}

.admin-plain-help span {
    flex: 1 1 420px;
    color: #536167;
    line-height: 1.55;
}

.admin-summary-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.admin-summary-row.two-up {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-summary-row.four-up {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-summary-row.six-up {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.admin-summary-row div {
    border: 1px solid #dde5e4;
    border-radius: 8px;
    padding: 14px;
    background: #fff;
}

.admin-summary-row span {
    display: block;
    color: #657276;
    font-size: 12px;
    font-weight: 900;
}

.admin-summary-row strong {
    display: block;
    margin-top: 6px;
    color: #172026;
    font-size: 28px;
    line-height: 1;
}

.admin-import-actions form {
    margin: 0;
}

.admin-import-panel {
    margin-top: 16px;
}

.admin-import-list {
    margin-top: 14px;
}

.munpia-import-card {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.munpia-import-card.is-existing {
    background: #f8faf9;
}

.munpia-import-check {
    display: inline-grid;
    grid-template-columns: auto auto;
    gap: 8px;
    align-items: center;
    min-height: 44px;
    margin: 0;
    border: 1px solid #d8e3e0;
    border-radius: 8px;
    padding: 8px 10px;
    color: #172026;
    background: #fff;
    font-weight: 900;
}

.munpia-import-check input {
    width: 18px;
    height: 18px;
    margin: 0;
}

.munpia-import-check span {
    min-width: 28px;
    text-align: right;
}

.admin-card-list {
    display: grid;
    gap: 10px;
}

.admin-list-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 14px;
    align-items: center;
    border: 1px solid #dde5e4;
    border-radius: 8px;
    padding: 14px;
    background: #fff;
}

.admin-list-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 13px;
    align-items: center;
    min-width: 0;
}

.page-list-card .admin-list-main,
.thread-list-card .admin-list-main {
    grid-template-columns: minmax(0, 1fr);
}

.admin-thumb {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    overflow: hidden;
    border: 1px solid #d8e3e0;
    border-radius: 8px;
    background: #f3f6f5;
}

.admin-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-thumb span {
    padding: 6px;
    color: #657276;
    font-size: 11px;
    font-weight: 800;
    text-align: center;
}

.admin-card-title {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: baseline;
}

.admin-card-title strong {
    color: #172026;
    font-size: 18px;
}

.admin-card-title span {
    color: #657276;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.admin-path-link {
    display: inline-block;
    margin-top: 3px;
    color: #17635b;
    font-size: 13px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.admin-list-card p {
    margin: 6px 0 0;
    color: #536167;
    line-height: 1.55;
}

.admin-thread-filterbar {
    margin-top: 0;
}

.admin-thread-list {
    gap: 8px;
}

.thread-list-card {
    grid-template-columns: minmax(0, 1fr) minmax(190px, auto) minmax(220px, auto);
    align-items: start;
}

.thread-list-card:hover {
    border-color: #c8d8d5;
    box-shadow: 0 10px 28px rgba(23, 32, 38, 0.06);
}

.admin-thread-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
}

.admin-thread-meta span {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    color: #536167;
    font-size: 13px;
    font-weight: 800;
}

.admin-thread-meta span + span::before {
    content: "";
    width: 3px;
    height: 3px;
    margin-right: 10px;
    border-radius: 999px;
    background: #b8c5c3;
}

.admin-list-state {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
    min-width: 160px;
}

.admin-card-actions {
    justify-content: flex-end;
    min-width: 210px;
}

@media (max-width: 980px) {
    .admin-home-layout,
    .admin-list-header,
    .admin-today-panel,
    .admin-notice-command,
    .admin-list-card {
        grid-template-columns: 1fr;
    }

    .admin-home-quick,
    .admin-list-state,
    .admin-card-actions {
        justify-content: flex-start;
        min-width: 0;
        width: 100%;
    }

    .admin-card-actions form {
        min-width: 0;
    }

    .admin-action-board,
    .admin-workflow-board,
    .admin-analytics-grid,
    .admin-direct-grid,
    .admin-summary-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-summary-row.six-up {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

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

    .admin-notice-current {
        border-left: 0;
        border-top: 1px solid #dce6e3;
        padding-left: 0;
        padding-top: 14px;
    }

    .admin-notice-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        min-width: 0;
    }

    .admin-card-actions {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
        gap: 8px;
    }

    .admin-card-actions form,
    .admin-card-actions .admin-button {
        width: 100%;
    }

    .admin-command-shell,
    .admin-command-main,
    .admin-command-status {
        grid-template-columns: 1fr;
    }

    .admin-command-shell {
        gap: 10px;
    }

    .admin-command-status dl {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .admin-action-board,
    .admin-workflow-board,
    .admin-analytics-grid,
    .admin-direct-grid,
    .admin-summary-row,
    .admin-summary-row.six-up,
    .admin-stat-grid-clean {
        grid-template-columns: 1fr;
    }

    .admin-thread-meta {
        gap: 3px 8px;
    }

    .admin-thread-meta span {
        width: 100%;
    }

    .admin-thread-meta span + span::before {
        display: none;
    }

    .admin-step-list li {
        grid-template-columns: 1fr;
    }

    .admin-step-list a {
        grid-row: auto;
    }

    .admin-notice-command {
        padding: 16px;
    }

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

    .admin-notice-copy h2 {
        font-size: 24px;
    }

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

    .admin-direct-menu {
        padding: 16px;
    }

    .admin-analytics-card {
        min-height: 112px;
        padding: 15px;
    }

    .admin-analytics-card strong {
        font-size: 30px;
    }

    .admin-command-center {
        padding-top: 16px;
        padding-bottom: 22px;
    }

    .admin-command-status,
    .admin-command-search,
    .admin-notice-mini {
        padding: 14px;
    }

    .admin-command-status h2,
    .admin-command-search h2,
    .admin-notice-mini h2 {
        font-size: 21px;
    }

    .admin-command-status dl {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-command-status dd {
        font-size: 18px;
    }

    .admin-command-search .admin-search-box {
        grid-template-columns: 1fr;
    }

    .admin-command-search .admin-search-box .admin-button,
    .admin-notice-mini .admin-notice-actions .admin-button {
        width: 100%;
    }
}

.search-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    max-width: 720px;
}

.search-form input {
    width: 100%;
    max-width: none;
    border: 1px solid #cfdad8;
    border-radius: 8px;
    padding: 13px 14px;
    color: #172026;
    background: #fff;
}

.search-form button {
    border: 0;
    border-radius: 8px;
    padding: 0 20px;
    color: #fff;
    background: #17635b;
    font-weight: 800;
}

.arka-hero {
    position: relative;
    isolation: isolate;
    min-height: 720px;
    overflow: hidden;
    background: #0d1117;
    padding: 96px 0 58px;
}

.arka-hero::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: "";
    background:
        linear-gradient(90deg, rgba(8, 13, 20, 0.94) 0%, rgba(8, 13, 20, 0.7) 48%, rgba(8, 13, 20, 0.28) 100%),
        linear-gradient(180deg, rgba(8, 13, 20, 0.08) 0%, rgba(8, 13, 20, 0.92) 100%);
}

.arka-hero-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center right;
    background: #0d1117;
    filter: saturate(1.08) contrast(1.05);
}

.hero-shell {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(260px, 420px);
    gap: 42px;
    align-items: end;
    min-height: 560px;
}

.hero-copy-wrap {
    max-width: 820px;
    padding-bottom: 38px;
}

.hero-copy-wrap .eyebrow,
.visual-band .eyebrow {
    color: #f0c65c;
}

.arka-hero h1 {
    max-width: 900px;
    font-size: 76px;
    letter-spacing: 0;
}

.hero-copy {
    max-width: 670px;
}

.hero-character {
    margin: 0;
    align-self: end;
}

.hero-character img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center top;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.42);
}

.hero-character figcaption {
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

.visual-band {
    padding-top: 42px;
}

.character-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.character-card {
    position: relative;
    display: block;
    min-height: 420px;
    overflow: hidden;
    color: #fff;
    background: #10151b;
    border: 1px solid #202b33;
    border-radius: 8px;
}

.character-card::after {
    position: absolute;
    inset: auto 0 0;
    height: 48%;
    content: "";
    background: linear-gradient(180deg, rgba(10, 15, 21, 0), rgba(10, 15, 21, 0.9));
}

.character-card img {
    width: 100%;
    height: 100%;
    min-height: 420px;
    object-fit: cover;
    object-position: center top;
    transition: transform 240ms ease;
}

.character-card:hover {
    color: #fff;
    text-decoration: none;
    border-color: #d2ae55;
}

.character-card:hover img {
    transform: scale(1.035);
}

.character-card span,
.character-card strong {
    position: absolute;
    left: 18px;
    z-index: 1;
}

.character-card span {
    bottom: 58px;
    color: #f0c65c;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.character-card strong {
    right: 18px;
    bottom: 18px;
    font-size: 26px;
    line-height: 1.15;
}

.character-card.wide img {
    object-position: center;
}

.home-hero {
    min-height: min(860px, 92vh);
    padding-bottom: 64px;
    background: #070d16;
    isolation: isolate;
}

.home-hero::before {
    z-index: 1;
    background:
        linear-gradient(115deg, rgba(5, 10, 18, 0.96), rgba(5, 10, 18, 0.52) 48%, rgba(5, 10, 18, 0.08)),
        linear-gradient(180deg, rgba(240, 198, 92, 0.08), rgba(66, 226, 213, 0.07) 46%, rgba(5, 10, 18, 0.42));
}

.home-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(90deg, rgba(0,0,0,0.72), rgba(0,0,0,0.22) 62%, rgba(0,0,0,0));
}

.home-hero .arka-hero-bg {
    transform: scale(1.02);
    filter: saturate(1.28) contrast(1.08);
}

.home-hero-celestial {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.home-hero-celestial::before,
.home-hero-celestial::after {
    content: "";
    position: absolute;
    right: 9%;
    top: 16%;
    width: min(40vw, 620px);
    aspect-ratio: 1;
    border: 1px solid rgba(137, 244, 232, 0.22);
    border-radius: 50%;
    box-shadow:
        0 0 80px rgba(68, 231, 218, 0.16),
        inset 0 0 80px rgba(240, 198, 92, 0.08);
}

.home-hero-celestial::after {
    right: 17%;
    top: 28%;
    width: min(28vw, 420px);
    border-color: rgba(240, 198, 92, 0.24);
    transform: rotate(-18deg);
}

.home-hero-shell {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    align-items: center;
    min-height: min(700px, 76vh);
    position: relative;
    z-index: 2;
}

.home-hero .hero-copy-wrap {
    position: relative;
    max-width: 860px;
}

.home-hero .hero-copy-wrap::before {
    content: "";
    position: absolute;
    left: -24px;
    top: 116px;
    width: 2px;
    height: 220px;
    background: linear-gradient(180deg, rgba(240, 198, 92, 0), rgba(240, 198, 92, 0.92), rgba(67, 222, 209, 0.2), rgba(67, 222, 209, 0));
    box-shadow: 0 0 34px rgba(240, 198, 92, 0.56);
}

.home-hero .eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    border: 1px solid rgba(240, 198, 92, 0.42);
    border-radius: 999px;
    padding: 7px 13px;
    background: rgba(5, 12, 20, 0.48);
    color: #f0c65c;
    backdrop-filter: blur(12px);
}

.home-hero h1 {
    display: grid;
    gap: 8px;
    max-width: 900px;
    margin-top: 18px;
    line-height: 0.88;
    text-shadow: 0 22px 74px rgba(28, 238, 219, 0.24), 0 5px 20px rgba(0, 0, 0, 0.68);
}

.home-hero h1 span:first-child {
    position: relative;
    width: fit-content;
    color: #fff;
    font-size: clamp(76px, 9.2vw, 148px);
}

.home-hero h1 span:first-child::after {
    content: "";
    position: absolute;
    right: -54px;
    top: 50%;
    width: 22px;
    height: 22px;
    border: 8px solid #fff;
    border-radius: 50%;
    transform: translateY(-50%);
    box-shadow: 0 0 28px rgba(137, 244, 232, 0.5);
}

.home-hero h1 span:last-child {
    max-width: 820px;
    color: rgba(255, 255, 255, 0.94);
    font-size: clamp(54px, 6.4vw, 108px);
    letter-spacing: 0;
}

.home-hero .hero-copy {
    max-width: 720px;
    margin-top: 22px;
    color: rgba(238, 249, 247, 0.86);
    font-size: clamp(17px, 1.3vw, 21px);
    line-height: 1.76;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}

.home-hero-signals {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 760px;
    margin: 24px 0 0;
}

.home-hero-signals span {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    border: 1px solid rgba(133, 245, 233, 0.28);
    border-radius: 999px;
    padding: 8px 13px;
    background: rgba(8, 22, 30, 0.56);
    color: #d9fffa;
    font-size: 13px;
    font-weight: 900;
    box-shadow: inset 0 0 22px rgba(67, 222, 209, 0.08);
    backdrop-filter: blur(12px);
}

.home-hero .hero-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 32px;
    border: 1px solid rgba(137, 244, 232, 0.18);
    border-radius: 999px;
    padding: 7px;
    background: rgba(4, 13, 20, 0.42);
    box-shadow: inset 0 0 28px rgba(137, 244, 232, 0.07), 0 18px 42px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(16px);
}

.home-hero .hero-actions .btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    border-radius: 999px;
    padding: 11px 18px;
    border: 1px solid rgba(218, 244, 239, 0.3);
    color: rgba(238, 249, 247, 0.92);
    background: rgba(255, 255, 255, 0.035);
    box-shadow: none;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.home-hero .hero-actions .btn-light {
    border-color: rgba(240, 198, 92, 0.95);
    color: #081018;
    background: linear-gradient(135deg, #fff8d6, #f0c65c 56%, #c98a28);
    box-shadow: 0 12px 30px rgba(240, 198, 92, 0.24);
}

.home-hero .hero-actions .btn-light:first-child {
    padding-inline: 22px 26px;
}

.home-hero .hero-actions .btn-light:first-child::after {
    content: ">";
    margin-left: 12px;
    color: rgba(8, 16, 24, 0.72);
    font-weight: 900;
}

.home-hero .hero-actions .btn-outline-light {
    border-color: rgba(137, 244, 232, 0.28);
    color: rgba(238, 249, 247, 0.88);
    background: linear-gradient(180deg, rgba(137, 244, 232, 0.08), rgba(255, 255, 255, 0.02));
}

.home-hero .hero-actions .btn:hover,
.home-hero .hero-actions .btn:focus {
    transform: translateY(-2px);
    text-decoration: none;
}

.home-hero .hero-actions .btn-light:hover,
.home-hero .hero-actions .btn-light:focus {
    color: #061014;
    border-color: #fff0a6;
    background: linear-gradient(135deg, #fffdf0, #ffd966 58%, #d49d3a);
}

.home-hero .hero-actions .btn-outline-light:hover,
.home-hero .hero-actions .btn-outline-light:focus {
    border-color: rgba(137, 244, 232, 0.78);
    color: #ffffff;
    background: rgba(137, 244, 232, 0.14);
}

.home-quick-panel {
    position: relative;
    display: grid;
    gap: 10px;
    border: 1px solid rgba(137, 244, 232, 0.28);
    border-radius: 8px;
    padding: 20px;
    background: rgba(5, 16, 24, 0.72);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.32), inset 0 0 44px rgba(68, 231, 218, 0.08);
    backdrop-filter: blur(18px);
    transform: translateY(18px);
    overflow: hidden;
}

.home-quick-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(90deg, rgba(137, 244, 232, 0.26), rgba(137, 244, 232, 0) 36%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
}

.home-quick-panel::after {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    top: 48px;
    height: 1px;
    background: linear-gradient(90deg, rgba(240, 198, 92, 0.8), rgba(137, 244, 232, 0));
}

.home-quick-panel > strong {
    position: relative;
    color: #f0c65c;
    font-size: 13px;
    text-transform: uppercase;
}

.home-quick-panel a {
    position: relative;
    display: grid;
    gap: 2px;
    min-height: 64px;
    border-radius: 8px;
    padding: 13px;
    color: #fff;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(73, 225, 211, 0.08));
    text-decoration: none;
    overflow: hidden;
}

.home-quick-panel a::after {
    content: ">";
    position: absolute;
    right: 14px;
    top: 50%;
    color: rgba(240, 198, 92, 0.84);
    font-weight: 900;
    transform: translateY(-50%);
}

.home-quick-panel a:hover {
    border-color: rgba(240, 198, 92, 0.42);
    background: linear-gradient(135deg, rgba(240, 198, 92, 0.16), rgba(73, 225, 211, 0.1));
    transform: translateX(4px);
}

.home-quick-panel span {
    font-weight: 900;
}

.home-quick-panel em {
    color: rgba(255, 255, 255, 0.68);
    font-style: normal;
    font-size: 13px;
}

.home-dashboard {
    margin-top: -54px;
    position: relative;
    z-index: 3;
}

.home-surface {
    position: relative;
    margin-top: 0;
    padding: 1px 0 86px;
    overflow: hidden;
    background:
        linear-gradient(180deg, #071018 0%, #0b1d22 20%, #10282b 56%, #0e2226 100%);
}

.home-surface::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(137, 244, 232, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(137, 244, 232, 0.035) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.18) 46%, rgba(0,0,0,0));
}

.home-surface > .container {
    position: relative;
    z-index: 1;
}

.home-surface > .arka-section {
    padding-top: 38px;
    padding-bottom: 38px;
}

.home-surface .section-heading {
    position: relative;
    margin-bottom: 18px;
}

.home-surface .section-heading::after {
    content: "";
    display: block;
    width: 72px;
    height: 2px;
    margin-top: 14px;
    background: linear-gradient(90deg, rgba(240, 198, 92, 0.95), rgba(137, 244, 232, 0));
}

.home-surface .section-heading .eyebrow {
    color: #f0c65c;
}

.home-surface .section-heading h2,
.home-surface .home-feature-copy h2 {
    color: #f7fffd;
    text-shadow: 0 12px 34px rgba(0, 0, 0, 0.32);
}

.home-surface .section-heading p,
.home-surface .home-feature-copy p:not(.eyebrow) {
    color: rgba(224, 244, 240, 0.72);
}

.home-surface .playground-panel,
.home-surface .playground-discovery a,
.home-surface .playground-progress,
.home-surface .playground-shelf > div,
.home-surface .empty-state {
    border-color: rgba(137, 244, 232, 0.18);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(137, 244, 232, 0.055)),
        rgba(7, 22, 29, 0.74);
    color: #f7fffd;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.18), inset 0 0 26px rgba(137, 244, 232, 0.04);
    backdrop-filter: blur(12px);
}

.home-surface .playground-progress span,
.home-surface .playground-shelf li,
.home-surface .playground-shelf a,
.home-surface .playground-discovery em,
.home-surface .empty-state span {
    color: rgba(224, 244, 240, 0.72);
}

.home-surface .playground-progress strong,
.home-surface .playground-shelf strong,
.home-surface .playground-discovery strong,
.home-surface .empty-state strong {
    color: #ffffff;
}

.home-stat-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.home-stat-row a {
    position: relative;
    display: grid;
    gap: 8px;
    min-height: 112px;
    overflow: hidden;
    border: 1px solid rgba(122, 229, 218, 0.34);
    border-radius: 8px;
    padding: 22px;
    color: #f7fffd;
    background:
        linear-gradient(135deg, rgba(10, 25, 34, 0.96), rgba(17, 51, 55, 0.9)),
        linear-gradient(90deg, rgba(240, 198, 92, 0.16), rgba(137, 244, 232, 0));
    text-decoration: none;
    box-shadow: 0 20px 54px rgba(21, 33, 38, 0.22);
}

.home-stat-row a::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, #f0c65c, rgba(137, 244, 232, 0.9), rgba(137, 244, 232, 0));
}

.home-stat-row a::after {
    content: "";
    position: absolute;
    right: -24px;
    bottom: -36px;
    width: 120px;
    aspect-ratio: 1;
    border: 1px solid rgba(137, 244, 232, 0.2);
    border-radius: 50%;
}

.home-stat-row strong {
    display: block;
    color: #fff;
    font-size: 34px;
    line-height: 1;
}

.home-stat-row span {
    display: block;
    color: rgba(222, 245, 241, 0.78);
    font-weight: 900;
}

.home-feature {
    position: relative;
    display: grid;
    grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.05fr);
    gap: 28px;
    align-items: center;
    overflow: hidden;
    border: 1px solid rgba(137, 244, 232, 0.18);
    border-radius: 8px;
    padding: 28px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.11), rgba(137, 244, 232, 0.045)),
        rgba(7, 22, 29, 0.58);
    box-shadow: 0 22px 58px rgba(0, 0, 0, 0.18), inset 0 0 34px rgba(137, 244, 232, 0.04);
    backdrop-filter: blur(12px);
}

.home-feature::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, #f0c65c, rgba(137, 244, 232, 0.7), rgba(137, 244, 232, 0));
}

.home-feature::after {
    content: "";
    position: absolute;
    right: -90px;
    bottom: -120px;
    width: 340px;
    aspect-ratio: 1;
    border: 1px solid rgba(137, 244, 232, 0.14);
    border-radius: 50%;
    pointer-events: none;
}

.home-feature.media-missing {
    grid-template-columns: 1fr;
}

.home-feature.media-missing .home-feature-copy {
    max-width: 840px;
}

.home-feature-media {
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(137, 244, 232, 0.18);
    background: #10151b;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
}

.home-feature-media img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: center;
    background: #eef2f1;
}

.home-feature-copy h2 {
    margin: 0;
    max-width: 820px;
    font-size: clamp(34px, 3.6vw, 54px);
    line-height: 1.2;
}

.home-feature-copy p:not(.eyebrow) {
    max-width: 620px;
    margin: 16px 0 0;
    color: #536167;
    line-height: 1.75;
}

.compact-actions {
    margin-top: 20px;
}

.home-feature .compact-actions .btn {
    min-height: 42px;
    border-color: rgba(137, 244, 232, 0.28);
    color: rgba(238, 249, 247, 0.88);
    background: rgba(255, 255, 255, 0.035);
    border-radius: 999px;
    padding: 9px 15px;
    box-shadow: inset 0 0 20px rgba(137, 244, 232, 0.04);
}

.home-feature .compact-actions .btn:hover,
.home-feature .compact-actions .btn:focus {
    border-color: rgba(240, 198, 92, 0.72);
    color: #fff;
    background: rgba(240, 198, 92, 0.12);
    text-decoration: none;
}

.home-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 18px;
    align-items: start;
    word-break: keep-all;
}

.home-card-list,
.home-link-list {
    display: grid;
    gap: 10px;
}

.home-card-list a,
.home-link-list a {
    position: relative;
    display: grid;
    overflow: hidden;
    border: 1px solid rgba(137, 244, 232, 0.18);
    border-radius: 8px;
    padding: 15px;
    color: #f6fffd;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.13), rgba(137, 244, 232, 0.055)),
        rgba(7, 22, 29, 0.74);
    text-decoration: none;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.18), inset 0 0 26px rgba(137, 244, 232, 0.04);
    backdrop-filter: blur(12px);
}

.home-card-list a::before,
.home-link-list a::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, rgba(240, 198, 92, 0.86), rgba(137, 244, 232, 0.48), rgba(137, 244, 232, 0));
    opacity: 0.72;
}

.home-card-list a:hover,
.home-link-list a:hover {
    border-color: rgba(137, 244, 232, 0.42);
    transform: translateY(-2px);
    text-decoration: none;
}

.home-card-list a {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.home-card-list img {
    width: 58px;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(240, 198, 92, 0.26), rgba(137, 244, 232, 0.18)),
        #0b2027;
    color: transparent;
    box-shadow: inset 0 0 0 1px rgba(137, 244, 232, 0.22);
}

.home-card-list img.is-missing,
.codex-list img.is-missing {
    display: none;
}

.home-card-list a.has-missing-image {
    grid-template-columns: 1fr;
}

.home-card-list strong,
.home-link-list strong {
    display: block;
    margin-bottom: 4px;
    font-size: 16px;
    color: #ffffff;
    word-break: keep-all;
    overflow-wrap: normal;
}

.home-card-list em,
.home-link-list span {
    display: -webkit-box;
    overflow: hidden;
    color: rgba(224, 244, 240, 0.72);
    font-style: normal;
    line-height: 1.55;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: keep-all;
}

.home-card-list .home-more-link,
.home-link-list .home-more-link {
    border-color: rgba(240, 198, 92, 0.32);
    background:
        linear-gradient(135deg, rgba(240, 198, 92, 0.12), rgba(137, 244, 232, 0.07)),
        rgba(12, 34, 40, 0.82);
}

.home-card-list a.home-more-link {
    grid-template-columns: 1fr;
    min-height: 86px;
    align-items: center;
    padding: 16px;
}

.home-card-list .home-more-link span,
.home-link-list .home-more-link span {
    display: block;
    min-width: 0;
}

.home-card-list .home-more-link strong,
.home-link-list .home-more-link strong {
    display: block;
    margin-bottom: 6px;
    font-size: 17px;
    line-height: 1.25;
}

.home-card-list .home-more-link em,
.home-link-list .home-more-link span {
    display: block;
    overflow: visible;
    color: rgba(224, 244, 240, 0.76);
    line-height: 1.55;
    -webkit-line-clamp: unset;
    -webkit-box-orient: initial;
}

.home-card-list .home-more-link:hover,
.home-link-list .home-more-link:hover {
    border-color: rgba(240, 198, 92, 0.62);
}

.arka-footer {
    color: rgba(255, 255, 255, 0.7);
    background: #152126;
    padding: 24px 0;
}

.arka-footer .container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.footer-admin-link {
    margin-left: 10px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
    text-decoration: none;
}

.footer-admin-link:hover {
    color: #f0c65c;
    text-decoration: none;
}

input,
select,
textarea {
    max-width: 280px;
}

@media (max-width: 900px) {
    .arka-hero h1 {
        font-size: 42px;
    }

    .hero-shell,
    .feature-grid,
    .arka-two-column,
    .codex-detail-layout,
    .entity-list,
    .codex-list,
    .character-strip,
    .admin-editor-layout,
    .admin-workbench,
    .admin-flow-list,
    .easy-guide,
    .simple-action-grid,
    .admin-filter-bar,
    .admin-grid,
    .admin-stat-grid,
    .form-grid {
        grid-template-columns: 1fr;
    }

    .easy-steps li {
        grid-template-columns: 1fr;
    }

    .easy-steps a {
        grid-row: auto;
    }

    .editor-side-panel {
        position: static;
    }

    .arka-hero {
        min-height: auto;
    }

    .hero-shell {
        min-height: auto;
    }

    .home-hero {
        min-height: auto;
        padding: 56px 0 42px;
    }

    .home-hero-shell,
    .home-feature,
    .home-content-grid {
        grid-template-columns: 1fr;
    }

    .home-quick-panel {
        margin-top: 8px;
    }

    .home-dashboard {
        margin-top: -18px;
    }

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

    .hero-character img {
        max-height: 520px;
    }
}

@media (max-width: 576px) {
    .arka-nav .navbar-nav {
        align-items: stretch;
        gap: 4px;
        padding: 12px 0 4px;
    }

    .arka-nav .nav-link {
        min-height: 42px;
        padding: 10px 12px;
    }

    .arka-nav .nav-auth-item {
        margin-left: 0;
        margin-top: 6px;
    }

    .arka-nav .nav-link-member,
    .arka-nav .nav-link-join {
        display: block;
        margin-left: 0;
        text-align: center;
    }

    .arka-nav-dropdown .dropdown-menu {
        display: none;
    }

    .arka-nav-dropdown .dropdown-toggle::after {
        display: none;
    }

    .arka-nav-dropdown > .nav-link {
        min-height: auto;
        padding-bottom: 4px;
        color: rgba(255, 255, 255, 0.62);
        background: transparent;
        font-size: 13px;
        pointer-events: none;
    }

    .nav-mobile-sub {
        display: block;
    }

    .nav-mobile-sub .nav-link {
        padding-left: 24px;
        color: rgba(255, 255, 255, 0.72);
        background: rgba(255, 255, 255, 0.04);
    }

    .admin-directory-panel {
        grid-template-columns: 1fr;
        top: 122px;
        right: 10px;
        width: calc(100vw - 20px);
        max-width: calc(100vw - 20px);
    }

    .arka-hero {
        padding: 72px 0 60px;
    }

    .arka-hero h1,
    .page-header h1 {
        font-size: 34px;
    }

    .hero-copy-wrap {
        padding-bottom: 10px;
    }

    .character-card {
        min-height: 360px;
    }

    .character-card img {
        min-height: 360px;
    }

    .hero-copy,
    .page-header p:last-child {
        font-size: 16px;
    }

    .arka-footer .container {
        flex-direction: column;
    }

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

    .search-form button {
        min-height: 46px;
    }

    .home-hero .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .home-hero .hero-actions .btn {
        min-height: 44px;
    }

    .home-quick-panel {
        padding: 12px;
    }

    .home-quick-panel a {
        min-height: 52px;
    }

    .home-stat-row {
        grid-template-columns: 1fr;
    }

    .home-stat-row a {
        padding: 14px;
    }

    .home-feature-copy h2 {
        font-size: 28px;
    }

    .home-card-list a {
        grid-template-columns: 52px minmax(0, 1fr);
    }

    .home-card-list img {
        width: 52px;
    }
}

.attachment-manager {
    display: grid;
    gap: 18px;
    margin-top: 22px;
}

.attachment-list {
    display: grid;
    gap: 14px;
}

.attachment-card {
    display: grid;
    grid-template-columns: 160px 1fr 1fr;
    gap: 12px;
    align-items: start;
    padding: 14px;
    border: 1px solid rgba(14, 27, 45, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.74);
}

.attachment-card img {
    width: 160px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid rgba(14, 27, 45, 0.12);
}

.inline-option {
    display: inline-flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
}

.inline-option.danger {
    color: #9d1c1c;
}

.fanart-thread-thumb {
    display: block;
    width: 120px;
    aspect-ratio: 4 / 3;
    margin-bottom: 10px;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(14, 27, 45, 0.12);
}

.fanart-thread-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fanart-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin: 28px 0;
}

.community-video-card {
    overflow: hidden;
    margin: 28px 0;
    border: 1px solid #d8e3e0;
    border-radius: 8px;
    background: #0f171b;
    box-shadow: 0 14px 36px rgba(21, 33, 38, 0.12);
}

.community-video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #05090b;
}

.community-video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.community-video-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    color: #fff;
}

.community-video-meta span {
    color: #f0c65c;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.community-video-meta strong {
    flex: 1;
    font-size: 16px;
}

.community-video-meta a {
    color: #fff;
    font-weight: 800;
}

.fanart-gallery figure {
    margin: 0;
}

.fanart-gallery img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid rgba(14, 27, 45, 0.12);
}

.fanart-gallery figcaption {
    display: grid;
    gap: 4px;
    margin-top: 8px;
    font-size: 14px;
    color: rgba(14, 27, 45, 0.72);
}

.community-header {
    padding: 56px 0 46px;
    color: #fff;
    background: #111c20;
}

.community-header.compact {
    padding: 42px 0 36px;
}

.community-header h1 {
    margin: 0;
    font-size: 40px;
    line-height: 1.2;
    font-weight: 900;
}

.community-header p:last-child {
    max-width: 780px;
    margin: 12px 0 0;
    color: rgba(255, 255, 255, 0.76);
    font-size: 17px;
    line-height: 1.65;
}

.community-title-row {
    display: flex;
    gap: 22px;
    align-items: flex-end;
    justify-content: space-between;
}

.community-user-badge {
    display: grid;
    min-width: 210px;
    gap: 3px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.08);
}

.community-user-badge span,
.community-user-badge small {
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    font-weight: 800;
}

.community-user-badge strong {
    color: #fff;
    font-size: 18px;
}

.community-board-shell {
    display: grid;
    gap: 18px;
}

.community-board-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.community-board-tabs a {
    border: 1px solid #cfdad8;
    border-radius: 8px;
    padding: 8px 12px;
    color: #172026;
    font-weight: 900;
    text-decoration: none;
    background: #fff;
}

.community-board-tabs a.active,
.community-board-tabs a:hover {
    border-color: #17635b;
    color: #fff;
    background: #17635b;
    text-decoration: none;
}

.community-toolbar {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #d8e3e0;
    border-radius: 8px;
    padding: 12px;
    background: #fff;
}

.community-search-form {
    display: flex;
    flex: 1;
    gap: 8px;
    align-items: center;
}

.community-search-form input,
.community-search-form select {
    min-height: 42px;
    border: 1px solid #cfdad8;
    border-radius: 8px;
    padding: 0 12px;
    background: #fff;
}

.community-search-form input {
    flex: 1;
    min-width: 180px;
}

.community-counts {
    display: grid;
    min-width: 82px;
    place-items: center;
    border-left: 1px solid #e2e9e7;
    color: #6a777b;
}

.community-counts strong {
    color: #17635b;
    font-size: 22px;
}

.community-board-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

.community-board-card,
.community-thread-card,
.community-side-card,
.community-write-panel,
.community-article,
.community-empty {
    border: 1px solid #d8e3e0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(21, 33, 38, 0.06);
}

.community-board-card {
    display: grid;
    gap: 8px;
    min-height: 190px;
    align-content: start;
    padding: 20px;
    color: #172026;
    text-decoration: none;
}

.community-board-card:hover,
.community-thread-card:hover {
    color: #172026;
    border-color: #83b7ae;
    text-decoration: none;
}

.community-board-card span,
.community-section-head span,
.community-thread-card small {
    color: #6a777b;
    font-size: 12px;
    font-weight: 900;
}

.community-board-card strong {
    font-size: 23px;
}

.community-board-card p {
    margin: 0;
    color: #536167;
    line-height: 1.65;
}

.community-board-card em {
    align-self: end;
    color: #17635b;
    font-style: normal;
    font-weight: 900;
}

.community-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 22px;
    align-items: start;
}

.community-section-head {
    display: flex;
    gap: 14px;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 14px;
}

.community-section-head h2 {
    margin: 0;
    font-size: 28px;
    font-weight: 900;
}

.community-thread-list,
.community-comment-list {
    display: grid;
    gap: 10px;
}

.community-list-head,
.community-thread-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 130px 70px 78px 70px 100px;
    gap: 10px;
    align-items: center;
}

.community-list-head {
    padding: 0 14px 8px;
    color: #6a777b;
    font-size: 12px;
    font-weight: 900;
}

.community-thread-row {
    border: 1px solid #d8e3e0;
    border-radius: 8px;
    padding: 12px 14px;
    color: #172026;
    text-decoration: none;
    background: #fff;
    box-shadow: 0 10px 28px rgba(21, 33, 38, 0.05);
}

.community-thread-row:hover {
    border-color: #83b7ae;
    color: #172026;
    text-decoration: none;
    transform: translateY(-1px);
}

.community-row-title {
    display: flex;
    gap: 10px;
    align-items: center;
    min-width: 0;
}

.community-row-title img {
    width: 56px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 6px;
}

.community-row-title span {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.community-row-title strong,
.community-row-title em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.community-row-title strong {
    font-size: 16px;
}

.community-row-title em {
    color: #536167;
    font-size: 13px;
    font-style: normal;
}

.community-thread-row > span:not(.community-row-title),
.community-thread-row time {
    color: #536167;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
}

.community-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 18px;
}

.community-pagination a {
    display: grid;
    min-width: 38px;
    min-height: 38px;
    place-items: center;
    border: 1px solid #cfdad8;
    border-radius: 8px;
    color: #172026;
    font-weight: 900;
    text-decoration: none;
    background: #fff;
}

.community-pagination a.active,
.community-pagination a:hover {
    border-color: #17635b;
    color: #fff;
    background: #17635b;
    text-decoration: none;
}

.community-thread-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 74px;
    gap: 14px;
    align-items: center;
    padding: 14px;
    color: #172026;
    text-decoration: none;
}

.community-thread-card > img {
    width: 92px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 6px;
}

.community-thread-copy {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.community-thread-copy strong {
    overflow: hidden;
    font-size: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.community-thread-copy em {
    overflow: hidden;
    color: #536167;
    font-style: normal;
    line-height: 1.55;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.community-thread-meta {
    display: grid;
    place-items: center;
    border-left: 1px solid #e4ebe9;
    color: #536167;
}

.community-thread-meta b {
    color: #17635b;
    font-size: 20px;
}

.community-side-card {
    display: grid;
    gap: 16px;
    padding: 18px;
}

.community-side-card h2,
.community-write-panel h2 {
    margin: 0;
    font-size: 21px;
    font-weight: 900;
}

.community-side-card dl {
    display: grid;
    gap: 10px;
    margin: 0;
}

.community-side-card dl div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.community-side-card dt {
    color: #6a777b;
    font-weight: 800;
}

.community-side-card dd {
    margin: 0;
    color: #172026;
    font-weight: 900;
}

.community-write-section {
    padding-top: 0;
}

.community-write-panel,
.community-article {
    padding: 22px;
}

.community-write-panel label {
    display: grid;
    gap: 7px;
    margin-bottom: 14px;
    color: #26343a;
    font-weight: 800;
}

.community-write-panel label span {
    color: #6a777b;
    font-size: 12px;
    text-transform: uppercase;
}

.community-write-panel input,
.community-write-panel textarea {
    width: 100%;
    border: 1px solid #cfdad8;
    border-radius: 8px;
    padding: 11px 12px;
}

.community-post-body {
    display: grid;
    gap: 16px;
}

.community-post-meta,
.community-post-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.community-post-meta {
    margin-bottom: 22px;
}

.community-post-meta span {
    border: 1px solid #dce6e3;
    border-radius: 8px;
    padding: 7px 10px;
    color: #536167;
    font-size: 13px;
    font-weight: 900;
    background: #fbfcfc;
}

.community-post-body p {
    margin: 0;
    color: #26343a;
    font-size: 17px;
    line-height: 1.85;
}

.community-comments {
    margin-top: 32px;
}

.community-post-actions {
    margin-top: 28px;
}

.community-like-form {
    margin: 0;
}

.community-like-button {
    display: inline-flex;
    min-height: 44px;
    gap: 10px;
    align-items: center;
    border: 1px solid #cfdad8;
    border-radius: 8px;
    padding: 0 18px;
    color: #172026;
    font-weight: 900;
    background: #fff;
    cursor: pointer;
}

.community-like-button.active {
    border-color: #17635b;
    color: #fff;
    background: #17635b;
}

.community-like-button:disabled {
    cursor: wait;
    opacity: 0.62;
}

.community-comment {
    display: grid;
    gap: 5px;
    border: 1px solid #e0e8e6;
    border-radius: 8px;
    padding: 14px;
    background: #fbfcfc;
}

.community-comment strong {
    color: #17635b;
}

.community-comment time {
    color: #6a777b;
    font-size: 12px;
    font-weight: 800;
}

.community-comment p {
    margin: 4px 0 0;
    color: #26343a;
    line-height: 1.65;
}

.community-empty {
    padding: 20px;
}

.community-empty.compact {
    box-shadow: none;
}

.community-empty strong {
    display: block;
    margin-bottom: 6px;
    font-size: 18px;
}

.community-empty p {
    margin: 0;
    color: #536167;
    line-height: 1.65;
}

.community-classic-wrap {
    padding: 34px 0 48px;
    background: #f5f6f7;
}

.community-classic-wrap .container {
    max-width: 1040px;
}

.community-classic-head {
    display: flex;
    gap: 18px;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 18px;
}

.community-classic-head h1 {
    margin: 0;
    color: #111;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 900;
}

.community-classic-head p {
    margin: 7px 0 0;
    color: #666;
    font-size: 13px;
}

.community-classic-user {
    min-width: 170px;
    border: 1px solid #d7dce0;
    border-radius: 4px;
    padding: 8px 10px;
    background: #fff;
    text-align: right;
}

.community-classic-user span,
.community-classic-user small {
    display: block;
    color: #777;
    font-size: 11px;
}

.community-classic-user strong {
    display: block;
    color: #333;
    font-size: 13px;
}

.community-classic-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.community-classic-tabs a {
    border: 1px solid #d2d8dc;
    border-radius: 4px;
    padding: 8px 13px;
    color: #111;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    background: #fff;
}

.community-classic-tabs a.active,
.community-classic-tabs a:hover {
    border-color: #0f6f64;
    color: #fff;
    background: #0f6f64;
    text-decoration: none;
}

.community-classic-actions,
.community-classic-bottom {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}

.community-classic-actions {
    margin-bottom: 8px;
}

.community-classic-count {
    color: #666;
    font-size: 12px;
}

.community-classic-count strong {
    color: #0f6f64;
}

.community-classic-buttons {
    display: flex;
    gap: 6px;
}

.community-board-table-wrap {
    border-top: 2px solid #777;
    border-bottom: 1px solid #cfd4d8;
    background: #fff;
}

.community-board-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    color: #111;
    font-size: 13px;
}

.community-board-table .col-category {
    width: 82px;
}

.community-board-table .col-author {
    width: 150px;
}

.community-board-table .col-date,
.community-board-table .col-hit,
.community-board-table .col-like {
    width: 70px;
}

.community-board-table th {
    height: 34px;
    border-bottom: 1px solid #ccd2d6;
    color: #333;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
    background: linear-gradient(#fbfbfb, #f0f2f3);
}

.community-board-table td {
    height: 34px;
    border-bottom: 1px solid #e5e8ea;
    padding: 0 8px;
    vertical-align: middle;
}

.community-board-table tr.is-pinned td {
    background: #fbfbfb;
}

.post-category {
    color: #005bac;
    text-align: center;
    white-space: nowrap;
}

.is-pinned .post-category {
    color: #0f6f64;
    font-weight: 900;
}

.post-title a {
    display: flex;
    min-width: 0;
    gap: 5px;
    align-items: center;
    color: #111;
    text-decoration: none;
}

.post-title a:hover span {
    text-decoration: underline;
}

.post-title span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.post-title b,
.post-title i,
.post-number.like {
    color: #1768ff;
    font-style: normal;
    font-weight: 900;
}

.post-pin {
    color: #e00000;
    white-space: nowrap;
}

.post-author,
.post-date,
.post-number {
    color: #333;
    text-align: center;
    white-space: nowrap;
}

.post-author {
    overflow: hidden;
    text-overflow: ellipsis;
}

.community-board-empty {
    height: 82px !important;
    color: #555;
    text-align: center;
}

.community-classic-bottom {
    margin-top: 12px;
}

.community-classic-search {
    display: flex;
    gap: 6px;
    align-items: center;
}

.community-classic-search input,
.community-classic-search select {
    height: 34px;
    border: 1px solid #ccd2d6;
    border-radius: 3px;
    padding: 0 9px;
    background: #fff;
}

.community-classic-search input {
    width: 190px;
}

.community-classic-pages {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.community-classic-pages a,
.community-classic-pages span {
    min-width: 28px;
    height: 30px;
    display: grid;
    place-items: center;
    color: #777;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.community-classic-pages a.active {
    border: 1px solid #aaa;
    color: #111;
    background: #fff;
}

.community-classic-write {
    margin-top: 28px;
    border: 1px solid #d7dce0;
    border-radius: 4px;
    background: #fff;
}

.community-classic-write summary {
    cursor: pointer;
    border-bottom: 1px solid #e5e8ea;
    padding: 12px 16px;
    color: #111;
    font-size: 16px;
    font-weight: 900;
}

.community-classic-write form {
    padding: 14px 16px 16px;
}

.community-classic-write .write-row {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    margin-bottom: 10px;
}

.community-classic-write label {
    padding-top: 8px;
    color: #333;
    font-size: 12px;
    font-weight: 900;
}

.community-classic-write input[type="text"],
.community-classic-write input[type="url"],
.community-classic-write input:not([type]),
.community-classic-write textarea {
    width: 100%;
    border: 1px solid #ccd2d6;
    border-radius: 3px;
    padding: 8px 9px;
}

.community-classic-write textarea {
    resize: vertical;
}

.community-classic-write small {
    display: block;
    margin-top: 5px;
    color: #555;
    font-size: 12px;
    font-weight: 800;
}

.community-classic-write .write-actions {
    padding-left: 92px;
}

.community-read-wrap .container {
    max-width: 1120px;
}

.community-read,
.community-reply-list,
.community-reply-write {
    border: 1px solid #d9e1e3;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(18, 31, 36, 0.07);
}

.community-read {
    overflow: hidden;
}

.community-read-head {
    border-top: 4px solid #0f6f64;
    border-bottom: 1px solid #e2e8ea;
    padding: 26px 30px 18px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfc 100%);
}

.read-board-name {
    margin: 0 0 9px;
    color: #0f6f64;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.community-read-head h1 {
    margin: 0 0 18px;
    color: #101719;
    font-size: 30px;
    line-height: 1.32;
    font-weight: 900;
}

.community-read-head dl {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin: 0;
    color: #555;
    font-size: 13px;
}

.community-read-head dl div {
    display: flex;
    gap: 5px;
}

.community-read-head dt {
    color: #718085;
    font-weight: 800;
}

.community-read-head dd {
    margin: 0;
    color: #1e2a2e;
    font-weight: 800;
}

.community-read-body {
    min-height: 320px;
    padding: 34px 34px 42px;
    color: #1e2a2e;
    font-size: 17px;
    line-height: 1.95;
}

.community-read-body p {
    margin: 0 0 18px;
}

.community-read-actions {
    display: flex;
    gap: 7px;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #e5ecee;
    padding: 18px;
    background: #fbfcfc;
}

.community-reply-list {
    margin-top: 20px;
}

.community-reply-list h2 {
    margin: 0;
    border-bottom: 1px solid #e1e8ea;
    padding: 16px 20px;
    color: #101719;
    font-size: 18px;
    font-weight: 900;
}

.empty-reply {
    margin: 0;
    padding: 24px 20px;
    color: #666;
}

.community-reply {
    border-bottom: 1px solid #e8ecef;
    padding: 16px 20px;
}

.community-reply:last-child {
    border-bottom: 0;
}

.community-reply .reply-meta {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 6px;
}

.community-reply strong {
    color: #111;
    font-size: 14px;
}

.community-reply time {
    color: #777;
    font-size: 12px;
}

.community-reply p {
    margin: 0;
    color: #333;
    font-size: 15px;
    line-height: 1.75;
}

.community-nested-replies {
    display: grid;
    gap: 8px;
    margin-top: 14px;
    margin-left: 26px;
    border-left: 3px solid #dfe9e7;
    padding-left: 14px;
}

.community-reply.nested {
    border: 1px solid #e3ebed;
    border-radius: 8px;
    padding: 12px 14px;
    background: #f8fbfa;
}

.community-reply-inline-write {
    margin-top: 12px;
}

.community-reply-inline-write summary {
    display: inline-flex;
    cursor: pointer;
    border: 1px solid #d0dcda;
    border-radius: 8px;
    padding: 6px 10px;
    color: #0f6f64;
    font-size: 13px;
    font-weight: 900;
    list-style: none;
}

.community-reply-inline-write summary::-webkit-details-marker {
    display: none;
}

.community-reply-inline-write form {
    display: grid;
    gap: 8px;
    margin-top: 10px;
    border: 1px solid #e3ebed;
    border-radius: 8px;
    padding: 12px;
    background: #fbfcfc;
}

.community-reply-inline-write label {
    display: grid;
    gap: 6px;
}

.community-reply-inline-write label span {
    color: #333;
    font-size: 12px;
    font-weight: 900;
}

.community-reply-inline-write textarea {
    width: 100%;
    border: 1px solid #ccd2d6;
    border-radius: 8px;
    min-height: 92px;
    padding: 10px 11px;
    resize: vertical;
}

.community-reply-write {
    margin-top: 14px;
    padding: 18px;
}

.community-reply-write form {
    display: grid;
    gap: 12px;
}

.community-reply-write label {
    display: grid;
    gap: 6px;
}

.community-reply-write label span {
    color: #333;
    font-size: 13px;
    font-weight: 900;
}

.community-reply-write textarea {
    width: 100%;
    border: 1px solid #ccd2d6;
    border-radius: 8px;
    min-height: 150px;
    padding: 14px 15px;
    font-size: 15px;
    line-height: 1.7;
    resize: vertical;
    background: #fbfcfc;
}

.community-reply-write textarea:focus {
    outline: none;
    border-color: #0f6f64;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(15, 111, 100, 0.12);
}

.community-reply-write .admin-button.primary {
    min-height: 46px;
    font-size: 15px;
}

.community-write-page {
    overflow: hidden;
    border: 1px solid #ccd5d8;
    border-top: 3px solid #0f6f64;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(20, 31, 36, 0.08);
}

.community-write-page header {
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #d7e1e3;
    padding: 22px 26px;
    background:
        linear-gradient(135deg, rgba(15, 111, 100, 0.08), rgba(255, 255, 255, 0) 48%),
        #fbfcfc;
}

.community-write-page h1 {
    margin: 0;
    color: #111;
    font-size: 24px;
    line-height: 1.25;
    font-weight: 900;
}

.community-write-page p {
    margin: 8px 0 0;
    color: #536167;
    font-size: 14px;
    font-weight: 700;
}

.community-write-page form {
    display: grid;
    gap: 16px;
    padding: 26px;
}

.community-write-page .write-row {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    margin-bottom: 0;
}

.community-write-page label {
    padding-top: 13px;
    color: #1f2a30;
    font-size: 13px;
    font-weight: 900;
}

.community-write-page .write-row > span {
    width: fit-content;
    border: 1px solid #d8e3e1;
    border-radius: 999px;
    padding: 9px 13px;
    color: #0f6f64;
    background: #f3faf8;
    font-size: 14px;
    font-weight: 900;
}

.community-write-page input[type="url"],
.community-write-page input[type="file"],
.community-write-page input:not([type]),
.community-write-page textarea {
    width: 100%;
    max-width: none;
    border: 1px solid #c8d3d6;
    border-radius: 8px;
    padding: 13px 14px;
    color: #162126;
    background: #fff;
    font-size: 16px;
    line-height: 1.55;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.community-write-page input[type="url"],
.community-write-page input:not([type]) {
    min-height: 52px;
}

.community-write-page input[type="file"] {
    min-height: 52px;
    padding: 10px;
    background: #f8faf9;
}

.community-write-page input::file-selector-button {
    border: 1px solid #0f6f64;
    border-radius: 7px;
    margin-right: 12px;
    padding: 9px 12px;
    color: #fff;
    background: #0f6f64;
    font-weight: 900;
    cursor: pointer;
}

.community-write-page input[type="url"]:focus,
.community-write-page input:not([type]):focus,
.community-write-page textarea:focus {
    outline: none;
    border-color: #0f6f64;
    background: #fbfffe;
    box-shadow: 0 0 0 4px rgba(15, 111, 100, 0.12);
}

.community-write-page textarea {
    min-height: 460px;
    resize: vertical;
}

.community-write-page small {
    display: block;
    margin-top: 8px;
    color: #536167;
    font-size: 12px;
    font-weight: 900;
}

.community-write-page .write-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    border-top: 1px solid #e2e9eb;
    margin-top: 8px;
    padding-top: 18px;
}

.community-write-page .write-actions .admin-button {
    min-width: 86px;
}

.community-delete-form {
    margin: 0;
}

.admin-button.danger {
    border-color: #f0c7c7;
    color: #b00000;
    background: #fff7f7;
}

.admin-button.danger:hover {
    border-color: #b00000;
    color: #fff;
    background: #b00000;
}

@media (max-width: 768px) {
    .attachment-card {
        grid-template-columns: 1fr;
    }

    .attachment-card img {
        width: 100%;
    }

    .community-layout,
    .community-thread-card {
        grid-template-columns: 1fr;
    }

    .community-title-row,
    .community-toolbar,
    .community-search-form {
        align-items: stretch;
        flex-direction: column;
    }

    .community-user-badge {
        min-width: 0;
    }

    .community-list-head {
        display: none;
    }

    .community-thread-row {
        grid-template-columns: 1fr;
    }

    .community-thread-row > span:not(.community-row-title),
    .community-thread-row time {
        text-align: left;
    }

    .community-row-title strong,
    .community-row-title em {
        white-space: normal;
    }

    .community-classic-wrap {
        padding: 22px 0 36px;
    }

    .community-classic-head,
    .community-classic-actions,
    .community-classic-bottom {
        align-items: stretch;
        flex-direction: column;
    }

    .community-classic-user {
        text-align: left;
    }

    .community-board-table-wrap {
        overflow: visible;
        border-top: 0;
        border-bottom: 0;
        background: transparent;
    }

    .community-board-table {
        display: block;
        min-width: 0;
        border-collapse: separate;
        font-size: 14px;
    }

    .community-board-table colgroup,
    .community-board-table thead {
        display: none;
    }

    .community-board-table tbody {
        display: grid;
        gap: 8px;
    }

    .community-board-table tr {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 6px 10px;
        border: 1px solid #d8dee2;
        border-radius: 8px;
        padding: 12px;
        background: #fff;
        box-shadow: 0 6px 18px rgba(16, 24, 28, 0.05);
    }

    .community-board-table tr.is-pinned {
        border-color: #a9cfc8;
        background: #f7fbfa;
    }

    .community-board-table tr.is-pinned td {
        background: transparent;
    }

    .community-board-table td {
        display: block;
        height: auto;
        border: 0;
        padding: 0;
    }

    .community-board-table .post-category {
        grid-column: 1 / -1;
        width: fit-content;
        border-radius: 999px;
        padding: 3px 8px;
        color: #0f6f64;
        background: #eef6f4;
        font-size: 11px;
        font-weight: 900;
        text-align: left;
    }

    .community-board-table .post-title {
        grid-column: 1 / -1;
    }

    .post-title a {
        align-items: flex-start;
        gap: 6px;
    }

    .post-title span {
        white-space: normal;
        line-height: 1.45;
    }

    .post-title b,
    .post-title i {
        flex: 0 0 auto;
    }

    .community-board-table .post-author,
    .community-board-table .post-date,
    .community-board-table .post-number {
        color: #5d6a70;
        font-size: 12px;
        text-align: left;
    }

    .community-board-table .post-author {
        grid-column: 1 / 2;
        white-space: normal;
    }

    .community-board-table .post-date {
        grid-column: 2 / 3;
        text-align: right;
    }

    .community-board-table .post-number {
        display: inline-flex;
        gap: 4px;
        align-items: center;
    }

    .community-board-table .post-number::before {
        color: #8a969b;
        font-weight: 800;
    }

    .community-board-table .post-number:nth-of-type(5)::before {
        content: "조회";
    }

    .community-board-table .post-number.like::before {
        content: "추천";
    }

    .community-board-empty {
        grid-column: 1 / -1;
        min-height: 88px;
        display: grid !important;
        place-items: center;
    }

    .community-classic-search {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 116px;
        gap: 8px;
        width: 100%;
    }

    .community-classic-search input {
        min-width: 0;
        width: 100%;
    }

    .community-classic-search .admin-button {
        grid-column: 1 / -1;
    }

    .community-classic-write .write-row {
        grid-template-columns: 1fr;
    }

    .community-classic-write .write-actions {
        padding-left: 0;
    }

    .community-write-page header,
    .community-write-page .write-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .community-write-page {
        border-radius: 8px;
        overflow: hidden;
    }

    .community-write-page form {
        padding: 14px;
    }

    .community-write-page .write-row {
        grid-template-columns: 1fr;
        gap: 6px;
        margin-bottom: 14px;
    }

    .community-write-page label {
        padding-top: 0;
    }

    .community-write-page input[type="url"],
    .community-write-page input[type="file"],
    .community-write-page input:not([type]),
    .community-write-page textarea {
        min-height: 46px;
        max-width: none;
        font-size: 16px;
    }

    .community-write-page textarea {
        min-height: 48vh;
    }

    .community-thread-card > img {
        width: 100%;
    }

    .community-thread-meta {
        display: flex;
        justify-content: flex-start;
        border-left: 0;
        border-top: 1px solid #e4ebe9;
        padding-top: 10px;
    }

    .community-thread-copy strong,
    .community-thread-copy em {
        white-space: normal;
    }
}

@media (max-width: 768px) {
    body {
        background: #f7f9fa;
    }

    .admin-header,
    .admin-clean-header {
        padding: 30px 0;
    }

    .admin-header h1,
    .admin-clean-header h1 {
        font-size: 30px;
        line-height: 1.18;
    }

    .admin-list-header {
        display: grid;
        gap: 14px;
    }

    .admin-home-quick {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        width: 100%;
    }

    .admin-home-quick .admin-button,
    .admin-actions .admin-button,
    .admin-button {
        min-height: 44px;
    }

    .sticky-actions {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        bottom: auto;
        margin-top: 14px;
        padding: 12px 0 0;
        box-shadow: none;
    }

    .sticky-actions .admin-button {
        min-height: 42px;
        padding: 8px 10px;
        font-size: 15px;
    }

    .sticky-actions .admin-button.primary {
        grid-column: 1 / -1;
    }

    .sticky-actions .mobile-secondary-action {
        display: none;
    }

    .admin-form-panel {
        padding: 16px;
    }

    .admin-form-panel input,
    .admin-form-panel select,
    .admin-form-panel textarea {
        min-height: 44px;
        font-size: 16px;
    }

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

    .admin-runtime-section {
        margin: 18px 0 26px;
    }

    .admin-runtime-card {
        gap: 14px;
        padding: 16px;
    }

    .admin-runtime-card h2 {
        font-size: 20px;
    }

    .admin-runtime-card dl {
        grid-template-columns: 1fr;
    }

    .admin-bulkbar {
        position: static;
        margin: 12px 0;
    }

    .admin-bulkbar form {
        gap: 10px;
        padding: 12px;
    }

    .admin-bulkbar-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-bulkbar-actions .admin-button {
        width: 100%;
        padding: 9px 10px;
        font-size: 14px;
    }

    .wiki-card-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .wiki-admin-card {
        grid-template-columns: 84px minmax(0, 1fr);
        gap: 12px;
        padding: 14px 14px 14px 42px;
    }

    .wiki-card-check {
        top: 14px;
        left: 14px;
    }

    .wiki-admin-card-media {
        width: 84px;
    }

    .wiki-admin-card-title {
        display: grid;
        gap: 3px;
    }

    .wiki-admin-card-title h3 {
        font-size: 18px;
        word-break: keep-all;
        overflow-wrap: anywhere;
    }

    .wiki-admin-card-body p {
        margin: 7px 0 10px;
        font-size: 14px;
        line-height: 1.55;
    }

    .wiki-admin-card-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wiki-admin-card-actions form {
        width: 100%;
    }

    .wiki-admin-card-actions .btn,
    .wiki-admin-card-actions button {
        width: 100%;
        min-height: 38px;
        padding: 8px 10px;
        text-align: center;
    }

    .timeline-admin-live-head {
        display: grid;
        align-items: start;
    }

    .timeline-admin-live-grid,
    .timeline-page-link-grid {
        grid-template-columns: 1fr;
    }

    .admin-guide-panel summary {
        padding: 12px 14px;
    }

    .admin-guide-panel ul {
        padding-right: 14px;
        padding-left: 28px;
    }

    .resource-bulk-bar,
    .admin-ops-grid,
    .ops-simple-list form {
        grid-template-columns: 1fr;
    }

    .resource-manager {
        gap: 12px;
    }

    .resource-library-panel {
        order: -3;
    }

    .resource-upload-panel {
        order: -1;
    }

    .resource-folder-panel {
        order: -2;
    }

    .resource-library-panel > .section-heading {
        margin-bottom: 0;
    }

    .resource-manager-toolbar {
        position: sticky;
        top: 0;
        z-index: 25;
        margin: -4px -4px 6px;
        border: 1px solid #dce7e4;
        border-radius: 10px;
        padding: 10px;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 12px 28px rgba(20, 30, 34, 0.08);
        backdrop-filter: blur(10px);
    }

    .resource-manager-toolbar input {
        min-height: 46px;
        border-radius: 10px;
        font-size: 16px;
    }

    .resource-quick-folders {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .resource-quick-folders button {
        min-height: 44px;
        border-radius: 10px;
        padding: 8px 10px;
        font-size: 12px;
        text-align: left;
        overflow-wrap: anywhere;
    }

    .resource-breadcrumb {
        min-height: 42px;
        margin: 0 -2px;
        border: 1px solid #e0ebe8;
        border-radius: 10px;
        padding: 6px;
        white-space: nowrap;
        scrollbar-width: none;
        background: #f7faf9;
    }

    .resource-breadcrumb::-webkit-scrollbar {
        display: none;
    }

    .resource-breadcrumb button {
        flex: 0 0 auto;
        min-height: 30px;
        border: 1px solid #cfdad8;
        border-radius: 999px;
        padding: 5px 10px;
        background: #fff;
        font-size: 12px;
    }

    .admin-form-panel textarea {
        min-height: 140px;
    }

    .intake-panel-heading,
    .intake-modal-header {
        display: grid;
    }

    .intake-entity-row,
    .intake-meta-grid {
        grid-template-columns: 1fr;
    }

    .intake-modal-backdrop {
        align-items: stretch;
        padding: 10px;
    }

    .intake-modal {
        max-height: calc(100vh - 20px);
        padding: 16px;
    }

    .resource-picker-field,
    .resource-picker-header,
    .resource-picker-controls {
        grid-template-columns: 1fr;
    }

    .wiki-gallery-field .resource-picker-field {
        grid-template-columns: 1fr;
    }

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

    .poster-gallery-hero {
        min-height: 62vh;
        padding: 92px 0 34px;
    }

    .poster-gallery-hero h1 {
        font-size: 48px;
    }

    .poster-gallery-grid {
        column-count: 1;
    }

    .timeline-hero {
        padding: 72px 0 42px;
    }

    .timeline-hero-inner,
    .timeline-overview-grid,
    .timeline-layout,
    .timeline-road li {
        grid-template-columns: 1fr;
    }

    .timeline-hero h1 {
        font-size: 44px;
    }

    .timeline-season-card {
        align-self: stretch;
    }

    .timeline-road {
        padding-left: 20px;
    }

    .timeline-road li {
        gap: 8px;
    }

    .timeline-marker::before {
        left: -22px;
    }

    .timeline-episode-panel {
        position: static;
    }

    .gallery-filter-bar,
    .gallery-bulk-panel {
        grid-template-columns: 1fr;
    }

    .gallery-view-tools,
    .gallery-bulk-form {
        width: 100%;
    }

    .gallery-view-tools .admin-button,
    .gallery-bulk-form select,
    .gallery-bulk-form .admin-button {
        flex: 1 1 160px;
    }

    .gallery-card-badges {
        justify-content: flex-start;
    }

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

    .gallery-admin-controls {
        position: static;
    }

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

    .resource-create-folder {
        grid-template-columns: 1fr;
    }

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

    .resource-admin-card {
        min-width: 0;
    }

    .resource-admin-meta strong,
    .resource-admin-meta span {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .resource-card-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .resource-detail-panel {
        position: static;
    }

    .resource-detail-list {
        grid-template-columns: 1fr;
    }

    .wiki-image-field .resource-picker-preview {
        min-height: 52vh;
        padding: 10px;
    }

    .wiki-image-field .resource-picker-preview img {
        max-height: 58vh;
    }

    .resource-picker-backdrop {
        align-items: stretch;
        padding: 0;
    }

    .resource-picker-modal {
        grid-template-rows: auto auto minmax(0, 1fr);
        width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        border: 0;
        border-radius: 0;
        padding: 10px;
        gap: 8px;
    }

    .resource-picker-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
        gap: 8px;
    }

    .resource-picker-header {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
        min-height: 42px;
    }

    .resource-picker-header .eyebrow {
        display: none;
    }

    .resource-picker-header h2 {
        margin: 0;
        font-size: 18px;
        line-height: 1.15;
    }

    .resource-picker-header .admin-button {
        min-height: 38px;
        padding: 8px 12px;
    }

    .resource-picker-controls {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 118px;
        gap: 8px;
        align-items: end;
    }

    .resource-picker-controls label {
        gap: 4px;
    }

    .resource-picker-controls label span {
        font-size: 11px;
        line-height: 1.1;
    }

    .resource-picker-controls input,
    .resource-picker-controls select {
        min-height: 42px;
        font-size: 16px;
    }

    .resource-picker-tree {
        display: flex;
        gap: 6px;
        max-height: 72px;
        overflow-x: auto;
        overflow-y: hidden;
        border: 0;
        border-radius: 0;
        padding: 2px 0 6px;
        white-space: nowrap;
        background: transparent;
        scrollbar-width: none;
    }

    .resource-picker-tree::-webkit-scrollbar {
        display: none;
    }

    .resource-picker-folder {
        display: inline-grid;
        grid-template-columns: minmax(0, 1fr) auto;
        flex: 0 0 min(72vw, 260px);
        width: min(72vw, 260px);
        min-height: 48px;
        border: 1px solid #d7e2e0;
        border-radius: 10px;
        padding: 8px 10px;
        background: #f7faf9;
    }

    .resource-picker-folder span {
        max-width: none;
        font-size: 12px;
        line-height: 1.25;
        white-space: normal;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .resource-picker-browser {
        min-height: 0;
    }

    .resource-picker-breadcrumb {
        display: flex;
        flex-wrap: nowrap;
        min-height: 32px;
        overflow-x: auto;
        padding: 0 0 2px;
        white-space: nowrap;
        scrollbar-width: none;
    }

    .resource-picker-breadcrumb::-webkit-scrollbar {
        display: none;
    }

    .resource-picker-breadcrumb button {
        flex: 0 0 auto;
        padding: 5px 9px;
        font-size: 12px;
    }

    .resource-picker-grid {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 2px 2px 16px;
        -webkit-overflow-scrolling: touch;
    }

    .resource-pagination {
        position: sticky;
        bottom: 0;
        z-index: 1;
        gap: 6px;
        min-height: 44px;
        margin-top: 0;
        padding-top: 7px;
        background: #fff;
    }

    .resource-pagination button {
        min-width: 62px;
        min-height: 38px;
        padding: 7px 10px;
    }

    .resource-pagination span {
        min-width: 98px;
        font-size: 11px;
    }

    .resource-picker-card {
        display: grid;
        grid-template-columns: 1fr;
        min-height: 0;
        gap: 8px;
        border-radius: 10px;
        padding: 10px;
        overflow: hidden;
    }

    .resource-picker-card-select {
        display: grid;
        grid-template-columns: 88px minmax(0, 1fr);
        align-items: center;
        gap: 12px;
        min-width: 0;
        width: 100%;
        text-align: left;
    }

    .resource-picker-card img {
        width: 88px;
        height: 88px;
        aspect-ratio: auto;
        border-radius: 8px;
        object-fit: cover;
    }

    .resource-picker-folder-card .resource-picker-card-select {
        height: auto;
    }

    .resource-picker-folder-tile {
        display: grid;
        width: 88px;
        height: 88px;
        place-items: center;
        aspect-ratio: auto;
        border-radius: 8px;
    }

    .resource-picker-card-select > span:last-child {
        display: grid;
        gap: 4px;
        min-width: 0;
    }

    .resource-picker-card strong {
        display: -webkit-box;
        font-size: 12px;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: 1.32;
        overflow: hidden;
        word-break: keep-all;
        overflow-wrap: anywhere;
    }

    .resource-picker-card small {
        display: -webkit-box;
        font-size: 11px;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: 1.3;
        overflow: hidden;
        word-break: keep-all;
        overflow-wrap: anywhere;
    }

    .resource-picker-card-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .resource-picker-card-actions button {
        width: 100%;
        min-height: 32px;
        border-radius: 8px;
        font-size: 11px;
    }

    .resource-preview-backdrop {
        padding: 0;
    }

    .resource-preview-modal {
        width: 100vw;
        height: 100dvh;
        border-radius: 0;
        padding: 12px;
    }

    .resource-preview-actions .admin-button {
        width: 100%;
    }

    .resource-create-folder {
        grid-template-columns: 1fr;
    }

    .resource-dropzone {
        min-height: 132px;
        padding: 16px;
    }

    .resource-dropzone strong {
        font-size: 16px;
    }

    .resource-folder-chips {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        max-height: 34vh;
        overflow: auto;
        padding: 0 2px 2px;
        -webkit-overflow-scrolling: touch;
    }

    .resource-folder-chip {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        width: 100%;
        min-height: 52px;
        border-radius: 10px;
        padding: 10px 12px;
        text-align: left;
    }

    .resource-folder-chip span {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        overflow-wrap: anywhere;
        font-size: 14px;
        line-height: 1.35;
    }

    .resource-folder-chip small {
        align-self: center;
        min-width: 34px;
        text-align: center;
    }

    .resource-admin-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .resource-admin-card {
        display: grid;
        grid-template-columns: 92px minmax(0, 1fr);
        align-items: center;
        border-radius: 10px;
        padding: 9px;
    }

    .resource-admin-thumb {
        width: 92px;
        height: 92px;
        aspect-ratio: auto;
    }

    .resource-folder-card {
        grid-template-columns: 64px minmax(0, 1fr);
        min-height: 78px;
        border-style: solid;
        background: #f7fbfa;
    }

    .resource-folder-icon {
        width: 64px;
        height: 64px;
        aspect-ratio: auto;
        font-size: 12px;
    }

    .resource-select-row {
        grid-column: 1 / -1;
        min-height: 34px;
        padding: 4px 2px;
    }

    .resource-card-footer {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
    }

    .resource-card-footer button {
        min-height: 36px;
        border: 1px solid #cfdad8;
        border-radius: 8px;
        padding: 7px 10px;
        background: #fff;
    }

    .resource-admin-meta strong {
        display: block;
        font-size: 13px;
        line-height: 1.28;
        overflow: visible;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .resource-admin-meta span {
        display: block;
        font-size: 12px;
        line-height: 1.3;
        overflow: visible;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .form-grid,
    .form-grid.compact,
    .admin-editor-layout,
    .admin-two-column,
    .arka-two-column {
        grid-template-columns: 1fr !important;
    }

    .admin-summary-row,
    .admin-summary-row.two-up,
    .admin-summary-row.four-up,
    .admin-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .admin-list-card {
        padding: 14px;
    }

    .admin-list-main {
        grid-template-columns: 78px minmax(0, 1fr);
        gap: 12px;
    }

    .admin-thumb,
    .admin-thumb img {
        width: 78px;
        height: 78px;
    }

    .admin-path-link {
        font-size: 12px;
        overflow-wrap: anywhere;
    }

    .editor-toolbar {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 2px;
    }

    .editor-toolbar button,
    .editor-toolbar .admin-button {
        flex: 0 0 auto;
        min-height: 42px;
    }

    .slug-row {
        grid-template-columns: 1fr;
    }

    .admin-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

@media (max-width: 430px) {
    .admin-summary-row,
    .admin-summary-row.two-up,
    .admin-summary-row.four-up,
    .admin-stat-grid,
    .admin-stat-grid-clean {
        grid-template-columns: 1fr;
    }

    .admin-list-main {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .admin-thumb,
    .admin-thumb img {
        width: 64px;
        height: 64px;
    }
}

.arka-nav .navbar-collapse .navbar-nav .nav-link-notice {
    color: #f6d77b;
}

.arka-nav .navbar-collapse .navbar-nav .nav-link-notice:hover,
.arka-nav .navbar-collapse .navbar-nav .nav-link-notice:focus {
    color: #152126;
    background: #f0c65c;
}

.account-page {
    min-height: calc(100vh - 180px);
    padding: 72px 0;
    background:
        linear-gradient(135deg, rgba(47, 102, 92, 0.08), transparent 42%),
        #f6f8f8;
}

.account-shell {
    width: min(1120px, calc(100% - 40px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(420px, 1fr);
    gap: 34px;
    align-items: start;
}

.account-shell.compact {
    width: min(940px, calc(100% - 40px));
    grid-template-columns: minmax(0, 0.8fr) minmax(380px, 0.9fr);
}

.account-copy h1 {
    margin: 10px 0 18px;
    font-size: clamp(42px, 6vw, 72px);
    font-weight: 900;
    letter-spacing: 0;
    color: #152126;
}

.account-copy p {
    max-width: 520px;
    margin: 0;
    font-size: 20px;
    line-height: 1.75;
    color: #536369;
}

.account-card {
    padding: 32px;
    border: 1px solid #d9e2df;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 20px 44px rgba(18, 36, 42, 0.08);
}

.account-form {
    display: grid;
    gap: 18px;
}

.account-form label:not(.account-terms):not(.account-check) {
    display: grid;
    gap: 8px;
    font-weight: 800;
    color: #26363b;
}

.account-form input[type="text"],
.account-form input[type="email"],
.account-form input[type="password"] {
    width: 100%;
    min-height: 52px;
    padding: 12px 14px;
    border: 1px solid #cfdad7;
    border-radius: 6px;
    background: #fff;
    font-size: 17px;
    color: #152126;
}

.account-form input:focus {
    outline: 3px solid rgba(47, 102, 92, 0.18);
    border-color: #2f665c;
}

.account-terms,
.account-check {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    color: #35464b;
    font-weight: 700;
}

.account-terms small {
    display: block;
    margin-top: 6px;
    color: #66767a;
    font-weight: 500;
    line-height: 1.55;
}

.account-submit {
    min-height: 54px;
    justify-content: center;
}

.account-alt {
    margin: 18px 0 0;
    color: #536369;
    font-weight: 700;
}

.account-alt a,
.account-result a + a {
    margin-left: 8px;
}

.account-result {
    display: grid;
    gap: 14px;
}

.account-result strong {
    font-size: 28px;
    color: #152126;
}

.account-result p {
    margin: 0;
    color: #536369;
    line-height: 1.7;
}

.login-required {
    display: block;
}

.login-required strong {
    display: block;
    margin-bottom: 8px;
    font-size: 22px;
    color: #152126;
}

.login-required p {
    margin: 0 0 16px;
    color: #536369;
}

@media (max-width: 820px) {
    .account-page {
        padding: 36px 0;
    }

    .account-shell,
    .account-shell.compact {
        width: min(100% - 24px, 560px);
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .account-copy h1 {
        font-size: 42px;
    }

    .account-copy p {
        font-size: 17px;
    }

    .account-card {
        padding: 22px;
    }
}

.account-page {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 18% 18%, rgba(240, 198, 92, 0.18), transparent 24%),
        radial-gradient(circle at 88% 8%, rgba(77, 138, 126, 0.24), transparent 30%),
        linear-gradient(135deg, #11191d 0%, #1c2b2f 46%, #eef3f1 46.2%, #f7f9f8 100%);
}

.account-page::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.22;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 84px 84px;
    mask-image: linear-gradient(90deg, #000, transparent 68%);
}

.account-page::after {
    content: "";
    position: absolute;
    left: 8%;
    top: 22%;
    z-index: -1;
    width: 340px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(240, 198, 92, 0.9), transparent);
    transform: rotate(-18deg);
}

.account-shell {
    min-height: 620px;
    align-items: center;
}

.account-copy {
    color: #f5f7f6;
}

.account-mark {
    display: inline-grid;
    place-items: center;
    width: 76px;
    height: 76px;
    margin-bottom: 24px;
    border: 1px solid rgba(240, 198, 92, 0.55);
    border-radius: 50%;
    color: #f0c65c;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 8px rgba(240, 198, 92, 0.06), 0 18px 36px rgba(0, 0, 0, 0.26);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.account-copy .section-kicker {
    color: #f0c65c;
}

.account-copy h1 {
    max-width: 620px;
    color: #fff;
    text-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

.account-copy p {
    color: rgba(245, 247, 246, 0.82);
}

.account-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.account-benefits span {
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    padding: 9px 12px;
    color: #f5f7f6;
    background: rgba(255, 255, 255, 0.08);
    font-size: 13px;
    font-weight: 900;
}

.account-card {
    position: relative;
    overflow: hidden;
    border-color: rgba(207, 218, 215, 0.95);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
}

.account-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg, #2f665c, #f0c65c, #97b8b1);
}

.account-card-head {
    margin-bottom: 24px;
}

.account-card-head p {
    margin: 0 0 6px;
    color: #bc9842;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 1px;
}

.account-card-head h2 {
    margin: 0;
    color: #152126;
    font-size: 34px;
    font-weight: 900;
    letter-spacing: 0;
}

.account-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.account-form input[type="text"],
.account-form input[type="email"],
.account-form input[type="password"] {
    border-radius: 8px;
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.account-form input[type="text"]:hover,
.account-form input[type="email"]:hover,
.account-form input[type="password"]:hover {
    border-color: #a9c3bd;
}

.account-form input[type="text"]:focus,
.account-form input[type="email"]:focus,
.account-form input[type="password"]:focus {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(47, 102, 92, 0.12);
}

.account-submit {
    border: 0;
    background: linear-gradient(135deg, #2f665c, #24564e);
    box-shadow: 0 14px 28px rgba(47, 102, 92, 0.22);
}

.account-submit:hover,
.account-submit:focus {
    background: linear-gradient(135deg, #24564e, #173b36);
    transform: translateY(-1px);
}

.community-member-entry {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.community-member-entry .admin-button {
    min-height: 46px;
}

.community-member-badge {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    border: 1px solid rgba(240, 198, 92, 0.44);
    border-radius: 8px;
    padding: 10px 14px;
    color: #f3d985;
    background: rgba(240, 198, 92, 0.08);
    font-weight: 900;
}

@media (max-width: 820px) {
    .account-page {
        background:
            linear-gradient(180deg, #121b1f 0%, #203236 42%, #f7f9f8 42.2%, #f7f9f8 100%);
    }

    .account-page::before {
        background-size: 52px 52px;
        mask-image: linear-gradient(180deg, #000, transparent 60%);
    }

    .account-shell {
        min-height: auto;
    }

    .account-copy {
        padding-top: 8px;
    }

    .account-mark {
        width: 58px;
        height: 58px;
        margin-bottom: 14px;
        font-size: 12px;
    }

    .account-copy h1 {
        margin-bottom: 12px;
    }

    .account-benefits {
        margin-top: 18px;
    }

    .account-field-grid {
        grid-template-columns: 1fr;
    }

    .account-card-head h2 {
        font-size: 28px;
    }

    .community-member-entry {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .community-member-badge {
        grid-column: 1 / -1;
    }
}

@media (max-width: 430px) {
    .account-copy h1 {
        font-size: 36px;
    }

    .account-benefits {
        gap: 7px;
    }

    .account-benefits span {
        padding: 7px 10px;
        font-size: 12px;
    }

    .community-member-entry {
        grid-template-columns: 1fr;
    }
}

/* Account readability reset: clear hierarchy, no overlapping decorative wedges. */
.account-page {
    min-height: calc(100vh - 160px);
    padding: 56px 0;
    background:
        linear-gradient(180deg, rgba(47, 102, 92, 0.05), transparent 280px),
        #f4f7f6;
}

.account-page::before,
.account-page::after {
    display: none;
}

.account-shell,
.account-shell.compact {
    width: min(1280px, calc(100% - 48px));
    min-height: auto;
    display: grid;
    grid-template-columns: minmax(340px, 0.78fr) minmax(520px, 1.05fr);
    gap: 28px;
    align-items: stretch;
}

.account-shell.compact {
    width: min(1120px, calc(100% - 48px));
    grid-template-columns: minmax(320px, 0.82fr) minmax(460px, 0.95fr);
}

.account-copy {
    display: grid;
    align-content: start;
    min-height: 100%;
    border: 1px solid rgba(58, 96, 89, 0.22);
    border-radius: 8px;
    padding: 34px;
    color: #f8faf9;
    background:
        linear-gradient(155deg, rgba(19, 31, 35, 0.96), rgba(36, 76, 69, 0.96)),
        #152126;
    box-shadow: 0 18px 42px rgba(20, 36, 40, 0.12);
}

.account-mark {
    width: 58px;
    height: 58px;
    margin-bottom: 28px;
    box-shadow: 0 0 0 6px rgba(240, 198, 92, 0.06);
}

.account-copy h1 {
    max-width: 540px;
    margin: 8px 0 14px;
    color: #fff;
    font-size: clamp(36px, 4.4vw, 58px);
    line-height: 1.14;
    text-shadow: none;
}

.account-copy p {
    max-width: 620px;
    color: rgba(245, 247, 246, 0.86);
    font-size: 18px;
    line-height: 1.72;
}

.account-system-map {
    display: grid;
    gap: 10px;
    margin-top: 30px;
}

.account-system-map div {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 3px 14px;
    align-items: start;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.07);
}

.account-system-map span {
    grid-row: span 2;
    display: grid;
    place-items: center;
    min-height: 44px;
    border-radius: 7px;
    color: #173b36;
    background: #f0c65c;
    font-size: 12px;
    font-weight: 900;
}

.account-system-map strong {
    color: #fff;
    font-size: 18px;
    font-weight: 900;
}

.account-system-map p {
    margin: 0;
    color: rgba(245, 247, 246, 0.74);
    font-size: 14px;
    line-height: 1.48;
}

.account-card {
    width: 100%;
    min-width: 0;
    border-radius: 8px;
    padding: 34px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(20, 36, 40, 0.1);
}

.account-card-head {
    display: grid;
    gap: 4px;
    margin-bottom: 22px;
}

.account-card-head h2 {
    font-size: clamp(34px, 4vw, 48px);
    line-height: 1.12;
}

.account-card-head span {
    color: #647278;
    font-size: 15px;
    font-weight: 800;
}

.account-form {
    gap: 16px;
}

.account-field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.account-form label:not(.account-terms):not(.account-check) {
    gap: 7px;
    font-size: 17px;
}

.account-form input[type="text"],
.account-form input[type="email"],
.account-form input[type="password"] {
    min-height: 50px;
    padding: 11px 14px;
    font-size: 16px;
}

.account-terms {
    margin-top: 2px;
    border: 1px solid #dce5e2;
    border-radius: 8px;
    padding: 14px;
    background: #f8faf9;
}

.account-submit {
    min-height: 56px;
    margin-top: 4px;
    font-size: 18px;
}

.account-alt {
    margin-top: 20px;
    font-size: 17px;
}

@media (max-width: 980px) {
    .account-shell,
    .account-shell.compact {
        width: min(100% - 28px, 680px);
        grid-template-columns: 1fr;
    }

    .account-copy {
        padding: 26px;
    }

    .account-copy h1 {
        font-size: 38px;
    }
}

@media (max-width: 560px) {
    .account-page {
        padding: 24px 0;
    }

    .account-shell,
    .account-shell.compact {
        width: min(100% - 20px, 520px);
        gap: 14px;
    }

    .account-copy,
    .account-card {
        padding: 20px;
    }

    .account-copy h1 {
        font-size: 32px;
    }

    .account-copy p {
        font-size: 16px;
    }

    .account-system-map div {
        grid-template-columns: 42px minmax(0, 1fr);
        padding: 12px;
    }

    .account-field-grid {
        grid-template-columns: 1fr;
    }

    .account-card-head h2 {
        font-size: 34px;
    }
}

/* Admin console final polish: keep operational screens dense and readable. */
.admin-home-header.admin-clean-header {
    padding: 28px 0 22px;
}

.admin-home-header h1 {
    font-size: clamp(30px, 3vw, 42px);
}

.admin-home-header p:last-child {
    max-width: 680px;
    line-height: 1.55;
}

.admin-home-header + .admin-command-center {
    margin-top: 0;
}

.admin-command-center + .arka-section {
    padding-top: 28px;
}

.admin-command-center .admin-stat-grid-clean {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.admin-command-center .admin-stat {
    min-height: 112px;
    padding: 14px;
}

.admin-command-center .admin-stat strong {
    margin-top: 8px;
    font-size: 25px;
}

.admin-command-center .admin-stat small {
    margin-top: 8px;
}

@media (max-width: 768px) {
    .admin-home-header.admin-clean-header {
        padding: 20px 0 16px;
    }

    .admin-home-header .admin-home-layout {
        gap: 12px;
    }

    .admin-home-header .admin-home-quick {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        width: 100%;
        max-width: none;
        overflow: visible;
        padding-bottom: 0;
    }

    .admin-home-header .admin-home-quick .admin-button {
        width: 100%;
        min-height: 38px;
        padding: 8px 12px;
        font-size: 14px;
        white-space: normal;
    }

    .admin-command-shell,
    .admin-command-main,
    .admin-command-status {
        grid-template-columns: 1fr;
    }

    .admin-command-status dl {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-command-search .admin-search-box {
        grid-template-columns: 1fr;
    }

    .admin-directory-panel {
        top: 78px;
        left: 12px;
        right: 12px;
        width: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .admin-command-center .admin-stat-grid-clean,
    .admin-command-status dl,
    .admin-directory-panel {
        grid-template-columns: 1fr;
    }

.admin-command-status h2,
    .admin-command-search h2,
    .admin-notice-mini h2 {
        font-size: 20px;
    }
}

/* Wiki bulk selection: keep the touch target comfortable after mobile overrides. */
.wiki-admin-card {
    padding-left: 66px;
}

.wiki-card-check {
    top: 10px;
    left: 10px;
    width: 44px;
    height: 44px;
}

@media (max-width: 720px) {
    .wiki-admin-card {
        padding-left: 60px;
    }

    .wiki-card-check {
        top: 8px;
        left: 8px;
    }
}

/* Public playground: light exploration layer for codex discovery. */
.playground-hub {
    padding-top: 34px;
}

.playground-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 22px;
}

.playground-head .section-heading {
    margin-bottom: 0;
}

.playground-head-actions {
    flex: 0 0 auto;
    justify-content: flex-end;
    padding: 8px;
    border: 1px solid rgba(137, 244, 232, 0.22);
    border-radius: 999px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(137, 244, 232, 0.04)),
        rgba(6, 18, 24, 0.66);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
}

.playground-head-actions .btn {
    min-height: 44px;
    border-radius: 999px;
    padding: 11px 18px;
    border-color: rgba(137, 244, 232, 0.28);
    background: rgba(5, 17, 22, 0.34);
    color: #ecfffb;
    box-shadow: none;
}

.playground-head-actions .btn-primary {
    border-color: rgba(255, 220, 128, 0.82);
    background: linear-gradient(135deg, #fff0b8, #d49d3a);
    color: #111b1d;
    box-shadow: 0 10px 24px rgba(212, 157, 58, 0.25);
}

.playground-head-actions .btn:hover {
    border-color: rgba(255, 220, 128, 0.72);
    color: #ffffff;
    transform: translateY(-1px);
}

.playground-head-actions .btn-primary:hover {
    color: #111b1d;
}

.playground-grid {
    display: grid;
    grid-template-columns: minmax(260px, 0.9fr) minmax(320px, 1.1fr);
    gap: 18px;
    align-items: stretch;
}

.playground-spotlight,
.playground-panel,
.playground-discovery a {
    border: 1px solid #dce5e2;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(34, 46, 49, 0.08);
}

.playground-spotlight {
    position: relative;
    display: grid;
    align-content: end;
    gap: 6px;
    min-height: 330px;
    overflow: hidden;
    padding: 22px 20px;
    background: linear-gradient(135deg, #172326, #2f8f83);
    color: #fff;
    text-decoration: none;
}

.playground-spotlight::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(21, 26, 29, 0.08), rgba(21, 26, 29, 0.78));
}

.playground-spotlight img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.playground-spotlight > span,
.playground-spotlight > strong,
.playground-spotlight > em {
    position: relative;
    z-index: 1;
    margin: 0;
}

.playground-spotlight .playground-kicker {
    margin-top: auto;
    color: #c8f0e6;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.playground-spotlight strong {
    margin-top: 6px;
    font-size: 30px;
    line-height: 1.15;
}

.playground-spotlight em {
    color: rgba(255, 255, 255, 0.82);
    font-style: normal;
    line-height: 1.5;
}

.playground-panel {
    display: grid;
    gap: 16px;
    padding: 18px;
}

.playground-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.playground-progress {
    display: grid;
    gap: 8px;
    border: 1px solid #e6ece9;
    border-radius: 8px;
    padding: 14px;
    background: #f7faf9;
}

.playground-progress.compact {
    min-width: min(100%, 260px);
    padding: 10px 12px;
}

.playground-progress span {
    color: #526166;
    font-size: 13px;
    font-weight: 900;
}

.playground-progress strong {
    color: #172326;
    font-size: 24px;
    line-height: 1;
}

.playground-progress div {
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: #dbe7e3;
}

.playground-progress i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2f8f83, #d49d3a);
}

.playground-shelf {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.playground-shelf.single {
    grid-template-columns: 1fr;
}

.playground-shelf > div {
    border: 1px solid #e5ece9;
    border-radius: 8px;
    padding: 13px;
    background: #fff;
}

.playground-shelf strong {
    display: block;
    margin-bottom: 8px;
    color: #172326;
}

.playground-shelf ol {
    display: grid;
    gap: 5px;
    margin: 0;
    padding-left: 18px;
}

.playground-shelf li,
.playground-shelf a {
    color: #526166;
    font-size: 14px;
    line-height: 1.35;
}

.playground-discovery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
    margin-top: 16px;
    margin-bottom: 0;
}

.playground-discovery a {
    display: grid;
    gap: 6px;
    min-height: 150px;
    padding: 15px;
    color: #172326;
    text-decoration: none;
}

.playground-discovery a:hover {
    border-color: #80b9ad;
    transform: translateY(-2px);
}

.playground-discovery span {
    color: #2f8f83;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.playground-discovery strong {
    font-size: 18px;
    line-height: 1.25;
}

.playground-discovery em {
    color: #647278;
    font-style: normal;
    line-height: 1.45;
}

.codex-play-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 18px;
}

.codex-play-toolbar input[type="search"] {
    flex: 1 1 260px;
    min-height: 44px;
    border: 1px solid #dce5e2;
    border-radius: 8px;
    padding: 10px 13px;
    font-size: 15px;
}

.codex-filter-buttons {
    display: flex;
    gap: 6px;
}

.codex-filter-buttons button {
    min-height: 40px;
    border: 1px solid #dce5e2;
    border-radius: 8px;
    padding: 8px 12px;
    background: #fff;
    color: #526166;
    font-weight: 800;
}

.codex-filter-buttons button.is-active {
    border-color: #2f8f83;
    background: #e8f4f1;
    color: #143c37;
}

.codex-play-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
}

.codex-play-actions .btn {
    min-height: 42px;
}

.codex-play-actions [data-codex-bookmark].is-active {
    background: #d49d3a;
    border-color: #d49d3a;
    color: #151a1d;
}

@media (max-width: 760px) {
    .playground-head {
        display: grid;
        gap: 16px;
    }

    .playground-head-actions {
        justify-content: stretch;
        border-radius: 18px;
    }

    .playground-grid,
    .playground-shelf {
        grid-template-columns: 1fr;
    }

    .playground-spotlight {
        min-height: 280px;
    }

    .codex-play-toolbar,
    .codex-filter-buttons,
    .playground-actions {
        width: 100%;
    }

    .codex-filter-buttons button,
    .playground-actions .btn,
    .codex-play-toolbar > .btn {
        flex: 1 1 auto;
    }
}

/* Home hero final overrides: keep the first viewport dramatic after generic responsive rules. */
.home-hero .arka-hero-bg {
    object-fit: cover;
    object-position: center right;
}

@media (max-width: 900px) {
    .home-hero {
        min-height: 760px;
        padding: 72px 0 54px;
    }

    .home-hero-shell {
        min-height: 620px;
    }

    .home-hero h1 {
        font-size: clamp(48px, 12vw, 84px);
    }

    .home-hero h1 span:first-child {
        font-size: clamp(64px, 14vw, 108px);
    }

    .home-hero h1 span:last-child {
        font-size: clamp(44px, 10vw, 76px);
    }

    .home-hero .hero-copy {
        font-size: 17px;
    }

    .home-hero .hero-actions {
        display: flex;
        width: min(100%, 680px);
        border-radius: 18px;
    }

    .home-hero .hero-actions .btn {
        flex: 1 1 auto;
    }
}

@media (max-width: 560px) {
    .home-hero {
        min-height: 700px;
        padding: 58px 0 46px;
    }

    .home-hero-shell {
        min-height: 580px;
        gap: 22px;
    }

    .home-hero h1 {
        font-size: clamp(44px, 15vw, 64px);
    }

    .home-hero h1 span:first-child {
        font-size: clamp(56px, 17vw, 76px);
    }

    .home-hero h1 span:first-child::after {
        right: -34px;
        width: 14px;
        height: 14px;
        border-width: 5px;
    }

    .home-hero h1 span:last-child {
        font-size: clamp(39px, 11vw, 54px);
    }

    .home-hero-signals span {
        min-height: 34px;
        font-size: 12px;
    }

    .home-hero .hero-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        border-radius: 16px;
    }

    .home-hero .hero-actions .btn {
        min-height: 44px;
        padding: 10px 12px;
        font-size: 14px;
    }

    .home-quick-panel {
        padding: 14px;
    }
}

/* Public surface polish: keep non-home pages in the same premium ARKA palette. */
body.public-route > .arka-section,
body.public-route main > .arka-section,
body.public-route .page-header + .arka-section {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(245, 249, 248, 0.94));
}

body.public-route .section-heading .eyebrow,
body.public-route .content-block .eyebrow {
    color: #9f741a;
}

body.public-route .section-heading h2,
body.public-route .content-block h2 {
    color: #102125;
    text-shadow: none;
}

body.public-route .section-heading p,
body.public-route .content-block p {
    color: #32454a;
}

body.public-route .codex-play-toolbar,
body.public-route .search-form,
body.public-route .community-toolbar {
    padding: 10px;
    border: 1px solid rgba(137, 176, 169, 0.32);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 14px 34px rgba(21, 33, 38, 0.08);
}

body.public-route .codex-clean-card,
body.public-route .fact-panel,
body.public-route .notice-panel,
body.public-route .feature-card,
body.public-route .entity-list a,
body.public-route .community-board-card,
body.public-route .community-thread-card,
body.public-route .community-side-card,
body.public-route .community-write-panel,
body.public-route .community-article,
body.public-route .community-empty,
body.public-route .community-read,
body.public-route .community-reply-list,
body.public-route .community-reply-write {
    border-color: rgba(137, 176, 169, 0.34);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(242, 249, 247, 0.96));
    box-shadow: 0 18px 44px rgba(21, 33, 38, 0.1);
}

body.public-route .codex-list a {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(238, 247, 245, 0.98));
}

body.public-route .link-list li {
    border-color: rgba(137, 176, 169, 0.28);
}

body.public-route .search-form input,
body.public-route .community-search-form input,
body.public-route .community-search-form select {
    border-color: rgba(137, 176, 169, 0.42);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 30px rgba(21, 33, 38, 0.06);
}

body.public-route .search-form button,
body.public-route .community-like-button,
body.public-route .community-pagination a.active,
body.public-route .community-pagination a:hover {
    background: linear-gradient(135deg, #17635b, #2f8f83);
    box-shadow: 0 12px 30px rgba(23, 99, 91, 0.18);
}

body.public-route .home-surface .section-heading .eyebrow {
    color: #f0c65c;
}

body.public-route .home-surface .section-heading h2,
body.public-route .home-surface .home-feature-copy h2 {
    color: #f7fffd;
    text-shadow: 0 12px 34px rgba(0, 0, 0, 0.32);
}

body.public-route .home-surface .section-heading p,
body.public-route .home-surface .home-feature-copy p:not(.eyebrow) {
    color: rgba(224, 244, 240, 0.72);
}

body.public-route .home-surface .section-heading::after {
    background: linear-gradient(90deg, rgba(240, 198, 92, 0.95), rgba(137, 244, 232, 0));
}

/* Home CTA consistency: one gold primary and one glass secondary system. */
.home-hero .hero-actions,
.playground-head-actions {
    gap: 8px;
    border: 1px solid rgba(137, 244, 232, 0.2);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(137, 244, 232, 0.035)),
        rgba(4, 13, 20, 0.48);
    box-shadow: inset 0 0 28px rgba(137, 244, 232, 0.07), 0 18px 42px rgba(0, 0, 0, 0.22);
}

.home-hero .hero-actions .btn,
.playground-head-actions .btn {
    min-height: 46px;
    border-radius: 999px;
    padding: 11px 18px;
    border: 1px solid rgba(137, 244, 232, 0.32);
    background: linear-gradient(180deg, rgba(137, 244, 232, 0.08), rgba(255, 255, 255, 0.025));
    color: rgba(238, 249, 247, 0.9);
    box-shadow: none;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 0;
}

.home-hero .hero-actions .btn-light,
.home-hero .hero-actions .btn-light:first-child,
.playground-head-actions .btn-primary {
    border-color: rgba(255, 220, 128, 0.95);
    background: linear-gradient(135deg, #fff6c8, #f0c65c 58%, #d49d3a);
    color: #10191b;
    box-shadow: 0 10px 24px rgba(212, 157, 58, 0.25);
}

.home-hero .hero-actions .btn-light:not(:first-child) {
    border-color: rgba(137, 244, 232, 0.32);
    background: linear-gradient(180deg, rgba(137, 244, 232, 0.08), rgba(255, 255, 255, 0.025));
    color: rgba(238, 249, 247, 0.9);
    box-shadow: none;
}

.home-hero .hero-actions .btn:hover,
.home-hero .hero-actions .btn:focus,
.playground-head-actions .btn:hover,
.playground-head-actions .btn:focus {
    border-color: rgba(255, 220, 128, 0.72);
    color: #ffffff;
    background: rgba(137, 244, 232, 0.14);
    transform: translateY(-1px);
    text-decoration: none;
}

.home-hero .hero-actions .btn-light:first-child:hover,
.home-hero .hero-actions .btn-light:first-child:focus,
.playground-head-actions .btn-primary:hover,
.playground-head-actions .btn-primary:focus {
    border-color: #fff0a6;
    background: linear-gradient(135deg, #fffdf0, #ffd966 58%, #d49d3a);
    color: #10191b;
}

.playground-head {
    display: grid;
    align-items: start;
    justify-content: stretch;
    gap: 16px;
}

.playground-head-actions {
    width: fit-content;
    max-width: 100%;
    justify-content: flex-start;
    justify-self: start;
}

/* Mobile public QA: keep every reader-facing screen compact, readable, and tappable. */
@media (max-width: 767px) {
    body.public-route {
        background: #eef4f2;
    }

    body.public-route .container {
        width: min(100% - 24px, 720px);
        max-width: none;
        padding-right: 0;
        padding-left: 0;
    }

    .arka-nav {
        position: sticky;
    }

    .arka-nav .container {
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
    }

    .arka-brand {
        max-width: calc(100% - 58px);
        white-space: normal;
        font-size: 17px;
        line-height: 1.15;
    }

    .navbar-expand-sm .navbar-toggler {
        display: block;
        margin-left: auto;
    }

    .navbar-expand-sm .navbar-collapse:not(.show):not(.collapsing) {
        display: none !important;
    }

    .navbar-expand-sm .navbar-collapse.show,
    .navbar-expand-sm .navbar-collapse.collapsing {
        display: block !important;
        flex-basis: 100%;
        width: 100%;
    }

    .arka-nav .navbar-nav {
        display: grid;
        width: 100%;
        gap: 6px;
        padding: 8px 0 4px;
    }

    .arka-nav .nav-link {
        min-height: 42px;
        border-radius: 8px;
        padding: 10px 12px;
    }

    .page-header {
        padding: 52px 0 46px;
        background-position: center;
    }

    .page-header h1 {
        max-width: 100%;
        font-size: clamp(36px, 12vw, 54px);
        line-height: 1.04;
    }

    .page-header p:last-child {
        max-width: 100%;
        font-size: 16px;
        line-height: 1.68;
    }

    .arka-section {
        padding-top: 34px;
        padding-bottom: 38px;
    }

    .section-heading {
        margin-bottom: 16px;
    }

    .section-heading h2,
    .content-block h2 {
        font-size: clamp(26px, 8vw, 34px);
        line-height: 1.18;
    }

    .section-heading p,
    .content-block p {
        font-size: 15px;
        line-height: 1.66;
    }

    body.public-route input,
    body.public-route select,
    body.public-route textarea {
        width: 100%;
        max-width: none;
        font-size: 16px;
    }

    .home-hero {
        min-height: auto;
        padding: 48px 0 36px;
    }

    .home-hero-shell {
        min-height: auto;
        gap: 18px;
    }

    .home-hero .hero-copy-wrap::before,
    .home-hero-celestial::before,
    .home-hero-celestial::after {
        opacity: 0.38;
    }

    .home-hero h1 {
        gap: 6px;
        line-height: 0.92;
    }

    .home-hero h1 span:first-child {
        font-size: clamp(56px, 19vw, 82px);
    }

    .home-hero h1 span:last-child {
        font-size: clamp(38px, 12vw, 58px);
    }

    .home-hero .hero-copy {
        margin-top: 18px;
        font-size: 16px;
        line-height: 1.72;
    }

    .home-hero-signals {
        gap: 6px;
        margin-top: 18px;
    }

    .home-hero-signals span {
        min-height: 32px;
        padding: 7px 10px;
        font-size: 12px;
    }

    .home-hero .hero-actions,
    .playground-head-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        border-radius: 16px;
    }

    .home-hero .hero-actions .btn,
    .playground-head-actions .btn {
        width: 100%;
        min-height: 44px;
        white-space: normal;
    }

    .home-dashboard {
        margin-top: 0;
    }

    .home-stat-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .home-stat-row a {
        min-height: 92px;
        padding: 16px;
    }

    .home-content-grid,
    .home-feature,
    .playground-grid,
    .playground-shelf,
    .codex-detail-layout,
    .community-layout,
    .community-thread-card {
        grid-template-columns: 1fr;
    }

    .home-card-list a {
        grid-template-columns: 50px minmax(0, 1fr);
        min-height: 82px;
        padding: 12px;
    }

    .codex-play-toolbar,
    body.public-route .codex-play-toolbar,
    body.public-route .search-form,
    body.public-route .community-toolbar {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        align-items: stretch;
        width: 100%;
        padding: 10px;
    }

    .codex-play-toolbar .btn,
    .search-form button,
    .community-toolbar .btn,
    .community-search-form button {
        width: 100%;
        min-height: 44px;
    }

    .playground-progress.compact {
        width: 100%;
        min-width: 0;
    }

    .entity-list,
    .codex-list {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 12px;
    }

    .codex-list a {
        min-height: 100%;
    }

    .codex-list strong,
    .codex-list span {
        padding-right: 14px;
        padding-left: 14px;
    }

    .codex-list strong {
        padding-top: 14px;
        font-size: 18px;
        line-height: 1.25;
    }

    .codex-list span {
        padding-bottom: 14px;
        font-size: 14px;
        line-height: 1.55;
    }

    .codex-clean-card,
    .fact-panel,
    .notice-panel,
    .community-board-card,
    .community-thread-card,
    .community-side-card,
    .community-write-panel,
    .community-article,
    .community-empty,
    .community-read,
    .community-reply-list,
    .community-reply-write {
        padding: 16px;
    }

    .community-search-form {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        min-width: 0;
    }

    .community-counts {
        min-width: 0;
        border-left: 0;
        border-top: 1px solid #e2e9e7;
        padding-top: 8px;
    }

    .community-board-tabs {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .community-board-tabs::-webkit-scrollbar {
        display: none;
    }

    .community-board-tabs a {
        flex: 0 0 auto;
        min-height: 40px;
        white-space: nowrap;
    }

    .arka-footer .container {
        gap: 8px;
        text-align: left;
    }
}

@media (max-width: 430px) {
    body.public-route .container {
        width: min(100% - 18px, 420px);
    }

    .home-hero {
        padding-top: 40px;
    }

    .home-hero h1 span:first-child::after {
        right: -26px;
    }

    .home-stat-row,
    .entity-list,
    .codex-list {
        grid-template-columns: 1fr;
    }

    .home-card-list a {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .codex-list img {
        aspect-ratio: 16 / 10;
    }

    .page-header {
        padding: 44px 0 38px;
    }
}

/* Home viewport fit: keep the hero dramatic without chopping the playground below. */
.home-hero {
    min-height: min(720px, 78vh);
    padding-bottom: 36px;
}

.home-hero-shell {
    min-height: min(560px, 62vh);
}

.home-dashboard {
    margin-top: -18px;
}

.home-stat-row a {
    min-height: 92px;
    padding: 18px 20px;
}

.home-surface > .arka-section {
    padding-top: 30px;
    padding-bottom: 34px;
}

.playground-hub {
    padding-top: 28px;
}

@media (max-width: 900px) {
    .home-hero {
        min-height: auto;
        padding: 58px 0 38px;
    }

    .home-hero-shell {
        min-height: auto;
    }

    .home-dashboard {
        margin-top: 0;
    }
}

/* Home fold correction: desktop first screen must not chop the playground. */
@media (min-width: 901px) {
    .home-hero {
        min-height: 0;
        padding: 38px 0 26px;
    }

    .home-hero-shell {
        min-height: 0;
        align-items: center;
    }

    .home-hero .hero-copy-wrap {
        max-width: 760px;
    }

    .home-hero .eyebrow {
        min-height: 30px;
        padding: 5px 12px;
    }

    .home-hero h1 {
        gap: 4px;
        margin-top: 14px;
    }

    .home-hero h1 span:first-child {
        font-size: clamp(76px, 7.4vw, 112px);
    }

    .home-hero h1 span:last-child {
        font-size: clamp(52px, 4.8vw, 78px);
    }

    .home-hero .hero-copy {
        max-width: 680px;
        margin-top: 16px;
        font-size: 18px;
        line-height: 1.62;
    }

    .home-hero-signals {
        margin-top: 16px;
    }

    .home-hero .hero-actions {
        margin-top: 24px;
    }

    .home-quick-panel {
        max-width: 380px;
        padding: 16px;
        transform: none;
    }

    .home-quick-panel a {
        min-height: 54px;
        padding: 10px 12px;
    }

    .home-dashboard {
        margin-top: 0;
    }

    .home-stat-row a {
        min-height: 78px;
        padding: 14px 18px;
    }

    .home-stat-row strong {
        font-size: 26px;
    }

    .home-surface > .arka-section {
        padding-top: 24px;
        padding-bottom: 30px;
    }

    .playground-hub {
        padding-top: 22px;
    }
}

/* Character image framing: portraits should show faces, not torsos. */
.playground-spotlight img {
    object-fit: contain;
    object-position: center top;
    background:
        radial-gradient(circle at 50% 18%, rgba(240, 198, 92, 0.14), transparent 34%),
        #10191b;
}

.playground-spotlight::after {
    background:
        linear-gradient(180deg, rgba(21, 26, 29, 0.02) 0%, rgba(21, 26, 29, 0.16) 42%, rgba(21, 26, 29, 0.82) 100%);
}

.home-card-list img,
.codex-list img,
.codex-portrait img {
    object-fit: contain;
    object-position: center center;
    background:
        radial-gradient(circle at 50% 24%, rgba(240, 198, 92, 0.12), transparent 40%),
        rgba(4, 17, 20, 0.82);
}

.home-card-list a img {
    flex: 0 0 auto;
}

.home-card-list a {
    grid-template-columns: 72px minmax(0, 1fr);
    min-height: 100px;
}

.home-card-list img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    padding: 4px;
    background:
        radial-gradient(circle at 50% 18%, rgba(240, 198, 92, 0.14), transparent 38%),
        rgba(4, 17, 20, 0.78);
}

.codex-list img,
.codex-portrait img,
.codex-gallery-image img,
.wiki-gallery-thumb img,
.character-card img,
.playground-spotlight img {
    object-fit: contain;
    object-position: center center;
}

@media (min-width: 901px) {
    .playground-spotlight {
        min-height: 360px;
        background:
            linear-gradient(135deg, rgba(21, 92, 82, 0.44), rgba(7, 15, 18, 0.98)),
            #10191b;
    }
}

@media (max-width: 640px) {
    .home-card-list a {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .home-card-list img {
        width: 64px;
        height: 64px;
    }
}

/* Mobile resource polish: let operators read names instead of guessing clipped paths. */
@media (max-width: 768px) {
    .resource-picker-tree {
        max-height: 30vh;
        align-content: start;
    }

    .resource-picker-folder {
        min-height: 56px;
        white-space: normal;
    }

    .resource-picker-folder span,
    .resource-picker-card strong,
    .resource-picker-card small,
    .resource-admin-meta strong,
    .resource-admin-meta span {
        display: block;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        -webkit-line-clamp: unset;
        -webkit-box-orient: initial;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .resource-picker-card {
        overflow: visible;
    }

    .resource-picker-card-select {
        align-items: start;
    }

    .resource-picker-card img,
    .resource-picker-folder-tile {
        object-fit: contain;
        background:
            radial-gradient(circle at 50% 26%, rgba(240, 198, 92, 0.12), transparent 42%),
            #f5f8f7;
    }

    .resource-admin-card {
        align-items: start;
    }
}

@media (max-width: 430px) {
    .resource-picker-controls {
        grid-template-columns: 1fr;
    }

    .resource-picker-card-select {
        grid-template-columns: 76px minmax(0, 1fr);
    }

    .resource-picker-card img,
    .resource-picker-folder-tile {
        width: 76px;
        height: 76px;
    }

    .resource-admin-card {
        grid-template-columns: 78px minmax(0, 1fr);
    }

    .resource-admin-thumb {
        width: 78px;
        height: 78px;
    }
}

/* Mobile resource gallery: thumbnails first, names second. */
@media (max-width: 768px) {
    .resource-picker-grid,
    .resource-admin-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .resource-folder-chips {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: none;
    }

    .resource-folder-chip {
        grid-template-columns: 1fr;
        align-content: space-between;
        min-height: 82px;
        padding: 10px;
    }

    .resource-folder-chip small {
        justify-self: start;
        min-width: 0;
    }

    .resource-picker-card,
    .resource-admin-card {
        display: grid;
        grid-template-columns: 1fr;
        align-content: start;
        gap: 8px;
        min-width: 0;
        border-radius: 12px;
        padding: 8px;
    }

    .resource-picker-card-select {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        align-items: stretch;
        width: 100%;
        min-width: 0;
        text-align: left;
    }

    .resource-picker-card img,
    .resource-picker-folder-tile,
    .resource-admin-thumb,
    .resource-folder-icon {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        border-radius: 10px;
    }

    .resource-picker-card img,
    .resource-admin-thumb img {
        object-fit: cover;
    }

    .resource-picker-folder-tile,
    .resource-folder-icon {
        min-height: 0;
        font-size: 12px;
    }

    .resource-picker-card-select > span:last-child,
    .resource-admin-meta {
        min-width: 0;
        gap: 3px;
    }

    .resource-picker-card strong,
    .resource-admin-meta strong {
        display: -webkit-box;
        min-height: 2.7em;
        overflow: hidden;
        color: #172026;
        font-size: 12px;
        line-height: 1.35;
        word-break: keep-all;
        overflow-wrap: anywhere;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .resource-picker-card small,
    .resource-admin-meta span {
        display: -webkit-box;
        min-height: 2.6em;
        overflow: hidden;
        color: #6a777b;
        font-size: 11px;
        line-height: 1.3;
        word-break: keep-all;
        overflow-wrap: anywhere;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .resource-picker-card-actions,
    .resource-card-footer,
    .resource-select-row {
        grid-column: auto;
    }

    .resource-picker-card-actions {
        grid-template-columns: 1fr;
    }

    .resource-card-footer {
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .resource-card-footer button {
        width: 100%;
        min-height: 34px;
    }

    .resource-select-row {
        min-height: 32px;
        padding: 2px 0;
    }
}

@media (max-width: 360px) {
    .resource-picker-grid,
    .resource-admin-grid,
    .resource-folder-chips {
        gap: 8px;
    }

    .resource-picker-card,
    .resource-admin-card {
        padding: 7px;
    }
}

/* Mobile resource folders: folder names must never collide with counts or thumbnails. */
@media (max-width: 768px) {
    .resource-quick-folders,
    .resource-folder-chips,
    .resource-picker-tree {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        width: 100%;
        max-height: none;
        overflow: visible;
        padding: 0;
        white-space: normal;
    }

    .resource-picker-tree {
        max-height: 32vh;
        overflow-y: auto;
        padding-right: 2px;
        -webkit-overflow-scrolling: touch;
    }

    .resource-quick-folders button,
    .resource-folder-chip,
    .resource-picker-folder {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
        width: 100%;
        min-height: 48px;
        border-radius: 10px;
        padding: 10px 12px;
        text-align: left;
    }

    .resource-picker-folder {
        flex: none;
    }

    .resource-folder-chip span,
    .resource-picker-folder span {
        display: block;
        min-width: 0;
        overflow: visible;
        color: inherit;
        text-overflow: clip;
        white-space: normal;
        word-break: keep-all;
        overflow-wrap: anywhere;
        font-size: 13px;
        line-height: 1.35;
    }

    .resource-folder-chip small,
    .resource-picker-folder small {
        align-self: center;
        justify-self: end;
        min-width: 32px;
        border-radius: 999px;
        padding: 3px 7px;
        text-align: center;
        white-space: nowrap;
        font-size: 11px;
        line-height: 1.2;
    }

    .resource-current-folder {
        display: grid;
        grid-template-columns: 1fr;
        gap: 4px;
        align-items: start;
    }

    .resource-current-folder strong {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        word-break: keep-all;
        overflow-wrap: anywhere;
    }

    .resource-breadcrumb,
    .resource-picker-breadcrumb {
        gap: 6px;
        overflow-x: auto;
        padding-bottom: 4px;
        white-space: nowrap;
    }

    .resource-folder-card {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .resource-folder-card .resource-admin-meta,
    .resource-picker-folder-card .resource-picker-card-select > span:last-child {
        min-height: auto;
    }

    .resource-folder-card .resource-admin-meta strong,
    .resource-folder-card .resource-admin-meta span,
    .resource-picker-folder-card strong,
    .resource-picker-folder-card small {
        min-height: 0;
        -webkit-line-clamp: 3;
    }
}

/* Final mobile resource layout: folders are readable rows, images stay visual cards. */
@media (max-width: 768px) {
    .resource-manager {
        gap: 14px;
    }

    .resource-manager-toolbar {
        gap: 10px;
    }

    .resource-quick-folders,
    .resource-folder-chips,
    .resource-picker-tree {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        width: 100%;
    }

    .resource-quick-folders button,
    .resource-folder-chip,
    .resource-picker-folder {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        width: 100%;
        min-width: 0;
        min-height: 50px;
        padding: 10px 12px;
        border-radius: 10px;
        text-align: left;
    }

    .resource-folder-chip span,
    .resource-picker-folder span {
        min-width: 0;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        word-break: keep-all;
        overflow-wrap: anywhere;
    }

    .resource-folder-chip small,
    .resource-picker-folder small {
        justify-self: end;
        min-width: 30px;
        white-space: nowrap;
    }

    .resource-admin-grid,
    .resource-picker-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        align-items: start;
    }

    .resource-folder-card,
    .resource-picker-folder-card {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 52px minmax(0, 1fr);
        align-items: center;
        gap: 10px;
        min-height: 70px;
        padding: 10px;
    }

    .resource-picker-folder-card .resource-picker-card-select {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: 52px minmax(0, 1fr);
        align-items: center;
        gap: 10px;
    }

    .resource-folder-icon,
    .resource-picker-folder-tile {
        width: 52px;
        height: 52px;
        aspect-ratio: auto;
        border-radius: 10px;
        font-size: 11px;
    }

    .resource-folder-card .resource-admin-meta,
    .resource-picker-folder-card .resource-picker-card-select > span:last-child {
        display: grid;
        gap: 3px;
        min-width: 0;
    }

    .resource-folder-card .resource-admin-meta strong,
    .resource-picker-folder-card strong {
        display: block;
        min-height: 0;
        overflow: visible;
        color: #172026;
        text-overflow: clip;
        white-space: normal;
        word-break: keep-all;
        overflow-wrap: anywhere;
        font-size: 14px;
        line-height: 1.35;
        -webkit-line-clamp: unset;
    }

    .resource-folder-card .resource-admin-meta span,
    .resource-picker-folder-card small {
        display: block;
        min-height: 0;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        word-break: keep-all;
        overflow-wrap: anywhere;
        font-size: 12px;
        line-height: 1.3;
        -webkit-line-clamp: unset;
    }

    .resource-admin-card:not(.resource-folder-card),
    .resource-picker-card:not(.resource-picker-folder-card) {
        grid-template-columns: 1fr;
        min-width: 0;
        overflow: hidden;
    }

    .resource-admin-card:not(.resource-folder-card) .resource-admin-thumb,
    .resource-picker-card:not(.resource-picker-folder-card) img {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }

    .resource-admin-card:not(.resource-folder-card) .resource-admin-meta strong,
    .resource-picker-card:not(.resource-picker-folder-card) strong {
        min-height: 0;
        -webkit-line-clamp: 2;
    }

    .resource-admin-card:not(.resource-folder-card) .resource-admin-meta span,
    .resource-picker-card:not(.resource-picker-folder-card) small {
        min-height: 0;
        -webkit-line-clamp: 2;
    }
}

@media (max-width: 360px) {
    .resource-admin-grid,
    .resource-picker-grid {
        grid-template-columns: 1fr;
    }

    .resource-admin-card:not(.resource-folder-card),
    .resource-picker-card:not(.resource-picker-folder-card) {
        grid-template-columns: 1fr;
    }

    .resource-admin-card:not(.resource-folder-card) .resource-admin-thumb,
    .resource-picker-card:not(.resource-picker-folder-card) img {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .resource-picker-card:not(.resource-picker-folder-card) .resource-picker-card-select {
        grid-template-columns: 1fr;
    }
}

.codex-share-panel {
    display: grid;
    gap: 8px;
    margin: 12px 0 18px;
    padding: 12px;
    border: 1px solid rgba(48, 139, 130, 0.24);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(240, 198, 92, 0.11), rgba(48, 139, 130, 0.1)),
        rgba(255, 255, 255, 0.62);
}

.codex-instagram-share {
    width: 100%;
    min-height: 44px;
}

.codex-share-panel p,
.codex-share-panel [data-arka-instagram-share-status] {
    margin: 0;
    color: var(--muted-text);
    font-size: 13px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.codex-share-panel p.is-error,
.codex-share-panel [data-arka-instagram-share-status].is-error {
    color: #9b2c2c;
}

.arka-share-panel,
.timeline-share-panel {
    display: grid;
    gap: 8px;
    margin-top: 12px;
    padding: 12px;
    border: 1px solid rgba(48, 139, 130, 0.28);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(240, 198, 92, 0.13), rgba(48, 139, 130, 0.12)),
        rgba(8, 31, 34, 0.18);
}

.gallery-share-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    padding: 11px 14px 14px;
    border: 0;
    border-top: 1px solid rgba(48, 139, 130, 0.12);
    border-radius: 0;
    background: transparent;
}

.gallery-share-panel .arka-share-button {
    order: 2;
    flex: 0 0 auto;
    min-height: 36px;
    padding: 7px 13px;
    border-radius: 999px;
    font-size: 12px;
    box-shadow: 0 8px 18px rgba(208, 168, 63, 0.18);
}

.timeline-share-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px;
    padding: 10px 0 0;
    border-width: 1px 0 0;
    border-radius: 0;
    background: transparent;
}

.timeline-share-panel.compact {
    margin-top: 8px;
    padding-top: 8px;
}

.arka-share-button {
    min-height: 40px;
}

.timeline-share-panel .arka-share-button {
    order: 2;
    flex: 0 0 auto;
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 12px;
}

.arka-share-panel p,
.timeline-share-panel p,
.arka-share-panel [data-arka-instagram-share-status],
.timeline-share-panel [data-arka-instagram-share-status] {
    order: 1;
    flex: 1 1 auto;
    margin: 0;
    color: var(--muted-text);
    font-size: 11px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.arka-share-panel p.is-error,
.timeline-share-panel p.is-error,
.arka-share-panel [data-arka-instagram-share-status].is-error,
.timeline-share-panel [data-arka-instagram-share-status].is-error {
    color: #9b2c2c;
}

@media (max-width: 768px) {
    .codex-share-panel {
        margin-top: 10px;
    }

    .arka-share-button {
        width: 100%;
    }

    .gallery-share-panel,
    .timeline-share-panel {
        align-items: stretch;
        flex-direction: column;
    }

    .gallery-share-panel .arka-share-button,
    .timeline-share-panel .arka-share-button {
        width: 100%;
    }
}

/* Mobile resource picker hard reset: prevent overlapping cards on real phones. */
@media (max-width: 768px) {
    .resource-picker-modal {
        overflow: hidden;
    }

    .resource-picker-layout,
    .resource-picker-browser {
        min-height: 0;
        overflow: hidden;
    }

    .resource-picker-tree {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        max-height: 58px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 2px 0 8px !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch;
    }

    .resource-picker-folder {
        flex: 0 0 min(72vw, 260px) !important;
        width: min(72vw, 260px) !important;
        min-height: 48px !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
    }

    .resource-picker-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: start !important;
        gap: 12px !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 4px 2px 18px !important;
        -webkit-overflow-scrolling: touch;
    }

    .resource-picker-card {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 8px !important;
        overflow: visible !important;
        border-radius: 12px !important;
    }

    .resource-picker-card-select {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        align-items: stretch !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        text-align: left !important;
    }

    .resource-picker-card img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
        border-radius: 10px !important;
    }

    .resource-picker-card-select > span:last-child {
        display: grid !important;
        gap: 3px !important;
        min-width: 0 !important;
        overflow: visible !important;
    }

    .resource-picker-card strong,
    .resource-picker-card small {
        display: -webkit-box !important;
        min-height: 0 !important;
        overflow: hidden !important;
        text-overflow: clip !important;
        white-space: normal !important;
        word-break: keep-all !important;
        overflow-wrap: anywhere !important;
        -webkit-box-orient: vertical !important;
    }

    .resource-picker-card strong {
        font-size: 12px !important;
        line-height: 1.35 !important;
        -webkit-line-clamp: 2 !important;
    }

    .resource-picker-card small {
        font-size: 11px !important;
        line-height: 1.3 !important;
        -webkit-line-clamp: 2 !important;
    }

    .resource-picker-card-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    .resource-picker-card-actions button {
        width: 100% !important;
        min-height: 36px !important;
    }

    .resource-picker-folder-card {
        grid-column: 1 / -1 !important;
        padding: 10px !important;
    }

    .resource-picker-folder-card .resource-picker-card-select {
        grid-template-columns: 56px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .resource-picker-folder-tile {
        width: 56px !important;
        height: 56px !important;
        aspect-ratio: auto !important;
        border-radius: 10px !important;
    }

    .resource-picker-folder-card strong,
    .resource-picker-folder-card small {
        display: block !important;
        overflow: visible !important;
        -webkit-line-clamp: unset !important;
    }
}

@media (max-width: 430px) {
    .resource-picker-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
}

@media (max-width: 340px) {
    .resource-picker-grid {
        grid-template-columns: 1fr !important;
    }
}

/* 2026-06-23: final resource mobile layout across admin library and picker modal. */
@media (max-width: 768px) {
    .resource-library-panel,
    .resource-picker-modal {
        overflow: hidden;
    }

    .resource-manager-toolbar,
    .resource-picker-controls {
        gap: 10px !important;
    }

    .resource-current-folder,
    .resource-breadcrumb,
    .resource-picker-breadcrumb {
        min-width: 0;
    }

    .resource-current-folder strong,
    .resource-breadcrumb button,
    .resource-picker-breadcrumb button {
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: keep-all;
    }

    .resource-quick-folders,
    .resource-folder-chips {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        width: 100% !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .resource-quick-folders button,
    .resource-folder-chip {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        min-height: 48px !important;
        padding: 10px 12px !important;
        border-radius: 10px !important;
        text-align: left !important;
    }

    .resource-folder-chip span,
    .resource-folder-chip small {
        min-width: 0 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere !important;
        word-break: keep-all !important;
    }

    .resource-folder-chip small {
        justify-self: end !important;
        white-space: nowrap !important;
    }

    .resource-admin-grid,
    .resource-picker-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-rows: auto !important;
        align-items: start !important;
        gap: 12px !important;
        width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    .resource-picker-grid {
        min-height: 0 !important;
        overflow-y: auto !important;
        padding: 4px 2px 20px !important;
        -webkit-overflow-scrolling: touch;
    }

    .resource-admin-card,
    .resource-picker-card {
        box-sizing: border-box !important;
        display: grid !important;
        height: auto !important;
        min-height: 0 !important;
        min-width: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        border-radius: 12px !important;
        background: #fff !important;
    }

    .resource-admin-card:not(.resource-folder-card),
    .resource-picker-card:not(.resource-picker-folder-card) {
        grid-template-columns: 1fr !important;
        align-content: start !important;
        gap: 8px !important;
        padding: 8px !important;
    }

    .resource-picker-card-select {
        box-sizing: border-box !important;
        display: grid !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        border: 0 !important;
        background: transparent !important;
        text-align: left !important;
    }

    .resource-picker-card:not(.resource-picker-folder-card) .resource-picker-card-select {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        align-items: stretch !important;
    }

    .resource-admin-thumb,
    .resource-picker-card:not(.resource-picker-folder-card) img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        overflow: hidden !important;
        border-radius: 10px !important;
        background: #edf3f1 !important;
    }

    .resource-admin-thumb img,
    .resource-picker-card:not(.resource-picker-folder-card) img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .resource-admin-meta,
    .resource-picker-card-select > span:last-child {
        display: grid !important;
        gap: 3px !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .resource-admin-meta strong,
    .resource-admin-meta span,
    .resource-picker-card strong,
    .resource-picker-card small {
        display: -webkit-box !important;
        min-height: 0 !important;
        overflow: hidden !important;
        text-overflow: clip !important;
        white-space: normal !important;
        word-break: keep-all !important;
        overflow-wrap: anywhere !important;
        -webkit-box-orient: vertical !important;
    }

    .resource-admin-meta strong,
    .resource-picker-card strong {
        font-size: 12px !important;
        line-height: 1.35 !important;
        -webkit-line-clamp: 2 !important;
    }

    .resource-admin-meta span,
    .resource-picker-card small {
        color: #6a777b !important;
        font-size: 11px !important;
        line-height: 1.3 !important;
        -webkit-line-clamp: 2 !important;
    }

    .resource-select-row,
    .resource-card-footer,
    .resource-picker-card-actions {
        display: grid !important;
        grid-column: auto !important;
        grid-template-columns: 1fr !important;
        gap: 6px !important;
        min-width: 0 !important;
    }

    .resource-select-row {
        min-height: 34px !important;
        padding: 0 !important;
    }

    .resource-card-footer button,
    .resource-picker-card-actions button {
        width: 100% !important;
        min-height: 36px !important;
        border-radius: 8px !important;
    }

    .resource-folder-card,
    .resource-picker-folder-card {
        grid-column: 1 / -1 !important;
        grid-template-columns: 56px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 10px !important;
        min-height: 76px !important;
        padding: 10px !important;
        overflow: visible !important;
    }

    .resource-picker-folder-card .resource-picker-card-select {
        grid-template-columns: 56px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .resource-folder-icon,
    .resource-picker-folder-tile {
        display: grid !important;
        place-items: center !important;
        width: 56px !important;
        height: 56px !important;
        aspect-ratio: auto !important;
        border-radius: 10px !important;
        font-size: 11px !important;
    }

    .resource-folder-card .resource-admin-meta,
    .resource-picker-folder-card .resource-picker-card-select > span:last-child {
        overflow: visible !important;
    }

    .resource-folder-card .resource-admin-meta strong,
    .resource-folder-card .resource-admin-meta span,
    .resource-picker-folder-card strong,
    .resource-picker-folder-card small {
        display: block !important;
        overflow: visible !important;
        -webkit-line-clamp: unset !important;
    }

    .resource-picker-tree {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        max-height: 60px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 2px 0 8px !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch;
    }

    .resource-picker-folder {
        flex: 0 0 min(72vw, 260px) !important;
        width: min(72vw, 260px) !important;
        min-height: 48px !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
    }
}

@media (max-width: 340px) {
    .resource-admin-grid,
    .resource-picker-grid {
        grid-template-columns: 1fr !important;
    }
}

.public-admin-edit-dock {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1050;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid rgba(23, 99, 91, 0.22);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 16px 40px rgba(13, 30, 34, 0.18);
    backdrop-filter: blur(10px);
}

.public-admin-edit-dock a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.public-admin-edit-button {
    color: #102427;
    background: linear-gradient(135deg, #ffe58c, #d9a928);
    box-shadow: 0 8px 20px rgba(208, 168, 63, 0.26);
}

.public-admin-edit-home {
    color: #17635b;
    background: #edf6f4;
}

.public-admin-edit-image {
    color: #102427;
    background: #fff8dc;
}

.public-admin-edit-dock a:hover,
.public-admin-edit-dock a:focus {
    transform: translateY(-1px);
    outline: none;
}

@media (max-width: 768px) {
    .public-admin-edit-dock {
        position: static;
        right: auto;
        bottom: auto;
        left: auto;
        z-index: auto;
        justify-content: center;
        flex-wrap: wrap;
        margin: 12px auto;
        width: min(100% - 24px, 720px);
        border-radius: 14px;
        box-shadow: 0 8px 22px rgba(13, 30, 34, 0.12);
    }

    .public-admin-edit-dock a {
        flex: 1 1 140px;
        min-height: 42px;
        padding: 9px 10px;
    }
}

.codex-portrait.image-fit-contain img {
    object-fit: contain;
    object-position: center center;
}

.codex-portrait.image-fit-face img {
    object-fit: cover;
    object-position: center 18%;
}

.codex-portrait.image-fit-cover img {
    object-fit: cover;
    object-position: center top;
}

.image-fit-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 4px;
}

.image-fit-options label {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    margin: 0;
    border: 1px solid #cfdad8;
    border-radius: 999px;
    padding: 8px 10px;
    background: #f8fbfa;
    cursor: pointer;
}

.image-fit-options input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.image-fit-options span {
    color: #26343a !important;
    font-size: 13px !important;
    font-weight: 900;
    text-transform: none !important;
}

.image-fit-options label:has(input:checked) {
    border-color: #17635b;
    background: #eaf6f3;
    box-shadow: inset 0 0 0 1px rgba(23, 99, 91, 0.18);
}

.image-fit-options label.is-selected {
    border-color: #17635b;
    background: #eaf6f3;
    box-shadow: inset 0 0 0 1px rgba(23, 99, 91, 0.18);
}

.quality-deploy-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.quality-deploy-grid div,
.quality-issue-card {
    border: 1px solid #dce7e4;
    border-radius: 8px;
    background: #fff;
}

.quality-deploy-grid div {
    padding: 14px;
}

.quality-deploy-grid dt {
    color: #6a777b;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.quality-deploy-grid dd {
    margin: 5px 0 0;
    color: #172026;
    font-weight: 900;
}

.quality-issue-list {
    display: grid;
    gap: 10px;
}

.quality-issue-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 16px;
}

.quality-issue-card span {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 8px;
    border-radius: 999px;
    padding: 4px 9px;
    color: #17635b;
    background: #eaf6f3;
    font-size: 12px;
    font-weight: 900;
}

.quality-issue-card strong {
    display: block;
    color: #172026;
    font-size: 18px;
    line-height: 1.25;
}

.quality-issue-card p {
    margin: 6px 0 0;
    color: #536167;
    font-weight: 700;
}

.quality-issue-card nav {
    display: flex;
    gap: 8px;
}

.quality-issue-card.severity-danger {
    border-color: #d79b9b;
    background: #fff7f7;
}

.quality-issue-card.severity-warn {
    border-color: #d8bf68;
    background: #fffdf2;
}

.quality-error-panel {
    border-color: #d79b9b;
    background: #fff7f7;
}

.quality-error-panel strong {
    color: #9d1c1c;
    font-size: 18px;
}

.quality-error-panel p {
    margin: 8px 0 0;
    color: #536167;
    overflow-wrap: anywhere;
}

@media (max-width: 768px) {
    .image-fit-options {
        grid-template-columns: 1fr;
    }

    .quality-deploy-grid,
    .quality-issue-card {
        grid-template-columns: 1fr;
    }

    .quality-issue-card nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quality-issue-card nav .admin-button {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .admin-analytics-grid,
    .admin-summary-row.two-up,
    .admin-summary-row.four-up,
    .admin-summary-row.six-up {
        grid-template-columns: 1fr !important;
        gap: 12px;
        width: 100%;
        min-width: 0;
    }

    .admin-summary-row > .admin-form-panel,
    .admin-analytics-card,
    .quality-deploy-panel {
        width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    .admin-form-panel .section-heading h2 {
        font-size: 26px;
        line-height: 1.18;
        word-break: keep-all;
    }

    .admin-table-wrap {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .admin-table,
    .admin-compact-table {
        width: 100%;
        min-width: 0;
        table-layout: fixed;
    }

    .admin-table th,
    .admin-table td,
    .admin-compact-table th,
    .admin-compact-table td {
        padding: 12px 10px;
        font-size: 14px;
        line-height: 1.35;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: keep-all;
    }

    .admin-table th:first-child,
    .admin-table td:first-child,
    .admin-compact-table th:first-child,
    .admin-compact-table td:first-child {
        width: 46%;
    }
}

@media (max-width: 420px) {
    .admin-table th,
    .admin-table td,
    .admin-compact-table th,
    .admin-compact-table td {
        padding: 10px 8px;
        font-size: 13px;
    }
}

/* Mobile admin editor polish */
@media (max-width: 768px) {
    body.admin-route .container {
        width: min(100% - 24px, 1040px);
    }

    body.admin-route .arka-section {
        padding-top: 18px;
        padding-bottom: 28px;
    }

    body.admin-route .admin-header {
        padding: 22px 0 18px;
    }

    body.admin-route .admin-header .container {
        display: grid;
        gap: 8px;
    }

    body.admin-route .admin-header h1 {
        margin: 0;
        font-size: 28px;
        line-height: 1.16;
        letter-spacing: 0;
        word-break: keep-all;
    }

    body.admin-route .admin-header p:last-child,
    body.admin-route .admin-help-strip span,
    body.admin-route .admin-form-panel label small,
    body.admin-route .easy-publish-box p {
        font-size: 14px;
        line-height: 1.55;
        word-break: keep-all;
        overflow-wrap: anywhere;
    }

    body.admin-route .admin-help-strip {
        display: grid;
        gap: 6px;
        margin-bottom: 12px;
        padding: 12px 14px;
        border-radius: 8px;
    }

    body.admin-route .admin-form-panel.easy-edit-panel,
    body.admin-route .admin-form-panel {
        width: 100%;
        max-width: none;
        padding: 14px;
        border-radius: 8px;
        box-shadow: 0 8px 22px rgba(21, 33, 38, 0.07);
    }

    body.admin-route .form-grid,
    body.admin-route .form-grid.compact {
        grid-template-columns: 1fr;
        gap: 0;
    }

    body.admin-route .admin-form-panel label {
        gap: 8px;
        margin-bottom: 14px;
    }

    body.admin-route .admin-form-panel label span {
        font-size: 13px;
        line-height: 1.25;
        letter-spacing: 0;
    }

    body.admin-route .admin-form-panel input,
    body.admin-route .admin-form-panel select,
    body.admin-route .admin-form-panel textarea {
        min-height: 48px;
        border-radius: 8px;
        padding: 12px;
        font-size: 16px;
        line-height: 1.45;
    }

    body.admin-route .admin-form-panel textarea {
        min-height: 132px;
    }

    body.admin-route #page-body,
    body.admin-route textarea[name="PublicSummaryMarkdown"] {
        min-height: 260px;
    }

    body.admin-route .resource-picker-field {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    body.admin-route .resource-picker-field .admin-button,
    body.admin-route .admin-actions .admin-button {
        width: 100%;
        min-height: 46px;
        justify-content: center;
        text-align: center;
        white-space: normal;
    }

    body.admin-route .resource-picker-preview,
    body.admin-route .wiki-image-field .resource-picker-preview {
        min-height: 180px;
        border-radius: 8px;
    }

    body.admin-route .resource-picker-preview img,
    body.admin-route .wiki-image-field .resource-picker-preview img {
        width: 100%;
        height: 100%;
        max-height: 260px;
        object-fit: contain;
    }

    body.admin-route .wiki-gallery-preview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    body.admin-route .easy-publish-box,
    body.admin-route .advanced-settings,
    body.admin-route .admin-preflight-panel {
        margin-top: 14px;
        border-radius: 8px;
    }

    body.admin-route .easy-publish-box {
        padding: 14px;
    }

    body.admin-route .easy-publish-box h2 {
        margin: 0 0 8px;
        font-size: 22px;
        line-height: 1.2;
    }

    body.admin-route .advanced-settings summary {
        min-height: 48px;
        padding: 14px;
        line-height: 1.3;
    }

    body.admin-route .advanced-settings > *:not(summary) {
        margin-right: 12px;
        margin-left: 12px;
    }

    body.admin-route .sticky-actions {
        position: sticky;
        z-index: 30;
        bottom: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin: 16px -14px -14px;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        border-top: 1px solid #dde7e4;
        background: rgba(255, 255, 255, 0.97);
        box-shadow: 0 -10px 26px rgba(21, 33, 38, 0.08);
        backdrop-filter: blur(10px);
    }

    body.admin-route .sticky-actions .admin-button.primary {
        grid-column: 1 / -1;
    }

    body.admin-route .sticky-actions .mobile-secondary-action {
        display: none;
    }
}

@media (max-width: 420px) {
    body.admin-route .container {
        width: min(100% - 18px, 1040px);
    }

    body.admin-route .admin-header h1 {
        font-size: 25px;
    }

    body.admin-route .admin-form-panel.easy-edit-panel,
    body.admin-route .admin-form-panel {
        padding: 12px;
    }

    body.admin-route .sticky-actions {
        grid-template-columns: 1fr;
        margin-right: -12px;
        margin-left: -12px;
        padding-right: 12px;
        padding-left: 12px;
    }
}