:root {
    --ink: #111418;
    --charcoal: #171b20;
    --night: #080b10;
    --panel: #ffffff;
    --soft: #f4f6f4;
    --muted: #687383;
    --line: #e3e7e1;
    --red: #9e171b;
    --red-strong: #d42b32;
    --moss: #49633a;
    --moss-bright: #7a9360;
    --gold: #c9a348;
    --radius: 8px;
    --shadow: 0 18px 45px rgba(9, 13, 18, .16);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--soft); line-height: 1.55; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.skip-link { position: fixed; left: 1rem; top: -4rem; background: #fff; color: #000; padding: .75rem 1rem; z-index: 1000; }
.skip-link:focus { top: 1rem; }
.site-header { position: sticky; top: 0; z-index: 50; min-height: 76px; display: flex; align-items: center; gap: 1rem; padding: .75rem clamp(1rem, 3vw, 3rem); background: rgba(8, 11, 16, .92); color: #fff; border-bottom: 1px solid rgba(255,255,255,.09); backdrop-filter: blur(14px); }
.brand, .admin-brand { display: inline-flex; align-items: center; gap: .75rem; min-width: max-content; }
.brand img, .admin-brand img { width: 52px; height: 52px; object-fit: contain; }
.brand strong, .admin-brand strong { display: block; font-size: .96rem; line-height: 1; }
.brand small, .admin-brand small { display: block; color: #cbd3c4; letter-spacing: .08em; text-transform: uppercase; font-size: .68rem; margin-top: .25rem; }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: .15rem; }
.site-nav a { color: #d8ddd7; padding: .65rem .7rem; border-radius: var(--radius); font-size: .9rem; }
.site-nav a:hover, .site-nav a.active { background: rgba(255,255,255,.08); color: #fff; }
.language-switcher { display: flex; border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius); overflow: hidden; }
.language-switcher a { color: #fff; padding: .45rem .55rem; font-size: .78rem; }
.language-switcher a.active { background: var(--red); }
.nav-toggle { display: none; margin-left: auto; background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); padding: .55rem .75rem; }
.breaking-bar { display: flex; gap: 1rem; align-items: center; background: #fff; color: var(--ink); border-bottom: 1px solid var(--line); padding: .62rem clamp(1rem, 3vw, 3rem); overflow: hidden; }
.breaking-bar strong { color: var(--red); text-transform: uppercase; font-size: .78rem; letter-spacing: .12em; }
.breaking-track { display: flex; gap: 1.5rem; white-space: nowrap; animation: ticker 24s linear infinite; }
.breaking-track a { color: var(--charcoal); }
@keyframes ticker { from { transform: translateX(20%); } to { transform: translateX(-60%); } }
.hero-section { position: relative; min-height: calc(100vh - 76px); display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: end; gap: 2rem; padding: clamp(5rem, 9vw, 9rem) clamp(1rem, 4vw, 4rem) clamp(2rem, 5vw, 4rem); color: #fff; background: linear-gradient(120deg, rgba(7,9,13,.96), rgba(20,25,20,.9)), url('Logo-ASAD.png') center right 8% / min(56vw, 720px) no-repeat; overflow: hidden; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .16; filter: grayscale(.3) contrast(1.1); }
.hero-mark { position: absolute; inset: auto 0 0 0; height: 42%; background: linear-gradient(0deg, rgba(158,23,27,.42), transparent); pointer-events: none; }
.hero-content, .hero-panel { position: relative; z-index: 1; }
.eyebrow { margin: 0 0 .7rem; color: var(--gold); text-transform: uppercase; letter-spacing: .12em; font-size: .76rem; font-weight: 800; }
.hero-content h1 { max-width: 880px; margin: 0; font-size: clamp(2.7rem, 7vw, 6.4rem); line-height: .94; letter-spacing: 0; }
.hero-copy { max-width: 660px; color: #dce3d7; font-size: clamp(1rem, 2vw, 1.2rem); margin: 1.25rem 0 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.primary-button, .secondary-button, .ghost-button, .filter-bar button, .chat-panel button, .embedded-chat button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); border: 1px solid transparent; padding: .72rem 1rem; font-weight: 800; }
.primary-button { background: var(--red); color: #fff; box-shadow: 0 12px 28px rgba(158,23,27,.28); }
.primary-button:hover { background: var(--red-strong); }
.secondary-button { color: #fff; border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.08); }
.ghost-button { background: #fff; border-color: var(--line); color: var(--ink); }
.hero-panel { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); padding: 1.15rem; backdrop-filter: blur(12px); box-shadow: var(--shadow); }
.hero-panel img { width: 96px; margin-bottom: 1rem; }
.hero-panel dl { display: grid; gap: .8rem; margin: 0; }
.hero-panel div { display: flex; align-items: baseline; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.14); padding-top: .7rem; }
.hero-panel dt { font-size: 2rem; font-weight: 900; color: #fff; }
.hero-panel dd { margin: 0; color: #cbd3c4; }
.section { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; padding: clamp(3rem, 7vw, 5rem) 0; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
.section h2, .page-hero h1, .article-hero h1 { margin: 0; line-height: 1.04; letter-spacing: 0; }
.section h2 { font-size: clamp(1.8rem, 4vw, 3.2rem); }
.split-section, .two-column { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .8rem; }
.feature-grid article, .admin-card, .side-panel, .form-card, .contact-info, .detail-panel, .embedded-chat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(10,15,20,.06); }
.feature-grid article { padding: 1rem; }
.feature-grid strong, .feature-grid span { display: block; }
.feature-grid span, .muted, .side-panel small, .mini-link small { color: var(--muted); }
.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.news-card, .achievement-card, .chapter-card, .article-row { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: 0 12px 30px rgba(12,18,24,.07); }
.news-card img { width: 100%; aspect-ratio: 16/10; object-fit: contain; background: linear-gradient(135deg, #fff, #edf1e8); padding: 1rem; }
.news-card div, .achievement-card div, .chapter-card { padding: 1rem; }
.news-card span, .article-row span, .achievement-card span { color: var(--red); font-weight: 800; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.news-card h3, .article-row h2, .achievement-card h2, .chapter-card h2 { margin: .35rem 0; line-height: 1.15; }
.chapter-band { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 2rem; background: linear-gradient(120deg, var(--night), #1d241b); color: #fff; border-radius: var(--radius); margin-bottom: 4rem; }
.page-hero, .article-hero { background: linear-gradient(120deg, var(--night), #20251f); color: #fff; padding: clamp(4rem, 8vw, 7rem) clamp(1rem, 5vw, 5rem); }
.page-hero.small { min-height: 280px; display: flex; flex-direction: column; justify-content: end; }
.page-hero h1, .article-hero h1 { max-width: 900px; font-size: clamp(2.1rem, 6vw, 4.8rem); }
.content-section { max-width: 920px; }
.prose { font-size: 1.06rem; }
.prose h2, .prose h3 { margin-top: 1.6rem; }
.prose a { color: var(--red); font-weight: 800; }
.prose blockquote { border-left: 4px solid var(--red); margin: 1rem 0; padding: .7rem 1rem; background: #fff7f7; }
.news-layout { grid-template-columns: minmax(0, 1fr) 310px; }
.filter-bar, .mini-search { display: flex; gap: .65rem; margin-bottom: 1rem; }
.filter-bar input, .filter-bar select, .mini-search input, .admin-form input, .admin-form textarea, .admin-form select, .form-card input, .form-card textarea, .chat-panel input, .embedded-chat input { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); padding: .74rem .85rem; background: #fff; color: var(--ink); }
.filter-bar button, .mini-search button, .chat-panel button, .embedded-chat button { background: var(--ink); color: #fff; }
.article-list { display: grid; gap: 1rem; }
.article-row { display: grid; grid-template-columns: 180px 1fr; padding: .8rem; gap: 1rem; }
.article-row img { width: 100%; height: 132px; object-fit: contain; background: #f1f4ef; border-radius: var(--radius); padding: .5rem; }
.side-panel { padding: 1rem; position: sticky; top: 100px; }
.side-panel h3 { margin-top: 0; }
.mini-link, .pill-link { display: block; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.pill-link { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); padding: .45rem .65rem; margin: .25rem .2rem .25rem 0; }
.article-hero { text-align: center; }
.article-hero p { max-width: 760px; margin: 1rem auto; color: #dde4d7; }
.article-main-image { width: min(860px, 100%); max-height: 520px; object-fit: contain; margin: 0 auto 2rem; background: #fff; border-radius: var(--radius); padding: 1rem; }
.compact-grid { grid-template-columns: repeat(3, 1fr); }
.achievement-grid, .chapter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.achievement-card img { width: 100%; aspect-ratio: 16/10; object-fit: contain; background: #f4f7f1; padding: 1rem; }
.chapter-top { display: flex; gap: .7rem; align-items: start; justify-content: space-between; }
.chapter-card dl, .strong-panel dl { margin: 1rem 0; display: grid; gap: .65rem; }
.chapter-card dt, .strong-panel dt { color: var(--muted); font-size: .8rem; }
.chapter-card dd, .strong-panel dd { margin: 0; font-weight: 800; }
.status { display: inline-flex; align-items: center; border-radius: 999px; padding: .28rem .55rem; font-size: .75rem; font-weight: 900; white-space: nowrap; }
.status.success { background: #eaf4e4; color: #2e6c3b; }
.status.warning { background: #fff4d8; color: #8a5b00; }
.status.danger { background: #ffe5e6; color: #9e171b; }
.contact-layout { grid-template-columns: 390px 1fr; }
.form-card, .contact-info, .embedded-chat { padding: 1.2rem; }
.form-card label, .admin-form label, .login-card label { display: grid; gap: .35rem; margin-bottom: .9rem; font-weight: 800; }
.flash { padding: .75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; border: 1px solid transparent; }
.flash.success { background: #eaf4e4; color: #2e6c3b; border-color: #cfe7c5; }
.flash.error { background: #ffe5e6; color: #9e171b; border-color: #ffc8cb; }
.site-footer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 2rem clamp(1rem, 3vw, 3rem); background: var(--night); color: #fff; }
.site-footer img { width: 64px; }
.footer-links { display: flex; gap: 1rem; flex-wrap: wrap; }
.chat-widget { position: fixed; right: 1rem; bottom: 1rem; z-index: 80; }
.chat-toggle { width: 58px; height: 58px; border-radius: 50%; border: 0; background: var(--red); color: #fff; font-weight: 900; box-shadow: var(--shadow); }
.chat-panel { display: none; width: min(360px, calc(100vw - 2rem)); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.chat-widget.open .chat-panel { display: block; }
.chat-widget.open .chat-toggle { display: none; }
.chat-head { display: flex; justify-content: space-between; align-items: center; background: var(--night); color: #fff; padding: .9rem 1rem; }
.chat-head button { background: transparent; color: #fff; border: 0; }
.chat-log { min-height: 180px; max-height: 280px; overflow: auto; padding: 1rem; display: grid; gap: .65rem; }
.chat-log p { margin: 0; padding: .65rem .75rem; border-radius: var(--radius); background: #f2f4f0; }
.chat-log .user { background: #ffe8e9; justify-self: end; }
.chat-panel form, .embedded-chat form { display: flex; gap: .5rem; padding: .75rem; border-top: 1px solid var(--line); }
.embedded-chat .chat-log { max-height: 420px; }
/* ==========================================================================
   PERSINAS ASAD JATIM - LOGIN PAGE REFINEMENT (MODERN & ELEGAN)
   ========================================================================== */

.login-body { 
    min-height: 100vh; 
    display: flex; 
    align-items: center;
    justify-content: center;
    /* Memanfaatkan kombinasi warna --night dan warna gelap berbasis --moss */
    background: linear-gradient(135deg, var(--night) 0%, #0c140a 50%, #172213 100%); 
    padding: 1.5rem; 
    position: relative;
    overflow: hidden;
}

/* Dekorasi cahaya estetik di latar belakang agar terlihat eksklusif & berkelas */
.login-body::before,
.login-body::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    z-index: 0;
    pointer-events: none;
    opacity: 0.15;
}
.login-body::before {
    width: 350px;
    height: 350px;
    background: var(--gold);
    top: -10%;
    left: -10%;
}
.login-body::after {
    width: 400px;
    height: 400px;
    background: var(--moss-bright);
    bottom: -10%;
    right: -10%;
}

.login-card { 
    position: relative;
    z-index: 1;
    width: min(410px, 100%); 
    /* Efek Glassmorphism: Latar transparan mewah yang berpadu dengan background */
    background: rgba(255, 255, 255, 0.04); 
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    /* Border tipis seperti kaca premium */
    border: 1px solid rgba(255, 255, 255, 0.12); 
    border-radius: 16px; /* Transisi sudut yang lebih lembut */
    padding: 2.5rem 2rem; 
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    color: #ffffff;
}

/* Memperbaiki luapan logo besar seperti di case sebelumnya */
.login-card img { 
    max-width: 100px; 
    height: auto;
    margin: 0 auto 1.25rem; 
    display: block;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,0.3));
}

.login-card .eyebrow {
    color: var(--gold);
    text-align: center;
    font-family: var(--font-admin);
    font-weight: 900;
    letter-spacing: 0.2em;
    margin-bottom: 0.25rem;
}

.login-card h1 {
    color: #ffffff;
    text-align: center;
    font-family: var(--font-body);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 2rem;
}

/* Form Styling di dalam Card */
.login-card label {
    color: #cbd5e1;
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 1.1rem;
    gap: 0.45rem;
}

.login-card input {
    width: 100%;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    padding: 0.78rem 1rem;
    color: #ffffff;
    font-family: var(--font-admin);
    transition: all 0.25s ease;
    outline: none;
}

/* Efek menyala emas yang elegan saat form diklik */
.login-card input:focus {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(201, 163, 72, 0.25);
}

.login-card input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

/* Tombol Masuk Utama */
.login-card .primary-button {
    width: 100%;
    min-height: 46px;
    background: linear-gradient(135deg, var(--gold) 0%, #a68133 100%);
    color: var(--night);
    border: none;
    border-radius: 10px;
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    box-shadow: 0 8px 20px rgba(201, 163, 72, 0.25);
    transition: all 0.25s ease;
    margin-top: 0.5rem;
}

.login-card .primary-button:hover {
    background: linear-gradient(135deg, #dbb558 0%, var(--gold) 100%);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(201, 163, 72, 0.4);
    color: var(--night);
}

.login-card .primary-button div {
    font-weight: 800;
}

/* Style Informasi Sistem (Waktu, Jam, IP) di bagian bawah card */
.login-card .meta-footer {
    margin-top: 2.2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.76rem;
    color: #94a3b8;
    display: grid;
    gap: 0.45rem;
}

.login-card .meta-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.login-card .meta-label {
    color: rgba(255, 255, 255, 0.35);
}

.login-card .meta-value {
    font-weight: 600;
    color: #e2e8f0;
}
.admin-body { min-height: 100vh; display: grid; grid-template-columns: 290px 1fr; background: #eef2f5; }
.admin-sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 1rem; padding: 1rem; background: #101827; color: #d8e0ef; }
.admin-menu { display: grid; gap: .25rem; }
.admin-menu a { display: flex; align-items: center; gap: .75rem; padding: .72rem .8rem; border-radius: var(--radius); color: #b9c5d7; }
.admin-menu a.active, .admin-menu a:hover { background: #1d2a40; color: #fff; }
.admin-menu span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--radius); background: rgba(255,255,255,.06); font-size: .75rem; }
.admin-user { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem; background: #1b2638; border-radius: var(--radius); }
.admin-user small { display: block; color: #9fb0c8; }
.admin-main { min-width: 0; padding: 1.25rem; }
.admin-topbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; }
.admin-topbar p { margin: 0; color: var(--muted); }
.admin-topbar h1 { margin: .1rem 0 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1rem; }
.stats-grid article { background: #111827; color: #fff; border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow); }
.stats-grid span { color: #9fb0c8; text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; }
.stats-grid strong { display: block; font-size: 2.5rem; line-height: 1; margin-top: .7rem; }
.admin-grid { display: grid; gap: 1rem; }
.admin-grid.two { grid-template-columns: minmax(0, 1fr) minmax(340px, .8fr); }
.admin-grid.wide-left { grid-template-columns: minmax(0, 1fr) minmax(380px, .8fr); align-items: start; }
.admin-card { padding: 1rem; }
.admin-card-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.admin-card h2 { margin: 0 0 .7rem; font-size: 1.15rem; }
.notice-row { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.notice-row small, table small { display: block; color: var(--muted); }
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.action-cell { display: flex; align-items: center; gap: .45rem; }
.action-cell a, .action-cell button { border: 1px solid var(--line); background: #fff; border-radius: var(--radius); padding: .38rem .55rem; color: var(--ink); }

/* Compact icon-only table actions retain their labels through tooltips and screen-reader text. */
.admin-body .action-cell { white-space: nowrap; }
.admin-body .action-cell form { display: inline-flex; margin: 0; }
.admin-body .action-cell .table-action-icon {
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 9px;
    display: inline-flex;
    height: 34px;
    justify-content: center;
    padding: 0 !important;
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease, transform .18s ease;
    width: 34px;
}
.admin-body .action-cell .table-action-icon .admin-fa-icon { font-size: .95rem; }
.admin-body .action-cell .table-action-edit { border-color: #c9ded0; color: #54704b; }
.admin-body .action-cell .table-action-edit:hover { background: #edf7ef; border-color: #94c5a1; color: #35563b; }
.admin-body .action-cell .table-action-view { border-color: #bedbea; color: #2379a7; }
.admin-body .action-cell .table-action-view:hover { background: #edf8fd; border-color: #83c3e2; color: #145b82; }
.admin-body .action-cell .table-action-delete { border-color: #f2c6c7; color: #c53d42; }
.admin-body .action-cell .table-action-delete:hover { background: #fff0f0; border-color: #e89da0; color: #a92830; }
.admin-body .action-cell .table-action-icon:hover { box-shadow: 0 5px 12px rgba(24, 33, 45, .11); transform: translateY(-1px); }
.admin-body .action-cell .table-action-icon:focus-visible { box-shadow: 0 0 0 3px rgba(93, 113, 83, .22); outline: 0; }
.admin-body .action-cell .sr-only {
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}
.admin-form { display: grid; gap: .2rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.check-line { display: flex !important; grid-template-columns: auto 1fr; align-items: center; gap: .5rem !important; }
.check-line input { width: auto; }
.preview-image { width: 120px; height: 90px; object-fit: contain; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: .35rem; }
.list-link { display: block; padding: .8rem; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: .5rem; }
.list-link.active { border-color: var(--red); background: #fff5f5; }
.media-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.media-grid a { display: grid; gap: .45rem; font-size: .78rem; }
.media-grid img { aspect-ratio: 1; object-fit: contain; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: .3rem; }
.max-form { max-width: 900px; }
@media (max-width: 1020px) {
    .site-nav { display: none; position: absolute; left: 1rem; right: 1rem; top: 72px; flex-direction: column; align-items: stretch; background: #111827; border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); padding: .5rem; }
    .site-nav.open { display: flex; }
    .nav-toggle { display: inline-flex; }
    .hero-section, .split-section, .two-column, .news-layout, .contact-layout, .admin-body, .admin-grid.two, .admin-grid.wide-left { grid-template-columns: 1fr; }
    .hero-section { min-height: auto; padding-top: 5rem; }
    .hero-panel { max-width: 420px; }
    .news-grid, .achievement-grid, .chapter-grid, .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-sidebar { position: static; height: auto; }
}
@media (max-width: 680px) {
    .site-header { flex-wrap: wrap; }
    .brand span { display: none; }
    .language-switcher { margin-left: 0; }
    .hero-content h1 { font-size: 2.55rem; }
    .hero-actions, .filter-bar, .chat-panel form, .embedded-chat form, .site-footer, .chapter-band, .section-head { flex-direction: column; align-items: stretch; }
    .news-grid, .achievement-grid, .chapter-grid, .stats-grid, .feature-grid, .form-row, .compact-grid { grid-template-columns: 1fr; }
    .article-row { grid-template-columns: 1fr; }
    .side-panel { position: static; }
    .admin-main { padding: .75rem; }
    .admin-topbar { align-items: stretch; flex-direction: column; }
}
/* Typography refinement: premium frontend + precise admin panel */
:root {
    --font-body: "Inter", "Aptos", "Segoe UI Variable", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --font-admin: "Inter", "Aptos", "Segoe UI Variable", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --font-display: "Cinzel", "Trajan Pro", "Cormorant Garamond", "Cambria", "Georgia", serif;
    --font-serif: "Cormorant Garamond", "Cambria", "Georgia", serif;
    --text-xs: .75rem;
    --text-sm: .875rem;
    --text-md: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.35rem;
    --text-2xl: clamp(1.6rem, 2.6vw, 2.25rem);
    --text-3xl: clamp(2rem, 4vw, 3.45rem);
    --text-hero: clamp(2.75rem, 6.8vw, 5.85rem);
}
html {
    font-size: 16px;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body {
    font-family: var(--font-body);
    font-size: var(--text-md);
    line-height: 1.66;
    letter-spacing: 0;
}
.front-body {
    font-family: var(--font-body);
    font-size: 1rem;
}
.front-body h1,
.front-body h2,
.front-body h3,
.hero-panel dt {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0;
    text-wrap: balance;
}
.front-body p,
.front-body li,
.front-body dd,
.front-body input,
.front-body textarea,
.front-body select {
    font-size: 1rem;
}
.brand strong {
    font-family: var(--font-admin);
    font-size: .92rem;
    font-weight: 900;
    letter-spacing: .01em;
}
.brand small {
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .13em;
}
.site-nav a {
    font-family: var(--font-admin);
    font-size: .84rem;
    font-weight: 750;
    line-height: 1.2;
}
.language-switcher a,
.nav-toggle {
    font-size: .78rem;
    font-weight: 850;
}
.breaking-bar {
    font-size: .92rem;
    line-height: 1.35;
}
.breaking-bar strong,
.eyebrow {
    font-family: var(--font-admin);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .16em;
}
.hero-content h1 {
    max-width: 980px;
    font-size: var(--text-hero);
    line-height: .98;
    font-weight: 700;
}
.hero-copy {
    max-width: 700px;
    font-size: clamp(1.04rem, 1.6vw, 1.22rem);
    line-height: 1.72;
}
.primary-button,
.secondary-button,
.ghost-button,
.filter-bar button,
.chat-panel button,
.embedded-chat button,
.action-cell a,
.action-cell button {
    font-family: var(--font-admin);
    font-size: .86rem;
    font-weight: 850;
    letter-spacing: .01em;
    line-height: 1.15;
}
.hero-panel dt {
    font-size: 2.15rem;
    line-height: 1;
}
.hero-panel dd {
    font-size: .9rem;
    line-height: 1.25;
}
.section h2 {
    font-size: var(--text-3xl);
    line-height: 1.08;
}
.section > p,
.split-section > div > p,
.chapter-band p,
.contact-info p {
    font-size: 1.04rem;
    line-height: 1.72;
}
.feature-grid strong {
    font-size: 1.02rem;
    line-height: 1.25;
}
.feature-grid span {
    font-size: .93rem;
    line-height: 1.5;
}
.news-card h3,
.article-row h2,
.achievement-card h2,
.chapter-card h2 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    line-height: 1.18;
    font-weight: 700;
}
.article-row h2 {
    font-size: 1.42rem;
}
.news-card p,
.article-row p,
.achievement-card p,
.chapter-card p {
    font-size: .95rem;
    line-height: 1.62;
}
.news-card span,
.article-row span,
.achievement-card span,
.status {
    font-family: var(--font-admin);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
}
.page-hero h1,
.article-hero h1 {
    font-size: clamp(2.25rem, 5.8vw, 4.65rem);
    line-height: 1.04;
}
.article-hero p {
    font-size: 1.08rem;
    line-height: 1.74;
}
.prose {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.82;
}
.prose h2,
.prose h3,
.prose h4 {
    font-family: var(--font-display);
    line-height: 1.16;
}
.prose h2 { font-size: 1.9rem; }
.prose h3 { font-size: 1.45rem; }
.prose blockquote {
    font-family: var(--font-serif);
    font-size: 1.08rem;
    line-height: 1.7;
}
.filter-bar input,
.filter-bar select,
.form-card input,
.form-card textarea,
.chat-panel input,
.embedded-chat input {
    font-size: .95rem;
    line-height: 1.35;
}
.form-card label {
    font-size: .84rem;
    line-height: 1.2;
}
.site-footer {
    font-size: .94rem;
    line-height: 1.45;
}
.site-footer p {
    font-family: var(--font-display);
    font-size: 1.15rem;
    line-height: 1.15;
    margin: .4rem 0 .15rem;
}

.admin-body,
.login-body {
    font-family: var(--font-admin);
    font-size: .925rem;
    line-height: 1.48;
}
.admin-brand strong {
    font-size: .96rem;
    font-weight: 900;
    letter-spacing: .01em;
}
.admin-brand small {
    font-size: .66rem;
    font-weight: 850;
    letter-spacing: .16em;
}
.admin-menu a {
    font-size: .91rem;
    font-weight: 750;
    line-height: 1.2;
}
.admin-menu span {
    font-size: .68rem;
    font-weight: 900;
    text-transform: uppercase;
}
.admin-user strong {
    font-size: .96rem;
    line-height: 1.15;
}
.admin-user small,
.admin-user a {
    font-size: .8rem;
    line-height: 1.2;
}
.admin-topbar p {
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.admin-topbar h1 {
    font-size: clamp(1.35rem, 2vw, 1.85rem);
    line-height: 1.16;
    font-weight: 850;
    letter-spacing: 0;
}
.stats-grid span,
th {
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .11em;
}
.stats-grid strong {
    font-size: clamp(2.1rem, 4vw, 3rem);
    font-weight: 900;
    letter-spacing: 0;
}
.admin-card h2 {
    font-size: 1.08rem;
    line-height: 1.2;
    font-weight: 850;
}
.admin-card p,
.notice-row,
td {
    font-size: .9rem;
    line-height: 1.5;
}
table small,
.notice-row small,
.list-link small {
    font-size: .78rem;
    line-height: 1.35;
}
.admin-form label,
.login-card label {
    font-size: .82rem;
    line-height: 1.2;
    letter-spacing: .01em;
}
.admin-form input,
.admin-form textarea,
.admin-form select,
.login-card input,
.mini-search input {
    font-size: .92rem;
    line-height: 1.35;
}
.login-card h1 {
    font-size: 1.7rem;
    line-height: 1.15;
    margin: .2rem 0 1rem;
}
.login-card small {
    font-size: .78rem;
    line-height: 1.45;
}
@media (max-width: 680px) {
    html { font-size: 15.5px; }
    .hero-content h1 { font-size: clamp(2.35rem, 12vw, 3.35rem); line-height: 1.02; }
    .page-hero h1,
    .article-hero h1 { font-size: clamp(2rem, 10vw, 3rem); }
    .section h2 { font-size: clamp(1.75rem, 8vw, 2.45rem); }
    .article-row h2,
    .news-card h3,
    .achievement-card h2,
    .chapter-card h2 { font-size: 1.2rem; }
    .admin-body,
    .login-body { font-size: .9rem; }
    .admin-topbar h1 { font-size: 1.32rem; }
    th, td { font-size: .84rem; }
}
/* Back panel profile, menu symbols, and session information */
.admin-menu a {
    min-height: 46px;
}
.admin-menu .menu-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(255,255,255,.07);
    color: #aebbd0;
}
.admin-menu .menu-icon svg {
    width: 18px;
    height: 18px;
    display: block;
    fill: currentColor;
}
.admin-menu .menu-label {
    width: auto;
    height: auto;
    display: inline;
    background: transparent;
    border-radius: 0;
    font-size: .91rem;
    font-weight: 750;
    line-height: 1.2;
}
.admin-menu a.active .menu-icon,
.admin-menu a:hover .menu-icon {
    background: rgba(158, 23, 27, .22);
    color: #ffffff;
}
.admin-user {
    align-items: center;
    justify-content: flex-start;
}
.admin-user-photo,
.admin-session-photo {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    background: #111827;
    border: 2px solid rgba(255,255,255,.72);
    box-shadow: 0 10px 24px rgba(0,0,0,.22);
}
.admin-user > div {
    min-width: 0;
    flex: 1;
}
.admin-user a {
    color: #dbe6f8;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 8px;
    padding: .42rem .58rem;
}
.admin-session-panel {
    display: grid;
    grid-template-columns: auto minmax(280px, 1fr);
    align-items: center;
    gap: .8rem;
    min-width: min(520px, 48vw);
    padding: .75rem .9rem;
    background: linear-gradient(135deg, #f8fafc, #eef3f7);
    border: 1px solid #dce3ea;
    border-radius: 8px;
}
.admin-session-photo {
    width: 56px;
    height: 56px;
    border-color: #ffffff;
}
.admin-session-panel dl {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .65rem;
}
.admin-session-panel div {
    min-width: 0;
}
.admin-session-panel dt {
    color: #6b7280;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .08em;
    line-height: 1.2;
    text-transform: uppercase;
    margin-bottom: .22rem;
}
.admin-session-panel dd {
    margin: 0;
    color: #111827;
    font-size: .86rem;
    font-weight: 850;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.admin-session-panel dd span {
    display: inline-flex;
    margin-left: .25rem;
    color: #9e171b;
    font-size: .76rem;
    font-weight: 900;
}
@media (max-width: 1180px) {
    .admin-topbar {
        align-items: stretch;
        flex-wrap: wrap;
    }
    .admin-session-panel {
        order: 3;
        width: 100%;
        min-width: 0;
    }
}
@media (max-width: 760px) {
    .admin-session-panel {
        grid-template-columns: 1fr;
    }
    .admin-session-panel dl {
        grid-template-columns: 1fr;
    }
    .admin-session-photo {
        width: 52px;
        height: 52px;
    }
}
/* Requested admin color system and Master User module */
.admin-menu a {
    border: 1px solid transparent;
    box-shadow: inset 0 0 0 0 var(--menu-accent);
    transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.admin-menu a:hover,
.admin-menu a.active {
    background: color-mix(in srgb, var(--menu-accent) 24%, #1d2a40);
    border-color: color-mix(in srgb, var(--menu-accent) 42%, transparent);
    box-shadow: inset 4px 0 0 var(--menu-accent);
    transform: translateX(2px);
}
.admin-menu a:hover .menu-icon,
.admin-menu a.active .menu-icon {
    background: var(--menu-accent);
    color: #fff;
    box-shadow: 0 10px 20px color-mix(in srgb, var(--menu-accent) 34%, transparent);
}
.stats-grid article.stat-published {
    background: linear-gradient(135deg, #0f766e, #134e4a);
}
.stats-grid a.stat-published {
    background: linear-gradient(135deg, #0f766e, #134e4a);
}
.stats-grid article.stat-draft {
    background: linear-gradient(135deg, #92400e, #78350f);
}
.stats-grid a.stat-draft {
    background: linear-gradient(135deg, #92400e, #78350f);
}
.stats-grid article.stat-chapters {
    background: linear-gradient(135deg, #1d4ed8, #172554);
}
.stats-grid a.stat-chapters {
    background: linear-gradient(135deg, #1d4ed8, #172554);
}
.stats-grid article.stat-achievements {
    background: linear-gradient(135deg, #9e171b, #450a0a);
}
.stats-grid a.stat-achievements {
    background: linear-gradient(135deg, #9e171b, #450a0a);
}
.stats-grid article {
    position: relative;
    overflow: hidden;
}
.stats-grid a {
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}
.stats-grid article::after {
    content: "";
    position: absolute;
    right: -32px;
    top: -36px;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
}
.stats-grid a::after {
    content: "";
    position: absolute;
    right: -32px;
    top: -36px;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
}
.user-form-head,
.table-user {
    display: flex;
    align-items: center;
    gap: .8rem;
}
.user-form-head {
    padding: .8rem;
    margin-bottom: .5rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(135deg, #f8fafc, #eef3f7);
}
.user-form-head strong,
.table-user strong {
    display: block;
    line-height: 1.15;
}
.user-form-head small,
.table-user small {
    display: block;
    color: var(--muted);
    margin-top: .2rem;
}
.user-form-avatar,
.table-user img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    background: #111827;
    border: 2px solid #fff;
    box-shadow: 0 10px 24px rgba(15,23,42,.16);
}
.table-user img {
    width: 42px;
    height: 42px;
}
.role-guide {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: .65rem;
    margin-bottom: 1rem;
}
.role-guide-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 112px;
    border: 1px solid color-mix(in srgb, var(--role-accent, #64748b) 20%, #e5e7eb);
    border-radius: 12px;
    padding: .9rem .95rem .85rem;
    background:
        linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,255,255,.76)),
        linear-gradient(145deg, var(--role-soft, rgba(100,116,139,.12)), rgba(255,255,255,.4));
    box-shadow: 0 14px 32px rgba(15, 23, 42, .07);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.role-guide-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, var(--role-accent, #64748b), var(--role-accent-2, #94a3b8));
    z-index: -1;
}
.role-guide-card::after {
    content: "";
    position: absolute;
    right: -30px;
    top: -34px;
    width: 108px;
    height: 108px;
    border-radius: 999px;
    background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.18) 0 7px, transparent 7px 14px),
        linear-gradient(135deg, var(--role-accent, #64748b), var(--role-accent-2, #94a3b8));
    opacity: .2;
    z-index: -1;
}
.role-guide-card:hover,
.role-guide-card.is-active {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--role-accent, #64748b) 44%, #e5e7eb);
    box-shadow: 0 18px 42px rgba(15, 23, 42, .11);
}
.role-guide-card.is-active {
    background:
        linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,255,255,.84)),
        linear-gradient(145deg, var(--role-soft, rgba(100,116,139,.12)), rgba(255,255,255,.4));
}
.role-guide-super {
    --role-accent: #7c3aed;
    --role-accent-2: #db2777;
    --role-soft: rgba(124, 58, 237, .14);
}
.role-guide-editor {
    --role-accent: #059669;
    --role-accent-2: #14b8a6;
    --role-soft: rgba(5, 150, 105, .13);
}
.role-guide-operator {
    --role-accent: #ea580c;
    --role-accent-2: #f59e0b;
    --role-soft: rgba(234, 88, 12, .14);
}
.role-guide-chapter {
    --role-accent: #2563eb;
    --role-accent-2: #0f766e;
    --role-soft: rgba(37, 99, 235, .13);
}
.role-guide strong,
.role-guide span {
    display: block;
}
.role-guide strong {
    color: #0f172a;
    font-size: .92rem;
    line-height: 1.2;
}
.role-guide span {
    max-width: 12rem;
    color: #475569;
    font-size: .8rem;
    line-height: 1.42;
    margin-top: .32rem;
}
.role-guide em {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    margin-top: .7rem;
    padding: .24rem .55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--role-accent, #64748b) 12%, #ffffff);
    color: color-mix(in srgb, var(--role-accent, #64748b) 78%, #0f172a);
    font-size: .72rem;
    font-style: normal;
    font-weight: 900;
}
.activity-filter-guide {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin: 0 0 1rem;
}
.activity-filter-guide a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: .5rem .75rem;
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 999px;
    background: rgba(248, 250, 252, .9);
    color: #475569;
    font-size: .78rem;
    font-weight: 900;
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.activity-filter-guide a:hover,
.activity-filter-guide a:focus-visible,
.activity-filter-guide a.is-active {
    border-color: rgba(37, 99, 235, .42);
    color: #1d4ed8;
    box-shadow: 0 14px 28px rgba(37, 99, 235, .1);
    transform: translateY(-1px);
    outline: none;
}
.admin-filter-note {
    margin: -.25rem 0 1rem;
    padding: .72rem .85rem;
    border: 1px solid rgba(148, 163, 184, .3);
    border-radius: 14px;
    background: rgba(248, 250, 252, .82);
    color: #475569;
    font-size: .82rem;
}
.admin-filter-note a {
    color: #7c3aed;
    font-weight: 900;
    text-decoration: none;
}
.role-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: .3rem .6rem;
    font-size: .74rem;
    font-weight: 900;
    white-space: nowrap;
}
.role-super_admin {
    background: #ede9fe;
    color: #5b21b6;
}
.role-editor {
    background: #dcfce7;
    color: #166534;
}
.role-operator {
    background: #e0f2fe;
    color: #075985;
}
.user-table td {
    vertical-align: middle;
}
@media (max-width: 760px) {
    .role-guide {
        grid-template-columns: 1fr;
    }
}
/* Front End refinements: safe breaking news, bright mural hero, proportional video area */
.front-body {
    background: #fffaf2;
}
.breaking-bar {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    align-items: center;
    gap: 1rem;
    min-height: 48px;
    padding: .55rem clamp(1rem, 3vw, 3rem);
    background: #fffdf7;
    border-top: 1px solid #f1e7d4;
    border-bottom: 1px solid #eadcc2;
    overflow: hidden;
}
.breaking-bar strong {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: .32rem .78rem;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #f0d7d7;
    color: #b11116;
    box-shadow: 0 8px 18px rgba(158, 23, 27, .08);
    white-space: nowrap;
}
.breaking-track {
    position: relative;
    min-width: 0;
    overflow: hidden;
    height: 32px;
    display: flex;
    align-items: center;
    animation: none;
}
.breaking-track::before,
.breaking-track::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 44px;
    z-index: 1;
    pointer-events: none;
}
.breaking-track::before {
    left: 0;
    background: linear-gradient(90deg, #fffdf7, rgba(255,253,247,0));
}
.breaking-track::after {
    right: 0;
    background: linear-gradient(270deg, #fffdf7, rgba(255,253,247,0));
}
.breaking-marquee {
    display: inline-flex;
    align-items: center;
    gap: 2rem;
    white-space: nowrap;
    min-width: max-content;
    padding-left: 100%;
    animation: breakingTicker 28s linear infinite;
}
.breaking-marquee a {
    color: #27312b;
    font-weight: 650;
    line-height: 1.2;
}
.breaking-marquee a::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 2rem;
    border-radius: 2px;
    background: #9e171b;
    vertical-align: middle;
}
.breaking-track:hover .breaking-marquee {
    animation-play-state: paused;
}
.breaking-clock {
    justify-self: end;
    min-width: max-content;
    padding: .28rem .72rem;
    border-radius: 999px;
    border: 1px solid rgba(23, 36, 63, .08);
    background: rgba(255, 255, 255, .55);
    color: rgba(23, 36, 63, .62);
    font-family: var(--font-admin);
    font-size: .72rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .02em;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(23, 36, 63, .05);
}
@keyframes breakingTicker {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}
.hero-section {
    min-height: min(760px, calc(100vh - 72px));
    grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
    grid-template-areas:
        "content media"
        "panel media";
    align-items: center;
    gap: clamp(1.5rem, 3vw, 3rem);
    padding: clamp(3.6rem, 7vw, 6rem) clamp(1rem, 4vw, 4rem) clamp(2.2rem, 4vw, 3.5rem);
    color: #172018;
    background:
        linear-gradient(115deg, rgba(255,250,239,.96), rgba(244,255,235,.91)),
        repeating-linear-gradient(126deg, rgba(158,23,27,.08) 0 2px, transparent 2px 30px),
        repeating-linear-gradient(32deg, rgba(73,99,58,.08) 0 3px, transparent 3px 38px);
    overflow: hidden;
}
.hero-mural {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        url('Logo-ASAD.png') right 4% center / min(44vw, 620px) no-repeat,
        linear-gradient(140deg, transparent 0 42%, rgba(201,163,72,.16) 42% 45%, transparent 45% 100%),
        linear-gradient(24deg, transparent 0 48%, rgba(158,23,27,.12) 48% 51%, transparent 51% 100%);
    opacity: .22;
}
.hero-mark {
    inset: auto 0 0 0;
    height: 34%;
    background: linear-gradient(0deg, rgba(122,147,96,.18), rgba(255,255,255,0));
}
.hero-content {
    grid-area: content;
    max-width: 780px;
    padding: clamp(1.2rem, 2vw, 1.7rem);
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(255,255,255,.78);
    border-left: 6px solid var(--red);
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(76, 65, 40, .12);
    backdrop-filter: blur(8px);
}
.hero-section .eyebrow {
    color: #9e171b;
}
.hero-content h1 {
    max-width: 760px;
    font-size: clamp(2.15rem, 4.2vw, 4rem) !important;
    line-height: 1.08;
    color: #151915;
}
.hero-copy {
    max-width: 650px;
    color: #44513f;
    font-size: clamp(1rem, 1.35vw, 1.12rem);
    line-height: 1.7;
}
.hero-section .secondary-button {
    color: #172018;
    border-color: rgba(23,32,24,.18);
    background: rgba(255,255,255,.72);
}
.hero-section .secondary-button:hover {
    background: #ffffff;
}
.hero-media-card {
    grid-area: media;
    position: relative;
    z-index: 1;
    overflow: hidden;
    align-self: center;
    background: #ffffff;
    border: 1px solid rgba(23,32,24,.12);
    border-radius: 8px;
    box-shadow: 0 24px 60px rgba(77, 60, 38, .18);
}
.hero-media-card::before {
    content: "";
    display: block;
    height: 8px;
    background: linear-gradient(90deg, #9e171b, #c9a348, #49633a);
}
.hero-media-card .hero-video {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    opacity: 1;
    filter: none;
    background: #111418;
}
.hero-video-placeholder {
    min-height: 292px;
    aspect-ratio: 16 / 9;
    display: grid;
    place-items: center;
    text-align: center;
    gap: .45rem;
    padding: 2rem;
    background:
        linear-gradient(135deg, rgba(255,255,255,.92), rgba(237,246,230,.94)),
        repeating-linear-gradient(135deg, rgba(158,23,27,.07) 0 2px, transparent 2px 18px);
}
.hero-video-placeholder img {
    width: 92px;
    margin: 0 auto .35rem;
}
.hero-video-placeholder strong,
.hero-video-placeholder span {
    display: block;
}
.hero-video-placeholder strong {
    font-size: 1.1rem;
}
.hero-video-placeholder span {
    max-width: 320px;
    color: #596452;
    font-size: .92rem;
    line-height: 1.5;
}
.hero-media-caption {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: .85rem 1rem;
    background: #fffdf7;
    border-top: 1px solid #efe2cc;
}
.hero-media-caption strong,
.hero-media-caption span {
    display: block;
}
.hero-media-caption strong {
    color: #172018;
    font-size: .95rem;
    line-height: 1.2;
}
.hero-media-caption span {
    color: #6a7464;
    font-size: .8rem;
    line-height: 1.25;
}
.hero-panel {
    grid-area: panel;
    width: min(100%, 580px);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: center;
    background: rgba(255,255,255,.84);
    border: 1px solid rgba(23,32,24,.1);
    color: #172018;
    box-shadow: 0 16px 40px rgba(77, 60, 38, .1);
}
.hero-panel img {
    width: 78px;
    margin: 0;
}
.hero-panel dl {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .6rem;
}
.hero-panel div {
    display: block;
    border-top: 0;
    border-left: 1px solid rgba(23,32,24,.12);
    padding: .15rem 0 .15rem .75rem;
}
.hero-panel dt {
    color: #9e171b;
    font-size: 1.8rem;
}
.hero-panel dd {
    color: #55604f;
    font-size: .8rem;
}
.admin-video-preview {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
    border-radius: 8px;
    background: #111418;
}
.empty-video-preview {
    min-height: 220px;
    display: grid;
    place-items: center;
    gap: .35rem;
    text-align: center;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    background: #f8fafc;
    color: #334155;
}
.empty-video-preview strong,
.empty-video-preview span {
    display: block;
}
.empty-video-preview span {
    color: #64748b;
}
@media (max-width: 1020px) {
    .hero-section {
        grid-template-columns: 1fr;
        grid-template-areas:
            "content"
            "media"
            "panel";
        min-height: auto;
    }
    .hero-media-card {
        width: min(100%, 620px);
    }
}
@media (max-width: 680px) {
    .breaking-bar {
        grid-template-columns: 1fr;
        gap: .45rem;
    }
    .breaking-clock {
        justify-self: start;
        width: max-content;
        max-width: 100%;
        font-size: .68rem;
    }
    .breaking-track {
        width: 100%;
    }
    .breaking-marquee {
        animation-duration: 22s;
    }
    .hero-content {
        padding: 1rem;
    }
    .hero-content h1 {
        font-size: clamp(1.9rem, 9vw, 2.65rem) !important;
    }
    .hero-media-caption,
    .hero-panel {
        grid-template-columns: 1fr;
    }
    .hero-panel dl {
        grid-template-columns: 1fr;
    }
    .hero-panel div {
        border-left: 0;
        border-top: 1px solid rgba(23,32,24,.12);
        padding: .55rem 0 0;
    }
}

/* Pengkab/Kota logo upload and directory display */
.chapter-brandline {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: center;
    gap: .75rem;
    min-width: 0;
}
.chapter-logo,
.chapter-detail-logo,
.chapter-hero-logo,
.table-logo,
.chapter-logo-preview {
    object-fit: contain;
    background: #ffffff;
    border: 1px solid #e3e7e1;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .08);
}
.chapter-logo {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    padding: .28rem;
    flex: 0 0 auto;
}
.chapter-brandline h2 {
    min-width: 0;
    margin: 0;
}
.chapter-card .chapter-top {
    align-items: flex-start;
}
.table-logo {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    padding: .22rem;
}
.chapter-logo-preview {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    padding: .5rem;
}
.chapter-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 900px);
    align-content: end;
    justify-content: start;
    align-items: end;
    gap: 1.2rem;
}
.front-body .chapter-map-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        linear-gradient(110deg, rgba(23,36,63,.88), rgba(31,95,153,.46), rgba(106,63,176,.58)),
        #17243f;
}

.front-body .chapter-map-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: url('peta-jatim.jpg') center / cover no-repeat;
    opacity: .3;
}

.front-body .chapter-map-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 14% 18%, rgba(255,255,255,.16), transparent 34%),
        linear-gradient(90deg, rgba(23,36,63,.82), rgba(23,36,63,.28) 48%, rgba(106,63,176,.46));
}

.front-body .chapter-map-hero h1,
.front-body .chapter-map-hero .eyebrow {
    position: relative;
    z-index: 1;
}

.front-body .chapter-map-hero h1 {
    color: #fff !important;
    text-shadow: 0 18px 34px rgba(0,0,0,.24);
}

.front-body .chapter-map-hero .eyebrow {
    color: #f28a2e;
}
.chapter-hero-logo {
    width: clamp(86px, 12vw, 132px);
    height: clamp(86px, 12vw, 132px);
    border-radius: 50%;
    padding: .55rem;
    position: relative;
    z-index: 1;
}
.chapter-detail-logo {
    width: 116px;
    height: 116px;
    border-radius: 50%;
    padding: .55rem;
    margin: 0 0 1rem;
}
@media (max-width: 680px) {
    .chapter-top {
        display: grid;
        grid-template-columns: 1fr;
    }
    .chapter-brandline {
        grid-template-columns: 48px minmax(0, 1fr);
    }
    .chapter-logo {
        width: 48px;
        height: 48px;
    }
    .chapter-hero {
        grid-template-columns: 1fr;
    }
    .chapter-detail-logo {
        width: 96px;
        height: 96px;
    }
}
/* Front navigation dropdowns and Pengkab/Kota status spacing */
.site-nav {
    gap: .25rem;
}
.site-nav > a,
.nav-parent {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    color: #d8ddd7;
    padding: .62rem .74rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font-family: var(--font-admin);
    font-size: .84rem;
    font-weight: 850;
    line-height: 1.15;
    text-align: left;
}
.site-nav > a:hover,
.site-nav > a.active,
.nav-dropdown:hover > .nav-parent,
.nav-dropdown:focus-within > .nav-parent,
.nav-dropdown.active > .nav-parent,
.nav-dropdown.open > .nav-parent {
    background: rgba(255,255,255,.09);
    color: #ffffff;
}
.nav-dropdown {
    position: relative;
}
.nav-caret {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: .88;
}
.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + .45rem);
    left: 0;
    z-index: 90;
    min-width: 238px;
    display: grid;
    gap: .2rem;
    padding: .45rem;
    background: #ffffff;
    border: 1px solid rgba(17, 20, 24, .1);
    border-radius: 8px;
    box-shadow: 0 22px 46px rgba(8, 11, 16, .2);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.nav-dropdown-menu-right {
    left: auto;
    right: 0;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}
.site-nav .nav-dropdown-menu a {
    display: flex;
    align-items: center;
    min-height: 42px;
    color: #172018;
    padding: .62rem .72rem;
    border-radius: 6px;
    font-size: .86rem;
    line-height: 1.25;
    white-space: nowrap;
}
.site-nav .nav-dropdown-menu a:hover,
.site-nav .nav-dropdown-menu a.active {
    background: #fff1f2;
    color: #9e171b;
}
.nav-dropdown-menu-internal {
    min-width: 272px;
}
.nav-submenu-group {
    display: grid;
    gap: .18rem;
    padding: .35rem;
    border: 1px solid rgba(17, 24, 39, .08);
    border-radius: 8px;
    background: #f8fafc;
}
.nav-submenu-label {
    display: flex;
    align-items: center;
    min-height: 32px;
    padding: .38rem .52rem;
    color: #65748a;
    font-family: var(--font-admin);
    font-size: .7rem;
    font-weight: 950;
    letter-spacing: .08em;
    line-height: 1.15;
    text-transform: uppercase;
}
.nav-submenu-links {
    display: grid;
    gap: .16rem;
}
.site-nav .nav-dropdown-menu .nav-submenu-links a {
    padding-left: 1rem;
}
.nav-submenu-group.active {
    background: #fff7ed;
    border-color: rgba(234, 88, 12, .22);
}
.nav-submenu-group.active .nav-submenu-label {
    color: #b45309;
}
.chapter-card .chapter-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: .75rem;
}
.chapter-brandline {
    min-width: 0;
}
.chapter-brandline h2 {
    overflow-wrap: break-word;
    word-break: normal;
}
.chapter-card .status {
    justify-self: end;
    max-width: 10.8rem;
    white-space: normal;
    text-align: center;
    justify-content: center;
    line-height: 1.18;
    padding: .42rem .68rem;
}
@media (max-width: 1020px) {
    .site-nav .nav-dropdown-menu {
        position: static;
        min-width: 0;
        width: 100%;
        margin: .2rem 0 .45rem;
        box-shadow: none;
        background: rgba(255,255,255,.05);
        border-color: rgba(255,255,255,.1);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        display: none;
    }
    .nav-dropdown.open .nav-dropdown-menu,
    .nav-dropdown:focus-within .nav-dropdown-menu {
        display: grid;
    }
    .site-nav > a,
    .nav-parent {
        width: 100%;
        justify-content: space-between;
    }
    .site-nav .nav-dropdown-menu a {
        color: #e5ecf5;
        white-space: normal;
    }
    .site-nav .nav-dropdown-menu a:hover,
    .site-nav .nav-dropdown-menu a.active {
        background: rgba(255,255,255,.09);
        color: #ffffff;
    }
}
@media (max-width: 680px) {
    .chapter-card .chapter-top {
        grid-template-columns: 1fr;
    }
    .chapter-card .status {
        justify-self: start;
        max-width: 100%;
    }
}
/* Dynamic page banners managed from Back Panel */
.page-hero.dynamic-banner {
    position: relative;
    isolation: isolate;
    min-height: clamp(330px, 42vw, 520px);
    display: flex;
    flex-direction: column;
    justify-content: end;
    overflow: hidden;
    color: #fff;
    background: #111418;
}
.page-hero.dynamic-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: var(--banner-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: var(--banner-opacity, .35);
    filter: saturate(1.05) contrast(1.04);
}
.page-hero.dynamic-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(7, 10, 14, .9), rgba(7, 10, 14, .62) 46%, rgba(7, 10, 14, .28)),
        linear-gradient(0deg, rgba(7, 10, 14, .88), rgba(7, 10, 14, .08) 58%);
}
.page-hero.dynamic-banner .eyebrow,
.page-hero.dynamic-banner h1 {
    position: relative;
    z-index: 1;
}
.page-hero.dynamic-banner h1 {
    max-width: min(980px, 92vw);
    text-shadow: 0 14px 34px rgba(0,0,0,.35);
}
.admin-fieldset {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 1rem;
    margin: 0 0 1rem;
    background: #fbfcfd;
}
.admin-fieldset legend {
    padding: 0 .35rem;
    color: #111827;
    font-weight: 900;
}
.banner-preview {
    width: 100%;
    max-height: 210px;
    object-fit: cover;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(15,23,42,.12);
}
.admin-form input[type="range"] {
    padding: 0;
    accent-color: var(--red);
}
@media (max-width: 680px) {
    .page-hero.dynamic-banner {
        min-height: 300px;
        padding-top: 3.5rem;
    }
}
/* Front End six-color premium theme: white, pink, army green, orange, navy, purple */
.front-body {
    --front-white: #fffdf9;
    --front-paper: #fff8f5;
    --front-pink: #ef5f7a;
    --front-pink-soft: rgba(239, 95, 122, .12);
    --front-army: #566b3a;
    --front-army-soft: rgba(86, 107, 58, .13);
    --front-orange: #f28a2e;
    --front-orange-soft: rgba(242, 138, 46, .13);
    --front-navy: #17243f;
    --front-navy-2: #20365f;
    --front-navy-soft: rgba(23, 36, 63, .12);
    --front-purple: #6a3fb0;
    --front-purple-soft: rgba(106, 63, 176, .12);
    --front-line: rgba(23, 36, 63, .12);
    --front-shadow: 0 18px 46px rgba(23, 36, 63, .11);
    color: #17243f;
    background:
        radial-gradient(circle at 12% 12%, rgba(239, 95, 122, .09), transparent 28%),
        radial-gradient(circle at 88% 8%, rgba(106, 63, 176, .09), transparent 30%),
        radial-gradient(circle at 76% 74%, rgba(242, 138, 46, .08), transparent 30%),
        linear-gradient(180deg, #fffdf9 0%, #fff7f1 42%, #f7faf3 100%);
}
.front-body .site-header {
    background: linear-gradient(125deg, rgba(23, 36, 63, .96), rgba(38, 50, 83, .94) 48%, rgba(86, 107, 58, .88));
    border-bottom: 1px solid rgba(255,255,255,.13);
    box-shadow: 0 18px 40px rgba(23, 36, 63, .16);
}
.front-body .brand img {
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 50%;
    padding: .12rem;
    box-shadow: 0 10px 24px rgba(0,0,0,.14);
}
.front-body .site-nav > a,
.front-body .nav-parent {
    color: rgba(255,255,255,.84);
    font-weight: 820;
}
.front-body .site-nav > a:hover,
.front-body .site-nav > a.active,
.front-body .nav-dropdown:hover > .nav-parent,
.front-body .nav-dropdown:focus-within > .nav-parent,
.front-body .nav-dropdown.active > .nav-parent,
.front-body .nav-dropdown.open > .nav-parent {
    background: rgba(255,255,255,.12);
    color: #ffffff;
    box-shadow: inset 0 -2px 0 rgba(242, 138, 46, .75);
}
.front-body .nav-dropdown-menu {
    background: rgba(255,253,249,.98);
    border: 1px solid rgba(23, 36, 63, .1);
    box-shadow: 0 24px 54px rgba(23, 36, 63, .18);
}
.front-body .site-nav .nav-dropdown-menu a {
    color: var(--front-navy);
}
.front-body .site-nav .nav-dropdown-menu a:hover,
.front-body .site-nav .nav-dropdown-menu a.active {
    background: linear-gradient(90deg, var(--front-pink-soft), rgba(242,138,46,.08));
    color: #8f2840;
}
.front-body .language-switcher {
    border-color: rgba(255,255,255,.24);
    background: rgba(255,255,255,.08);
}
.front-body .language-switcher a.active {
    background: linear-gradient(135deg, var(--front-pink), var(--front-purple));
}
.front-body .breaking-bar {
    background:
        linear-gradient(90deg, rgba(255,255,255,.95), rgba(255,247,240,.94)),
        linear-gradient(90deg, var(--front-pink-soft), var(--front-orange-soft), var(--front-purple-soft));
    border-color: rgba(242, 138, 46, .16);
}
.front-body .breaking-bar strong {
    color: #a22a42;
    border-color: rgba(239, 95, 122, .2);
    background: rgba(255,255,255,.82);
}
.front-body .breaking-marquee a {
    color: var(--front-navy);
}
.front-body .breaking-marquee a::after {
    background: linear-gradient(135deg, var(--front-orange), var(--front-purple));
}
.front-body .hero-section {
    color: var(--front-navy);
    background:
        radial-gradient(circle at 15% 12%, rgba(239, 95, 122, .14), transparent 25%),
        radial-gradient(circle at 82% 10%, rgba(106, 63, 176, .12), transparent 28%),
        radial-gradient(circle at 58% 86%, rgba(242, 138, 46, .13), transparent 30%),
        linear-gradient(122deg, rgba(255,253,249,.98), rgba(248,253,244,.93));
}
.front-body .hero-mural {
    opacity: .18;
    filter: saturate(.92);
}
.front-body .hero-content {
    background: rgba(255,255,255,.7);
    border-color: rgba(255,255,255,.86);
    border-left-color: rgba(239, 95, 122, .82);
    box-shadow: 0 28px 68px rgba(23, 36, 63, .12);
}
.front-body .hero-section .eyebrow,
.front-body .eyebrow {
    color: #a4511b;
}
.front-body .hero-content h1,
.front-body .section h2,
.front-body .page-hero h1,
.front-body .article-hero h1 {
    color: var(--front-navy);
}
.front-body .hero-copy,
.front-body .section > p,
.front-body .split-section > div > p,
.front-body .chapter-band p,
.front-body .contact-info p,
.front-body .prose {
    color: rgba(23, 36, 63, .78);
}
.front-body .primary-button {
    background: linear-gradient(135deg, var(--front-pink), var(--front-purple));
    color: #fff;
    box-shadow: 0 16px 34px rgba(106, 63, 176, .22);
}
.front-body .primary-button:hover {
    background: linear-gradient(135deg, #f06d84, #7448bd);
}
.front-body .secondary-button,
.front-body .ghost-button,
.front-body .pill-link,
.front-body .action-cell a,
.front-body .action-cell button {
    background: rgba(255,255,255,.72);
    border-color: var(--front-line);
    color: var(--front-navy);
}
.front-body .hero-section .secondary-button {
    color: var(--front-navy);
    border-color: rgba(23, 36, 63, .16);
    background: rgba(255,255,255,.66);
}
.front-body .feature-grid article,
.front-body .news-card,
.front-body .achievement-card,
.front-body .chapter-card,
.front-body .article-row,
.front-body .side-panel,
.front-body .form-card,
.front-body .contact-info,
.front-body .detail-panel,
.front-body .embedded-chat,
.front-body .hero-media-card,
.front-body .hero-panel {
    background: rgba(255,255,255,.82);
    border: 1px solid var(--front-line);
    box-shadow: var(--front-shadow);
    backdrop-filter: blur(8px);
}
.front-body .news-card,
.front-body .article-row,
.front-body .achievement-card,
.front-body .chapter-card {
    position: relative;
}
.front-body .news-card::before,
.front-body .article-row::before,
.front-body .achievement-card::before,
.front-body .chapter-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--front-pink), var(--front-orange), var(--front-army), var(--front-navy), var(--front-purple));
    opacity: .78;
}
.front-body .news-card img,
.front-body .article-row img,
.front-body .achievement-card img,
.front-body .article-main-image,
.front-body .chapter-logo,
.front-body .chapter-detail-logo,
.front-body .chapter-hero-logo {
    background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(242,138,46,.08), rgba(86,107,58,.08));
    border-color: rgba(23,36,63,.1);
}
.front-body .news-card span,
.front-body .article-row span,
.front-body .achievement-card span {
    color: #7a3caf;
}
.front-body .news-card h3 a,
.front-body .article-row h2 a,
.front-body .chapter-card a,
.front-body .mini-link,
.front-body .prose a {
    color: var(--front-navy);
}
.front-body .chapter-card a,
.front-body .section-head a,
.front-body .mini-link:hover,
.front-body .prose a {
    color: #7d3fa8;
}
.front-body .filter-bar input,
.front-body .filter-bar select,
.front-body .mini-search input,
.front-body .form-card input,
.front-body .form-card textarea,
.front-body .chat-panel input,
.front-body .embedded-chat input {
    background: rgba(255,255,255,.82);
    border-color: rgba(23, 36, 63, .14);
    color: var(--front-navy);
}
.front-body .filter-bar button,
.front-body .chat-panel button,
.front-body .embedded-chat button {
    background: linear-gradient(135deg, var(--front-navy), var(--front-purple));
    color: #fff;
}
.front-body .status.success {
    background: rgba(86, 107, 58, .14);
    color: #405425;
}
.front-body .status.warning {
    background: rgba(242, 138, 46, .16);
    color: #99500e;
}
.front-body .status.danger {
    background: rgba(239, 95, 122, .15);
    color: #9a2940;
}
.front-body .page-hero.dynamic-banner,
.front-body .page-hero,
.front-body .article-hero {
    background: linear-gradient(135deg, var(--front-navy), #26325b 52%, #4b356e);
}
.front-body .page-hero.dynamic-banner::after {
    background:
        linear-gradient(90deg, rgba(23,36,63,.88), rgba(86,107,58,.45) 45%, rgba(106,63,176,.34)),
        linear-gradient(0deg, rgba(23,36,63,.76), rgba(239,95,122,.08) 54%, rgba(242,138,46,.08));
}
.front-body .page-hero.dynamic-banner h1,
.front-body .page-hero.dynamic-banner .eyebrow,
.front-body .article-hero h1,
.front-body .article-hero .eyebrow {
    color: #ffffff;
}
.front-body .chapter-band {
    background:
        linear-gradient(120deg, rgba(23,36,63,.96), rgba(86,107,58,.78), rgba(106,63,176,.86));
    box-shadow: var(--front-shadow);
}
.front-body .chat-toggle {
    background: linear-gradient(135deg, var(--front-pink), var(--front-purple));
    box-shadow: 0 18px 42px rgba(106,63,176,.28);
}
.front-body .chat-head,
.front-body .site-footer {
    background: linear-gradient(125deg, var(--front-navy), #26325b 55%, #503579);
}
.front-body .footer-links a {
    color: rgba(255,255,255,.86);
}
.front-body .prose blockquote {
    background: linear-gradient(90deg, var(--front-pink-soft), rgba(255,255,255,.72));
    border-left-color: var(--front-orange);
    color: var(--front-navy);
}
.front-body .role-badge,
.front-body .status {
    border: 1px solid rgba(255,255,255,.42);
}
@media (max-width: 1020px) {
    .front-body .site-nav {
        background: linear-gradient(145deg, rgba(23,36,63,.98), rgba(65,53,102,.97));
    }
    .front-body .site-nav .nav-dropdown-menu {
        background: rgba(255,255,255,.07);
    }
}
@media (max-width: 680px) {
    .front-body .hero-section,
    .front-body .page-hero.dynamic-banner {
        background-size: cover;
    }
}
/* Elegant white mural layer for the front website menu */
.front-body .site-header {
    position: sticky;
    isolation: isolate;
    overflow: hidden;
    background:
        linear-gradient(112deg, rgba(23,36,63,.98) 0%, rgba(35,48,84,.96) 36%, rgba(86,107,58,.9) 74%, rgba(106,63,176,.82) 100%);
}
.front-body .site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image:
        linear-gradient(90deg, rgba(255,255,255,.11) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,.08) 1px, transparent 1px),
        radial-gradient(circle at 16px 16px, rgba(255,255,255,.18) 0 2px, transparent 2.5px),
        radial-gradient(circle at 44px 34px, rgba(255,255,255,.12) 0 2px, transparent 2.5px);
    background-size: 76px 76px, 76px 76px, 76px 76px, 76px 76px;
    opacity: .24;
    mask-image: linear-gradient(90deg, rgba(0,0,0,.92), rgba(0,0,0,.74) 52%, rgba(0,0,0,.52));
}
.front-body .site-header::after {
    content: "";
    position: absolute;
    inset: -60% -12% -80% 22%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 18% 48%, rgba(255,255,255,.32), transparent 34%),
        radial-gradient(ellipse at 52% 44%, rgba(242,138,46,.18), transparent 30%),
        radial-gradient(ellipse at 80% 52%, rgba(239,95,122,.14), transparent 32%);
    transform: rotate(-6deg);
    opacity: .68;
}
.front-body .site-header > * {
    position: relative;
    z-index: 1;
}
.front-body .brand,
.front-body .site-nav,
.front-body .language-switcher {
    backdrop-filter: none;
}
.front-body .site-nav > a,
.front-body .nav-parent {
    position: relative;
    overflow: hidden;
}
.front-body .site-nav > a::before,
.front-body .nav-parent::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.05)),
        radial-gradient(circle at 22% 12%, rgba(255,255,255,.26), transparent 28%);
    opacity: 0;
    transition: opacity .18s ease;
}
.front-body .site-nav > a:hover::before,
.front-body .site-nav > a.active::before,
.front-body .nav-dropdown:hover > .nav-parent::before,
.front-body .nav-dropdown:focus-within > .nav-parent::before,
.front-body .nav-dropdown.active > .nav-parent::before,
.front-body .nav-dropdown.open > .nav-parent::before {
    opacity: 1;
}
.front-body .site-nav > a:hover,
.front-body .site-nav > a.active,
.front-body .nav-dropdown:hover > .nav-parent,
.front-body .nav-dropdown:focus-within > .nav-parent,
.front-body .nav-dropdown.active > .nav-parent,
.front-body .nav-dropdown.open > .nav-parent {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.09);
    box-shadow: inset 0 -2px 0 rgba(242,138,46,.72), 0 12px 26px rgba(0,0,0,.08);
}
.front-body .language-switcher {
    background: rgba(255,255,255,.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}
@media (max-width: 1020px) {
    .front-body .site-header::before {
        opacity: .18;
        background-size: 64px 64px, 64px 64px, 64px 64px, 64px 64px;
    }
    .front-body .site-nav {
        background:
            linear-gradient(145deg, rgba(23,36,63,.97), rgba(65,53,102,.94)),
            radial-gradient(circle at 15% 10%, rgba(255,255,255,.15), transparent 28%);
        overflow: hidden;
    }
}
/* Tighten Home hero spacing so video appears higher after Breaking News */
.front-body .hero-section {
    min-height: auto;
    align-items: start;
    padding-top: clamp(1rem, 2.2vw, 2rem);
    padding-bottom: clamp(2rem, 4vw, 3rem);
}
.front-body .hero-content {
    align-self: start;
}
.front-body .hero-media-card {
    align-self: start;
    margin-top: clamp(.25rem, 1vw, .75rem);
}
.front-body .hero-panel {
    align-self: start;
}
@media (max-width: 1020px) {
    .front-body .hero-section {
        padding-top: 1rem;
    }
}
/* Home hero: uploaded video as 50% opacity background with Breaking News overlay */
.front-body.home-page .breaking-bar {
    position: absolute;
    left: clamp(1rem, 3vw, 3.5rem);
    right: clamp(1rem, 3vw, 3.5rem);
    z-index: 46;
    margin-top: .85rem;
    min-height: 46px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 8px;
    box-shadow: 0 18px 44px rgba(0,0,0,.14);
    backdrop-filter: blur(14px);
}
.front-body.home-page .breaking-bar strong {
    color: #ffffff;
    background: linear-gradient(135deg, rgba(239,95,122,.88), rgba(106,63,176,.8));
    border-color: rgba(255,255,255,.18);
    box-shadow: 0 10px 24px rgba(106,63,176,.18);
}
.front-body.home-page .breaking-track::before {
    background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,0));
}
.front-body.home-page .breaking-track::after {
    background: linear-gradient(270deg, rgba(255,255,255,.08), rgba(255,255,255,0));
}
.front-body.home-page .breaking-marquee a {
    color: #ffffff;
    text-shadow: 0 8px 20px rgba(0,0,0,.28);
}
.front-body.home-page .breaking-clock {
    border-color: rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .82);
    text-shadow: 0 8px 18px rgba(0,0,0,.24);
}
.front-body .home-video-hero {
    min-height: calc(100vh - 76px);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    padding: clamp(8rem, 13vw, 12rem) clamp(1.2rem, 9vw, 11rem) clamp(2.4rem, 5vw, 4rem);
    color: #ffffff;
    background:
        linear-gradient(120deg, rgba(23,36,63,.82), rgba(86,107,58,.48), rgba(106,63,176,.54)),
        var(--home-hero-poster) center / cover no-repeat;
    overflow: hidden;
}
.front-body .home-video-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .5;
    filter: saturate(1.05) contrast(1.04);
}
.front-body .home-video-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(9,18,26,.86), rgba(23,36,63,.62) 42%, rgba(86,107,58,.38) 68%, rgba(106,63,176,.36)),
        linear-gradient(0deg, rgba(9,18,26,.64), rgba(9,18,26,.16) 56%, rgba(9,18,26,.56));
}
.front-body .home-hero-content {
    position: relative;
    z-index: 2;
    max-width: 930px;
    padding-top: clamp(2rem, 4vw, 4rem);
}

.front-body .home-login-welcome {
    position: relative;
    z-index: 3;
    width: min(560px, 100%);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin: clamp(.6rem, 1.4vw, 1.15rem) 0 clamp(1rem, 2vw, 1.6rem);
    padding: clamp(1rem, 1.8vw, 1.3rem);
    border: 1px solid rgba(255,255,255,.18);
    border-left: 5px solid rgba(239,95,122,.9);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(15,23,42,.62), rgba(23,36,63,.42)),
        linear-gradient(135deg, rgba(239,95,122,.16), rgba(106,63,176,.18));
    box-shadow: 0 18px 44px rgba(0,0,0,.22);
    backdrop-filter: blur(14px);
}

.front-body .home-login-welcome p {
    margin: 0 0 .45rem;
    color: #fff;
    font-family: var(--font-admin);
    font-size: clamp(1rem, 1.3vw, 1.2rem);
    font-weight: 950;
    letter-spacing: .03em;
}

.front-body .home-login-welcome span {
    display: block;
    color: rgba(255,255,255,.86);
    font-size: .9rem;
    font-weight: 750;
    line-height: 1.55;
}

.front-body .home-login-welcome a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: .55rem .9rem;
    border: 1px solid rgba(255,255,255,.26);
    border-radius: 999px;
    background: linear-gradient(135deg, #b3262d, #8b2fb8);
    color: #fff;
    font-size: .82rem;
    font-weight: 950;
    text-decoration: none;
    text-transform: uppercase;
    box-shadow: 0 14px 30px rgba(0,0,0,.18);
}

.front-body .home-login-welcome a:hover {
    background: linear-gradient(135deg, #c62d36, #9b3eca);
}
.front-body .home-hero-content .eyebrow {
    color: #ffffff;
    font-size: .82rem;
    letter-spacing: .14em;
    text-shadow: 0 10px 24px rgba(0,0,0,.24);
}
.front-body .home-hero-content h1 {
    max-width: 960px;
    margin: 0;
    color: #ffffff;
    font-family: var(--font-admin);
    font-size: clamp(2.25rem, 5vw, 4.55rem);
    font-weight: 950;
    line-height: 1.04;
    letter-spacing: .01em;
    text-transform: uppercase;
    text-shadow: 0 16px 38px rgba(0,0,0,.32);
}
.front-body .home-hero-content .hero-copy {
    max-width: 780px;
    color: rgba(255,255,255,.94);
    font-size: clamp(1rem, 1.35vw, 1.2rem);
    line-height: 1.72;
    text-shadow: 0 10px 24px rgba(0,0,0,.22);
}
.front-body .home-hero-content .primary-button {
    min-width: 168px;
    background: linear-gradient(135deg, #b3262d, #d54c68);
    border-radius: 999px;
    box-shadow: 0 18px 36px rgba(179,38,45,.28);
    text-transform: uppercase;
}
.front-body .home-hero-stats {
    position: relative;
    z-index: 2;
    width: min(980px, 100%);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: clamp(3rem, 8vw, 6rem);
}
.front-body .home-hero-stats div {
    padding: 1rem;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(179,38,45,.72), rgba(239,95,122,.58));
    box-shadow: 0 16px 36px rgba(0,0,0,.15);
    backdrop-filter: blur(10px);
}
.front-body .home-hero-stats strong,
.front-body .home-hero-stats span {
    display: block;
    color: #fff;
}
.front-body .home-hero-stats strong {
    font-size: 2rem;
    line-height: 1;
}
.front-body .home-hero-stats span {
    margin-top: .25rem;
    font-size: .86rem;
    font-weight: 850;
    opacity: .92;
}
@media (max-width: 1020px) {
    .front-body.home-page .breaking-bar {
        left: 1rem;
        right: 1rem;
    }
    .front-body .home-video-hero {
        min-height: auto;
        padding-top: 7.5rem;
    }
}
@media (max-width: 680px) {
    .front-body.home-page .breaking-bar {
        margin-top: .55rem;
    }
    .front-body .home-video-hero {
        padding: 8.5rem 1rem 2.5rem;
    }
    .front-body .home-login-welcome {
        align-items: flex-start;
        flex-direction: column;
        margin-top: .25rem;
    }
    .front-body .home-hero-stats {
        grid-template-columns: 1fr;
        margin-top: 2rem;
    }
    .front-body .home-hero-content h1 {
        font-size: clamp(2rem, 10vw, 3rem);
    }
}
/* Home profile red service cards */
.front-body .feature-grid.compact article {
    position: relative;
    overflow: hidden;
    min-height: 168px;
    display: grid;
    align-content: center;
    gap: .36rem;
    padding: 1.35rem 1.25rem 1.35rem 6.1rem;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, .18);
    background:
        linear-gradient(135deg, rgba(178, 34, 43, .94), rgba(197, 49, 58, .88)),
        url('service-item-bg.jpg') center / cover no-repeat;
    box-shadow: 0 24px 54px rgba(137, 28, 37, .24);
}

.front-body .feature-grid.compact article::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 88% 12%, rgba(255, 190, 61, .24), transparent 28%),
        linear-gradient(145deg, rgba(255, 255, 255, .16), transparent 42%);
    opacity: .72;
    pointer-events: none;
}

.front-body .feature-grid.compact article::after {
    content: "";
    position: absolute;
    left: 1.2rem;
    top: 50%;
    width: 68px;
    height: 68px;
    transform: translateY(-50%);
    border-radius: 999px;
    background: rgba(255, 176, 34, .18) var(--service-icon) center / 42px 42px no-repeat;
    border: 1px solid rgba(255, 218, 143, .38);
    box-shadow: inset 0 0 0 8px rgba(255, 255, 255, .06), 0 16px 28px rgba(72, 9, 18, .2);
}

.front-body .feature-grid.compact article:nth-child(1) { --service-icon: url('service-icon-01.png'); }
.front-body .feature-grid.compact article:nth-child(2) { --service-icon: url('service-icon-02.png'); }
.front-body .feature-grid.compact article:nth-child(3) { --service-icon: url('service-icon-03.png'); }
.front-body .feature-grid.compact article:nth-child(4) { --service-icon: url('service-icon-01.png'); }

.front-body .feature-grid.compact article strong,
.front-body .feature-grid.compact article span {
    position: relative;
    z-index: 1;
}

.front-body .feature-grid.compact article strong {
    color: #ffffff;
    font-size: 1.08rem;
    line-height: 1.22;
    letter-spacing: 0;
}

.front-body .feature-grid.compact article span {
    color: rgba(255, 255, 255, .88);
    font-size: .98rem;
    line-height: 1.55;
}

@media (max-width: 680px) {
    .front-body .feature-grid.compact article {
        min-height: 146px;
        padding: 1.15rem 1rem 1.15rem 5.3rem;
    }

    .front-body .feature-grid.compact article::after {
        left: 1rem;
        width: 58px;
        height: 58px;
        background-size: 36px 36px;
    }
}

/* Home profile card readability refinement */
.front-body.home-page .profile-split {
    grid-template-columns: minmax(0, 1fr) minmax(560px, 35vw);
    align-items: center;
    gap: clamp(2rem, 4vw, 4.5rem);
}

.front-body.home-page .profile-split .feature-grid.compact {
    width: 100%;
    grid-template-columns: repeat(2, minmax(250px, 1fr));
    gap: 1.05rem;
}

.front-body.home-page .profile-split .feature-grid.compact article {
    min-height: 188px;
    padding: 1.35rem 1.18rem 1.35rem 5.45rem;
}

.front-body.home-page .profile-split .feature-grid.compact article::after {
    left: 1.05rem;
    width: 58px;
    height: 58px;
    background-size: 35px 35px;
}

.front-body.home-page .profile-split .feature-grid.compact article strong {
    font-size: .98rem;
    line-height: 1.22;
    max-width: 100%;
    overflow-wrap: break-word;
}

.front-body.home-page .profile-split .feature-grid.compact article span {
    font-size: .88rem;
    line-height: 1.45;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
}

@media (max-width: 1180px) {
    .front-body.home-page .profile-split {
        grid-template-columns: 1fr;
    }

    .front-body.home-page .profile-split .feature-grid.compact {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
    }
}

@media (max-width: 680px) {
    .front-body.home-page .profile-split .feature-grid.compact {
        grid-template-columns: 1fr;
    }

    .front-body.home-page .profile-split .feature-grid.compact article {
        min-height: 132px;
        padding: 1.05rem 1rem 1.05rem 4.9rem;
    }
}

/* Home profile chairman speech visual */
.front-body.home-page .profile-with-speakers {
    width: min(1500px, calc(100% - 3rem));
    grid-template-columns: minmax(0, 1fr) minmax(560px, .82fr);
}

.front-body.home-page .profile-message-card {
    position: relative;
    min-height: 640px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, .48fr);
    align-items: end;
    gap: clamp(1rem, 2vw, 2rem);
    padding: clamp(1.5rem, 3vw, 2.8rem);
    overflow: hidden;
    isolation: isolate;
    border-radius: 18px;
    background:
        radial-gradient(circle at 14% 18%, rgba(255, 96, 136, .16), transparent 34%),
        radial-gradient(circle at 88% 18%, rgba(255, 165, 48, .16), transparent 32%),
        linear-gradient(135deg, rgba(255,255,255,.9), rgba(255,247,245,.76));
    border: 1px solid rgba(179, 38, 45, .13);
    box-shadow: 0 26px 70px rgba(23, 36, 63, .08);
}

.front-body.home-page .profile-message-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,255,255,.46)),
        url('service-item-bg.jpg') center / 420px auto repeat;
    opacity: .32;
}

.front-body.home-page .profile-message-card::after {
    content: "";
    position: absolute;
    right: -80px;
    bottom: -120px;
    width: 420px;
    height: 420px;
    z-index: -1;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(179,38,45,.18), rgba(86,107,58,.08) 48%, transparent 70%);
}

.front-body.home-page .profile-speech {
    position: relative;
    z-index: 2;
    align-self: center;
    max-width: 660px;
    padding: clamp(1.35rem, 2.6vw, 2.35rem);
    border-radius: 16px;
    background: rgba(255,255,255,.84);
    border: 1px solid rgba(255,255,255,.72);
    border-left: 7px solid rgba(179,38,45,.76);
    box-shadow: 0 20px 46px rgba(23,36,63,.09);
    backdrop-filter: blur(8px);
}

.front-body.home-page .profile-speech::after {
    content: "";
    position: absolute;
    right: -24px;
    top: 48%;
    width: 0;
    height: 0;
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
    border-left: 24px solid rgba(255,255,255,.84);
    filter: drop-shadow(8px 8px 10px rgba(23,36,63,.08));
}

.front-body.home-page .profile-speech .eyebrow {
    color: #a45527;
}

.front-body.home-page .profile-speech h2 {
    color: #17243f;
    font-size: clamp(2.35rem, 4.2vw, 4.45rem);
    line-height: 1.05;
    max-width: 11ch;
}

.front-body.home-page .profile-speech p:not(.eyebrow) {
    color: rgba(23,36,63,.82);
    font-size: clamp(1rem, 1.35vw, 1.18rem);
    line-height: 1.72;
    max-width: 620px;
}

.front-body.home-page .profile-speakers-photo {
    position: relative;
    z-index: 1;
    width: min(34vw, 420px);
    max-width: 100%;
    align-self: end;
    justify-self: end;
    margin-bottom: -2.8rem;
    filter: drop-shadow(0 28px 42px rgba(23,36,63,.24));
}

@media (max-width: 1320px) {
    .front-body.home-page .profile-with-speakers {
        grid-template-columns: 1fr;
    }

    .front-body.home-page .profile-with-speakers .feature-grid.compact {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .front-body.home-page .profile-message-card {
        min-height: auto;
        grid-template-columns: 1fr;
        padding-bottom: 0;
    }

    .front-body.home-page .profile-speech {
        max-width: none;
    }

    .front-body.home-page .profile-speech::after {
        display: none;
    }

    .front-body.home-page .profile-speakers-photo {
        width: min(82vw, 360px);
        justify-self: center;
        margin: .5rem auto -1.5rem;
    }

    .front-body.home-page .profile-with-speakers .feature-grid.compact {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
    }
}

@media (max-width: 680px) {
    .front-body.home-page .profile-with-speakers {
        width: min(100% - 1.5rem, 1500px);
    }

    .front-body.home-page .profile-speech h2 {
        font-size: clamp(2rem, 12vw, 3rem);
        max-width: 12ch;
    }

    .front-body.home-page .profile-with-speakers .feature-grid.compact {
        grid-template-columns: 1fr;
    }
}

/* Chairman photo proportion refinement */
.front-body.home-page .profile-message-card {
    align-items: center;
    grid-template-columns: minmax(0, 1fr) minmax(560px, .58fr);
}

.front-body.home-page .profile-speakers-photo {
    width: min(42vw, 560px);
    align-self: center;
    justify-self: center;
    margin: -3.2rem auto -1.2rem;
    transform: translateY(-3%);
}

@media (max-width: 1320px) {
    .front-body.home-page .profile-speakers-photo {
        width: min(52vw, 560px);
        margin-top: -2rem;
    }
}

@media (max-width: 980px) {
    .front-body.home-page .profile-speakers-photo {
        width: min(86vw, 460px);
        margin: 0 auto -1.5rem;
        transform: translateY(0);
    }
}

@media (max-width: 680px) {
    .front-body.home-page .profile-speakers-photo {
        width: min(94vw, 390px);
        margin-bottom: -1rem;
    }
}

/* Bromo background for Pengkab/Kota CTA */
.front-body .chapter-band.bromo-chapter-band {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-height: 320px;
    padding: clamp(2.4rem, 5vw, 4.2rem) clamp(2rem, 4vw, 3.2rem);
    background: linear-gradient(120deg, rgba(255,255,255,.9), rgba(255,239,235,.78));
    border: 1px solid rgba(255,255,255,.78);
}

.front-body .chapter-band.bromo-chapter-band::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: url('pegunungan-bromo.jpg') center / cover no-repeat;
    opacity: .5;
}

.front-body .chapter-band.bromo-chapter-band::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(255,255,255,.82), rgba(255,255,255,.54) 46%, rgba(106,63,176,.42)),
        radial-gradient(circle at 84% 18%, rgba(255,120,160,.34), transparent 34%);
}

.front-body .chapter-band.bromo-chapter-band h2,
.front-body .chapter-band.bromo-chapter-band p,
.front-body .chapter-band.bromo-chapter-band .eyebrow,
.front-body .chapter-band.bromo-chapter-band a {
    position: relative;
    z-index: 1;
}

.front-body .chapter-band.bromo-chapter-band .eyebrow {
    color: #17243f;
    text-shadow: 0 1px 12px rgba(255,255,255,.55);
}

.front-body .chapter-band.bromo-chapter-band h2 {
    color: #17243f;
    text-shadow: 0 2px 18px rgba(255,255,255,.56);
}

.front-body .chapter-band.bromo-chapter-band p {
    color: rgba(23,36,63,.82);
    max-width: 820px;
}

.front-body .chapter-band.bromo-chapter-band .primary-button {
    border: 1px solid rgba(255,255,255,.32);
    box-shadow: 0 18px 38px rgba(106,63,176,.24);
}

/* Deklarasi Damai background for featured news CTA */
.front-body .chapter-band.declaration-news-band {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-height: 340px;
    padding: clamp(2.4rem, 5vw, 4.2rem) clamp(2rem, 4vw, 3.2rem);
    background: linear-gradient(120deg, rgba(23,36,63,.9), rgba(86,107,58,.66), rgba(106,63,176,.78));
    border: 1px solid rgba(255,255,255,.22);
}

.front-body .chapter-band.declaration-news-band::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: url('deklarasi-damai.jpg') center / cover no-repeat;
    opacity: .5;
}

.front-body .chapter-band.declaration-news-band::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(11,23,38,.84), rgba(23,36,63,.55) 46%, rgba(106,63,176,.52)),
        radial-gradient(circle at 88% 18%, rgba(255,120,160,.28), transparent 58%);
}

.front-body .chapter-band.declaration-news-band h2,
.front-body .chapter-band.declaration-news-band p,
.front-body .chapter-band.declaration-news-band .eyebrow,
.front-body .chapter-band.declaration-news-band a {
    position: relative;
    z-index: 1;
}

.front-body .chapter-band.declaration-news-band .eyebrow {
    color: rgba(255, 221, 138, .96);
    text-shadow: 0 2px 18px rgba(0,0,0,.34);
}

.front-body .chapter-band.declaration-news-band h2 {
    color: #ffffff;
    text-shadow: 0 3px 22px rgba(0,0,0,.36);
}

.front-body .chapter-band.declaration-news-band p {
    color: rgba(255,255,255,.9);
    max-width: 980px;
    text-shadow: 0 2px 14px rgba(0,0,0,.26);
}

.front-body .chapter-band.declaration-news-band .primary-button {
    border: 1px solid rgba(255,255,255,.28);
    box-shadow: 0 18px 38px rgba(106,63,176,.24);
}

/* Visible Bromo hero fix for Pengkab/Kota page */
.front-body .page-hero.dynamic-banner.pengkab-bromo-hero {
    background: #17243f;
}

.front-body .page-hero.dynamic-banner.pengkab-bromo-hero::before {
    z-index: 0;
    opacity: .5;
    background-position: center 46%;
    filter: saturate(1.12) contrast(1.06);
}

.front-body .page-hero.dynamic-banner.pengkab-bromo-hero::after {
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(23,36,63,.58), rgba(23,36,63,.30) 42%, rgba(106,63,176,.24)),
        linear-gradient(0deg, rgba(23,36,63,.52), rgba(23,36,63,.08) 55%, rgba(242,138,46,.05));
}

.front-body .page-hero.dynamic-banner.pengkab-bromo-hero .eyebrow,
.front-body .page-hero.dynamic-banner.pengkab-bromo-hero h1 {
    z-index: 2;
    color: #ffffff;
    text-shadow: 0 14px 34px rgba(0,0,0,.42);
}

.front-body .page-hero.dynamic-banner.pengkab-bromo-hero h1 {
    max-width: min(980px, 92vw);
}

/* Force visible Bromo direct background */
.front-body .page-hero.dynamic-banner.pengkab-bromo-hero {
    background-image:
        linear-gradient(90deg, rgba(23,36,63,.42), rgba(23,36,63,.10) 46%, rgba(106,63,176,.22)),
        linear-gradient(0deg, rgba(23,36,63,.50), rgba(23,36,63,.02) 58%, rgba(242,138,46,.04)),
        url('/web-asadjatim/public/assets/pegunungan-bromo.jpg') !important;
    background-size: cover, cover, cover !important;
    background-position: center, center, center 45% !important;
    background-repeat: no-repeat !important;
    background-color: #17243f !important;
}

.front-body .page-hero.dynamic-banner.pengkab-bromo-hero::before,
.front-body .page-hero.dynamic-banner.pengkab-bromo-hero::after {
    display: none !important;
}

.front-body .page-hero.dynamic-banner.pengkab-bromo-hero .eyebrow,
.front-body .page-hero.dynamic-banner.pengkab-bromo-hero h1 {
    position: relative;
    z-index: 1;
    color: #ffffff !important;
    text-shadow: 0 16px 36px rgba(0,0,0,.58);
}

/* Global dynamic banner uploaded photo visibility fix */
.front-body .page-hero.dynamic-banner {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-color: #17243f !important;
}

.front-body .page-hero.dynamic-banner::before {
    content: "";
    display: block !important;
    position: absolute;
    inset: 0;
    z-index: 0 !important;
    pointer-events: none;
    background-image: var(--banner-image) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    opacity: var(--banner-opacity, .5) !important;
    filter: saturate(1.12) contrast(1.06);
}

.front-body .page-hero.dynamic-banner::after {
    content: "";
    display: block !important;
    position: absolute;
    inset: 0;
    z-index: 1 !important;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(23,36,63,.54), rgba(23,36,63,.22) 44%, rgba(106,63,176,.20)),
        linear-gradient(0deg, rgba(23,36,63,.46), rgba(23,36,63,.08) 56%, rgba(242,138,46,.04)) !important;
}

.front-body .page-hero.dynamic-banner .eyebrow,
.front-body .page-hero.dynamic-banner h1 {
    position: relative;
    z-index: 2 !important;
    color: #ffffff !important;
    text-shadow: 0 16px 38px rgba(0,0,0,.56);
}

/* Real HTML layer for dynamic banner photos */
.front-body .page-hero.dynamic-banner {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #17243f !important;
}

.front-body .page-hero.dynamic-banner::before,
.front-body .page-hero.dynamic-banner::after {
    content: none !important;
    display: none !important;
}

.front-body .page-hero.dynamic-banner .dynamic-banner-photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    pointer-events: none;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: saturate(1.12) contrast(1.06);
}

.front-body .page-hero.dynamic-banner .dynamic-banner-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(23,36,63,.54), rgba(23,36,63,.20) 44%, rgba(106,63,176,.18)),
        linear-gradient(0deg, rgba(23,36,63,.46), rgba(23,36,63,.08) 56%, rgba(242,138,46,.04));
}

.front-body .page-hero.dynamic-banner .eyebrow,
.front-body .page-hero.dynamic-banner h1 {
    position: relative;
    z-index: 2 !important;
    color: #ffffff !important;
    text-shadow: 0 16px 38px rgba(0,0,0,.56);
}

/* Hard inline dynamic banner safety override */
.front-body .page-hero.dynamic-banner {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.front-body .page-hero.dynamic-banner .dynamic-banner-photo {
    opacity: var(--banner-opacity, .5) !important;
    mix-blend-mode: normal;
}

.front-body .page-hero.dynamic-banner .dynamic-banner-overlay {
    background: linear-gradient(90deg, rgba(23,36,63,.30), rgba(23,36,63,.08) 46%, rgba(106,63,176,.10)) !important;
}
/* Final polished dynamic page banner cards */
.front-body .page-hero.dynamic-banner.dynamic-banner-card,
.front-body .page-hero.dynamic-banner.dynamic-banner-card.pengkab-bromo-hero {
    position: relative !important;
    width: min(92vw, 1768px) !important;
    min-height: clamp(330px, 31vw, 430px) !important;
    margin: clamp(1.5rem, 3vw, 3rem) auto clamp(2rem, 4vw, 3.5rem) !important;
    padding: clamp(2.2rem, 5vw, 4.8rem) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    overflow: hidden !important;
    isolation: isolate !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, .82) !important;
    color: #17243f !important;
    background: #f8fafc !important;
    background-image: none !important;
    box-shadow: 0 26px 72px rgba(23, 36, 63, .12) !important;
}

.front-body .page-hero.dynamic-banner.dynamic-banner-card::before,
.front-body .page-hero.dynamic-banner.dynamic-banner-card::after,
.front-body .page-hero.dynamic-banner.dynamic-banner-card.pengkab-bromo-hero::before,
.front-body .page-hero.dynamic-banner.dynamic-banner-card.pengkab-bromo-hero::after {
    content: none !important;
    display: none !important;
}

.front-body .page-hero.dynamic-banner.dynamic-banner-card .dynamic-banner-bg {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    display: block !important;
    pointer-events: none !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    opacity: var(--banner-opacity, .5) !important;
    filter: saturate(1.04) contrast(1.01) !important;
    transform: scale(1.01) !important;
}

.front-body .page-hero.dynamic-banner.dynamic-banner-card .dynamic-banner-tint {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    display: block !important;
    pointer-events: none !important;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .68) 43%, rgba(238, 95, 125, .25) 72%, rgba(106, 63, 176, .34)),
        radial-gradient(circle at 14% 18%, rgba(255, 255, 255, .58), transparent 36%),
        radial-gradient(circle at 90% 20%, rgba(242, 138, 46, .18), transparent 32%) !important;
}

.front-body .page-hero.dynamic-banner.dynamic-banner-card .dynamic-banner-copy {
    position: relative !important;
    z-index: 2 !important;
    width: min(100%, 1120px) !important;
    max-width: 78% !important;
}

.front-body .page-hero.dynamic-banner.dynamic-banner-card .eyebrow {
    position: relative !important;
    z-index: 2 !important;
    margin: 0 0 .9rem !important;
    color: #17243f !important;
    font-family: var(--font-body) !important;
    font-size: clamp(.82rem, 1vw, .98rem) !important;
    font-weight: 900 !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
    text-shadow: 0 2px 18px rgba(255, 255, 255, .65) !important;
}

.front-body .page-hero.dynamic-banner.dynamic-banner-card h1 {
    position: relative !important;
    z-index: 2 !important;
    max-width: 1040px !important;
    margin: 0 !important;
    color: #17243f !important;
    font-family: var(--font-display) !important;
    font-size: clamp(2.6rem, 5.1vw, 5.35rem) !important;
    line-height: 1.04 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 2px 20px rgba(255, 255, 255, .72) !important;
    text-wrap: balance !important;
}

.front-body .page-hero.dynamic-banner.dynamic-banner-card .dynamic-banner-subtitle {
    position: relative !important;
    z-index: 2 !important;
    max-width: 900px !important;
    margin: 1.05rem 0 0 !important;
    color: rgba(23, 36, 63, .82) !important;
    font-size: clamp(1rem, 1.45vw, 1.22rem) !important;
    line-height: 1.65 !important;
    text-shadow: 0 2px 16px rgba(255, 255, 255, .6) !important;
}

.front-body .page-hero.dynamic-banner.dynamic-banner-card + .section {
    padding-top: clamp(1.5rem, 4vw, 3rem) !important;
}

@media (max-width: 980px) {
    .front-body .page-hero.dynamic-banner.dynamic-banner-card,
    .front-body .page-hero.dynamic-banner.dynamic-banner-card.pengkab-bromo-hero {
        width: min(94vw, 1768px) !important;
        min-height: 300px !important;
        padding: 2rem !important;
    }

    .front-body .page-hero.dynamic-banner.dynamic-banner-card .dynamic-banner-copy {
        max-width: 92% !important;
    }

    .front-body .page-hero.dynamic-banner.dynamic-banner-card h1 {
        font-size: clamp(2.2rem, 8vw, 4.2rem) !important;
    }
}

@media (max-width: 680px) {
    .front-body .page-hero.dynamic-banner.dynamic-banner-card,
    .front-body .page-hero.dynamic-banner.dynamic-banner-card.pengkab-bromo-hero {
        width: calc(100% - 1.25rem) !important;
        min-height: 260px !important;
        margin-top: 1rem !important;
        border-radius: 8px !important;
        padding: 1.35rem !important;
    }

    .front-body .page-hero.dynamic-banner.dynamic-banner-card .dynamic-banner-copy {
        max-width: 100% !important;
    }

    .front-body .page-hero.dynamic-banner.dynamic-banner-card .dynamic-banner-tint {
        background: linear-gradient(90deg, rgba(255,255,255,.9), rgba(255,255,255,.76), rgba(238,95,125,.24)) !important;
    }

    .front-body .page-hero.dynamic-banner.dynamic-banner-card h1 {
        font-size: clamp(2rem, 11vw, 3.1rem) !important;
    }
}
/* Dynamic banner photo visibility refinement */
.front-body .page-hero.dynamic-banner.dynamic-banner-card .dynamic-banner-bg {
    opacity: .50 !important;
}

.front-body .page-hero.dynamic-banner.dynamic-banner-card .dynamic-banner-tint {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .84) 0%, rgba(255, 255, 255, .70) 38%, rgba(255, 255, 255, .40) 62%, rgba(238, 95, 125, .18) 78%, rgba(106, 63, 176, .22) 100%),
        radial-gradient(circle at 12% 18%, rgba(255, 255, 255, .45), transparent 34%),
        radial-gradient(circle at 92% 20%, rgba(242, 138, 46, .16), transparent 34%) !important;
}

.front-body .page-hero.dynamic-banner.dynamic-banner-card .dynamic-banner-copy {
    max-width: min(980px, 74%) !important;
}
/* Dynamic banner image-element background layer */
.front-body .page-hero.dynamic-banner.dynamic-banner-card .dynamic-banner-bg-img {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
    pointer-events: none !important;
    opacity: .50 !important;
    filter: saturate(1.04) contrast(1.01) !important;
    transform: scale(1.01) !important;
}

.front-body .page-hero.dynamic-banner.dynamic-banner-card .dynamic-banner-bg {
    display: none !important;
}
/* Chapter status stacked labels */
.front-body .chapter-card .chapter-top {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: .9rem !important;
}

.front-body .status.stacked {
    display: inline-grid !important;
    grid-auto-rows: min-content !important;
    place-items: center !important;
    width: 7.05rem !important;
    min-width: 7.05rem !important;
    max-width: 7.05rem !important;
    min-height: 4.45rem !important;
    padding: .52rem .45rem !important;
    border-radius: 1.35rem !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.04 !important;
    font-size: .74rem !important;
    font-weight: 950 !important;
    letter-spacing: .07em !important;
    text-transform: none !important;
}

.front-body .status.stacked span {
    display: block !important;
    width: 100% !important;
}

.front-body .chapter-card .status.stacked {
    justify-self: end !important;
    align-self: start !important;
}

.front-body .chapter-card .status.warning.stacked {
    background: linear-gradient(135deg, rgba(255, 247, 231, .98), rgba(242, 138, 46, .18)) !important;
    color: #8b4b0a !important;
}

.front-body .chapter-card .status.danger.stacked {
    background: linear-gradient(135deg, rgba(255, 238, 242, .98), rgba(239, 95, 122, .18)) !important;
    color: #982940 !important;
}

.front-body .chapter-brandline h2 {
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
}

@media (max-width: 680px) {
    .front-body .chapter-card .chapter-top {
        grid-template-columns: 1fr !important;
    }

    .front-body .chapter-card .status.stacked {
        justify-self: start !important;
    }
}
/* Front footer beach banner and social channels */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.front-body .site-footer.footer-with-photo {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    min-height: 300px !important;
    display: grid !important;
    grid-template-columns: minmax(280px, 1fr) minmax(320px, auto) !important;
    align-items: end !important;
    gap: clamp(1.5rem, 4vw, 4rem) !important;
    padding: clamp(2.2rem, 5vw, 4.5rem) clamp(1.5rem, 5vw, 4rem) !important;
    color: #ffffff !important;
    background: #17243f !important;
    border-top: 1px solid rgba(255,255,255,.16) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12) !important;
}

.front-body .site-footer.footer-with-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: url('footer-atlet-pantai.jpg') center 42% / cover no-repeat;
    opacity: .50;
    filter: saturate(1.04) contrast(1.02);
}

.front-body .site-footer.footer-with-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(23,36,63,.94), rgba(23,36,63,.76) 40%, rgba(86,107,58,.48) 68%, rgba(106,63,176,.58)),
        radial-gradient(circle at 14% 80%, rgba(239,95,122,.18), transparent 34%),
        radial-gradient(circle at 82% 20%, rgba(242,138,46,.18), transparent 30%);
}

.front-body .footer-brand-block {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: start;
    gap: .52rem;
    max-width: 560px;
}

.front-body .footer-brand-block img {
    width: 76px;
    height: 76px;
    object-fit: contain;
    margin: 0 0 .35rem;
    filter: drop-shadow(0 12px 24px rgba(0,0,0,.26));
}

.front-body .footer-brand-block p {
    margin: 0;
    color: #ffffff;
    font-family: var(--font-display);
    font-size: clamp(1.55rem, 2.8vw, 2.35rem);
    line-height: 1.05;
    letter-spacing: .02em;
    text-shadow: 0 10px 28px rgba(0,0,0,.34);
}

.front-body .footer-brand-block small {
    color: rgba(255,255,255,.9);
    font-size: 1rem;
    line-height: 1.5;
    text-shadow: 0 8px 24px rgba(0,0,0,.34);
}

.front-body .footer-socials {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: .8rem;
}

.front-body .footer-social-link {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    color: #ffffff;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.22);
    box-shadow: 0 14px 28px rgba(0,0,0,.18);
    backdrop-filter: blur(10px);
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.front-body .footer-social-link svg {
    width: 21px;
    height: 21px;
    fill: currentColor;
}

.front-body .footer-social-link:hover {
    transform: translateY(-3px);
    background: linear-gradient(135deg, rgba(239,95,122,.92), rgba(106,63,176,.88));
    box-shadow: 0 18px 36px rgba(0,0,0,.24);
}

.front-body .footer-links {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .75rem 1.2rem;
    max-width: 760px;
}

.front-body .footer-links a {
    color: #ffffff !important;
    font-size: 1rem;
    font-weight: 850;
    text-shadow: 0 8px 22px rgba(0,0,0,.34);
}

.front-body .footer-links a:hover {
    color: #ffd28a !important;
}

@media (max-width: 900px) {
    .front-body .site-footer.footer-with-photo {
        grid-template-columns: 1fr !important;
        align-items: start !important;
    }

    .front-body .footer-links {
        justify-content: flex-start;
    }
}

@media (max-width: 560px) {
    .front-body .site-footer.footer-with-photo {
        min-height: 340px !important;
        padding: 2rem 1.1rem !important;
    }

    .front-body .footer-brand-block img {
        width: 64px;
        height: 64px;
    }

    .front-body .footer-social-link {
        width: 40px;
        height: 40px;
    }
}

/* Footer final alignment */
.front-body .site-footer.footer-with-photo {
    min-height: 360px !important;
    grid-template-columns: minmax(280px, 1fr) minmax(520px, auto) !important;
    grid-template-rows: auto 1fr auto !important;
    align-items: start !important;
    row-gap: clamp(1.5rem, 4vw, 3.2rem) !important;
    padding-top: clamp(2.4rem, 4.5vw, 4rem) !important;
    padding-bottom: clamp(1.35rem, 2.8vw, 2rem) !important;
}

.front-body .footer-brand-block {
    align-self: start !important;
}

.front-body .footer-links {
    align-self: start !important;
    justify-self: end !important;
    margin-top: .35rem;
    padding: .85rem 1rem;
    border-radius: 18px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 18px 42px rgba(0,0,0,.14);
    backdrop-filter: blur(12px);
}

.front-body .footer-links a {
    line-height: 1.25;
}

.front-body .footer-bottom-note {
    position: relative;
    z-index: 1;
    grid-column: 1 / -1;
    grid-row: 3;
    align-self: end;
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 1.25rem;
    width: 100%;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,.18);
    color: rgba(255,255,255,.9);
    text-shadow: 0 8px 24px rgba(0,0,0,.34);
}

.front-body .footer-org-lines,
.front-body .footer-credit-lines {
    display: grid;
    gap: .18rem;
}

.front-body .footer-org-lines strong {
    color: #ffffff;
    font-size: .98rem;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.front-body .footer-org-lines span,
.front-body .footer-credit-lines span {
    font-size: .92rem;
    line-height: 1.45;
}

.front-body .footer-credit-lines {
    text-align: right;
}

@media (max-width: 1100px) {
    .front-body .site-footer.footer-with-photo {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto 1fr auto !important;
    }

    .front-body .footer-links {
        justify-self: start !important;
    }
}

@media (max-width: 720px) {
    .front-body .footer-links {
        width: 100%;
        justify-content: flex-start;
    }

    .front-body .footer-bottom-note {
        flex-direction: column;
        align-items: flex-start;
    }

    .front-body .footer-credit-lines {
        text-align: left;
    }
}

/* Compact premium footer */
.front-body .site-footer.footer-with-photo {
    width: min(calc(100% - clamp(1.25rem, 6vw, 7rem)), 1680px) !important;
    min-height: 0 !important;
    margin: clamp(1.6rem, 3vw, 2.6rem) auto 0 !important;
    display: grid !important;
    grid-template-columns: minmax(280px, .95fr) minmax(420px, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    gap: .95rem clamp(1.25rem, 4vw, 3.5rem) !important;
    padding: clamp(1.25rem, 2.4vw, 1.9rem) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    border-bottom: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    box-shadow: 0 -18px 56px rgba(23,36,63,.14), inset 0 1px 0 rgba(255,255,255,.14) !important;
}

.front-body .site-footer.footer-with-photo::before {
    background-position: center 48%;
    opacity: .42;
}

.front-body .site-footer.footer-with-photo::after {
    background:
        linear-gradient(90deg, rgba(23,36,63,.92), rgba(23,36,63,.74) 42%, rgba(86,107,58,.46) 68%, rgba(106,63,176,.56)),
        radial-gradient(circle at 8% 40%, rgba(239,95,122,.16), transparent 30%),
        radial-gradient(circle at 86% 22%, rgba(242,138,46,.14), transparent 28%);
}

.front-body .footer-brand-block {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-areas:
        "logo title"
        "logo tagline"
        "social social";
    align-items: center;
    gap: .2rem .9rem;
    max-width: 560px;
}

.front-body .footer-brand-block img {
    grid-area: logo;
    width: 58px;
    height: 58px;
    margin: 0;
}

.front-body .footer-brand-block p {
    grid-area: title;
    font-size: clamp(1.15rem, 1.9vw, 1.55rem);
    line-height: 1.05;
}

.front-body .footer-brand-block small {
    grid-area: tagline;
    font-size: .88rem;
    line-height: 1.38;
}

.front-body .footer-socials {
    grid-area: social;
    margin-top: .55rem;
    gap: .45rem;
}

.front-body .footer-social-link {
    width: 36px;
    height: 36px;
    box-shadow: 0 10px 22px rgba(0,0,0,.16);
}

.front-body .footer-social-link svg {
    width: 18px;
    height: 18px;
}

.front-body .footer-links {
    justify-self: end !important;
    align-self: center !important;
    margin-top: 0 !important;
    max-width: none;
    gap: .45rem .55rem;
    padding: .55rem .65rem;
    border-radius: 999px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 16px 34px rgba(0,0,0,.12);
}

.front-body .footer-links a {
    padding: .42rem .62rem;
    border-radius: 999px;
    background: rgba(255,255,255,.07);
    font-size: .88rem;
    line-height: 1.1;
    white-space: nowrap;
}

.front-body .footer-bottom-note {
    grid-column: 1 / -1;
    margin-top: .1rem;
    padding-top: .78rem;
    align-items: center;
}

.front-body .footer-org-lines strong {
    font-size: .78rem;
    letter-spacing: .08em;
}

.front-body .footer-org-lines span,
.front-body .footer-credit-lines span {
    font-size: .8rem;
    line-height: 1.35;
}

@media (max-width: 980px) {
    .front-body .site-footer.footer-with-photo {
        grid-template-columns: 1fr !important;
        width: min(calc(100% - 1.5rem), 1680px) !important;
        border-radius: 20px 20px 0 0 !important;
    }

    .front-body .footer-links {
        justify-self: start !important;
        border-radius: 18px;
    }
}

@media (max-width: 560px) {
    .front-body .site-footer.footer-with-photo {
        padding: 1.15rem !important;
    }

    .front-body .footer-brand-block {
        grid-template-columns: 50px minmax(0, 1fr);
    }

    .front-body .footer-brand-block img {
        width: 50px;
        height: 50px;
    }

    .front-body .footer-links a {
        white-space: normal;
    }
}
/* Navigation dropdown stacking guard */
@media (min-width: 1021px) {
    .front-body .site-header {
        z-index: 1200 !important;
        overflow: visible !important;
    }

    .front-body .site-header::before,
    .front-body .site-header::after {
        inset: 0 !important;
        transform: none !important;
        border-radius: inherit !important;
    }

    .front-body .site-nav,
    .front-body .nav-dropdown {
        position: relative !important;
        overflow: visible !important;
        z-index: 1210 !important;
    }

    .front-body .site-nav .nav-dropdown-menu {
        z-index: 1300 !important;
    }

    .front-body.home-page .breaking-bar {
        z-index: 40 !important;
    }
}
/* Professional Warta detail reader and admin block editor */
.front-body .article-detail-hero {
    position: relative;
    min-height: 520px;
    padding: 190px clamp(28px, 7vw, 128px) 88px;
    overflow: hidden;
    background: #17243f;
    color: #fff;
    isolation: isolate;
}

.front-body .article-detail-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .46;
    filter: saturate(1.05) contrast(.95);
    z-index: -3;
}

.front-body .article-detail-hero-tint {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(90deg, rgba(21, 32, 55, .92) 0%, rgba(21, 32, 55, .72) 44%, rgba(118, 72, 166, .56) 100%),
        radial-gradient(circle at 84% 16%, rgba(243, 104, 63, .34), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(15, 24, 42, .56));
}

.front-body .article-detail-hero-copy {
    position: relative;
    z-index: 1;
    max-width: 980px;
}

.front-body .article-detail-hero-copy .eyebrow,
.front-body .article-suggestion-panel .eyebrow {
    margin: 0 0 18px;
    font-size: .84rem;
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.front-body .article-detail-hero-copy .eyebrow {
    color: #ffd187;
}

.front-body .article-detail-hero-copy h1 {
    max-width: 940px;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 6.2vw, 5.8rem);
    line-height: .94;
    font-weight: 700;
    letter-spacing: 0;
}

.front-body .article-detail-hero-copy > p:not(.eyebrow) {
    max-width: 780px;
    margin: 28px 0 0;
    color: rgba(255, 255, 255, .88);
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    line-height: 1.72;
}

.front-body .article-reader-shell {
    display: grid;
    grid-template-columns: minmax(240px, 318px) minmax(0, 780px);
    align-items: start;
    justify-content: center;
    gap: clamp(24px, 3vw, 42px);
    max-width: 1220px;
    margin: 0 auto;
    padding-top: clamp(42px, 6vw, 72px);
}

.front-body .article-suggestion-panel {
    position: sticky;
    top: 132px;
    padding: 24px;
    border: 1px solid rgba(25, 37, 61, .12);
    border-radius: 22px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 24px 70px rgba(21, 32, 55, .1);
    backdrop-filter: blur(16px);
}

.front-body .article-suggestion-panel .eyebrow {
    color: #9f2852;
}

.front-body .article-suggestion-panel h2 {
    margin: 0 0 18px;
    color: #17243f;
    font-size: 1.22rem;
    line-height: 1.25;
}

.front-body .article-suggestion-list {
    display: grid;
    gap: 14px;
}

.front-body .article-suggestion-item {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 13px;
    align-items: center;
    padding: 10px;
    border-radius: 16px;
    color: #17243f;
    text-decoration: none;
    background: rgba(255, 255, 255, .74);
    border: 1px solid rgba(25, 37, 61, .08);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.front-body .article-suggestion-item:hover {
    transform: translateY(-2px);
    border-color: rgba(166, 67, 127, .22);
    box-shadow: 0 16px 34px rgba(21, 32, 55, .12);
}

.front-body .article-suggestion-item img {
    width: 76px;
    height: 64px;
    object-fit: cover;
    border-radius: 12px;
}

.front-body .article-suggestion-item strong {
    display: block;
    font-size: .92rem;
    line-height: 1.35;
}

.front-body .article-suggestion-item small,
.front-body .article-suggestion-empty {
    color: rgba(23, 36, 63, .64);
    font-size: .82rem;
}

.front-body .article-reader-card {
    width: 100%;
    max-width: 780px;
    padding: clamp(22px, 4vw, 44px);
    border: 1px solid rgba(25, 37, 61, .1);
    border-radius: 24px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 30px 80px rgba(21, 32, 55, .1);
}

.front-body .article-meta-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 28px;
}

.front-body .article-meta-strip span {
    min-width: 0;
    padding: 14px 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(246, 145, 75, .13), rgba(151, 71, 174, .12));
    color: #17243f;
    font-size: .92rem;
    line-height: 1.35;
}

.front-body .article-meta-strip b {
    display: block;
    margin-bottom: 4px;
    color: rgba(23, 36, 63, .62);
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.front-body .article-meta-strip em {
    display: inline-block;
    margin-left: 4px;
    color: #9f2852;
    font-style: normal;
    font-weight: 800;
}

.front-body .article-featured-figure {
    margin: 0 0 30px;
}

.front-body .article-featured-figure img {
    display: block;
    width: 100%;
    max-height: 460px;
    object-fit: cover;
    border-radius: 22px;
    box-shadow: 0 22px 52px rgba(21, 32, 55, .14);
}

.front-body .article-featured-figure figcaption,
.front-body .article-gallery-strip figcaption {
    margin-top: 10px;
    color: rgba(23, 36, 63, .58);
    font-size: .88rem;
    line-height: 1.5;
}

.front-body .article-gallery-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 0 0 36px;
}

.front-body .article-gallery-strip figure {
    margin: 0;
}

.front-body .article-gallery-strip img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 18px;
    border: 1px solid rgba(25, 37, 61, .1);
}

.front-body .article-prose {
    max-width: 700px;
    margin: 0 auto;
    color: #263553;
}

.front-body .article-prose p {
    margin: 0 0 1.35em;
    font-size: 1.08rem;
    line-height: 1.92;
}

.front-body .article-prose-justify p,
.front-body .article-prose-justify li {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}

.front-body .article-prose h2,
.front-body .article-prose h3,
.front-body .article-prose h4 {
    margin: 1.7em 0 .65em;
    color: #17243f;
    line-height: 1.22;
}

.front-body .article-prose blockquote {
    margin: 2em 0;
    padding: 20px 24px;
    border-left: 5px solid #cf315e;
    border-radius: 14px;
    background: rgba(207, 49, 94, .08);
    color: #17243f;
    font-weight: 700;
}

.front-body .article-prose ul,
.front-body .article-prose ol {
    margin: 0 0 1.35em 1.25em;
    padding: 0;
    line-height: 1.82;
}

.admin-body .news-editor-layout.wide-left {
    grid-template-columns: minmax(0, 1.35fr) minmax(360px, .75fr);
}

.admin-body .admin-card-head.stacked {
    align-items: flex-start;
    gap: 16px;
}

.admin-body .admin-card-head.stacked p,
.admin-body .block-editor-head p {
    margin: 6px 0 0;
    color: #6b7280;
    font-size: .92rem;
    line-height: 1.55;
}

.admin-body .news-main-preview {
    width: 100%;
    max-height: 280px;
    object-fit: cover;
    border-radius: 18px;
}

.admin-body .block-editor-panel,
.admin-body .gallery-manager {
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 20px;
    background: #fbfdff;
}

.admin-body .block-editor-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.admin-body .block-editor-head h3 {
    margin: 0;
    color: #0f172a;
    font-size: 1.05rem;
}

.admin-body .block-editor-head > span,
.admin-body .admin-card-head.stacked > span {
    flex: 0 0 auto;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(180, 31, 45, .1);
    color: #9f1726;
    font-size: .8rem;
    font-weight: 900;
}

.admin-body .block-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 16px;
    background: #fff;
}

.admin-body .block-editor-toolbar button {
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid rgba(15, 23, 42, .12);
    border-radius: 12px;
    background: linear-gradient(180deg, #fff, #f6f8fb);
    color: #111827;
    font-weight: 800;
    cursor: pointer;
}

.admin-body .block-editor-toolbar button:hover {
    border-color: rgba(180, 31, 45, .35);
    color: #b41f2d;
}

.admin-body .block-editor-canvas {
    min-height: 360px;
    padding: 22px;
    border: 1px solid rgba(15, 23, 42, .14);
    border-radius: 18px;
    background: #fff;
    color: #17243f;
    outline: none;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.02rem;
    line-height: 1.82;
}

.admin-body .block-editor-canvas:focus {
    border-color: rgba(180, 31, 45, .48);
    box-shadow: 0 0 0 4px rgba(180, 31, 45, .08);
}

.admin-body .block-editor-canvas p {
    margin: 0 0 1.1em;
}

.admin-body .block-editor-canvas h2,
.admin-body .block-editor-canvas h3 {
    margin: 1.2em 0 .55em;
    font-family: var(--font-display);
    line-height: 1.2;
}

.admin-body .block-editor-output {
    display: none;
}

.admin-body .gallery-manager-grid {
    display: grid;
    gap: 14px;
}

.admin-body .gallery-manager-item {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 14px;
    padding: 12px;
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 16px;
    background: #fff;
}

.admin-body .gallery-manager-item img {
    width: 150px;
    height: 120px;
    object-fit: cover;
    border-radius: 12px;
}

.admin-body .gallery-manager-item > div {
    display: grid;
    gap: 10px;
}

.admin-body .check-line.danger {
    color: #b91c1c;
    font-weight: 800;
}

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

@media (max-width: 1100px) {
    .front-body .article-reader-shell {
        grid-template-columns: 1fr;
        max-width: 860px;
    }

    .front-body .article-suggestion-panel {
        position: static;
        order: 2;
    }

    .front-body .article-reader-card {
        order: 1;
        max-width: none;
    }

    .admin-body .news-editor-layout.wide-left {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .front-body .article-detail-hero {
        min-height: 440px;
        padding-top: 140px;
    }

    .front-body .article-meta-strip,
    .front-body .article-gallery-strip {
        grid-template-columns: 1fr;
    }

    .front-body .article-reader-card {
        padding: 20px;
        border-radius: 18px;
    }

    .front-body .article-prose p {
        font-size: 1rem;
        line-height: 1.82;
    }

    .admin-body .gallery-manager-item {
        grid-template-columns: 1fr;
    }

    .admin-body .gallery-manager-item img {
        width: 100%;
        height: 190px;
    }
}

/* Chapter directory insight charts */
.front-body .chapter-band.bromo-chapter-band {
    margin-bottom: clamp(1.2rem, 2vw, 2rem) !important;
}

.front-body .chapter-insight-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: clamp(2rem, 4vw, 3.4rem) !important;
    border: 1px solid rgba(23, 36, 63, .1);
    border-radius: 28px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,241,245,.82) 35%, rgba(240,247,240,.82) 64%, rgba(244,239,255,.84)),
        repeating-linear-gradient(135deg, rgba(23,36,63,.035) 0 1px, transparent 1px 18px);
    box-shadow: 0 28px 80px rgba(23, 36, 63, .12);
}

.front-body .chapter-insight-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(31,95,153,.08), transparent 36%, rgba(106,63,176,.08)),
        linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.22));
    pointer-events: none;
}

.front-body .chapter-insight-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: clamp(1rem, 3vw, 3rem);
    margin-bottom: clamp(1.4rem, 3vw, 2.4rem);
}

.front-body .chapter-insight-head .eyebrow {
    color: #9f2852;
}

.front-body .chapter-insight-head h2 {
    max-width: 900px;
    margin: .25rem 0 .65rem;
    color: #17243f;
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.2vw, 4.1rem);
    line-height: 1;
}

.front-body .chapter-insight-head p:not(.eyebrow) {
    max-width: 780px;
    margin: 0;
    color: rgba(23, 36, 63, .72);
    font-size: 1rem;
    line-height: 1.72;
}

.front-body .chapter-insight-head .ghost-button {
    color: #17243f;
    background: rgba(255,255,255,.7);
    border-color: rgba(23,36,63,.16);
    box-shadow: 0 14px 32px rgba(23,36,63,.08);
}

.front-body .chapter-insight-grid {
    display: grid;
    grid-template-columns: minmax(260px, .95fr) minmax(320px, 1.2fr) minmax(260px, .9fr);
    gap: clamp(1rem, 2vw, 1.4rem);
    align-items: stretch;
}

.front-body .chapter-chart-card {
    position: relative;
    overflow: hidden;
    min-height: 310px;
    padding: clamp(1.1rem, 2vw, 1.45rem);
    border: 1px solid rgba(23, 36, 63, .1);
    border-radius: 24px;
    background: rgba(255,255,255,.78);
    box-shadow: 0 20px 52px rgba(23,36,63,.1);
    backdrop-filter: blur(14px);
}

.front-body .chapter-chart-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg, #ef5f7a, #f28a2e, #566b3a, #1f5f99, #6a3fb0);
}

.front-body .chart-card-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.2rem;
}

.front-body .chart-card-title span {
    color: rgba(23, 36, 63, .64);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.front-body .chart-card-title strong {
    color: #17243f;
    font-size: 1.2rem;
    font-weight: 900;
}

.front-body .chapter-donut {
    position: relative;
    display: grid;
    place-items: center;
    width: min(220px, 70vw);
    aspect-ratio: 1;
    margin: .4rem auto 1.1rem;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 22px 44px rgba(23,36,63,.14);
}

.front-body .chapter-donut::after {
    content: "";
    position: absolute;
    inset: 18%;
    border-radius: 50%;
    background: linear-gradient(135deg, #fff, #f6f8fb);
    box-shadow: inset 0 0 0 1px rgba(23,36,63,.08);
}

.front-body .chapter-donut span {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    color: #17243f;
    font-weight: 900;
    line-height: 1.2;
    text-align: center;
}

.front-body .chapter-donut b {
    display: block;
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    line-height: .9;
}

.front-body .chapter-chart-legend {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
}

.front-body .chapter-chart-legend span {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    color: #263553;
    font-size: .88rem;
    font-weight: 800;
}

.front-body .chapter-chart-legend i {
    width: .72rem;
    height: .72rem;
    border-radius: 50%;
    flex: 0 0 auto;
}

.front-body .chapter-chart-legend b {
    margin-left: auto;
    color: #17243f;
}

.front-body .chapter-bars {
    display: grid;
    gap: 1rem;
}

.front-body .chapter-bar-row {
    display: grid;
    gap: .48rem;
}

.front-body .chapter-bar-row > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: #17243f;
    font-weight: 900;
}

.front-body .chapter-bar-row span {
    color: rgba(23,36,63,.74);
    font-size: .96rem;
}

.front-body .chapter-bar-row b {
    font-size: 1rem;
}

.front-body .chapter-bar-row > i {
    position: relative;
    display: block;
    height: 13px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(23,36,63,.08);
}

.front-body .chapter-bar-row > i::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--bar-width);
    min-width: 10px;
    border-radius: inherit;
    background: var(--chart-color);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--chart-color) 30%, transparent);
}

.front-body .chapter-bar-row.army { --chart-color: #566b3a; }
.front-body .chapter-bar-row.pink { --chart-color: #ef5f7a; }
.front-body .chapter-bar-row.orange { --chart-color: #f28a2e; }
.front-body .chapter-bar-row.navy { --chart-color: #1f5f99; }
.front-body .chapter-bar-row.purple { --chart-color: #6a3fb0; }

.front-body .chapter-composition {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: .95rem;
    height: 245px;
    padding-top: 1.1rem;
}

.front-body .composition-column {
    display: grid;
    grid-template-rows: 1fr auto auto;
    gap: .55rem;
    min-width: 0;
    height: 100%;
    text-align: center;
    color: #17243f;
}

.front-body .composition-column i {
    align-self: end;
    justify-self: center;
    width: min(64px, 80%);
    height: var(--column-height);
    min-height: 24px;
    border-radius: 18px 18px 8px 8px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--chart-color) 82%, #fff), var(--chart-color));
    box-shadow: 0 18px 34px color-mix(in srgb, var(--chart-color) 24%, transparent);
}

.front-body .composition-column b {
    font-size: 1.45rem;
    font-weight: 900;
}

.front-body .composition-column span {
    color: rgba(23,36,63,.68);
    font-size: .88rem;
    font-weight: 850;
    line-height: 1.25;
}

.front-body .composition-column.army { --chart-color: #566b3a; }
.front-body .composition-column.navy { --chart-color: #1f5f99; }
.front-body .composition-column.purple { --chart-color: #6a3fb0; }

@media (max-width: 1080px) {
    .front-body .chapter-insight-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .front-body .chapter-insight-grid {
        grid-template-columns: 1fr 1fr;
    }

    .front-body .chapter-chart-card.composition-card {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .front-body .chapter-insight-section {
        padding: 1.25rem !important;
        border-radius: 20px;
    }

    .front-body .chapter-insight-grid,
    .front-body .chapter-chart-legend {
        grid-template-columns: 1fr;
    }

    .front-body .chapter-chart-card {
        min-height: auto;
    }
}

/* Directory insight charts - refined two card layout */
.front-body .chapter-insight-grid {
    grid-template-columns: minmax(280px, .88fr) minmax(360px, 1.12fr) minmax(320px, 1fr);
    gap: clamp(1rem, 2vw, 1.35rem);
}

.front-body .chapter-chart-card {
    min-height: 390px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.92), rgba(255,255,255,.72)),
        radial-gradient(circle at 95% 4%, rgba(106,63,176,.1), transparent 32%),
        radial-gradient(circle at 0 100%, rgba(239,95,122,.1), transparent 34%);
    box-shadow: 0 24px 58px rgba(23,36,63,.11);
}

.front-body .chapter-summary-card {
    display: grid;
    align-content: start;
}

.front-body .chapter-summary-meter {
    display: grid;
    gap: 1rem;
}

.front-body .chapter-summary-main {
    padding: 1rem;
    border: 1px solid rgba(23,36,63,.08);
    border-radius: 20px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,.56)),
        radial-gradient(circle at 100% 0, rgba(86,107,58,.16), transparent 36%);
}

.front-body .chapter-summary-main span,
.front-body .chapter-summary-main small {
    display: block;
    color: rgba(23,36,63,.66);
    font-size: .82rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.front-body .chapter-summary-main strong {
    display: block;
    margin: .35rem 0 .2rem;
    color: #17243f;
    font-size: clamp(3rem, 7vw, 5rem);
    line-height: .85;
    font-weight: 950;
}

.front-body .chapter-summary-main small {
    letter-spacing: 0;
    text-transform: none;
    font-size: .88rem;
    font-weight: 800;
}

.front-body .chapter-summary-bars {
    display: grid;
    gap: .75rem;
}

.front-body .chapter-summary-row {
    display: grid;
    gap: .48rem;
    padding: .82rem;
    border: 1px solid rgba(23,36,63,.08);
    border-left: 6px solid var(--chart-color);
    border-radius: 18px;
    background: linear-gradient(90deg, rgba(255,255,255,.78), rgba(255,255,255,.62));
    --chart-color: #566b3a;
}

.front-body .chapter-summary-row > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: #17243f;
    font-weight: 900;
}

.front-body .chapter-summary-row b {
    min-width: 2.1rem;
    padding: .18rem .55rem;
    border-radius: 999px;
    color: #fff;
    text-align: center;
    background: var(--chart-color);
}

.front-body .chapter-summary-row > i {
    display: block;
    height: 13px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(23,36,63,.08);
}

.front-body .chapter-summary-row > i span {
    display: block;
    height: 100%;
    min-width: 18px;
    border-radius: inherit;
    background: var(--chart-color);
}

.front-body .chapter-summary-row.army { --chart-color: #566b3a; background: linear-gradient(90deg, rgba(86,107,58,.16), rgba(255,255,255,.68)); }
.front-body .chapter-summary-row.pink { --chart-color: #ef5f7a; background: linear-gradient(90deg, rgba(239,95,122,.16), rgba(255,255,255,.68)); }

.front-body .chapter-bars {
    gap: .85rem;
}

.front-body .chapter-bar-row {
    gap: .55rem;
    padding: .82rem;
    border: 1px solid rgba(23,36,63,.08);
    border-left: 6px solid var(--chart-color);
    border-radius: 18px;
    background: linear-gradient(90deg, rgba(255,255,255,.78), rgba(255,255,255,.62));
    box-shadow: inset 0 1px rgba(255,255,255,.75);
}

.front-body .chapter-bar-row > i {
    height: 13px;
    box-shadow: inset 0 1px rgba(255,255,255,.48);
}

.front-body .chapter-bar-row > i::before {
    display: none;
}

.front-body .chapter-bar-row > i span {
    display: block;
    height: 100%;
    min-width: 26px;
    border-radius: inherit;
    box-shadow: inset 0 1px rgba(255,255,255,.48), 0 10px 22px rgba(23,36,63,.12);
}

.front-body .chapter-bar-row b {
    min-width: 2.1rem;
    padding: .18rem .55rem;
    border-radius: 999px;
    color: #fff;
    text-align: center;
    background: var(--chart-color);
    box-shadow: 0 10px 22px rgba(23,36,63,.12);
}

.front-body .chapter-bar-row.army { background: linear-gradient(90deg, rgba(86,107,58,.16), rgba(255,255,255,.68)); }
.front-body .chapter-bar-row.pink { background: linear-gradient(90deg, rgba(239,95,122,.16), rgba(255,255,255,.68)); }
.front-body .chapter-bar-row.orange { background: linear-gradient(90deg, rgba(242,138,46,.16), rgba(255,255,255,.68)); }
.front-body .chapter-bar-row.navy { background: linear-gradient(90deg, rgba(31,95,153,.16), rgba(255,255,255,.68)); }
.front-body .chapter-bar-row.purple { background: linear-gradient(90deg, rgba(106,63,176,.16), rgba(255,255,255,.68)); }

.front-body .chapter-composition-card {
    display: grid;
    align-content: start;
}

.front-body .chapter-composition-meter {
    display: grid;
    gap: .9rem;
    margin: .2rem 0 1rem;
    padding: 1rem;
    border: 1px solid rgba(23,36,63,.08);
    border-radius: 20px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.76), rgba(255,255,255,.54)),
        radial-gradient(circle at 100% 0, rgba(31,95,153,.12), transparent 34%);
}

.front-body .chapter-composition-total {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
}

.front-body .chapter-composition-total span {
    color: rgba(23,36,63,.62);
    font-size: .82rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.front-body .chapter-composition-total strong {
    color: #17243f;
    font-size: clamp(2.35rem, 5vw, 3.85rem);
    line-height: .85;
    font-weight: 950;
}

.front-body .chapter-stack-bar {
    display: flex;
    width: 100%;
    height: 28px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(23,36,63,.08);
    box-shadow: inset 0 1px rgba(255,255,255,.58);
}

.front-body .chapter-stack-bar span {
    display: block;
    flex: 0 0 auto;
    height: 100%;
    min-width: 16px;
    box-shadow: inset 1px 0 rgba(255,255,255,.35);
}

.front-body .chapter-stack-bar span.army { background: #566b3a !important; }
.front-body .chapter-stack-bar span.pink { background: #ef5f7a !important; }
.front-body .chapter-stack-bar span.orange { background: #f28a2e !important; }
.front-body .chapter-stack-bar span.navy { background: #1f5f99 !important; }
.front-body .chapter-stack-bar span.purple { background: #6a3fb0 !important; }

.front-body .chapter-composition-meter p {
    margin: 0;
    color: rgba(23,36,63,.72);
    font-size: .93rem;
    line-height: 1.55;
    font-weight: 750;
}

@media (max-width: 1080px) {
    .front-body .chapter-insight-grid {
        grid-template-columns: 1fr 1fr;
    }

    .front-body .chapter-composition-card {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .front-body .chapter-insight-grid {
        grid-template-columns: 1fr;
    }

    .front-body .chapter-composition-card {
        grid-column: auto;
    }

    .front-body .chapter-chart-card {
        min-height: auto;
    }
}
/* Achievement insight charts */
.front-body .achievement-insight-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: clamp(2rem, 4vw, 3.3rem) !important;
    border: 1px solid rgba(23, 36, 63, .1);
    border-radius: 30px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,238,242,.78) 30%, rgba(255,246,235,.78) 52%, rgba(239,246,255,.78) 78%, rgba(244,239,255,.84)),
        repeating-linear-gradient(90deg, rgba(23,36,63,.035) 0 1px, transparent 1px 34px);
    box-shadow: 0 30px 86px rgba(23,36,63,.12);
}

.front-body .achievement-insight-section > * {
    position: relative;
    z-index: 1;
}

.front-body .achievement-insight-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url("emas-persinas-asad.jpg") center / cover no-repeat;
    opacity: .5;
    pointer-events: none;
}

.front-body .achievement-insight-section::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at 18% 18%, rgba(239,95,122,.16), transparent 28%),
        radial-gradient(circle at 86% 16%, rgba(106,63,176,.14), transparent 32%),
        linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,247,232,.58) 42%, rgba(244,239,255,.62));
    pointer-events: none;
}

.front-body .achievement-insight-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: clamp(1rem, 3vw, 2.8rem);
    margin-bottom: clamp(1.35rem, 3vw, 2.35rem);
}

.front-body .achievement-insight-head .eyebrow {
    color: #a4432a;
}

.front-body .achievement-insight-head h2 {
    max-width: 940px;
    margin: .25rem 0 .7rem;
    color: #17243f;
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.3vw, 4.2rem);
    line-height: 1;
}

.front-body .achievement-insight-head p:not(.eyebrow) {
    max-width: 800px;
    margin: 0;
    color: rgba(23,36,63,.72);
    font-size: 1rem;
    line-height: 1.72;
}

.front-body .achievement-filter-visual {
    display: grid;
    grid-template-columns: auto minmax(220px, 1fr) auto;
    gap: .7rem;
    align-items: center;
    min-width: min(100%, 520px);
    padding: .72rem;
    border: 1px solid rgba(23,36,63,.12);
    border-radius: 18px;
    background: rgba(255,255,255,.76);
    box-shadow: 0 16px 40px rgba(23,36,63,.08);
}

.front-body .achievement-filter-visual span,
.front-body .achievement-filter-visual a {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: .62rem .85rem;
    border-radius: 12px;
    color: #17243f;
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(23,36,63,.1);
    font-weight: 900;
    text-decoration: none;
}

.front-body .achievement-filter-visual a {
    color: #fff;
    border: 0;
    background: linear-gradient(135deg, #ef5f7a, #6a3fb0);
    box-shadow: 0 12px 26px rgba(106,63,176,.22);
}

.front-body .achievement-insight-grid {
    display: grid;
    grid-template-columns: minmax(330px, 1.08fr) minmax(320px, .96fr) minmax(340px, 1.04fr);
    gap: clamp(1rem, 2vw, 1.35rem);
    align-items: stretch;
}

.front-body .achievement-chart-card {
    position: relative;
    overflow: hidden;
    min-height: 350px;
    padding: clamp(1.1rem, 2vw, 1.45rem);
    border: 1px solid rgba(23,36,63,.1);
    border-radius: 24px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.92), rgba(255,255,255,.72)),
        radial-gradient(circle at 95% 4%, rgba(106,63,176,.1), transparent 32%),
        radial-gradient(circle at 0 100%, rgba(239,95,122,.1), transparent 34%);
    box-shadow: 0 24px 58px rgba(23,36,63,.11);
    backdrop-filter: blur(14px);
}

.front-body .achievement-chart-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg, #ef5f7a, #f28a2e, #566b3a, #1f5f99, #6a3fb0);
}

.front-body .achievement-rank-card,
.front-body .achievement-latest-card {
    min-height: 390px;
}

.front-body .achievement-rank-bars {
    display: grid;
    gap: 1rem;
    padding-top: .35rem;
}

.front-body .achievement-rank-row {
    display: grid;
    gap: .55rem;
    padding: .85rem;
    border: 1px solid rgba(23,36,63,.08);
    border-left: 6px solid var(--achievement-color);
    border-radius: 18px;
    background: linear-gradient(90deg, rgba(255,255,255,.78), rgba(255,255,255,.62));
    box-shadow: inset 0 1px rgba(255,255,255,.75);
    --achievement-color: #1f5f99;
}

.front-body .achievement-rank-row > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: #17243f;
    font-weight: 900;
}

.front-body .achievement-rank-row span {
    color: rgba(23,36,63,.74);
    font-size: .96rem;
}

.front-body .achievement-rank-row b {
    font-size: 1rem;
    min-width: 2.1rem;
    padding: .18rem .55rem;
    border-radius: 999px;
    color: #fff;
    text-align: center;
    background: var(--achievement-color);
    box-shadow: 0 10px 22px rgba(23,36,63,.12);
}

.front-body .achievement-rank-row > i {
    position: relative;
    display: block;
    height: 13px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(23,36,63,.08);
    box-shadow: inset 0 1px rgba(255,255,255,.48);
}

.front-body .achievement-rank-row > i::before {
    content: "";
    display: none;
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--rank-width);
    min-width: 34px;
    border-radius: inherit;
    background: var(--achievement-color);
    box-shadow: inset 0 1px rgba(255,255,255,.45), 0 10px 24px rgba(23,36,63,.12);
}

.front-body .achievement-rank-row > i span {
    display: block;
    height: 100%;
    min-width: 34px;
    border-radius: inherit;
    box-shadow: inset 0 1px rgba(255,255,255,.48), 0 10px 22px rgba(23,36,63,.12);
}

.front-body .achievement-rank-row.pink { --achievement-color: #ef5f7a; background: linear-gradient(90deg, rgba(239,95,122,.16), rgba(255,255,255,.68)); }
.front-body .achievement-rank-row.army { --achievement-color: #566b3a; background: linear-gradient(90deg, rgba(86,107,58,.16), rgba(255,255,255,.68)); }
.front-body .achievement-rank-row.orange { --achievement-color: #f28a2e; background: linear-gradient(90deg, rgba(242,138,46,.16), rgba(255,255,255,.68)); }
.front-body .achievement-rank-row.navy { --achievement-color: #1f5f99; background: linear-gradient(90deg, rgba(31,95,153,.16), rgba(255,255,255,.68)); }
.front-body .achievement-rank-row.purple { --achievement-color: #6a3fb0; background: linear-gradient(90deg, rgba(106,63,176,.16), rgba(255,255,255,.68)); }

.front-body .achievement-donut {
    position: relative;
    display: grid;
    place-items: center;
    width: min(220px, 70vw);
    aspect-ratio: 1;
    margin: .55rem auto 1.1rem;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.72), 0 24px 50px rgba(23,36,63,.14);
}

.front-body .achievement-donut::after {
    content: "";
    position: absolute;
    inset: 27%;
    border-radius: 50%;
    background: linear-gradient(135deg, #fff, #f7f9fc);
    box-shadow: inset 0 0 0 1px rgba(23,36,63,.08);
}

.front-body .achievement-donut span {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    color: #17243f;
    font-weight: 900;
    line-height: 1.2;
    text-align: center;
}

.front-body .achievement-donut b {
    display: block;
    font-size: clamp(2rem, 4.6vw, 3.2rem);
    line-height: .9;
}

.front-body .achievement-chart-legend {
    display: grid;
    gap: .62rem;
    padding: .85rem;
    border-radius: 18px;
    background: rgba(255,255,255,.6);
    border: 1px solid rgba(23,36,63,.08);
}

.front-body .achievement-chart-legend span {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-width: 0;
    color: #263553;
    font-size: .88rem;
    font-weight: 850;
}

.front-body .achievement-chart-legend i {
    width: .72rem;
    height: .72rem;
    border-radius: 50%;
    flex: 0 0 auto;
}

.front-body .achievement-chart-legend b {
    margin-left: auto;
    color: #17243f;
}

.front-body .achievement-composition-card {
    display: grid;
    align-content: start;
}

.front-body .achievement-composition-meter {
    display: grid;
    gap: .9rem;
    margin: .2rem 0 1rem;
    padding: 1rem;
    border: 1px solid rgba(23,36,63,.08);
    border-radius: 20px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.76), rgba(255,255,255,.54)),
        radial-gradient(circle at 100% 0, rgba(239,95,122,.12), transparent 34%);
}

.front-body .achievement-composition-total {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
}

.front-body .achievement-composition-total span {
    color: rgba(23,36,63,.62);
    font-size: .82rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.front-body .achievement-composition-total strong {
    color: #17243f;
    font-size: clamp(2.35rem, 5vw, 3.85rem);
    line-height: .85;
    font-weight: 950;
}

.front-body .achievement-stack-bar {
    display: flex;
    width: 100%;
    height: 28px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(23,36,63,.08);
    box-shadow: inset 0 1px rgba(255,255,255,.58);
}

.front-body .achievement-stack-bar span {
    display: block;
    flex: 0 0 auto;
    height: 100%;
    min-width: 22px;
    background: #ef5f7a;
    box-shadow: inset 1px 0 rgba(255,255,255,.35);
}

.front-body .achievement-stack-bar span.pink { background: #ef5f7a !important; }
.front-body .achievement-stack-bar span.army { background: #566b3a !important; }
.front-body .achievement-stack-bar span.orange { background: #f28a2e !important; }
.front-body .achievement-stack-bar span.navy { background: #1f5f99 !important; }
.front-body .achievement-stack-bar span.purple { background: #6a3fb0 !important; }

.front-body .achievement-composition-meter p {
    margin: 0;
    color: rgba(23,36,63,.72);
    font-size: .93rem;
    line-height: 1.55;
    font-weight: 750;
}

.front-body .achievement-composition-meter p strong {
    color: #17243f;
}

.front-body .achievement-donut-report {
    display: grid;
    gap: .85rem;
    align-items: center;
    padding-top: .2rem;
}

.front-body .achievement-donut-rank-report {
    grid-template-columns: minmax(150px, .86fr) minmax(0, 1.14fr);
}

.front-body .achievement-composition-report {
    grid-template-columns: minmax(142px, .86fr) minmax(0, 1.14fr);
}

.front-body .achievement-composition-report .achievement-donut-table {
    grid-column: 1 / -1;
}

.front-body .achievement-donut-shell {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 210px;
    overflow: hidden;
    border: 1px solid rgba(23,36,63,.08);
    border-radius: 24px;
    background:
        radial-gradient(circle at 18% 18%, rgba(239,95,122,.12), transparent 42%),
        radial-gradient(circle at 92% 86%, rgba(106,63,176,.12), transparent 45%),
        linear-gradient(145deg, rgba(255,255,255,.86), rgba(255,255,255,.58));
    box-shadow: inset 0 1px rgba(255,255,255,.9), 0 18px 38px rgba(23,36,63,.08);
}

.front-body .achievement-donut-svg {
    width: min(220px, 100%);
    aspect-ratio: 1;
    overflow: visible;
}

.front-body .achievement-donut-track {
    fill: none;
    stroke: rgba(23,36,63,.075);
    stroke-width: 18;
}

.front-body .achievement-donut-segment circle {
    fill: none;
    stroke-width: 18;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 80px 80px;
    cursor: pointer;
    filter: drop-shadow(0 7px 12px rgba(23,36,63,.12));
    transition: stroke-width .18s ease, filter .18s ease, opacity .18s ease;
}

.front-body .achievement-donut-segment:hover circle {
    stroke-width: 21;
    filter: drop-shadow(0 10px 18px rgba(23,36,63,.18));
}

.front-body .achievement-donut-hole {
    fill: rgba(255,255,255,.96);
    stroke: rgba(23,36,63,.08);
    stroke-width: 1;
    filter: drop-shadow(0 10px 22px rgba(23,36,63,.12));
}

.front-body .achievement-donut-number {
    fill: #17243f;
    font-family: var(--font-ui);
    font-size: 1.9rem;
    font-weight: 950;
}

.front-body .achievement-donut-label {
    fill: rgba(23,36,63,.62);
    font-family: var(--font-ui);
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.front-body .achievement-donut-table {
    display: grid;
    gap: .55rem;
}

.front-body .achievement-donut-table-row {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .55rem;
    min-width: 0;
    padding: .64rem .7rem;
    border: 1px solid rgba(23,36,63,.08);
    border-left: 5px solid var(--slice-color, #ef5f7a);
    border-radius: 16px;
    background:
        linear-gradient(90deg, rgba(255,255,255,.9), rgba(255,255,255,.64)),
        radial-gradient(circle at 100% 0, rgba(23,36,63,.05), transparent 38%);
    box-shadow: inset 0 1px rgba(255,255,255,.86), 0 10px 24px rgba(23,36,63,.055);
    cursor: help;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.front-body .achievement-donut-table-row:hover {
    transform: translateY(-2px);
    border-color: rgba(23,36,63,.16);
    box-shadow: inset 0 1px rgba(255,255,255,.92), 0 16px 32px rgba(23,36,63,.1);
}

.front-body .achievement-donut-table-row i {
    width: 11px;
    height: 11px;
    border-radius: 999px;
    background: var(--slice-color, #ef5f7a);
    box-shadow: 0 0 0 5px rgba(23,36,63,.045);
}

.front-body .achievement-donut-table-row span {
    min-width: 0;
    overflow: hidden;
    color: #17243f;
    font-size: .9rem;
    font-weight: 900;
    line-height: 1.18;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.front-body .achievement-donut-table-row small {
    display: block;
    margin-top: .12rem;
    overflow: hidden;
    color: rgba(23,36,63,.58);
    font-size: .68rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.front-body .achievement-donut-table-row b {
    color: #17243f;
    font-size: 1.02rem;
    font-weight: 950;
}

.front-body .achievement-donut-table-row em {
    min-width: 3.8rem;
    padding: .2rem .45rem;
    border-radius: 999px;
    background: rgba(23,36,63,.06);
    color: #263553;
    font-size: .72rem;
    font-style: normal;
    font-weight: 950;
    text-align: center;
}

.front-body .achievement-donut-table.compact .achievement-donut-table-row {
    grid-template-columns: 12px minmax(0, 1fr) auto auto;
    padding-block: .55rem;
}

.front-body .achievement-donut-summary {
    display: grid;
    align-content: center;
    gap: .22rem;
    min-height: 132px;
    padding: 1rem;
    border: 1px solid rgba(23,36,63,.08);
    border-radius: 22px;
    background:
        radial-gradient(circle at 100% 0, rgba(242,138,46,.18), transparent 42%),
        linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.62));
    box-shadow: inset 0 1px rgba(255,255,255,.86), 0 14px 28px rgba(23,36,63,.07);
}

.front-body .achievement-donut-summary span {
    color: rgba(23,36,63,.62);
    font-size: .68rem;
    font-weight: 950;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.front-body .achievement-donut-summary strong {
    color: #17243f;
    font-size: 1.02rem;
    font-weight: 950;
    line-height: 1.2;
}

.front-body .achievement-donut-summary p {
    margin: 0;
    color: rgba(23,36,63,.72);
    font-size: .78rem;
    font-weight: 780;
    line-height: 1.42;
}

.chart-hover-tooltip {
    position: fixed;
    z-index: 99999;
    max-width: 260px;
    padding: .68rem .78rem;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 14px;
    background: rgba(23,36,63,.94);
    box-shadow: 0 18px 38px rgba(23,36,63,.22);
    color: #fff;
    font-size: .78rem;
    font-weight: 850;
    line-height: 1.45;
    opacity: 0;
    pointer-events: none;
    transform: translateY(7px);
    transition: opacity .16s ease, transform .16s ease;
    white-space: pre-line;
}

.chart-hover-tooltip.show {
    opacity: 1;
    transform: translateY(0);
}

.front-body .achievement-year-bars {
    display: flex;
    align-items: end;
    gap: .9rem;
    height: 270px;
    padding: 1.2rem .3rem .1rem;
    border-bottom: 1px solid rgba(23,36,63,.1);
    background: repeating-linear-gradient(0deg, rgba(23,36,63,.055) 0 1px, transparent 1px 54px);
}

.front-body .achievement-year-column {
    display: grid;
    grid-template-rows: 1fr auto auto;
    gap: .44rem;
    align-items: end;
    justify-items: center;
    min-width: 54px;
    height: 100%;
    color: #17243f;
    text-align: center;
}

.front-body .achievement-year-column i {
    align-self: end;
    width: 42px;
    height: var(--year-height);
    min-height: 24px;
    border-radius: 16px 16px 7px 7px;
    background: linear-gradient(180deg, #75b9df, #1f5f99 58%, #17243f);
    box-shadow: 0 18px 34px rgba(31,95,153,.22);
}

.front-body .achievement-year-column b {
    font-size: 1.05rem;
    font-weight: 900;
}

.front-body .achievement-year-column span {
    color: rgba(23,36,63,.66);
    font-size: .82rem;
    font-weight: 850;
}

.front-body .achievement-latest-list {
    display: grid;
    gap: .72rem;
}

.front-body .achievement-latest-item {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: .85rem;
    align-items: center;
    padding: .82rem;
    border: 1px solid rgba(23,36,63,.09);
    border-radius: 18px;
    background: rgba(255,255,255,.72);
    color: #17243f;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.front-body .achievement-latest-item:hover {
    transform: translateY(-2px);
    border-color: rgba(106,63,176,.24);
    box-shadow: 0 16px 34px rgba(23,36,63,.11);
}

.front-body .achievement-latest-item em {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(239,95,122,.9), rgba(106,63,176,.86));
    color: #fff;
    font-style: normal;
    font-weight: 950;
}

.front-body .achievement-latest-item strong {
    display: block;
    font-size: .96rem;
    line-height: 1.35;
}

.front-body .achievement-latest-item small {
    display: block;
    margin-top: .2rem;
    color: rgba(23,36,63,.62);
    font-size: .82rem;
    font-weight: 800;
}

.front-body .empty-chart-note {
    margin: 0;
    color: rgba(23,36,63,.62);
}

@media (max-width: 1120px) {
    .front-body .achievement-insight-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .front-body .achievement-insight-grid {
        grid-template-columns: 1fr;
    }

    .front-body .achievement-donut-rank-report,
    .front-body .achievement-composition-report {
        grid-template-columns: minmax(180px, .75fr) minmax(0, 1.25fr);
    }
}

@media (max-width: 720px) {
    .front-body .achievement-insight-section {
        padding: 1.25rem !important;
        border-radius: 20px;
    }

    .front-body .achievement-filter-visual {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .front-body .achievement-year-bars {
        overflow-x: auto;
        justify-content: flex-start;
    }

    .front-body .achievement-chart-card {
        min-height: auto;
    }

    .front-body .achievement-donut-rank-report,
    .front-body .achievement-composition-report {
        grid-template-columns: 1fr;
    }

    .front-body .achievement-donut-shell {
        min-height: 185px;
    }

    .front-body .achievement-donut-svg {
        width: min(190px, 82vw);
    }
}

/* Home index spacing polish */
.front-body.home-page .home-video-hero {
    min-height: clamp(560px, 76vh, 720px);
    padding-bottom: clamp(1.4rem, 3vw, 2.2rem);
}

.front-body.home-page .home-hero-content {
    padding-top: clamp(1rem, 2.4vw, 2.2rem);
}

.front-body.home-page .home-hero-stats {
    margin-top: clamp(1.6rem, 4vw, 3.2rem);
}

.front-body.home-page .section {
    padding-top: clamp(1.55rem, 3vw, 2.4rem);
    padding-bottom: clamp(1.55rem, 3vw, 2.4rem);
}

.front-body.home-page .section-head {
    margin-bottom: clamp(.85rem, 1.8vw, 1.2rem);
}

.front-body.home-page .profile-with-speakers {
    margin-top: clamp(-1rem, -1.2vw, -.4rem);
    gap: clamp(1rem, 2vw, 1.8rem);
    padding-top: clamp(.8rem, 1.6vw, 1.35rem);
}

.front-body.home-page .profile-message-card {
    min-height: clamp(520px, 56vw, 620px);
    gap: clamp(.85rem, 1.5vw, 1.35rem);
    padding: clamp(1.2rem, 2.2vw, 2rem);
}

.front-body.home-page .profile-speech {
    padding: clamp(1.15rem, 2vw, 1.8rem);
}

.front-body.home-page .profile-speech h2 {
    font-size: clamp(2.15rem, 3.7vw, 4rem);
}

.front-body.home-page .profile-speech p:not(.eyebrow) {
    line-height: 1.62;
}

.front-body.home-page .profile-speakers-photo {
    width: min(40vw, 540px);
    margin: -2.4rem auto -1rem;
}

.front-body.home-page .profile-split .feature-grid.compact,
.front-body.home-page .news-grid,
.front-body.home-page .achievement-grid,
.front-body.home-page .achievement-insight-grid,
.front-body.home-page .chapter-insight-grid {
    gap: clamp(.8rem, 1.55vw, 1.15rem);
}

.front-body.home-page .news-showcase,
.front-body.home-page .achievement-insight-section,
.front-body.home-page .chapter-insight-section {
    margin-top: clamp(.35rem, 1vw, .8rem);
    margin-bottom: clamp(.35rem, 1vw, .8rem);
}

.front-body.home-page .declaration-news-band,
.front-body.home-page .bromo-chapter-band {
    margin-top: clamp(.25rem, .8vw, .7rem);
    margin-bottom: clamp(.75rem, 1.4vw, 1.15rem) !important;
}

.front-body.home-page .achievement-insight-section,
.front-body.home-page .chapter-insight-section {
    padding: clamp(1.4rem, 2.6vw, 2.35rem) !important;
}

.front-body.home-page .achievement-insight-head,
.front-body.home-page .chapter-insight-head {
    margin-bottom: clamp(.95rem, 2vw, 1.55rem);
}

.front-body.home-page .achievement-chart-card,
.front-body.home-page .chapter-chart-card {
    min-height: 340px;
    padding: clamp(1rem, 1.7vw, 1.25rem);
}

@media (max-width: 1320px) {
    .front-body.home-page .profile-with-speakers {
        gap: clamp(1rem, 2vw, 1.5rem);
    }

    .front-body.home-page .profile-speakers-photo {
        width: min(50vw, 520px);
        margin-top: -1.5rem;
    }
}

@media (max-width: 980px) {
    .front-body.home-page .section {
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
    }

    .front-body.home-page .profile-message-card {
        min-height: auto;
    }

    .front-body.home-page .profile-speakers-photo {
        width: min(84vw, 430px);
        margin: .2rem auto -1.2rem;
    }
}

@media (max-width: 680px) {
    .front-body.home-page .home-video-hero {
        padding-bottom: 1.6rem;
    }

    .front-body.home-page .profile-with-speakers {
        margin-top: 0;
        padding-top: .85rem;
    }

    .front-body.home-page .profile-message-card {
        padding: 1rem;
    }
}

/* Executive back panel polish */
.admin-body {
    grid-template-columns: 300px minmax(0, 1fr);
    color: #111827;
    background:
        radial-gradient(circle at 18% 0, rgba(56, 189, 248, .12), transparent 32%),
        radial-gradient(circle at 92% 12%, rgba(158, 23, 27, .08), transparent 30%),
        linear-gradient(135deg, #eef3f8, #f7f9fc 42%, #eef2f6);
}

.admin-sidebar {
    overflow: hidden;
    padding: 1rem .9rem;
    border-right: 1px solid rgba(255,255,255,.08);
    background:
        linear-gradient(180deg, rgba(12, 21, 36, .98), rgba(15, 23, 42, .98)),
        radial-gradient(circle at 16% 8%, rgba(56,189,248,.18), transparent 28%);
    box-shadow: 18px 0 40px rgba(15, 23, 42, .14);
}

.admin-brand {
    flex: 0 0 auto;
    width: 100%;
    padding: .65rem .7rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.admin-brand img {
    width: 60px;
    height: 60px;
}

.admin-brand strong {
    color: #ffffff;
    font-size: 1.04rem;
}

.admin-brand small {
    color: rgba(219, 230, 248, .86);
}

.admin-menu {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    align-content: start;
    gap: .55rem;
    padding: .55rem .35rem .65rem 0;
    margin-right: -.35rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, .55) transparent;
}

.admin-menu::-webkit-scrollbar {
    width: 8px;
}

.admin-menu::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(148, 163, 184, .45);
}

.admin-menu a {
    min-height: 58px;
    padding: .72rem .82rem;
    border-radius: 14px;
    color: rgba(219, 230, 248, .84);
}

.admin-menu .menu-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    border-radius: 12px;
    background: rgba(255,255,255,.08);
}

.admin-menu .menu-label {
    font-size: .9rem;
    font-weight: 850;
}

.admin-user {
    flex: 0 0 auto;
    padding: .82rem;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(30, 41, 59, .92), rgba(15, 23, 42, .92));
    box-shadow: 0 18px 38px rgba(0,0,0,.16);
}

.admin-user a {
    min-width: 42px;
    text-align: center;
    font-size: 0;
}

.admin-user a::before {
    content: "Log out";
    font-size: .74rem;
    font-weight: 900;
}

.admin-main {
    padding: clamp(1rem, 2vw, 1.75rem);
}

.admin-topbar {
    display: grid;
    grid-template-columns: minmax(220px, .82fr) minmax(520px, 1.45fr) auto;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 1.35rem;
    padding: 1.25rem 1.45rem;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,255,255,.86)),
        radial-gradient(circle at 12% 0, rgba(56,189,248,.1), transparent 34%);
    box-shadow: 0 24px 60px rgba(15, 23, 42, .08);
}

.admin-topbar h1 {
    font-size: clamp(1.8rem, 3vw, 2.35rem);
    font-weight: 950;
    letter-spacing: -.01em;
}

.admin-session-panel {
    min-width: 0;
    padding: .85rem 1rem;
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(248,250,252,.98), rgba(238,243,247,.92)),
        radial-gradient(circle at 100% 0, rgba(56,189,248,.12), transparent 32%);
    border-color: rgba(15,23,42,.1);
    box-shadow: inset 0 1px rgba(255,255,255,.72);
}

.admin-session-panel dd {
    font-size: .9rem;
}

.admin-topbar .ghost-button {
    min-height: 58px;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 16px 32px rgba(15,23,42,.07);
}

.admin-body .admin-card,
.admin-body .form-card,
.admin-body .side-panel {
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.98), rgba(255,255,255,.88)),
        radial-gradient(circle at 100% 0, rgba(56,189,248,.06), transparent 30%);
    box-shadow: 0 20px 52px rgba(15, 23, 42, .08);
}

.admin-body .admin-card {
    padding: 1.25rem;
}

.admin-card-head {
    align-items: flex-start;
}

.admin-card-head h2 {
    margin: 0;
    color: #0f172a;
    font-size: 1.08rem;
    font-weight: 950;
}

.admin-card-head p {
    margin: .28rem 0 0;
    color: #64748b;
    font-size: .88rem;
    line-height: 1.45;
}

.admin-card-head > span {
    flex: 0 0 auto;
    padding: .46rem .7rem;
    border-radius: 999px;
    color: #9e171b;
    background: rgba(158,23,27,.09);
    font-size: .8rem;
    font-weight: 900;
}

.stats-grid.executive-stats {
    grid-template-columns: repeat(4, minmax(170px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.stats-grid.executive-stats article {
    min-height: 150px;
    display: grid;
    align-content: end;
    gap: .45rem;
    padding: 1.25rem;
    border-radius: 18px;
    box-shadow: 0 22px 46px rgba(15,23,42,.14);
}

.stats-grid.executive-stats article::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.14), transparent 44%);
    pointer-events: none;
}

.stats-grid.executive-stats span,
.stats-grid.executive-stats strong,
.stats-grid.executive-stats small {
    position: relative;
    z-index: 1;
}

.stats-grid.executive-stats small {
    color: rgba(255,255,255,.76);
    font-size: .82rem;
    font-weight: 750;
}

.dashboard-overview-grid,
.dashboard-feed-grid {
    display: grid;
    gap: 1rem;
    margin-bottom: 1rem;
}

.dashboard-overview-grid {
    grid-template-columns: minmax(260px, .92fr) minmax(340px, 1.18fr) minmax(280px, .9fr);
}

.admin-grid.dashboard-workbench {
    grid-template-columns: minmax(0, 1.18fr) minmax(360px, .88fr);
    align-items: stretch;
    margin-bottom: 1rem;
}

.admin-grid.three.dashboard-feed-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-kpi-card,
.dashboard-panel {
    position: relative;
    overflow: hidden;
}

.dashboard-kpi-card::before,
.dashboard-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg, #ef5f7a, #f28a2e, #566b3a, #1f5f99, #6a3fb0);
}

.dashboard-card-title {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.dashboard-card-title span {
    color: #64748b;
    font-size: .78rem;
    font-weight: 950;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.dashboard-card-title strong {
    color: #0f172a;
    font-size: 1.2rem;
    line-height: 1.15;
    font-weight: 950;
    text-align: right;
}

.dashboard-meter {
    height: 13px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(15,23,42,.08);
    box-shadow: inset 0 1px rgba(255,255,255,.7);
}

.dashboard-meter i {
    display: block;
    width: var(--meter);
    height: 100%;
    min-width: 18px;
    border-radius: inherit;
    background: linear-gradient(90deg, #14b8a6, #38bdf8);
}

.dashboard-mini-grid,
.dashboard-operation-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .72rem;
    margin: 1rem 0 0;
}

.dashboard-mini-grid div,
.dashboard-operation-grid div {
    padding: .8rem;
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 14px;
    background: rgba(248,250,252,.82);
}

.dashboard-mini-grid dt,
.dashboard-operation-grid span {
    color: #64748b;
    font-size: .74rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.dashboard-mini-grid dd,
.dashboard-operation-grid strong {
    display: block;
    margin: .2rem 0 0;
    color: #0f172a;
    font-size: 1.25rem;
    font-weight: 950;
}

.dashboard-status-list {
    display: grid;
    gap: .72rem;
}

.dashboard-status-row {
    display: grid;
    gap: .42rem;
}

.dashboard-status-row > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: #0f172a;
    font-weight: 900;
}

.dashboard-status-row span {
    color: #475569;
}

.dashboard-status-row i {
    height: 11px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(15,23,42,.08);
}

.dashboard-status-row i span {
    display: block;
    height: 100%;
    min-width: 16px;
    border-radius: inherit;
    background: var(--status-color, #64748b);
}

.dashboard-status-row.success { --status-color: #16a34a; }
.dashboard-status-row.danger { --status-color: #ef4444; }
.dashboard-status-row.warning { --status-color: #f59e0b; }
.dashboard-status-row.info { --status-color: #2563eb; }
.dashboard-status-row.muted { --status-color: #64748b; }

.dashboard-action-panel {
    margin-bottom: 1rem;
}

.dashboard-action-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .9rem;
}

.dashboard-action-grid .action-card {
    display: grid;
    gap: .42rem;
    min-height: 178px;
    align-content: start;
    position: relative;
    overflow: hidden;
    padding: 1rem;
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 16px;
    color: #0f172a;
    background:
        linear-gradient(135deg, rgba(255,255,255,.92), rgba(248,250,252,.78)),
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--action-accent) 18%, transparent), transparent 38%);
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    cursor: pointer;
}

.dashboard-feed-item {
    display: grid;
    gap: .28rem;
    padding: .95rem;
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 16px;
    color: #0f172a;
    background:
        linear-gradient(135deg, rgba(255,255,255,.92), rgba(248,250,252,.78)),
        radial-gradient(circle at 100% 0, rgba(239,95,122,.11), transparent 34%);
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.dashboard-action-grid .action-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--action-accent), var(--action-accent-2));
}

.dashboard-action-grid .action-card::after {
    content: "";
    position: absolute;
    right: -34px;
    top: -44px;
    width: 112px;
    height: 112px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--action-accent) 13%, transparent);
}

.dashboard-action-grid .action-card:hover,
.dashboard-action-grid .action-card:focus-visible {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--action-accent) 38%, rgba(15,23,42,.08));
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
    outline: none;
    text-decoration: none;
    color: inherit;
}

.dashboard-action-grid .action-card:active {
    transform: translateY(0);
}

.dashboard-feed-item:hover {
    transform: translateY(-2px);
    border-color: rgba(158,23,27,.22);
    box-shadow: 0 18px 36px rgba(15,23,42,.09);
}

.dashboard-action-grid .action-news {
    --action-accent: #ef4444;
    --action-accent-2: #f97316;
}

.dashboard-action-grid .action-pages {
    --action-accent: #2563eb;
    --action-accent-2: #06b6d4;
}

.dashboard-action-grid .action-chapters {
    --action-accent: #16a34a;
    --action-accent-2: #14b8a6;
}

.dashboard-action-grid .action-video {
    --action-accent: #dc2626;
    --action-accent-2: #ec4899;
}

.dashboard-action-grid .action-theme {
    --action-accent: #7c3aed;
    --action-accent-2: #f59e0b;
}

.dashboard-action-grid .action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, var(--action-accent), var(--action-accent-2));
    box-shadow: 0 14px 26px color-mix(in srgb, var(--action-accent) 28%, transparent);
}

.dashboard-action-grid .action-icon svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.dashboard-action-grid span,
.dashboard-feed-item strong {
    font-weight: 950;
}

.dashboard-action-grid small,
.dashboard-feed-item small {
    color: #64748b;
    line-height: 1.45;
}

.dashboard-action-grid em {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    align-self: end;
    margin-top: .3rem;
    color: var(--action-accent);
    font-size: .76rem;
    font-style: normal;
    font-weight: 950;
}

.stats-grid.executive-stats .executive-stat-link {
    min-height: 150px;
    display: grid;
    align-content: end;
    gap: .45rem;
    padding: 1.25rem;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    box-shadow: 0 22px 46px rgba(15,23,42,.14);
    cursor: pointer;
    isolation: isolate;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, filter .2s ease;
}

.stats-grid.executive-stats .executive-stat-link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.14), transparent 44%);
    pointer-events: none;
}

.stats-grid.executive-stats .executive-stat-link:hover,
.stats-grid.executive-stats .executive-stat-link:focus-visible {
    transform: translateY(-3px);
    border-color: rgba(255,255,255,.26);
    box-shadow: 0 28px 58px rgba(15,23,42,.18);
    filter: saturate(1.04);
    outline: none;
}

.stats-grid.executive-stats .executive-stat-link em {
    position: relative;
    z-index: 1;
    width: max-content;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: .12rem;
    padding: .34rem .52rem;
    border-radius: 999px;
    background: rgba(255,255,255,.16);
    color: rgba(255,255,255,.9);
    font-size: .68rem;
    font-style: normal;
    font-weight: 950;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.stats-grid.executive-stats .executive-stat-link em i {
    font-style: normal;
    transition: transform .2s ease;
}

.stats-grid.executive-stats .executive-stat-link:hover em i,
.stats-grid.executive-stats .executive-stat-link:focus-visible em i {
    transform: translateX(3px);
}

.content-mini-grid div {
    --mini-color: #2563eb;
    --mini-soft: rgba(37,99,235,.09);
    padding: 0;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--mini-color) 20%, #e2e8f0);
    background: linear-gradient(135deg, rgba(255,255,255,.98), var(--mini-soft));
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.content-mini-grid div.mini-publish { --mini-color: #16a34a; --mini-soft: rgba(22,163,74,.1); }
.content-mini-grid div.mini-draft { --mini-color: #f59e0b; --mini-soft: rgba(245,158,11,.13); }
.content-mini-grid div.mini-category { --mini-color: #2563eb; --mini-soft: rgba(37,99,235,.11); }
.content-mini-grid div.mini-breaking { --mini-color: #ef4444; --mini-soft: rgba(239,68,68,.1); }

.content-mini-grid div:hover,
.content-mini-grid div:focus-within {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--mini-color) 46%, #e2e8f0);
    box-shadow: 0 14px 28px color-mix(in srgb, var(--mini-color) 14%, transparent), 0 10px 18px rgba(15,23,42,.07);
}

.content-mini-grid a {
    min-height: 76px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    grid-template-areas:
        "icon label value"
        "icon detail detail";
    align-items: center;
    gap: .18rem .62rem;
    padding: .72rem;
    color: inherit;
    text-decoration: none;
}

.content-mini-grid .mini-card-icon {
    grid-area: icon;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(135deg, var(--mini-color), color-mix(in srgb, var(--mini-color) 70%, #0f172a));
    box-shadow: 0 10px 20px color-mix(in srgb, var(--mini-color) 24%, transparent);
}

.content-mini-grid .mini-card-icon svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
}

.content-mini-grid .mini-card-label {
    grid-area: label;
    min-width: 0;
    color: #64748b;
    font-size: .74rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.content-mini-grid .mini-card-value {
    grid-area: value;
    justify-self: end;
    margin: 0;
    color: #0f172a;
    font-size: 1.25rem;
    font-weight: 950;
}

.content-mini-grid small {
    grid-area: detail;
    display: inline-flex;
    width: max-content;
    align-items: center;
    gap: .3rem;
    margin-top: .2rem;
    padding: .24rem .44rem;
    border-radius: 999px;
    background: #fff;
    color: var(--mini-color);
    font-size: .62rem;
    font-weight: 950;
    letter-spacing: .06em;
    text-transform: uppercase;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mini-color) 16%, transparent);
}

.content-mini-grid small i {
    font-style: normal;
    transition: transform .18s ease;
}

.content-mini-grid a:hover small i,
.content-mini-grid a:focus-visible small i {
    transform: translateX(3px);
}

.content-mini-grid a:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--mini-color) 55%, #ffffff);
    outline-offset: -2px;
}

.news-status-filter {
    margin-bottom: .8rem;
}

.field-focus-pulse {
    border-radius: 14px;
    padding: .35rem;
    background: linear-gradient(135deg, rgba(37,99,235,.1), rgba(34,197,94,.08));
    box-shadow: 0 0 0 3px rgba(37,99,235,.09);
}

.dashboard-action-grid em i {
    font-style: normal;
}

.dashboard-feed-item + .dashboard-feed-item {
    margin-top: .65rem;
}

.dashboard-feed-item span {
    justify-self: start;
    padding: .24rem .55rem;
    border-radius: 999px;
    color: #9e171b;
    background: rgba(158,23,27,.09);
    font-size: .72rem;
    font-weight: 950;
}

.mini-admin-link {
    color: #9e171b;
    font-weight: 900;
}

.dashboard-reminder-list {
    max-height: 430px;
    overflow: auto;
    padding-right: .25rem;
}

.admin-body .notice-row {
    align-items: center;
    padding: .85rem 0;
}

.dashboard-message-panel .notice-row {
    align-items: flex-start;
}

.security-check-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
    margin-bottom: 1rem;
}

.security-check-grid span {
    padding: .62rem .72rem;
    border-radius: 999px;
    color: #155e4f;
    background: rgba(20,184,166,.12);
    font-size: .8rem;
    font-weight: 900;
}

.dashboard-audit-card {
    margin-bottom: 1rem;
}

.admin-body .table-wrap {
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 14px;
    background: rgba(255,255,255,.76);
}

.admin-body table {
    border-collapse: separate;
    border-spacing: 0;
}

.admin-body th {
    background: rgba(248,250,252,.92);
    color: #64748b;
}

.admin-body th,
.admin-body td {
    border-bottom-color: rgba(15,23,42,.07);
}

.admin-body .admin-form input,
.admin-body .admin-form textarea,
.admin-body .admin-form select,
.login-card input {
    border-radius: 12px;
    border-color: rgba(15,23,42,.12);
    background: rgba(248,250,252,.75);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.admin-body .admin-form input:focus,
.admin-body .admin-form textarea:focus,
.admin-body .admin-form select:focus,
.login-card input:focus {
    outline: none;
    border-color: rgba(158,23,27,.36);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(158,23,27,.08);
}

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

    .admin-topbar .ghost-button {
        justify-self: start;
    }

    .dashboard-overview-grid,
    .admin-grid.three.dashboard-feed-grid,
    .dashboard-action-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

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

    .admin-sidebar {
        position: relative;
        height: auto;
        max-height: none;
    }

    .admin-menu {
        max-height: 360px;
    }

    .admin-grid.dashboard-workbench,
    .dashboard-overview-grid,
    .dashboard-dual-grid,
    .admin-grid.three.dashboard-feed-grid {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 680px) {
    .stats-grid.executive-stats,
    .dashboard-action-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-mini-grid,
    .dashboard-operation-grid,
    .security-check-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-contact-item {
        flex-direction: column;
    }

    .dashboard-contact-delete-form {
        align-self: flex-end;
    }

    .dashboard-security-strip {
        gap: .38rem;
    }
}

/* Back panel compact density: default view feels like browser zoom 80% */
@media (min-width: 1021px) {
    .admin-body {
        grid-template-columns: 250px minmax(0, 1fr);
        font-size: .82rem;
    }

    .admin-sidebar {
        gap: .65rem;
        padding: .72rem .65rem;
    }

    .admin-brand {
        gap: .6rem;
        padding: .48rem .52rem .72rem;
    }

    .admin-brand img {
        width: 48px;
        height: 48px;
    }

    .admin-brand strong {
        font-size: .94rem;
    }

    .admin-brand small {
        font-size: .6rem;
        letter-spacing: .14em;
    }

    .admin-menu {
        gap: .38rem;
        padding: .45rem .25rem .52rem 0;
    }

    .admin-menu a {
        min-height: 48px;
        padding: .56rem .62rem;
        border-radius: 12px;
    }

    .admin-menu .menu-icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        border-radius: 10px;
    }

    .admin-menu .menu-icon svg {
        width: 16px;
        height: 16px;
    }

    .admin-menu .menu-label {
        font-size: .78rem;
        line-height: 1.16;
    }

    .admin-user {
        gap: .65rem;
        padding: .62rem;
        border-radius: 14px;
    }

    .admin-user-photo {
        width: 40px;
        height: 40px;
    }

    .admin-user strong {
        font-size: .82rem;
    }

    .admin-user small,
    .admin-user a::before {
        font-size: .68rem;
    }

    .admin-main {
        padding: 1rem 1.15rem;
    }

    .admin-topbar {
        grid-template-columns: minmax(190px, .72fr) minmax(470px, 1.34fr) auto;
        gap: .95rem;
        margin-bottom: 1rem;
        padding: 1rem 1.15rem;
        border-radius: 16px;
    }

    .admin-topbar p {
        font-size: .68rem;
    }

    .admin-topbar h1 {
        font-size: clamp(1.6rem, 2.45vw, 2.15rem);
        line-height: 1.1;
    }

    .admin-session-panel {
        grid-template-columns: auto minmax(0, 1fr);
        gap: .65rem;
        padding: .7rem .85rem;
        border-radius: 14px;
    }

    .admin-session-photo {
        width: 46px;
        height: 46px;
    }

    .admin-session-panel dl {
        gap: .5rem;
    }

    .admin-session-panel dt {
        font-size: .58rem;
        margin-bottom: .16rem;
    }

    .admin-session-panel dd {
        font-size: .76rem;
        line-height: 1.2;
    }

    .admin-session-panel dd span {
        font-size: .68rem;
    }

    .admin-topbar .ghost-button {
        min-height: 48px;
        padding: .62rem .9rem;
        border-radius: 12px;
    }

    .stats-grid.executive-stats,
    .dashboard-overview-grid,
    .dashboard-feed-grid,
    .admin-grid,
    .dashboard-action-grid {
        gap: .82rem;
    }

    .stats-grid.executive-stats,
    .dashboard-overview-grid,
    .admin-grid.dashboard-workbench,
    .admin-grid.three.dashboard-feed-grid,
    .dashboard-action-panel {
        margin-bottom: .82rem;
    }

    .stats-grid.executive-stats article,
    .stats-grid.executive-stats .executive-stat-link {
        min-height: 116px;
        padding: .95rem;
        border-radius: 16px;
    }

    .stats-grid.executive-stats span,
    .stats-grid span,
    th {
        font-size: .63rem;
    }

    .stats-grid.executive-stats strong,
    .stats-grid strong {
        font-size: clamp(2rem, 3vw, 2.5rem);
        margin-top: .38rem;
    }

    .stats-grid.executive-stats small {
        font-size: .7rem;
    }

    .admin-body .admin-card {
        padding: .95rem;
        border-radius: 16px;
    }

    .admin-card-head {
        gap: .75rem;
        margin-bottom: .75rem;
    }

    .admin-card-head h2 {
        font-size: .98rem;
    }

    .admin-card-head p {
        font-size: .78rem;
    }

    .admin-card-head > span {
        padding: .36rem .58rem;
        font-size: .7rem;
    }

    .dashboard-card-title {
        gap: .75rem;
        margin-bottom: .72rem;
    }

    .dashboard-card-title span {
        font-size: .64rem;
    }

    .dashboard-card-title strong {
        font-size: 1.05rem;
    }

    .dashboard-meter,
    .dashboard-status-row i {
        height: 10px;
    }

    .dashboard-mini-grid,
    .dashboard-operation-grid {
        gap: .55rem;
        margin-top: .7rem;
    }

    .dashboard-mini-grid div,
    .dashboard-operation-grid div {
        padding: .62rem;
        border-radius: 12px;
    }

    .dashboard-mini-grid dt,
    .dashboard-operation-grid span {
        font-size: .62rem;
    }

    .dashboard-mini-grid dd,
    .dashboard-operation-grid strong {
        font-size: 1.08rem;
    }

    .dashboard-status-list {
        gap: .52rem;
    }

    .dashboard-status-row > div {
        font-size: .78rem;
    }

    .dashboard-action-grid a,
    .dashboard-feed-item {
        gap: .22rem;
        padding: .72rem;
        border-radius: 13px;
    }

    .dashboard-action-grid .action-card {
        min-height: 152px;
    }

    .dashboard-action-grid .action-icon {
        width: 36px;
        height: 36px;
        border-radius: 12px;
    }

    .dashboard-action-grid .action-icon svg {
        width: 19px;
        height: 19px;
    }

    .dashboard-action-grid small,
    .dashboard-feed-item small,
    .dashboard-security-card p,
    .operation-kpi p,
    .admin-card p,
    .notice-row,
    td {
        font-size: .78rem;
    }

    .dashboard-feed-item + .dashboard-feed-item {
        margin-top: .5rem;
    }

    .dashboard-reminder-list {
        max-height: 330px;
    }

    .admin-body .notice-row {
        padding: .66rem 0;
    }

    .security-check-grid {
        gap: .5rem;
        margin-bottom: .72rem;
    }

    .security-check-grid span {
        padding: .5rem .6rem;
        font-size: .68rem;
    }

    .admin-body th,
    .admin-body td {
        padding: .56rem .62rem;
    }

    .admin-form label,
    .login-card label {
        font-size: .74rem;
        margin-bottom: .68rem;
    }

    .admin-body .admin-form input,
    .admin-body .admin-form textarea,
    .admin-body .admin-form select {
        min-height: 38px;
        padding: .6rem .7rem;
        font-size: .82rem;
    }

    .form-row {
        gap: .65rem;
    }
}

/* Footer video highlights */
.front-body .footer-video-strip {
    position: relative;
    isolation: isolate;
    width: min(calc(100% - clamp(1.25rem, 6vw, 7rem)), 1680px);
    margin: clamp(1.1rem, 2.4vw, 2rem) auto .75rem;
    padding: clamp(1rem, 2vw, 1.45rem);
    overflow: hidden;
    border: 1px solid rgba(23, 36, 63, .09);
    border-radius: 26px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,248,245,.84) 38%, rgba(240,247,240,.76) 66%, rgba(244,239,255,.82)),
        repeating-linear-gradient(135deg, rgba(23,36,63,.03) 0 1px, transparent 1px 18px);
    box-shadow: 0 26px 72px rgba(23, 36, 63, .12);
}

.front-body .footer-video-strip::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 4% 8%, rgba(239, 95, 122, .14), transparent 30%),
        radial-gradient(circle at 96% 18%, rgba(106, 63, 176, .12), transparent 31%),
        linear-gradient(90deg, rgba(239,95,122,.7), rgba(242,138,46,.62), rgba(86,107,58,.56), rgba(31,95,153,.58), rgba(106,63,176,.68)) top / 100% 5px no-repeat;
    pointer-events: none;
}

.front-body .footer-video-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: clamp(.85rem, 1.7vw, 1.25rem);
}

.front-body .footer-video-head .eyebrow {
    margin: 0 0 .35rem;
    color: #9f2852;
}

.front-body .footer-video-head h2 {
    max-width: 680px;
    margin: 0;
    color: #17243f;
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 3vw, 2.55rem);
    line-height: 1.05;
}

.front-body .footer-video-head p:not(.eyebrow) {
    max-width: 760px;
    margin: .45rem 0 0;
    color: rgba(23, 36, 63, .68);
    font-size: .98rem;
    line-height: 1.62;
}

.front-body .footer-video-head > a {
    flex: 0 0 auto;
    padding: .78rem 1rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #ef5f7a, #6a3fb0);
    color: #fff;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 14px 34px rgba(106, 63, 176, .24);
}

.front-body .footer-video-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(.75rem, 1.5vw, 1rem);
}

.front-body .footer-video-card {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(132px, 42%) minmax(0, 1fr);
    overflow: hidden;
    min-height: 166px;
    border: 1px solid rgba(23, 36, 63, .1);
    border-radius: 20px;
    background: rgba(255, 255, 255, .82);
    color: #17243f;
    text-decoration: none;
    box-shadow: 0 18px 42px rgba(23, 36, 63, .1);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.front-body .footer-video-card:hover {
    transform: translateY(-3px);
    border-color: rgba(159, 40, 82, .22);
    box-shadow: 0 26px 58px rgba(23, 36, 63, .16);
}

.front-body .footer-video-thumb {
    position: relative;
    display: block;
    min-height: 166px;
    overflow: hidden;
    background: #17243f;
}

.front-body .footer-video-thumb img {
    width: 100%;
    height: 100%;
    min-height: 166px;
    display: block;
    object-fit: cover;
    filter: saturate(1.04) contrast(1.02);
    transition: transform .25s ease;
}

.front-body .footer-video-card:hover .footer-video-thumb img {
    transform: scale(1.045);
}

.front-body .footer-video-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(23,36,63,.28), rgba(86,107,58,.18), rgba(106,63,176,.26)),
        linear-gradient(0deg, rgba(23,36,63,.42), transparent 58%);
}

.front-body .footer-video-thumb i {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, .88);
    color: #9f2852;
    box-shadow: 0 16px 34px rgba(23,36,63,.24);
}

.front-body .footer-video-thumb svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
    transform: translateX(2px);
}

.front-body .footer-video-thumb b {
    position: absolute;
    left: .7rem;
    top: .7rem;
    z-index: 2;
    padding: .36rem .56rem;
    border-radius: 999px;
    background: rgba(255,255,255,.86);
    color: #17243f;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.front-body .footer-video-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: .38rem;
    padding: clamp(.85rem, 1.6vw, 1.15rem);
}

.front-body .footer-video-copy small {
    color: #9f2852;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.front-body .footer-video-copy strong {
    color: #17243f;
    font-size: clamp(.98rem, 1.4vw, 1.18rem);
    line-height: 1.24;
}

.front-body .footer-video-copy em {
    color: rgba(23, 36, 63, .64);
    font-size: .86rem;
    line-height: 1.48;
    font-style: normal;
}

.front-body .footer-video-strip + .site-footer.footer-with-photo {
    margin-top: 0 !important;
}

@media (max-width: 1180px) {
    .front-body .footer-video-grid {
        grid-template-columns: 1fr;
    }

    .front-body .footer-video-card {
        grid-template-columns: minmax(180px, 32%) minmax(0, 1fr);
    }
}

@media (max-width: 720px) {
    .front-body .footer-video-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .front-body .footer-video-card {
        grid-template-columns: 1fr;
    }

    .front-body .footer-video-thumb,
    .front-body .footer-video-thumb img {
        min-height: 190px;
    }
}

/* Dynamic page editor + refined static-page reading surface */
.admin-body .dynamic-page-editor-form {
    display: grid;
    gap: 1rem;
}

.admin-body .dynamic-page-editor-form .admin-fieldset {
    display: grid;
    gap: .9rem;
    background:
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,250,252,.9)),
        repeating-linear-gradient(135deg, rgba(15,23,42,.026) 0 1px, transparent 1px 16px);
}

.admin-body .dynamic-page-editor-form .banner-preview {
    width: 100%;
    max-height: 210px;
    object-fit: cover;
    border-radius: 16px;
    border: 1px solid rgba(15, 23, 42, .1);
    box-shadow: 0 16px 34px rgba(15, 23, 42, .12);
}

.admin-body .page-block-editor .block-editor-canvas {
    min-height: 320px;
    background:
        linear-gradient(180deg, #ffffff, #fffefe),
        repeating-linear-gradient(0deg, rgba(15,23,42,.025) 0 1px, transparent 1px 34px);
}

.admin-body .page-block-editor .block-editor-toolbar button {
    font-size: .78rem;
}

.front-body .dynamic-content-section {
    width: min(1120px, calc(100% - clamp(1.25rem, 5vw, 5rem)));
}

.front-body .dynamic-content-card {
    position: relative;
    overflow: hidden;
    max-width: 920px;
    margin: 0 auto;
    padding: clamp(1.35rem, 3vw, 2.5rem);
}

.front-body .dynamic-content-card::before,
.front-body .dynamic-contact-info::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 8% 0%, rgba(239, 95, 122, .12), transparent 32%),
        radial-gradient(circle at 100% 10%, rgba(106, 63, 176, .10), transparent 30%),
        linear-gradient(90deg, rgba(242,138,46,.55), rgba(86,107,58,.55), rgba(31,95,153,.55), rgba(106,63,176,.55)) top / 100% 5px no-repeat;
}

.front-body .dynamic-content-kicker {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: clamp(1rem, 2vw, 1.5rem);
    padding-bottom: .85rem;
    border-bottom: 1px solid rgba(23, 36, 63, .1);
}

.front-body .dynamic-content-kicker span {
    color: #9f2852;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.front-body .dynamic-content-kicker small {
    color: rgba(23, 36, 63, .58);
    font-size: .86rem;
    font-weight: 800;
}

.front-body .dynamic-page-prose {
    position: relative;
    z-index: 1;
    max-width: 760px;
}

.front-body .dynamic-page-prose h2,
.front-body .dynamic-page-prose h3 {
    color: #17243f;
    font-family: var(--font-display);
    letter-spacing: 0;
}

.front-body .dynamic-page-prose h2 {
    font-size: clamp(1.75rem, 3.4vw, 2.65rem);
}

.front-body .dynamic-page-prose h3 {
    font-size: clamp(1.28rem, 2.2vw, 1.65rem);
}

.front-body .contact-layout {
    grid-template-columns: minmax(0, .9fr) minmax(360px, .7fr);
    gap: clamp(1.1rem, 3vw, 2.2rem);
    align-items: start;
}

.front-body .dynamic-contact-info {
    position: relative;
    overflow: hidden;
    padding: clamp(1.25rem, 2.8vw, 2.15rem);
    border-radius: 24px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 26px 70px rgba(23, 36, 63, .11);
}

.front-body .dynamic-contact-info .article-prose {
    position: relative;
    z-index: 1;
    max-width: none;
}

.front-body .dynamic-contact-info .article-prose p {
    line-height: 1.78;
}

.front-body .contact-layout .form-card {
    border-radius: 24px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,248,245,.88)),
        repeating-linear-gradient(135deg, rgba(23,36,63,.026) 0 1px, transparent 1px 18px);
    box-shadow: 0 26px 70px rgba(23, 36, 63, .11);
}

@media (max-width: 980px) {
    .front-body .contact-layout {
        grid-template-columns: 1fr;
    }
}

/* Executive Dashboard flow: monitoring first, operational detail second. */
.dashboard-dual-grid,
.dashboard-status-row-wrap {
    display: grid;
    gap: 1rem;
    margin-bottom: 1rem;
}

.dashboard-dual-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}

.dashboard-status-row-wrap {
    grid-template-columns: minmax(0, 1fr);
}

.dashboard-monitoring-row .user-activity-kpi,
.dashboard-monitoring-row .dashboard-reminder-chart-panel,
.dashboard-reminder-content-row .dashboard-reminder-panel,
.dashboard-reminder-content-row .content-kpi {
    height: 100%;
}

.dashboard-contact-card {
    margin-bottom: 1rem;
}

.dashboard-contact-list {
    display: grid;
    gap: .65rem;
}

.dashboard-contact-item {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    padding: .85rem .95rem;
    border: 1px solid rgba(148,163,184,.2);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(248,250,252,.7));
}

.dashboard-contact-copy {
    min-width: 0;
    flex: 1;
}

.dashboard-contact-copy strong,
.dashboard-contact-copy small,
.dashboard-contact-copy p {
    display: block;
}

.dashboard-contact-copy strong {
    color: #18212d;
    font-weight: 900;
}

.dashboard-contact-copy small {
    margin-top: .16rem;
    color: #64748b;
    font-size: .78rem;
}

.dashboard-contact-copy p {
    margin: .45rem 0 0;
    color: #475569;
    font-size: .88rem;
    line-height: 1.5;
}

.dashboard-contact-delete-form {
    flex: 0 0 auto;
}

.dashboard-contact-delete-form .table-action-icon {
    min-width: 38px;
    min-height: 38px;
}

.dashboard-empty-message {
    margin: 0;
    padding: 1rem;
    color: #64748b;
    border: 1px dashed rgba(148,163,184,.35);
    border-radius: 14px;
    text-align: center;
}

.dashboard-security-strip {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: .9rem;
    padding-top: .9rem;
    border-top: 1px solid rgba(148,163,184,.17);
}

.dashboard-security-strip span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .38rem .62rem;
    border-radius: 999px;
    color: #176b5f;
    background: rgba(20,184,166,.1);
    font-size: .72rem;
    font-weight: 850;
}

.dashboard-security-strip span::before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34,197,94,.14);
    content: "";
}

/* Premium contact page */
.front-body .contact-premium-section {
    width: min(1480px, calc(100% - 2rem));
}

.front-body .contact-premium-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.22fr) minmax(280px, .52fr);
    gap: clamp(.85rem, 1.7vw, 1.25rem);
    align-items: stretch;
}

.front-body .contact-location-card,
.front-body .contact-map-card,
.front-body .contact-message-card,
.front-body .contact-info-tile {
    border: 1px solid rgba(23,36,63,.1);
    background:
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,255,255,.78)),
        radial-gradient(circle at 100% 0, rgba(106,63,176,.1), transparent 34%);
    box-shadow: 0 24px 70px rgba(23,36,63,.1);
}

.front-body .contact-location-card {
    display: grid;
    grid-template-columns: minmax(330px, .9fr) minmax(0, 1fr);
    overflow: hidden;
    border-radius: 28px;
}

.front-body .contact-location-photo {
    position: relative;
    min-height: 330px;
    overflow: hidden;
}

.front-body .contact-location-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.05) contrast(1.02);
}

.front-body .contact-location-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15,23,42,.04), rgba(15,23,42,.46));
}

.front-body .contact-location-photo span {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    z-index: 1;
    padding: .48rem .72rem;
    border: 1px solid rgba(255,255,255,.34);
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    color: #fff;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .1em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
}

.front-body .contact-location-copy {
    display: grid;
    align-content: center;
    gap: .62rem;
    min-width: 0;
    padding: clamp(1.15rem, 2.45vw, 2rem);
}

.front-body .contact-location-copy h2,
.front-body .contact-card-head h3 {
    margin: 0;
    color: #17243f;
    font-family: var(--font-display);
    letter-spacing: 0;
}

.front-body .contact-location-copy h2 {
    max-width: 720px;
    font-size: clamp(1.8rem, 3.35vw, 3.25rem);
    line-height: 1.02;
    overflow-wrap: anywhere;
}

.front-body .contact-location-copy p {
    max-width: 620px;
    margin: 0;
    color: rgba(23,36,63,.72);
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.58;
    overflow-wrap: anywhere;
}

.front-body .contact-location-copy address {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    margin: .2rem 0 0;
    padding: .75rem .9rem;
    border: 1px solid rgba(23,36,63,.08);
    border-left: 4px solid #f28a2e;
    border-radius: 16px;
    background: rgba(255,255,255,.72);
    color: #17243f;
    font-style: normal;
    font-weight: 900;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.front-body .contact-info-stack {
    display: grid;
    align-content: start;
    gap: .65rem;
}

.front-body .contact-info-tile {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: .62rem;
    align-items: center;
    min-height: 104px;
    padding: .72rem;
    border-radius: 18px;
}

.front-body .contact-info-tile.hours {
    --tile-color: #1f5f99;
}

.front-body .contact-info-tile.phone {
    --tile-color: #566b3a;
}

.front-body .contact-tile-icon {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--tile-color), color-mix(in srgb, var(--tile-color) 66%, #17243f));
    color: #fff;
    box-shadow: 0 16px 30px color-mix(in srgb, var(--tile-color) 24%, transparent);
}

.front-body .contact-tile-icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.front-body .contact-info-tile small,
.front-body .contact-card-head span {
    color: rgba(23,36,63,.56);
    font-size: .64rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.front-body .contact-info-tile strong {
    display: block;
    margin-top: .16rem;
    color: #17243f;
    font-size: .98rem;
    font-weight: 950;
    line-height: 1.12;
}

.front-body .contact-info-tile p {
    margin: .22rem 0 0;
    color: rgba(23,36,63,.68);
    font-size: .76rem;
    font-weight: 750;
    line-height: 1.4;
}

.front-body .contact-action-grid {
    display: grid;
    grid-template-columns: minmax(0, .96fr) minmax(360px, .7fr);
    gap: clamp(.85rem, 1.7vw, 1.25rem);
    align-items: start;
    margin-top: clamp(1rem, 2vw, 1.5rem);
}

.front-body .contact-map-card,
.front-body .contact-message-card {
    overflow: hidden;
    border-radius: 22px;
    padding: clamp(.85rem, 1.7vw, 1.15rem);
}

.front-body .contact-card-head {
    display: grid;
    gap: .22rem;
    margin-bottom: .85rem;
}

.front-body .contact-card-head h3 {
    font-size: clamp(1.35rem, 2.6vw, 2.25rem);
    line-height: 1.02;
}

.front-body .contact-card-head span {
    max-width: 520px;
    letter-spacing: 0;
    line-height: 1.45;
    text-transform: none;
}

.front-body .contact-map-card iframe {
    display: block;
    width: 100%;
    min-height: 340px;
    border: 0;
    border-radius: 18px;
    background: #eef2f7;
}

.front-body .contact-map-link {
    display: inline-flex;
    margin-top: .82rem;
    padding: .64rem .9rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #17243f, #1f5f99);
    color: #fff;
    font-weight: 950;
    text-decoration: none;
    box-shadow: 0 14px 30px rgba(31,95,153,.18);
}

.front-body .contact-message-card {
    display: grid;
    gap: .78rem;
}

.front-body .contact-message-card label {
    display: grid;
    gap: .34rem;
    margin: 0;
    color: rgba(23,36,63,.7);
    font-size: .78rem;
    font-weight: 950;
    letter-spacing: .04em;
}

.front-body .contact-message-card input,
.front-body .contact-message-card textarea {
    width: 100%;
    border: 1px solid rgba(23,36,63,.12);
    border-radius: 14px;
    background: rgba(248,250,252,.82);
    color: #111827;
    font: inherit;
    letter-spacing: 0;
    outline: none;
    padding: .78rem .9rem;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.front-body .contact-message-card textarea {
    resize: vertical;
    min-height: 128px;
}

.front-body .contact-message-card input:focus,
.front-body .contact-message-card textarea:focus {
    border-color: rgba(31,95,153,.42);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(31,95,153,.1);
}

.front-body .contact-message-card input::placeholder,
.front-body .contact-message-card textarea::placeholder {
    color: #6b7280;
}

.admin-body .admin-help-panel {
    display: grid;
    gap: .35rem;
    margin: 0 0 1rem;
    padding: .9rem 1rem;
    border: 1px solid rgba(14,165,233,.22);
    border-left: 4px solid #0ea5e9;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(240,249,255,.96), rgba(255,255,255,.88));
    color: #334155;
}

.admin-body .admin-help-panel strong {
    color: #0f172a;
    font-size: .94rem;
    font-weight: 950;
}

.admin-body .admin-help-panel p {
    margin: 0;
    color: #475569;
    line-height: 1.55;
}

.admin-body .admin-help-panel code {
    padding: .08rem .28rem;
    border-radius: 6px;
    background: rgba(14,165,233,.12);
    color: #0369a1;
    font-weight: 900;
}

.admin-body .admin-file-note {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem;
    width: fit-content;
    padding: .7rem .9rem;
    border: 1px solid rgba(31,95,153,.16);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(239,246,255,.92), rgba(255,255,255,.78));
    color: #475569;
    font-weight: 800;
}

.admin-body .admin-file-note a {
    color: #1f5f99;
    font-weight: 950;
    text-decoration: none;
}

.admin-body .admin-subsection-title {
    margin: .3rem 0 -.25rem;
    color: #17243f;
    font-size: .86rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.admin-body .two-factor-admin-box {
    display: grid;
    gap: .85rem;
    padding: 1rem;
    border: 1px solid rgba(31,95,153,.16);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(239,246,255,.88), rgba(255,255,255,.94));
    box-shadow: 0 14px 34px rgba(15,23,42,.06);
}

.admin-body .two-factor-admin-box legend {
    padding: 0 .45rem;
    color: #17243f;
    font-size: .82rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.admin-body .two-factor-admin-box p {
    margin: 0;
    color: #64748b;
    font-size: .88rem;
    font-weight: 750;
    line-height: 1.45;
}

.admin-body .two-factor-toggle {
    padding: .75rem .85rem;
    border: 1px solid rgba(14,165,233,.18);
    border-radius: 14px;
    background: rgba(255,255,255,.78);
    color: #0f172a;
    font-weight: 950;
}

.admin-body .two-factor-setup-grid {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 1rem;
    align-items: stretch;
}

.admin-body .two-factor-qr-card,
.admin-body .two-factor-secret-card {
    display: grid;
    gap: .65rem;
    padding: .9rem;
    border: 1px solid rgba(148,163,184,.22);
    border-radius: 16px;
    background: rgba(255,255,255,.86);
}

.admin-body .two-factor-qr-card img {
    width: 100%;
    max-width: 220px;
    border-radius: 14px;
    background: #fff;
}

.admin-body .two-factor-secret-card span,
.admin-body .two-factor-qr-card small {
    color: #64748b;
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.admin-body .two-factor-secret-card strong {
    color: #0f172a;
    font-size: 1.1rem;
    font-weight: 950;
}

.admin-body .two-factor-secret-card code {
    display: block;
    padding: .65rem .75rem;
    border-radius: 12px;
    background: #0f172a;
    color: #e0f2fe;
    font-weight: 900;
    word-break: break-word;
}

.admin-body .danger-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 1rem;
    border: 1px solid rgba(220,38,38,.22);
    border-radius: 12px;
    background: #fee2e2;
    color: #991b1b;
    font-weight: 950;
    cursor: pointer;
}

@media (max-width: 860px) {
    .admin-body .two-factor-setup-grid {
        grid-template-columns: 1fr;
    }
}

.front-body .contact-captcha-field {
    grid-template-columns: minmax(0, 1fr) 150px;
    align-items: center;
}

.front-body .contact-honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

@media (max-width: 1180px) {
    .front-body .contact-premium-layout,
    .front-body .contact-action-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .front-body .contact-location-card {
        grid-template-columns: 1fr;
    }

    .front-body .contact-location-photo {
        min-height: 240px;
    }

    .front-body .contact-captcha-field {
        grid-template-columns: 1fr;
    }
}

/* Transaction surfaces: compact colored headers for form and data-list cards. */
.admin-body .admin-grid > .admin-card {
    --transaction-head-start: #078cc8;
    --transaction-head-end: #3269be;
    padding: 1rem !important;
}

.admin-body .admin-grid > .admin-card:nth-child(3n + 2) {
    --transaction-head-start: #bd4f91;
    --transaction-head-end: #8755bb;
}

.admin-body .admin-grid > .admin-card:nth-child(3n) {
    --transaction-head-start: #d58a1f;
    --transaction-head-end: #e15d46;
}

.admin-body .admin-grid > .admin-card::before {
    display: none;
}

.admin-body .admin-grid > .admin-card > h2,
.admin-body .admin-grid > .admin-card > .admin-card-head {
    position: relative;
    z-index: 1;
    min-height: 62px;
    margin: -1rem -1rem 1rem !important;
    padding: .82rem 1rem !important;
    border: 0 !important;
    border-radius: 21px 21px 14px 14px;
    background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.14) 0 1px, transparent 1px 11px),
        linear-gradient(135deg, var(--transaction-head-start), var(--transaction-head-end));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 9px 20px color-mix(in srgb, var(--transaction-head-start) 20%, transparent);
}

.admin-body .admin-grid > .admin-card > h2 {
    display: flex;
    align-items: center;
    margin-bottom: 1rem !important;
    color: #fff !important;
    font-size: 1.1rem !important;
    font-weight: 900 !important;
    line-height: 1.15;
    text-shadow: 0 1px 2px rgba(15,23,42,.2);
}

.admin-body .admin-grid > .admin-card > .admin-card-head {
    display: flex;
    align-items: center;
    gap: .8rem;
}

.admin-body .admin-grid > .admin-card > .admin-card-head.stacked {
    align-items: flex-start;
}

.admin-body .admin-grid > .admin-card > .admin-card-head h2,
.admin-body .admin-grid > .admin-card > .admin-card-head h3,
.admin-body .admin-grid > .admin-card > h2::before,
.admin-body .admin-grid > .admin-card > .admin-card-head h2::before,
.admin-body .admin-grid > .admin-card > .admin-card-head h3::before {
    color: #fff !important;
}

.admin-body .admin-grid > .admin-card > h2::before,
.admin-body .admin-grid > .admin-card > .admin-card-head h2::before,
.admin-body .admin-grid > .admin-card > .admin-card-head h3::before {
    background: rgba(255,255,255,.92) !important;
    filter: drop-shadow(0 2px 3px rgba(15,23,42,.18));
}

.admin-body .admin-grid > .admin-card > .admin-card-head p {
    margin: .24rem 0 0;
    color: rgba(255,255,255,.86) !important;
    font-size: .76rem;
    line-height: 1.35;
}

.admin-body .admin-grid > .admin-card > .admin-card-head > span,
.admin-body .admin-grid > .admin-card > .admin-card-head.compact span {
    flex: 0 0 auto;
    border-color: rgba(255,255,255,.34) !important;
    background: rgba(255,255,255,.18) !important;
    color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}

/* Alternating three-color report headers, repeated across each desktop row. */
.front-body .training-report-grid-compact .verified-report-card {
    --report-head-start: #078cc8;
    --report-head-end: #3269be;
    gap: .72rem !important;
    padding: 0 .92rem .92rem !important;
}

.front-body .training-report-grid-compact .verified-report-card:nth-child(3n + 2) {
    --report-head-start: #bd4f91;
    --report-head-end: #8755bb;
}

.front-body .training-report-grid-compact .verified-report-card:nth-child(3n) {
    --report-head-start: #d58a1f;
    --report-head-end: #e15d46;
}

.front-body .training-report-grid-compact .verified-report-head {
    min-height: 66px;
    margin: 0 -.92rem;
    padding: .72rem .92rem;
    border-radius: 21px 21px 14px 14px;
    background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.15) 0 1px, transparent 1px 11px),
        linear-gradient(135deg, var(--report-head-start), var(--report-head-end));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.27), 0 8px 18px color-mix(in srgb, var(--report-head-start) 18%, transparent);
}

.front-body .training-report-grid-compact .verified-title p,
.front-body .training-report-grid-compact .verified-title h2,
.front-body .training-report-grid-compact .verified-title small {
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(15,23,42,.18);
}

.front-body .training-report-grid-compact .verified-logo-wrap {
    border-color: rgba(255,255,255,.52);
    background: rgba(255,255,255,.94);
    box-shadow: 0 8px 18px rgba(15,23,42,.16);
}

.front-body .training-report-grid-compact .verified-status {
    border-color: rgba(255,255,255,.35);
    background: rgba(255,255,255,.2);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.24);
}

@media (max-width: 760px) {
    .admin-body .admin-grid > .admin-card > h2,
    .admin-body .admin-grid > .admin-card > .admin-card-head {
        min-height: 58px;
        margin: -.85rem -.85rem .85rem !important;
        padding: .72rem .85rem !important;
        border-radius: 17px 17px 12px 12px;
    }

    .admin-body .admin-grid > .admin-card {
        padding: .85rem !important;
    }

    .front-body .training-report-grid-compact .verified-report-card {
        padding: 0 .72rem .72rem !important;
    }

    .front-body .training-report-grid-compact .verified-report-head {
        min-height: 62px;
        margin: 0 -.72rem;
        padding: .68rem .72rem;
        border-radius: 17px 17px 12px 12px;
    }
}

/* Compact Back Panel sidebar: one clear logout label and subtle group dividers. */
.admin-body .admin-user .admin-logout-link {
    min-width: 0 !important;
    padding: .34rem .52rem !important;
    font-size: .74rem !important;
    line-height: 1 !important;
    white-space: nowrap;
}

.admin-body .admin-user .admin-logout-link::before {
    content: none !important;
    display: none !important;
}

.admin-body .admin-user .admin-logout-link > span:last-child {
    display: inline !important;
    font: inherit !important;
}

.admin-body .admin-menu-group + .admin-menu-group {
    margin-top: .04rem !important;
    padding-top: .38rem !important;
    border-top: 1px solid rgba(232, 240, 234, .09) !important;
}

.admin-body .admin-menu-heading {
    padding-bottom: .12rem !important;
}

/* Final action-icon overrides: keep semantic button colors despite shared table-link rules above. */
.admin-body .action-cell .table-action-icon.table-action-edit:hover {
    background: #edf7ef !important;
    border-color: #94c5a1 !important;
    color: #35563b !important;
}
.admin-body .action-cell .table-action-icon.table-action-view:hover {
    background: #edf8fd !important;
    border-color: #83c3e2 !important;
    color: #145b82 !important;
}
.admin-body .action-cell .table-action-icon.table-action-delete:hover {
    background: #fff0f0 !important;
    border-color: #e89da0 !important;
    color: #a92830 !important;
}

/* Login conflict messages may be longer than the viewport: preserve every line and allow safe scrolling. */
.login-body {
    align-items: flex-start;
    box-sizing: border-box;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    padding: clamp(1.1rem, 3vh, 2rem) 1rem;
}
.login-card {
    box-sizing: border-box;
    margin: auto 0;
    max-width: 100%;
}
.login-card .flash.session-conflict {
    box-sizing: border-box;
    margin: 0 0 1rem;
    max-height: min(42dvh, 22rem);
    overflow: auto;
    overflow-wrap: anywhere;
    overscroll-behavior: contain;
    padding: .95rem 1rem;
    scrollbar-color: rgba(146, 64, 14, .45) transparent;
    text-wrap: pretty;
    word-break: normal;
}
.login-card .flash.session-conflict::-webkit-scrollbar { width: 7px; }
.login-card .flash.session-conflict::-webkit-scrollbar-thumb { background: rgba(146, 64, 14, .38); border-radius: 99px; }
@media (max-height: 720px) {
    .login-body { padding-block: .8rem; }
    .login-card { padding: 1.3rem 1.1rem !important; }
    .login-card img { max-width: 74px; margin-bottom: .55rem; }
    .login-card h1 { margin-bottom: .8rem; }
    .login-card .flash.session-conflict { max-height: 34dvh; }
}

/* Global Back Panel data grid standard: pinned headers, sortable columns, and calm zebra rows. */
.admin-body .table-wrap,
.admin-body .online-table-wrap {
    position: relative;
    max-height: min(66vh, 680px);
    overflow: auto;
    overscroll-behavior: contain;
}

.admin-body .table-wrap table,
.admin-body .online-table-wrap table {
    min-width: 100%;
}

.admin-body .table-wrap thead th,
.admin-body .online-table-wrap thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: .7rem .82rem;
    border-top: 0;
    border-bottom: 1px solid rgba(255,255,255,.26);
    background: linear-gradient(135deg, #165f66 0%, #277a74 52%, #5d7153 100%);
    color: #fff;
    box-shadow: 0 3px 8px rgba(15, 23, 42, .14);
}

.admin-body .table-wrap thead th:first-child,
.admin-body .online-table-wrap thead th:first-child {
    border-top-left-radius: 14px;
}

.admin-body .table-wrap thead th:last-child,
.admin-body .online-table-wrap thead th:last-child {
    border-top-right-radius: 14px;
}

.admin-body .table-sort-trigger {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 14px;
    align-items: center;
    width: 100%;
    min-height: 18px;
    gap: .45rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 900;
    letter-spacing: .06em;
    line-height: 1.2;
    text-align: left;
    text-transform: uppercase;
    cursor: pointer;
}

.admin-body .table-sort-label {
    min-width: 0;
}

.admin-body .table-sort-trigger::after {
    content: "\2195";
    display: grid;
    place-items: center;
    width: 14px;
    height: 18px;
    border-radius: 5px;
    background: rgba(255,255,255,.15);
    color: rgba(255,255,255,.86);
    font-size: .84rem;
    font-weight: 900;
    line-height: 1;
}

.admin-body .table-sort-trigger[data-sort-direction="asc"]::after { content: "\2191"; background: rgba(255,255,255,.28); color: #fff; }
.admin-body .table-sort-trigger[data-sort-direction="desc"]::after { content: "\2193"; background: rgba(255,255,255,.28); color: #fff; }
.admin-body .table-sort-trigger:focus-visible { outline: 2px solid #f6cf75; outline-offset: 3px; border-radius: 4px; }

.admin-body .table-wrap tbody tr:nth-child(4n + 1) > td,
.admin-body .online-table-wrap tbody tr:nth-child(4n + 1) > td { background-color: #f2f8ff; }
.admin-body .table-wrap tbody tr:nth-child(4n + 2) > td,
.admin-body .online-table-wrap tbody tr:nth-child(4n + 2) > td { background-color: #f1faf5; }
.admin-body .table-wrap tbody tr:nth-child(4n + 3) > td,
.admin-body .online-table-wrap tbody tr:nth-child(4n + 3) > td { background-color: #fff9ed; }
.admin-body .table-wrap tbody tr:nth-child(4n) > td,
.admin-body .online-table-wrap tbody tr:nth-child(4n) > td { background-color: #fff4f6; }

.admin-body .table-wrap tbody tr:hover > td,
.admin-body .online-table-wrap tbody tr:hover > td {
    background-color: color-mix(in srgb, var(--admin-page-accent, #277a74) 12%, #ffffff);
}

.login-card .flash.session-conflict {
    white-space: pre-line;
    border-color: rgba(180, 83, 9, .36);
    background: linear-gradient(135deg, #fff8e7, #fff1d4);
    color: #7c2d12;
    text-align: left;
    line-height: 1.55;
}

@media (max-width: 780px) {
    .admin-body .table-wrap,
    .admin-body .online-table-wrap { max-height: 58vh; border-radius: 14px; }
    .admin-body .table-wrap thead th,
    .admin-body .online-table-wrap thead th { padding: .62rem .7rem; }
    .admin-body .table-sort-trigger { min-width: 92px; font-size: .68rem; }
}

/* Compact desktop sidebar: keep the full navigation visible without weakening labels. */
@media (min-width: 781px) {
    .admin-body {
        grid-template-columns: 292px minmax(0, 1fr) !important;
    }

    .admin-sidebar {
        gap: .42rem !important;
        padding: .58rem .54rem .62rem !important;
    }

    .admin-sidebar .admin-brand {
        min-height: 62px !important;
        gap: .48rem !important;
        padding: .3rem .14rem !important;
        margin: 0 !important;
    }

    .admin-sidebar .admin-brand img {
        width: 44px !important;
        height: 44px !important;
    }

    .admin-sidebar .admin-brand span {
        gap: .16rem !important;
    }

    .admin-sidebar .admin-brand strong {
        font-size: .84rem !important;
        line-height: 1.05 !important;
    }

    .admin-sidebar .admin-brand small {
        min-height: 17px !important;
        padding: .1rem .36rem !important;
        font-size: .54rem !important;
        letter-spacing: .12em !important;
    }

    .admin-sidebar .admin-menu {
        gap: .04rem !important;
        padding: .12rem 0 .18rem !important;
    }

    .admin-sidebar .admin-menu-group {
        gap: .1rem !important;
        padding: .14rem 0 .16rem !important;
    }

    .admin-sidebar .admin-menu-group + .admin-menu-group {
        margin-top: 0 !important;
        padding-top: .3rem !important;
    }

    .admin-sidebar .admin-menu-heading,
    .admin-sidebar .admin-menu-group:has(a.active) .admin-menu-heading {
        min-height: 14px !important;
        padding: 0 .5rem .1rem !important;
        font-size: .52rem !important;
        letter-spacing: .13em !important;
        line-height: 1.1 !important;
    }

    .admin-sidebar .admin-menu-items {
        gap: .08rem !important;
    }

    .admin-sidebar .admin-menu a {
        min-height: 36px !important;
        padding: .3rem .5rem !important;
        gap: .5rem !important;
        border-radius: 10px !important;
    }

    .admin-sidebar .admin-menu a::before {
        top: 7px !important;
        bottom: 7px !important;
        width: 3px !important;
    }

    .admin-sidebar .admin-menu a .menu-icon,
    .admin-sidebar .admin-menu a:hover .menu-icon,
    .admin-sidebar .admin-menu a.active .menu-icon {
        width: 20px !important;
        height: 20px !important;
        flex-basis: 20px !important;
    }

    .admin-sidebar .admin-menu .menu-icon .admin-fa-icon,
    .admin-sidebar .admin-menu a:hover .menu-icon .admin-fa-icon,
    .admin-sidebar .admin-menu a.active .menu-icon .admin-fa-icon {
        width: 17px !important;
        height: 17px !important;
        font-size: 17px !important;
    }

    .admin-sidebar .admin-menu .menu-label {
        font-size: .74rem !important;
        line-height: 1 !important;
        min-width: 0;
        white-space: nowrap;
    }

    .admin-sidebar .admin-user {
        min-height: 58px !important;
        gap: .42rem !important;
        padding: .44rem .48rem !important;
        border-radius: 13px !important;
    }

    .admin-sidebar .admin-user-photo {
        width: 38px !important;
        height: 38px !important;
    }

    .admin-sidebar .admin-user strong {
        font-size: .75rem !important;
        line-height: 1.05 !important;
    }

    .admin-sidebar .admin-user small {
        font-size: .63rem !important;
    }

    .admin-sidebar .admin-user .admin-logout-link {
        min-height: 28px !important;
        padding: .28rem .42rem !important;
        font-size: .64rem !important;
    }
}

/* Compact, light-weight executive KPI cards on the Back Panel dashboard. */
.stats-grid.executive-stats {
    gap: .8rem;
    margin-bottom: .85rem;
}

.stats-grid.executive-stats .executive-stat-link {
    --stat-accent: #159c68;
    --stat-soft: #e7f8ef;
    --stat-border: #b9e7ce;
    position: relative;
    min-height: 122px;
    align-content: start;
    gap: .18rem;
    padding: .88rem .95rem .78rem;
    overflow: hidden;
    border: 1px solid var(--stat-border);
    border-radius: 18px;
    color: #10233a;
    background:
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--stat-accent) 16%, transparent) 0 19%, transparent 20%),
        linear-gradient(135deg, rgba(255,255,255,.98), var(--stat-soft));
    box-shadow: 0 12px 28px rgba(15,23,42,.07), inset 0 1px 0 rgba(255,255,255,.92);
}

.stats-grid.executive-stats .executive-stat-link::before {
    inset: 0 auto 0 0;
    width: 4px;
    z-index: 1;
    background: linear-gradient(180deg, var(--stat-accent), color-mix(in srgb, var(--stat-accent) 55%, #ffffff));
}

.stats-grid.executive-stats .executive-stat-link::after {
    top: -32px;
    right: -30px;
    width: 104px;
    height: 104px;
    background: color-mix(in srgb, var(--stat-accent) 12%, transparent);
}

.stats-grid.executive-stats .stat-published { --stat-accent: #14966a; --stat-soft: #eaf9f1; --stat-border: #b8e5cf; }
.stats-grid.executive-stats .stat-draft { --stat-accent: #d38a1e; --stat-soft: #fff6e5; --stat-border: #f0d39d; }
.stats-grid.executive-stats .stat-chapters { --stat-accent: #2d77d6; --stat-soft: #edf5ff; --stat-border: #bfd7f6; }
.stats-grid.executive-stats .stat-achievements { --stat-accent: #c95c6f; --stat-soft: #fff0f2; --stat-border: #f0c4cc; }

.stats-grid.executive-stats .executive-stat-link > * {
    position: relative;
    z-index: 2;
}

.stats-grid.executive-stats .executive-stat-icon {
    position: absolute !important;
    top: .75rem;
    right: .75rem;
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--stat-accent) 19%, #ffffff);
    border-radius: 12px;
    color: var(--stat-accent) !important;
    background: rgba(255,255,255,.72);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--stat-accent) 12%, transparent);
}

.stats-grid.executive-stats .executive-stat-icon .admin-fa-icon {
    width: 16px;
    height: 16px;
    font-size: 16px;
}

.stats-grid.executive-stats .executive-stat-label {
    padding-right: 42px;
    color: color-mix(in srgb, var(--stat-accent) 82%, #1e293b) !important;
    font-size: .66rem !important;
    font-weight: 950 !important;
    letter-spacing: .1em !important;
    line-height: 1.2;
}

.stats-grid.executive-stats .executive-stat-link strong {
    margin-top: .02rem;
    color: #10233a;
    font-size: clamp(2rem, 2.45vw, 2.55rem);
    font-weight: 950;
    letter-spacing: 0;
    line-height: .98;
}

.stats-grid.executive-stats .executive-stat-link small {
    min-height: 17px;
    padding-right: .15rem;
    color: #617086;
    font-size: .69rem;
    font-weight: 750;
    line-height: 1.25;
}

.stats-grid.executive-stats .executive-stat-link em {
    align-self: start;
    margin-top: auto;
    padding: .26rem .46rem;
    border: 1px solid color-mix(in srgb, var(--stat-accent) 18%, #ffffff);
    background: rgba(255,255,255,.68);
    color: var(--stat-accent);
    box-shadow: none;
    font-size: .6rem;
    letter-spacing: .05em;
}

.stats-grid.executive-stats .executive-stat-link:hover,
.stats-grid.executive-stats .executive-stat-link:focus-visible {
    border-color: color-mix(in srgb, var(--stat-accent) 46%, #ffffff);
    box-shadow: 0 16px 30px color-mix(in srgb, var(--stat-accent) 14%, transparent), 0 10px 20px rgba(15,23,42,.08);
    filter: none;
}

@media (max-width: 760px) {
    .stats-grid.executive-stats .executive-stat-link {
        min-height: 114px;
        padding: .8rem .85rem .7rem;
    }
}

/* Android navigation must be outside the header clipping layer. This stays last. */
@media (max-width: 1020px) {
    .front-body .site-header,
    .front-body[class*="theme-"] .site-header {
        overflow: visible !important;
        z-index: 10020 !important;
    }

    .front-body .nav-toggle {
        position: relative !important;
        z-index: 10031 !important;
        flex: 0 0 44px !important;
        width: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        margin-left: auto !important;
        padding: 0 !important;
        touch-action: manipulation;
    }

    .front-body .site-nav {
        position: fixed !important;
        top: calc(env(safe-area-inset-top) + 72px) !important;
        right: .65rem !important;
        bottom: .65rem !important;
        left: .65rem !important;
        z-index: 10030 !important;
        display: none !important;
        width: auto !important;
        max-height: none !important;
        padding: .6rem !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        border-radius: 18px !important;
        background: rgba(255,255,255,.98) !important;
        box-shadow: 0 22px 48px rgba(15,23,42,.24) !important;
        pointer-events: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .front-body .site-nav.open {
        display: flex !important;
    }

    .front-body .site-nav::after {
        display: none !important;
    }
}

@media (max-width: 600px) {
    .front-body .site-header,
    .front-body[class*="theme-"] .site-header {
        min-height: 64px !important;
        padding: .45rem .6rem !important;
    }

    .front-body .site-nav {
        top: calc(env(safe-area-inset-top) + 64px) !important;
    }
}

/* Android and touch interaction reliability. Kept last so it wins over legacy responsive rules. */
.nav-toggle-bars,
.admin-sidebar-toggle-bars {
    position: relative;
    display: inline-block;
    width: 18px;
    height: 2px;
    flex: 0 0 18px;
    border-radius: 99px;
    background: currentColor;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after,
.admin-sidebar-toggle-bars::before,
.admin-sidebar-toggle-bars::after {
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    border-radius: 99px;
    background: currentColor;
    content: "";
}

.nav-toggle-bars::before,
.admin-sidebar-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after,
.admin-sidebar-toggle-bars::after { top: 6px; }

.front-body button,
.front-body a,
.admin-body button,
.admin-body a {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.admin-sidebar-toggle,
.admin-sidebar-close,
.admin-sidebar-scrim {
    display: none;
}

@media (max-width: 1020px) {
    .front-body.front-nav-open {
        overflow: hidden;
    }

    .front-body .site-header {
        z-index: 10020;
        isolation: isolate;
    }

    .front-body .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
        min-height: 44px;
        min-width: 86px;
        padding: .6rem .78rem;
        border: 1px solid rgba(201,138,46,.42);
        border-radius: 12px;
        color: #1e2a2f;
        font-size: .78rem;
        font-weight: 800;
        line-height: 1;
        box-shadow: 0 6px 16px rgba(30,42,47,.10);
    }

    .front-body .site-nav {
        position: fixed !important;
        top: calc(env(safe-area-inset-top) + 68px) !important;
        right: .65rem !important;
        bottom: .65rem !important;
        left: .65rem !important;
        display: none !important;
        width: auto !important;
        height: calc(100dvh - 5.3rem) !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: .65rem !important;
        overflow: auto !important;
        overscroll-behavior: contain;
        border: 1px solid rgba(201,138,46,.32);
        border-radius: 18px;
        background: rgba(255,255,255,.98) !important;
        box-shadow: 0 20px 44px rgba(15,23,42,.22);
        -webkit-overflow-scrolling: touch;
    }

    .front-body .site-nav.open {
        display: flex !important;
    }

    .front-body .site-nav > a,
    .front-body .site-nav .nav-parent {
        display: flex;
        align-items: center;
        min-height: 46px;
        padding: .65rem .8rem !important;
        border-radius: 12px;
        font-size: .92rem;
        line-height: 1.25;
        text-align: left;
    }

    .front-body .site-nav .nav-dropdown {
        width: 100%;
    }

    .front-body .site-nav .nav-dropdown-menu {
        position: static !important;
        display: none !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: .2rem 0 .35rem !important;
        padding: .35rem !important;
        border: 1px solid rgba(93,113,83,.18);
        border-radius: 12px;
        background: rgba(93,113,83,.07) !important;
        box-shadow: none !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .front-body .site-nav .nav-dropdown.open .nav-dropdown-menu {
        display: grid !important;
    }

    .front-body .site-nav .nav-dropdown-menu a {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: .58rem .7rem;
        border-radius: 9px;
        line-height: 1.25;
    }

    .front-body .site-nav .language-switcher,
    .front-body .site-nav .language-switcher a {
        min-height: 44px;
    }

    .admin-body {
        display: block !important;
        min-width: 0;
        overflow-x: clip;
    }

    .admin-sidebar-toggle {
        position: fixed;
        top: max(.65rem, env(safe-area-inset-top));
        left: .65rem;
        z-index: 10050;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .45rem;
        min-height: 42px;
        padding: .5rem .68rem;
        border: 1px solid rgba(201,138,46,.58);
        border-radius: 12px;
        background: rgba(24,33,45,.96);
        color: #fff;
        font-size: .76rem;
        font-weight: 850;
        line-height: 1;
        box-shadow: 0 10px 24px rgba(15,23,42,.24);
    }

    .admin-sidebar-scrim {
        position: fixed;
        z-index: 10040;
        inset: 0;
        display: block;
        background: rgba(15,23,42,.52);
        backdrop-filter: blur(2px);
    }

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

    .admin-sidebar {
        position: fixed !important;
        z-index: 10045;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        display: flex !important;
        width: min(84vw, 326px) !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        padding: max(.8rem, env(safe-area-inset-top)) .72rem .72rem !important;
        overflow: hidden !important;
        transform: translateX(-106%);
        transition: transform .22s ease;
        box-shadow: 16px 0 42px rgba(15,23,42,.30);
    }

    .admin-sidebar.is-open {
        transform: translateX(0);
    }

    .admin-sidebar-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        align-self: flex-end;
        min-height: 36px;
        margin: .3rem .15rem .5rem;
        padding: .35rem .65rem;
        border: 1px solid rgba(255,255,255,.26);
        border-radius: 9px;
        background: rgba(255,255,255,.09);
        color: #fff;
        font-size: .71rem;
        font-weight: 800;
    }

    .admin-sidebar .admin-menu {
        display: block !important;
        flex: 1 1 auto;
        min-height: 0;
        margin: 0 -.12rem;
        padding: .12rem;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .admin-sidebar .admin-menu-group {
        display: block !important;
        min-width: 0 !important;
        margin: 0 0 .36rem !important;
        padding: .26rem 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    .admin-sidebar .admin-menu-group-title {
        display: block !important;
        width: auto !important;
        margin: .26rem .4rem .22rem !important;
        padding: 0 !important;
        background: transparent !important;
        white-space: nowrap;
    }

    .admin-sidebar .admin-menu a {
        display: flex !important;
        align-items: center !important;
        min-height: 44px !important;
        margin: .16rem 0 !important;
        padding: .55rem .64rem !important;
        white-space: normal !important;
    }

    .admin-sidebar .admin-menu a span:last-child,
    .admin-sidebar .admin-menu a .admin-menu-label {
        min-width: 0;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    .admin-body.admin-sidebar-open {
        overflow: hidden;
    }

    .admin-main {
        width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        padding-left: .68rem !important;
        padding-right: .68rem !important;
    }

    .admin-topbar {
        min-width: 0;
        padding-left: 4.65rem !important;
    }
}

@media (max-width: 600px) {
    .front-body .site-header {
        min-height: 64px;
        padding-right: .6rem;
        padding-left: .6rem;
    }

    .front-body .site-brand {
        min-width: 0;
    }

    .front-body .site-brand img {
        width: 39px;
        height: 39px;
    }

    .front-body .site-brand strong {
        font-size: .82rem;
        white-space: nowrap;
    }

    .front-body .site-brand small {
        font-size: .65rem;
    }

    .front-body .nav-toggle {
        min-width: 42px;
        padding: .55rem;
    }

    .front-body .nav-toggle > span:last-child {
        display: none;
    }

    .front-body .site-nav {
        top: calc(env(safe-area-inset-top) + 62px) !important;
    }

    .admin-sidebar-toggle {
        min-width: 42px;
        padding: .55rem;
    }

    .admin-sidebar-toggle > span:last-child {
        display: none;
    }

    .admin-main {
        padding-right: .5rem !important;
        padding-left: .5rem !important;
    }

    .admin-topbar {
        padding-left: 3.85rem !important;
    }
}

/* Public GIS preview on the home page: map is view-only until the OTP-protected route is opened. */
.front-body.home-page .home-gis-preview {
    position: relative;
    isolation: isolate;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    padding: clamp(1rem, 2vw, 1.5rem);
    overflow: hidden;
    border: 1px solid rgba(93, 113, 83, .2);
    border-radius: 26px;
    background:
        radial-gradient(circle at 88% 2%, rgba(201, 138, 46, .16), transparent 30%),
        linear-gradient(135deg, rgba(255, 255, 255, .97), rgba(242, 247, 240, .94));
    box-shadow: 0 20px 42px rgba(23, 32, 51, .08);
}

.front-body.home-page .home-gis-preview::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background-image: linear-gradient(rgba(93, 113, 83, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(93, 113, 83, .055) 1px, transparent 1px);
    background-size: 22px 22px;
    content: '';
    mask-image: linear-gradient(90deg, #000, transparent 82%);
}

.front-body.home-page .home-gis-preview-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.front-body.home-page .home-gis-preview-head .eyebrow {
    margin-bottom: .35rem;
    color: #947022;
}

.front-body.home-page .home-gis-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
}

.front-body.home-page .home-gis-eyebrow img {
    width: 22px;
    height: 22px;
    padding: 3px;
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 4px 10px rgba(23, 32, 51, .12);
    object-fit: contain;
}

.front-body.home-page .home-gis-preview-head h2 {
    margin: 0;
    color: #172033;
    font-size: clamp(1.45rem, 2.5vw, 2.15rem);
    line-height: 1.06;
}

.front-body.home-page .home-gis-preview-head p:not(.eyebrow) {
    max-width: 650px;
    margin: .46rem 0 0;
    color: #60708a;
    font-size: .92rem;
    line-height: 1.55;
}

.front-body.home-page .home-gis-open-link {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .62rem;
    min-width: 180px;
    padding: .56rem .78rem;
    border: 1px solid rgba(201, 138, 46, .34);
    border-radius: 16px;
    background: rgba(255, 255, 255, .62);
    box-shadow: 0 8px 20px rgba(23, 32, 51, .07);
    color: #172033;
    text-decoration: none;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.front-body.home-page .home-gis-open-link:hover {
    border-color: #c98a2e;
    box-shadow: 0 12px 24px rgba(201, 138, 46, .16);
    color: #172033;
    transform: translateY(-2px);
}

.front-body.home-page .home-gis-lock,
.front-body.home-page .home-gis-access-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 12px;
    background: linear-gradient(145deg, #d9a33c, #af7721);
    box-shadow: 0 8px 15px rgba(201, 138, 46, .23);
}

.front-body.home-page .home-gis-lock {
    width: 32px;
    height: 32px;
}

.front-body.home-page .home-gis-lock svg,
.front-body.home-page .home-gis-access-icon svg {
    width: 17px;
    height: 17px;
    fill: #fff;
}

.front-body.home-page .home-gis-open-link small,
.front-body.home-page .home-gis-open-link strong {
    display: block;
    line-height: 1.15;
}

.front-body.home-page .home-gis-open-link small {
    margin-bottom: .13rem;
    color: #7a879a;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.front-body.home-page .home-gis-open-link strong {
    font-size: .84rem;
}

.front-body.home-page .home-gis-preview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(250px, .75fr);
    gap: 1rem;
    align-items: stretch;
}

.front-body.home-page .home-gis-map-frame {
    position: relative;
    min-height: 320px;
    overflow: hidden;
    border: 1px solid rgba(93, 113, 83, .22);
    border-radius: 20px;
    background: #d9edf5;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.34), 0 14px 30px rgba(23, 32, 51, .09);
}

.front-body.home-page .home-gis-map-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 320px;
    border: 0;
    filter: saturate(.8) contrast(.96);
    pointer-events: none;
}

.front-body.home-page .home-gis-map-tint {
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, rgba(17, 32, 51, .22), transparent 46%, rgba(93, 113, 83, .16));
}

.front-body.home-page .home-gis-map-emboss {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    color: rgba(255,255,255,.3);
    font-size: clamp(2.15rem, 7vw, 5.4rem);
    font-weight: 950;
    letter-spacing: .1em;
    line-height: 1;
    pointer-events: none;
    text-shadow: 0 2px 1px rgba(17, 32, 51, .12), 0 -1px 0 rgba(255,255,255,.18);
    transform: translate(-50%, -50%);
    white-space: nowrap;
}

.front-body.home-page .home-gis-map-hit-area {
    position: absolute;
    z-index: 3;
    inset: 0;
}

.front-body.home-page .home-gis-preview-pins {
    position: absolute;
    z-index: 4;
    inset: 0;
    pointer-events: none;
}

.front-body.home-page .home-gis-preview-pin {
    position: absolute;
    top: var(--pin-y);
    left: var(--pin-x);
    display: grid;
    width: 16px;
    height: 16px;
    place-items: center;
    border: 2px solid rgba(255,255,255,.96);
    border-radius: 50% 50% 50% 0;
    background: linear-gradient(145deg, #e7b54b, #a96d18);
    box-shadow: 0 3px 8px rgba(23,32,51,.36), 0 0 0 3px rgba(231,181,75,.18);
    cursor: pointer;
    pointer-events: auto;
    text-decoration: none;
    transform: translate(-50%, -100%) rotate(-45deg);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.front-body.home-page .home-gis-preview-pin i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #fff;
    transform: rotate(45deg);
}

.front-body.home-page .home-gis-preview-pin:hover,
.front-body.home-page .home-gis-preview-pin:focus-visible {
    z-index: 5;
    outline: 0;
    background: linear-gradient(145deg, #f8d36d, #c98a2e);
    box-shadow: 0 5px 12px rgba(23,32,51,.42), 0 0 0 5px rgba(231,181,75,.25);
    transform: translate(-50%, -100%) rotate(-45deg) scale(1.16);
}

.front-body.home-page .home-gis-map-gate {
    position: absolute;
    z-index: 5;
    inset: 0;
    display: flex;
    align-items: end;
    justify-content: space-between;
    padding: 1rem;
    color: #fff;
    pointer-events: none;
    text-decoration: none;
}

.front-body.home-page .home-gis-map-badge,
.front-body.home-page .home-gis-map-cta {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 999px;
    background: rgba(17, 32, 51, .7);
    box-shadow: 0 8px 18px rgba(17, 32, 51, .2);
    backdrop-filter: blur(10px);
}

.front-body.home-page .home-gis-map-badge {
    align-self: start;
    padding: .4rem .65rem;
    font-size: .7rem;
    font-weight: 800;
}

.front-body.home-page .home-gis-map-badge i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 4px rgba(74,222,128,.16);
}

.front-body.home-page .home-gis-map-cta {
    padding: .55rem .78rem;
    font-size: .76rem;
    font-weight: 850;
    transition: transform .2s ease, background .2s ease;
}

.front-body.home-page .home-gis-map-cta b {
    color: #f4cf7a;
    font-size: 1rem;
}

.front-body.home-page .home-gis-map-gate:hover .home-gis-map-cta {
    background: rgba(93, 113, 83, .92);
    transform: translateX(3px);
}

.front-body.home-page .home-gis-access-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 1.1rem;
    border: 1px solid rgba(201, 138, 46, .22);
    border-radius: 20px;
    background: linear-gradient(155deg, #1d2a31, #425847);
    box-shadow: 0 14px 28px rgba(23, 32, 51, .14);
    color: #fff;
}

.front-body.home-page .home-gis-access-icon {
    width: 40px;
    height: 40px;
    margin-bottom: .8rem;
    background: linear-gradient(145deg, #f1c455, #c98a2e);
}

.front-body.home-page .home-gis-card-label {
    margin: 0 0 .35rem;
    color: #f5cf7b;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.front-body.home-page .home-gis-access-card h3 {
    margin: 0;
    color: #fff;
    font-size: 1.25rem;
    line-height: 1.18;
}

.front-body.home-page .home-gis-access-card > p:not(.home-gis-card-label) {
    margin: .55rem 0 .9rem;
    color: rgba(255,255,255,.76);
    font-size: .84rem;
    line-height: 1.48;
}

.front-body.home-page .home-gis-access-card dl {
    display: grid;
    gap: .52rem;
    margin: 0;
}

.front-body.home-page .home-gis-access-card dl div {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    padding: .52rem .58rem;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 11px;
    background: rgba(255,255,255,.08);
}

.front-body.home-page .home-gis-access-card dt {
    color: rgba(255,255,255,.64);
    font-size: .7rem;
}

.front-body.home-page .home-gis-access-card dd {
    margin: 0;
    color: #fff;
    font-size: .7rem;
    font-weight: 850;
    text-align: right;
}

.front-body.home-page .home-gis-card-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: auto;
    padding-top: 1rem;
    color: #f7d989;
    font-size: .78rem;
    font-weight: 850;
    text-decoration: none;
}

.front-body.home-page .home-gis-card-link:hover { color: #fff; }
.front-body.home-page .home-gis-card-link span { font-size: 1rem; }

@media (max-width: 880px) {
    .front-body.home-page .home-gis-preview-grid { grid-template-columns: 1fr; }
    .front-body.home-page .home-gis-access-card { min-height: 0; }
}

@media (max-width: 640px) {
    .front-body.home-page .home-gis-preview { margin-top: 1rem; padding: .85rem; border-radius: 20px; }
    .front-body.home-page .home-gis-preview-head { align-items: start; flex-direction: column; }
    .front-body.home-page .home-gis-open-link { width: 100%; }
    .front-body.home-page .home-gis-map-frame,
    .front-body.home-page .home-gis-map-frame iframe { min-height: 260px; }
    .front-body.home-page .home-gis-map-gate { padding: .72rem; }
    .front-body.home-page .home-gis-preview-pin { width: 14px; height: 14px; }
    .front-body.home-page .home-gis-map-emboss { font-size: clamp(1.85rem, 10vw, 3.25rem); }
}

/* Final override: translucent public navigation with a restrained gold cue. */
.front-body .site-nav {
    border-color: rgba(201,138,46,.22) !important;
    background: rgba(255,255,255,.09) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 6px 18px rgba(23,32,51,.035) !important;
    backdrop-filter: blur(10px) saturate(1.04) !important;
}

.front-body .site-nav > a.active,
.front-body .nav-dropdown.active > .nav-parent {
    color: #172033 !important;
    background: rgba(255,255,255,.14) !important;
    box-shadow: inset 0 -2px 0 #c98a2e, 0 4px 12px rgba(201,138,46,.1) !important;
}

.front-body .site-nav > a.active::before,
.front-body .nav-dropdown.active > .nav-parent::before {
    opacity: 0 !important;
}

.front-body .site-nav > a:hover,
.front-body .nav-parent:hover,
.front-body .nav-dropdown:hover > .nav-parent,
.front-body .nav-dropdown:focus-within > .nav-parent,
.front-body .nav-dropdown.open > .nav-parent {
    color: #172033 !important;
    background: rgba(255,255,255,.18) !important;
    box-shadow: inset 0 -2px 0 rgba(201,138,46,.68), inset 0 0 0 1px rgba(201,138,46,.14) !important;
}

@media (max-width: 680px) {
    .front-body .site-nav {
        background: rgba(255,255,255,.96) !important;
    }
}

/* Final cascade: restrained public navigation, balanced GIS map, and compact hero session card. */
.front-body .site-nav {
    gap: .18rem !important;
    padding: .3rem .42rem !important;
    border: 1px solid rgba(201,138,46,.22) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.09) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 6px 18px rgba(23,32,51,.035) !important;
    backdrop-filter: blur(10px) saturate(1.04) !important;
}

.front-body .site-nav::after {
    content: '';
    position: absolute;
    right: 1.05rem;
    bottom: -.28rem;
    left: 1.05rem;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(201,138,46,.72) 18%, #c98a2e 50%, rgba(201,138,46,.72) 82%, transparent);
    opacity: .9;
    pointer-events: none;
}

.front-body .site-nav > a,
.front-body .site-header .nav-parent {
    padding: .56rem .7rem !important;
    border-radius: 999px !important;
}

.front-body .site-nav > a.active,
.front-body .nav-dropdown.active > .nav-parent {
    color: #172033 !important;
    background: rgba(255,255,255,.14) !important;
    box-shadow: inset 0 -2px 0 #c98a2e, 0 4px 12px rgba(201,138,46,.1) !important;
}

.front-body .site-nav > a.active::before,
.front-body .nav-dropdown.active > .nav-parent::before {
    opacity: 0 !important;
}

.front-body .site-nav > a:hover,
.front-body .nav-parent:hover,
.front-body .nav-dropdown:hover > .nav-parent,
.front-body .nav-dropdown:focus-within > .nav-parent,
.front-body .nav-dropdown.open > .nav-parent {
    color: #172033 !important;
    background: rgba(255,255,255,.18) !important;
    box-shadow: inset 0 -2px 0 rgba(201,138,46,.68), inset 0 0 0 1px rgba(201,138,46,.14) !important;
}

.front-body.home-page .home-login-welcome,
.front-body.home-page[class*="theme-"] .home-login-welcome {
    grid-template-columns: 42px minmax(0, 1fr) 42px !important;
    gap: .62rem !important;
    width: min(470px, calc(100% - 2rem)) !important;
    min-height: 72px !important;
    padding: .58rem .64rem !important;
    border-radius: 18px !important;
}

.front-body.home-page .home-login-welcome .home-login-avatar {
    width: 42px !important;
    height: 42px !important;
}

.front-body.home-page .home-login-welcome .home-login-copy small {
    font-size: .61rem !important;
    letter-spacing: .08em !important;
}

.front-body.home-page .home-login-welcome .home-login-copy p {
    margin: .1rem 0 !important;
    font-size: 1rem !important;
    line-height: 1.05 !important;
}

.front-body.home-page .home-login-welcome .home-login-copy > span {
    display: block !important;
    overflow: hidden !important;
    color: rgba(255,255,255,.72) !important;
    font-size: .66rem !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.front-body.home-page .home-login-welcome .home-logout-icon,
.front-body.home-page[class*="theme-"] .home-login-welcome .home-logout-icon {
    width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    border: 1px solid rgba(255,255,255,.28) !important;
    border-radius: 14px !important;
    box-shadow: 0 7px 16px rgba(221,100,21,.25), inset 0 1px 0 rgba(255,255,255,.3) !important;
}

.front-body.home-page .home-login-welcome .home-logout-icon svg {
    width: 19px !important;
    height: 19px !important;
}

.front-body .gis-map,
.front-body .gis-map-watermark {
    height: clamp(500px, 53vh, 540px) !important;
    min-height: 500px !important;
}

@media (max-width: 980px) {
    .front-body .gis-map,
    .front-body .gis-map-watermark {
        height: 470px !important;
        min-height: 470px !important;
    }
}

@media (max-width: 680px) {
    .front-body .site-nav::after {
        display: none;
    }

    .front-body .site-nav {
        border-radius: 16px !important;
        background: rgba(255,255,255,.96) !important;
    }

    .front-body.home-page .home-login-welcome,
    .front-body.home-page[class*="theme-"] .home-login-welcome {
        grid-template-columns: 38px minmax(0, 1fr) 40px !important;
        width: calc(100% - 1.6rem) !important;
        min-height: 66px !important;
        padding: .5rem !important;
    }

    .front-body.home-page .home-login-welcome .home-login-avatar,
    .front-body.home-page .home-login-welcome .home-logout-icon {
        width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
    }

    .front-body .gis-map,
    .front-body .gis-map-watermark {
        height: 410px !important;
        min-height: 410px !important;
    }
}

/* Premium front navigation, signed-in hero, and protected GIS refinements - 20260717 */
.front-body .site-header,
.front-body[class*="theme-"] .site-header {
    position: sticky !important;
    top: 0;
    z-index: 1000;
    min-height: 72px;
    gap: .8rem;
    padding: .55rem clamp(.9rem, 2.4vw, 2.6rem);
    border-bottom: 0;
    background: linear-gradient(105deg, rgba(255,255,255,.97), rgba(247,249,246,.96), rgba(255,249,235,.96)) !important;
    box-shadow: 0 12px 30px rgba(15,23,42,.12);
    backdrop-filter: blur(16px) saturate(1.08);
}

.front-body .site-header::before,
.front-body[class*="theme-"] .site-header::before {
    background: linear-gradient(90deg, rgba(255,255,255,.58), rgba(93,113,83,.04), rgba(201,138,46,.08)) !important;
}

.front-body .site-header::after,
.front-body[class*="theme-"] .site-header::after {
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #c98a2e, #f2c96d 42%, #5d7153) !important;
    opacity: 1;
}

.front-body .site-header .brand {
    flex: 0 0 auto;
    min-width: 230px;
    color: #172033;
}

.front-body .site-header .brand img {
    width: 52px;
    height: 52px;
}

.front-body .site-header .brand strong,
.front-body .site-header .brand small,
.front-body .site-header .site-nav > a,
.front-body .site-header .nav-parent {
    color: #172033 !important;
}

.front-body .site-header .brand strong {
    font-weight: 900;
}

.front-body .site-header .brand small {
    color: #5d7153 !important;
}

.front-body .site-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .16rem;
    min-width: 0;
    margin-left: auto;
    padding: .3rem;
    border: 1px solid rgba(201,138,46,.18);
    border-radius: 999px;
    background: rgba(255,255,255,.64);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 18px rgba(15,23,42,.06);
}

.front-body .site-nav > a,
.front-body .site-header .nav-parent {
    min-height: 40px;
    padding: .58rem .72rem;
    border-radius: 999px;
    font-size: .79rem;
    font-weight: 850;
    white-space: nowrap;
}

.front-body .site-nav > a.active,
.front-body .nav-dropdown.active > .nav-parent {
    color: #fff !important;
    background: linear-gradient(135deg, #d69a32, #c17a19) !important;
    box-shadow: 0 8px 18px rgba(201,138,46,.26);
}

.front-body .site-nav > a:hover,
.front-body .nav-parent:hover,
.front-body .nav-dropdown:hover > .nav-parent,
.front-body .nav-dropdown:focus-within > .nav-parent,
.front-body .nav-dropdown.open > .nav-parent {
    color: #172033 !important;
    background: rgba(201,138,46,.12) !important;
    font-size: .79rem;
}

.front-body .nav-dropdown-menu {
    border: 1px solid rgba(201,138,46,.22);
    background: rgba(255,255,255,.98);
    box-shadow: 0 20px 42px rgba(15,23,42,.14);
}

.front-body .language-switcher {
    flex: 0 0 auto;
    border: 1px solid rgba(23,32,51,.14);
    background: rgba(255,255,255,.7);
}

.front-body .language-switcher a {
    color: #172033;
}

.front-body .language-switcher a.active {
    color: #fff;
    background: #c98a2e;
}

.front-body.home-page .home-video-hero {
    margin-top: 0;
    border-radius: 0 0 26px 26px;
}

.front-body.home-page .home-login-welcome,
.front-body.home-page[class*="theme-"] .home-login-welcome {
    position: absolute;
    right: clamp(1rem, 3vw, 3.2rem);
    bottom: clamp(1rem, 3.2vh, 2.2rem);
    z-index: 6;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    align-items: center;
    gap: .78rem;
    width: min(560px, calc(100% - 2rem));
    min-height: 82px;
    padding: .72rem .78rem;
    border: 1px solid rgba(232,182,75,.45);
    border-radius: 21px;
    color: #fff;
    background: linear-gradient(120deg, rgba(15,23,42,.92), rgba(38,55,46,.9), rgba(60,43,25,.9)) !important;
    box-shadow: 0 22px 48px rgba(5,10,18,.28), inset 0 1px 0 rgba(255,255,255,.1);
    backdrop-filter: blur(14px) saturate(1.12);
}

.front-body.home-page .home-login-avatar {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    overflow: hidden;
    border: 2px solid rgba(239,190,81,.78);
    border-radius: 999px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 8px 18px rgba(0,0,0,.2);
}

.front-body.home-page .home-login-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.front-body.home-page .home-login-copy {
    min-width: 0;
}

.front-body.home-page .home-login-copy small {
    display: block;
    margin-bottom: .15rem;
    color: #f2c96d;
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .09em;
    line-height: 1.2;
    text-transform: uppercase;
}

.front-body.home-page .home-login-welcome p {
    margin: 0 0 .15rem;
    overflow-wrap: anywhere;
    color: #fff;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.2;
}

.front-body.home-page .home-login-welcome span {
    display: block;
    color: rgba(255,255,255,.76);
    font-size: .72rem;
    font-weight: 650;
    line-height: 1.35;
}

.front-body.home-page .home-login-welcome .home-logout-icon,
.front-body.home-page[class*="theme-"] .home-login-welcome .home-logout-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    min-height: 48px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.34);
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(145deg, #f6a51f, #dd6415) !important;
    box-shadow: 0 10px 22px rgba(221,100,21,.32);
}

.front-body.home-page .home-logout-icon svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.front-body.home-page .home-login-welcome .home-logout-icon:hover {
    color: #fff;
    background: linear-gradient(145deg, #ffb638, #e46b19) !important;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(221,100,21,.4);
}

.front-body .gis-google-pin {
    width: 20px;
    height: 20px;
    border-width: 2px;
    box-shadow: 0 8px 16px rgba(15,23,42,.2), 0 0 0 3px color-mix(in srgb, var(--pin, #16a34a) 16%, transparent);
}

.front-body .gis-google-pin span {
    inset: 4px;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--pin, #16a34a) 82%, #fff);
}

.front-body .gis-google-pin:hover,
.front-body .gis-google-pin:focus-visible {
    transform: translate(-50%, -100%) rotate(-45deg) scale(1.22);
    box-shadow: 0 12px 22px rgba(15,23,42,.24), 0 0 0 5px color-mix(in srgb, var(--pin, #16a34a) 20%, transparent);
}

.front-body .gis-fallback-pin {
    width: .78rem;
    height: .78rem;
    border-width: 2px;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pin) 18%, transparent), 0 8px 14px rgba(15,23,42,.16);
}

.front-body .gis-shell {
    align-items: start;
}

.front-body .gis-map,
.front-body .gis-map-watermark {
    height: clamp(560px, 60vh, 660px);
    min-height: 560px;
}

@media (max-width: 1240px) {
    .front-body .site-header {
        gap: .55rem;
        padding-inline: .8rem;
    }

    .front-body .site-header .brand {
        min-width: 190px;
    }

    .front-body .site-nav > a,
    .front-body .site-header .nav-parent {
        padding-inline: .54rem;
        font-size: .7rem;
    }

    .front-body .gis-map,
    .front-body .gis-map-watermark {
        height: 540px;
        min-height: 540px;
    }
}

@media (max-width: 980px) {
    .front-body .site-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        min-height: 66px;
    }

    .front-body .site-header .brand {
        min-width: 0;
    }

    .front-body .nav-toggle {
        color: #172033;
        border-color: rgba(201,138,46,.32);
        background: rgba(255,255,255,.8);
    }

    .front-body .site-nav {
        grid-column: 1 / -1;
        align-items: stretch;
        width: 100%;
        border-radius: 18px;
        background: rgba(255,255,255,.98);
    }

    .front-body .site-nav > a,
    .front-body .site-header .nav-parent {
        width: 100%;
        justify-content: flex-start;
        border-radius: 12px;
    }

    .front-body .gis-map,
    .front-body .gis-map-watermark {
        height: 500px;
        min-height: 500px;
    }
}

@media (max-width: 680px) {
    .front-body .site-header .brand img {
        width: 44px;
        height: 44px;
    }

    .front-body.home-page .home-video-hero {
        padding-bottom: 7rem;
    }

    .front-body.home-page .home-login-welcome,
    .front-body.home-page[class*="theme-"] .home-login-welcome {
        right: .8rem;
        bottom: .8rem;
        grid-template-columns: 40px minmax(0, 1fr) 42px;
        gap: .58rem;
        width: calc(100% - 1.6rem);
        min-height: 72px;
        padding: .6rem;
        border-radius: 17px;
    }

    .front-body.home-page .home-login-avatar {
        width: 40px;
        height: 40px;
    }

    .front-body.home-page .home-login-welcome p {
        font-size: .86rem;
    }

    .front-body.home-page .home-login-welcome span {
        font-size: .63rem;
    }

    .front-body.home-page .home-login-welcome .home-logout-icon,
    .front-body.home-page[class*="theme-"] .home-login-welcome .home-logout-icon {
        width: 42px;
        height: 42px;
        min-height: 42px;
    }

    .front-body .gis-map,
    .front-body .gis-map-watermark {
        height: 430px;
        min-height: 430px;
    }
}

/* Compact colorful headers for the three Executive Chart cards on the home page. */
.front-body .chapter-executive-chart .chapter-visual-card {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    padding: .72rem !important;
}

.front-body .chapter-executive-chart .chapter-visual-card::before {
    display: none;
}

.front-body .chapter-executive-chart .chapter-visual-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .7rem;
    align-items: start;
    min-height: 96px;
    padding: .78rem .88rem .72rem;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 21px 21px 16px 16px;
    background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.14) 0 1px, transparent 1px 9px),
        linear-gradient(125deg, var(--chart-head-start), var(--chart-head-end));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 12px 24px color-mix(in srgb, var(--chart-head-end) 20%, transparent);
}

.front-body .chapter-executive-chart .chapter-summary-card {
    --chart-head-start: #0b91cc;
    --chart-head-end: #0d6ea8;
}

.front-body .chapter-executive-chart .chapter-donut-card {
    --chart-head-start: #7b4fc3;
    --chart-head-end: #b7558e;
}

.front-body .chapter-executive-chart .chapter-composition-card {
    --chart-head-start: #db951c;
    --chart-head-end: #d55b40;
}

.front-body .chapter-executive-chart .chapter-visual-heading {
    min-width: 0;
}

.front-body .chapter-executive-chart .chapter-visual-header .chapter-card-kicker {
    display: block;
    margin: 0 0 .36rem;
    color: rgba(255,255,255,.84);
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .12em;
    line-height: 1;
}

.front-body .chapter-executive-chart .chapter-visual-header h3 {
    max-width: none;
    margin: 0;
    color: #fff;
    font-family: var(--font-body);
    font-size: clamp(1.08rem, 1.65vw, 1.36rem);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.12;
    text-shadow: 0 1px 2px rgba(15,23,42,.22);
}

.front-body .chapter-executive-chart .chapter-visual-header p {
    display: -webkit-box;
    max-width: none;
    min-height: 0;
    margin: .34rem 0 0;
    overflow: hidden;
    color: rgba(255,255,255,.86);
    font-size: .72rem;
    font-weight: 650;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.front-body .chapter-executive-chart .chapter-visual-header .chapter-card-badge {
    position: relative;
    top: auto;
    right: auto;
    min-width: 46px;
    height: 46px;
    padding: 0 .5rem;
    border: 1px solid rgba(255,255,255,.38);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(255,255,255,.32), rgba(255,255,255,.12));
    color: #fff;
    font-size: clamp(1.38rem, 2.1vw, 1.78rem);
    font-weight: 950;
    letter-spacing: -.035em;
    text-shadow: 0 2px 7px rgba(15,23,42,.25);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 8px 18px rgba(15,23,42,.16);
}

.front-body .chapter-executive-chart .chapter-visual-header .chapter-card-badge::after {
    display: none;
}

.front-body .chapter-executive-chart .chapter-visual-card > .chapter-vertical-chart,
.front-body .chapter-executive-chart .chapter-visual-card > .chapter-donut-visual-wrap {
    flex: 1 1 auto;
    min-height: 0;
}

@media (max-width: 760px) {
    .front-body .chapter-executive-chart .chapter-visual-card {
        gap: .72rem;
        padding: .64rem !important;
    }

    .front-body .chapter-executive-chart .chapter-visual-header {
        min-height: 90px;
        padding: .72rem .75rem .66rem;
        border-radius: 18px 18px 14px 14px;
    }

    .front-body .chapter-executive-chart .chapter-visual-header .chapter-card-badge {
        min-width: 42px;
        height: 42px;
        border-radius: 13px;
        font-size: 1.3rem;
    }
}

/* Final transaction header layer: deliberately placed last to override legacy card rules. */
.admin-body .admin-grid > .admin-card {
    --transaction-head-start: #078cc8;
    --transaction-head-end: #3269be;
    padding: 1rem !important;
}

.admin-body .admin-grid > .admin-card:nth-child(3n + 2) {
    --transaction-head-start: #bd4f91;
    --transaction-head-end: #8755bb;
}

.admin-body .admin-grid > .admin-card:nth-child(3n) {
    --transaction-head-start: #d58a1f;
    --transaction-head-end: #e15d46;
}

.admin-body .admin-grid > .admin-card::before {
    display: none;
}

.admin-body .admin-grid > .admin-card > h2,
.admin-body .admin-grid > .admin-card > .admin-card-head {
    position: relative;
    z-index: 1;
    min-height: 62px;
    margin: -1rem -1rem 1rem !important;
    padding: .82rem 1rem !important;
    border: 0 !important;
    border-radius: 21px 21px 14px 14px;
    background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.14) 0 1px, transparent 1px 11px),
        linear-gradient(135deg, var(--transaction-head-start), var(--transaction-head-end));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 9px 20px rgba(15,23,42,.1);
}

.admin-body .admin-grid > .admin-card > h2,
.admin-body .admin-grid > .admin-card > .admin-card-head h2,
.admin-body .admin-grid > .admin-card > .admin-card-head h3 {
    color: #fff !important;
    font-weight: 900 !important;
    text-shadow: 0 1px 2px rgba(15,23,42,.2);
}

.admin-body .admin-grid > .admin-card > h2 {
    display: flex;
    align-items: center;
    font-size: 1.1rem !important;
    line-height: 1.15;
}

.admin-body .admin-grid > .admin-card > .admin-card-head {
    display: flex;
    align-items: center;
    gap: .8rem;
}

.admin-body .admin-grid > .admin-card > .admin-card-head.stacked {
    align-items: flex-start;
}

.admin-body .admin-grid > .admin-card > h2::before,
.admin-body .admin-grid > .admin-card > .admin-card-head h2::before,
.admin-body .admin-grid > .admin-card > .admin-card-head h3::before {
    background: rgba(255,255,255,.92) !important;
    filter: drop-shadow(0 2px 3px rgba(15,23,42,.18));
}

.admin-body .admin-grid > .admin-card > .admin-card-head p {
    margin: .24rem 0 0;
    color: rgba(255,255,255,.86) !important;
    font-size: .76rem;
    line-height: 1.35;
}

.admin-body .admin-grid > .admin-card > .admin-card-head > span,
.admin-body .admin-grid > .admin-card > .admin-card-head.compact span {
    flex: 0 0 auto;
    border-color: rgba(255,255,255,.34) !important;
    background: rgba(255,255,255,.18) !important;
    color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}

.front-body .training-report-grid-compact .verified-report-card {
    --report-head-start: #078cc8;
    --report-head-end: #3269be;
    gap: .72rem !important;
    padding: 0 .92rem .92rem !important;
}

.front-body .training-report-grid-compact .verified-report-card:nth-child(3n + 2) {
    --report-head-start: #bd4f91;
    --report-head-end: #8755bb;
}

.front-body .training-report-grid-compact .verified-report-card:nth-child(3n) {
    --report-head-start: #d58a1f;
    --report-head-end: #e15d46;
}

.front-body .training-report-grid-compact .verified-report-head {
    min-height: 66px;
    margin: 0 -.92rem;
    padding: .72rem .92rem;
    border-radius: 21px 21px 14px 14px;
    background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.15) 0 1px, transparent 1px 11px),
        linear-gradient(135deg, var(--report-head-start), var(--report-head-end));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.27), 0 8px 18px rgba(15,23,42,.1);
}

.front-body .training-report-grid-compact .verified-title p,
.front-body .training-report-grid-compact .verified-title h2,
.front-body .training-report-grid-compact .verified-title small {
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(15,23,42,.18);
}

.front-body .training-report-grid-compact .verified-logo-wrap {
    border-color: rgba(255,255,255,.52);
    background: rgba(255,255,255,.94);
    box-shadow: 0 8px 18px rgba(15,23,42,.16);
}

.front-body .training-report-grid-compact .verified-status {
    border-color: rgba(255,255,255,.35);
    background: rgba(255,255,255,.2);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.24);
}

@media (max-width: 760px) {
    .admin-body .admin-grid > .admin-card {
        padding: .85rem !important;
    }

    .admin-body .admin-grid > .admin-card > h2,
    .admin-body .admin-grid > .admin-card > .admin-card-head {
        min-height: 58px;
        margin: -.85rem -.85rem .85rem !important;
        padding: .72rem .85rem !important;
        border-radius: 17px 17px 12px 12px;
    }

    .front-body .training-report-grid-compact .verified-report-card {
        padding: 0 .72rem .72rem !important;
    }

    .front-body .training-report-grid-compact .verified-report-head {
        min-height: 62px;
        margin: 0 -.72rem;
        padding: .68rem .72rem;
        border-radius: 17px 17px 12px 12px;
    }
}

/* Final sidebar compactness override: keep navigation dense but scannable. */
.admin-body .admin-user .admin-logout-link {
    min-width: 0 !important;
    padding: .34rem .52rem !important;
    font-size: .74rem !important;
    line-height: 1 !important;
    white-space: nowrap;
}

.admin-body .admin-user .admin-logout-link::before {
    content: none !important;
    display: none !important;
}

.admin-body .admin-user .admin-logout-link > span:last-child {
    display: inline !important;
    font: inherit !important;
}

.admin-body .admin-menu-group + .admin-menu-group {
    margin-top: .04rem !important;
    padding-top: .38rem !important;
    border-top: 1px solid rgba(232, 240, 234, .09) !important;
}

.admin-body .admin-menu-heading {
    padding-bottom: .12rem !important;
}

/* Keep single-session information fully visible even when the login card exceeds the viewport. */
.login-body {
    align-items: flex-start !important;
    box-sizing: border-box;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: clamp(1.1rem, 3vh, 2rem) 1rem !important;
}
.login-card {
    box-sizing: border-box;
    margin-block: auto;
    max-width: 100%;
}
.login-card .flash.session-conflict {
    box-sizing: border-box;
    margin: 0 0 1rem;
    max-height: min(42dvh, 22rem);
    overflow: auto;
    overflow-wrap: anywhere;
    overscroll-behavior: contain;
    padding: .95rem 1rem;
    scrollbar-color: rgba(146, 64, 14, .45) transparent;
    text-wrap: pretty;
    word-break: normal;
}
.login-card .flash.session-conflict::-webkit-scrollbar { width: 7px; }
.login-card .flash.session-conflict::-webkit-scrollbar-thumb { background: rgba(146, 64, 14, .38); border-radius: 99px; }
@media (max-height: 720px) {
    .login-body { padding-block: .8rem !important; }
    .login-card { padding: 1.3rem 1.1rem !important; }
    .login-card img { max-width: 74px; margin-bottom: .55rem; }
    .login-card h1 { margin-bottom: .8rem; }
    .login-card .flash.session-conflict { max-height: 34dvh; }
}

/* Android navigation guard: keep the touch drawer in the visible viewport.
   This must remain last because page-level navigation styles are extensive. */
@media (max-width: 1020px) {
    .front-body .site-nav {
        top: calc(env(safe-area-inset-top) + 72px) !important;
        bottom: .65rem !important;
        height: calc(100dvh - 5.3rem) !important;
        min-height: 0 !important;
        justify-content: flex-start !important;
        align-content: flex-start !important;
        flex: none !important;
    }
}

@media (max-width: 600px) {
    .front-body .site-nav {
        top: calc(env(safe-area-inset-top) + 61px) !important;
        height: calc(100dvh - 4.75rem) !important;
    }
}

/* Android mobile drawer: deliberately last to override legacy header layout rules. */
@media (max-width: 1020px) {
    .front-body .site-header,
    .front-body[class*="theme-"] .site-header {
        overflow: visible !important;
        z-index: 10020 !important;
    }

    .front-body .nav-toggle {
        position: relative !important;
        z-index: 10031 !important;
        flex: 0 0 44px !important;
        width: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        margin-left: auto !important;
        padding: 0 !important;
        touch-action: manipulation;
    }

    .front-body .site-nav {
        position: fixed !important;
        top: calc(env(safe-area-inset-top) + 72px) !important;
        right: .65rem !important;
        bottom: .65rem !important;
        left: .65rem !important;
        z-index: 10030 !important;
        display: none !important;
        width: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: .6rem !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        flex-direction: column !important;
        align-items: stretch !important;
        border-radius: 18px !important;
        background: rgba(255,255,255,.98) !important;
        box-shadow: 0 22px 48px rgba(15,23,42,.24) !important;
        pointer-events: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .front-body .site-nav.open { display: flex !important; }
    .front-body .site-nav::after { display: none !important; }
}

@media (max-width: 600px) {
    .front-body .site-header,
    .front-body[class*="theme-"] .site-header {
        min-height: 64px !important;
        padding: .45rem .6rem !important;
    }

    .front-body .site-nav { top: calc(env(safe-area-inset-top) + 64px) !important; }
}

/* Final Android cascade: interaction rules must remain after all page-specific styles. */
@media (max-width: 1020px) {
    .front-body.front-nav-open,
    .admin-body.admin-sidebar-open {
        overflow: hidden !important;
    }

    .front-body .nav-toggle {
        position: relative !important;
        z-index: 10031 !important;
        display: inline-flex !important;
        min-width: 44px !important;
        min-height: 44px !important;
        align-items: center !important;
        justify-content: center !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }

    .front-body .site-nav {
        position: fixed !important;
        top: calc(env(safe-area-inset-top) + 68px) !important;
        right: .65rem !important;
        bottom: .65rem !important;
        left: .65rem !important;
        z-index: 10030 !important;
        display: none !important;
        width: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: .65rem !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        flex-direction: column !important;
        align-items: stretch !important;
        border-radius: 18px !important;
        background: rgba(255,255,255,.98) !important;
        box-shadow: 0 20px 44px rgba(15,23,42,.22) !important;
        pointer-events: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .front-body .site-nav.open {
        display: flex !important;
    }

    .admin-sidebar-toggle {
        z-index: 10110 !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }

    .admin-sidebar-scrim {
        z-index: 10100 !important;
    }

    .admin-sidebar {
        z-index: 10105 !important;
    }

    .admin-sidebar.is-open {
        transform: translateX(0) !important;
    }

    .admin-sidebar .admin-menu a,
    .admin-sidebar .admin-menu button {
        min-height: 44px !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }

    .front-body .gis-map,
    .front-body .gis-map-watermark,
    .front-body.home-page .home-gis-map-frame iframe {
        touch-action: pan-x pan-y pinch-zoom !important;
    }
}

@media (max-width: 600px) {
    .front-body .site-header {
        min-height: 64px !important;
        padding-right: 7.25rem !important;
    }

    .front-body .nav-toggle {
        position: fixed !important;
        top: max(.68rem, env(safe-area-inset-top)) !important;
        right: .68rem !important;
        z-index: 10032 !important;
        margin: 0 !important;
        background: rgba(255,255,255,.98) !important;
    }

    .front-body .language-switcher {
        position: fixed !important;
        top: max(.82rem, env(safe-area-inset-top)) !important;
        right: 3.85rem !important;
        z-index: 10032 !important;
        margin: 0 !important;
    }

    .front-body .site-nav {
        top: calc(env(safe-area-inset-top) + 61px) !important;
    }

    .login-body {
        min-height: 100dvh !important;
        padding: 1rem !important;
        overflow: auto !important;
    }

    .login-card {
        width: min(100%, 410px) !important;
        padding: 1.5rem 1.1rem !important;
    }

    .login-card input[type="text"],
    .login-card input[type="email"],
    .login-card input[type="password"],
    .login-card .primary-button {
        min-height: 48px !important;
        font-size: 16px !important;
    }
}

/* Final cascade: premium public header, signed-in hero, and GIS sizing. */
.front-body .site-header,
.front-body[class*="theme-"] .site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    min-height: 72px !important;
    gap: .8rem !important;
    padding: .55rem clamp(.9rem, 2.4vw, 2.6rem) !important;
    border-bottom: 0 !important;
    background: linear-gradient(105deg, rgba(255,255,255,.97), rgba(247,249,246,.96), rgba(255,249,235,.96)) !important;
    box-shadow: 0 12px 30px rgba(15,23,42,.12) !important;
    backdrop-filter: blur(16px) saturate(1.08) !important;
}

.front-body .site-header::before,
.front-body[class*="theme-"] .site-header::before {
    background: linear-gradient(90deg, rgba(255,255,255,.58), rgba(93,113,83,.04), rgba(201,138,46,.08)) !important;
}

.front-body .site-header::after,
.front-body[class*="theme-"] .site-header::after {
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, #c98a2e, #f2c96d 42%, #5d7153) !important;
    opacity: 1 !important;
}

.front-body .site-header .brand {
    flex: 0 0 auto !important;
    min-width: 230px !important;
    color: #172033 !important;
}

.front-body .site-header .brand img {
    width: 52px !important;
    height: 52px !important;
}

.front-body .site-header .brand strong,
.front-body .site-header .brand small,
.front-body .site-header .site-nav > a,
.front-body .site-header .nav-parent {
    color: #172033 !important;
}

.front-body .site-header .brand small {
    color: #5d7153 !important;
}

.front-body .site-nav {
    align-items: center !important;
    justify-content: center !important;
    gap: .16rem !important;
    min-width: 0 !important;
    margin-left: auto !important;
    padding: .3rem !important;
    border: 1px solid rgba(201,138,46,.18) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.68) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 18px rgba(15,23,42,.06) !important;
}

.front-body .site-nav > a,
.front-body .site-header .nav-parent {
    min-height: 40px !important;
    padding: .58rem .72rem !important;
    border-radius: 999px !important;
    font-size: .79rem !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
}

.front-body .site-nav > a.active,
.front-body .nav-dropdown.active > .nav-parent {
    color: #fff !important;
    background: linear-gradient(135deg, #d69a32, #c17a19) !important;
    box-shadow: 0 8px 18px rgba(201,138,46,.26) !important;
}

.front-body .site-nav > a:hover,
.front-body .nav-parent:hover,
.front-body .nav-dropdown:hover > .nav-parent,
.front-body .nav-dropdown:focus-within > .nav-parent,
.front-body .nav-dropdown.open > .nav-parent {
    color: #172033 !important;
    background: rgba(201,138,46,.12) !important;
    font-size: .79rem !important;
}

.front-body .language-switcher {
    flex: 0 0 auto !important;
    border-color: rgba(23,32,51,.14) !important;
    background: rgba(255,255,255,.72) !important;
}

.front-body .language-switcher a {
    color: #172033 !important;
}

.front-body .language-switcher a.active {
    color: #fff !important;
    background: #c98a2e !important;
}

.front-body.home-page .home-video-hero {
    margin-top: 0 !important;
    border-radius: 0 0 26px 26px !important;
}

.front-body.home-page .home-login-welcome,
.front-body.home-page[class*="theme-"] .home-login-welcome {
    position: absolute !important;
    right: clamp(1rem, 3vw, 3.2rem) !important;
    bottom: clamp(1rem, 3.2vh, 2.2rem) !important;
    z-index: 6 !important;
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) 48px !important;
    align-items: center !important;
    align-self: auto !important;
    gap: .78rem !important;
    width: min(560px, calc(100% - 2rem)) !important;
    min-height: 82px !important;
    padding: .72rem .78rem !important;
    border: 1px solid rgba(232,182,75,.45) !important;
    border-radius: 21px !important;
    color: #fff !important;
    background: linear-gradient(120deg, rgba(15,23,42,.92), rgba(38,55,46,.9), rgba(60,43,25,.9)) !important;
    box-shadow: 0 22px 48px rgba(5,10,18,.28), inset 0 1px 0 rgba(255,255,255,.1) !important;
    backdrop-filter: blur(14px) saturate(1.12) !important;
}

.front-body.home-page .home-login-welcome p {
    margin: 0 0 .15rem !important;
    color: #fff !important;
    font-size: 1rem !important;
    line-height: 1.2 !important;
}

.front-body.home-page .home-login-welcome span {
    color: rgba(255,255,255,.76) !important;
    font-size: .72rem !important;
}

.front-body.home-page .home-login-welcome .home-login-avatar {
    display: grid !important;
    width: 48px !important;
    height: 48px !important;
}

.front-body.home-page .home-login-welcome .home-logout-icon,
.front-body.home-page[class*="theme-"] .home-login-welcome .home-logout-icon {
    display: grid !important;
    width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    color: #fff !important;
    background: linear-gradient(145deg, #f6a51f, #dd6415) !important;
    box-shadow: 0 10px 22px rgba(221,100,21,.32) !important;
}

.front-body .gis-google-pin {
    width: 18px !important;
    height: 18px !important;
    border-width: 2px !important;
    box-shadow: 0 7px 14px rgba(15,23,42,.18), 0 0 0 2px color-mix(in srgb, var(--pin, #16a34a) 14%, transparent) !important;
}

.front-body .gis-google-pin span {
    inset: 3px !important;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--pin, #16a34a) 82%, #fff) !important;
}

.front-body .gis-fallback-pin {
    width: .78rem !important;
    height: .78rem !important;
}

.front-body .gis-shell {
    align-items: start !important;
}

.front-body .gis-map,
.front-body .gis-map-watermark {
    height: clamp(560px, 60vh, 660px) !important;
    min-height: 560px !important;
}

@media (max-width: 1240px) {
    .front-body .site-header .brand {
        min-width: 190px !important;
    }

    .front-body .site-nav > a,
    .front-body .site-header .nav-parent {
        padding-inline: .54rem !important;
        font-size: .7rem !important;
    }

    .front-body .gis-map,
    .front-body .gis-map-watermark {
        height: 540px !important;
        min-height: 540px !important;
    }
}

@media (max-width: 980px) {
    .front-body .site-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto auto !important;
        min-height: 66px !important;
    }

    .front-body .site-header .brand {
        min-width: 0 !important;
    }

    .front-body .nav-toggle {
        color: #172033 !important;
        border-color: rgba(201,138,46,.32) !important;
        background: rgba(255,255,255,.86) !important;
    }

    .front-body .site-nav {
        grid-column: 1 / -1 !important;
        align-items: stretch !important;
        width: 100% !important;
        border-radius: 18px !important;
        background: rgba(255,255,255,.98) !important;
    }

    .front-body .site-nav > a,
    .front-body .site-header .nav-parent {
        width: 100% !important;
        justify-content: flex-start !important;
        border-radius: 12px !important;
    }

    .front-body .gis-map,
    .front-body .gis-map-watermark {
        height: 500px !important;
        min-height: 500px !important;
    }
}

@media (max-width: 680px) {
    .front-body.home-page .home-video-hero {
        padding-bottom: 7rem !important;
    }

    .front-body.home-page .home-login-welcome,
    .front-body.home-page[class*="theme-"] .home-login-welcome {
        right: .8rem !important;
        bottom: .8rem !important;
        grid-template-columns: 40px minmax(0, 1fr) 42px !important;
        width: calc(100% - 1.6rem) !important;
        min-height: 72px !important;
        padding: .6rem !important;
    }

    .front-body.home-page .home-login-welcome .home-login-avatar {
        width: 40px !important;
        height: 40px !important;
    }

    .front-body.home-page .home-login-welcome .home-logout-icon,
    .front-body.home-page[class*="theme-"] .home-login-welcome .home-logout-icon {
        width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
    }

    .front-body .gis-map,
    .front-body .gis-map-watermark {
        height: 430px !important;
        min-height: 430px !important;
    }
}

/* Leadership / Kepengurusan page */
.front-body .leadership-page {
    width: min(1480px, calc(100% - 2rem));
}

.front-body .leadership-photo-card,
.front-body .leadership-card,
.front-body .leadership-pdf-card {
    border: 1px solid rgba(23,36,63,.1);
    background:
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,255,255,.78)),
        radial-gradient(circle at 100% 0, rgba(106,63,176,.1), transparent 34%),
        radial-gradient(circle at 0 100%, rgba(239,95,122,.08), transparent 34%);
    box-shadow: 0 24px 70px rgba(23,36,63,.1);
}

.front-body .leadership-photo-card {
    display: grid;
    grid-template-columns: minmax(260px, .5fr) minmax(0, 1fr);
    overflow: hidden;
    border-radius: 24px;
}

.front-body .leadership-photo {
    min-height: 235px;
    max-height: 300px;
    overflow: hidden;
    background: linear-gradient(135deg, #f8fafc, #f3e8ef);
}

.front-body .leadership-photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
}

.front-body .leadership-photo-copy {
    display: grid;
    align-content: center;
    gap: .62rem;
    padding: clamp(1rem, 2.2vw, 1.7rem);
}

.front-body .leadership-photo-copy h2,
.front-body .leadership-card-head h3 {
    margin: 0;
    color: #17243f;
    font-family: var(--font-display);
    letter-spacing: 0;
}

.front-body .leadership-photo-copy h2 {
    max-width: 840px;
    font-size: clamp(1.38rem, 2.05vw, 2.28rem);
    line-height: 1.08;
}

.front-body .leadership-photo-copy p {
    max-width: 760px;
    margin: 0;
    color: rgba(23,36,63,.72);
    font-size: .94rem;
    font-weight: 650;
    line-height: 1.55;
}

.front-body .leadership-photo-copy > span {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: .35rem;
    padding: .52rem .78rem;
    border: 1px solid rgba(31,95,153,.16);
    border-radius: 999px;
    background: rgba(239,246,255,.82);
    color: #1f5f99;
    font-size: .78rem;
    font-weight: 900;
}

.front-body .leadership-photo-copy > span b {
    color: #17243f;
    font-size: 1rem;
}

.front-body .leadership-info-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.28fr) minmax(340px, .72fr);
    gap: clamp(1rem, 2vw, 1.5rem);
    margin-top: clamp(.8rem, 1.6vw, 1.2rem);
}

.front-body .leadership-card,
.front-body .leadership-pdf-card {
    border-radius: 26px;
    padding: clamp(1rem, 2vw, 1.35rem);
}

.front-body .leadership-card-head {
    display: grid;
    gap: .28rem;
    margin-bottom: .95rem;
}

.front-body .leadership-card-head h3 {
    font-size: clamp(1.35rem, 2.6vw, 2.2rem);
    line-height: 1.02;
}

.front-body .leadership-card-head span {
    color: rgba(23,36,63,.64);
    font-weight: 750;
    line-height: 1.45;
}

.front-body .daily-manager-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
}

.front-body .daily-manager-item {
    display: grid;
    gap: .22rem;
    min-height: 92px;
    padding: .82rem .9rem;
    border: 1px solid rgba(23,36,63,.08);
    border-left: 4px solid #b11b2a;
    border-radius: 17px;
    background: rgba(255,255,255,.72);
    box-shadow: 0 12px 28px rgba(23,36,63,.055);
}

.front-body .daily-manager-item span,
.front-body .sk-detail-list dt {
    color: rgba(23,36,63,.56);
    font-size: .7rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.front-body .daily-manager-item strong,
.front-body .sk-detail-list dd {
    color: #17243f;
    font-size: .95rem;
    font-weight: 950;
    line-height: 1.28;
}

.front-body .sk-detail-list {
    display: grid;
    gap: .65rem;
    margin: 0;
}

.front-body .sk-detail-list div {
    display: grid;
    gap: .2rem;
    padding: .82rem .9rem;
    border: 1px solid rgba(23,36,63,.08);
    border-radius: 16px;
    background: rgba(255,255,255,.72);
}

.front-body .sk-detail-list dd {
    margin: 0;
}

.front-body .leadership-download-button {
    width: 100%;
    justify-content: center;
    margin-top: .9rem;
    text-decoration: none;
}

.front-body .leadership-pdf-card {
    margin-top: clamp(.8rem, 1.6vw, 1.2rem);
}

.front-body .pdf-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
}

.front-body .pdf-head strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 .85rem;
    border-radius: 999px;
    background: #eff6ff;
    color: #1f5f99;
    font-size: .82rem;
    font-weight: 950;
    white-space: nowrap;
}

.front-body .leadership-pdf-frame {
    display: block;
    width: 100%;
    height: min(78vh, 820px);
    min-height: 560px;
    border: 1px solid rgba(23,36,63,.1);
    border-radius: 22px;
    background: #f8fafc;
}

.front-body .leadership-pdf-empty {
    padding: 1.2rem;
    border: 1px dashed rgba(23,36,63,.16);
    border-radius: 18px;
    color: rgba(23,36,63,.72);
    font-weight: 900;
    text-align: center;
}

@media (max-width: 1100px) {
    .front-body .leadership-photo-card,
    .front-body .leadership-info-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .front-body .leadership-photo {
        min-height: 230px;
        max-height: none;
    }

    .front-body .daily-manager-grid,
    .front-body .pdf-head {
        grid-template-columns: 1fr;
    }

    .front-body .leadership-pdf-frame {
        min-height: 480px;
        height: 72vh;
    }
}

@media (max-width: 640px) {
    .front-body .dynamic-content-kicker {
        align-items: flex-start;
        flex-direction: column;
        gap: .35rem;
    }
}

.front-body .asad-otp-section {
    min-height: 62vh;
    display: grid;
    place-items: center;
}

.front-body .asad-otp-card {
    width: min(520px, 100%);
    display: grid;
    gap: 1rem;
    padding: clamp(1.4rem, 3vw, 2.2rem);
    border: 1px solid rgba(23,36,63,.1);
    border-radius: 28px;
    background:
        radial-gradient(circle at 96% 0, rgba(34,197,94,.12), transparent 30%),
        radial-gradient(circle at 0 100%, rgba(139,92,246,.12), transparent 32%),
        rgba(255,255,255,.94);
    box-shadow: 0 30px 70px rgba(23,36,63,.14);
}

.front-body .asad-otp-badge {
    width: fit-content;
    padding: .45rem .72rem;
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
    font-size: .76rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.front-body .asad-otp-card h1 {
    margin: 0;
    color: #17243f;
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1;
}

.front-body .asad-otp-card p,
.front-body .asad-otp-card small {
    margin: 0;
    color: rgba(23,36,63,.68);
    font-weight: 750;
    line-height: 1.55;
}

.front-body .asad-otp-form {
    display: grid;
    gap: .9rem;
}

.front-body .asad-otp-form label {
    display: grid;
    gap: .45rem;
    color: #17243f;
    font-weight: 950;
}

.front-body .asad-otp-form input {
    width: 100%;
    min-height: 58px;
    border: 1px solid rgba(23,36,63,.14);
    border-radius: 16px;
    background: #fff;
    color: #111827;
    font-size: 1.55rem;
    font-weight: 950;
    letter-spacing: .28em;
    text-align: center;
}

.front-body .asad-otp-form input:focus {
    outline: none;
    border-color: #22c55e;
    box-shadow: 0 0 0 4px rgba(34,197,94,.14);
}

/* Safe public spacing polish + legalitas reader */
.front-body:not(.home-page) .section {
    padding-top: clamp(1.8rem, 3.6vw, 3.2rem);
    padding-bottom: clamp(1.8rem, 3.6vw, 3.2rem);
}

.front-body .page-hero.dynamic-banner.dynamic-banner-card + .section {
    padding-top: clamp(1.05rem, 2.2vw, 2rem) !important;
}

.front-body.home-page .home-video-hero {
    min-height: clamp(520px, 70vh, 680px);
    padding-bottom: clamp(1rem, 2vw, 1.65rem);
}

.front-body.home-page .home-video-hero + .section {
    padding-top: clamp(.7rem, 1.35vw, 1.15rem) !important;
}

.front-body.home-page .profile-with-speakers {
    margin-top: clamp(-2.2rem, -2vw, -.9rem);
    padding-top: 0;
}

.front-body.home-page .news-showcase,
.front-body.home-page .achievement-insight-section,
.front-body.home-page .chapter-insight-section {
    margin-top: clamp(.15rem, .65vw, .55rem);
    margin-bottom: clamp(.2rem, .8vw, .7rem);
}

.front-body .legalitas-reader-shell {
    grid-template-columns: minmax(260px, 340px) minmax(0, 900px);
    max-width: 1320px;
    gap: clamp(20px, 2.6vw, 36px);
    padding-top: clamp(1.4rem, 2.7vw, 2.6rem);
}

.front-body .legalitas-reader-card {
    max-width: 900px;
    padding: clamp(22px, 3vw, 38px);
}

.front-body .legalitas-suggestion-panel {
    top: 126px;
}

.front-body .legalitas-document-list {
    margin-bottom: 22px;
}

.front-body .legalitas-document-link {
    grid-template-columns: 58px minmax(0, 1fr);
}

.front-body .legalitas-document-link.active {
    border-color: rgba(159, 40, 82, .28);
    background: linear-gradient(135deg, rgba(239, 95, 122, .11), rgba(106, 63, 176, .09));
    box-shadow: 0 14px 34px rgba(23, 36, 63, .1);
}

.front-body .legalitas-doc-mark {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    background: linear-gradient(135deg, #ef5f7a, #6a3fb0);
    color: #fff;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
    box-shadow: 0 12px 24px rgba(106, 63, 176, .22);
}

.front-body .legalitas-news-suggestions {
    display: grid;
    gap: 12px;
    padding-top: 18px;
    border-top: 1px solid rgba(23, 36, 63, .1);
}

.front-body .legalitas-news-suggestions .eyebrow {
    margin-bottom: 2px;
}

.front-body .legalitas-reader-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: clamp(18px, 2.4vw, 28px);
}

.front-body .legalitas-reader-head .eyebrow {
    margin: 0 0 10px;
    color: #9f2852;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.front-body .legalitas-reader-head h2 {
    margin: 0;
    color: #17243f;
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.8vw, 3.25rem);
    line-height: 1.04;
}

.front-body .legalitas-reader-head p:not(.eyebrow) {
    max-width: 680px;
    margin: 12px 0 0;
    color: rgba(23, 36, 63, .68);
    font-size: 1rem;
    line-height: 1.7;
}

.front-body .legalitas-open-button {
    flex: 0 0 auto;
    align-self: center;
    white-space: nowrap;
}

.front-body .legalitas-document-viewer {
    padding: clamp(10px, 1.4vw, 14px);
    border: 1px solid rgba(23, 36, 63, .12);
    border-radius: 24px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,248,245,.74)),
        repeating-linear-gradient(135deg, rgba(23,36,63,.035) 0 1px, transparent 1px 18px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 24px 58px rgba(23, 36, 63, .11);
}

.front-body .legalitas-document-frame {
    display: block;
    width: 100%;
    height: min(74vh, 760px);
    min-height: 560px;
    border: 0;
    border-radius: 18px;
    background: #fff;
}

.front-body .legalitas-npwp-viewer {
    display: grid;
    gap: 10px;
    padding: clamp(1.35rem, 2.8vw, 2rem);
    border: 1px solid rgba(239, 95, 122, .16);
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(239, 95, 122, .12), rgba(255,255,255,.92) 42%, rgba(106,63,176,.1));
    color: #17243f;
}

.front-body .legalitas-npwp-viewer span {
    width: max-content;
    padding: .45rem .7rem;
    border-radius: 999px;
    background: rgba(23, 36, 63, .08);
    color: #9f2852;
    font-weight: 900;
    letter-spacing: .12em;
}

.front-body .legalitas-npwp-viewer strong {
    font-size: clamp(1.25rem, 2.4vw, 1.85rem);
    line-height: 1.2;
}

.front-body .chapter-sk-section {
    padding-top: clamp(.8rem, 1.8vw, 1.4rem);
}

.front-body .chapter-sk-card {
    max-width: 1240px;
    margin-inline: auto;
}

.front-body .chapter-sk-head h2 {
    max-width: 820px;
}

.front-body .chapter-sk-viewer .legalitas-document-frame {
    min-height: 520px;
}

.front-body .chapter-sk-docx-viewer a {
    width: fit-content;
    margin-top: .45rem;
    text-decoration: none;
}

.front-body .legalitas-prose {
    max-width: 760px;
    margin-top: clamp(22px, 3vw, 34px);
    padding-top: clamp(20px, 2.8vw, 30px);
    border-top: 1px solid rgba(23, 36, 63, .1);
}

@media (max-width: 1100px) {
    .front-body .legalitas-reader-shell {
        grid-template-columns: 1fr;
        max-width: 900px;
    }

    .front-body .legalitas-suggestion-panel {
        position: static;
    }
}

@media (max-width: 720px) {
    .front-body.home-page .home-video-hero {
        min-height: 520px;
    }

    .front-body.home-page .profile-with-speakers {
        margin-top: 0;
        padding-top: .65rem;
    }

    .front-body .legalitas-reader-head,
    .front-body .legalitas-meta-strip {
        grid-template-columns: 1fr;
    }

    .front-body .legalitas-reader-head {
        display: grid;
    }

    .front-body .legalitas-open-button {
        width: max-content;
    }

    .front-body .legalitas-document-frame {
        min-height: 460px;
    }
}

.inline-admin-action {
    display: grid;
    gap: 8px;
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 18px;
    background: rgba(248, 250, 252, .8);
}

.inline-admin-action small {
    color: #64748b;
    font-weight: 700;
}

.admin-body .auto-en-hint {
    display: block;
    margin-top: 6px;
    color: #64748b;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: 0;
}

.admin-body [data-auto-english-field="true"] {
    border-color: rgba(59, 130, 246, .18);
    background-image: linear-gradient(135deg, rgba(59, 130, 246, .035), rgba(255, 255, 255, 0));
}

.evidence-list {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 16px;
    background: rgba(248, 250, 252, .72);
}

.admin-body .attendance-input-panel {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 20px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.88), rgba(248,250,252,.74)),
        radial-gradient(circle at 100% 0, rgba(37, 99, 235, .08), transparent 32%),
        radial-gradient(circle at 0 100%, rgba(239, 95, 122, .08), transparent 34%);
    box-shadow: inset 0 1px rgba(255,255,255,.8), 0 12px 28px rgba(15,23,42,.04);
}

.admin-body .admin-card-head.compact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
}

.admin-body .admin-card-head.compact h3 {
    margin: 0;
    color: #0f172a;
}

.admin-body .admin-card-head.compact span {
    border-radius: 999px;
    padding: .42rem .7rem;
    background: linear-gradient(135deg, rgba(239,95,122,.14), rgba(106,63,176,.12));
    color: #9e171b;
    font-weight: 950;
}

.front-body .internal-access-hero {
    min-height: clamp(320px, 48vw, 520px);
}

.front-body .training-report-section {
    padding-top: clamp(26px, 4vw, 48px);
}

.front-body .training-period-filter {
    display: grid;
    grid-template-columns: 150px 120px minmax(180px, 1fr) minmax(180px, 1fr) minmax(190px, 1fr) minmax(210px, 1fr) auto;
    align-items: end;
    gap: .7rem;
    max-width: 100%;
}

.front-body .training-period-filter label {
    display: grid;
    gap: .35rem;
    color: rgba(23,36,63,.66);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.front-body .training-period-filter select,
.front-body .training-period-filter input {
    width: 100%;
    min-height: 48px;
    border: 1px solid rgba(23,36,63,.13);
    border-radius: 14px;
    background: rgba(255,255,255,.86);
    color: #17243f;
    font: inherit;
    font-weight: 800;
    padding: .7rem .85rem;
    box-shadow: inset 0 1px rgba(255,255,255,.78);
}

.front-body .training-period-filter button {
    min-height: 48px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, #ef5f7a, #6a3fb0);
    color: #fff;
    font-weight: 950;
    padding: .75rem 1.05rem;
    box-shadow: 0 14px 28px rgba(106,63,176,.18);
}

.front-body .training-insight-panel {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    margin: clamp(1.2rem, 2.4vw, 2rem) 0;
    padding: clamp(1.15rem, 2.5vw, 1.6rem);
    border: 1px solid rgba(23,36,63,.1);
    border-radius: 28px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.92), rgba(255,255,255,.74)),
        radial-gradient(circle at 8% 12%, rgba(239,95,122,.13), transparent 30%),
        radial-gradient(circle at 86% 10%, rgba(106,63,176,.13), transparent 28%),
        linear-gradient(135deg, rgba(86,107,58,.09), rgba(31,95,153,.08));
    box-shadow: 0 28px 70px rgba(23,36,63,.12);
}

.front-body .training-insight-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg, #ef5f7a, #f28a2e, #566b3a, #1f5f99, #6a3fb0);
}

.front-body .training-insight-head,
.front-body .training-list-title {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.front-body .training-insight-head h3,
.front-body .training-list-title h3 {
    margin: .25rem 0 0;
    color: #17243f;
    font-family: var(--font-display);
    font-size: clamp(1.65rem, 3.1vw, 3rem);
    font-weight: 500;
    line-height: .98;
}

.front-body .training-insight-head strong,
.front-body .training-list-title > span {
    flex: 0 0 auto;
    border-radius: 999px;
    padding: .65rem .9rem;
    background: rgba(255,255,255,.8);
    border: 1px solid rgba(23,36,63,.1);
    color: #17243f;
    font-weight: 950;
    box-shadow: 0 12px 28px rgba(23,36,63,.08);
}

.front-body .training-insight-grid {
    display: grid;
    grid-template-columns: minmax(270px, .95fr) minmax(330px, 1.05fr) minmax(330px, 1.05fr);
    gap: clamp(.9rem, 1.8vw, 1.2rem);
}

.front-body .training-chart-card {
    position: relative;
    overflow: hidden;
    min-height: 355px;
    padding: clamp(1rem, 1.8vw, 1.35rem);
    border: 1px solid rgba(23,36,63,.1);
    border-radius: 22px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.94), rgba(255,255,255,.76)),
        radial-gradient(circle at 100% 0, rgba(106,63,176,.11), transparent 34%),
        radial-gradient(circle at 0 100%, rgba(239,95,122,.11), transparent 34%);
    box-shadow: 0 20px 48px rgba(23,36,63,.09);
}

.front-body .training-donut {
    display: grid;
    place-items: center;
    align-content: center;
    width: min(210px, 72vw);
    aspect-ratio: 1;
    margin: .35rem auto 1rem;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255,255,255,.98) 0 40%, transparent 41%),
        conic-gradient(#566b3a 0 var(--approved-deg), #f28a2e var(--approved-deg) var(--draft-deg), #ef5f7a var(--draft-deg) var(--empty-deg), #6a3fb0 var(--empty-deg) 360deg);
    box-shadow: inset 0 0 0 1px rgba(23,36,63,.08), 0 20px 44px rgba(23,36,63,.11);
}

.front-body .training-donut b {
    color: #17243f;
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 950;
    line-height: .9;
}

.front-body .training-donut span {
    color: rgba(23,36,63,.66);
    font-weight: 900;
}

.front-body .training-legend {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
}

.front-body .training-legend span {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-width: 0;
    color: #263553;
    font-weight: 850;
}

.front-body .training-legend i {
    width: .72rem;
    height: .72rem;
    border-radius: 50%;
    flex: 0 0 auto;
}

.front-body .training-legend b {
    margin-left: auto;
    color: #17243f;
}

.front-body .training-bars,
.front-body .training-mini-rank {
    display: grid;
    gap: .72rem;
}

.front-body .training-bar-row {
    display: grid;
    gap: .42rem;
    padding: .72rem;
    border-left: 6px solid var(--chart-color);
    border-radius: 16px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--chart-color) 14%, #fff), rgba(255,255,255,.72));
}

.front-body .training-bar-row div {
    display: flex;
    justify-content: space-between;
    gap: .8rem;
    color: #17243f;
    font-weight: 950;
}

.front-body .training-bar-row span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.front-body .training-bar-row i,
.front-body .participant-meter i,
.front-body .training-mini-rank i {
    display: block;
    height: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(23,36,63,.08);
}

.front-body .training-bar-row em,
.front-body .participant-meter i em,
.front-body .training-mini-rank i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--chart-color);
}

.front-body .training-bar-row.army { --chart-color: #566b3a; }
.front-body .training-bar-row.pink { --chart-color: #ef5f7a; }
.front-body .training-bar-row.orange { --chart-color: #f28a2e; }
.front-body .training-bar-row.navy { --chart-color: #1f5f99; }
.front-body .training-bar-row.purple { --chart-color: #6a3fb0; }

.front-body .training-participant-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
    margin-bottom: 1rem;
}

.front-body .participant-meter {
    --chart-color: #1f5f99;
    display: grid;
    gap: .45rem;
    padding: .9rem;
    border-radius: 18px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--chart-color) 13%, #fff), rgba(255,255,255,.72));
    border: 1px solid rgba(23,36,63,.08);
}

.front-body .participant-meter.female { --chart-color: #ef5f7a; }

.front-body .participant-meter span {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: rgba(23,36,63,.64);
    font-weight: 900;
}

.front-body .participant-icon {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    overflow: hidden;
    border-radius: 50%;
    background:
        linear-gradient(145deg, rgba(255,255,255,.76), rgba(255,255,255,.28)),
        color-mix(in srgb, var(--chart-color) 18%, #fff);
    border: 1px solid color-mix(in srgb, var(--chart-color) 28%, rgba(255,255,255,.65));
    box-shadow: inset 0 1px rgba(255,255,255,.74), 0 10px 22px color-mix(in srgb, var(--chart-color) 18%, transparent);
}

.front-body .participant-icon img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.front-body .participant-meter strong {
    color: #17243f;
    font-size: 1.75rem;
    font-weight: 950;
}

.front-body .participant-meter i em {
    width: var(--value);
}

.front-body .training-mini-rank span {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(90px, 1.1fr) auto;
    align-items: center;
    gap: .55rem;
    color: #17243f;
    font-weight: 850;
}

.front-body .training-mini-rank b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.front-body .training-mini-rank i {
    --chart-color: linear-gradient(90deg, #ef5f7a, #f28a2e, #566b3a, #1f5f99, #6a3fb0);
    height: 10px;
}

.front-body .training-mini-rank em {
    color: rgba(23,36,63,.64);
    font-size: .84rem;
    font-style: normal;
}

.front-body .training-list-title {
    margin: clamp(1.35rem, 2.5vw, 2.2rem) 0 1rem;
}

.front-body .training-report-grid {
    align-items: stretch;
}

.front-body .training-report-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.front-body .training-report-body {
    margin: 0;
    color: rgba(23, 36, 63, .74);
    font-size: 1rem;
    line-height: 1.75;
}

.front-body .training-report-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: auto 0 0;
}

.front-body .training-report-stats div {
    padding: 12px;
    border: 1px solid rgba(23, 36, 63, .08);
    border-radius: 16px;
    background: rgba(255,255,255,.72);
}

.front-body .training-report-stats dt {
    color: #667085;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.front-body .training-report-stats dd {
    margin: 4px 0 0;
    color: #17243f;
    font-weight: 900;
}

.front-body .training-report-stats .attendance-detail {
    grid-column: 1 / -1;
    padding: 10px 12px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.84), rgba(255,255,255,.64)),
        radial-gradient(circle at 100% 0, rgba(31,95,153,.1), transparent 42%);
}

.front-body .training-report-stats .attendance-detail.trainer {
    background:
        linear-gradient(135deg, rgba(255,255,255,.84), rgba(255,255,255,.64)),
        radial-gradient(circle at 100% 0, rgba(239,95,122,.12), transparent 42%);
}

.front-body .training-report-stats .attendance-detail dd {
    display: grid;
    gap: 4px;
}

.front-body .training-report-stats .attendance-detail dd strong {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: .22rem .55rem;
    border-radius: 999px;
    background: rgba(23,36,63,.06);
    color: #17243f;
    font-size: .9rem;
    line-height: 1.2;
}

.front-body .training-report-stats .attendance-detail dd span {
    color: rgba(23,36,63,.72);
    font-size: .78rem;
    font-weight: 800;
    line-height: 1.35;
}

.front-body .training-evidence-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.front-body .training-evidence-links a {
    padding: .55rem .8rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(239,95,122,.16), rgba(106,63,176,.14));
    color: #17243f;
    font-weight: 900;
    text-decoration: none;
}

.front-body .training-ai-insights {
    display: grid;
    grid-template-columns: auto repeat(3, minmax(0, 1fr));
    gap: .75rem;
    align-items: stretch;
    margin-top: clamp(.95rem, 1.7vw, 1.25rem);
}

.front-body .training-ai-insights .eyebrow {
    display: grid;
    place-items: center;
    min-height: 74px;
    margin: 0;
    padding: .9rem 1rem;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(23,36,63,.92), rgba(106,63,176,.82));
    color: #fff;
}

.front-body .training-ai-insights span {
    display: flex;
    align-items: center;
    min-height: 74px;
    padding: .95rem 1rem;
    border: 1px solid rgba(23,36,63,.08);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.9), rgba(255,255,255,.72)),
        radial-gradient(circle at 100% 0, rgba(239,95,122,.14), transparent 40%);
    color: #263553;
    font-weight: 850;
    line-height: 1.45;
}

.front-body .training-performance-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(.9rem, 1.8vw, 1.2rem);
    margin-top: clamp(.95rem, 1.7vw, 1.25rem);
}

.front-body .training-performance-card {
    display: grid;
    gap: .65rem;
    padding: clamp(1rem, 1.8vw, 1.25rem);
    border: 1px solid rgba(23,36,63,.09);
    border-radius: 22px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.92), rgba(255,255,255,.76)),
        radial-gradient(circle at 100% 0, rgba(242,138,46,.13), transparent 34%),
        radial-gradient(circle at 0 100%, rgba(31,95,153,.1), transparent 36%);
    box-shadow: 0 18px 44px rgba(23,36,63,.08);
}

.front-body .training-performance-card h4 {
    margin: 0 0 .25rem;
    color: #17243f;
    font-size: 1.05rem;
    font-weight: 950;
}

.front-body .training-performance-card ol {
    display: grid;
    gap: .55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.front-body .training-performance-card li {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .65rem;
    min-height: 44px;
    padding: .5rem .65rem;
    border-radius: 14px;
    background: rgba(255,255,255,.72);
    color: #17243f;
    font-weight: 900;
}

.front-body .training-performance-card li i {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #ef5f7a, #6a3fb0);
    color: #fff;
    font-style: normal;
    font-size: .82rem;
}

.front-body .training-performance-card li span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.front-body .training-performance-card li b {
    color: #9e171b;
}

/* Compact executive report mode: keeps ASAD Bela Diri dense, readable, and less space-hungry. */
.front-body .training-report-section {
    padding-top: clamp(12px, 1.6vw, 22px);
}

.front-body .training-report-section > .section-head {
    align-items: end;
    gap: clamp(.75rem, 1.6vw, 1.1rem);
    margin-bottom: .65rem;
}

.front-body .training-report-section > .section-head h2 {
    max-width: 720px;
    font-size: clamp(2rem, 3.6vw, 3.6rem);
    line-height: .94;
}

.front-body .training-report-section > .section-head p:not(.eyebrow) {
    max-width: 580px;
    margin-top: .45rem;
    font-size: .92rem;
    line-height: 1.5;
}

.front-body .training-period-filter {
    gap: .45rem;
}

.front-body .training-period-filter label {
    gap: .24rem;
    font-size: .62rem;
}

.front-body .training-period-filter select,
.front-body .training-period-filter input,
.front-body .training-period-filter button {
    min-height: 38px;
    border-radius: 11px;
    padding: .48rem .62rem;
    font-size: .78rem;
}

.front-body .training-insight-panel {
    margin: .65rem 0 .9rem;
    padding: clamp(.8rem, 1.45vw, 1.1rem);
    border-radius: 22px;
}

.front-body .training-insight-head {
    align-items: center;
    margin-bottom: .65rem;
}

.front-body .training-insight-head h1 {
    margin: .1rem 0 0;
    font-size: clamp(1.45rem, 2.6vw, 2.45rem);
    line-height: .98;
}

.front-body .training-insight-head strong,
.front-body .training-list-title > span {
    padding: .48rem .72rem;
    font-size: .86rem;
}

.front-body .training-insight-grid {
    gap: .65rem;
}

.front-body .training-chart-card {
    min-height: 0;
    padding: .82rem;
    border-radius: 18px;
}

.front-body .chart-card-title {
    margin-bottom: .55rem;
}

.front-body .training-donut {
    width: min(150px, 58vw);
    margin: .15rem auto .65rem;
}

.front-body .training-donut b {
    font-size: clamp(2rem, 3.8vw, 3rem);
}

.front-body .training-donut span,
.front-body .training-legend span,
.front-body .training-bar-row div,
.front-body .training-mini-rank span,
.front-body .training-performance-card li {
    font-size: .76rem;
}

.front-body .training-legend {
    gap: .38rem .55rem;
}

.front-body .training-bars,
.front-body .training-mini-rank {
    gap: .38rem;
}

.front-body .training-bar-row {
    gap: .28rem;
    padding: .48rem .55rem;
    border-left-width: 4px;
    border-radius: 12px;
}

.front-body .training-bar-row i,
.front-body .participant-meter i,
.front-body .training-mini-rank i {
    height: 8px;
}

.front-body .training-participant-summary {
    gap: .5rem;
    margin-bottom: .55rem;
}

.front-body .participant-meter {
    gap: .28rem;
    padding: .58rem;
    border-radius: 14px;
}

.front-body .participant-icon {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
}

.front-body .participant-meter strong {
    font-size: 1.25rem;
}

.front-body .training-ai-insights {
    gap: .45rem;
    margin-top: .65rem;
}

.front-body .training-ai-insights .eyebrow,
.front-body .training-ai-insights span {
    min-height: 48px;
    border-radius: 13px;
    padding: .55rem .7rem;
    font-size: .72rem;
    line-height: 1.35;
}

.front-body .training-performance-grid {
    gap: .65rem;
    margin-top: .65rem;
}

.front-body .training-performance-card {
    gap: .42rem;
    padding: .75rem;
    border-radius: 16px;
}

.front-body .training-performance-card h4 {
    font-size: .88rem;
    margin-bottom: .08rem;
}

.front-body .training-performance-card ol {
    gap: .28rem;
}

.front-body .training-performance-card li {
    grid-template-columns: 1.45rem minmax(0, 1fr) auto;
    min-height: 30px;
    gap: .45rem;
    padding: .32rem .45rem;
    border-radius: 10px;
}

.front-body .training-performance-card li i {
    width: 1.45rem;
    height: 1.45rem;
    font-size: .66rem;
}

.front-body .training-list-title {
    margin: .95rem 0 .65rem;
}

/* Premium Top-5 report strip for Internal Access training reports. */
.front-body .training-ai-insights {
    grid-template-columns: 180px repeat(2, minmax(0, 1fr));
    align-items: stretch;
    padding: .5rem;
    border: 1px solid rgba(23,36,63,.08);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.62)),
        radial-gradient(circle at 0 0, rgba(242,138,46,.16), transparent 32%),
        radial-gradient(circle at 100% 0, rgba(106,63,176,.14), transparent 30%);
    box-shadow: 0 18px 42px rgba(23,36,63,.07);
}

.front-body .training-ai-insights .eyebrow {
    min-height: 42px;
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(23,36,63,.98), rgba(106,63,176,.88)),
        linear-gradient(90deg, #ef5f7a, #f28a2e);
    box-shadow: 0 12px 26px rgba(23,36,63,.13);
}

.front-body .training-ai-insights span {
    min-height: 42px;
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,255,255,.78)),
        radial-gradient(circle at 100% 0, rgba(239,95,122,.13), transparent 42%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.92);
}

.front-body .training-performance-grid {
    gap: .7rem;
    margin-top: .7rem;
}

.front-body .training-performance-card {
    position: relative;
    overflow: hidden;
    align-content: start;
    min-height: 0;
    padding: .85rem;
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.97), rgba(255,255,255,.78)),
        radial-gradient(circle at 100% 0, rgba(106,63,176,.12), transparent 36%),
        radial-gradient(circle at 0 100%, rgba(31,95,153,.08), transparent 40%);
    box-shadow: 0 18px 46px rgba(23,36,63,.08);
}

.front-body .training-performance-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, #ef5f7a, #f28a2e, #4d6a3c, #1f5f99, #6a3fb0);
}

.front-body .training-performance-card h4 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    font-size: .92rem;
    letter-spacing: .01em;
}

.front-body .training-performance-card h4::after {
    content: "TOP 5";
    flex: 0 0 auto;
    padding: .28rem .55rem;
    border-radius: 999px;
    background: rgba(106,63,176,.1);
    color: #6a3fb0;
    font-size: .62rem;
    font-weight: 950;
    letter-spacing: .12em;
}

.front-body .training-performance-card ol {
    gap: .34rem;
}

.front-body .training-performance-card li {
    min-height: 34px;
    padding: .34rem .48rem;
    border: 1px solid rgba(23,36,63,.06);
    background:
        linear-gradient(90deg, rgba(255,255,255,.9), rgba(255,255,255,.68));
    box-shadow: 0 8px 18px rgba(23,36,63,.04);
}

.front-body .training-performance-card li b {
    max-width: 11rem;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .72rem;
}

/* Executive visual analytics: radar, podium, circular ranking, and double donut. */
.front-body .training-radar-card,
.front-body .training-composition-card {
    gap: .75rem;
}

.front-body .training-radar-wrap {
    position: relative;
    width: min(290px, 100%);
    aspect-ratio: 1;
    margin: .05rem auto .25rem;
    border-radius: 28px;
    background:
        radial-gradient(circle at 50% 48%, rgba(255,255,255,.96) 0 18%, rgba(255,255,255,.62) 19% 100%),
        radial-gradient(circle at 20% 16%, rgba(212,175,55,.2), transparent 30%),
        radial-gradient(circle at 86% 74%, rgba(106,63,176,.16), transparent 34%);
    box-shadow: inset 0 1px rgba(255,255,255,.86), 0 20px 48px rgba(23,36,63,.08);
}

.front-body .training-radar-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.front-body .training-radar-svg polygon,
.front-body .training-radar-svg line {
    fill: none;
    stroke: rgba(23,36,63,.12);
    stroke-width: .45;
}

.front-body .training-radar-svg .radar-area {
    fill: rgba(106,63,176,.15);
    stroke: rgba(239,95,122,.82);
    stroke-width: 1.5;
    filter: drop-shadow(0 10px 16px rgba(106,63,176,.16));
    animation: radarPulse 1s ease-out both;
}

@keyframes radarPulse {
    from {
        opacity: 0;
        transform: scale(.85);
        transform-origin: 50% 50%;
    }
    to {
        opacity: 1;
        transform: scale(1);
        transform-origin: 50% 50%;
    }
}

.front-body .radar-point {
    position: absolute;
    left: var(--x);
    top: var(--y);
    z-index: 2;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 2px solid var(--rank-color);
    border-radius: 50%;
    background: rgba(255,255,255,.86);
    box-shadow: 0 12px 24px color-mix(in srgb, var(--rank-color) 34%, transparent);
    cursor: default;
    transform: translate(-50%, -50%);
    transition: transform .2s ease, box-shadow .2s ease;
}

.front-body .radar-point:hover,
.front-body .radar-point:focus-visible {
    z-index: 4;
    transform: translate(-50%, -50%) scale(1.12);
    box-shadow: 0 18px 36px color-mix(in srgb, var(--rank-color) 48%, transparent);
    outline: 0;
}

.front-body .radar-point > img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.front-body .radar-tooltip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 12px);
    display: grid;
    grid-template-columns: 34px minmax(140px, 1fr);
    gap: .12rem .55rem;
    width: max-content;
    max-width: 235px;
    padding: .7rem .8rem;
    border: 1px solid rgba(255,255,255,.34);
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(23,36,63,.96), rgba(77,58,112,.92)),
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--rank-color) 22%, transparent), transparent 46%);
    color: #fff;
    box-shadow: 0 20px 46px rgba(23,36,63,.24);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 8px);
    transition: opacity .18s ease, transform .18s ease;
}

.front-body .radar-point:hover .radar-tooltip,
.front-body .radar-point:focus-visible .radar-tooltip {
    opacity: 1;
    transform: translate(-50%, 0);
}

.front-body .radar-tooltip img {
    grid-row: span 4;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
}

.front-body .radar-tooltip b,
.front-body .radar-tooltip strong {
    color: #fff;
    line-height: 1.12;
}

.front-body .radar-tooltip small,
.front-body .radar-tooltip em {
    color: rgba(255,255,255,.74);
    font-size: .72rem;
    font-style: normal;
}

.front-body .training-podium {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: .48rem;
}

.front-body .podium-rank {
    display: grid;
    gap: .1rem;
    min-height: 74px;
    padding: .58rem;
    border: 1px solid color-mix(in srgb, var(--rank-color) 26%, rgba(23,36,63,.08));
    border-radius: 16px;
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--rank-color) 13%, #fff), rgba(255,255,255,.78)),
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--rank-color) 22%, transparent), transparent 46%);
}

.front-body .podium-rank:first-child {
    min-height: 92px;
}

.front-body .podium-rank i {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--rank-color);
    color: #fff;
    font-size: .7rem;
    font-style: normal;
    font-weight: 950;
}

.front-body .podium-rank b {
    min-width: 0;
    overflow: hidden;
    color: #17243f;
    font-size: .74rem;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.front-body .podium-rank span {
    color: color-mix(in srgb, var(--rank-color) 82%, #17243f);
    font-size: .86rem;
    font-weight: 950;
}

.front-body .double-donut-panel {
    display: grid;
    grid-template-columns: minmax(130px, .9fr) minmax(0, 1fr);
    align-items: center;
    gap: .8rem;
}

.front-body .double-donut-chart {
    position: relative;
    display: grid;
    place-items: center;
    align-content: center;
    width: min(170px, 100%);
    aspect-ratio: 1;
    margin: 0 auto;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255,255,255,.98) 0 36%, transparent 37%),
        conic-gradient(#1f5f99 0 var(--male-deg), rgba(31,95,153,.14) var(--male-deg) 360deg);
    box-shadow: inset 0 0 0 1px rgba(23,36,63,.08), 0 20px 42px rgba(23,36,63,.1);
}

.front-body .double-donut-chart::before {
    content: "";
    position: absolute;
    inset: 24px;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255,255,255,.98) 0 43%, transparent 44%),
        conic-gradient(#ef5f7a 0 var(--female-deg), rgba(239,95,122,.14) var(--female-deg) 360deg);
}

.front-body .double-donut-chart span,
.front-body .double-donut-chart strong {
    position: relative;
    z-index: 1;
}

.front-body .double-donut-chart span {
    color: rgba(23,36,63,.62);
    font-size: .72rem;
    font-weight: 900;
}

.front-body .double-donut-chart strong {
    color: #17243f;
    font-size: 1.35rem;
    font-weight: 950;
}

.front-body .double-donut-legend {
    display: grid;
    gap: .5rem;
}

.front-body .double-donut-legend span {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .08rem .4rem;
    padding: .55rem .62rem;
    border-radius: 14px;
    border: 1px solid rgba(23,36,63,.07);
    background: rgba(255,255,255,.72);
}

.front-body .double-donut-legend .male { border-left: 4px solid #1f5f99; }
.front-body .double-donut-legend .female { border-left: 4px solid #ef5f7a; }

.front-body .double-donut-legend b,
.front-body .double-donut-legend strong {
    color: #17243f;
    font-weight: 950;
}

.front-body .double-donut-legend em {
    grid-column: 1 / -1;
    color: rgba(23,36,63,.62);
    font-size: .72rem;
    font-style: normal;
    font-weight: 850;
}

.front-body .trainer-donut-rank {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .42rem;
}

.front-body .trainer-donut-item {
    display: grid;
    justify-items: center;
    gap: .2rem;
    min-width: 0;
    padding: .55rem .35rem;
    border: 1px solid color-mix(in srgb, var(--rank-color) 24%, rgba(23,36,63,.08));
    border-radius: 16px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.9), rgba(255,255,255,.64)),
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--rank-color) 18%, transparent), transparent 45%);
    transition: transform .18s ease, box-shadow .18s ease;
}

.front-body .trainer-donut-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px color-mix(in srgb, var(--rank-color) 20%, transparent);
}

.front-body .trainer-donut {
    display: grid;
    place-items: center;
    width: 62px;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255,255,255,.98) 0 50%, transparent 51%),
        conic-gradient(var(--rank-color) 0 var(--value), rgba(23,36,63,.08) var(--value) 100%);
    box-shadow: 0 10px 20px color-mix(in srgb, var(--rank-color) 18%, transparent);
}

.front-body .trainer-donut strong {
    color: #17243f;
    font-size: .78rem;
    font-weight: 950;
}

.front-body .trainer-donut-item span {
    color: color-mix(in srgb, var(--rank-color) 82%, #17243f);
    font-size: .7rem;
    font-weight: 950;
}

.front-body .trainer-donut-item b {
    max-width: 100%;
    overflow: hidden;
    color: #17243f;
    font-size: .68rem;
    font-weight: 950;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.front-body .training-guidance-card {
    grid-column: 1 / -1;
}

@media (max-width: 1120px) {
    .front-body .training-period-filter,
    .front-body .training-insight-grid {
        grid-template-columns: 1fr 1fr;
    }
    .front-body .training-period-filter input {
        grid-column: 1 / -1;
    }
    .front-body .training-status-card {
        grid-column: 1 / -1;
    }
    .front-body .training-ai-insights,
    .front-body .training-performance-grid {
        grid-template-columns: 1fr 1fr;
    }
    .front-body .training-ai-insights .eyebrow {
        grid-column: 1 / -1;
    }
    .front-body .training-report-section > .section-head .training-report-title span {
        white-space: normal;
    }
    .front-body .double-donut-panel {
        grid-template-columns: 1fr;
    }
    .front-body .trainer-donut-rank {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .front-body .training-period-filter,
    .front-body .training-insight-grid,
    .front-body .training-participant-summary,
    .front-body .training-ai-insights,
    .front-body .training-performance-grid {
        grid-template-columns: 1fr;
    }
    .front-body .training-insight-head,
    .front-body .training-list-title {
        align-items: flex-start;
        flex-direction: column;
    }
    .front-body .training-mini-rank span {
        grid-template-columns: 1fr;
    }
    .front-body .training-podium,
    .front-body .trainer-donut-rank {
        grid-template-columns: 1fr;
    }
    .front-body .podium-rank,
    .front-body .podium-rank:first-child {
        min-height: 0;
    }
    .front-body .radar-tooltip {
        left: auto;
        right: 0;
        transform: translate(0, 8px);
    }
    .front-body .radar-point:hover .radar-tooltip,
    .front-body .radar-point:focus-visible .radar-tooltip {
        transform: translate(0, 0);
    }
}

.front-body .empty-state {
    padding: clamp(24px, 4vw, 42px);
    border: 1px solid rgba(23, 36, 63, .08);
    border-radius: 24px;
    background: rgba(255,255,255,.82);
    color: #17243f;
}

.admin-body .admin-form small {
    color: #667085;
    font-weight: 700;
    line-height: 1.45;
}

.admin-body .document-link,
.admin-body .table-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 34px;
    border: 1px solid rgba(15,23,42,.1);
    border-radius: 999px;
    padding: .42rem .72rem;
    background: linear-gradient(135deg, rgba(239,95,122,.12), rgba(106,63,176,.12));
    color: #17243f;
    font-weight: 900;
    text-decoration: none;
}

.admin-body .document-link:hover,
.admin-body .table-link:hover {
    border-color: rgba(158,23,27,.24);
    background: linear-gradient(135deg, rgba(239,95,122,.2), rgba(106,63,176,.18));
}

/* ASAD Bela Diri: compact spacing so the report content starts higher. */
.front-body .page-hero.dynamic-banner.dynamic-banner-card.training-report-hero {
    min-height: clamp(220px, 20vw, 300px) !important;
    margin: clamp(.45rem, 1vw, .85rem) auto clamp(.55rem, 1.2vw, .95rem) !important;
    padding: clamp(1.25rem, 2.8vw, 2.35rem) !important;
}

.front-body .page-hero.dynamic-banner.dynamic-banner-card.training-report-hero + .training-report-section {
    padding-top: clamp(.25rem, .8vw, .65rem) !important;
}

.front-body .training-report-section {
    padding-bottom: clamp(1.7rem, 3.3vw, 2.75rem);
}

.front-body .training-report-section > .section-head {
    margin-bottom: clamp(.65rem, 1.2vw, .95rem);
}

.front-body .training-report-section > .section-head h1 {
    margin: .15rem 0 0;
    font-size: clamp(2.35rem, 4.6vw, 4.4rem);
    line-height: .98;
}

.front-body .training-report-section > .section-head p:not(.eyebrow) {
    margin-top: clamp(.65rem, 1.1vw, .9rem);
}

/* Slim report header: the title stays authoritative without eating vertical space. */
.front-body .training-report-section > .section-head {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: .75rem;
}

.front-body .training-report-section > .section-head .training-report-title {
    max-width: min(1180px, 100%) !important;
    margin: .12rem 0 0;
    font-size: clamp(2.7rem, 4.25vw, 4.85rem);
    line-height: .92;
    letter-spacing: 0;
}

.front-body .training-report-section > .section-head .training-report-title span {
    display: block;
    white-space: nowrap;
}

.front-body .training-report-section > .section-head p:not(.eyebrow) {
    max-width: 760px;
    margin-top: .4rem;
}

.front-body .training-period-filter {
    justify-self: stretch;
    grid-template-columns: 130px 105px 170px 160px 160px minmax(170px, 220px) 112px;
    gap: .42rem;
    padding: .55rem;
    border: 1px solid rgba(23,36,63,.08);
    border-radius: 18px;
    background: rgba(255,255,255,.42);
    box-shadow: 0 16px 34px rgba(23,36,63,.05);
    backdrop-filter: blur(12px);
}

.front-body .training-period-filter input[name="q"] {
    max-width: 220px;
}

.front-body .training-period-filter select,
.front-body .training-period-filter input,
.front-body .training-period-filter button {
    min-height: 36px;
    border-radius: 10px;
    padding: .42rem .58rem;
    font-size: .74rem;
}

.front-body .training-period-filter button {
    padding-inline: .75rem;
}

.front-body .training-insight-panel {
    margin: clamp(.6rem, 1.2vw, .95rem) 0 clamp(1rem, 1.8vw, 1.4rem);
}

.front-body .training-insight-head {
    margin-bottom: clamp(.75rem, 1.4vw, 1rem);
}

@media (max-width: 720px) {
    .front-body .page-hero.dynamic-banner.dynamic-banner-card.training-report-hero {
        min-height: 210px !important;
        margin-top: .55rem !important;
        padding: 1.1rem !important;
    }

    .front-body .training-report-section > .section-head h1 {
        font-size: clamp(2rem, 10vw, 3rem);
    }
}

/* Home index section actions: premium interactive CTA buttons. */
.front-body.home-page .section-head .index-action-button,
.front-body.home-page .section-head .index-action-button:visited {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .62rem;
    min-height: 52px;
    max-width: 100%;
    padding: .8rem 1.12rem .8rem 1.25rem;
    border: 1px solid rgba(255,255,255,.62);
    border-radius: 999px;
    overflow: hidden;
    color: #fff !important;
    font-family: var(--font-admin);
    font-size: clamp(.82rem, .9vw, .94rem);
    font-weight: 950;
    letter-spacing: .01em;
    line-height: 1.12;
    text-align: center;
    text-decoration: none;
    background:
        radial-gradient(circle at 18% 14%, rgba(255,255,255,.28), transparent 28%),
        linear-gradient(135deg, var(--theme-pink, #ef5a78), var(--theme-purple, #7d4fbd));
    box-shadow: 0 16px 34px rgba(125,79,189,.2);
    transform: translateY(0);
    transition: transform .22s ease, box-shadow .22s ease, filter .22s ease, border-color .22s ease;
}

.front-body.home-page .section-head .index-action-achievement,
.front-body.home-page .section-head .index-action-achievement:visited {
    background:
        radial-gradient(circle at 18% 14%, rgba(255,255,255,.25), transparent 28%),
        linear-gradient(135deg, var(--theme-orange, #f28b32), var(--theme-army, #65764d) 52%, var(--theme-purple, #7d4fbd));
    box-shadow: 0 16px 34px rgba(242,139,50,.18);
}

.front-body.home-page .section-head .index-action-button::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.22) 45%, transparent 70%);
    transform: translateX(-118%);
    transition: transform .55s ease;
}

.front-body.home-page .section-head .index-action-button::after {
    content: "\2192";
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
    transition: transform .22s ease, background .22s ease;
}

.front-body.home-page .section-head .index-action-button:hover {
    border-color: rgba(255,255,255,.85);
    filter: saturate(1.06);
    transform: translateY(-2px);
    box-shadow: 0 22px 44px rgba(125,79,189,.25);
}

.front-body.home-page .section-head .index-action-button:hover::before {
    transform: translateX(118%);
}

.front-body.home-page .section-head .index-action-button:hover::after {
    background: rgba(255,255,255,.27);
    transform: translateX(3px);
}

.front-body.home-page .section-head .index-action-button:active {
    transform: translateY(0);
}

.front-body.home-page .section-head .index-action-button:focus-visible {
    outline: 3px solid rgba(242,139,50,.36);
    outline-offset: 4px;
}

@media (max-width: 680px) {
    .front-body.home-page .section-head .index-action-button {
        width: 100%;
    }
}

/* Home front panel polish: readable at normal browser scale without forcing zoom. */
.front-body.home-page .home-video-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(270px, 360px);
    grid-template-areas:
        "content login"
        "content stats";
    align-items: center;
    column-gap: clamp(1.3rem, 3vw, 3.2rem);
    row-gap: clamp(1rem, 2vw, 1.45rem);
    min-height: clamp(590px, calc(100vh - 74px), 760px);
    padding: clamp(5.9rem, 8.2vw, 8.1rem) clamp(1.45rem, 5.6vw, 7rem) clamp(2rem, 3.6vw, 3rem);
}

.front-body.home-page .home-hero-content {
    grid-area: content;
    align-self: center;
    max-width: 1110px;
    padding-top: 0;
}

.front-body.home-page .home-hero-content .eyebrow {
    margin-bottom: clamp(.7rem, 1.3vw, 1rem);
    font-size: clamp(.78rem, .9vw, .9rem);
}

.front-body.home-page .home-hero-content h1 {
    max-width: 13.5ch;
    font-size: clamp(3.1rem, 5vw, 5.35rem);
    line-height: .96;
    letter-spacing: .01em;
}

.front-body.home-page .hero-copy {
    max-width: 820px;
    margin-top: clamp(.8rem, 1.5vw, 1.15rem);
    font-size: clamp(1.05rem, 1.35vw, 1.28rem);
    line-height: 1.45;
}

.front-body.home-page .hero-actions {
    margin-top: clamp(1.15rem, 2vw, 1.55rem);
}

.front-body.home-page .home-login-welcome {
    grid-area: login;
    align-self: end;
    justify-self: stretch;
    width: 100%;
    min-width: 0;
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: .85rem;
    padding: clamp(1rem, 1.45vw, 1.25rem);
    border-left: 5px solid rgba(239, 95, 122, .94);
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(19, 26, 48, .88), rgba(46, 42, 82, .72)),
        radial-gradient(circle at 100% 0, rgba(239, 95, 122, .18), transparent 34%);
    box-shadow: 0 22px 44px rgba(0, 0, 0, .22);
    backdrop-filter: blur(15px);
}

.front-body.home-page .home-login-welcome p {
    margin: 0 0 .55rem;
    font-size: clamp(1rem, 1.02vw, 1.12rem);
    line-height: 1.28;
    letter-spacing: .01em;
    overflow-wrap: break-word;
}

.front-body.home-page .home-login-welcome span {
    font-size: clamp(.78rem, .86vw, .88rem);
    line-height: 1.42;
    overflow-wrap: anywhere;
}

.front-body.home-page .home-login-welcome a {
    width: 100%;
    min-height: 42px;
    padding: .68rem 1rem;
    font-size: .86rem;
    letter-spacing: .01em;
}

.front-body.home-page .home-hero-stats {
    grid-area: stats;
    align-self: start;
    justify-self: stretch;
    width: 100%;
    grid-template-columns: 1fr;
    gap: .72rem;
    margin: 0;
}

.front-body.home-page .home-hero-stats div {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: .82rem;
    min-height: 78px;
    padding: .85rem 1rem;
    border-radius: 16px;
}

.front-body.home-page .home-hero-stats strong {
    font-size: clamp(2rem, 2.9vw, 2.7rem);
}

.front-body.home-page .home-hero-stats span {
    margin-top: 0;
    font-size: clamp(.82rem, .9vw, .92rem);
    line-height: 1.25;
}

.front-body.home-page .home-video-hero + .section {
    padding-top: clamp(1rem, 1.8vw, 1.55rem) !important;
}

.front-body.home-page .profile-with-speakers {
    width: min(1460px, calc(100% - 2.4rem));
    grid-template-columns: minmax(0, 1.06fr) minmax(340px, .72fr);
    gap: clamp(1rem, 1.8vw, 1.7rem);
    margin-top: clamp(-1.2rem, -1vw, -.45rem);
}

.front-body.home-page .profile-message-card {
    min-height: clamp(440px, 43vw, 560px);
    grid-template-columns: minmax(390px, .98fr) minmax(310px, .7fr);
    align-items: center;
    gap: clamp(.8rem, 1.4vw, 1.35rem);
    padding: clamp(1rem, 1.8vw, 1.65rem);
}

.front-body.home-page .profile-speech {
    max-width: 620px;
    padding: clamp(1.05rem, 1.75vw, 1.55rem);
}

.front-body.home-page .profile-speech h2 {
    max-width: 12.5ch;
    font-size: clamp(2rem, 3vw, 3.45rem);
    line-height: 1.03;
}

.front-body.home-page .profile-speech p:not(.eyebrow) {
    max-width: 580px;
    font-size: clamp(.98rem, 1.12vw, 1.08rem);
    line-height: 1.62;
}

.front-body.home-page .profile-speakers-photo {
    width: clamp(320px, 31vw, 500px);
    justify-self: center;
    align-self: end;
    margin: clamp(-.8rem, -1vw, -.3rem) auto -1rem;
    transform: translateY(0);
}

@media (max-width: 1280px) {
    .front-body.home-page .home-video-hero {
        grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
        padding-inline: clamp(1.25rem, 4vw, 4rem);
    }

    .front-body.home-page .home-hero-content h1 {
        font-size: clamp(2.75rem, 5.2vw, 4.7rem);
    }

    .front-body.home-page .profile-message-card {
        grid-template-columns: minmax(360px, 1fr) minmax(285px, .68fr);
    }
}

@media (max-width: 1080px) {
    .front-body.home-page .home-video-hero {
        grid-template-columns: 1fr;
        grid-template-areas:
            "login"
            "content"
            "stats";
        align-items: start;
        min-height: auto;
        padding-top: clamp(6.6rem, 12vw, 8.2rem);
    }

    .front-body.home-page .home-login-welcome {
        max-width: 780px;
        justify-self: start;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .front-body.home-page .home-login-welcome a {
        width: auto;
        min-width: 118px;
    }

    .front-body.home-page .home-hero-content h1 {
        max-width: 12.5ch;
    }

    .front-body.home-page .home-hero-stats {
        width: min(720px, 100%);
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .front-body.home-page .home-hero-stats div {
        grid-template-columns: 1fr;
        min-height: 96px;
    }

    .front-body.home-page .profile-with-speakers {
        grid-template-columns: 1fr;
        margin-top: 0;
    }

    .front-body.home-page .profile-message-card {
        grid-template-columns: minmax(0, 1fr) minmax(280px, .55fr);
        min-height: 430px;
    }

    .front-body.home-page .profile-speakers-photo {
        width: clamp(280px, 40vw, 420px);
    }
}

@media (max-width: 760px) {
    .front-body.home-page .home-video-hero {
        padding: 6.2rem 1rem 1.75rem;
        row-gap: 1rem;
    }

    .front-body.home-page .home-login-welcome {
        grid-template-columns: 1fr;
        max-width: none;
        border-left-width: 4px;
        border-radius: 16px;
    }

    .front-body.home-page .home-login-welcome a {
        width: 100%;
    }

    .front-body.home-page .home-hero-content h1 {
        max-width: 11.5ch;
        font-size: clamp(2.35rem, 12vw, 3.35rem);
    }

    .front-body.home-page .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: .7rem;
        max-width: 320px;
    }

    .front-body.home-page .home-hero-stats {
        grid-template-columns: 1fr;
        width: min(360px, 100%);
    }

    .front-body.home-page .profile-with-speakers {
        width: min(100% - 1rem, 1460px);
    }

    .front-body.home-page .profile-message-card {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 1rem 1rem 0;
    }

    .front-body.home-page .profile-speech {
        max-width: none;
    }

    .front-body.home-page .profile-speech h2 {
        max-width: 12ch;
        font-size: clamp(2rem, 11vw, 3rem);
    }

    .front-body.home-page .profile-speech::after {
        display: none;
    }

    .front-body.home-page .profile-speakers-photo {
        width: min(88vw, 380px);
        margin: .2rem auto -1rem;
    }
}

/* Front compact banner system: match Internal Akses report banner proportions. */
.front-body .page-hero.small,
.front-body .article-hero,
.front-body .page-hero.dynamic-banner.dynamic-banner-card,
.front-body .page-hero.dynamic-banner.dynamic-banner-card.pengkab-bromo-hero {
    min-height: clamp(220px, 20vw, 300px) !important;
    padding: clamp(1.25rem, 2.8vw, 2.35rem) clamp(1.2rem, 4vw, 3rem) !important;
}

.front-body .page-hero.dynamic-banner.dynamic-banner-card,
.front-body .page-hero.dynamic-banner.dynamic-banner-card.pengkab-bromo-hero {
    margin: clamp(.45rem, 1vw, .85rem) auto clamp(.55rem, 1.2vw, .95rem) !important;
}

.front-body .page-hero.small h1,
.front-body .article-hero h1,
.front-body .page-hero.dynamic-banner.dynamic-banner-card h1 {
    font-size: clamp(2.15rem, 4.4vw, 4.15rem) !important;
    line-height: 1 !important;
}

.front-body .page-hero.dynamic-banner.dynamic-banner-card .dynamic-banner-subtitle {
    margin-top: clamp(.55rem, 1vw, .8rem) !important;
    font-size: clamp(.96rem, 1.18vw, 1.08rem) !important;
    line-height: 1.48 !important;
}

.front-body .page-hero.dynamic-banner.dynamic-banner-card .eyebrow,
.front-body .page-hero.small .eyebrow,
.front-body .article-hero .eyebrow {
    margin-bottom: clamp(.45rem, .8vw, .65rem) !important;
}

.front-body .page-hero.dynamic-banner.dynamic-banner-card + .section,
.front-body .page-hero.small + .section,
.front-body .article-hero + .section {
    padding-top: clamp(.65rem, 1.25vw, 1.05rem) !important;
}

.front-body .chapter-map-hero {
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: center;
    justify-content: stretch;
    align-items: center;
    min-height: clamp(220px, 20vw, 300px) !important;
    padding: clamp(1.25rem, 2.8vw, 2.35rem) clamp(1.2rem, 4vw, 3rem) !important;
}

.front-body .chapter-map-hero > div {
    max-width: min(760px, 72vw);
}

.front-body .chapter-map-hero .chapter-hero-logo {
    width: clamp(76px, 8vw, 112px);
    height: clamp(76px, 8vw, 112px);
    justify-self: end;
}

.front-body .chapter-map-hero h1 {
    max-width: 760px;
    font-size: clamp(2.25rem, 4.8vw, 4.3rem) !important;
    line-height: .98 !important;
}

.front-body .chapter-map-hero::before {
    background-position: center 46%;
}

.front-body .chapter-map-hero + .section.two-column {
    padding-top: clamp(.75rem, 1.25vw, 1.05rem) !important;
    padding-bottom: clamp(.35rem, .8vw, .7rem) !important;
}

.front-body .chapter-map-hero + .section.two-column .detail-panel,
.front-body .chapter-map-hero + .section.two-column .side-panel {
    padding-block: clamp(1rem, 1.8vw, 1.45rem);
}

.front-body .chapter-sk-section {
    padding-top: 0 !important;
    padding-bottom: clamp(1.4rem, 3vw, 2.3rem) !important;
}

.front-body .chapter-sk-card {
    margin-top: 0 !important;
    padding-top: clamp(1.15rem, 2.2vw, 1.75rem) !important;
}

@media (max-width: 760px) {
    .front-body .page-hero.small,
    .front-body .article-hero,
    .front-body .page-hero.dynamic-banner.dynamic-banner-card,
    .front-body .page-hero.dynamic-banner.dynamic-banner-card.pengkab-bromo-hero,
    .front-body .chapter-map-hero {
        min-height: 210px !important;
        padding: 1.1rem !important;
    }

    .front-body .chapter-map-hero {
        grid-template-columns: 1fr;
        gap: .9rem;
    }

    .front-body .chapter-map-hero > div {
        max-width: 100%;
    }

    .front-body .chapter-map-hero .chapter-hero-logo {
        justify-self: start;
        width: 72px;
        height: 72px;
    }

    .front-body .chapter-map-hero h1 {
        font-size: clamp(2rem, 10vw, 3rem) !important;
    }
}

/* Home hero final refinement: keep video visible, make login and stats transparent. */
.front-body.home-page .home-video-overlay {
    background:
        linear-gradient(90deg, rgba(9, 18, 26, .78), rgba(23, 36, 63, .46) 42%, rgba(86, 107, 58, .26) 68%, rgba(106, 63, 176, .28)),
        linear-gradient(0deg, rgba(9, 18, 26, .58), rgba(9, 18, 26, .10) 56%, rgba(9, 18, 26, .44)) !important;
}

.front-body.home-page .home-video-hero {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
    column-gap: clamp(1.2rem, 2.8vw, 3rem);
}

.front-body.home-page .home-login-welcome {
    align-self: center;
    padding: clamp(.9rem, 1.35vw, 1.15rem);
    border: 1px solid rgba(255, 255, 255, .22);
    border-left: 1px solid rgba(255, 255, 255, .22);
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(15, 23, 42, .36), rgba(52, 43, 86, .20)),
        rgba(255, 255, 255, .05) !important;
    box-shadow: 0 16px 34px rgba(0, 0, 0, .12);
    backdrop-filter: blur(8px);
}

.front-body.home-page .home-login-welcome p {
    font-size: clamp(.98rem, 1vw, 1.08rem);
    line-height: 1.32;
}

.front-body.home-page .home-login-welcome span {
    color: rgba(255, 255, 255, .86);
    font-size: clamp(.76rem, .82vw, .84rem);
}

.front-body.home-page .home-login-welcome a {
    min-height: 38px;
    border: 1px solid rgba(255, 255, 255, .34);
    background: rgba(255, 255, 255, .12) !important;
    color: #fff;
    box-shadow: none;
}

.front-body.home-page .home-login-welcome a:hover {
    background: rgba(255, 255, 255, .20) !important;
}

.front-body.home-page .home-hero-stats {
    gap: .58rem;
}

.front-body.home-page .home-hero-stats div {
    min-height: 58px;
    padding: .62rem .78rem;
    border: 1px solid rgba(255, 255, 255, .20);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .055)) !important;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .10);
    backdrop-filter: blur(7px);
}

.front-body.home-page .home-hero-stats strong {
    font-size: clamp(1.55rem, 2.15vw, 2.15rem);
    text-shadow: 0 8px 18px rgba(0, 0, 0, .18);
}

.front-body.home-page .home-hero-stats span {
    font-size: clamp(.74rem, .8vw, .84rem);
    color: rgba(255, 255, 255, .9);
}

@media (min-width: 1081px) {
    .front-body.home-page .home-hero-stats {
        align-self: end;
    }
}

@media (max-width: 1080px) {
    .front-body.home-page .home-login-welcome {
        background: rgba(15, 23, 42, .26) !important;
    }

    .front-body.home-page .home-hero-stats div {
        min-height: 72px;
    }
}

/* Home profile final polish: balanced leader photo and readable red cards at 100% browser scale. */
.front-body.home-page .profile-with-speakers {
    width: min(1560px, calc(100% - 2rem));
    grid-template-columns: minmax(720px, 1.32fr) minmax(520px, .9fr);
    gap: clamp(1rem, 1.45vw, 1.45rem);
    align-items: center;
}

.front-body.home-page .profile-message-card {
    min-height: clamp(500px, 39vw, 610px);
    grid-template-columns: minmax(360px, .88fr) minmax(390px, .82fr);
    align-items: center;
    gap: clamp(.85rem, 1.25vw, 1.25rem);
    padding: clamp(1rem, 1.55vw, 1.55rem);
    overflow: hidden;
}

.front-body.home-page .profile-speech {
    align-self: center;
    max-width: 610px;
    padding: clamp(1.6rem, 2.25vw, 2.35rem);
}

.front-body.home-page .profile-speech h2 {
    max-width: 12.8ch;
    font-size: clamp(2.05rem, 2.65vw, 3.35rem);
    line-height: .98;
}

.front-body.home-page .profile-speech p:not(.eyebrow) {
    max-width: 34rem;
    font-size: clamp(.98rem, 1.05vw, 1.14rem);
    line-height: 1.62;
}

.front-body.home-page .profile-speakers-photo {
    width: clamp(420px, 31vw, 570px);
    align-self: center;
    justify-self: center;
    margin: clamp(-2.1rem, -1.7vw, -.9rem) auto clamp(-1rem, -1vw, -.35rem);
    transform: translateY(-4%);
    object-fit: contain;
}

.front-body.home-page .profile-with-speakers > .feature-grid.compact {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(.85rem, 1.05vw, 1rem) !important;
    align-self: center;
    min-width: 0;
}

.front-body.home-page .profile-with-speakers > .feature-grid.compact article {
    min-width: 0;
    min-height: clamp(152px, 11vw, 178px);
    padding: 1.12rem 1rem 1.12rem 5rem;
    align-content: center;
    border-radius: 8px;
    overflow: hidden;
}

.front-body.home-page .profile-with-speakers > .feature-grid.compact article::after {
    left: .95rem;
    width: 58px;
    height: 58px;
    background-size: 35px 35px;
}

.front-body.home-page .profile-with-speakers > .feature-grid.compact article strong {
    max-width: 100%;
    font-size: clamp(.94rem, .95vw, 1.05rem);
    line-height: 1.18;
    overflow-wrap: anywhere;
}

.front-body.home-page .profile-with-speakers > .feature-grid.compact article span {
    max-width: 100%;
    font-size: clamp(.82rem, .86vw, .93rem);
    line-height: 1.38;
    overflow-wrap: anywhere;
}

@media (max-width: 1280px) {
    .front-body.home-page .profile-with-speakers {
        grid-template-columns: 1fr;
        width: min(1120px, calc(100% - 1.5rem));
    }

    .front-body.home-page .profile-with-speakers > .feature-grid.compact {
        grid-template-columns: repeat(2, minmax(230px, 1fr)) !important;
    }
}

@media (max-width: 860px) {
    .front-body.home-page .profile-message-card {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 1rem 1rem 0;
    }

    .front-body.home-page .profile-speakers-photo {
        width: min(88vw, 420px);
        margin: .2rem auto -1rem;
        transform: none;
    }

    .front-body.home-page .profile-with-speakers > .feature-grid.compact {
        grid-template-columns: 1fr !important;
    }
}

/* Controlled public theme layer: color and mood only, no layout changes. */
.front-body.theme-asad-heritage {
    --theme-page: #fff8f5;
    --theme-panel: rgba(255, 255, 255, .86);
    --theme-navy: #16233d;
    --theme-navy-2: #263c64;
    --theme-pink: #ef5a78;
    --theme-army: #64784a;
    --theme-orange: #f28b32;
    --theme-purple: #7d4fbd;
    --theme-text: #14213a;
}

.front-body.theme-bromo-sunrise {
    --theme-page: #fffaf5;
    --theme-panel: rgba(255, 255, 255, .88);
    --theme-navy: #142541;
    --theme-navy-2: #315069;
    --theme-pink: #ef6f93;
    --theme-army: #6f7d4a;
    --theme-orange: #f28b32;
    --theme-purple: #8057c8;
    --theme-text: #14213a;
}

.front-body.theme-majapahit-royal {
    --theme-page: #fffaf7;
    --theme-panel: rgba(255, 255, 255, .88);
    --theme-navy: #101d36;
    --theme-navy-2: #28385c;
    --theme-pink: #d94f73;
    --theme-army: #596f42;
    --theme-orange: #d9a441;
    --theme-purple: #673ab7;
    --theme-text: #111c34;
}

.front-body.theme-jatim-fresh {
    --theme-page: #fffafd;
    --theme-panel: rgba(255, 255, 255, .9);
    --theme-navy: #1b3154;
    --theme-navy-2: #356170;
    --theme-pink: #f07da0;
    --theme-army: #758a58;
    --theme-orange: #ff9a3c;
    --theme-purple: #8a63d2;
    --theme-text: #15213b;
}

.front-body[class*="theme-"] {
    color: var(--theme-text);
    background:
        radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--theme-pink) 12%, transparent), transparent 34%),
        radial-gradient(circle at 90% 8%, color-mix(in srgb, var(--theme-purple) 14%, transparent), transparent 32%),
        linear-gradient(180deg, var(--theme-page), #fff);
}

.front-body[class*="theme-"] .site-header {
    background:
        linear-gradient(110deg, color-mix(in srgb, var(--theme-navy) 94%, transparent), color-mix(in srgb, var(--theme-army) 72%, transparent) 64%, color-mix(in srgb, var(--theme-purple) 72%, transparent)),
        radial-gradient(circle at 18% 30%, rgba(255, 255, 255, .16), transparent 22%);
}

.front-body[class*="theme-"] .site-nav a.active,
.front-body[class*="theme-"] .site-nav a:hover,
.front-body[class*="theme-"] .nav-dropdown.active .nav-parent,
.front-body[class*="theme-"] .nav-parent:hover {
    border-bottom-color: var(--theme-orange);
    background: rgba(255, 255, 255, .15);
}

.front-body[class*="theme-"] .language-switcher a.active,
.front-body[class*="theme-"] .breaking-bar strong,
.front-body[class*="theme-"] .chat-toggle,
.front-body[class*="theme-"] .primary-button {
    background: linear-gradient(135deg, var(--theme-pink), var(--theme-purple));
    color: #fff;
}

.front-body[class*="theme-"] .primary-button,
.front-body[class*="theme-"] .chat-toggle {
    box-shadow: 0 18px 38px color-mix(in srgb, var(--theme-purple) 22%, transparent);
}

.front-body[class*="theme-"] .breaking-bar,
.front-body[class*="theme-"] .page-hero.dynamic-banner.dynamic-banner-card,
.front-body[class*="theme-"] .profile-message-card,
.front-body[class*="theme-"] .theme-soft-panel {
    background:
        linear-gradient(120deg, color-mix(in srgb, var(--theme-pink) 10%, #fff), color-mix(in srgb, var(--theme-purple) 7%, #fff)),
        var(--theme-panel);
}

.front-body[class*="theme-"] .home-video-overlay,
.front-body[class*="theme-"] .article-hero,
.front-body[class*="theme-"] .page-hero.small,
.front-body[class*="theme-"] .chapter-map-hero::after {
    background:
        linear-gradient(120deg, color-mix(in srgb, var(--theme-navy) 92%, transparent), color-mix(in srgb, var(--theme-army) 45%, transparent), color-mix(in srgb, var(--theme-purple) 42%, transparent));
}

.front-body[class*="theme-"] .feature-grid.compact article,
.front-body[class*="theme-"] .home-hero-stats div,
.front-body[class*="theme-"] .home-login-welcome {
    border-color: rgba(255, 255, 255, .20);
    background:
        radial-gradient(circle at 84% 18%, color-mix(in srgb, var(--theme-orange) 23%, transparent), transparent 32%),
        linear-gradient(135deg, color-mix(in srgb, #af1825 82%, var(--theme-pink)), color-mix(in srgb, #9e171b 70%, var(--theme-purple))) !important;
}

.front-body[class*="theme-"] .news-card span,
.front-body[class*="theme-"] .article-row span,
.front-body[class*="theme-"] .achievement-card span,
.front-body[class*="theme-"] .eyebrow,
.front-body[class*="theme-"] .profile-speech .eyebrow {
    color: color-mix(in srgb, var(--theme-orange) 70%, #8a2f1c);
}

.front-body[class*="theme-"] .site-footer,
.front-body[class*="theme-"] .footer-with-photo {
    background:
        linear-gradient(120deg, color-mix(in srgb, var(--theme-navy) 95%, transparent), color-mix(in srgb, var(--theme-army) 55%, transparent), color-mix(in srgb, var(--theme-purple) 72%, transparent));
}

.front-body[class*="theme-"] .footer-video-strip,
.front-body[class*="theme-"] .public-chart-section,
.front-body[class*="theme-"] .achievement-chart-section {
    background:
        radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--theme-pink) 12%, transparent), transparent 34%),
        radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--theme-purple) 13%, transparent), transparent 35%),
        linear-gradient(180deg, color-mix(in srgb, var(--theme-page) 94%, #fff), #fff);
}

/* Admin theme selector. */
.theme-admin-layout {
    align-items: stretch;
}

.theme-admin-card .admin-card-head {
    align-items: flex-start;
}

.theme-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin: .8rem 0 1rem;
}

.theme-choice-card {
    position: relative;
    display: grid;
    gap: .75rem;
    min-height: 190px;
    padding: 1rem;
    border: 1px solid #dde5ec;
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(248, 250, 252, .82)),
        #fff;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .07);
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.theme-choice-card:hover,
.theme-choice-card.active {
    transform: translateY(-2px);
    border-color: #f97316;
    box-shadow: 0 24px 48px rgba(15, 23, 42, .12);
}

.theme-choice-card input {
    position: absolute;
    inset: 1rem 1rem auto auto;
    width: 18px;
    height: 18px;
}

.theme-choice-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-right: 2rem;
}

.theme-choice-top strong {
    font-size: 1.15rem;
    color: #0f172a;
}

.theme-choice-top em {
    border-radius: 999px;
    padding: .3rem .62rem;
    background: #eaf4e4;
    color: #2e6c3b;
    font-size: .78rem;
    font-style: normal;
    font-weight: 900;
}

.theme-choice-summary {
    color: #64748b;
    line-height: 1.45;
}

.theme-palette {
    display: flex;
    gap: .38rem;
    align-items: center;
    margin-top: auto;
}

.theme-palette i {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .95);
    background: var(--swatch);
    box-shadow: 0 8px 18px rgba(15, 23, 42, .12);
}

.theme-guidance-card {
    display: grid;
    align-content: start;
    gap: 1rem;
}

.theme-cycle-box {
    display: grid;
    gap: .35rem;
    padding: 1rem;
    border-radius: 18px;
    border: 1px solid #fde3b6;
    background: linear-gradient(135deg, #fff7ed, #fff);
}

.theme-cycle-box strong {
    color: #9a3412;
}

.theme-safe-list {
    margin: 0;
    padding-left: 1.1rem;
    color: #475569;
}

.theme-safe-list li + li {
    margin-top: .45rem;
}

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

/* Homepage hero refinement: keep the video dominant and move metrics below it. */
.front-body.home-page .home-video-hero {
    min-height: clamp(560px, 76vh, 760px);
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "content" !important;
    align-items: center;
    padding: clamp(5rem, 8vw, 7rem) clamp(1.25rem, 4vw, 4.8rem) clamp(2.4rem, 5vw, 4rem);
    overflow: hidden;
}

.front-body.home-page .home-video-overlay,
.front-body.home-page[class*="theme-"] .home-video-overlay {
    background:
        linear-gradient(90deg, rgba(8, 14, 25, .76) 0%, rgba(12, 20, 35, .50) 46%, rgba(91, 68, 118, .22) 100%),
        radial-gradient(circle at 72% 28%, rgba(255, 255, 255, .08), transparent 32%) !important;
}

.front-body.home-page .home-hero-content {
    grid-area: content;
    z-index: 3;
    max-width: min(880px, 61vw);
}

.front-body.home-page .home-hero-content h1 {
    max-width: 830px;
    font-size: clamp(3.25rem, 5.6vw, 6.25rem);
    line-height: .92;
}

.front-body.home-page .hero-copy {
    max-width: 780px;
}

.front-body.home-page .hero-actions .ghost-button,
.front-body.home-page .home-video-hero .home-hero-stats {
    display: none !important;
}

.front-body.home-page .home-login-welcome,
.front-body.home-page[class*="theme-"] .home-login-welcome {
    position: absolute !important;
    z-index: 4;
    right: clamp(1rem, 3vw, 3.2rem);
    bottom: clamp(1rem, 3vw, 2.25rem);
    width: auto !important;
    max-width: min(560px, calc(100% - 2rem));
    min-height: 0;
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: .7rem;
    padding: .55rem .62rem .55rem .95rem !important;
    border: 1px solid rgba(255, 255, 255, .26) !important;
    border-left: 1px solid rgba(255, 255, 255, .26) !important;
    border-radius: 999px !important;
    background: rgba(12, 18, 32, .24) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .12) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.front-body.home-page .home-login-welcome span {
    display: inline;
    color: rgba(255, 255, 255, .92);
    font-size: clamp(.78rem, .85vw, .9rem);
    font-weight: 900;
    line-height: 1.2;
    white-space: nowrap;
}

.front-body.home-page .home-login-welcome p {
    display: none;
}

.front-body.home-page .home-login-welcome a,
.front-body.home-page[class*="theme-"] .home-login-welcome a {
    width: auto !important;
    min-height: 30px !important;
    padding: .36rem .72rem !important;
    border: 1px solid rgba(255, 255, 255, .24) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .14) !important;
    color: #fff !important;
    box-shadow: none !important;
    font-size: .72rem !important;
    font-weight: 900;
    text-transform: uppercase;
}

.front-body.home-page .home-login-welcome a:hover {
    background: rgba(255, 255, 255, .22) !important;
}

.front-body.home-page .home-summary-strip {
    width: min(1180px, calc(100% - 2rem));
    margin: clamp(1.1rem, 2vw, 1.7rem) auto clamp(.8rem, 1.5vw, 1.2rem);
    padding: clamp(1rem, 1.6vw, 1.25rem);
    display: grid;
    grid-template-columns: minmax(260px, .75fr) minmax(0, 1.35fr);
    gap: 1rem;
    align-items: center;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 22px;
    background:
        radial-gradient(circle at 12% 0%, rgba(239, 90, 120, .08), transparent 30%),
        radial-gradient(circle at 88% 18%, rgba(125, 79, 189, .09), transparent 32%),
        rgba(255, 255, 255, .78);
    box-shadow: 0 18px 45px rgba(15, 23, 42, .08);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.front-body.home-page .home-summary-head h2 {
    margin: .1rem 0 0;
    font-family: var(--font-admin);
    font-size: clamp(1.1rem, 1.7vw, 1.45rem);
    line-height: 1.2;
    color: #14213a;
}

.front-body.home-page .home-summary-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
}

.front-body.home-page .home-summary-cards a {
    min-height: 86px;
    display: grid;
    align-content: center;
    padding: .9rem 1rem;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(248, 250, 252, .76));
    box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

.front-body.home-page .home-summary-cards a:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(15, 23, 42, .1);
}

.front-body.home-page .home-summary-cards a:nth-child(1) {
    border-top: 4px solid var(--theme-army, #64784a);
}

.front-body.home-page .home-summary-cards a:nth-child(2) {
    border-top: 4px solid var(--theme-orange, #f28b32);
}

.front-body.home-page .home-summary-cards a:nth-child(3) {
    border-top: 4px solid var(--theme-purple, #7d4fbd);
}

.front-body.home-page .home-summary-cards strong {
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: .92;
    color: #14213a;
}

.front-body.home-page .home-summary-cards span {
    margin-top: .3rem;
    color: #64748b;
    font-weight: 900;
}

.front-body.home-page .home-summary-strip + .profile-with-speakers {
    margin-top: 0;
    padding-top: clamp(.65rem, 1.1vw, 1rem) !important;
}

@media (max-width: 980px) {
    .front-body.home-page .home-video-hero {
        min-height: clamp(540px, 76vh, 700px);
    }

    .front-body.home-page .home-hero-content {
        max-width: 100%;
    }

    .front-body.home-page .home-summary-strip {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .front-body.home-page .home-video-hero {
        min-height: 660px;
        padding: 4.2rem 1.05rem 5.8rem;
    }

    .front-body.home-page .home-hero-content h1 {
        font-size: clamp(2.5rem, 13vw, 4.2rem);
    }

    .front-body.home-page .home-login-welcome,
    .front-body.home-page[class*="theme-"] .home-login-welcome {
        right: 1rem;
        left: 1rem;
        bottom: .85rem;
        justify-content: center;
        flex-wrap: wrap;
        border-radius: 18px !important;
    }

    .front-body.home-page .home-login-welcome span {
        white-space: normal;
        text-align: center;
    }

    .front-body.home-page .home-summary-cards {
        grid-template-columns: 1fr;
    }
}

/* Restore readable transparent chips on the homepage hero. */
.front-body.home-page .breaking-bar,
.front-body.home-page[class*="theme-"] .breaking-bar {
    background: rgba(15, 23, 42, .30) !important;
    border: 1px solid rgba(255, 255, 255, .20) !important;
    color: #fff !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .18) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.front-body.home-page .breaking-bar strong,
.front-body.home-page[class*="theme-"] .breaking-bar strong {
    color: #fff !important;
    background: linear-gradient(135deg, rgba(239, 95, 122, .88), rgba(106, 63, 176, .82)) !important;
    border-color: rgba(255, 255, 255, .18) !important;
}

.front-body.home-page .breaking-marquee a,
.front-body.home-page[class*="theme-"] .breaking-marquee a {
    color: rgba(255, 255, 255, .94) !important;
    text-shadow: 0 8px 20px rgba(0, 0, 0, .22);
}

.front-body.home-page .breaking-clock,
.front-body.home-page[class*="theme-"] .breaking-clock {
    color: rgba(255, 255, 255, .88) !important;
    background: rgba(255, 255, 255, .10) !important;
    border-color: rgba(255, 255, 255, .18) !important;
}

.front-body.home-page .home-login-welcome,
.front-body.home-page[class*="theme-"] .home-login-welcome {
    right: clamp(1rem, 3vw, 3rem);
    bottom: clamp(1rem, 3vw, 2.3rem);
    max-width: min(520px, calc(100% - 2rem));
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: .86rem .92rem .86rem 1.05rem !important;
    border-radius: 20px !important;
    background:
        linear-gradient(135deg, rgba(16, 24, 42, .30), rgba(89, 70, 122, .18)),
        rgba(255, 255, 255, .08) !important;
}

.front-body.home-page .home-login-copy {
    min-width: 0;
}

.front-body.home-page .home-login-welcome p {
    display: block;
    margin: 0 0 .35rem;
    color: #fff;
    font-family: var(--font-admin);
    font-size: clamp(.95rem, 1vw, 1.08rem);
    font-weight: 950;
    line-height: 1.22;
}

.front-body.home-page .home-login-welcome span {
    display: block;
    color: rgba(255, 255, 255, .86);
    font-size: clamp(.76rem, .82vw, .86rem);
    font-weight: 850;
    line-height: 1.45;
    white-space: normal;
}

.front-body.home-page .home-login-welcome a,
.front-body.home-page[class*="theme-"] .home-login-welcome a {
    min-width: 104px;
    min-height: 38px !important;
    padding: .58rem .85rem !important;
    align-self: stretch;
}

@media (max-width: 720px) {
    .front-body.home-page .home-login-welcome,
    .front-body.home-page[class*="theme-"] .home-login-welcome {
        grid-template-columns: 1fr;
        gap: .75rem;
        align-items: stretch;
    }
}

/* Premium mural treatment for the homepage profile and leaders section. */
.front-body.home-page .profile-with-speakers {
    position: relative;
    isolation: isolate;
    padding: clamp(.7rem, 1.3vw, 1.2rem);
    border-radius: 28px;
    background:
        radial-gradient(circle at 12% 18%, rgba(239, 95, 122, .12), transparent 32%),
        radial-gradient(circle at 88% 12%, rgba(125, 79, 189, .10), transparent 30%),
        linear-gradient(135deg, rgba(255, 250, 246, .92), rgba(255, 238, 230, .78) 46%, rgba(247, 231, 242, .78));
}

.front-body.home-page .profile-with-speakers::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    border-radius: inherit;
    background:
        url('service-item-bg.jpg') left top / 360px auto repeat,
        repeating-linear-gradient(135deg, rgba(183, 130, 65, .10) 0 1px, transparent 1px 18px);
    opacity: .13;
    filter: sepia(.55) saturate(.8) brightness(1.18);
    pointer-events: none;
}

.front-body.home-page .profile-with-speakers::after {
    content: "";
    position: absolute;
    inset: auto -7% -16% 30%;
    z-index: -1;
    height: clamp(230px, 22vw, 420px);
    border-radius: 50%;
    border-top: 2px solid rgba(207, 164, 85, .38);
    border-bottom: 1px solid rgba(255, 255, 255, .72);
    transform: rotate(-9deg);
    background:
        radial-gradient(ellipse at 52% 50%, rgba(255, 255, 255, .40), transparent 62%),
        linear-gradient(90deg, transparent, rgba(222, 181, 105, .13), transparent);
    pointer-events: none;
}

.front-body.home-page .profile-message-card,
.front-body.home-page[class*="theme-"] .profile-message-card {
    border: 1px solid rgba(255, 255, 255, .72);
    background:
        radial-gradient(circle at 88% 18%, rgba(255, 255, 255, .60), transparent 27%),
        linear-gradient(105deg, rgba(255, 255, 255, .70), rgba(255, 244, 237, .32) 52%, rgba(255, 236, 229, .14)),
        transparent !important;
    box-shadow: 0 26px 68px rgba(129, 78, 68, .11);
}

.front-body.home-page .profile-message-card::before {
    background:
        radial-gradient(circle at 6% 16%, rgba(163, 91, 52, .13), transparent 26%),
        radial-gradient(circle at 96% 8%, rgba(255, 255, 255, .65), transparent 30%),
        url('service-item-bg.jpg') center / 390px auto repeat !important;
    opacity: .12;
    filter: sepia(.65) saturate(.72) brightness(1.28);
}

.front-body.home-page .profile-message-card::after {
    right: -18%;
    bottom: -35%;
    width: clamp(620px, 48vw, 880px);
    height: clamp(360px, 28vw, 520px);
    border-radius: 50%;
    background:
        radial-gradient(ellipse at 50% 42%, rgba(255, 255, 255, .52), transparent 54%),
        linear-gradient(105deg, rgba(247, 184, 118, .18), rgba(255, 255, 255, .50) 45%, rgba(170, 83, 132, .12));
    border-top: 2px solid rgba(214, 172, 95, .36);
    transform: rotate(-10deg);
}

.front-body.home-page .profile-speech {
    border: 1px solid rgba(255, 255, 255, .86);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .80)),
        radial-gradient(circle at 0 0, rgba(239, 95, 122, .10), transparent 38%);
    box-shadow: 0 24px 56px rgba(31, 41, 55, .12);
}

.front-body.home-page .profile-speakers-photo {
    filter: drop-shadow(0 28px 46px rgba(68, 45, 40, .22));
}

@media (max-width: 860px) {
    .front-body.home-page .profile-with-speakers {
        padding: .75rem;
        border-radius: 20px;
    }

    .front-body.home-page .profile-message-card::after {
        right: -45%;
        bottom: -22%;
        opacity: .72;
    }
}

/* Four-card organization summary with distinct soft hatching. */
.front-body.home-page .home-summary-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.front-body.home-page .home-summary-cards a {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 50px;
    padding: 1rem 5.45rem 1rem 1rem;
}

.front-body.home-page .home-summary-cards a::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .72;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .74)),
        repeating-linear-gradient(135deg, rgba(20, 33, 58, .08) 0 1px, transparent 1px 13px);
}

.front-body.home-page .home-summary-cards a::after {
    content: "";
    position: absolute;
    right: -30px;
    top: -36px;
    z-index: -1;
    width: 118px;
    height: 118px;
    border-radius: 999px;
    opacity: .22;
    background: var(--summary-accent, #64784a);
}

.front-body.home-page .home-summary-cards .summary-card-media {
    position: absolute;
    right: .100rem;
    top: 30%;
    z-index: -1;
    width: 78px;
    height: 78px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 20px;
    background: color-mix(in srgb, var(--summary-accent, #64784a) 12%, #ffffff);
    box-shadow: 0 16px 28px color-mix(in srgb, var(--summary-accent, #64784a) 18%, transparent);
    transform: translateY(-50%) rotate(1deg);
}

.front-body.home-page .home-summary-cards .summary-card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.52)),
        linear-gradient(90deg, rgba(255,255,255,.05), color-mix(in srgb, var(--summary-accent, #64784a) 24%, transparent));
}

.front-body.home-page .home-summary-cards .summary-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.08) contrast(1.04);
    transform: scale(1.05);
    transition: transform .28s ease, filter .28s ease;
}

.front-body.home-page .home-summary-cards .summary-card-media.logo-media {
    display: grid;
    place-items: center;
    padding: .45rem;
    background: rgba(255,255,255,.9);
}

.front-body.home-page .home-summary-cards .summary-card-media.logo-media img {
    object-fit: contain;
    filter: drop-shadow(0 8px 14px rgba(15,23,42,.16));
}

.front-body.home-page .home-summary-cards a:hover .summary-card-media img {
    transform: scale(1.14);
    filter: saturate(1.15) contrast(1.08);
}

.front-body.home-page .home-summary-cards a:nth-child(1) {
    --summary-accent: var(--theme-army, #64784a);
    border-top-color: var(--summary-accent);
}

.front-body.home-page .home-summary-cards a:nth-child(2) {
    --summary-accent: var(--theme-orange, #f28b32);
    border-top-color: var(--summary-accent);
}

.front-body.home-page .home-summary-cards a:nth-child(3) {
    --summary-accent: var(--theme-purple, #7d4fbd);
    border-top-color: var(--summary-accent);
}

.front-body.home-page .home-summary-cards a:nth-child(4) {
    --summary-accent: var(--theme-pink, #ef5a78);
    border-top: 4px solid var(--summary-accent);
}

.front-body.home-page .home-summary-cards a:nth-child(1)::before {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(246, 251, 242, .76)),
        repeating-linear-gradient(135deg, rgba(100, 120, 74, .16) 0 2px, transparent 2px 16px);
}

.front-body.home-page .home-summary-cards a:nth-child(2)::before {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(255, 247, 238, .78)),
        repeating-linear-gradient(135deg, rgba(242, 139, 50, .16) 0 2px, transparent 2px 16px);
}

.front-body.home-page .home-summary-cards a:nth-child(3)::before {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(247, 243, 255, .78)),
        repeating-linear-gradient(135deg, rgba(125, 79, 189, .16) 0 2px, transparent 2px 16px);
}

.front-body.home-page .home-summary-cards a:nth-child(4)::before {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(255, 241, 246, .78)),
        repeating-linear-gradient(135deg, rgba(239, 90, 120, .16) 0 2px, transparent 2px 16px);
}

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

@media (max-width: 560px) {
    .front-body.home-page .home-summary-cards {
        grid-template-columns: 1fr;
    }

    .front-body.home-page .home-summary-cards a {
        padding-right: 5.65rem;
    }
}

/* Unified premium buttons for the Index Front End. */
.front-body.home-page .index-action-button,
.front-body.home-page .index-cta-button,
.front-body .footer-video-head > .index-cta-channel {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .62rem;
    min-height: 52px;
    max-width: 100%;
    padding: .82rem 1.18rem .82rem 1.28rem;
    border: 1px solid rgba(255, 255, 255, .62);
    border-radius: 999px;
    overflow: hidden;
    color: #fff !important;
    font-family: var(--font-admin);
    font-size: clamp(.82rem, .9vw, .95rem);
    font-weight: 950;
    letter-spacing: .01em;
    line-height: 1.12;
    text-align: center;
    text-decoration: none;
    background:
        radial-gradient(circle at 18% 14%, rgba(255, 255, 255, .28), transparent 28%),
        linear-gradient(135deg, var(--theme-pink, #ef5a78), var(--theme-purple, #7d4fbd));
    box-shadow: 0 16px 34px rgba(125, 79, 189, .2);
    transform: translateY(0);
    transition: transform .22s ease, box-shadow .22s ease, filter .22s ease, border-color .22s ease;
}

.front-body.home-page .index-action-button::before,
.front-body.home-page .index-cta-button::before,
.front-body .footer-video-head > .index-cta-channel::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, .24) 45%, transparent 70%);
    transform: translateX(-118%);
    transition: transform .55s ease;
}

.front-body.home-page .index-action-button::after,
.front-body.home-page .index-cta-button::after,
.front-body .footer-video-head > .index-cta-channel::after {
    content: "\2192";
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
    transition: transform .22s ease, background .22s ease;
}

.front-body.home-page .index-action-button:hover,
.front-body.home-page .index-cta-button:hover,
.front-body .footer-video-head > .index-cta-channel:hover {
    border-color: rgba(255, 255, 255, .86);
    filter: saturate(1.06);
    transform: translateY(-2px);
    box-shadow: 0 22px 44px rgba(125, 79, 189, .25);
}

.front-body.home-page .index-action-button:hover::before,
.front-body.home-page .index-cta-button:hover::before,
.front-body .footer-video-head > .index-cta-channel:hover::before {
    transform: translateX(118%);
}

.front-body.home-page .index-action-button:hover::after,
.front-body.home-page .index-cta-button:hover::after,
.front-body .footer-video-head > .index-cta-channel:hover::after {
    background: rgba(255, 255, 255, .27);
    transform: translateX(3px);
}

.front-body.home-page .index-action-button:active,
.front-body.home-page .index-cta-button:active,
.front-body .footer-video-head > .index-cta-channel:active {
    transform: translateY(0);
}

.front-body.home-page .index-action-button:focus-visible,
.front-body.home-page .index-cta-button:focus-visible,
.front-body .footer-video-head > .index-cta-channel:focus-visible {
    outline: 3px solid rgba(242, 139, 50, .36);
    outline-offset: 4px;
}

.front-body.home-page .index-action-news,
.front-body.home-page .index-cta-featured {
    background:
        radial-gradient(circle at 18% 14%, rgba(255, 255, 255, .26), transparent 28%),
        linear-gradient(135deg, var(--theme-pink, #ef5a78), var(--theme-purple, #7d4fbd));
}

.front-body.home-page .index-action-achievement,
.front-body.home-page .index-cta-chart {
    background:
        radial-gradient(circle at 18% 14%, rgba(255, 255, 255, .24), transparent 28%),
        linear-gradient(135deg, var(--theme-orange, #f28b32), var(--theme-army, #65764d) 52%, var(--theme-purple, #7d4fbd));
    box-shadow: 0 16px 34px rgba(242, 139, 50, .18);
}

.front-body.home-page .index-cta-directory,
.front-body.home-page .index-cta-map {
    background:
        radial-gradient(circle at 18% 14%, rgba(255, 255, 255, .24), transparent 28%),
        linear-gradient(135deg, var(--theme-navy, #17243f), var(--theme-army, #64784a) 54%, var(--theme-purple, #7d4fbd));
    box-shadow: 0 16px 34px rgba(23, 36, 63, .22);
}

.front-body .footer-video-head > .index-cta-channel {
    flex: 0 0 auto;
    background:
        radial-gradient(circle at 18% 14%, rgba(255, 255, 255, .24), transparent 28%),
        linear-gradient(135deg, #ff5a6d, #8b4ed8 58%, #1f5f99);
    box-shadow: 0 16px 34px rgba(139, 78, 216, .2);
}

.front-body.home-page .declaration-news-band .index-cta-featured,
.front-body.home-page .bromo-chapter-band .index-cta-directory {
    min-width: 168px;
}

.front-body.home-page .achievement-filter-visual .index-cta-chart {
    min-height: 44px;
    padding: .64rem .88rem .64rem 1rem;
    border-radius: 14px;
    white-space: nowrap;
}

.front-body.home-page .achievement-filter-visual .index-cta-chart::after {
    width: 26px;
    height: 26px;
}

.front-body.home-page .chapter-insight-head .index-cta-map {
    color: #fff !important;
}

@media (max-width: 680px) {
    .front-body.home-page .index-action-button,
    .front-body.home-page .section-head .index-action-button,
    .front-body.home-page .index-cta-button,
    .front-body .footer-video-head > .index-cta-channel {
        width: 100%;
    }
}

/* Training executive dashboard readability polish. */
.front-body .training-radar-card {
    grid-template-rows: auto auto auto auto;
}

.front-body .training-radar-card .chart-card-title,
.front-body .training-composition-card .chart-card-title {
    margin-bottom: .35rem;
}

.front-body .training-radar-wrap {
    width: min(250px, 100%);
    margin-bottom: .45rem;
}

.front-body .radar-leaderboard {
    display: grid;
    gap: .42rem;
}

.front-body .radar-leader-item {
    display: grid;
    grid-template-columns: 1.85rem 2.1rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .5rem;
    min-height: 42px;
    padding: .42rem .55rem;
    border: 1px solid color-mix(in srgb, var(--rank-color) 28%, rgba(23,36,63,.08));
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,255,255,.72)),
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--rank-color) 16%, transparent), transparent 48%);
    box-shadow: 0 10px 24px rgba(23,36,63,.045);
}

.front-body .radar-leader-item i {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--rank-color);
    color: #fff;
    font-size: .66rem;
    font-style: normal;
    font-weight: 950;
}

.front-body .radar-leader-item img {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 8px 18px rgba(23,36,63,.12);
}

.front-body .radar-leader-item span {
    display: grid;
    min-width: 0;
    gap: .03rem;
}

.front-body .radar-leader-item b {
    overflow: hidden;
    color: #17243f;
    font-size: .78rem;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.front-body .radar-leader-item small {
    color: rgba(23,36,63,.6);
    font-size: .66rem;
    font-weight: 850;
}

.front-body .radar-leader-item strong {
    color: color-mix(in srgb, var(--rank-color) 82%, #17243f);
    font-size: .82rem;
    font-weight: 950;
}

.front-body .training-podium {
    gap: .42rem;
    margin-top: .12rem;
}

.front-body .podium-rank,
.front-body .podium-rank:first-child {
    display: grid;
    grid-template-columns: 1.65rem 2rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .42rem;
    min-height: 52px;
    padding: .45rem .5rem;
}

.front-body .podium-rank i {
    width: 1.55rem;
    height: 1.55rem;
    font-size: .62rem;
}

.front-body .podium-rank img {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    object-fit: cover;
}

.front-body .podium-rank span {
    display: grid;
    min-width: 0;
}

.front-body .podium-rank span b {
    overflow: hidden;
    color: #17243f;
    font-size: .7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.front-body .podium-rank span em {
    color: rgba(23,36,63,.58);
    font-size: .62rem;
    font-style: normal;
    font-weight: 850;
}

.front-body .podium-rank strong {
    color: color-mix(in srgb, var(--rank-color) 86%, #17243f);
    font-size: .76rem;
    font-weight: 950;
}

.front-body .double-donut-panel {
    grid-template-columns: minmax(120px, .7fr) minmax(0, 1.3fr);
    gap: .65rem;
}

.front-body .double-donut-chart {
    width: min(145px, 100%);
}

.front-body .double-donut-legend {
    gap: .42rem;
}

.front-body .double-donut-legend span {
    grid-template-columns: 2.25rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .08rem .45rem;
    min-height: 58px;
    padding: .48rem .56rem;
}

.front-body .double-donut-legend img {
    grid-row: span 2;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    object-fit: contain;
    box-shadow: 0 8px 18px rgba(23,36,63,.12);
}

.front-body .double-donut-legend b {
    font-size: .78rem;
}

.front-body .double-donut-legend strong {
    font-size: .86rem;
}

.front-body .double-donut-legend em {
    grid-column: 2 / -1;
    font-size: .66rem;
}

.front-body .trainer-composition-note {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .42rem;
}

.front-body .trainer-composition-note span {
    display: grid;
    grid-template-columns: 1.8rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .12rem .42rem;
    padding: .46rem .55rem;
    border: 1px solid rgba(23,36,63,.07);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.7)),
        radial-gradient(circle at 100% 0, rgba(106,63,176,.1), transparent 46%);
    color: rgba(23,36,63,.68);
    font-size: .68rem;
    font-weight: 900;
}

.front-body .trainer-composition-note img {
    grid-row: span 2;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 50%;
    object-fit: contain;
}

.front-body .trainer-composition-note b {
    color: #17243f;
    font-size: .8rem;
    font-weight: 950;
}

.front-body .trainer-composition-note em {
    grid-column: 2 / -1;
    color: rgba(23,36,63,.56);
    font-size: .64rem;
    font-style: normal;
}

.front-body .trainer-donut-rank {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .38rem;
}

.front-body .trainer-donut-item {
    align-content: start;
    gap: .16rem;
    min-height: 118px;
    padding: .45rem .38rem;
}

.front-body .trainer-donut {
    width: 54px;
}

.front-body .trainer-donut-item span {
    font-size: .58rem;
    line-height: 1.15;
    text-align: center;
}

.front-body .trainer-donut-item b {
    white-space: normal;
    line-height: 1.15;
}

.front-body .trainer-donut-item small {
    color: color-mix(in srgb, var(--rank-color) 88%, #17243f);
    font-size: .66rem;
    font-weight: 950;
}

.front-body .training-ai-insights {
    grid-template-columns: 190px repeat(3, minmax(0, 1fr));
}

.front-body .training-ai-insights span {
    position: relative;
    padding-left: 2.25rem;
    font-size: .76rem;
}

.front-body .training-ai-insights span::before {
    content: "";
    position: absolute;
    left: .72rem;
    top: 50%;
    width: .9rem;
    height: .9rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #ef5f7a, #f28a2e, #6a3fb0);
    box-shadow: 0 8px 18px rgba(106,63,176,.2);
    transform: translateY(-50%);
}

.front-body .training-guidance-card li {
    grid-template-columns: 1.55rem 2rem minmax(0, 1fr) auto;
    min-height: 48px;
}

.front-body .training-guidance-card li > img {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 8px 18px rgba(23,36,63,.11);
}

.front-body .training-guidance-card li span {
    display: grid;
    min-width: 0;
    gap: .04rem;
}

.front-body .training-guidance-card li span b {
    overflow: hidden;
    color: #17243f;
    font-size: .76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.front-body .training-guidance-card li span small {
    overflow: hidden;
    color: rgba(23,36,63,.58);
    font-size: .66rem;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.front-body .training-guidance-card li strong {
    max-width: 12rem;
    overflow: hidden;
    color: #9e171b;
    font-size: .72rem;
    font-weight: 950;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 1280px) {
    .front-body .training-radar-wrap {
        width: min(220px, 100%);
    }

    .front-body .training-podium {
        grid-template-columns: 1fr;
    }

    .front-body .trainer-donut-rank {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .front-body .radar-leader-item,
    .front-body .podium-rank,
    .front-body .podium-rank:first-child,
    .front-body .training-guidance-card li {
        grid-template-columns: 1.55rem 1.9rem minmax(0, 1fr);
    }

    .front-body .radar-leader-item strong,
    .front-body .podium-rank strong,
    .front-body .training-guidance-card li strong {
        grid-column: 3;
        text-align: left;
    }

    .front-body .double-donut-panel,
    .front-body .trainer-composition-note,
    .front-body .trainer-donut-rank {
        grid-template-columns: 1fr;
    }
}

/* Training executive dashboard final clarity pass. */
.front-body .training-insight-panel {
    max-width: 1380px;
    margin-inline: auto;
}

.front-body .training-insight-grid {
    grid-template-columns: minmax(250px, .78fr) minmax(460px, 1.34fr) minmax(330px, .98fr);
    gap: .9rem;
    align-items: stretch;
}

.front-body .training-chart-card {
    min-height: 0;
    padding: 1rem;
    border-radius: 22px;
}

.front-body .training-radar-card {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: .75rem;
    overflow: visible;
}

.front-body .training-radar-main {
    display: grid;
    grid-template-columns: minmax(190px, .78fr) minmax(250px, 1fr);
    gap: .75rem;
    align-items: center;
}

.front-body .training-radar-wrap {
    width: min(220px, 100%);
    margin: 0 auto;
    border-radius: 26px;
    background:
        radial-gradient(circle at 50% 45%, rgba(255,255,255,.96), rgba(255,255,255,.66) 56%, rgba(239,95,122,.07)),
        linear-gradient(145deg, rgba(255,255,255,.94), rgba(245,241,248,.78));
}

.front-body .radar-point {
    width: 1.35rem;
    height: 1.35rem;
    transform: translate(-50%, -50%);
}

.front-body .radar-point img {
    width: 1.05rem;
    height: 1.05rem;
    object-fit: contain;
}

.front-body .radar-leaderboard {
    gap: .45rem;
}

.front-body .radar-leader-item {
    grid-template-columns: 2rem 2.35rem minmax(0, 1fr) 4.7rem;
    min-height: 52px;
    padding: .48rem .65rem;
    border-radius: 16px;
}

.front-body .radar-leader-item i {
    width: 1.8rem;
    height: 1.8rem;
}

.front-body .radar-leader-item img {
    width: 2.15rem;
    height: 2.15rem;
    object-fit: contain;
    background: rgba(255,255,255,.84);
}

.front-body .radar-leader-item b {
    font-size: .82rem;
    line-height: 1.12;
}

.front-body .radar-leader-item small {
    font-size: .66rem;
}

.front-body .radar-leader-item strong {
    justify-self: end;
    font-size: .82rem;
    white-space: nowrap;
}

.front-body .training-podium {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
}

.front-body .podium-rank,
.front-body .podium-rank:first-child {
    grid-template-columns: auto 2rem minmax(0, 1fr);
    grid-template-areas:
        "rank logo name"
        "rank logo score";
    min-height: 54px;
    padding: .52rem .62rem;
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.93), rgba(255,255,255,.72)),
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--rank-color) 22%, transparent), transparent 45%);
}

.front-body .podium-rank i {
    grid-area: rank;
    width: 2.35rem;
    height: 1.55rem;
    border-radius: 999px;
    font-size: .58rem;
}

.front-body .podium-rank img {
    grid-area: logo;
    align-self: center;
    width: 1.9rem;
    height: 1.9rem;
    object-fit: contain;
}

.front-body .podium-rank span {
    display: contents;
}

.front-body .podium-rank span b {
    grid-area: name;
    font-size: .68rem;
    line-height: 1.05;
}

.front-body .podium-rank span em {
    display: none;
}

.front-body .podium-rank strong {
    grid-area: score;
    font-size: .7rem;
    line-height: 1;
}

.front-body .training-composition-card {
    display: grid;
    grid-template-rows: auto auto auto 1fr;
    gap: .7rem;
}

.front-body .double-donut-panel {
    grid-template-columns: 116px minmax(0, 1fr);
    gap: .65rem;
    align-items: center;
}

.front-body .double-donut-chart {
    width: 112px;
}

.front-body .double-donut-chart span {
    font-size: .62rem;
}

.front-body .double-donut-chart strong {
    font-size: 1.08rem;
}

.front-body .double-donut-legend {
    gap: .4rem;
}

.front-body .double-donut-legend span {
    grid-template-columns: 2.35rem minmax(0, 1fr) auto;
    min-height: 56px;
    padding: .48rem .58rem;
    border-radius: 15px;
}

.front-body .double-donut-legend img {
    width: 2.05rem;
    height: 2.05rem;
    box-shadow: none;
}

.front-body .double-donut-legend b {
    font-size: .78rem;
    line-height: 1;
}

.front-body .double-donut-legend strong {
    justify-self: end;
    font-size: .84rem;
    white-space: nowrap;
}

.front-body .double-donut-legend em {
    font-size: .64rem;
    line-height: 1.08;
}

.front-body .trainer-composition-note {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .42rem;
}

.front-body .trainer-composition-note span {
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    min-height: 54px;
    padding: .48rem .58rem;
    border-radius: 15px;
    font-size: .68rem;
}

.front-body .trainer-composition-note img {
    width: 1.8rem;
    height: 1.8rem;
}

.front-body .trainer-donut-rank {
    display: grid;
    grid-template-columns: 1fr;
    gap: .42rem;
}

.front-body .trainer-donut-item {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    align-items: center;
    min-height: 42px;
    padding: .44rem .58rem;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--rank-color) 26%, rgba(23,36,63,.08));
    background:
        linear-gradient(135deg, rgba(255,255,255,.93), rgba(255,255,255,.72)),
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--rank-color) 18%, transparent), transparent 42%);
}

.front-body .trainer-donut {
    display: none;
}

.front-body .trainer-donut-item span {
    display: grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: var(--rank-color);
    color: #fff;
    font-size: .66rem;
    line-height: 1;
}

.front-body .trainer-donut-item b {
    overflow: hidden;
    font-size: .78rem;
    line-height: 1.12;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.front-body .trainer-donut-item small {
    justify-self: end;
    color: color-mix(in srgb, var(--rank-color) 82%, #17243f);
    font-size: .72rem;
    font-weight: 950;
    white-space: nowrap;
}

.front-body .training-ai-insights {
    grid-template-columns: 190px repeat(3, minmax(0, 1fr));
    gap: .6rem;
    padding: .58rem;
}

.front-body .training-ai-insights .eyebrow,
.front-body .training-ai-insights span {
    min-height: 54px;
}

.front-body .training-guidance-card {
    padding: .9rem;
}

.front-body .training-guidance-card ol {
    gap: .45rem;
}

.front-body .training-guidance-card li {
    grid-template-columns: 1.75rem 2.15rem minmax(0, 1fr) auto;
    min-height: 52px;
    padding: .44rem .5rem;
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,255,255,.78)),
        radial-gradient(circle at 100% 0, rgba(239,95,122,.1), transparent 42%);
}

.front-body .training-guidance-card li > img {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
}

.front-body .training-guidance-card li span b {
    font-size: .8rem;
    line-height: 1.1;
}

.front-body .training-guidance-card li span small {
    font-size: .68rem;
}

.front-body .training-guidance-card li strong {
    max-width: 15rem;
    font-size: .72rem;
}

@media (max-width: 1380px) {
    .front-body .training-insight-grid {
        grid-template-columns: minmax(240px, .82fr) minmax(410px, 1.28fr) minmax(310px, .96fr);
    }

    .front-body .training-radar-main {
        grid-template-columns: 180px minmax(0, 1fr);
    }

    .front-body .training-radar-wrap {
        width: 190px;
    }

    .front-body .training-podium {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1120px) {
    .front-body .training-insight-grid {
        grid-template-columns: 1fr;
    }

    .front-body .training-radar-main {
        grid-template-columns: minmax(220px, .7fr) minmax(0, 1fr);
    }

    .front-body .double-donut-panel {
        grid-template-columns: 140px minmax(0, 1fr);
    }

    .front-body .training-ai-insights {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .front-body .training-radar-main,
    .front-body .double-donut-panel,
    .front-body .trainer-composition-note {
        grid-template-columns: 1fr;
    }

    .front-body .radar-leader-item,
    .front-body .training-guidance-card li {
        grid-template-columns: 1.75rem 2rem minmax(0, 1fr);
    }

    .front-body .radar-leader-item strong,
    .front-body .training-guidance-card li strong {
        grid-column: 3;
        justify-self: start;
        text-align: left;
    }

    .front-body .trainer-donut-item {
        grid-template-columns: 2rem minmax(0, 1fr);
    }

    .front-body .trainer-donut-item small {
        grid-column: 2;
        justify-self: start;
    }
}

/* Training executive dashboard final layout lock: keep data readable at 90-100% zoom. */
.front-body .training-report-section {
    width: min(1480px, calc(100% - clamp(1rem, 3vw, 2.5rem))) !important;
}

.front-body .training-insight-panel {
    width: 100% !important;
    max-width: 1480px !important;
    margin-inline: auto !important;
}

.front-body .training-insight-grid {
    grid-template-columns: minmax(260px, .82fr) minmax(540px, 1.46fr) minmax(410px, 1.06fr) !important;
    gap: 1rem !important;
    align-items: stretch !important;
}

.front-body .training-chart-card {
    min-width: 0 !important;
    overflow: hidden !important;
}

.front-body .training-radar-card {
    padding: .9rem !important;
}

.front-body .training-radar-main {
    grid-template-columns: 220px minmax(0, 1fr) !important;
    gap: .75rem !important;
}

.front-body .training-radar-wrap {
    width: 210px !important;
    margin: 0 !important;
}

.front-body .radar-point {
    width: .72rem !important;
    height: .72rem !important;
}

.front-body .radar-leaderboard {
    gap: .45rem !important;
}

.front-body .radar-leader-item {
    grid-template-columns: 1.65rem 2rem minmax(0, 1fr) auto !important;
    gap: .5rem !important;
    min-height: 50px !important;
    padding: .42rem .5rem !important;
    border-radius: 14px !important;
}

.front-body .radar-leader-item img {
    width: 1.85rem !important;
    height: 1.85rem !important;
}

.front-body .radar-leader-item b,
.front-body .radar-leader-item small {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.front-body .radar-leader-item strong {
    font-size: .75rem !important;
    white-space: nowrap !important;
}

.front-body .training-podium {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .45rem !important;
    margin-top: .6rem !important;
}

.front-body .podium-rank {
    min-width: 0 !important;
    padding: .45rem .5rem !important;
    border-radius: 16px !important;
    box-shadow: none !important;
}

.front-body .podium-rank i {
    width: 2.35rem !important;
    height: 2.35rem !important;
    font-size: .66rem !important;
}

.front-body .podium-rank strong,
.front-body .podium-rank span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.front-body .training-composition-card {
    display: grid !important;
    grid-template-rows: auto auto 1fr !important;
    gap: .65rem !important;
    padding: .9rem !important;
}

.front-body .training-composition-card .chart-card-title {
    min-width: 0 !important;
}

.front-body .double-donut-panel {
    grid-template-columns: 116px minmax(0, 1fr) !important;
    gap: .65rem !important;
    align-items: center !important;
}

.front-body .double-donut-chart {
    width: 116px !important;
    height: 116px !important;
}

.front-body .double-donut-legend {
    min-width: 0 !important;
}

.front-body .double-donut-legend span {
    grid-template-columns: 2.35rem minmax(0, 1fr) auto !important;
    gap: .5rem !important;
    min-height: 58px !important;
    padding: .5rem .58rem !important;
}

.front-body .double-donut-legend span > b,
.front-body .double-donut-legend span > em {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.front-body .double-donut-legend span > strong {
    white-space: nowrap !important;
}

.front-body .trainer-composition-note {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .5rem !important;
}

.front-body .trainer-composition-note span {
    grid-template-columns: 2.05rem minmax(0, 1fr) auto !important;
    gap: .5rem !important;
    min-height: 56px !important;
    padding: .5rem .58rem !important;
}

.front-body .trainer-composition-note span > b,
.front-body .trainer-composition-note span > em {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.front-body .trainer-composition-note span > strong {
    white-space: nowrap !important;
}

.front-body .double-donut-legend img,
.front-body .trainer-composition-note img {
    display: block !important;
    object-fit: contain !important;
    padding: .2rem !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.94) !important;
    box-shadow: 0 8px 18px rgba(23,36,63,.1) !important;
}

.front-body .trainer-donut-rank {
    grid-template-columns: 1fr !important;
    gap: .42rem !important;
}

.front-body .trainer-donut-item {
    grid-template-columns: 1.7rem minmax(0, 1fr) auto !important;
    gap: .48rem !important;
    min-height: 42px !important;
    padding: .42rem .52rem !important;
}

.front-body .trainer-donut-item b {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.front-body .trainer-donut-item small {
    justify-self: end !important;
    white-space: nowrap !important;
}

.front-body .training-guidance-card {
    padding: .95rem !important;
}

.front-body .training-guidance-card ol {
    gap: .45rem !important;
}

.front-body .training-guidance-card li {
    grid-template-columns: 1.75rem minmax(0, 1fr) auto !important;
    min-height: 46px !important;
    padding: .45rem .55rem !important;
}

.front-body .training-guidance-card li > img {
    display: none !important;
}

.front-body .training-guidance-card li span,
.front-body .training-guidance-card li strong {
    min-width: 0 !important;
}

.front-body .training-guidance-card li span b,
.front-body .training-guidance-card li span small {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

@media (max-width: 1380px) {
    .front-body .training-report-section {
        width: min(1280px, calc(100% - 1rem)) !important;
    }

    .front-body .training-insight-grid {
        grid-template-columns: minmax(250px, .9fr) minmax(450px, 1.35fr) !important;
    }

    .front-body .training-composition-card {
        grid-column: 1 / -1 !important;
        grid-template-columns: minmax(300px, .85fr) minmax(360px, 1fr) !important;
        grid-template-rows: auto auto !important;
    }

    .front-body .training-composition-card .chart-card-title {
        grid-column: 1 / -1 !important;
    }

    .front-body .trainer-donut-rank {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }

    .front-body .trainer-donut-item {
        grid-template-columns: 1.6rem minmax(0, 1fr) !important;
        align-content: start !important;
    }

    .front-body .trainer-donut-item small {
        grid-column: 2 !important;
        justify-self: start !important;
    }
}

@media (max-width: 980px) {
    .front-body .training-insight-grid,
    .front-body .training-radar-main,
    .front-body .training-composition-card,
    .front-body .double-donut-panel,
    .front-body .trainer-composition-note,
    .front-body .trainer-donut-rank {
        grid-template-columns: 1fr !important;
    }

    .front-body .training-radar-wrap {
        width: min(260px, 100%) !important;
        margin-inline: auto !important;
    }

    .front-body .training-podium {
        grid-template-columns: 1fr !important;
    }
}

/* Final clarity pass for ASAD Bela Diri executive analytics. */
.front-body .training-radar-card {
    overflow: visible !important;
}

.front-body .training-radar-main {
    grid-template-columns: 205px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: .8rem !important;
}

.front-body .training-radar-wrap {
    width: 195px !important;
    overflow: visible !important;
    isolation: isolate !important;
    z-index: 3 !important;
}

.front-body .training-radar-svg .radar-node-svg {
    fill: var(--rank-color) !important;
    stroke: rgba(255,255,255,.96) !important;
    stroke-width: 1.25 !important;
    filter: drop-shadow(0 7px 12px color-mix(in srgb, var(--rank-color) 38%, transparent)) !important;
    pointer-events: none !important;
}

.front-body .training-radar-svg .radar-node-svg.rank-gold {
    fill: #d4af37 !important;
}

.front-body .training-radar-svg .radar-node-svg.rank-silver {
    fill: #aeb6c2 !important;
}

.front-body .training-radar-svg .radar-node-svg.rank-bronze {
    fill: #b87333 !important;
}

.front-body .training-radar-svg .radar-node-svg.rank-blue {
    fill: #1f5f99 !important;
}

.front-body .training-radar-svg .radar-node-svg.rank-purple {
    fill: #6a3fb0 !important;
}

.front-body .radar-tooltip {
    left: calc(100% + 10px) !important;
    right: auto !important;
    top: 50% !important;
    bottom: auto !important;
    width: 218px !important;
    max-width: 218px !important;
    min-width: 0 !important;
    transform: translate(8px, -50%) !important;
    color: #17243f !important;
    background: rgba(255,255,255,.96) !important;
    border: 1px solid rgba(23,36,63,.14) !important;
    box-shadow: 0 18px 42px rgba(23,36,63,.18) !important;
    backdrop-filter: blur(14px) !important;
    pointer-events: none !important;
}

.front-body .radar-point {
    display: grid !important;
    place-items: center !important;
    z-index: 25 !important;
    width: 1.45rem !important;
    height: 1.45rem !important;
    padding: 0 !important;
    border: 3px solid rgba(255,255,255,.98) !important;
    background: var(--rank-color) !important;
    box-shadow:
        0 12px 24px color-mix(in srgb, var(--rank-color) 42%, transparent),
        inset 0 0 0 2px color-mix(in srgb, #fff 36%, var(--rank-color)) !important;
    color: #fff !important;
    cursor: pointer !important;
    opacity: .96 !important;
}

.front-body .radar-point::after {
    content: attr(data-rank);
    position: absolute !important;
    inset: 0 !important;
    display: grid !important;
    place-items: center !important;
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #fff !important;
    font-size: .68rem !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    text-shadow: 0 1px 4px rgba(0,0,0,.35) !important;
    box-shadow: none !important;
}

.front-body .radar-point > img {
    display: none !important;
}

.front-body .radar-point:hover,
.front-body .radar-point:focus-visible {
    z-index: 60 !important;
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1.22) !important;
}

.front-body .radar-point:hover .radar-tooltip,
.front-body .radar-point:focus-visible .radar-tooltip {
    transform: translate(0, -50%) !important;
}

.front-body .radar-point[data-side="left"] .radar-tooltip {
    left: auto !important;
    right: calc(100% + 10px) !important;
    transform: translate(-8px, -50%) !important;
}

.front-body .radar-point[data-side="left"]:hover .radar-tooltip,
.front-body .radar-point[data-side="left"]:focus-visible .radar-tooltip {
    transform: translate(0, -50%) !important;
}

.front-body .radar-point[data-side="bottom"] .radar-tooltip {
    left: 50% !important;
    right: auto !important;
    top: calc(100% + 12px) !important;
    bottom: auto !important;
    transform: translate(-50%, -8px) !important;
}

.front-body .radar-point[data-side="bottom"]:hover .radar-tooltip,
.front-body .radar-point[data-side="bottom"]:focus-visible .radar-tooltip {
    transform: translate(-50%, 0) !important;
}

.front-body .radar-tooltip b,
.front-body .radar-tooltip strong {
    color: #17243f !important;
}

.front-body .radar-tooltip small,
.front-body .radar-tooltip em {
    color: rgba(23,36,63,.66) !important;
}

.front-body .radar-tooltip img {
    width: 30px !important;
    height: 30px !important;
}

.front-body .training-podium {
    display: none !important;
}

.front-body .training-radar-caption {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: .65rem !important;
    margin-top: .65rem !important;
    padding: .55rem .72rem !important;
    border: 1px solid rgba(23,36,63,.08) !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(248,241,247,.78)) !important;
    color: rgba(23,36,63,.64) !important;
    font-size: .72rem !important;
    line-height: 1.25 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85) !important;
}

.front-body .training-radar-caption strong {
    color: #17243f !important;
    font-size: .72rem !important;
    white-space: nowrap !important;
}

.front-body .training-composition-card {
    gap: .7rem !important;
}

.front-body .double-donut-panel {
    grid-template-columns: 112px minmax(0, 1fr) !important;
    gap: .7rem !important;
}

.front-body .double-donut-chart {
    width: 112px !important;
    height: 112px !important;
}

.front-body .double-donut-legend {
    gap: .48rem !important;
}

.front-body .double-donut-legend span {
    grid-template-columns: 2.1rem minmax(0, 1fr) auto !important;
    min-height: 54px !important;
    padding: .48rem .58rem !important;
}

.front-body .double-donut-legend img {
    width: 1.72rem !important;
    height: 1.72rem !important;
    padding: .18rem !important;
}

.front-body .trainer-summary-compact {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .48rem !important;
}

.front-body .trainer-summary-compact span {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: .12rem .48rem !important;
    min-height: 48px !important;
    padding: .52rem .62rem .52rem .72rem !important;
    border-radius: 15px !important;
    background: rgba(255,255,255,.86) !important;
    border: 1px solid rgba(23,36,63,.09) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75) !important;
}

.front-body .trainer-summary-compact span.male {
    border-left: 4px solid #1f6fb2 !important;
}

.front-body .trainer-summary-compact span.female {
    border-left: 4px solid #ef5f7a !important;
}

.front-body .trainer-summary-compact b {
    min-width: 0 !important;
    overflow: hidden !important;
    color: #17243f !important;
    font-size: .76rem !important;
    font-weight: 950 !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.front-body .trainer-summary-compact strong {
    color: #17243f !important;
    font-size: .78rem !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
}

.front-body .trainer-summary-compact em {
    grid-column: 1 / -1 !important;
    color: rgba(23,36,63,.58) !important;
    font-size: .66rem !important;
    font-style: normal !important;
    font-weight: 850 !important;
    line-height: 1.1 !important;
}

.front-body .trainer-donut-rank {
    margin-top: .1rem !important;
}

@media (max-width: 1380px) {
    .front-body .training-radar-main {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .front-body .training-radar-wrap {
        width: min(230px, 100%) !important;
        margin-inline: auto !important;
    }

    .front-body .radar-tooltip {
        left: 50% !important;
        top: auto !important;
        bottom: calc(100% + 10px) !important;
        transform: translate(-50%, 8px) !important;
    }

    .front-body .radar-point:hover .radar-tooltip,
    .front-body .radar-point:focus-visible .radar-tooltip {
        transform: translate(-50%, 0) !important;
    }
}

@media (max-width: 720px) {
    .front-body .training-radar-caption,
    .front-body .trainer-summary-compact {
        grid-template-columns: 1fr !important;
    }

    .front-body .training-radar-caption {
        display: grid !important;
    }

    .front-body .training-radar-caption strong {
        white-space: normal !important;
    }
}

/* Surgical radar mapping pass: make every Top 5 node visible and hoverable. */
.front-body .training-radar-wrap .radar-point {
    display: grid !important;
    place-items: center !important;
    width: 1.45rem !important;
    height: 1.45rem !important;
    padding: 0 !important;
    border: 3px solid rgba(255,255,255,.98) !important;
    border-radius: 999px !important;
    background: var(--rank-color) !important;
    color: #fff !important;
    box-shadow:
        0 12px 24px color-mix(in srgb, var(--rank-color) 42%, transparent),
        inset 0 0 0 2px color-mix(in srgb, #fff 36%, var(--rank-color)) !important;
    cursor: pointer !important;
    opacity: .96 !important;
    overflow: visible !important;
    z-index: 35 !important;
}

.front-body .training-radar-wrap .radar-point::after {
    content: attr(data-rank) !important;
    position: absolute !important;
    inset: 0 !important;
    display: grid !important;
    place-items: center !important;
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    background: transparent !important;
    color: #fff !important;
    font-size: .68rem !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    text-shadow: 0 1px 4px rgba(0,0,0,.35) !important;
    box-shadow: none !important;
}

.front-body .training-radar-wrap .radar-point > img {
    display: none !important;
}

.front-body .training-radar-wrap .radar-point .radar-tooltip {
    top: 50% !important;
    bottom: auto !important;
    left: calc(100% + 10px) !important;
    right: auto !important;
    transform: translate(8px, -50%) !important;
    z-index: 80 !important;
}

.front-body .training-radar-wrap .radar-point[data-side="left"] .radar-tooltip {
    left: auto !important;
    right: calc(100% + 10px) !important;
    transform: translate(-8px, -50%) !important;
}

.front-body .training-radar-wrap .radar-point[data-side="bottom"] .radar-tooltip {
    top: calc(100% + 12px) !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -8px) !important;
}

.front-body .training-radar-wrap .radar-point:hover,
.front-body .training-radar-wrap .radar-point:focus-visible {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1.22) !important;
    z-index: 90 !important;
}

.front-body .training-radar-wrap .radar-point:hover .radar-tooltip,
.front-body .training-radar-wrap .radar-point:focus-visible .radar-tooltip {
    transform: translate(0, -50%) !important;
}

.front-body .training-radar-wrap .radar-point[data-side="left"]:hover .radar-tooltip,
.front-body .training-radar-wrap .radar-point[data-side="left"]:focus-visible .radar-tooltip {
    transform: translate(0, -50%) !important;
}

.front-body .training-radar-wrap .radar-point[data-side="bottom"]:hover .radar-tooltip,
.front-body .training-radar-wrap .radar-point[data-side="bottom"]:focus-visible .radar-tooltip {
    transform: translate(-50%, 0) !important;
}

@media (max-width: 760px) {
    .front-body .training-radar-wrap .radar-point .radar-tooltip,
    .front-body .training-radar-wrap .radar-point[data-side="left"] .radar-tooltip,
    .front-body .training-radar-wrap .radar-point[data-side="bottom"] .radar-tooltip {
        top: auto !important;
        bottom: calc(100% + 10px) !important;
        left: 50% !important;
        right: auto !important;
        transform: translate(-50%, 8px) !important;
    }

    .front-body .training-radar-wrap .radar-point:hover .radar-tooltip,
    .front-body .training-radar-wrap .radar-point:focus-visible .radar-tooltip,
    .front-body .training-radar-wrap .radar-point[data-side="left"]:hover .radar-tooltip,
    .front-body .training-radar-wrap .radar-point[data-side="left"]:focus-visible .radar-tooltip,
    .front-body .training-radar-wrap .radar-point[data-side="bottom"]:hover .radar-tooltip,
    .front-body .training-radar-wrap .radar-point[data-side="bottom"]:focus-visible .radar-tooltip {
        transform: translate(-50%, 0) !important;
    }
}

/* Radar live detail v16 final override: old inline tooltip is disabled after every legacy block. */
.front-body .training-radar-card .radar-tooltip,
.front-body .training-radar-card .radar-point:hover .radar-tooltip,
.front-body .training-radar-card .radar-point:focus .radar-tooltip,
.front-body .training-radar-card .radar-point:focus-visible .radar-tooltip {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.front-body .training-radar-card .radar-point.is-active {
    z-index: 260 !important;
    transform: translate(-50%, -50%) scale(1.26) !important;
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--rank-color) 18%, transparent), 0 16px 34px color-mix(in srgb, var(--rank-color) 38%, transparent) !important;
}

/* User online footer and admin monitor */
.online-dot {
    width: 10px;
    height: 10px;
    display: inline-block;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 5px rgba(34, 197, 94, .14), 0 0 18px rgba(34, 197, 94, .42);
}

.front-body .footer-online-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 22px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    color: #ecfdf5;
    background: rgba(255, 255, 255, .12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 18px 46px rgba(2, 6, 23, .18);
    backdrop-filter: blur(12px);
}

.front-body .footer-online-info strong {
    font-family: var(--font-sans);
    font-size: .95rem;
    letter-spacing: .02em;
}

.admin-footer-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 26px;
    padding: 18px 22px;
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 24px;
    color: #0f172a;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 18px 50px rgba(15, 23, 42, .08);
}

.admin-footer-status div {
    display: grid;
    gap: 4px;
}

.admin-footer-status span {
    color: #64748b;
}

.admin-online-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    padding: 10px 22px;
    border: 1px solid rgba(34, 197, 94, .22);
    border-radius: 999px;
    color: #166534;
    background: linear-gradient(135deg, rgba(236, 253, 245, .96), rgba(255, 255, 255, .88));
    text-decoration: none;
    box-shadow: 0 16px 42px rgba(21, 128, 61, .12);
    transition: transform .2s ease, box-shadow .2s ease;
}

.admin-online-chip:not(.disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 54px rgba(21, 128, 61, .18);
}

.admin-online-chip.disabled {
    color: #475569;
    cursor: default;
    opacity: .82;
}

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

.admin-online-hero,
.online-table-card {
    border: 1px solid rgba(148, 163, 184, .26);
    border-radius: 26px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 24px 70px rgba(15, 23, 42, .08);
}

.admin-online-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px 34px;
}

.admin-section-eyebrow {
    margin: 0 0 8px;
    color: #0f766e;
    font-size: .82rem;
    font-weight: 900;
    letter-spacing: .24em;
    text-transform: uppercase;
}

.admin-online-hero h2 {
    margin: 0;
    color: #0f172a;
    font-size: clamp(2rem, 3vw, 3.5rem);
    line-height: .98;
}

.admin-online-hero p {
    max-width: 720px;
    margin: 12px 0 0;
    color: #475569;
    font-size: 1.05rem;
}

.admin-online-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    padding: 13px 20px;
    border-radius: 999px;
    color: #065f46;
    background: #ecfdf5;
    font-weight: 900;
}

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

.online-summary-card {
    position: relative;
    overflow: hidden;
    min-height: 126px;
    padding: 22px 24px;
    border: 1px solid rgba(148, 163, 184, .24);
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(241, 245, 249, .86));
    box-shadow: 0 18px 46px rgba(15, 23, 42, .07);
}

.online-summary-card::after {
    content: "";
    position: absolute;
    right: -32px;
    top: -38px;
    width: 120px;
    height: 120px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(20, 184, 166, .16), rgba(139, 92, 246, .18));
}

.online-summary-card span {
    display: block;
    color: #64748b;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.online-summary-card strong {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 14px;
    color: #0f766e;
    font-size: clamp(1.9rem, 2.6vw, 3rem);
    line-height: 1;
}

.online-summary-card small {
    color: #64748b;
    font-weight: 800;
}

.online-table-card {
    overflow: hidden;
}

.online-table-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 24px 28px;
    border-bottom: 1px solid rgba(148, 163, 184, .22);
}

.online-table-head h3 {
    margin: 0;
    color: #0f172a;
    font-size: 1.35rem;
}

.online-table-head p {
    margin: 7px 0 0;
    color: #64748b;
}

.online-table-head > strong {
    color: #334155;
    white-space: nowrap;
}

.online-table-wrap {
    overflow-x: auto;
}

.online-users-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
}

.online-users-table th,
.online-users-table td {
    padding: 17px 20px;
    border-bottom: 1px solid rgba(148, 163, 184, .16);
    text-align: left;
    vertical-align: middle;
}

.online-users-table th {
    color: #475569;
    background: rgba(241, 245, 249, .72);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.online-users-table td {
    color: #0f172a;
    font-weight: 700;
}

.online-user-cell {
    display: flex;
    align-items: center;
    gap: 13px;
}

.online-user-cell img {
    width: 48px;
    height: 48px;
    border: 3px solid #fff;
    border-radius: 999px;
    object-fit: cover;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .14);
}

.online-user-cell span {
    display: grid;
    gap: 3px;
}

.online-user-cell small {
    color: #64748b;
    font-weight: 700;
}

.online-status {
    display: inline-flex;
    align-items: center;
    padding: 7px 13px;
    border-radius: 999px;
    color: #047857;
    background: #d1fae5;
    font-weight: 900;
}

@media (max-width: 900px) {
    .admin-footer-status,
    .admin-online-hero,
    .online-table-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .online-summary-grid {
        grid-template-columns: 1fr;
    }
}

/* Premium guidance monitor: turns bottom performance into a readable executive panel. */
.front-body .training-guidance-monitor {
    grid-column: 1 / -1;
    padding: clamp(.95rem, 1.4vw, 1.15rem) !important;
    border-radius: 26px !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,255,255,.82)),
        radial-gradient(circle at 5% 0, rgba(239,95,122,.14), transparent 32%),
        radial-gradient(circle at 96% 12%, rgba(106,63,176,.13), transparent 34%) !important;
    box-shadow: 0 24px 60px rgba(23,36,63,.1) !important;
}

.front-body .training-guidance-monitor::after {
    content: "";
    position: absolute;
    inset: auto 1.1rem 1rem auto;
    width: 11rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(239,95,122,.13), rgba(106,63,176,.11));
    filter: blur(4px);
    pointer-events: none;
}

.front-body .guidance-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .75rem;
    position: relative;
    z-index: 1;
}

.front-body .guidance-card-head span {
    display: grid;
    gap: .08rem;
}

.front-body .guidance-card-head small {
    color: #a5562a;
    font-size: .68rem;
    font-weight: 950;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.front-body .guidance-card-head h4 {
    margin: 0 !important;
    color: #17243f;
    font-size: clamp(1rem, 1.25vw, 1.18rem) !important;
    line-height: 1.1;
}

.front-body .guidance-card-head h4::after {
    content: none !important;
}

.front-body .guidance-card-head > b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.25rem;
    padding: .46rem .78rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(239,95,122,.15), rgba(106,63,176,.14));
    color: #6a3fb0;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .14em;
}

.front-body .guidance-panel-list {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .75rem !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    position: relative;
    z-index: 1;
}

.front-body .guidance-panel-list .guidance-panel-item {
    --risk: #6a3fb0;
    --risk-soft: rgba(106,63,176,.12);
    display: grid !important;
    grid-template-columns: 2.35rem minmax(0, 1fr) !important;
    gap: .62rem !important;
    min-height: 0 !important;
    padding: .78rem !important;
    border: 1px solid rgba(23,36,63,.08) !important;
    border-radius: 21px !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.97), rgba(255,255,255,.78)),
        radial-gradient(circle at 100% 0, var(--risk-soft), transparent 44%) !important;
    box-shadow: 0 14px 30px rgba(23,36,63,.07) !important;
    overflow: hidden;
    position: relative;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.front-body .guidance-panel-list .guidance-panel-item:hover {
    border-color: color-mix(in srgb, var(--risk) 42%, rgba(23,36,63,.08)) !important;
    box-shadow: 0 18px 38px rgba(23,36,63,.12) !important;
    transform: translateY(-2px);
}

.front-body .guidance-panel-item::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, var(--risk), color-mix(in srgb, var(--risk) 60%, #f28a2e));
}

.front-body .guidance-panel-item.is-danger {
    --risk: #b01824;
    --risk-soft: rgba(239,95,122,.15);
}

.front-body .guidance-panel-item.is-warning {
    --risk: #d87012;
    --risk-soft: rgba(242,138,46,.16);
}

.front-body .guidance-panel-item.is-watch {
    --risk: #6a3fb0;
    --risk-soft: rgba(106,63,176,.14);
}

.front-body .guidance-rank {
    display: grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--risk), #9b4fc8);
    color: #fff;
    font-size: .82rem;
    font-weight: 950;
    box-shadow: 0 12px 24px color-mix(in srgb, var(--risk) 28%, transparent);
}

.front-body .guidance-logo {
    grid-column: 1;
    width: 2.35rem !important;
    height: 2.35rem !important;
    margin-top: -.16rem;
    border-radius: 50%;
    object-fit: contain !important;
    background: rgba(255,255,255,.88);
    box-shadow: 0 10px 22px rgba(23,36,63,.12);
}

.front-body .guidance-main {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: grid;
    min-width: 0;
    gap: .38rem;
}

.front-body .guidance-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .6rem;
}

.front-body .guidance-title-row b {
    overflow: hidden;
    color: #17243f !important;
    font-size: .86rem !important;
    font-weight: 950;
    line-height: 1.18;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.front-body .guidance-title-row em {
    flex: 0 0 auto;
    padding: .24rem .48rem;
    border-radius: 999px;
    background: var(--risk-soft);
    color: var(--risk);
    font-size: .56rem;
    font-style: normal;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.front-body .guidance-main p {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: color-mix(in srgb, var(--risk) 76%, #17243f);
    font-size: .68rem;
    font-weight: 900;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.front-body .guidance-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .42rem;
}

.front-body .guidance-metrics span {
    display: grid !important;
    gap: .2rem !important;
    min-width: 0;
    padding: .42rem .48rem;
    border: 1px solid rgba(23,36,63,.06);
    border-radius: 13px;
    background: rgba(255,255,255,.7);
}

.front-body .guidance-metrics strong {
    color: rgba(23,36,63,.58) !important;
    font-size: .58rem !important;
    font-weight: 950 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.front-body .guidance-metrics i {
    color: #17243f;
    font-size: .86rem;
    font-style: normal;
    font-weight: 950;
}

.front-body .guidance-metrics small {
    display: block !important;
    width: 100%;
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(23,36,63,.08);
}

.front-body .guidance-metrics u {
    display: block;
    height: 100%;
    border-radius: inherit;
    text-decoration: none;
}

.front-body .guidance-metrics .participant u {
    width: var(--participant);
    background: linear-gradient(90deg, #ef5f7a, #f28a2e);
}

.front-body .guidance-metrics .trainer u {
    width: var(--trainer);
    background: linear-gradient(90deg, #1f5f99, #6a3fb0);
}

.front-body .guidance-empty {
    grid-column: 1 / -1;
    padding: 1rem;
    border: 1px dashed rgba(23,36,63,.16);
    border-radius: 18px;
    color: rgba(23,36,63,.72);
    font-weight: 900;
    text-align: center;
}

@media (max-width: 1280px) {
    .front-body .guidance-panel-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .front-body .guidance-card-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .front-body .guidance-panel-list {
        grid-template-columns: 1fr;
    }
}

/* Compact monitoring cards for ASAD Bela Diri detail grafik. */
.front-body .training-guidance-monitor.training-guidance-compact {
    padding: .82rem .92rem !important;
    border-radius: 20px !important;
}

.front-body .training-guidance-compact::after {
    width: 7.5rem;
    opacity: .7;
}

.front-body .training-guidance-compact .guidance-card-head {
    margin-bottom: .55rem;
}

.front-body .training-guidance-compact .guidance-card-head small {
    font-size: .62rem;
    letter-spacing: .16em;
}

.front-body .training-guidance-compact .guidance-card-head h4 {
    font-size: clamp(.94rem, 1vw, 1.05rem) !important;
}

.front-body .training-guidance-compact .guidance-card-head > b {
    min-width: 3.55rem;
    padding: .34rem .58rem;
    font-size: .62rem;
}

.front-body .training-guidance-compact .guidance-panel-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .5rem !important;
}

.front-body .training-guidance-compact .guidance-panel-list .guidance-panel-item {
    grid-template-columns: 2rem minmax(0, 1fr) !important;
    gap: .5rem !important;
    padding: .56rem .64rem !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 24px rgba(23,36,63,.06) !important;
}

.front-body .training-guidance-compact .guidance-panel-item:hover {
    box-shadow: 0 14px 28px rgba(23,36,63,.1) !important;
}

.front-body .training-guidance-compact .guidance-panel-item::before {
    width: 4px;
}

.front-body .training-guidance-compact .guidance-rank {
    width: 2rem;
    height: 2rem;
    border-radius: 12px;
    font-size: .74rem;
    box-shadow: 0 9px 18px color-mix(in srgb, var(--risk) 24%, transparent);
}

.front-body .training-guidance-compact .guidance-main {
    grid-column: 2;
    grid-row: auto;
    gap: .34rem;
}

.front-body .training-guidance-compact .guidance-title-row {
    align-items: center;
    gap: .46rem;
}

.front-body .training-guidance-compact .guidance-title-row b {
    font-size: .8rem !important;
    line-height: 1.12;
}

.front-body .training-guidance-compact .guidance-title-row em {
    padding: .18rem .4rem;
    font-size: .5rem;
    letter-spacing: .07em;
}

.front-body .training-guidance-compact .guidance-status-note {
    display: block !important;
    width: fit-content;
    max-width: 100%;
    margin: -.08rem 0 .02rem !important;
    padding: .12rem .34rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--risk) 9%, #ffffff);
    color: color-mix(in srgb, var(--risk) 72%, #17243f) !important;
    font-size: .62rem !important;
    font-weight: 950 !important;
    line-height: 1.15 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.front-body .guidance-mini-bars {
    display: grid;
    gap: .28rem;
}

.front-body .guidance-mini-bars > span {
    display: grid;
    grid-template-columns: 4.95rem 3.6rem minmax(58px, 1fr);
    gap: .38rem;
    align-items: center;
    min-width: 0;
}

.front-body .training-guidance-compact .guidance-mini-bars .mini-metric-label {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #526071 !important;
    font-size: .62rem !important;
    font-style: normal !important;
    font-weight: 950 !important;
    letter-spacing: .07em !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

.front-body .guidance-mini-bars strong {
    color: #17243f !important;
    font-size: .76rem !important;
    font-weight: 950 !important;
    text-align: right;
}

.front-body .guidance-mini-bars small {
    display: block !important;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(23,36,63,.09);
    box-shadow: inset 0 1px 2px rgba(23,36,63,.08);
}

.front-body .guidance-mini-bars u {
    display: block;
    height: 100%;
    border-radius: inherit;
    text-decoration: none;
}

.front-body .guidance-mini-bars .participant u {
    width: var(--participant);
    background: linear-gradient(90deg, #ef5f7a, #f28a2e);
}

.front-body .guidance-mini-bars .trainer u {
    width: var(--trainer);
    background: linear-gradient(90deg, #1f5f99, #6a3fb0);
}

@media (max-width: 760px) {
    .front-body .training-guidance-compact .guidance-panel-list {
        grid-template-columns: 1fr !important;
    }
}

/* Training report cards: polished attendance breakdown panels. */
.front-body .training-report-card .attendance-detail {
    padding: .72rem .8rem !important;
    border-radius: 18px !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.95), rgba(255,255,255,.74)),
        radial-gradient(circle at 100% 0, rgba(31,95,153,.13), transparent 44%) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.85), 0 12px 26px rgba(23,36,63,.06);
}

.front-body .training-report-card .attendance-detail.trainer {
    background:
        linear-gradient(145deg, rgba(255,255,255,.95), rgba(255,255,255,.74)),
        radial-gradient(circle at 100% 0, rgba(239,95,122,.14), transparent 44%) !important;
}

.front-body .training-report-card .attendance-detail dt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .45rem;
    color: rgba(23,36,63,.6) !important;
    font-size: .66rem !important;
    font-weight: 950 !important;
    letter-spacing: .12em !important;
}

.front-body .training-report-card .attendance-detail dt::after {
    content: "DETAIL";
    padding: .2rem .42rem;
    border-radius: 999px;
    background: rgba(23,36,63,.06);
    color: rgba(23,36,63,.52);
    font-size: .52rem;
    letter-spacing: .1em;
}

.front-body .training-report-card .attendance-detail dd {
    gap: .52rem !important;
}

.front-body .training-report-card .attendance-total {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #17243f !important;
    font-size: .86rem !important;
}

.front-body .training-report-card .attendance-total span {
    color: #17243f !important;
    font-size: .82rem !important;
    font-weight: 950 !important;
    white-space: nowrap;
}

.front-body .training-report-card .attendance-total b {
    padding: .24rem .5rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(31,95,153,.12), rgba(106,63,176,.1));
    color: #17243f;
    font-size: .78rem;
    font-weight: 950;
    white-space: nowrap;
}

.front-body .training-report-card .trainer .attendance-total b {
    background: linear-gradient(135deg, rgba(239,95,122,.13), rgba(106,63,176,.1));
}

.front-body .attendance-breakdown {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem;
}

.front-body .attendance-person {
    display: grid !important;
    grid-template-columns: 1.35rem minmax(0, 1fr);
    gap: .12rem .42rem !important;
    min-width: 0;
    padding: .46rem .5rem;
    border: 1px solid rgba(23,36,63,.07);
    border-radius: 14px;
    background: rgba(255,255,255,.76);
}

.front-body .attendance-person img {
    grid-row: span 2;
    align-self: center;
    width: 1.25rem;
    height: 1.25rem;
    object-fit: contain;
    filter: drop-shadow(0 5px 9px rgba(23,36,63,.12));
}

.front-body .attendance-person b {
    overflow: hidden;
    color: #17243f !important;
    font-size: .66rem !important;
    font-weight: 950 !important;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.front-body .attendance-person em {
    color: rgba(23,36,63,.64);
    font-size: .62rem;
    font-style: normal;
    font-weight: 850;
    line-height: 1.15;
    white-space: nowrap;
}

.front-body .attendance-person small {
    grid-column: 1 / -1;
    display: block !important;
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(23,36,63,.08);
}

.front-body .attendance-person u {
    display: block;
    width: var(--fill);
    height: 100%;
    border-radius: inherit;
    text-decoration: none;
}

.front-body .attendance-person.male u {
    background: linear-gradient(90deg, #1f5f99, #24a7df);
}

.front-body .attendance-person.female u {
    background: linear-gradient(90deg, #ef5f7a, #b84bc6);
}

@media (max-width: 980px) {
    .front-body .attendance-breakdown {
        grid-template-columns: 1fr;
    }
}

.front-body .radar-live-tooltip {
    width: min(100%, 260px) !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    gap: .18rem .65rem !important;
    align-items: center !important;
    padding: .68rem .78rem !important;
    border: 1px solid rgba(23,36,63,.12) !important;
    border-radius: 20px !important;
    background:
        radial-gradient(circle at 88% 12%, rgba(239,95,122,.12), transparent 34%),
        rgba(255,255,255,.94) !important;
    box-shadow: 0 18px 44px rgba(23,36,63,.12) !important;
    color: #17243f !important;
}

.front-body .radar-leader-item.is-active {
    transform: translateX(-4px) !important;
    border-color: color-mix(in srgb, var(--rank-color) 42%, rgba(23,36,63,.08)) !important;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--rank-color) 14%, transparent), rgba(255,255,255,.96) 62%),
        rgba(255,255,255,.96) !important;
    box-shadow: 0 16px 38px rgba(23,36,63,.11) !important;
}

/* Radar live detail v16: satu panel aktif, bukan tooltip terkunci di ranking terakhir. */
.front-body .training-radar-card .training-radar-main {
    grid-template-columns: minmax(230px, .72fr) minmax(330px, 1fr) !important;
    align-items: stretch !important;
    gap: .95rem !important;
}

.front-body .training-radar-stack {
    display: grid !important;
    align-content: center !important;
    justify-items: center !important;
    gap: .7rem !important;
    min-width: 0 !important;
}

.front-body .training-radar-stack .training-radar-wrap {
    width: 215px !important;
    margin: 0 auto !important;
}

.front-body .training-radar-card .radar-point .radar-tooltip {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.front-body .training-radar-card .radar-point.is-active {
    z-index: 260 !important;
    transform: translate(-50%, -50%) scale(1.26) !important;
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--rank-color) 18%, transparent), 0 16px 34px color-mix(in srgb, var(--rank-color) 38%, transparent) !important;
}

/* Compact verified training report cards. */
.front-body .training-list-title {
    margin: clamp(.95rem, 1.6vw, 1.35rem) 0 .65rem !important;
}

.front-body .training-list-title h3 {
    font-size: clamp(1.55rem, 3.2vw, 3.35rem) !important;
    line-height: .98 !important;
}

.front-body .training-list-title > span {
    padding: .48rem .8rem !important;
    font-size: .82rem !important;
}

.front-body .training-report-grid-compact {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .85rem !important;
    align-items: start !important;
}

.front-body .training-report-grid-compact .training-report-card {
    gap: .58rem !important;
    padding: .78rem !important;
    border-radius: 18px !important;
    min-height: 0 !important;
}

.front-body .training-report-grid-compact .chapter-card-head {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    gap: .58rem !important;
    align-items: center !important;
    min-height: 0 !important;
    margin: 0 !important;
}

.front-body .training-report-grid-compact .chapter-logo {
    width: 44px !important;
    height: 44px !important;
    padding: .18rem !important;
    object-fit: contain !important;
}

.front-body .training-report-grid-compact .chapter-card-head > div {
    min-width: 0 !important;
    display: grid !important;
    gap: .08rem !important;
}

.front-body .training-report-grid-compact .chapter-card-head .eyebrow {
    margin: 0 !important;
    font-size: .58rem !important;
    letter-spacing: .12em !important;
    line-height: 1 !important;
}

.front-body .training-report-grid-compact .chapter-card-head h2 {
    margin: 0 !important;
    overflow: hidden !important;
    color: #17243f !important;
    font-size: .98rem !important;
    line-height: 1.08 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.front-body .training-report-grid-compact .chapter-card-head small {
    overflow: hidden !important;
    color: rgba(23,36,63,.62) !important;
    font-size: .68rem !important;
    font-weight: 800 !important;
    line-height: 1.14 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.front-body .training-report-grid-compact .chapter-card-head .status {
    align-self: start !important;
    padding: .24rem .46rem !important;
    border-radius: 999px !important;
    font-size: .56rem !important;
    letter-spacing: .08em !important;
    white-space: nowrap !important;
}

.front-body .training-report-grid-compact .training-report-body {
    display: -webkit-box !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: rgba(23,36,63,.7) !important;
    font-size: .76rem !important;
    line-height: 1.35 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
}

.front-body .training-report-grid-compact .training-report-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .42rem !important;
    margin: 0 !important;
}

.front-body .training-report-grid-compact .training-report-stats > div {
    padding: .46rem .5rem !important;
    border-radius: 12px !important;
}

.front-body .training-report-grid-compact .training-report-stats dt {
    font-size: .56rem !important;
    letter-spacing: .08em !important;
    line-height: 1 !important;
}

.front-body .training-report-grid-compact .training-report-stats dd {
    margin-top: .16rem !important;
    font-size: .78rem !important;
    line-height: 1.12 !important;
}

.front-body .training-report-grid-compact .training-report-card .attendance-detail {
    padding: .5rem .55rem !important;
    border-radius: 13px !important;
    box-shadow: inset 0 1px rgba(255,255,255,.72), 0 8px 18px rgba(23,36,63,.045) !important;
}

.front-body .training-report-grid-compact .training-report-card .attendance-detail dt {
    margin-bottom: .28rem !important;
    font-size: .56rem !important;
    letter-spacing: .08em !important;
}

.front-body .training-report-grid-compact .training-report-card .attendance-detail dt::after {
    display: none !important;
}

.front-body .training-report-grid-compact .training-report-card .attendance-detail dd {
    gap: .32rem !important;
}

.front-body .training-report-grid-compact .training-report-card .attendance-total {
    font-size: .74rem !important;
}

.front-body .training-report-grid-compact .training-report-card .attendance-total span {
    font-size: .72rem !important;
}

.front-body .training-report-grid-compact .training-report-card .attendance-total b {
    padding: .16rem .36rem !important;
    font-size: .68rem !important;
}

.front-body .training-report-grid-compact .attendance-breakdown {
    gap: .28rem !important;
}

.front-body .training-report-grid-compact .attendance-person {
    grid-template-columns: 1rem minmax(0, 1fr) !important;
    gap: .06rem .26rem !important;
    padding: .3rem .34rem !important;
    border-radius: 10px !important;
}

.front-body .training-report-grid-compact .attendance-person img {
    width: .92rem !important;
    height: .92rem !important;
}

.front-body .training-report-grid-compact .attendance-person b {
    font-size: .56rem !important;
    line-height: 1 !important;
}

.front-body .training-report-grid-compact .attendance-person em {
    font-size: .54rem !important;
    line-height: 1 !important;
}

.front-body .training-report-grid-compact .attendance-person small {
    height: 4px !important;
}

.front-body .training-report-grid-compact .training-evidence-links {
    gap: .36rem !important;
    margin-top: -.08rem !important;
}

.front-body .training-report-grid-compact .training-evidence-links a {
    padding: .32rem .5rem !important;
    font-size: .68rem !important;
}

@media (max-width: 1380px) {
    .front-body .training-report-grid-compact {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    .front-body .training-report-grid-compact {
        grid-template-columns: 1fr !important;
    }
}

/* Verified report card v2: executive, compact, and visually polished. */
.front-body .training-report-grid-compact .verified-report-card {
    position: relative !important;
    display: grid !important;
    gap: .72rem !important;
    padding: .92rem !important;
    overflow: hidden !important;
    border: 1px solid rgba(23,36,63,.1) !important;
    border-radius: 22px !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,255,255,.78)),
        radial-gradient(circle at 100% 0, rgba(106,63,176,.12), transparent 34%),
        radial-gradient(circle at 0 100%, rgba(239,95,122,.08), transparent 34%) !important;
    box-shadow: 0 18px 48px rgba(23,36,63,.09) !important;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.front-body .training-report-grid-compact .verified-report-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, #ef5f7a, #f28a2e, #566b3a, #1f5f99, #6a3fb0);
}

.front-body .training-report-grid-compact .verified-report-card:hover {
    transform: translateY(-3px);
    border-color: rgba(106,63,176,.2) !important;
    box-shadow: 0 24px 60px rgba(23,36,63,.13) !important;
}

.front-body .verified-report-head {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: .7rem;
    align-items: center;
    min-width: 0;
}

.front-body .verified-logo-wrap {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(23,36,63,.1);
    border-radius: 16px;
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    box-shadow: 0 10px 22px rgba(23,36,63,.1);
}

.front-body .verified-logo-wrap img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.front-body .verified-title {
    display: grid;
    gap: .1rem;
    min-width: 0;
}

.front-body .verified-title p {
    margin: 0;
    color: #c9651e;
    font-size: .66rem;
    font-weight: 950;
    letter-spacing: .16em;
    line-height: 1;
    text-transform: uppercase;
}

.front-body .verified-title h2 {
    margin: 0 !important;
    overflow: hidden;
    color: #17243f !important;
    font-family: inherit !important;
    font-size: 1.05rem !important;
    font-weight: 950 !important;
    line-height: 1.08 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.front-body .verified-title small {
    overflow: hidden;
    color: rgba(23,36,63,.6);
    font-size: .72rem;
    font-weight: 850;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.front-body .verified-status {
    align-self: start;
    padding: .26rem .56rem;
    border: 1px solid rgba(86,107,58,.14);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(86,107,58,.13), rgba(255,255,255,.72));
    color: #46582e;
    font-size: .62rem;
    font-weight: 950;
    letter-spacing: .08em;
    line-height: 1;
}

.front-body .verified-report-body {
    display: -webkit-box;
    min-height: 2.72em;
    margin: 0;
    overflow: hidden;
    color: rgba(23,36,63,.68);
    font-size: .82rem;
    font-weight: 650;
    line-height: 1.36;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.front-body .verified-meta-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr .72fr;
    gap: .45rem;
}

.front-body .verified-meta-grid span {
    display: grid;
    gap: .12rem;
    min-width: 0;
    padding: .46rem .52rem;
    border: 1px solid rgba(23,36,63,.08);
    border-radius: 13px;
    background: rgba(255,255,255,.72);
}

.front-body .verified-meta-grid small {
    overflow: hidden;
    color: rgba(23,36,63,.55);
    font-size: .55rem;
    font-weight: 950;
    letter-spacing: .09em;
    line-height: 1;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.front-body .verified-meta-grid strong {
    overflow: hidden;
    color: #17243f;
    font-size: .78rem;
    font-weight: 950;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.front-body .verified-attendance-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
}

.front-body .verified-attendance-card {
    display: grid;
    gap: .42rem;
    min-width: 0;
    padding: .58rem;
    border: 1px solid rgba(23,36,63,.08);
    border-radius: 16px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.9), rgba(255,255,255,.68)),
        radial-gradient(circle at 100% 0, rgba(31,95,153,.12), transparent 44%);
}

.front-body .verified-attendance-card.trainer {
    background:
        linear-gradient(145deg, rgba(255,255,255,.9), rgba(255,255,255,.68)),
        radial-gradient(circle at 100% 0, rgba(239,95,122,.12), transparent 44%);
}

.front-body .verified-attendance-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .45rem;
}

.front-body .verified-attendance-head span {
    color: rgba(23,36,63,.58);
    font-size: .6rem;
    font-weight: 950;
    letter-spacing: .08em;
    line-height: 1;
    text-transform: uppercase;
}

.front-body .verified-attendance-head strong {
    padding: .18rem .42rem;
    border-radius: 999px;
    background: rgba(23,36,63,.06);
    color: #17243f;
    font-size: .7rem;
    font-weight: 950;
    line-height: 1;
}

.front-body .verified-attendance-total {
    color: #17243f;
    font-size: .86rem;
    font-weight: 950;
    line-height: 1;
}

.front-body .verified-gender-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .35rem;
}

.front-body .verified-gender-grid > span {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: .08rem .3rem;
    min-width: 0;
    padding: .36rem .4rem;
    border: 1px solid rgba(23,36,63,.07);
    border-radius: 11px;
    background: rgba(255,255,255,.75);
}

.front-body .verified-gender-grid img {
    grid-row: span 2;
    align-self: center;
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.front-body .verified-gender-grid b {
    overflow: hidden;
    color: #17243f;
    font-size: .6rem;
    font-weight: 950;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.front-body .verified-gender-grid em {
    overflow: hidden;
    color: rgba(23,36,63,.62);
    font-size: .56rem;
    font-style: normal;
    font-weight: 850;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.front-body .verified-gender-grid small {
    grid-column: 1 / -1;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(23,36,63,.08);
}

.front-body .verified-gender-grid u {
    display: block;
    width: var(--fill);
    height: 100%;
    border-radius: inherit;
    text-decoration: none;
}

.front-body .verified-gender-grid .male u {
    background: linear-gradient(90deg, #1f5f99, #24a7df);
}

.front-body .verified-gender-grid .female u {
    background: linear-gradient(90deg, #ef5f7a, #b84bc6);
}

.front-body .verified-report-card .training-evidence-links {
    margin-top: -.12rem !important;
}

@media (max-width: 980px) {
    .front-body .verified-attendance-grid,
    .front-body .verified-meta-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Admin login readability: keep typed credentials visible on light inputs. */
.login-card input[type="text"],
.login-card input[type="email"],
.login-card input[type="password"] {
    color: #111827 !important;
    caret-color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

.login-card input[type="text"]:focus,
.login-card input[type="email"]:focus,
.login-card input[type="password"]:focus {
    color: #111827 !important;
    caret-color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

.login-card input[type="text"]::placeholder,
.login-card input[type="email"]::placeholder,
.login-card input[type="password"]::placeholder {
    color: #6b7280 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #6b7280 !important;
}

.login-card input[type="text"]::-moz-placeholder,
.login-card input[type="email"]::-moz-placeholder,
.login-card input[type="password"]::-moz-placeholder {
    color: #6b7280 !important;
    opacity: 1 !important;
}

.login-card input[type="text"]:-webkit-autofill,
.login-card input[type="email"]:-webkit-autofill,
.login-card input[type="password"]:-webkit-autofill,
.login-card input[type="text"]:-webkit-autofill:hover,
.login-card input[type="email"]:-webkit-autofill:hover,
.login-card input[type="password"]:-webkit-autofill:hover,
.login-card input[type="text"]:-webkit-autofill:focus,
.login-card input[type="email"]:-webkit-autofill:focus,
.login-card input[type="password"]:-webkit-autofill:focus {
    box-shadow: 0 0 0 1000px #ffffff inset !important;
    caret-color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

.front-body .radar-live-tooltip {
    width: min(100%, 260px) !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    gap: .18rem .65rem !important;
    align-items: center !important;
    padding: .68rem .78rem !important;
    border: 1px solid rgba(23,36,63,.12) !important;
    border-radius: 20px !important;
    background:
        radial-gradient(circle at 88% 12%, rgba(239,95,122,.12), transparent 34%),
        rgba(255,255,255,.94) !important;
    box-shadow: 0 18px 44px rgba(23,36,63,.12) !important;
    color: #17243f !important;
}

.front-body .radar-live-tooltip img {
    grid-row: span 2 !important;
    width: 44px !important;
    height: 44px !important;
    object-fit: contain !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.88) !important;
    box-shadow: inset 0 0 0 1px rgba(23,36,63,.08), 0 10px 22px rgba(23,36,63,.08) !important;
}

.front-body .radar-live-tooltip span {
    display: grid !important;
    min-width: 0 !important;
}

.front-body .radar-live-tooltip b {
    overflow: hidden !important;
    color: #17243f !important;
    font-size: .92rem !important;
    font-weight: 950 !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.front-body .radar-live-tooltip small {
    color: rgba(23,36,63,.62) !important;
    font-size: .66rem !important;
    font-weight: 850 !important;
}

.front-body .radar-live-tooltip strong {
    justify-self: end !important;
    color: #a51118 !important;
    font-size: .95rem !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
}

.front-body .radar-live-tooltip em {
    grid-column: 2 / 4 !important;
    color: rgba(23,36,63,.66) !important;
    font-size: .68rem !important;
    font-style: normal !important;
    font-weight: 800 !important;
}

.front-body .radar-leader-item {
    appearance: none !important;
    border: 1px solid rgba(23,36,63,.06) !important;
    text-align: left !important;
    cursor: pointer !important;
}

.front-body .radar-leader-item.is-active {
    transform: translateX(-4px) !important;
    border-color: color-mix(in srgb, var(--rank-color) 42%, rgba(23,36,63,.08)) !important;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--rank-color) 14%, transparent), rgba(255,255,255,.96) 62%),
        rgba(255,255,255,.96) !important;
    box-shadow: 0 16px 38px rgba(23,36,63,.11) !important;
}

.front-body .training-radar-caption strong {
    white-space: normal !important;
}

@media (max-width: 980px) {
    .front-body .training-radar-card .training-radar-main {
        grid-template-columns: 1fr !important;
    }

    .front-body .radar-live-tooltip {
        width: min(100%, 340px) !important;
    }
}

/* Final radar interaction lock: all five Top 5 participant nodes are real hover targets. */
.front-body .training-radar-card .training-radar-wrap {
    position: relative !important;
    overflow: visible !important;
    isolation: isolate !important;
}

.front-body .training-radar-card .training-radar-svg {
    position: relative !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

.front-body .training-radar-card .training-radar-svg .radar-node-svg {
    opacity: .32 !important;
    pointer-events: none !important;
}

.front-body .training-radar-card .radar-point {
    position: absolute !important;
    left: var(--x) !important;
    top: var(--y) !important;
    transform: translate(-50%, -50%) !important;
    z-index: 160 !important;
    width: 1.55rem !important;
    height: 1.55rem !important;
    min-width: 1.55rem !important;
    min-height: 1.55rem !important;
    display: grid !important;
    place-items: center !important;
    border: 3px solid rgba(255,255,255,.98) !important;
    border-radius: 999px !important;
    background: var(--rank-color) !important;
    color: #fff !important;
    box-shadow: 0 12px 24px color-mix(in srgb, var(--rank-color) 34%, transparent) !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    overflow: visible !important;
}

.front-body .training-radar-card .radar-point::before {
    content: "" !important;
    position: absolute !important;
    inset: -12px !important;
    border-radius: 999px !important;
}

.front-body .training-radar-card .radar-point::after {
    content: attr(data-rank) !important;
    position: relative !important;
    z-index: 2 !important;
    color: #fff !important;
    font-size: .76rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-shadow: 0 1px 4px rgba(0,0,0,.25) !important;
}

.front-body .training-radar-card .radar-point > img {
    display: none !important;
}

.front-body .training-radar-card .radar-point .radar-tooltip {
    position: absolute !important;
    top: 50% !important;
    left: calc(100% + 12px) !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 260 !important;
    min-width: 220px !important;
    width: max-content !important;
    max-width: 250px !important;
    display: grid !important;
    grid-template-columns: 42px 1fr !important;
    gap: .2rem .7rem !important;
    align-items: center !important;
    padding: .85rem .95rem !important;
    border: 1px solid rgba(23,36,63,.12) !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,.98) !important;
    color: #17243f !important;
    box-shadow: 0 20px 45px rgba(23,36,63,.18) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translate(10px, -50%) !important;
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease !important;
    pointer-events: none !important;
}

.front-body .training-radar-card .radar-point .radar-tooltip img {
    display: block !important;
    width: 42px !important;
    height: 42px !important;
    grid-row: span 4 !important;
    object-fit: contain !important;
}

.front-body .training-radar-card .radar-point .radar-tooltip b,
.front-body .training-radar-card .radar-point .radar-tooltip strong,
.front-body .training-radar-card .radar-point .radar-tooltip small,
.front-body .training-radar-card .radar-point .radar-tooltip em {
    color: #17243f !important;
}

.front-body .training-radar-card .radar-point .radar-tooltip b {
    font-size: 1rem !important;
    line-height: 1.1 !important;
}

.front-body .training-radar-card .radar-point .radar-tooltip small,
.front-body .training-radar-card .radar-point .radar-tooltip em {
    color: rgba(23,36,63,.68) !important;
}

.front-body .training-radar-card .radar-point .radar-tooltip strong {
    font-size: 1.35rem !important;
    line-height: 1 !important;
}

.front-body .training-radar-card .radar-point:hover,
.front-body .training-radar-card .radar-point:focus {
    z-index: 240 !important;
    transform: translate(-50%, -50%) scale(1.2) !important;
}

.front-body .training-radar-card .radar-point:hover .radar-tooltip,
.front-body .training-radar-card .radar-point:focus .radar-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(0, -50%) !important;
}

.front-body .training-radar-card .radar-point[data-side="left"] .radar-tooltip {
    left: auto !important;
    right: calc(100% + 12px) !important;
    transform: translate(-10px, -50%) !important;
}

.front-body .training-radar-card .radar-point[data-side="left"]:hover .radar-tooltip,
.front-body .training-radar-card .radar-point[data-side="left"]:focus .radar-tooltip {
    transform: translate(0, -50%) !important;
}

.front-body .training-radar-card .radar-point[data-side="bottom"] .radar-tooltip {
    top: calc(100% + 12px) !important;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -10px) !important;
}

.front-body .training-radar-card .radar-point[data-side="bottom"]:hover .radar-tooltip,
.front-body .training-radar-card .radar-point[data-side="bottom"]:focus .radar-tooltip {
    transform: translate(-50%, 0) !important;
}

@media (max-width: 760px) {
    .front-body .training-radar-card .radar-point .radar-tooltip,
    .front-body .training-radar-card .radar-point[data-side="left"] .radar-tooltip,
    .front-body .training-radar-card .radar-point[data-side="bottom"] .radar-tooltip {
        top: auto !important;
        bottom: calc(100% + 12px) !important;
        left: 50% !important;
        right: auto !important;
        transform: translate(-50%, 10px) !important;
    }

    .front-body .training-radar-card .radar-point:hover .radar-tooltip,
    .front-body .training-radar-card .radar-point:focus .radar-tooltip,
    .front-body .training-radar-card .radar-point[data-side="left"]:hover .radar-tooltip,
    .front-body .training-radar-card .radar-point[data-side="left"]:focus .radar-tooltip,
    .front-body .training-radar-card .radar-point[data-side="bottom"]:hover .radar-tooltip,
    .front-body .training-radar-card .radar-point[data-side="bottom"]:focus .radar-tooltip {
        transform: translate(-50%, 0) !important;
    }
}

/* Radar live detail v16 hard stop at EOF: browser must ignore the removed legacy tooltip. */
.front-body .training-radar-card .radar-tooltip,
.front-body .training-radar-card .radar-point:hover .radar-tooltip,
.front-body .training-radar-card .radar-point:focus .radar-tooltip,
.front-body .training-radar-card .radar-point:focus-visible .radar-tooltip {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.front-body .training-radar-card .radar-point.is-active {
    z-index: 260 !important;
    transform: translate(-50%, -50%) scale(1.26) !important;
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--rank-color) 18%, transparent), 0 16px 34px color-mix(in srgb, var(--rank-color) 38%, transparent) !important;
}

/* Back panel sidebar polish - 20260605 */
.admin-sidebar {
    position: sticky;
    top: 0;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 3%, rgba(236, 72, 153, .16), transparent 28%),
        radial-gradient(circle at 92% 36%, rgba(20, 184, 166, .14), transparent 24%),
        linear-gradient(180deg, #0d1626 0%, #101827 52%, #08111f 100%);
    border-right: 1px solid rgba(226, 232, 240, .10);
    box-shadow: 18px 0 46px rgba(15, 23, 42, .20);
}

.admin-sidebar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .06), transparent 24%),
        radial-gradient(circle at 45% 18%, rgba(255, 255, 255, .06), transparent 22%);
    opacity: .88;
}

.admin-brand {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transition: transform .22s ease, opacity .22s ease;
}

.admin-brand:hover {
    transform: translateY(-1px);
    opacity: .98;
}

.admin-brand img {
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .28));
}

.admin-menu {
    gap: .48rem;
    padding: .68rem .34rem .72rem 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, .72) rgba(255, 255, 255, .06);
}

.admin-menu::-webkit-scrollbar {
    width: 7px;
}

.admin-menu::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(148, 163, 184, .72);
}

.admin-menu::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .05);
}

.admin-menu a {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 16px;
    background: rgba(255, 255, 255, .018);
    color: rgba(226, 232, 240, .82);
    transition: background .22s ease, color .22s ease, transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.admin-menu a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 4px;
    border-radius: 999px;
    opacity: 0;
    background: linear-gradient(180deg, var(--menu-accent), rgba(255, 255, 255, .76));
    transition: opacity .2s ease;
}

.admin-menu a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0;
    background:
        radial-gradient(circle at 18% 24%, color-mix(in srgb, var(--menu-accent) 28%, transparent), transparent 34%),
        linear-gradient(135deg, color-mix(in srgb, var(--menu-accent) 18%, transparent), rgba(255, 255, 255, .045));
    transition: opacity .22s ease;
}

.admin-menu a:hover {
    color: #fff;
    transform: translateX(3px);
    border-color: color-mix(in srgb, var(--menu-accent) 44%, rgba(255, 255, 255, .12));
    box-shadow: 0 12px 24px rgba(0, 0, 0, .16);
}

.admin-menu a:hover::after,
.admin-menu a.active::after {
    opacity: 1;
}

.admin-menu a.active {
    color: #fff;
    background: linear-gradient(135deg, color-mix(in srgb, var(--menu-accent) 22%, rgba(255, 255, 255, .08)), rgba(255, 255, 255, .06));
    border-color: rgba(255, 255, 255, .72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 16px 32px rgba(0, 0, 0, .22);
}

.admin-menu a.active::before {
    opacity: 1;
}

.admin-menu .menu-icon {
    color: var(--menu-accent);
    background:
        radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .42), transparent 29%),
        linear-gradient(135deg, color-mix(in srgb, var(--menu-accent) 28%, rgba(255, 255, 255, .10)), rgba(255, 255, 255, .055));
    border: 1px solid color-mix(in srgb, var(--menu-accent) 36%, rgba(255, 255, 255, .12));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .20), 0 10px 20px color-mix(in srgb, var(--menu-accent) 18%, transparent);
    transition: transform .22s ease, color .22s ease, background .22s ease, border-color .22s ease;
}

.admin-menu a:hover .menu-icon,
.admin-menu a.active .menu-icon {
    color: #fff;
    transform: translateY(-1px) scale(1.03);
    background: linear-gradient(135deg, var(--menu-accent), color-mix(in srgb, var(--menu-accent) 56%, #ffffff));
    border-color: rgba(255, 255, 255, .36);
}

.admin-menu .menu-label {
    letter-spacing: .01em;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .18);
}

.admin-user {
    border-color: rgba(255, 255, 255, .13);
    background: linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .035));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 18px 34px rgba(0, 0, 0, .20);
    backdrop-filter: blur(14px);
}

.admin-user a {
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .06);
    transition: background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
}

.admin-user a:hover {
    color: #fff;
    transform: translateY(-1px);
    border-color: transparent;
    background: linear-gradient(135deg, #ef4444, #8b5cf6);
}

@media (min-width: 1021px) {
    .admin-sidebar {
        padding: .78rem .62rem;
    }

    .admin-brand {
        border-radius: 16px;
    }

    .admin-menu {
        gap: .42rem;
    }

    .admin-menu a {
        min-height: 50px;
        border-radius: 14px;
    }

    .admin-menu .menu-icon {
        width: 35px;
        height: 35px;
        border-radius: 12px;
    }

    .admin-menu .menu-label {
        font-size: .8rem;
        line-height: 1.16;
    }
}

/* Sidebar menu grouping - executive module separators, 20260607 */
.admin-menu {
    align-content: start;
}

.admin-menu-group {
    position: relative;
    display: grid;
    gap: .4rem;
    padding: .55rem 0 .72rem;
}

.admin-menu-group + .admin-menu-group {
    margin-top: .18rem;
    border-top: 1px solid rgba(148, 163, 184, .18);
}

.admin-menu-group + .admin-menu-group::before {
    content: "";
    position: absolute;
    top: -1px;
    left: .42rem;
    width: 46px;
    height: 1px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(56, 189, 248, .78), transparent);
}

.admin-menu-heading {
    display: flex;
    align-items: center;
    gap: .48rem;
    min-height: 22px;
    padding: 0 .78rem;
    color: rgba(203, 213, 225, .64);
    font-size: .62rem;
    font-weight: 950;
    letter-spacing: .15em;
    line-height: 1.2;
    text-transform: uppercase;
}

.admin-menu-heading::before {
    content: "";
    width: .42rem;
    height: .42rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, .56);
    box-shadow: 0 0 0 4px rgba(148, 163, 184, .08);
}

.admin-menu-items {
    display: grid;
    gap: .42rem;
}

.admin-menu-group:has(a.active) .admin-menu-heading {
    color: rgba(255, 255, 255, .86);
}

.admin-menu-group:has(a.active) .admin-menu-heading::before {
    background: var(--admin-page-accent, #38bdf8);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--admin-page-accent, #38bdf8) 18%, transparent);
}

@media (max-width: 1020px) {
    .admin-menu {
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
        align-items: start;
    }

    .admin-menu-group {
        min-width: 0;
        padding: .45rem .38rem .62rem;
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: 16px;
        background: rgba(255, 255, 255, .025);
    }

    .admin-menu-group + .admin-menu-group {
        margin-top: 0;
        border-top: 1px solid rgba(255, 255, 255, .08);
    }

    .admin-menu-group + .admin-menu-group::before {
        display: none;
    }
}

/* Browser recommendation footer note - 20260607 */
.front-body .browser-recommendation,
.admin-body .browser-recommendation {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: .35rem 0 0;
    color: rgba(203, 213, 225, .82);
    font-size: .72rem;
    font-weight: 800;
    line-height: 1.35;
}

.front-body .browser-recommendation::before,
.admin-body .browser-recommendation::before {
    content: "";
    width: .48rem;
    height: .48rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #38bdf8;
    box-shadow: 0 0 0 4px rgba(56, 189, 248, .12);
}

.admin-body .browser-recommendation {
    color: #64748b;
    font-size: .75rem;
}

/* Online user KPI refinement and compact sidebar - 20260607 */
.admin-online-page .online-summary-grid {
    gap: 14px;
}

.admin-online-page .online-summary-card {
    --online-accent: #16a34a;
    --online-soft: #dcfce7;
    position: relative;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    min-height: 118px;
    padding: 17px 18px;
    border-color: color-mix(in srgb, var(--online-accent) 24%, rgba(148, 163, 184, .24));
    background:
        linear-gradient(145deg, rgba(255,255,255,.98), rgba(248,250,252,.9) 56%, var(--online-soft)),
        #fff;
    box-shadow: 0 18px 38px rgba(15, 23, 42, .075);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.admin-online-page .online-total-card {
    --online-accent: #16a34a;
    --online-soft: #dcfce7;
}

.admin-online-page .online-timeout-card {
    --online-accent: #2563eb;
    --online-soft: #dbeafe;
}

.admin-online-page .online-checked-card {
    --online-accent: #f59e0b;
    --online-soft: #fef3c7;
}

.admin-online-page .online-summary-card::after {
    right: -24px;
    top: -30px;
    width: 108px;
    height: 108px;
    background: color-mix(in srgb, var(--online-accent) 18%, transparent);
}

.admin-online-page .online-summary-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--online-accent) 44%, rgba(148, 163, 184, .24));
    box-shadow: 0 22px 44px color-mix(in srgb, var(--online-accent) 14%, transparent), 0 10px 24px rgba(15,23,42,.08);
}

.admin-online-page .online-summary-icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    width: 50px;
    height: 50px;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    color: #fff;
    background: linear-gradient(135deg, var(--online-accent), color-mix(in srgb, var(--online-accent) 64%, #0f172a));
    box-shadow: 0 15px 28px color-mix(in srgb, var(--online-accent) 28%, transparent);
}

.admin-online-page .online-summary-icon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.admin-online-page .online-summary-copy {
    position: relative;
    z-index: 1;
    display: block;
    min-width: 0;
}

.admin-online-page .online-summary-copy > span {
    color: #64748b;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .12em;
}

.admin-online-page .online-summary-copy strong {
    margin-top: 7px;
    color: #0f172a;
    font-size: clamp(1.65rem, 2.1vw, 2.35rem);
    font-weight: 950;
}

.admin-online-page .online-checked-card .online-summary-copy strong {
    font-size: clamp(1.18rem, 1.42vw, 1.55rem);
    line-height: 1.2;
}

.admin-online-page .online-summary-copy small {
    display: block;
    margin-top: 6px;
    color: color-mix(in srgb, var(--online-accent) 72%, #475569);
    font-size: .75rem;
    font-weight: 850;
}

.admin-sidebar {
    gap: .72rem;
}

.admin-menu {
    gap: .24rem;
    padding: .34rem .22rem .42rem 0;
}

.admin-menu-group {
    gap: .24rem;
    padding: .3rem 0 .38rem;
}

.admin-menu-group + .admin-menu-group {
    margin-top: .04rem;
    border-top-color: rgba(148, 163, 184, .12);
}

.admin-menu-group + .admin-menu-group::before {
    width: 30px;
    opacity: .65;
}

.admin-menu-heading {
    min-height: 17px;
    padding: 0 .58rem;
    font-size: .56rem;
    letter-spacing: .13em;
}

.admin-menu-heading::before {
    width: .34rem;
    height: .34rem;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, .07);
}

.admin-menu-items {
    gap: .24rem;
}

.admin-menu a {
    min-height: 46px;
    padding: .52rem .62rem;
    gap: .58rem;
    border-radius: 13px;
}

.admin-menu .menu-icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    border-radius: 11px;
}

.admin-menu .menu-icon svg {
    width: 17px;
    height: 17px;
}

.admin-menu .menu-label {
    font-size: .77rem;
    line-height: 1.12;
}

/* Back panel sidebar brand header refinement */
.admin-sidebar .admin-brand {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 92px;
    gap: .62rem;
    padding: .9rem .42rem .8rem .16rem;
    margin-bottom: .12rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.admin-sidebar .admin-brand img {
    flex: 0 0 auto;
    width: 62px;
    height: 62px;
    object-fit: contain;
}

.admin-sidebar .admin-brand span {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
    gap: .28rem;
    align-content: center;
}

.admin-sidebar .admin-brand strong {
    display: block;
    max-width: 100%;
    color: #ffffff;
    font-family: var(--font-admin);
    font-size: clamp(.9rem, .95vw, 1.04rem);
    font-weight: 950;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
    overflow-wrap: normal;
    text-shadow: 0 8px 18px rgba(0,0,0,.32);
}

.admin-sidebar .admin-brand small {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    align-items: center;
    min-height: 20px;
    padding: .15rem .48rem;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: rgba(226,232,240,.88);
    font-size: .62rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .16em;
    text-transform: uppercase;
}

@media (max-width: 1100px) {
    .admin-sidebar .admin-brand {
        min-height: 82px;
        gap: .5rem;
        padding: .72rem .36rem .66rem .12rem;
    }

    .admin-sidebar .admin-brand img {
        width: 54px;
        height: 54px;
    }

    .admin-sidebar .admin-brand strong {
        font-size: .82rem;
    }

    .admin-sidebar .admin-brand small {
        font-size: .58rem;
    }

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

    .admin-online-page .online-checked-card {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    .admin-online-page .online-summary-grid {
        grid-template-columns: 1fr;
    }

    .admin-online-page .online-checked-card {
        grid-column: auto;
    }
}

/* Back panel UI/UX refinement - executive consistency, 20260607 */
.admin-body {
    --admin-page-accent: #38bdf8;
    --admin-page-soft: color-mix(in srgb, var(--admin-page-accent) 10%, #ffffff);
    --admin-page-border: color-mix(in srgb, var(--admin-page-accent) 24%, rgba(226, 232, 240, .86));
    --admin-heading-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 13h7V4H4v9Zm0 7h7v-5H4v5Zm9 0h7v-9h-7v9Zm0-16v5h7V4h-7Z'/%3E%3C/svg%3E");
    color: #0f172a;
    background:
        radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--admin-page-accent) 12%, transparent), transparent 26rem),
        linear-gradient(135deg, #eef6fb 0%, #f8fafc 43%, #f1f5f9 100%);
}

.admin-page-master-user { --admin-heading-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 2c-4 0-7 2.2-7 5v2h14v-2c0-2.8-3-5-7-5Zm9.5-2a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm-.7 2.1c1.9.8 3.2 2.2 3.2 3.9v2h1v-2c0-2.2-1.8-3.8-4.2-3.9Z'/%3E%3C/svg%3E"); }
.admin-page-halaman-dinamis,
.admin-page-legalitas-dokumen,
.admin-page-peraturan-organisasi { --admin-heading-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7 3h7l5 5v13H7V3Zm6 1.8V9h4.2L13 4.8ZM5 7H3v14h2V7Z'/%3E%3C/svg%3E"); }
.admin-page-warta-berita,
.admin-page-breaking-news { --admin-heading-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 5h16v14H4V5Zm3 3v4h5V8H7Zm7 0v1.5h4V8h-4Zm0 3v1.5h4V11h-4ZM7 15v1.5h11V15H7Z'/%3E%3C/svg%3E"); }
.admin-page-video-warta,
.admin-page-master-video { --admin-heading-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 5h11a2 2 0 0 1 2 2v1.4l4-2.4v12l-4-2.4V17a2 2 0 0 1-2 2H4V5Zm3 3v8h7V8H7Z'/%3E%3C/svg%3E"); }
.admin-page-prestasi { --admin-heading-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 3a6 6 0 0 1 3.7 10.7l1.8 6.3-5.5-3-5.5 3 1.8-6.3A6 6 0 0 1 12 3Zm0 3.1a2.9 2.9 0 1 0 0 5.8 2.9 2.9 0 0 0 0-5.8Z'/%3E%3C/svg%3E"); }
.admin-page-pengkab-kota,
.admin-page-master-daerah,
.admin-page-master-kelompok,
.admin-page-master-ranting,
.admin-page-master-unit-latihan,
.admin-page-asad-bela-diri { --admin-heading-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a7 7 0 0 1 7 7c0 5.2-7 13-7 13S5 14.2 5 9a7 7 0 0 1 7-7Zm0 4.3a2.7 2.7 0 1 0 0 5.4 2.7 2.7 0 0 0 0-5.4Z'/%3E%3C/svg%3E"); }

/* Front Internal ASAD Bela Diri: province table report */
.front-body .training-table-section {
    padding-top: clamp(1rem, 2vw, 1.8rem);
}

.front-body .training-table-filter {
    display: grid;
    grid-template-columns: minmax(190px, .72fr) minmax(0, 1.7fr);
    gap: 1rem 1.35rem;
    align-items: center;
    margin-bottom: 1.2rem;
    padding: clamp(1rem, 2vw, 1.35rem);
    border: 1px solid rgba(23, 36, 63, .08);
    border-radius: 8px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 18px 44px rgba(23, 36, 63, .1);
}

.front-body .training-filter-title {
    display: grid;
    gap: .38rem;
}

.front-body .training-filter-title span {
    color: var(--front-navy);
    font-family: var(--font-admin);
    font-size: 1.05rem;
    font-weight: 950;
}

.front-body .training-filter-title strong {
    color: rgba(23,36,63,.72);
    font-size: .9rem;
    font-weight: 750;
}

.front-body .training-filter-title strong::first-letter {
    color: #b3262d;
}

.front-body .training-filter-controls {
    display: grid;
    grid-template-columns: minmax(118px,.72fr) minmax(108px,.55fr) minmax(220px,1fr) auto;
    gap: .75rem;
    align-items: end;
}

.front-body .training-filter-controls label {
    display: grid;
    gap: .3rem;
    color: rgba(23,36,63,.76);
    font-size: .82rem;
    font-weight: 850;
}

.front-body .training-filter-controls select,
.front-body .training-filter-controls input {
    min-height: 44px;
    width: 100%;
    border: 1px solid rgba(23,36,63,.14);
    border-radius: 8px;
    padding: .66rem .78rem;
    background: #fff;
    color: var(--front-navy);
    font: inherit;
    font-weight: 800;
}

.front-body .training-filter-controls button,
.front-body .training-csv-button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .48rem;
    border: 0;
    border-radius: 8px;
    padding: .7rem 1rem;
    color: #fff;
    font-family: var(--font-admin);
    font-weight: 950;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(158, 23, 27, .22);
}

.front-body .training-filter-controls button {
    background: linear-gradient(135deg, #b3262d, #8f151a);
}

.front-body .training-scope-filter {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    gap: .55rem .8rem;
    align-items: center;
}

.front-body .training-scope-filter span {
    color: #64748b;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.front-body .training-scope-filter label {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    padding: .44rem .62rem;
    border: 1px solid rgba(23,36,63,.1);
    border-radius: 999px;
    background: rgba(248,250,252,.88);
    color: rgba(23,36,63,.78);
    font-size: .78rem;
    font-weight: 850;
}

.front-body .training-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.2rem;
}

.front-body .training-summary-grid article {
    position: relative;
    min-height: 118px;
    overflow: hidden;
    display: grid;
    align-content: center;
    gap: .35rem;
    padding: 1.15rem 5.2rem 1.15rem 1.35rem;
    border-radius: 8px;
    color: #fff;
    box-shadow: 0 18px 38px rgba(23, 36, 63, .14);
}

.front-body .training-summary-grid article::after {
    content: "";
    position: absolute;
    right: 1rem;
    top: 50%;
    width: 76px;
    height: 76px;
    transform: translateY(-50%);
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255,255,255,.22), rgba(255,255,255,.08) 68%, transparent 69%);
}

.front-body .summary-card-icon {
    position: absolute;
    z-index: 1;
    right: 1.35rem;
    top: 50%;
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    border: 1px solid rgba(255,255,255,.26);
    border-radius: 18px;
    background: rgba(255,255,255,.16);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 16px 28px rgba(0,0,0,.12);
    backdrop-filter: blur(8px);
}

.front-body .summary-card-icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.front-body .training-summary-grid span,
.front-body .training-summary-grid strong,
.front-body .training-summary-grid small {
    position: relative;
    z-index: 1;
}

.front-body .training-summary-grid span {
    font-weight: 850;
}

.front-body .training-summary-grid strong {
    font-family: var(--font-admin);
    font-size: clamp(1.85rem, 3vw, 2.45rem);
    line-height: 1;
}

.front-body .training-summary-grid small {
    color: rgba(255,255,255,.84);
    font-weight: 800;
}

.front-body .summary-province { background: linear-gradient(135deg, #059669, #064e3b); }
.front-body .summary-area { background: linear-gradient(135deg, #dc2626, #8f151a); }
.front-body .summary-participant { background: linear-gradient(135deg, #2563eb, #1e3a8a); }
.front-body .summary-trainer { background: linear-gradient(135deg, #7c3aed, #4c1d95); }

.front-body .training-data-card {
    overflow: hidden;
    border: 1px solid rgba(23,36,63,.08);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(220,252,231,.86), rgba(255,255,255,.98) 240px);
    box-shadow: 0 20px 48px rgba(23, 36, 63, .12);
}

.front-body .training-data-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: 1.25rem 1.4rem 1rem;
}

.front-body .training-data-head h2 {
    margin: 0;
    color: var(--front-navy);
    font-family: var(--font-admin);
    font-size: clamp(1.4rem, 2.1vw, 1.9rem);
    line-height: 1.1;
}

.front-body .training-data-head span {
    display: block;
    margin-top: .3rem;
    color: rgba(23,36,63,.7);
    font-weight: 750;
}

.front-body .training-data-head .training-table-description b {
    display: inline-flex;
    margin-left: .35rem;
    padding: .16rem .5rem;
    border: 1px solid rgba(5, 150, 105, .18);
    border-radius: 999px;
    background: rgba(236,253,245,.82);
    color: #047857;
    font-weight: 950;
    white-space: nowrap;
}

.front-body .training-csv-button {
    flex: 0 0 auto;
    background: linear-gradient(135deg, #16a34a, #15803d);
    box-shadow: 0 12px 24px rgba(22, 163, 74, .22);
}

.front-body .training-csv-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.front-body .training-table-wrap {
    overflow: auto;
    border-top: 1px solid rgba(23,36,63,.08);
    background: #fff;
}

.front-body .training-report-table {
    width: 100%;
    min-width: 1180px;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--front-navy);
}

.front-body .training-report-table th,
.front-body .training-report-table td {
    border-bottom: 1px solid rgba(23,36,63,.09);
    padding: .88rem .9rem;
    text-align: center;
    vertical-align: middle;
}

.front-body .training-report-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f8fafc;
    color: #1f2a44;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.front-body .training-report-table thead tr:first-child th {
    background: #f1f5f9;
}

.front-body .training-report-table th:first-child,
.front-body .training-report-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 3;
    text-align: left;
    background: inherit;
    box-shadow: 1px 0 0 rgba(23,36,63,.08);
}

.front-body .training-report-table tbody td:first-child {
    background: #fff;
}

.front-body .training-report-table th button {
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-transform: inherit;
}

.front-body .training-report-table th button::after {
    content: "  \25BE";
    color: #94a3b8;
}

.front-body .training-report-table tbody tr {
    transition: background .18s ease;
}

.front-body .training-report-table tbody tr:hover {
    background: #f8fafc;
}

.front-body .training-report-table td strong {
    display: block;
    font-size: .95rem;
}

.front-body .training-report-table td small {
    display: block;
    margin-top: .18rem;
    color: #64748b;
    font-size: .78rem;
    font-weight: 750;
}

.front-body .attendance-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    padding: .34rem .54rem;
    border-radius: 999px;
    font-weight: 950;
}

.front-body .attendance-badge.excellent {
    color: #047857;
    background: rgba(16,185,129,.14);
}

.front-body .attendance-badge.good {
    color: #1d4ed8;
    background: rgba(37,99,235,.12);
}

.front-body .attendance-badge.warning {
    color: #b45309;
    background: rgba(245,158,11,.16);
}

.front-body .attendance-badge.empty {
    color: #64748b;
    background: rgba(100,116,139,.12);
}

.front-body .training-empty-table {
    padding: 2rem !important;
    color: #64748b;
    font-weight: 850;
    text-align: center !important;
}

@media (max-width: 1180px) {
    .front-body .training-table-filter {
        grid-template-columns: 1fr;
    }
    .front-body .training-scope-filter {
        grid-column: 1;
    }
    .front-body .training-filter-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .front-body .training-filter-controls button {
        grid-column: span 2;
    }
    .front-body .training-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .front-body .training-filter-controls,
    .front-body .training-summary-grid {
        grid-template-columns: 1fr;
    }
    .front-body .training-filter-controls button {
        grid-column: auto;
    }
    .front-body .training-data-head {
        align-items: stretch;
        flex-direction: column;
    }
    .front-body .training-csv-button {
        width: 100%;
    }
    .front-body .training-summary-grid article {
        min-height: 108px;
        padding-right: 4.6rem;
    }
    .front-body .summary-card-icon {
        right: 1rem;
        width: 42px;
        height: 42px;
        border-radius: 15px;
    }
    .front-body .summary-card-icon svg {
        width: 22px;
        height: 22px;
    }
    .front-body .training-data-head .training-table-description b {
        margin-left: 0;
        margin-top: .35rem;
    }
}
.admin-page-tema-website { --admin-heading-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 3a9 9 0 0 0 0 18h.8a1.8 1.8 0 0 0 1.3-3.1 1.4 1.4 0 0 1 1-2.4h1.7A4.2 4.2 0 0 0 21 11.3C21 6.7 17 3 12 3ZM7.5 12.5a1.4 1.4 0 1 1 0-2.8 1.4 1.4 0 0 1 0 2.8Zm2.2-4.1a1.4 1.4 0 1 1 0-2.8 1.4 1.4 0 0 1 0 2.8Zm4.6 0a1.4 1.4 0 1 1 0-2.8 1.4 1.4 0 0 1 0 2.8Zm2.2 4.1a1.4 1.4 0 1 1 0-2.8 1.4 1.4 0 0 1 0 2.8Z'/%3E%3C/svg%3E"); }
.admin-page-ai-chat { --admin-heading-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2l1.4 4.5L18 8l-4.6 1.5L12 14 10.6 9.5 6 8l4.6-1.5L12 2Zm6 9 1 3 3 1-3 1-1 3-1-3-3-1 3-1 1-3ZM6 12l.8 2.2L9 15l-2.2.8L6 18l-.8-2.2L3 15l2.2-.8L6 12Z'/%3E%3C/svg%3E"); }
.admin-page-upload-media { --admin-heading-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 3 6.5 8.5h3.2V15h4.6V8.5h3.2L12 3ZM5 18v3h14v-3H5Z'/%3E%3C/svg%3E"); }

.admin-main {
    padding: clamp(1rem, 1.8vw, 1.55rem);
}

.admin-topbar {
    position: relative;
    overflow: hidden;
    min-height: 108px;
    padding: 1.05rem 1.25rem;
    border: 1px solid var(--admin-page-border);
    border-radius: 24px;
    background:
        radial-gradient(circle at 86% 0%, color-mix(in srgb, var(--admin-page-accent) 16%, transparent), transparent 16rem),
        linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.9));
    box-shadow: 0 22px 54px rgba(15, 23, 42, .09);
}

.admin-topbar::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, var(--admin-page-accent), color-mix(in srgb, var(--admin-page-accent) 55%, #ffffff));
}

.admin-topbar-title {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: .9rem;
    flex: 0 1 430px;
}

.admin-topbar-title > div {
    min-width: 0;
}

.admin-topbar-icon {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(135deg, var(--admin-page-accent), color-mix(in srgb, var(--admin-page-accent) 52%, #0f172a));
    box-shadow: 0 16px 30px color-mix(in srgb, var(--admin-page-accent) 28%, transparent);
}

.admin-topbar-icon svg,
.admin-card h2::before,
.admin-card-head h3::before {
    width: 23px;
    height: 23px;
}

.admin-topbar-icon svg {
    fill: currentColor;
}

.admin-topbar h1 {
    color: #07111f;
    font-size: clamp(1.65rem, 2.8vw, 2.45rem);
    line-height: 1.04;
}

.admin-topbar p {
    color: color-mix(in srgb, var(--admin-page-accent) 62%, #64748b);
    font-weight: 950;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.admin-session-panel {
    flex: 1 1 560px;
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 18px;
    background: rgba(255,255,255,.76);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 14px 30px rgba(15,23,42,.06);
}

.admin-session-panel dd span {
    color: color-mix(in srgb, var(--admin-page-accent) 72%, #9e171b);
}

.admin-topbar .ghost-button,
.admin-footer-status,
.admin-online-chip {
    border-radius: 16px;
}

.admin-body .admin-card,
.admin-body .form-card,
.admin-body .side-panel,
.admin-body .online-table-card,
.admin-body .admin-online-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, .88);
    border-radius: 22px;
    background:
        radial-gradient(circle at 94% 0%, color-mix(in srgb, var(--admin-page-accent) 9%, transparent), transparent 10rem),
        rgba(255,255,255,.94);
    box-shadow: 0 18px 46px rgba(15, 23, 42, .075);
}

.admin-body .admin-card::before,
.admin-body .form-card::before,
.admin-body .side-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--admin-page-accent), color-mix(in srgb, var(--admin-page-accent) 36%, #ffffff));
    opacity: .9;
}

.admin-card-head {
    align-items: flex-start;
}

.admin-card h2,
.admin-card-head h2,
.admin-card-head h3 {
    display: flex;
    align-items: center;
    gap: .65rem;
    color: #0f172a;
    letter-spacing: 0;
}

.admin-card h2::before,
.admin-card-head h3::before {
    content: "";
    flex: 0 0 auto;
    display: inline-block;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, var(--admin-page-accent), color-mix(in srgb, var(--admin-page-accent) 58%, #0f172a));
    filter: drop-shadow(0 8px 14px color-mix(in srgb, var(--admin-page-accent) 22%, transparent));
    -webkit-mask: var(--admin-heading-icon) center / 24px 24px no-repeat;
    mask: var(--admin-heading-icon) center / 24px 24px no-repeat;
}

.admin-card-head > span,
.admin-card-head.compact span,
.admin-body .admin-form small,
.admin-body .muted {
    color: #64748b;
}

.admin-card-head > span,
.admin-card-head.compact span {
    padding: .42rem .68rem;
    border: 1px solid var(--admin-page-border);
    border-radius: 999px;
    background: var(--admin-page-soft);
    color: color-mix(in srgb, var(--admin-page-accent) 72%, #334155);
    font-size: .76rem;
    font-weight: 950;
}

.admin-body .primary-button,
.admin-body .secondary-button,
.admin-body .ghost-button,
.admin-body .mini-admin-link,
.admin-body .table-link,
.admin-body .document-link,
.admin-body .action-cell a,
.admin-body .action-cell button {
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}

.admin-body .primary-button {
    border: 0;
    background: linear-gradient(135deg, var(--admin-page-accent), color-mix(in srgb, var(--admin-page-accent) 58%, #0f172a));
    color: #fff;
    box-shadow: 0 14px 30px color-mix(in srgb, var(--admin-page-accent) 24%, transparent);
}

.admin-body .primary-button:hover,
.admin-body .ghost-button:hover,
.admin-body .mini-admin-link:hover,
.admin-body .table-link:hover,
.admin-body .document-link:hover,
.admin-body .action-cell a:hover,
.admin-body .action-cell button:hover {
    transform: translateY(-2px);
}

.admin-body .ghost-button,
.admin-body .mini-admin-link,
.admin-body .table-link,
.admin-body .document-link,
.admin-body .action-cell a,
.admin-body .action-cell button {
    border-color: rgba(148, 163, 184, .32);
    background: rgba(255,255,255,.88);
    color: #0f172a;
}

.admin-body .ghost-button:hover,
.admin-body .mini-admin-link:hover,
.admin-body .table-link:hover,
.admin-body .document-link:hover,
.admin-body .action-cell a:hover {
    border-color: color-mix(in srgb, var(--admin-page-accent) 38%, rgba(148, 163, 184, .32));
    color: color-mix(in srgb, var(--admin-page-accent) 78%, #0f172a);
    box-shadow: 0 12px 24px color-mix(in srgb, var(--admin-page-accent) 12%, transparent);
}

.admin-body .action-cell button:hover {
    border-color: rgba(239, 68, 68, .34);
    color: #b91c1c;
    box-shadow: 0 12px 24px rgba(239, 68, 68, .1);
}

.admin-body .admin-form {
    gap: .72rem;
}

.admin-body .admin-form label {
    color: #334155;
    font-size: .82rem;
    font-weight: 950;
}

.admin-body .admin-form input,
.admin-body .admin-form textarea,
.admin-body .admin-form select {
    min-height: 44px;
    border: 1px solid rgba(148, 163, 184, .34);
    border-radius: 14px;
    background: rgba(255,255,255,.9);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.admin-body .admin-form input:focus,
.admin-body .admin-form textarea:focus,
.admin-body .admin-form select:focus {
    border-color: color-mix(in srgb, var(--admin-page-accent) 52%, #94a3b8);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--admin-page-accent) 14%, transparent);
    outline: none;
}

.admin-body .check-line {
    padding: .72rem .8rem;
    border: 1px solid rgba(148, 163, 184, .25);
    border-radius: 14px;
    background: rgba(248, 250, 252, .82);
}

.admin-body .table-wrap,
.admin-body .online-table-wrap {
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: 18px;
    background: rgba(255,255,255,.86);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}

.admin-body table {
    border-collapse: separate;
    border-spacing: 0;
}

.admin-body th {
    background: linear-gradient(180deg, rgba(248,250,252,.96), rgba(241,245,249,.96));
    color: #475569;
    font-weight: 950;
}

.admin-body th:first-child {
    border-top-left-radius: 16px;
}

.admin-body th:last-child {
    border-top-right-radius: 16px;
}

.admin-body tbody tr {
    transition: background .18s ease, box-shadow .18s ease;
}

.admin-body tbody tr:hover {
    background: color-mix(in srgb, var(--admin-page-accent) 7%, #ffffff);
}

.admin-body td {
    color: #1e293b;
}

.admin-body td small,
.admin-body table small {
    margin-top: .18rem;
    color: #64748b;
}

.admin-body .status {
    gap: .32rem;
    border: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.62);
}

.admin-body .status::before {
    content: "";
    width: .45rem;
    height: .45rem;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 13%, transparent);
}

.admin-body .status.success {
    border-color: rgba(22, 163, 74, .18);
}

.admin-body .status.warning {
    border-color: rgba(245, 158, 11, .24);
}

.admin-body .status.danger {
    border-color: rgba(239, 68, 68, .24);
}

.admin-body .notice-row,
.admin-body .dashboard-feed-item,
.admin-body .media-grid a {
    border-radius: 16px;
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.admin-body .notice-row {
    padding-inline: .75rem;
}

.admin-body .notice-row:hover,
.admin-body .dashboard-feed-item:hover,
.admin-body .media-grid a:hover {
    transform: translateY(-2px);
    background: color-mix(in srgb, var(--admin-page-accent) 7%, #ffffff);
    box-shadow: 0 14px 28px rgba(15, 23, 42, .07);
}

.admin-body .media-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.admin-body .media-grid a {
    padding: .65rem;
    border: 1px solid rgba(226,232,240,.88);
    background: rgba(255,255,255,.8);
}

.admin-body .media-grid img,
.admin-body .table-logo,
.admin-body .chapter-logo-preview {
    border-color: rgba(148, 163, 184, .24);
    box-shadow: 0 10px 22px rgba(15, 23, 42, .06);
}

.admin-footer-status {
    margin-top: 1.2rem;
    border: 1px solid rgba(226,232,240,.82);
    background: rgba(255,255,255,.78);
    box-shadow: 0 14px 34px rgba(15,23,42,.06);
}

@media (max-width: 1180px) {
    .admin-topbar {
        align-items: stretch;
    }

    .admin-topbar-title {
        width: 100%;
        flex-basis: 100%;
    }

    .admin-session-panel {
        flex-basis: 100%;
    }
}

@media (min-width: 1280px) {
    .admin-topbar h1 {
        font-size: clamp(1.55rem, 1.75vw, 1.95rem);
        white-space: normal;
    }
}

@media (max-width: 860px) {
    .admin-topbar-title {
        align-items: flex-start;
    }

    .admin-topbar-icon {
        width: 46px;
        height: 46px;
        border-radius: 16px;
    }

    .admin-card h2,
    .admin-card-head h2,
    .admin-card-head h3 {
        font-size: 1rem;
    }

    .admin-body .admin-card,
    .admin-body .form-card,
    .admin-body .side-panel {
        border-radius: 18px;
    }
}

@media (max-width: 640px) {
    .admin-main {
        padding: .82rem;
    }

    .admin-topbar {
        border-radius: 18px;
        padding: .9rem;
    }

    .admin-topbar-title {
        gap: .7rem;
    }

    .admin-card-head {
        gap: .65rem;
    }

    .admin-card h2::before,
    .admin-card-head h3::before {
        width: 24px;
        height: 24px;
        -webkit-mask-size: 21px 21px;
        mask-size: 21px 21px;
    }

    .admin-body .action-cell {
        flex-wrap: wrap;
    }
}

/* Polished footer treatment for front end and back panel */
.front-body .site-footer.footer-with-photo {
    position: relative;
    display: grid;
    gap: 1.05rem;
    margin-top: clamp(2rem, 5vw, 4rem);
    padding: clamp(1.25rem, 2.6vw, 2rem);
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, .14);
    background:
        radial-gradient(circle at 8% 12%, rgba(20, 184, 166, .22), transparent 30%),
        linear-gradient(135deg, #07111f 0%, #111827 58%, #0b1220 100%);
    color: #e5edf7;
    box-shadow: 0 -18px 42px rgba(15, 23, 42, .12);
}

.front-body .site-footer.footer-with-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255,255,255,.08), transparent 34%, rgba(255,255,255,.04));
}

.front-body .footer-main,
.front-body .footer-bottom-note {
    position: relative;
    z-index: 1;
}

.front-body .footer-main {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(260px, auto);
    gap: 1rem;
    align-items: center;
}

.front-body .footer-brand-block {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: .75rem .9rem;
    align-items: center;
    min-width: 0;
}

.front-body .footer-brand-block img {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    padding: .36rem;
    background: rgba(255,255,255,.94);
    box-shadow: 0 16px 34px rgba(0,0,0,.24);
}

.front-body .footer-brand-copy {
    display: grid;
    gap: .18rem;
    min-width: 0;
}

.front-body .footer-brand-block p {
    margin: 0;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 950;
    letter-spacing: .02em;
}

.front-body .footer-brand-block small {
    color: rgba(226, 232, 240, .82);
    font-size: .82rem;
    line-height: 1.45;
}

.front-body .footer-socials {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    gap: .42rem;
    margin-top: .08rem;
}

.front-body .footer-social-link {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.08);
    color: #f8fafc;
    box-shadow: none;
    transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.front-body .footer-social-link:hover {
    transform: translateY(-2px);
    border-color: rgba(255,255,255,.34);
    background: rgba(255,255,255,.14);
    box-shadow: 0 12px 24px rgba(0,0,0,.18);
}

.front-body .footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem;
}

.front-body .footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: .55rem .8rem;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: #f8fafc;
    font-size: .82rem;
    font-weight: 850;
    text-decoration: none;
    transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.front-body .footer-links a:hover {
    transform: translateY(-2px);
    border-color: rgba(45, 212, 191, .5);
    background: rgba(20, 184, 166, .16);
    box-shadow: 0 14px 28px rgba(20, 184, 166, .14);
}

.front-body .footer-bottom-note {
    display: grid;
    grid-template-columns: minmax(220px, .9fr) minmax(320px, 1.3fr) auto;
    gap: 1rem;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,.13);
}

.front-body .footer-org-lines,
.front-body .footer-credit-lines {
    display: grid;
    gap: .28rem;
}

.front-body .footer-org-lines strong,
.front-body .footer-credit-lines span:first-child {
    color: #ffffff;
    font-size: .88rem;
    font-weight: 900;
}

.front-body .footer-org-lines span,
.front-body .footer-credit-lines {
    color: rgba(226, 232, 240, .78);
    font-size: .78rem;
    line-height: 1.45;
}

.front-body .browser-recommendation,
.admin-body .browser-recommendation {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    max-width: 100%;
    margin: 0;
    padding: .32rem .55rem;
    border-radius: 999px;
    font-size: .74rem;
    line-height: 1.35;
    font-weight: 760;
    text-wrap: balance;
    white-space: normal;
}

.front-body .browser-recommendation {
    width: fit-content;
    border: 1px solid rgba(251, 191, 36, .28);
    background: rgba(251, 191, 36, .12);
    color: #fde68a;
}

.front-body .footer-online-info {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: .48rem;
    min-height: 38px;
    padding: .52rem .72rem;
    border: 1px solid rgba(34, 197, 94, .28);
    border-radius: 999px;
    background: rgba(22, 163, 74, .12);
    color: #bbf7d0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.front-body .footer-online-info strong {
    font-size: .78rem;
    font-weight: 900;
}

.admin-body .admin-footer-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.25rem;
    padding: .95rem 1rem;
    border: 1px solid rgba(203, 213, 225, .72);
    border-radius: 20px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,250,252,.9)),
        radial-gradient(circle at 5% 0%, color-mix(in srgb, var(--admin-page-accent) 14%, transparent), transparent 34%);
    box-shadow: 0 18px 38px rgba(15, 23, 42, .07);
}

.admin-body .admin-footer-copy {
    display: grid;
    gap: .18rem;
    min-width: 0;
}

.admin-body .admin-footer-copy strong {
    color: #0f172a;
    font-size: .86rem;
    font-weight: 950;
    letter-spacing: .03em;
}

.admin-body .admin-footer-copy span,
.admin-body .admin-footer-copy small {
    color: #64748b;
    font-size: .76rem;
    line-height: 1.35;
}

.admin-body .admin-footer-copy .browser-recommendation {
    width: fit-content;
    margin-top: .22rem;
    border: 1px solid rgba(14, 165, 233, .18);
    background: rgba(14, 165, 233, .08);
    color: #0369a1;
}

.admin-body .admin-online-chip {
    flex: 0 0 auto;
    min-height: 40px;
    border-color: rgba(34, 197, 94, .28);
    background: rgba(240, 253, 244, .9);
    color: #166534;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.84);
}

.admin-body .admin-online-chip:not(.disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(22, 163, 74, .12);
}

@media (max-width: 980px) {
    .front-body .footer-main,
    .front-body .footer-bottom-note {
        grid-template-columns: 1fr;
    }

    .front-body .footer-links {
        justify-content: flex-start;
    }

    .front-body .footer-online-info {
        justify-self: start;
    }

    .admin-body .admin-footer-status {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 640px) {
    .front-body .site-footer.footer-with-photo {
        border-radius: 0;
        padding: 1.15rem;
    }

    .front-body .footer-brand-block {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .front-body .footer-brand-block img {
        width: 48px;
        height: 48px;
        border-radius: 15px;
    }

    .front-body .footer-socials {
        grid-column: 1 / -1;
    }

    .front-body .footer-links a {
        flex: 1 1 calc(50% - .5rem);
        justify-content: center;
        min-width: 138px;
    }

    .front-body .browser-recommendation,
    .admin-body .browser-recommendation {
        border-radius: 14px;
    }

    .admin-body .admin-footer-status {
        border-radius: 18px;
        padding: .85rem;
    }
}

/* Front footer spacing refinement - 20260607 */
.front-body .site-footer.footer-with-photo {
    gap: clamp(1rem, 2vw, 1.35rem);
    padding: clamp(1.25rem, 2.2vw, 1.75rem) clamp(1.1rem, 3vw, 2.1rem);
}

.front-body .site-footer.footer-with-photo .footer-main {
    grid-template-columns: minmax(300px, .92fr) minmax(320px, 1.08fr);
    gap: clamp(1.25rem, 3vw, 2.4rem);
    align-items: center;
}

.front-body .site-footer.footer-with-photo .footer-brand-block {
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-areas:
        "logo copy"
        "logo socials";
    gap: .58rem 1rem;
    align-items: center;
}

.front-body .site-footer.footer-with-photo .footer-brand-block > img {
    grid-area: logo;
    width: 64px;
    height: 64px;
    border-radius: 20px;
    align-self: start;
}

.front-body .site-footer.footer-with-photo .footer-brand-copy {
    grid-area: copy;
    display: flex;
    flex-direction: column;
    gap: .32rem;
    justify-content: center;
    min-width: 0;
}

.front-body .site-footer.footer-with-photo .footer-brand-block p {
    margin: 0;
    font-size: clamp(1rem, 1.05vw, 1.12rem);
    line-height: 1.12;
    letter-spacing: .035em;
    white-space: normal;
}

.front-body .site-footer.footer-with-photo .footer-brand-block small {
    display: block;
    max-width: 420px;
    font-size: .82rem;
    line-height: 1.55;
}

.front-body .site-footer.footer-with-photo .footer-socials {
    grid-area: socials;
    grid-column: auto;
    gap: .46rem;
    margin-top: .08rem;
}

.front-body .site-footer.footer-with-photo .footer-social-link {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 13px;
}

.front-body .site-footer.footer-with-photo .footer-social-link svg {
    width: 17px;
    height: 17px;
}

.front-body .site-footer.footer-with-photo .footer-links {
    justify-content: flex-end;
    align-content: center;
    gap: .62rem;
}

.front-body .site-footer.footer-with-photo .footer-links a {
    justify-content: center;
    min-width: 136px;
    min-height: 42px;
    padding: .62rem .95rem;
    border-radius: 14px;
    font-size: .8rem;
    line-height: 1.2;
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.front-body .site-footer.footer-with-photo .footer-bottom-note {
    grid-template-columns: minmax(230px, .9fr) minmax(300px, 1.25fr) auto;
    gap: .9rem 1.2rem;
    align-items: center;
    padding-top: clamp(.9rem, 1.8vw, 1.15rem);
}

.front-body .site-footer.footer-with-photo .footer-org-lines,
.front-body .site-footer.footer-with-photo .footer-credit-lines {
    gap: .34rem;
    min-width: 0;
}

.front-body .site-footer.footer-with-photo .footer-credit-lines {
    justify-items: center;
    text-align: center;
}

.front-body .site-footer.footer-with-photo .browser-recommendation {
    justify-content: center;
    max-width: min(100%, 620px);
}

@media (max-width: 1080px) {
    .front-body .site-footer.footer-with-photo .footer-main {
        grid-template-columns: 1fr;
        gap: 1.15rem;
    }

    .front-body .site-footer.footer-with-photo .footer-links {
        justify-content: flex-start;
    }

    .front-body .site-footer.footer-with-photo .footer-links a {
        flex: 1 1 calc(25% - .62rem);
        min-width: 142px;
    }

    .front-body .site-footer.footer-with-photo .footer-bottom-note {
        grid-template-columns: minmax(220px, 1fr) minmax(300px, 1.4fr);
    }

    .front-body .site-footer.footer-with-photo .footer-online-info {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

@media (max-width: 720px) {
    .front-body .site-footer.footer-with-photo .footer-brand-block {
        grid-template-columns: 56px minmax(0, 1fr);
        grid-template-areas:
            "logo copy"
            "socials socials";
        gap: .75rem .9rem;
    }

    .front-body .site-footer.footer-with-photo .footer-brand-block > img {
        width: 56px;
        height: 56px;
        border-radius: 18px;
    }

    .front-body .site-footer.footer-with-photo .footer-socials {
        justify-content: flex-start;
    }

    .front-body .site-footer.footer-with-photo .footer-links {
        gap: .5rem;
    }

    .front-body .site-footer.footer-with-photo .footer-links a {
        flex: 1 1 calc(50% - .5rem);
        min-width: 0;
        min-height: 40px;
        padding: .58rem .72rem;
    }

    .front-body .site-footer.footer-with-photo .footer-bottom-note {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .front-body .site-footer.footer-with-photo .footer-credit-lines {
        justify-items: start;
        text-align: left;
    }
}

@media (max-width: 430px) {
    .front-body .site-footer.footer-with-photo .footer-brand-block {
        grid-template-columns: 1fr;
        grid-template-areas:
            "logo"
            "copy"
            "socials";
    }

    .front-body .site-footer.footer-with-photo .footer-brand-block > img {
        align-self: auto;
    }

    .front-body .site-footer.footer-with-photo .footer-links a {
        flex-basis: 100%;
    }
}

/* Front footer link alignment hardening - 20260607 */
.front-body .site-footer.footer-with-photo .footer-main {
    grid-template-columns: minmax(340px, .9fr) minmax(620px, 1.1fr) !important;
}

.front-body .site-footer.footer-with-photo .footer-links {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(132px, 1fr));
    width: min(100%, 720px);
    max-width: 720px !important;
    justify-self: end !important;
    justify-content: stretch !important;
    align-self: center !important;
    gap: .62rem !important;
    padding: .7rem !important;
}

.front-body .site-footer.footer-with-photo .footer-links a {
    width: 100%;
    min-width: 0 !important;
    white-space: normal;
}

@media (max-width: 1180px) {
    .front-body .site-footer.footer-with-photo .footer-main {
        grid-template-columns: 1fr !important;
    }

    .front-body .site-footer.footer-with-photo .footer-links {
        justify-self: stretch !important;
        width: 100%;
        max-width: none !important;
    }
}

@media (max-width: 780px) {
    .front-body .site-footer.footer-with-photo .footer-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 430px) {
    .front-body .site-footer.footer-with-photo .footer-links {
        grid-template-columns: 1fr;
    }
}

/* === ASAD BELADIRI - Tabel: redesign premium (UI only) === */
.training-table-section .training-data-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 36px rgba(9, 13, 18, .08); overflow: hidden; }
.training-table-section .training-table-wrap { overflow-x: auto; }
.training-table-section .training-report-table { width: 100%; min-width: 1080px; border-collapse: separate; border-spacing: 0; font-size: .9rem; }

/* Header tabel berwarna per grup: terang, kontras, tetap compact */
.training-table-section .training-report-table thead th {
    --th-from: #33527c;
    --th-to: #27415f;
    --th-line: rgba(255, 255, 255, .2);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 36%),
        linear-gradient(135deg, var(--th-from), var(--th-to));
    color: #ffffff;
    text-align: center;
    vertical-align: middle;
    padding: .76rem .68rem;
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .055em;
    line-height: 1.18;
    text-transform: uppercase;
    text-shadow: 0 1px 1px rgba(15, 23, 42, .22);
    border-bottom: 2px solid rgba(255, 255, 255, .3);
    border-right: 1px solid var(--th-line);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(15,23,42,.16);
}
.training-table-section .training-report-table thead th:last-child { border-right: 0; }
.training-table-section .training-report-table thead tr:first-child th:first-child { text-align: left; }
.training-table-section .training-report-table thead tr:last-child th { border-bottom: 3px solid rgba(255, 255, 255, .36); }
.training-table-section .training-report-table thead tr + tr th { font-size: .68rem; font-weight: 850; }
.training-table-section .training-report-table thead th.th-sub {
    background:
        linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0) 45%),
        linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,0)),
        linear-gradient(135deg, var(--th-from), var(--th-to));
}
.training-table-section .training-report-table thead th.th-general { --th-from: #33527c; --th-to: #27415f; }
.training-table-section .training-report-table thead th.th-participant-male { --th-from: #44749f; --th-to: #38618a; }
.training-table-section .training-report-table thead th.th-participant-female { --th-from: #8262b1; --th-to: #6e519c; }
.training-table-section .training-report-table thead th.th-trainer-male { --th-from: #2f8f88; --th-to: #277a74; }
.training-table-section .training-report-table thead th.th-trainer-female { --th-from: #6b8a52; --th-to: #596f44; }
.training-table-section .training-report-table thead th.th-attendance { --th-from: #1799b4; --th-to: #0f708a; }
.front-body .training-table-section .training-report-table thead th {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 36%),
        linear-gradient(135deg, var(--th-from), var(--th-to));
    color: #ffffff;
}
.front-body .training-table-section .training-report-table thead tr:first-child th {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 36%),
        linear-gradient(135deg, var(--th-from), var(--th-to));
    color: #ffffff;
}
.front-body .training-table-section .training-report-table thead th.th-sub {
    background:
        linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0) 45%),
        linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,0)),
        linear-gradient(135deg, var(--th-from), var(--th-to));
    color: #ffffff;
}
.front-body .training-table-section .training-report-table thead tr + tr th {
    background:
        linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0) 45%),
        linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,0)),
        linear-gradient(135deg, var(--th-from), var(--th-to));
    color: #ffffff;
}
.front-body .training-table-section .training-report-table thead th:first-child {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 36%),
        linear-gradient(135deg, var(--th-from), var(--th-to));
}
.training-table-section .training-report-table thead th button { background: none; border: 0; padding: 0; width: 100%; color: inherit; font: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: inherit; text-align: inherit; transition: color .15s ease; }
.training-table-section .training-report-table thead th button:hover { color: #fff7c2; }

/* Sel data: padding rapi, angka rata tengah dengan digit sejajar */
.training-table-section .training-report-table tbody td { padding: .7rem .75rem; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; white-space: nowrap; color: var(--charcoal); font-variant-numeric: tabular-nums; }
.training-table-section .training-report-table tbody td:first-child { text-align: left; white-space: normal; min-width: 200px; max-width: 280px; overflow-wrap: break-word; }
.training-table-section .training-report-table tbody td:first-child strong { display: block; font-size: .94rem; line-height: 1.3; color: var(--ink); }
.training-table-section .training-report-table tbody td small { display: block; margin-top: .2rem; font-size: .72rem; line-height: 1.25; color: var(--muted); }

/* Zebra row + hover effect */
.training-table-section .training-report-table tbody td { background: #ffffff; transition: background .15s ease; }
.training-table-section .training-report-table tbody tr:nth-child(even) td { background: #f5f8f3; }
.training-table-section .training-report-table tbody tr:hover td { background: #edf3ea; }
.training-table-section .training-report-table tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
.training-table-section .training-report-table tbody tr:last-child td { border-bottom: 0; }

/* Badge persen: warna konsisten tema (moss/biru/oranye/abu) */
.training-table-section .attendance-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 78px; padding: .3rem .6rem; border-radius: 999px; font-weight: 800; font-size: .8rem; line-height: 1; }
.training-table-section .attendance-badge.excellent { background: rgba(73, 99, 58, .14); color: #3c5430; border: 1px solid rgba(73, 99, 58, .35); }
.training-table-section .attendance-badge.good { background: rgba(31, 95, 153, .12); color: #1f5f99; border: 1px solid rgba(31, 95, 153, .3); }
.training-table-section .attendance-badge.warning { background: rgba(242, 138, 46, .16); color: #a85a0f; border: 1px solid rgba(242, 138, 46, .4); }
.training-table-section .attendance-badge.empty { background: rgba(104, 115, 131, .12); color: var(--muted); border: 1px solid rgba(104, 115, 131, .3); }
.training-table-section .training-report-table tbody td .attendance-badge + small { margin-top: .3rem; }
.training-table-section .training-empty-table { text-align: center; padding: 2.2rem 1rem; color: var(--muted); font-size: .95rem; }

/* Resolusi 1366x768: font & padding lebih ringkas agar tetap rapi */
@media (max-width: 1440px) {
    .training-table-section .training-report-table { font-size: .86rem; min-width: 1020px; }
    .training-table-section .training-report-table thead th { padding: .7rem .55rem; font-size: .72rem; }
    .training-table-section .training-report-table tbody td { padding: .62rem .55rem; }
    .training-table-section .training-report-table tbody td:first-child { min-width: 180px; }
    .training-table-section .attendance-badge { min-width: 70px; font-size: .76rem; }
}

/* Back panel footer reference layout - 20260607 */
.admin-body .admin-footer-status {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.25rem;
    align-items: start;
    margin-top: 1.35rem;
    padding: 1.2rem 1.25rem 1.45rem;
    overflow: hidden;
    border: 1px solid rgba(203, 213, 225, .86);
    border-radius: 22px;
    background:
        radial-gradient(circle at 7% 100%, rgba(56, 189, 248, .12), transparent 17%),
        radial-gradient(circle at 46% 100%, rgba(56, 189, 248, .08), transparent 14%),
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,250,252,.9));
    box-shadow: 0 18px 44px rgba(15, 23, 42, .07);
}

.admin-body .admin-footer-copy {
    display: grid;
    gap: .48rem;
    min-width: 0;
}

.admin-body .admin-footer-copy strong {
    color: #020617;
    font-size: 1rem;
    font-weight: 950;
    letter-spacing: .045em;
    line-height: 1.15;
}

.admin-body .admin-footer-copy > span:not(.browser-recommendation) {
    color: #475569;
    font-size: .86rem;
    font-weight: 500;
    line-height: 1.35;
}

.admin-body .admin-footer-copy .browser-recommendation {
    width: fit-content;
    max-width: min(100%, 860px);
    margin-top: .12rem;
    padding: .32rem .62rem .34rem;
    border: 1px solid rgba(56, 189, 248, .28);
    border-radius: 999px;
    background: rgba(224, 242, 254, .74);
    color: #0369a1;
    font-size: .84rem;
    font-weight: 850;
    line-height: 1.25;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}

.admin-body .admin-footer-copy .browser-recommendation::before {
    width: .46rem;
    height: .46rem;
    background: #38bdf8;
    box-shadow: 0 0 0 5px rgba(56, 189, 248, .16);
}

.admin-body .admin-footer-side {
    display: grid;
    justify-items: center;
    gap: .48rem;
    min-width: 210px;
}

.admin-body .admin-online-chip {
    min-width: 192px;
    min-height: 56px;
    padding: .7rem 1.25rem;
    border: 1px solid rgba(34, 197, 94, .22);
    border-radius: 20px;
    background: rgba(240, 253, 244, .78);
    color: #166534;
    box-shadow: none;
}

.admin-body .admin-online-chip strong {
    font-size: .9rem;
    font-weight: 900;
}

/* Compact executive header for Back Panel / User Online */
.admin-online-page .admin-online-hero {
    min-height: 0;
    gap: 1rem;
    padding: 1.15rem 1.35rem;
    border-radius: 18px;
    align-items: center;
}

.admin-online-page .admin-online-hero::before {
    height: 3px;
}

.admin-online-page .admin-online-hero > div {
    min-width: 0;
}

.admin-online-page .admin-section-eyebrow {
    margin-bottom: .35rem;
    color: #475569;
    font-size: .78rem;
    font-weight: 950;
    letter-spacing: .22em;
}

.admin-online-page .admin-online-hero h2 {
    font-size: clamp(1.72rem, 2.1vw, 2.45rem);
    line-height: 1.02;
    letter-spacing: 0;
}

.admin-online-page .admin-online-hero p {
    max-width: 820px;
    margin-top: .55rem;
    color: #475569;
    font-size: .95rem;
    line-height: 1.45;
}

.admin-online-page .admin-online-pill {
    flex: 0 0 auto;
    gap: .5rem;
    padding: .58rem .88rem;
    border: 1px solid rgba(34, 197, 94, .18);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(236,253,245,.92), rgba(240,253,250,.74));
    color: #047857;
    font-size: .9rem;
    line-height: 1;
    box-shadow: 0 12px 24px rgba(34,197,94,.08);
}

@media (max-width: 900px) {
    .admin-online-page .admin-online-hero {
        align-items: flex-start;
        flex-direction: column;
        padding: 1rem;
    }

    .admin-online-page .admin-online-pill {
        align-self: flex-start;
    }
}

/* Compact global Back Panel topbar */
.admin-body .admin-main {
    padding-top: clamp(.72rem, 1.15vw, 1rem);
}

.admin-body .admin-topbar {
    min-height: 74px;
    grid-template-columns: minmax(210px, .78fr) minmax(420px, 1.35fr) auto;
    gap: .82rem;
    margin-bottom: .9rem;
    padding: .72rem .95rem;
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(15,23,42,.07);
}

.admin-body .admin-topbar::before {
    width: 4px;
}

.admin-body .admin-topbar-title {
    gap: .62rem;
    flex-basis: 330px;
}

.admin-body .admin-topbar-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--admin-page-accent) 23%, transparent);
}

.admin-body .admin-topbar-icon svg {
    width: 19px;
    height: 19px;
}

.admin-body .admin-topbar p {
    margin-bottom: .08rem;
    font-size: .7rem;
    letter-spacing: .12em;
    line-height: 1;
}

.admin-body .admin-topbar h1 {
    font-size: clamp(1.32rem, 1.75vw, 1.72rem);
    line-height: 1.04;
    letter-spacing: 0;
}

.admin-body .admin-session-panel {
    min-width: min(430px, 44vw);
    grid-template-columns: auto minmax(0, 1fr);
    gap: .58rem;
    padding: .48rem .62rem;
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 8px 18px rgba(15,23,42,.045);
}

.admin-body .admin-session-photo {
    width: 42px;
    height: 42px;
    border-width: 2px;
}

.admin-body .admin-session-panel dl {
    gap: .46rem;
}

.admin-body .admin-session-panel dt {
    margin-bottom: .12rem;
    font-size: .58rem;
    letter-spacing: .07em;
    line-height: 1.05;
}

.admin-body .admin-session-panel dd {
    font-size: .72rem;
    line-height: 1.16;
}

.admin-body .admin-session-panel dd span {
    margin-left: .18rem;
    font-size: .64rem;
}

.admin-body .admin-topbar .ghost-button {
    min-height: 42px;
    padding: .55rem .82rem;
    border-radius: 12px;
    font-size: .82rem;
    box-shadow: 0 10px 22px rgba(15,23,42,.055);
}

@media (max-width: 1180px) {
    .admin-body .admin-topbar {
        grid-template-columns: 1fr;
        gap: .65rem;
        padding: .72rem;
    }

    .admin-body .admin-session-panel {
        min-width: 0;
    }
}

@media (max-width: 720px) {
    .admin-body .admin-topbar {
        border-radius: 16px;
    }

    .admin-body .admin-session-panel {
        align-items: flex-start;
        grid-template-columns: 1fr;
    }

    .admin-body .admin-session-photo {
        display: none;
    }

    .admin-body .admin-session-panel dl {
        grid-template-columns: 1fr;
    }
}

.admin-body .admin-footer-copyright {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .12rem .5rem;
    border-radius: 3px;
    background: rgba(255,255,255,.52);
    color: #64748b;
    font-size: .82rem;
    font-weight: 500;
    line-height: 1.3;
}

@media (max-width: 900px) {
    .admin-body .admin-footer-status {
        grid-template-columns: 1fr;
    }

    .admin-body .admin-footer-side {
        justify-items: start;
        min-width: 0;
    }
}

@media (max-width: 560px) {
    .admin-body .admin-footer-status {
        padding: 1rem;
        border-radius: 18px;
    }

    .admin-body .admin-footer-copy .browser-recommendation {
        border-radius: 14px;
        font-size: .78rem;
    }

    .admin-body .admin-online-chip {
        width: 100%;
        min-width: 0;
    }
}

/* Front achievement top level bar chart - 20260607 */
.front-body .achievement-rank-card {
    min-width: 0;
}

.front-body .achievement-bar-report {
    display: grid;
    min-height: 260px;
}

.front-body .achievement-bar-chart-shell {
    display: grid;
    gap: .72rem;
    min-width: 0;
    padding: .9rem;
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: 18px;
    background:
        linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(148, 163, 184, .16) calc(25% - 1px) 25%, transparent 25% calc(50% - 1px), rgba(148, 163, 184, .16) calc(50% - 1px) 50%, transparent 50% calc(75% - 1px), rgba(148, 163, 184, .16) calc(75% - 1px) 75%, transparent 75%),
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,250,252,.76));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 18px 42px rgba(23,36,63,.07);
}

.front-body .achievement-bar-row {
    display: grid;
    grid-template-columns: minmax(96px, .9fr) minmax(70px, 1.12fr) 2rem 2.65rem;
    gap: .42rem;
    align-items: center;
    min-width: 0;
    padding: .62rem .7rem;
    border: 1px solid color-mix(in srgb, var(--achievement-color) 24%, #e2e8f0);
    border-left: 5px solid var(--achievement-color);
    border-radius: 15px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--achievement-color) 10%, #ffffff), rgba(255,255,255,.88));
    box-shadow: 0 10px 24px rgba(23,36,63,.055);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.front-body .achievement-bar-row:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--achievement-color) 44%, #e2e8f0);
    box-shadow: 0 16px 30px color-mix(in srgb, var(--achievement-color) 13%, transparent), 0 10px 24px rgba(23,36,63,.08);
}

.front-body .achievement-bar-label {
    display: grid;
    gap: .12rem;
    min-width: 0;
}

.front-body .achievement-bar-label span {
    color: #17243f;
    font-size: .85rem;
    font-weight: 950;
    line-height: 1.15;
    white-space: normal;
}

.front-body .achievement-bar-label small {
    color: #64748b;
    font-size: .68rem;
    font-weight: 800;
    line-height: 1.15;
}

.front-body .achievement-bar-track {
    position: relative;
    height: 18px;
    min-width: 0;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(15, 23, 42, .08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

.front-body .achievement-bar-track i {
    display: block;
    width: var(--rank-width);
    min-width: 24px;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, color-mix(in srgb, var(--achievement-color) 84%, #ffffff), var(--achievement-color));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.52), 0 10px 24px color-mix(in srgb, var(--achievement-color) 24%, transparent);
}

.front-body .achievement-bar-row strong,
.front-body .achievement-bar-row em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 1.7rem;
    padding: .18rem .42rem;
    border-radius: 999px;
    background: rgba(255,255,255,.86);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--achievement-color) 16%, transparent), 0 8px 16px rgba(23,36,63,.06);
    color: #17243f;
    font-size: .78rem;
    font-style: normal;
    font-weight: 950;
    white-space: nowrap;
}

.front-body .achievement-bar-row em {
    color: color-mix(in srgb, var(--achievement-color) 78%, #17243f);
    font-size: .68rem;
}

.front-body .achievement-bar-axis {
    display: grid;
    grid-template-columns: minmax(94px, .76fr) repeat(5, 1fr);
    gap: .62rem;
    align-items: center;
    padding: 0 .7rem;
    color: #64748b;
    font-size: .68rem;
    font-weight: 850;
}

.front-body .achievement-bar-axis span:first-child {
    grid-column: 2;
}

@media (max-width: 1120px) {
    .front-body .achievement-bar-row {
        grid-template-columns: minmax(100px, .82fr) minmax(120px, 1.2fr) auto;
    }

    .front-body .achievement-bar-row em {
        grid-column: 2 / -1;
        justify-self: start;
    }

    .front-body .achievement-bar-axis {
        display: none;
    }
}

@media (max-width: 720px) {
    .front-body .achievement-bar-chart-shell {
        padding: .75rem;
    }

    .front-body .achievement-bar-row {
        grid-template-columns: 1fr auto;
        gap: .52rem;
    }

    .front-body .achievement-bar-track {
        grid-column: 1 / -1;
        order: 3;
    }

    .front-body .achievement-bar-row em {
        grid-column: auto;
        justify-self: end;
    }
}

/* Front achievement top level line chart - 20260709 */
.front-body .achievement-line-report {
    position: relative;
    display: grid;
    gap: .56rem;
    min-height: 260px;
    padding: .88rem .8rem .72rem;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, .26);
    border-radius: 22px;
    background:
        radial-gradient(circle at 12% 18%, rgba(14, 165, 233, .12), transparent 38%),
        radial-gradient(circle at 88% 16%, rgba(34, 197, 94, .12), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,250,252,.76));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.84),
        0 18px 44px rgba(23,36,63,.08);
}

.front-body .achievement-line-report::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(90deg, rgba(51,82,124,.045) 0 1px, transparent 1px 74px),
        linear-gradient(180deg, rgba(255,255,255,.42), transparent 48%);
}

.front-body .achievement-line-canvas-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 230px;
    min-height: 230px;
    min-width: 0;
}

.front-body .achievement-line-canvas-wrap canvas {
    display: block;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 12px 20px rgba(15,159,143,.10));
}

.front-body .achievement-line-canvas-wrap .achievement-chart-error {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 1rem;
    text-align: center;
}

.front-body .achievement-line-canvas-wrap .achievement-chart-error[hidden] {
    display: none;
}

.front-body .achievement-line-foot {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    color: #64748b;
    font-size: .72rem;
    font-weight: 900;
}

.front-body .achievement-line-foot span {
    display: inline-flex;
    align-items: center;
    min-height: 1.55rem;
    padding: .22rem .58rem;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 999px;
    background: rgba(255,255,255,.72);
}

@media (max-width: 720px) {
    .front-body .achievement-line-report {
        min-height: 236px;
        padding: .72rem .62rem .64rem;
    }

    .front-body .achievement-line-canvas-wrap {
        height: 214px;
        min-height: 214px;
    }

    .front-body .achievement-line-foot {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}

/* Home achievement chart headers - compact executive color bands */
.front-body.home-page .achievement-insight-grid > .achievement-chart-card {
    --achievement-header-start: #0b75b7;
    --achievement-header-end: #19a2c7;
    --achievement-header-shadow: rgba(15, 118, 183, .20);
    padding-top: clamp(1.05rem, 1.75vw, 1.35rem);
    background:
        linear-gradient(145deg, rgba(255,255,255,.94), rgba(250,252,255,.76)),
        radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--achievement-header-end) 10%, transparent), transparent 38%);
}

.front-body.home-page .achievement-insight-grid > .achievement-chart-card::before {
    display: none;
}

.front-body.home-page .achievement-insight-grid > .achievement-rank-card {
    --achievement-header-start: #087fbd;
    --achievement-header-end: #28b7d3;
    --achievement-header-shadow: rgba(8, 127, 189, .22);
}

.front-body.home-page .achievement-insight-grid > .achievement-composition-card {
    --achievement-header-start: #7445b8;
    --achievement-header-end: #c45f9c;
    --achievement-header-shadow: rgba(116, 69, 184, .22);
}

.front-body.home-page .achievement-insight-grid > .achievement-latest-card {
    --achievement-header-start: #d58a1d;
    --achievement-header-end: #dd5b4a;
    --achievement-header-shadow: rgba(213, 138, 29, .22);
}

.front-body.home-page .achievement-insight-grid > .achievement-chart-card .chart-card-title {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    min-height: 58px;
    margin: calc(clamp(1.05rem, 1.75vw, 1.35rem) * -1) calc(clamp(1.1rem, 2vw, 1.45rem) * -1) .9rem;
    padding: .72rem clamp(1.1rem, 2vw, 1.45rem);
    overflow: hidden;
    border: 0;
    border-radius: 23px 23px 14px 14px;
    background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.14) 0 1px, transparent 1px 10px),
        linear-gradient(118deg, var(--achievement-header-start), var(--achievement-header-end));
    box-shadow: 0 12px 28px var(--achievement-header-shadow), inset 0 1px rgba(255,255,255,.28);
}

.front-body.home-page .achievement-insight-grid > .achievement-chart-card .chart-card-title::before {
    content: "";
    position: absolute;
    width: 92px;
    height: 92px;
    top: -53px;
    right: 19%;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    box-shadow: 0 0 0 24px rgba(255,255,255,.045);
    pointer-events: none;
}

.front-body.home-page .achievement-insight-grid > .achievement-chart-card .chart-card-title span,
.front-body.home-page .achievement-insight-grid > .achievement-chart-card .chart-card-title strong {
    position: relative;
    z-index: 1;
    color: #fff;
    text-shadow: 0 1px 1px rgba(15,23,42,.18);
}

.front-body.home-page .achievement-insight-grid > .achievement-chart-card .chart-card-title span {
    font-size: clamp(.72rem, 1vw, .8rem);
    font-weight: 950;
    letter-spacing: .13em;
}

.front-body.home-page .achievement-insight-grid > .achievement-chart-card .chart-card-title strong {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: .28rem .62rem;
    border: 1px solid rgba(255,255,255,.4);
    border-radius: 10px;
    background: rgba(255,255,255,.18);
    box-shadow: inset 0 1px rgba(255,255,255,.22);
    font-size: clamp(1rem, 1.45vw, 1.22rem);
    font-variant-numeric: tabular-nums;
    backdrop-filter: blur(7px);
}

.front-body.home-page .achievement-insight-grid > .achievement-chart-card:hover .chart-card-title {
    box-shadow: 0 16px 34px var(--achievement-header-shadow), inset 0 1px rgba(255,255,255,.35);
}

@media (max-width: 720px) {
    .front-body.home-page .achievement-insight-grid > .achievement-chart-card .chart-card-title {
        min-height: 52px;
        margin-bottom: .72rem;
        padding-block: .62rem;
        border-radius: 18px 18px 12px 12px;
    }

    .front-body.home-page .achievement-insight-grid > .achievement-chart-card .chart-card-title::before {
        right: 12%;
        transform: scale(.78);
        transform-origin: top right;
    }
}

/* Front footer simplification - remove menu cards and logo box */
.front-body .site-footer.footer-with-photo .footer-brand-block > img {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    object-fit: contain;
}

.front-body .site-footer.footer-with-photo .footer-links {
    display: flex !important;
    flex-wrap: wrap;
    width: auto !important;
    max-width: none !important;
    justify-self: end !important;
    justify-content: flex-end !important;
    align-items: center;
    gap: .55rem 1.15rem !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.front-body .site-footer.footer-with-photo .footer-links a {
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: .18rem 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(248, 250, 252, .9) !important;
    font-size: .82rem;
    font-weight: 650;
    line-height: 1.35;
    text-shadow: none;
}

.front-body .site-footer.footer-with-photo .footer-links a:hover {
    transform: none;
    background: transparent !important;
    box-shadow: none !important;
    color: #fde68a !important;
    text-decoration: underline;
    text-underline-offset: .22rem;
}

.front-body .site-footer.footer-with-photo .footer-credit-lines {
    justify-items: center;
    gap: .22rem;
}

.front-body .site-footer.footer-with-photo .browser-recommendation,
.front-body .site-footer.footer-with-photo .footer-copyright {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(226, 232, 240, .82);
    font-size: .78rem;
    font-weight: 400 !important;
    line-height: 1.45;
}

.front-body .site-footer.footer-with-photo .browser-recommendation::before {
    display: none !important;
}

.front-body .site-footer.footer-with-photo .footer-copyright {
    display: inline-flex;
    align-items: center;
}

@media (max-width: 1180px) {
    .front-body .site-footer.footer-with-photo .footer-links {
        justify-self: start !important;
        justify-content: flex-start !important;
    }
}

@media (max-width: 720px) {
    .front-body .site-footer.footer-with-photo .footer-links {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100% !important;
    }

    .front-body .site-footer.footer-with-photo .footer-links a {
        text-align: left;
    }
}

@media (max-width: 430px) {
    .front-body .site-footer.footer-with-photo .footer-links {
        grid-template-columns: 1fr;
    }
}

/* ASAD Bela Diri realization vs target trend chart */
.front-body .training-trend-section {
    margin-top: clamp(1rem, 2vw, 1.45rem);
}

.front-body .training-trend-title-row small {
    display: block;
    margin-top: .24rem;
    color: #64748b;
    font-size: .86rem;
    font-weight: 700;
    line-height: 1.35;
}

.front-body .training-trend-card {
    position: relative;
    overflow: hidden;
    padding: clamp(.85rem, 1.6vw, 1.2rem);
    border: 1px solid rgba(148,163,184,.22);
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.82)),
        radial-gradient(circle at 0 0, rgba(34,197,94,.12), transparent 34%),
        radial-gradient(circle at 100% 0, rgba(220,38,38,.11), transparent 32%);
    box-shadow: 0 22px 58px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.86);
}

.front-body .training-trend-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, #16a34a, #22c55e, #f43f5e, #b91c1c);
}

.front-body .training-trend-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .8rem;
}

.front-body .training-trend-head strong {
    display: block;
    color: #0f172a;
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    font-weight: 950;
    letter-spacing: .01em;
}

.front-body .training-trend-head p {
    max-width: 560px;
    margin: .2rem 0 0;
    color: #64748b;
    font-size: .86rem;
    font-weight: 650;
    line-height: 1.45;
}

.front-body .training-trend-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .42rem;
}

.front-body .training-trend-tabs button {
    min-height: 34px;
    padding: .48rem .72rem;
    border: 1px solid rgba(148,163,184,.28);
    border-radius: 999px;
    background: rgba(255,255,255,.82);
    color: #475569;
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .04em;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease, background .18s ease;
}

.front-body .training-trend-tabs button:hover,
.front-body .training-trend-tabs button:focus-visible,
.front-body .training-trend-tabs button.active {
    border-color: rgba(22,163,74,.35);
    background: linear-gradient(135deg, rgba(22,163,74,.12), rgba(255,255,255,.92));
    color: #166534;
    box-shadow: 0 10px 22px rgba(22,163,74,.12);
    transform: translateY(-1px);
    outline: none;
}

.front-body .training-trend-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .6rem;
    margin-bottom: .8rem;
}

.front-body .training-trend-summary span {
    display: grid;
    gap: .12rem;
    min-width: 0;
    padding: .62rem .78rem;
    border: 1px solid rgba(148,163,184,.22);
    border-radius: 16px;
    background: rgba(255,255,255,.78);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 10px 24px rgba(15,23,42,.045);
}

.front-body .training-trend-summary small {
    color: #64748b;
    font-size: .68rem;
    font-weight: 950;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.front-body .training-trend-summary strong {
    color: #0f172a;
    font-size: clamp(1.25rem, 2vw, 1.7rem);
    font-weight: 950;
    line-height: 1;
}

.front-body .training-trend-summary .realization {
    border-color: rgba(22,163,74,.24);
    background: linear-gradient(135deg, rgba(22,163,74,.1), rgba(255,255,255,.86));
}

.front-body .training-trend-summary .target {
    border-color: rgba(220,38,38,.2);
    background: linear-gradient(135deg, rgba(220,38,38,.09), rgba(255,255,255,.86));
}

.front-body .training-trend-summary .ratio {
    border-color: rgba(20,184,166,.22);
    background: linear-gradient(135deg, rgba(20,184,166,.1), rgba(255,255,255,.86));
}

.front-body .training-trend-chart-shell {
    position: relative;
    min-height: 360px;
    padding: .75rem;
    border: 1px solid rgba(203,213,225,.72);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.78)),
        repeating-linear-gradient(135deg, rgba(15,23,42,.025) 0 1px, transparent 1px 10px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.front-body .training-trend-chart-shell canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

@media (max-width: 900px) {
    .front-body .training-trend-head {
        display: grid;
    }
    .front-body .training-trend-tabs {
        justify-content: flex-start;
    }
    .front-body .training-trend-summary {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .front-body .training-trend-card {
        border-radius: 18px;
        padding: .75rem;
    }
    .front-body .training-trend-chart-shell {
        min-height: 420px;
        padding: .5rem;
    }
    .front-body .training-trend-tabs button {
        flex: 1 1 calc(50% - .42rem);
        padding-inline: .5rem;
    }
}

/* Back Panel sidebar brand compact fix - 20260619 */
.admin-sidebar .admin-brand {
    gap: .5rem;
    min-height: 82px;
    padding: .72rem .32rem .68rem 0;
}

.admin-sidebar .admin-brand img {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
}

.admin-sidebar .admin-brand span {
    min-width: 0;
    max-width: calc(100% - 62px);
}

.admin-sidebar .admin-brand strong {
    max-width: 100%;
    font-size: clamp(.8rem, .86vw, .92rem);
    line-height: 1.08;
    white-space: normal;
    overflow: visible;
    word-break: keep-all;
    text-wrap: balance;
}

.admin-sidebar .admin-brand small {
    margin-top: .02rem;
    padding: .14rem .42rem;
    font-size: .56rem;
    letter-spacing: .14em;
}

@media (max-width: 1100px) {
    .admin-sidebar .admin-brand {
        gap: .44rem;
        min-height: 76px;
        padding: .64rem .26rem .58rem 0;
    }

    .admin-sidebar .admin-brand img {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
    }

    .admin-sidebar .admin-brand span {
        max-width: calc(100% - 56px);
    }

    .admin-sidebar .admin-brand strong {
        font-size: .76rem;
        line-height: 1.08;
    }
}

/* Back Panel global sticky header - 20260619 */
.admin-body .admin-topbar {
    position: sticky !important;
    top: 0;
    z-index: 9999;
    overflow: hidden;
    border-color: rgba(125, 211, 252, .55);
    background:
        radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--admin-page-accent) 13%, transparent), transparent 15rem),
        linear-gradient(135deg, rgba(255,255,255,.985), rgba(240,249,255,.965));
    -webkit-backdrop-filter: blur(10px) saturate(1.08);
    backdrop-filter: blur(10px) saturate(1.08);
    box-shadow: 0 2px 10px rgba(15, 23, 42, .08), 0 14px 32px rgba(14, 165, 233, .08);
}

.admin-body .admin-topbar::before {
    z-index: 0;
}

.admin-body .admin-topbar > * {
    position: relative;
    z-index: 1;
}

@media (max-width: 1180px) {
    .admin-body .admin-topbar {
        top: 0;
        z-index: 9999;
    }
}

.gis-hero {
    width: min(1600px, calc(100% - 3rem));
    margin: 2.4rem auto 1.1rem;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(1.35rem, 3vw, 2.2rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 250px;
    border: 1px solid rgba(255,255,255,.34);
    border-radius: 30px;
    background:
        linear-gradient(90deg, rgba(8,25,55,.85) 0%, rgba(30,60,90,.45) 52%, rgba(132,94,247,.35) 100%),
        linear-gradient(135deg, rgba(255,255,255,.88), rgba(248,250,252,.72));
    backdrop-filter: blur(6px);
    box-shadow: 0 30px 80px rgba(15, 23, 42, .16), inset 0 1px 0 rgba(255,255,255,.4);
}

.gis-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 86% 22%, rgba(20,184,166,.18), transparent 30%),
        linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,.18));
    pointer-events: none;
}

.gis-hero-map {
    position: absolute;
    inset: -10%;
    z-index: -3;
    background: var(--gis-hero-map) center / cover no-repeat;
    opacity: .18;
    filter: blur(3px) saturate(1.12);
    transform: scale(1.04);
}

.gis-hero-watermark {
    position: absolute;
    right: clamp(1rem, 4vw, 3.5rem);
    bottom: -1rem;
    z-index: -1;
    width: clamp(150px, 18vw, 250px);
    aspect-ratio: 1;
    background: var(--gis-hero-logo) center / contain no-repeat;
    opacity: .07;
    filter: grayscale(.15);
}

.gis-hero-content {
    position: relative;
    z-index: 1;
    max-width: 920px;
}

.gis-hero h1 {
    margin: .16rem 0 .45rem;
    font-family: var(--serif);
    font-size: clamp(2.4rem, 5vw, 5.6rem);
    line-height: .92;
    letter-spacing: 0;
    color: #07142a;
    font-weight: 800;
    text-shadow: 0 2px 16px rgba(255,255,255,.28), 0 1px 0 rgba(255,255,255,.28);
}

.gis-hero-content > p:last-of-type {
    max-width: 760px;
    margin: 0;
    color: rgba(15, 23, 42, .72);
    font-weight: 800;
    text-shadow: 0 1px 0 rgba(255,255,255,.28);
}

.gis-hero .section-eyebrow {
    color: #f97316;
    text-shadow: 0 1px 0 rgba(255,255,255,.22);
}

.gis-hero-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    gap: .62rem;
    margin-top: 1.05rem;
    max-width: 760px;
}

.gis-hero-stats span {
    padding: .72rem .8rem;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.42);
    background: rgba(255,255,255,.66);
    backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.62), 0 16px 32px rgba(15,23,42,.08);
}

.gis-hero-stats strong,
.gis-hero-stats small {
    display: block;
}

.gis-hero-stats strong {
    color: #07142a;
    font-size: clamp(1.05rem, 1.9vw, 1.55rem);
    font-weight: 950;
    line-height: 1;
}

.gis-hero-stats small {
    margin-top: .24rem;
    color: #475569;
    font-size: .68rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.gis-hero-badge,
.gis-map-toolbar > span {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .75rem 1rem;
    border-radius: 999px;
    background: rgba(255,255,255,.7);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.55);
    color: #10213b;
    font-weight: 950;
    box-shadow: 0 18px 38px rgba(15, 23, 42, .12), inset 0 1px 0 rgba(255,255,255,.68);
}

.gis-shell {
    width: min(1600px, calc(100% - 3rem));
    margin: 0 auto 2.4rem;
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: 1rem;
    align-items: stretch;
}

.gis-panel,
.gis-map-card {
    border-radius: 24px;
    border: 1px solid rgba(203, 213, 225, .7);
    background: rgba(255,255,255,.92);
    box-shadow: 0 24px 60px rgba(15, 23, 42, .08);
}

.gis-panel {
    padding: 1rem;
    position: sticky;
    top: 5.6rem;
    align-self: start;
}

.gis-panel-head,
.gis-map-toolbar,
.gis-info-head {
    display: flex;
    align-items: center;
    gap: .78rem;
}

.gis-panel-icon {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 16px;
    display: inline-grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #0ea5e9, #0f766e);
    box-shadow: 0 14px 28px rgba(14, 165, 233, .22);
}

.gis-panel-icon svg {
    width: 1.28rem;
    height: 1.28rem;
    fill: currentColor;
}

.gis-panel h2,
.gis-map-toolbar h2 {
    margin: 0;
    color: #101827;
    font-size: 1.16rem;
    font-weight: 950;
}

.gis-panel p,
.gis-map-toolbar p {
    margin: .12rem 0 0;
    color: #64748b;
    font-weight: 700;
}

.gis-filter {
    display: grid;
    gap: .72rem;
    margin-top: 1rem;
}

.gis-filter label {
    display: grid;
    gap: .34rem;
    color: #475569;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: .72rem;
}

.gis-filter select,
.gis-filter button {
    min-height: 44px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, .35);
    padding: .66rem .75rem;
    font: inherit;
    font-weight: 850;
    color: #111827;
    background: rgba(248,250,252,.92);
}

.gis-filter button {
    border: 0;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, #0f766e, #16a34a);
    box-shadow: 0 14px 28px rgba(22, 163, 74, .2);
}

.gis-summary {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .58rem;
}

.gis-summary article {
    border-radius: 16px;
    padding: .78rem;
    background: linear-gradient(135deg, #f8fafc, #fff);
    border: 1px solid rgba(203, 213, 225, .65);
}

.gis-summary span {
    display: block;
    color: #64748b;
    font-size: .68rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.gis-summary strong {
    display: block;
    margin-top: .22rem;
    font-size: 1.5rem;
    color: #0f172a;
    line-height: 1;
}

.gis-summary .good { background: linear-gradient(135deg, #dcfce7, #fff); }
.gis-summary .warn { background: linear-gradient(135deg, #fef3c7, #fff); }
.gis-summary .bad { background: linear-gradient(135deg, #fee2e2, #fff); }

.gis-legend {
    margin-top: 1rem;
    display: grid;
    gap: .42rem;
    color: #475569;
    font-weight: 800;
    font-size: .86rem;
}

.gis-legend span {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.gis-legend i {
    width: .7rem;
    height: .7rem;
    border-radius: 999px;
    background: var(--dot);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--dot) 16%, transparent);
}

.gis-map-card {
    padding: 1rem;
    min-width: 0;
}

.gis-map-toolbar {
    justify-content: space-between;
    padding: .2rem .2rem .9rem;
}

.gis-key-alert {
    margin-bottom: .82rem;
    padding: .7rem .85rem;
    border-radius: 16px;
    color: #075985;
    background: linear-gradient(135deg, rgba(224, 242, 254, .95), rgba(240, 253, 250, .9));
    border: 1px solid rgba(14, 165, 233, .24);
    font-weight: 800;
}

.gis-map {
    position: relative;
    min-height: 620px;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid rgba(203, 213, 225, .72);
    background: #eaf2f8;
}

.gis-fallback-map {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 52% 48%, rgba(14, 165, 233, .08), transparent 34%),
        #dbeafe;
}

.gis-fallback-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(14, 116, 144, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14, 116, 144, .08) 1px, transparent 1px);
    background-size: 64px 64px;
    pointer-events: none;
    z-index: 2;
    opacity: .06;
}

.gis-google-embed {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    border: 0;
    filter: saturate(.92) contrast(1.02);
    opacity: .18;
    pointer-events: none;
}

.gis-local-map {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: fill;
    opacity: .96;
    filter: saturate(1.05) contrast(1.02);
}

.gis-fallback-label {
    position: absolute;
    z-index: 4;
    right: 1.2rem;
    bottom: 1rem;
    padding: .58rem .8rem;
    border-radius: 999px;
    color: #0f172a;
    background: rgba(255,255,255,.78);
    font-weight: 950;
    box-shadow: 0 12px 28px rgba(15,23,42,.08);
}

.gis-fallback-pin {
    position: absolute;
    z-index: 5;
    width: 1rem;
    height: 1rem;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--pin);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--pin) 22%, transparent), 0 12px 20px rgba(15,23,42,.18);
    cursor: pointer;
    transform: translate(-50%, -50%);
    transition: transform .18s ease, box-shadow .18s ease;
}

.gis-fallback-pin:hover,
.gis-fallback-pin:focus-visible {
    transform: translate(-50%, -50%) scale(1.45);
    outline: none;
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--pin) 22%, transparent), 0 16px 28px rgba(15,23,42,.22);
}

.gis-google-pin {
    position: absolute;
    z-index: 8;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 4px solid rgba(255,255,255,.92);
    border-radius: 999px 999px 999px 4px;
    background: var(--pin, #16a34a);
    box-shadow: 0 14px 28px rgba(15,23,42,.24), 0 0 0 5px color-mix(in srgb, var(--pin, #16a34a) 18%, transparent);
    cursor: pointer;
    transform: translate(-50%, -100%) rotate(-45deg);
    transform-origin: 50% 100%;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.gis-google-pin span {
    position: absolute;
    inset: 5px;
    border-radius: 999px;
    background: rgba(255,255,255,.96);
    transform: rotate(45deg);
    box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--pin, #16a34a) 82%, #ffffff);
}

.gis-google-pin:hover,
.gis-google-pin:focus-visible {
    z-index: 20;
    filter: saturate(1.12);
    outline: none;
    transform: translate(-50%, -100%) rotate(-45deg) scale(1.16);
    box-shadow: 0 18px 34px rgba(15,23,42,.28), 0 0 0 7px color-mix(in srgb, var(--pin, #16a34a) 22%, transparent);
}

.gis-popup-dock {
    margin-top: .95rem;
}

.gis-info-card {
    width: 100%;
    padding: 1rem;
    border-radius: 24px;
    border: 1px solid color-mix(in srgb, var(--pin, #0ea5e9) 24%, rgba(203, 213, 225, .75));
    background:
        radial-gradient(circle at 92% 5%, color-mix(in srgb, var(--pin, #0ea5e9) 14%, transparent), transparent 30%),
        linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.93));
    box-shadow: 0 24px 56px rgba(15,23,42,.12);
    color: #172033;
}

.gm-style .gis-info-card {
    width: min(820px, calc(100vw - 3rem));
}

.gis-info-head {
    align-items: center;
    padding-bottom: .85rem;
    border-bottom: 1px solid rgba(226, 232, 240, .9);
}

.gis-info-head img {
    width: 4.1rem;
    height: 4.1rem;
    object-fit: contain;
    padding: .35rem;
    border-radius: 18px;
    background: rgba(255,255,255,.86);
    border: 1px solid rgba(203,213,225,.75);
    box-shadow: 0 16px 30px rgba(15,23,42,.1);
}

.gis-info-head > div {
    min-width: 0;
    flex: 1;
}

.gis-info-head > div p {
    margin: 0 0 .12rem;
    color: #64748b;
    font-size: .72rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .09em;
}

.gis-info-head > span {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .58rem .78rem;
    border-radius: 999px;
    color: var(--pin, #0f766e);
    background: color-mix(in srgb, var(--pin, #0f766e) 10%, #fff);
    border: 1px solid color-mix(in srgb, var(--pin, #0f766e) 30%, rgba(203,213,225,.8));
    font-size: .82rem;
    font-weight: 950;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--pin, #0f766e) 12%, transparent);
}

.gis-info-head h3 {
    margin: 0;
    font-size: clamp(1.15rem, 2vw, 1.55rem);
    font-weight: 950;
    color: #0f172a;
}

.gis-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 330px);
    gap: .9rem;
    margin-top: .95rem;
    align-items: stretch;
}

.gis-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    margin-top: 0;
}

.gis-mini-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: .85rem;
    border-radius: 18px;
    border: 1px solid rgba(203,213,225,.78);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 16px 30px rgba(15,23,42,.06);
}

.gis-mini-card.org {
    background: linear-gradient(135deg, rgba(239,246,255,.96), #fff);
    border-color: rgba(59,130,246,.2);
}

.gis-mini-card.training {
    background: linear-gradient(135deg, rgba(236,253,245,.96), #fff);
    border-color: rgba(16,185,129,.22);
}

.gis-mini-card.achievement {
    background: linear-gradient(135deg, rgba(255,247,237,.96), #fff);
    border-color: rgba(249,115,22,.24);
}

.gis-mini-title {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: .7rem;
}

.gis-mini-title span {
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 14px;
    display: inline-grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
    font-weight: 950;
    box-shadow: 0 12px 20px rgba(37,99,235,.15);
}

.gis-mini-card.training .gis-mini-title span {
    background: linear-gradient(135deg, #059669, #16a34a);
}

.gis-mini-card.achievement .gis-mini-title span {
    background: linear-gradient(135deg, #f97316, #dc2626);
}

.gis-mini-title strong,
.gis-info-grid strong {
    color: #0f172a;
    font-size: .86rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 950;
}

.gis-mini-rows {
    display: grid;
    gap: .44rem;
    flex: 1;
}

.gis-mini-rows p {
    margin: 0;
    display: grid;
    gap: .08rem;
    color: #475569;
    font-weight: 760;
    line-height: 1.3;
}

.gis-mini-rows p span {
    color: #64748b;
    font-size: .68rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.gis-mini-rows p strong {
    color: #152033;
    font-size: .86rem;
    font-weight: 900;
}

.gis-mini-card > a {
    margin-top: .72rem;
    align-self: flex-start;
    padding: .5rem .68rem;
    border-radius: 999px;
    color: #0f766e;
    background: rgba(255,255,255,.84);
    border: 1px solid rgba(20,184,166,.22);
    text-decoration: none;
    font-size: .78rem;
    font-weight: 950;
    box-shadow: 0 10px 18px rgba(15,23,42,.05);
}

.gis-progress {
    display: grid;
    gap: .25rem;
}

.gis-progress div {
    display: flex;
    justify-content: space-between;
    gap: .7rem;
    font-size: .76rem;
    font-weight: 900;
    color: #334155;
}

.gis-progress i {
    display: block;
    height: .42rem;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(148,163,184,.18);
}

.gis-progress b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #16a34a, #22c55e);
}

.gis-progress.blue b {
    background: linear-gradient(90deg, #2563eb, #06b6d4);
}

.gis-executive-insight {
    padding: .95rem;
    border-radius: 20px;
    border: 1px solid rgba(203,213,225,.78);
    background:
        radial-gradient(circle at 92% 12%, rgba(255,255,255,.72), transparent 24%),
        linear-gradient(135deg, #ecfeff, #fff);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 18px 35px rgba(15,23,42,.07);
}

.gis-executive-insight.warn {
    background: linear-gradient(135deg, #fffbeb, #fff);
    border-color: rgba(245,158,11,.25);
}

.gis-executive-insight.bad {
    background: linear-gradient(135deg, #fff1f2, #fff);
    border-color: rgba(239,68,68,.22);
}

.gis-executive-insight > div:first-child p {
    margin: 0;
    color: #64748b;
    font-size: .72rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.gis-executive-insight h4 {
    margin: .12rem 0 .75rem;
    color: #0f172a;
    font-size: 1.12rem;
    font-weight: 950;
}

.gis-insight-donut {
    --score: 0;
    width: 8.2rem;
    height: 8.2rem;
    margin: .2rem auto .75rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at center, #fff 0 54%, transparent 55%),
        conic-gradient(#16a34a calc(var(--score) * 1%), rgba(226,232,240,.92) 0);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 16px 30px rgba(15,23,42,.08);
}

.gis-insight-donut strong,
.gis-insight-donut span {
    grid-area: 1 / 1;
}

.gis-insight-donut strong {
    margin-top: -.35rem;
    color: #0f172a;
    font-size: 1.6rem;
    font-weight: 950;
}

.gis-insight-donut span {
    margin-top: 2rem;
    color: #64748b;
    font-size: .68rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.gis-insight-kpis {
    display: grid;
    grid-template-columns: 1fr;
    gap: .45rem;
}

.gis-insight-kpis span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
    padding: .5rem .58rem;
    border-radius: 14px;
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(226,232,240,.8);
}

.gis-insight-kpis b {
    color: #0f172a;
    font-weight: 950;
}

.gis-insight-kpis small {
    color: #64748b;
    font-weight: 850;
    text-align: right;
}

.gis-recommendation {
    margin: .7rem 0 0;
    padding: .7rem;
    border-radius: 15px;
    background: rgba(15,23,42,.04);
    color: #334155;
    font-weight: 800;
    line-height: 1.45;
}

.gis-detail-link {
    display: inline-flex;
    margin-top: .75rem;
    padding: .62rem .82rem;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #0f766e, #2563eb);
    text-decoration: none;
    font-weight: 950;
}

.gis-empty-detail {
    padding: 1rem;
    border-radius: 18px;
    color: #64748b;
    background: #fff;
    border: 1px dashed rgba(148,163,184,.65);
    font-weight: 850;
}

.gis-admin-steps {
    display: grid;
    gap: .75rem;
    margin-top: 1rem;
}

.gis-admin-steps div {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .8rem;
    border-radius: 16px;
    border: 1px solid rgba(203,213,225,.72);
    background: linear-gradient(135deg, #f8fafc, #fff);
}

.gis-admin-steps strong {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    background: #0ea5e9;
    color: #fff;
}

.form-hint {
    display: block;
    margin: -.2rem 0 .7rem;
    color: #64748b;
    font-weight: 700;
}

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

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

    .gis-panel {
        position: static;
    }

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

    .gis-filter button {
        grid-column: 1 / -1;
    }

    .gis-map {
        min-height: 520px;
    }

    .gis-detail-layout,
    .gis-info-grid {
        grid-template-columns: 1fr;
    }

    .gis-executive-insight {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: .75rem;
        align-items: center;
    }

    .gis-insight-donut {
        grid-row: span 3;
        margin: 0;
    }
}

@media (max-width: 640px) {
    .gis-hero,
    .gis-shell {
        width: min(100% - 1rem, 100%);
    }

    .gis-hero {
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem;
        margin-top: 1rem;
        min-height: auto;
    }

    .gis-hero-stats {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .gis-hero-badge {
        align-self: flex-start;
    }

    .gis-filter,
    .gis-summary {
        grid-template-columns: 1fr;
    }

    .gis-map-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .gis-map {
        min-height: 430px;
    }

    .gis-info-head {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .gis-info-head > span {
        width: 100%;
    }

    .gis-executive-insight {
        display: block;
    }

    .gis-insight-donut {
        margin: .2rem auto .75rem;
    }
}

@media (max-width: 720px) {
    .admin-body .admin-topbar {
        padding: .64rem;
        gap: .58rem;
        border-radius: 15px;
    }

    .admin-body .admin-session-panel {
        padding: .52rem .58rem;
    }

    .admin-body .admin-session-panel dl {
        gap: .38rem;
    }
}

/* ASAD Bela Diri Executive Summary icons - 20260619 */
.front-body .training-trend-tabs button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .38rem;
}

.front-body .training-trend-tabs button i {
    flex: 0 0 auto;
    font-size: .82rem;
    line-height: 1;
    color: currentColor;
}

.front-body .training-trend-tabs button i::before,
.front-body .training-trend-summary .trend-kpi-icon::before {
    content: "";
    display: block;
    width: 1em;
    height: 1em;
    background: currentColor;
    -webkit-mask: var(--training-fa-icon) center / contain no-repeat;
    mask: var(--training-fa-icon) center / contain no-repeat;
}

.front-body .training-trend-tabs .fa-person {
    --training-fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512h388.6c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304h-91.4z'/%3E%3C/svg%3E");
}

.front-body .training-trend-tabs .fa-person-dress {
    --training-fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M160 128A64 64 0 1 0 160 0a64 64 0 1 0 0 128zM88 160c-30.9 0-56 25.1-56 56v88c0 13.3 10.7 24 24 24s24-10.7 24-24v-72c0-4.4 3.6-8 8-8s8 3.6 8 8v64L40.2 444.8C35.5 457.4 44.8 471 58.2 471H96v17c0 13.3 10.7 24 24 24s24-10.7 24-24v-17h32v17c0 13.3 10.7 24 24 24s24-10.7 24-24v-17h37.8c13.4 0 22.7-13.6 18-26.2L224 296v-64c0-4.4 3.6-8 8-8s8 3.6 8 8v72c0 13.3 10.7 24 24 24s24-10.7 24-24v-88c0-30.9-25.1-56-56-56H88z'/%3E%3C/svg%3E");
}

.front-body .training-trend-tabs .fa-chalkboard-user {
    --training-fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M160 64a64 64 0 1 1 128 0A64 64 0 1 1 160 64zm-8 176c0-35.3 28.7-64 64-64h16c35.3 0 64 28.7 64 64v32h72c17.7 0 32 14.3 32 32s-14.3 32-32 32h-72v144c0 17.7-14.3 32-32 32s-32-14.3-32-32V352h-16v128c0 17.7-14.3 32-32 32s-32-14.3-32-32V336H80c-17.7 0-32-14.3-32-32s14.3-32 32-32h72v-32zM432 0h144c35.3 0 64 28.7 64 64v256c0 35.3-28.7 64-64 64H448c-8.8 0-16-7.2-16-16s7.2-16 16-16h128c17.7 0 32-14.3 32-32V64c0-17.7-14.3-32-32-32H432c-17.7 0-32 14.3-32 32v160c0 8.8-7.2 16-16 16s-16-7.2-16-16V64c0-35.3 28.7-64 64-64z'/%3E%3C/svg%3E");
}

.front-body .training-trend-summary .fa-chart-line {
    --training-fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M64 64c17.7 0 32 14.3 32 32v288h384c17.7 0 32 14.3 32 32s-14.3 32-32 32H64c-17.7 0-32-14.3-32-32V96c0-17.7 14.3-32 32-32zm406.6 86.6c12.5 12.5 12.5 32.8 0 45.3l-96 96c-12.5 12.5-32.8 12.5-45.3 0L288 250.5l-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l96-96c12.5-12.5 32.8-12.5 45.3 0l41.4 41.4 73.4-73.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E");
}

.front-body .training-trend-summary .fa-bullseye {
    --training-fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M448 256A192 192 0 1 0 64 256a192 192 0 1 0 384 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 80a80 80 0 1 0 0-160 80 80 0 1 0 0 160zm0-224a144 144 0 1 1 0 288 144 144 0 1 1 0-288zm32 144a32 32 0 1 0-64 0 32 32 0 1 0 64 0z'/%3E%3C/svg%3E");
}

.front-body .training-trend-summary .fa-trophy {
    --training-fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M400 0H176c-26.5 0-48.1 21.8-47.1 48.2c.2 5.3 .4 10.6 .7 15.8H24C10.7 64 0 74.7 0 88c0 92.6 33.5 157 78.5 200.7c41.9 40.6 96.4 61.8 149.7 68.4c13.4 12.6 29.2 20.9 47.8 23.8V448h-72c-17.7 0-32 14.3-32 32s14.3 32 32 32h168c17.7 0 32-14.3 32-32s-14.3-32-32-32h-72v-67.1c18.6-2.9 34.4-11.2 47.8-23.8c53.3-6.6 107.8-27.8 149.7-68.4C542.5 245 576 180.6 576 88c0-13.3-10.7-24-24-24H446.4c.3-5.2 .5-10.5 .7-15.8C448.1 21.8 426.5 0 400 0zM48.9 112h84.4c5.8 70.3 20.9 125.3 44.2 163.8c-29.6-9.6-52.9-24-72.3-42.9c-29.8-28.9-50.2-69.1-56.3-120.9zm422 0c-6.1 51.8-26.5 92-56.3 120.9c-19.4 18.9-42.7 33.3-72.3 42.9c23.3-38.5 38.4-93.5 44.2-163.8h84.4z'/%3E%3C/svg%3E");
}

/* Front footer premium shortcut menu - 20260619 */
.front-body .site-footer.footer-with-photo .footer-main {
    align-items: start !important;
}

.front-body .site-footer.footer-with-photo .footer-links {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(128px, 1fr));
    width: min(100%, 720px) !important;
    max-width: 720px !important;
    justify-self: end !important;
    align-self: start !important;
    justify-content: end !important;
    align-items: stretch !important;
    gap: .62rem !important;
    margin-top: .08rem;
    padding: .45rem !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 22px !important;
    background: linear-gradient(135deg, rgba(255,255,255,.11), rgba(255,255,255,.035)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 18px 42px rgba(2, 6, 23, .16) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.08) !important;
    backdrop-filter: blur(12px) saturate(1.08) !important;
}

.front-body .site-footer.footer-with-photo .footer-links a {
    position: relative;
    isolation: isolate;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: .48rem;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    padding: .68rem .82rem !important;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 16px !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.055)),
        radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--shortcut-accent, #38bdf8) 24%, transparent), transparent 62%) !important;
    color: rgba(248, 250, 252, .96) !important;
    font-size: .78rem;
    font-weight: 850;
    line-height: 1.2;
    text-align: center;
    text-decoration: none !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 10px 24px rgba(2,6,23,.1) !important;
    text-shadow: 0 1px 1px rgba(2,6,23,.22);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}

.front-body .site-footer.footer-with-photo .footer-links a::before {
    content: "";
    flex: 0 0 auto;
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background: currentColor;
    -webkit-mask: var(--footer-shortcut-icon) center / contain no-repeat;
    mask: var(--footer-shortcut-icon) center / contain no-repeat;
    opacity: .95;
}

.front-body .site-footer.footer-with-photo .footer-links a::after {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(135deg, color-mix(in srgb, var(--shortcut-accent, #38bdf8) 22%, transparent), transparent 58%);
    opacity: 0;
    transition: opacity .2s ease;
}

.front-body .site-footer.footer-with-photo .footer-links a:nth-child(1) {
    --shortcut-accent: #f97316;
    --footer-shortcut-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h16v14H4V5zm3 3v4h5V8H7zm7 0v1.5h4V8h-4zm0 3v1.5h4V11h-4zM7 15v1.5h11V15H7z'/%3E%3C/svg%3E");
}

.front-body .site-footer.footer-with-photo .footer-links a:nth-child(2) {
    --shortcut-accent: #14b8a6;
    --footer-shortcut-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 1 7 7c0 5.2-7 13-7 13S5 14.2 5 9a7 7 0 0 1 7-7zm0 4.2a2.8 2.8 0 1 0 0 5.6 2.8 2.8 0 0 0 0-5.6z'/%3E%3C/svg%3E");
}

.front-body .site-footer.footer-with-photo .footer-links a:nth-child(3) {
    --shortcut-accent: #8b5cf6;
    --footer-shortcut-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 19V5h2v14H5zm4 0V9h2v10H9zm4 0V3h2v16h-2zm4 0v-7h2v7h-2z'/%3E%3C/svg%3E");
}

.front-body .site-footer.footer-with-photo .footer-links a:nth-child(4) {
    --shortcut-accent: #38bdf8;
    --footer-shortcut-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h16v14H4V5zm2 2v2l6 4 6-4V7H6zm0 4.4V17h12v-5.6l-6 4-6-4z'/%3E%3C/svg%3E");
}

.front-body .site-footer.footer-with-photo .footer-links a:hover,
.front-body .site-footer.footer-with-photo .footer-links a:focus-visible {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--shortcut-accent, #38bdf8) 55%, rgba(255,255,255,.26)) !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.08)),
        radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--shortcut-accent, #38bdf8) 35%, transparent), transparent 64%) !important;
    color: #ffffff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 16px 34px color-mix(in srgb, var(--shortcut-accent, #38bdf8) 16%, rgba(2,6,23,.14)) !important;
    outline: none;
}

.front-body .site-footer.footer-with-photo .footer-links a:hover::after,
.front-body .site-footer.footer-with-photo .footer-links a:focus-visible::after {
    opacity: 1;
}

@media (max-width: 1180px) {
    .front-body .site-footer.footer-with-photo .footer-links {
        justify-self: stretch !important;
        width: 100% !important;
        max-width: none !important;
        margin-top: 0;
    }
}

@media (max-width: 780px) {
    .front-body .site-footer.footer-with-photo .footer-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .52rem !important;
        padding: .38rem !important;
    }

    .front-body .site-footer.footer-with-photo .footer-links a {
        min-height: 44px !important;
        justify-content: flex-start;
        padding: .64rem .72rem !important;
        text-align: left;
    }
}

@media (max-width: 640px) {
    .front-body .site-footer.footer-with-photo {
        width: 100%;
        max-width: calc(100vw - 1.5rem);
        margin-inline: auto;
        overflow: hidden;
    }

    .front-body .site-footer.footer-with-photo .footer-main,
    .front-body .site-footer.footer-with-photo .footer-bottom-note {
        min-width: 0;
        width: 100%;
    }

    .front-body .site-footer.footer-with-photo .footer-links {
        grid-template-columns: 1fr;
        width: 100% !important;
        padding: .34rem !important;
    }

    .front-body .site-footer.footer-with-photo .footer-links a {
        min-height: 42px !important;
        font-size: .76rem;
    }
}

.front-body .training-trend-summary span {
    position: relative;
    overflow: hidden;
    padding-right: 3.05rem;
}

.front-body .training-trend-summary .trend-kpi-icon {
    position: absolute;
    top: .58rem;
    right: .68rem;
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    font-size: .92rem;
    line-height: 1;
    background: rgba(255,255,255,.72);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.86), 0 10px 20px rgba(15,23,42,.07);
}

.front-body .training-trend-summary .realization .trend-kpi-icon {
    color: #14532d;
    background: linear-gradient(135deg, rgba(20,83,45,.14), rgba(255,255,255,.86));
}

.front-body .training-trend-summary .target .trend-kpi-icon {
    color: #dc2626;
    background: linear-gradient(135deg, rgba(220,38,38,.14), rgba(255,255,255,.86));
}

.front-body .training-trend-summary .ratio .trend-kpi-icon {
    color: #1d4ed8;
    background: linear-gradient(135deg, rgba(37,99,235,.14), rgba(255,255,255,.86));
}

@media (max-width: 620px) {
    .front-body .training-trend-tabs button {
        justify-content: flex-start;
        gap: .34rem;
    }

    .front-body .training-trend-tabs button i {
        font-size: .78rem;
    }

    .front-body .training-trend-summary span {
        padding-right: 2.8rem;
    }

    .front-body .training-trend-summary .trend-kpi-icon {
        width: 1.78rem;
        height: 1.78rem;
        top: .52rem;
        right: .58rem;
        font-size: .82rem;
    }
}

/* Official PERSINAS ASAD Jatim olive/navy/gold theme - 20260623 */
:root {
    --asad-olive: #5D7153;
    --asad-olive-light: #738A67;
    --asad-olive-dark: #4E6350;
    --asad-navy: #18212D;
    --asad-navy-soft: #24313F;
    --asad-gold: #C98A2E;
    --asad-admin-header: linear-gradient(135deg,#F6F7F8,#F4F6F4,#E8F0EA);
}

.front-body .site-header {
    background: linear-gradient(135deg,#5D7153 0%,#738A67 40%,#4E6350 100%) !important;
    border-bottom-color: rgba(255,255,255,.18);
    box-shadow: 0 18px 45px rgba(24,33,45,.18);
}

.front-body .site-header::before {
    background:
        linear-gradient(90deg, rgba(24,33,45,.58), rgba(24,33,45,.18), rgba(201,138,46,.14)),
        radial-gradient(circle at 20% 0%, rgba(255,255,255,.18), transparent 36%) !important;
}

.front-body .site-header::after {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.26), transparent) !important;
}

.front-body .brand strong,
.front-body .brand small,
.front-body .site-nav > a,
.front-body .nav-parent {
    color: #fff !important;
}

.front-body .brand small {
    color: rgba(255,255,255,.82) !important;
}

.front-body .site-nav > a:hover,
.front-body .nav-parent:hover,
.front-body .nav-dropdown:hover > .nav-parent,
.front-body .nav-dropdown:focus-within > .nav-parent,
.front-body .nav-dropdown.open > .nav-parent {
    background: rgba(255,255,255,.15) !important;
    color: #fff !important;
}

.front-body .site-nav > a.active,
.front-body .nav-dropdown.active > .nav-parent,
.front-body .nav-dropdown.open > .nav-parent,
.front-body .nav-dropdown:hover > .nav-parent {
    background: #C98A2E !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.22) !important;
    box-shadow: 0 14px 30px rgba(88,55,15,.18), inset 0 1px 0 rgba(255,255,255,.24);
}

.front-body .site-nav > a.active::before,
.front-body .nav-dropdown.active > .nav-parent::before,
.front-body .nav-dropdown.open > .nav-parent::before {
    background: rgba(255,255,255,.92) !important;
}

.front-body .nav-dropdown-menu {
    border-color: rgba(93,113,83,.18) !important;
    background: rgba(255,255,255,.96) !important;
    box-shadow: 0 22px 48px rgba(24,33,45,.16);
}

.front-body .site-nav .nav-dropdown-menu a {
    color: #24313F !important;
}

.front-body .site-nav .nav-dropdown-menu a:hover,
.front-body .site-nav .nav-dropdown-menu a.active {
    background: rgba(93,113,83,.12) !important;
    color: #18212D !important;
}

.front-body .nav-submenu-group.active {
    background: rgba(201,138,46,.12) !important;
    border-color: rgba(201,138,46,.28) !important;
}

.front-body .language-switcher a.active,
.front-body[class*="theme-"] .language-switcher a.active {
    background: #C98A2E !important;
    color: #fff !important;
}

.front-body .primary-button,
.front-body[class*="theme-"] .primary-button,
.front-body .filter-bar button,
.front-body .chat-panel button,
.front-body .embedded-chat button {
    background: linear-gradient(135deg, #5D7153, #4E6350) !important;
    color: #fff !important;
    box-shadow: 0 14px 32px rgba(93,113,83,.28) !important;
}

.front-body .primary-button:hover,
.front-body[class*="theme-"] .primary-button:hover,
.front-body .filter-bar button:hover,
.front-body .chat-panel button:hover,
.front-body .embedded-chat button:hover {
    background: linear-gradient(135deg, #738A67, #5D7153) !important;
}

.front-body .site-footer,
.front-body .site-footer.footer-with-photo,
.front-body[class*="theme-"] .site-footer,
.front-body[class*="theme-"] .footer-with-photo {
    background: linear-gradient(135deg,#1E2A2F,#3B5245,#5D7153) !important;
    color: #fff !important;
}

.front-body .site-footer.footer-with-photo::before {
    background:
        radial-gradient(circle at 18% 12%, rgba(201,138,46,.20), transparent 34%),
        radial-gradient(circle at 86% 0%, rgba(255,255,255,.11), transparent 32%) !important;
}

.front-body .site-footer.footer-with-photo .footer-links a {
    border-color: rgba(255,255,255,.18) !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.055)),
        radial-gradient(circle at 18% 0%, rgba(201,138,46,.22), transparent 62%) !important;
}

.front-body .site-footer.footer-with-photo .footer-links a:hover,
.front-body .site-footer.footer-with-photo .footer-links a:focus-visible {
    border-color: rgba(201,138,46,.55) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 16px 34px rgba(24,33,45,.20) !important;
}

.admin-body {
    background:
        radial-gradient(circle at 8% 0%, rgba(93,113,83,.15), transparent 30%),
        linear-gradient(135deg, #eef3f0, #f7f8f6 42%, #e8f0ea) !important;
}

.admin-sidebar {
    background:
        linear-gradient(160deg, rgba(93,113,83,.16), transparent 28%),
        linear-gradient(180deg, #18212D 0%, #24313F 56%, #18212D 100%) !important;
    border-right: 1px solid rgba(201,138,46,.18);
    box-shadow: 18px 0 46px rgba(24,33,45,.20);
}

.admin-sidebar::before {
    background:
        radial-gradient(circle at 22% 6%, rgba(93,113,83,.24), transparent 34%),
        radial-gradient(circle at 84% 18%, rgba(201,138,46,.12), transparent 32%) !important;
}

.admin-sidebar .admin-brand,
.admin-user {
    background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(93,113,83,.10)) !important;
    border-color: rgba(255,255,255,.12) !important;
}

.admin-menu-heading {
    color: rgba(232,240,234,.72) !important;
}

.admin-menu-heading::before {
    background: #5D7153 !important;
    box-shadow: 0 0 0 4px rgba(93,113,83,.16) !important;
}

.admin-menu a {
    color: rgba(232,240,234,.86) !important;
}

.admin-menu a:hover {
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
}

.admin-menu a.active {
    background: linear-gradient(135deg, rgba(93,113,83,.34), rgba(36,49,63,.88)) !important;
    border-color: rgba(201,138,46,.30) !important;
    color: #fff !important;
    box-shadow: inset 4px 0 0 #C98A2E, 0 14px 32px rgba(0,0,0,.16) !important;
}

.admin-menu a.active::before,
.admin-menu a.active::after {
    background: #C98A2E !important;
}

.admin-menu a .menu-icon,
.admin-menu a.active .menu-icon {
    background: linear-gradient(135deg, rgba(93,113,83,.95), rgba(78,99,80,.85)) !important;
    border-color: rgba(201,138,46,.22) !important;
    color: #fff !important;
}

.admin-topbar,
.admin-body .admin-topbar {
    background: linear-gradient(135deg,#F6F7F8,#F4F6F4,#E8F0EA) !important;
    border-color: rgba(93,113,83,.18) !important;
    box-shadow: 0 16px 46px rgba(24,33,45,.10), inset 0 1px 0 rgba(255,255,255,.80) !important;
}

.admin-topbar::before,
.admin-body .admin-topbar::before {
    background: linear-gradient(90deg, #5D7153, #C98A2E, #738A67) !important;
}

.admin-topbar-icon,
.admin-body .admin-topbar-icon {
    background: linear-gradient(135deg, #5D7153, #4E6350) !important;
    color: #fff !important;
    box-shadow: 0 14px 32px rgba(93,113,83,.24) !important;
}

.admin-topbar-icon svg,
.admin-body .admin-topbar-icon svg {
    fill: #fff !important;
}

.admin-topbar-title p,
.admin-body .admin-topbar p {
    color: #5D7153 !important;
}

.admin-topbar-title h1,
.admin-body .admin-topbar h1 {
    color: #18212D !important;
}

.admin-session-panel,
.admin-body .admin-session-panel {
    background: rgba(255,255,255,.72) !important;
    border-color: rgba(93,113,83,.16) !important;
}

.admin-body .primary-button {
    background: linear-gradient(135deg, #5D7153, #4E6350) !important;
    box-shadow: 0 14px 32px rgba(93,113,83,.24) !important;
}

.admin-body .primary-button:hover {
    background: linear-gradient(135deg, #738A67, #5D7153) !important;
}

.admin-body .ghost-button:hover,
.admin-body .mini-admin-link:hover,
.admin-body .table-link:hover,
.admin-body .document-link:hover,
.admin-body .action-cell a:hover {
    border-color: rgba(93,113,83,.30) !important;
    color: #4E6350 !important;
}

.admin-body .status.success,
.admin-body .admin-online-chip {
    background: rgba(93,113,83,.12) !important;
    border-color: rgba(93,113,83,.28) !important;
    color: #3B5245 !important;
}

.admin-body .admin-footer-status {
    border-color: rgba(93,113,83,.18) !important;
    background: linear-gradient(135deg, rgba(246,247,248,.96), rgba(232,240,234,.92)) !important;
}

@media (max-width: 780px) {
    .front-body .site-nav {
        background: linear-gradient(135deg,#5D7153,#4E6350) !important;
        border-color: rgba(255,255,255,.16) !important;
    }

    .front-body .site-nav > a.active,
    .front-body .nav-dropdown.active > .nav-parent,
    .front-body .nav-dropdown.open > .nav-parent {
        background: #C98A2E !important;
    }
}

/* Back Panel solid sidebar icons - Font Awesome 6 compatible local fallback - 20260623 */
.admin-body .admin-fa-icon {
    display: inline-grid;
    place-items: center;
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    color: currentColor;
    font-size: inherit;
    line-height: 1;
}

.admin-body .admin-fa-icon::before {
    content: "";
    display: block;
    width: 1em;
    height: 1em;
    background: currentColor;
    -webkit-mask: var(--admin-fa-icon) center / contain no-repeat;
    mask: var(--admin-fa-icon) center / contain no-repeat;
}

.admin-body .admin-menu a {
    align-items: center;
}

.admin-body .admin-menu a .menu-icon,
.admin-body .admin-menu a.active .menu-icon {
    display: inline-grid !important;
    place-items: center !important;
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    color: #ffffff !important;
}

.admin-body .admin-menu .menu-icon .admin-fa-icon {
    width: 20px;
    height: 20px;
    font-size: 20px;
}

.admin-body .admin-topbar-icon .admin-fa-icon {
    width: 22px;
    height: 22px;
    font-size: 22px;
}

.admin-body .admin-menu-heading {
    display: flex !important;
    align-items: center;
    gap: .36rem;
}

.admin-body .admin-menu-heading::before {
    display: none !important;
}

.admin-body .admin-heading-icon {
    display: inline-grid;
    place-items: center;
    width: 14px;
    height: 14px;
    color: #C98A2E;
    opacity: .9;
}

.admin-body .admin-heading-icon .admin-fa-icon {
    width: 13px;
    height: 13px;
    font-size: 13px;
}

.admin-body .admin-user .admin-logout-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .32rem;
    white-space: nowrap;
}

.admin-body .admin-user .admin-logout-icon {
    display: inline-grid;
    place-items: center;
    width: 14px;
    height: 14px;
}

.admin-body .admin-user .admin-logout-icon .admin-fa-icon {
    width: 13px;
    height: 13px;
    font-size: 13px;
}

.admin-body .fa-house { --admin-fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 3 10.4V21h6v-6h6v6h6V10.4L12 3z'/%3E%3C/svg%3E"); }
.admin-body .fa-users { --admin-fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.5 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm7 0a3.4 3.4 0 1 0 0-6.8 3.4 3.4 0 0 0 0 6.8zM8.5 13C4.9 13 2 15 2 17.8V20h13v-2.2C15 15 12.1 13 8.5 13zm7 0c-.8 0-1.5.1-2.2.3 2.1 1 3.7 2.7 3.7 4.9V20h5v-2.1c0-2.8-2.9-4.9-6.5-4.9z'/%3E%3C/svg%3E"); }
.admin-body .fa-file-lines { --admin-fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h8l5 5v15H6V2zm7 1.5V8h4.5L13 3.5zM8 12h8v2H8v-2zm0 4h8v2H8v-2zm0-8h3v2H8V8z'/%3E%3C/svg%3E"); }
.admin-body .fa-newspaper { --admin-fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18v14H3V5zm3 3v5h6V8H6zm8 0v2h4V8h-4zm0 4v2h4v-2h-4zM6 16v1h12v-1H6z'/%3E%3C/svg%3E"); }
.admin-body .fa-award { --admin-fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a6.5 6.5 0 0 0-3.7 11.8L6 22l6-3.2 6 3.2-2.3-8.2A6.5 6.5 0 0 0 12 2zm0 4a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5z'/%3E%3C/svg%3E"); }
.admin-body .fa-location-dot { --admin-fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.3 7 13 7 13s7-7.7 7-13a7 7 0 0 0-7-7zm0 4.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5z'/%3E%3C/svg%3E"); }
.admin-body .fa-sitemap { --admin-fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 2h6v5H9V2zm2 7h2v3h7v3h-2v-1h-5v1h-2v-1H6v1H4v-3h7V9zM2 17h6v5H2v-5zm7 0h6v5H9v-5zm7 0h6v5h-6v-5z'/%3E%3C/svg%3E"); }
.admin-body .fa-building-columns { --admin-fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 3 6v3h18V6l-9-4zM5 11h3v7H5v-7zm5.5 0h3v7h-3v-7zm5.5 0h3v7h-3v-7zM3 20h18v2H3v-2z'/%3E%3C/svg%3E"); }
.admin-body .fa-hand-fist { --admin-fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3a2 2 0 0 1 4 0v5h1V3a2 2 0 0 1 4 0v5h1V5a2 2 0 0 1 4 0v6.5c0 5.4-3.6 9.5-9 9.5h-1c-4.4 0-8-3.6-8-8V8a2 2 0 0 1 4 0v4h1V3z'/%3E%3C/svg%3E"); }
.admin-body .fa-map-location-dot { --admin-fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3 3 5.5V21l6-2.5 6 2.5 6-2.5V3l-6 2.5L9 3zm6 4a4 4 0 0 1 4 4c0 3-4 7-4 7s-4-4-4-7a4 4 0 0 1 4-4zm0 2.3a1.7 1.7 0 1 0 0 3.4 1.7 1.7 0 0 0 0-3.4z'/%3E%3C/svg%3E"); }
.admin-body .fa-folder-open { --admin-fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h7l2 2h9v3H6.2L4 18V6H3zm3.8 7h16L20 21H4l2.8-8z'/%3E%3C/svg%3E"); }
.admin-body .fa-scale-balanced { --admin-fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 3h2v3h7v2h-2l3 6a4 4 0 0 1-8 0l3-6h-3v11h4v2H7v-2h4V8H8l3 6a4 4 0 0 1-8 0l3-6H4V6h7V3zM5 14h4L7 10l-2 4zm10 0h4l-2-4-2 4z'/%3E%3C/svg%3E"); }
.admin-body .fa-circle-play { --admin-fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zM9.5 7.5 16 12l-6.5 4.5v-9z'/%3E%3C/svg%3E"); }
.admin-body .fa-photo-film { --admin-fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h9v9H3V5zm11 0h7v3h-7V5zm0 5h7v4h-7v-4zM3 16h18v3H3v-3zm3-9v5l2-2 1.5 1.5L11 10V7H6z'/%3E%3C/svg%3E"); }
.admin-body .fa-envelope { --admin-fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18v14H3V5zm2 2v1.2l7 4.4 7-4.4V7H5zm0 3.5V17h14v-6.5l-7 4.4-7-4.4z'/%3E%3C/svg%3E"); }
.admin-body .fa-images { --admin-fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4h14v12H5V4zm-2 4h2v10h12v2H3V8zm5 1a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm-1 5h10l-3.5-4-2.5 3-1.5-1.8L7 14z'/%3E%3C/svg%3E"); }
.admin-body .fa-panorama { --admin-fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h18v12H3V6zm2 9h14l-4.5-5-3 3.5-2-2.5L5 15z'/%3E%3C/svg%3E"); }
.admin-body .fa-video { --admin-fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h12a2 2 0 0 1 2 2v1.5L21 7v10l-4-2.5V16a2 2 0 0 1-2 2H3V6z'/%3E%3C/svg%3E"); }
.admin-body .fa-palette { --admin-fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a9 9 0 0 0 0 18h1.5a2 2 0 0 0 1.3-3.5 1.5 1.5 0 0 1 1-2.7H18A4 4 0 0 0 22 11c0-4.4-4.5-8-10-8zM7 12a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm3-4a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm2 4a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z'/%3E%3C/svg%3E"); }
.admin-body .fa-robot { --admin-fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 2h2v3h4a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V8a3 3 0 0 1 3-3h4V2zM8 10a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm8 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM8 16h8v2H8v-2z'/%3E%3C/svg%3E"); }
.admin-body .fa-clock-rotate-left { --admin-fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4a8 8 0 1 1-7.4 5H2l3.5-4L9 9H6.8A6 6 0 1 0 12 6V4zm-1 4h2v5l4 2-1 1.7-5-2.7V8z'/%3E%3C/svg%3E"); }
.admin-body .fa-gears { --admin-fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 3h4l.6 2 2 .8 1.8-1 2.8 2.8-1 1.8.8 2 2 .6v4l-2 .6-.8 2 1 1.8-2.8 2.8-1.8-1-2 .8-.6 2h-4l-.6-2-2-.8-1.8 1-2.8-2.8 1-1.8-.8-2-2-.6v-4l2-.6.8-2-1-1.8 2.8-2.8 1.8 1 2-.8L10 3zm2 6a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'/%3E%3C/svg%3E"); }
.admin-body .fa-power-off { --admin-fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 2h2v10h-2V2zM7.4 5.4l1.4 1.4A7 7 0 1 0 15.2 7l1.4-1.4A9 9 0 1 1 7.4 5.4z'/%3E%3C/svg%3E"); }
.admin-body .fa-key { --admin-fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 4a6 6 0 1 0 1.2 7.8L17 10h2v-2h2V6h-5.8A6 6 0 0 0 14 4zM8 8a2 2 0 1 1 0 4 2 2 0 0 1 0-4z'/%3E%3C/svg%3E"); }
.admin-body .fa-pen-to-square { --admin-fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3h10l6 6v11a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm9 1.5V10h5.5L13 4.5zM7 17.8V20h2.2l6.5-6.5-2.2-2.2L7 17.8zm7.6-7.6 2.2 2.2 1.2-1.2a1.55 1.55 0 0 0-2.2-2.2l-1.2 1.2z'/%3E%3C/svg%3E"); }
.admin-body .fa-trash-can { --admin-fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3h6l1 2h4v2H4V5h4l1-2zm-3 5h12l-1 14H7L6 8zm4 3v8h2v-8h-2zm4 0v8h2v-8h-2z'/%3E%3C/svg%3E"); }
.admin-body .fa-eye { --admin-fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5C5.8 5 2.2 10.1 1 12c1.2 1.9 4.8 7 11 7s9.8-5.1 11-7c-1.2-1.9-4.8-7-11-7zm0 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-2.2a1.8 1.8 0 1 0 0-3.6 1.8 1.8 0 0 0 0 3.6z'/%3E%3C/svg%3E"); }

/* Back Panel sidebar icon polish: plain KPI-like icons, no icon card - 20260623 */
@media (min-width: 781px) {
    .admin-body {
        grid-template-columns: 292px minmax(0, 1fr) !important;
    }
}

.admin-body .admin-menu {
    padding-right: .18rem !important;
}

.admin-body .admin-menu a {
    min-width: 0;
    min-height: 42px !important;
    align-items: center !important;
    gap: .58rem !important;
    padding: .48rem .62rem !important;
    overflow: hidden;
}

.admin-body .admin-menu a .menu-icon,
.admin-body .admin-menu a:hover .menu-icon,
.admin-body .admin-menu a.active .menu-icon {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
    display: inline-grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--menu-accent, #C98A2E) !important;
}

.admin-body .admin-menu .menu-icon .admin-fa-icon,
.admin-body .admin-menu a:hover .menu-icon .admin-fa-icon,
.admin-body .admin-menu a.active .menu-icon .admin-fa-icon {
    width: 19px !important;
    height: 19px !important;
    font-size: 19px !important;
    filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--menu-accent, #C98A2E) 24%, transparent));
}

.admin-body .admin-menu a:hover .menu-icon,
.admin-body .admin-menu a.active .menu-icon {
    transform: translateX(1px) scale(1.04);
}

.admin-body .admin-menu .menu-label {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    color: inherit;
    font-size: .74rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
}

.admin-body .admin-menu-heading {
    overflow: hidden;
    white-space: nowrap;
}

.admin-body .admin-menu-heading > span:last-child {
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
}

.admin-body .admin-heading-icon,
.admin-body .admin-heading-icon .admin-fa-icon {
    color: #C98A2E !important;
}

@media (max-width: 780px) {
    .admin-body .admin-menu .menu-label {
        white-space: normal !important;
        line-height: 1.12 !important;
    }
}

/* Back Panel sidebar group captions must be fully visible - 20260623 */
.admin-body .admin-menu-group,
.admin-body .admin-menu-heading,
.admin-body .admin-menu-heading > span {
    max-width: none !important;
}

.admin-body .admin-menu-heading {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 20px !important;
    gap: .32rem !important;
    padding: 0 .5rem !important;
    overflow: visible !important;
    color: rgba(232, 240, 234, .78) !important;
    font-size: .52rem !important;
    font-weight: 950 !important;
    letter-spacing: .075em !important;
    line-height: 1.15 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

.admin-body .admin-menu-heading > span:last-child {
    display: inline-block !important;
    flex: 0 0 auto !important;
    min-width: max-content !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
}

.admin-body .admin-heading-icon {
    flex: 0 0 13px !important;
    width: 13px !important;
    height: 13px !important;
}

.admin-body .admin-heading-icon .admin-fa-icon {
    width: 12px !important;
    height: 12px !important;
    font-size: 12px !important;
}

/* Back Panel sidebar group headings: plain executive labels, no badge/card - 20260623 */
.admin-body .admin-menu-group {
    position: relative;
    gap: .22rem !important;
    padding: .24rem 0 .34rem !important;
}

.admin-body .admin-menu-group + .admin-menu-group {
    margin-top: .04rem !important;
    padding-top: .38rem !important;
    border-top: 1px solid rgba(232, 240, 234, .10) !important;
}

.admin-body .admin-menu-group + .admin-menu-group::before {
    display: none !important;
}

.admin-body .admin-menu-heading,
.admin-body .admin-menu-group:has(a.active) .admin-menu-heading {
    display: block !important;
    width: 100% !important;
    min-height: auto !important;
    padding: 0 .68rem .18rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(232, 240, 234, .58) !important;
    font-size: .56rem !important;
    font-weight: 900 !important;
    letter-spacing: .16em !important;
    line-height: 1.25 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    overflow: visible !important;
}

.admin-body .admin-menu-heading::before,
.admin-body .admin-menu-heading::after,
.admin-body .admin-menu-group:has(a.active) .admin-menu-heading::before,
.admin-body .admin-menu-group:has(a.active) .admin-menu-heading::after {
    display: none !important;
    content: none !important;
}

/* Front leadership daily managers: user avatars from Master User - 20260623 */
.front-body .daily-manager-item {
    position: relative;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: .82rem !important;
    min-height: 82px !important;
    padding: .78rem .74rem .78rem .88rem !important;
    overflow: hidden;
    background:
        radial-gradient(circle at 100% 0, rgba(93,113,83,.10), transparent 36%),
        linear-gradient(135deg, rgba(255,255,255,.94), rgba(248,250,252,.78)) !important;
    border-color: rgba(93,113,83,.16) !important;
    box-shadow: 0 16px 34px rgba(23,36,63,.07) !important;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.front-body .daily-manager-item:hover {
    transform: translateY(-2px);
    border-color: rgba(201,138,46,.30) !important;
    box-shadow: 0 20px 42px rgba(23,36,63,.11) !important;
}

.front-body .daily-manager-copy {
    position: relative;
    z-index: 1;
    display: grid;
    gap: .26rem;
    min-width: 0;
}

.front-body .daily-manager-copy span {
    display: block;
    color: rgba(23,36,63,.58);
    font-size: .66rem;
    font-weight: 950;
    letter-spacing: .095em;
    line-height: 1.18;
    text-transform: uppercase;
}

.front-body .daily-manager-copy strong {
    display: block;
    max-width: 100%;
    color: #111827;
    font-size: .9rem;
    font-weight: 950;
    line-height: 1.28;
    overflow-wrap: anywhere;
    word-break: normal;
}

.front-body .daily-manager-avatars {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    min-width: 54px;
}

.front-body .daily-manager-avatars img {
    width: 52px;
    height: 52px;
    margin-left: -12px;
    border: 2px solid rgba(255,255,255,.96);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 12px 26px rgba(23,36,63,.18);
    object-fit: cover;
}

.front-body .daily-manager-avatars img:first-child {
    margin-left: 0;
}

.front-body .daily-manager-avatars img.is-fallback {
    padding: 6px;
    object-fit: contain;
    box-shadow: 0 10px 22px rgba(93,113,83,.16);
}

.front-body .daily-manager-avatars em {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-left: -10px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #C98A2E;
    color: #fff;
    font-size: .72rem;
    font-style: normal;
    font-weight: 950;
    box-shadow: 0 10px 22px rgba(201,138,46,.22);
}

@media (max-width: 760px) {
    .front-body .daily-manager-item {
        min-height: 76px !important;
        padding: .72rem !important;
    }

    .front-body .daily-manager-copy strong {
        font-size: .86rem;
    }

    .front-body .daily-manager-avatars {
        min-width: 46px;
    }

    .front-body .daily-manager-avatars img {
        width: 44px;
        height: 44px;
        margin-left: -9px;
    }
}

/* Account security: change password page - 20260628 */
.admin-body .change-password-card {
    border-top: 4px solid #C98A2E;
}

.admin-body .password-input-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .55rem;
}

.admin-body .password-input-wrap input {
    min-width: 0;
}

.admin-body .password-input-wrap button {
    align-self: stretch;
    border: 1px solid rgba(93,113,83,.22);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(232,240,234,.78));
    color: #24313F;
    cursor: pointer;
    font-size: .76rem;
    font-weight: 900;
    padding: 0 .86rem;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.admin-body .password-input-wrap button:hover {
    border-color: rgba(201,138,46,.44);
    box-shadow: 0 10px 24px rgba(36,49,63,.10);
    transform: translateY(-1px);
}

.admin-body .password-strength-meter {
    display: grid;
    gap: .38rem;
    margin: -.25rem 0 .7rem;
}

.admin-body .password-strength-meter span {
    display: block;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #e5e7eb;
}

.admin-body .password-strength-meter span::before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ef4444, #f59e0b, #22c55e);
    transition: width .2s ease;
}

.admin-body .password-strength-meter[data-score="1"] span::before { width: 20%; }
.admin-body .password-strength-meter[data-score="2"] span::before { width: 40%; }
.admin-body .password-strength-meter[data-score="3"] span::before { width: 60%; }
.admin-body .password-strength-meter[data-score="4"] span::before { width: 80%; }
.admin-body .password-strength-meter[data-score="5"] span::before { width: 100%; }

.admin-body .password-strength-meter em,
.admin-body [data-password-match] {
    color: #64748b;
    font-size: .78rem;
    font-style: normal;
    font-weight: 800;
}

.admin-body [data-password-match].is-valid {
    color: #15803d;
}

.admin-body [data-password-match].is-invalid {
    color: #b91c1c;
}

.admin-body .password-security-note ul {
    display: grid;
    gap: .7rem;
    margin: 0;
    padding-left: 1.1rem;
    color: #475569;
    font-weight: 700;
    line-height: 1.55;
}

/* Executive GIS compact layout: hero, filter, and live map fit better on desktop - 20260628 */
.front-body .gis-hero {
    width: min(1600px, calc(100% - 2.2rem));
    min-height: 128px;
    margin: .72rem auto .62rem;
    padding: clamp(.7rem, 1.22vw, 1rem) clamp(.95rem, 2vw, 1.45rem);
    gap: .8rem;
    border-radius: 24px;
    box-shadow: 0 18px 46px rgba(15, 23, 42, .13), inset 0 1px 0 rgba(255,255,255,.42);
}

.front-body .gis-hero h1 {
    margin: .08rem 0 .22rem;
    font-size: clamp(1.95rem, 3.05vw, 3.55rem);
    line-height: .98;
}

.front-body .gis-hero-content {
    max-width: 1120px;
}

.front-body .gis-hero-content > p:last-of-type {
    max-width: 900px;
    font-size: .82rem;
    line-height: 1.35;
}

.front-body .gis-hero .section-eyebrow {
    margin-bottom: .06rem;
    font-size: .72rem;
}

.front-body .gis-hero-stats {
    grid-template-columns: repeat(4, minmax(104px, 1fr));
    gap: .38rem;
    max-width: 660px;
    margin-top: .46rem;
}

.front-body .gis-hero-stats span {
    min-height: 48px;
    padding: .44rem .58rem;
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.62), 0 10px 22px rgba(15,23,42,.07);
}

.front-body .gis-hero-stats strong {
    font-size: clamp(.95rem, 1.42vw, 1.22rem);
}

.front-body .gis-hero-stats small {
    margin-top: .18rem;
    font-size: .58rem;
    letter-spacing: .065em;
}

.front-body .gis-hero-badge,
.front-body .gis-map-toolbar > span {
    padding: .54rem .78rem;
    font-size: .82rem;
}

.front-body .gis-shell {
    width: min(1600px, calc(100% - 2.2rem));
    grid-template-columns: minmax(250px, 318px) minmax(0, 1fr);
    gap: .72rem;
    margin: 0 auto 1.4rem;
}

.front-body .gis-panel,
.front-body .gis-map-card {
    border-radius: 20px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .075);
}

.front-body .gis-panel {
    padding: .72rem;
    top: 4.5rem;
}

.front-body .gis-panel-head,
.front-body .gis-map-toolbar {
    gap: .56rem;
}

.front-body .gis-panel-icon {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 13px;
    box-shadow: 0 10px 20px rgba(14, 165, 233, .18);
}

.front-body .gis-panel-icon-image img {
    width: 1.55rem;
    height: 1.55rem;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(15,23,42,.16));
}

.front-body .gis-panel h2,
.front-body .gis-map-toolbar h2 {
    font-size: 1rem;
}

.front-body .gis-panel p,
.front-body .gis-map-toolbar p {
    margin-top: .04rem;
    font-size: .78rem;
    line-height: 1.32;
}

.front-body .gis-filter {
    gap: .46rem;
    margin-top: .68rem;
}

.front-body .gis-filter label {
    gap: .22rem;
    font-size: .62rem;
    letter-spacing: .055em;
}

.front-body .gis-filter select,
.front-body .gis-filter button {
    min-height: 36px;
    border-radius: 11px;
    padding: .42rem .58rem;
    font-size: .78rem;
}

.front-body .gis-filter button {
    box-shadow: 0 10px 20px rgba(22, 163, 74, .18);
}

.front-body .gis-summary {
    gap: .42rem;
    margin-top: .66rem;
}

.front-body .gis-summary article {
    min-height: 58px;
    padding: .54rem;
    border-radius: 13px;
}

.front-body .gis-summary span {
    font-size: .56rem;
}

.front-body .gis-summary strong {
    margin-top: .14rem;
    font-size: 1.18rem;
}

.front-body .gis-legend {
    gap: .24rem;
    margin-top: .62rem;
    font-size: .7rem;
}

.front-body .gis-legend span {
    gap: .34rem;
}

.front-body .gis-legend i {
    width: .54rem;
    height: .54rem;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot) 16%, transparent);
}

.front-body .gis-map-card {
    position: relative;
    padding: .72rem;
    overflow: hidden;
}

.front-body .gis-map-toolbar {
    min-height: 44px;
    padding: .05rem .05rem .54rem;
}

.front-body .gis-map {
    min-height: clamp(380px, 42vh, 470px);
    border-radius: 18px;
}

.front-body .gis-map-watermark {
    position: absolute;
    left: .72rem;
    right: .72rem;
    top: 4.25rem;
    height: clamp(380px, 42vh, 470px);
    z-index: 12;
    display: grid;
    place-items: center;
    pointer-events: none;
    overflow: hidden;
    border-radius: 18px;
}

.front-body .gis-map-watermark img {
    position: absolute;
    width: clamp(96px, 11vw, 180px);
    height: auto;
    opacity: .10;
    filter: grayscale(.1) saturate(.82) drop-shadow(0 12px 18px rgba(15,23,42,.08));
    transform: translateY(-.25rem);
}

.front-body .gis-map-watermark strong {
    position: relative;
    color: rgba(15, 23, 42, .10);
    font-family: var(--serif);
    font-size: clamp(3.2rem, 8vw, 8.6rem);
    font-weight: 900;
    letter-spacing: .08em;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    text-shadow:
        0 1px 0 rgba(255,255,255,.72),
        0 -1px 0 rgba(15,23,42,.10),
        0 18px 34px rgba(15,23,42,.08);
}

.front-body .gis-popup-dock {
    margin-top: .68rem;
}

@media (min-width: 1500px) and (max-height: 1100px) {
    .front-body .gis-hero {
        min-height: 126px;
    }

    .front-body .gis-map,
    .front-body .gis-map-watermark {
        height: 460px;
        min-height: 460px;
    }
}

@media (max-width: 1180px) {
    .front-body .gis-shell {
        grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    }

    .front-body .gis-map,
    .front-body .gis-map-watermark {
        min-height: 450px;
        height: 450px;
    }
}

@media (max-width: 980px) {
    .front-body .gis-shell {
        grid-template-columns: 1fr;
    }

    .front-body .gis-panel {
        position: static;
    }

    .front-body .gis-filter {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: end;
    }

    .front-body .gis-filter button {
        grid-column: auto;
    }

    .front-body .gis-summary,
    .front-body .gis-legend {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .front-body .gis-map-watermark {
        top: 4.1rem;
    }
}

@media (max-width: 760px) {
    .front-body .gis-hero,
    .front-body .gis-shell {
        width: min(100% - 1rem, 100%);
    }

    .front-body .gis-hero {
        flex-direction: column;
        align-items: flex-start;
        margin-top: .72rem;
        padding: .9rem;
        min-height: auto;
        border-radius: 20px;
    }

    .front-body .gis-hero h1 {
        font-size: clamp(2rem, 12vw, 3.6rem);
    }

    .front-body .gis-hero-stats,
    .front-body .gis-filter,
    .front-body .gis-summary,
    .front-body .gis-legend {
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .front-body .gis-filter button {
        grid-column: 1 / -1;
    }

    .front-body .gis-map-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .front-body .gis-map,
    .front-body .gis-map-watermark {
        min-height: 390px;
        height: 390px;
    }

    .front-body .gis-map-watermark {
        top: 5.85rem;
    }
}

@media (max-width: 460px) {
    .front-body .gis-hero-stats,
    .front-body .gis-filter,
    .front-body .gis-summary,
    .front-body .gis-legend {
        grid-template-columns: 1fr;
    }

    .front-body .gis-map,
    .front-body .gis-map-watermark {
        min-height: 340px;
        height: 340px;
    }
}

/* Front End Executive Chart: Pemetaan Status 38 Pengkab/Kota - 20260709 */
.front-body .chapter-executive-chart {
    width: min(1540px, calc(100% - 2rem));
    padding: clamp(1.6rem, 3vw, 2.35rem) !important;
    border: 1px solid rgba(36, 49, 63, .10);
    border-radius: 30px;
    background:
        radial-gradient(circle at 5% 10%, rgba(201, 138, 46, .15), transparent 28%),
        radial-gradient(circle at 95% 12%, rgba(93, 113, 83, .18), transparent 30%),
        linear-gradient(135deg, rgba(255,255,255,.94), rgba(246,247,248,.76) 48%, rgba(232,240,234,.82));
    box-shadow: 0 28px 82px rgba(24, 33, 45, .13);
}

.front-body .chapter-executive-chart::before {
    background:
        linear-gradient(90deg, rgba(93,113,83,.10), transparent 34%, rgba(201,138,46,.12)),
        repeating-linear-gradient(90deg, rgba(36,49,63,.035) 0 1px, transparent 1px 88px);
}

.front-body .chapter-executive-chart .chapter-insight-head {
    align-items: center;
    margin-bottom: clamp(1rem, 2vw, 1.45rem);
}

.front-body .chapter-executive-chart .chapter-insight-head .eyebrow {
    color: #0f7a50;
    font-size: .78rem;
}

.front-body .chapter-executive-chart .chapter-insight-head h2 {
    max-width: 980px;
    margin: .16rem 0 .5rem;
    color: #111827;
    font-family: var(--font-body);
    font-size: clamp(2rem, 3.3vw, 3.65rem);
    font-weight: 950;
    letter-spacing: -.015em;
    line-height: 1.05;
}

.front-body .chapter-executive-chart .chapter-insight-head p:not(.eyebrow) {
    max-width: 900px;
    color: rgba(36,49,63,.72);
    font-size: .96rem;
    font-weight: 650;
    line-height: 1.56;
}

.front-body .chapter-executive-chart .chapter-insight-head .ghost-button {
    min-width: 152px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.58));
    border-color: rgba(122, 36, 40, .16);
    color: #4b1016;
    box-shadow: 0 16px 36px rgba(24,33,45,.10);
}

.front-body.home-page .chapter-executive-chart .chapter-insight-head .index-cta-map,
.front-body.home-page .chapter-executive-chart .chapter-insight-head .index-cta-map span {
    color: #4b1016 !important;
}

.front-body .chapter-executive-chart .chapter-insight-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 1.8vw, 1.35rem);
    align-items: stretch;
}

.front-body .chapter-executive-chart .chapter-executive-card {
    min-height: 0;
    padding: clamp(1.05rem, 1.7vw, 1.35rem);
    border: 1px solid rgba(36,49,63,.10);
    border-radius: 28px;
    background:
        radial-gradient(circle at 94% 10%, color-mix(in srgb, var(--card-accent, #5D7153) 16%, transparent), transparent 28%),
        linear-gradient(145deg, rgba(255,255,255,.88), rgba(255,255,255,.68));
    box-shadow: 0 24px 60px rgba(24,33,45,.12), inset 0 1px 0 rgba(255,255,255,.72);
    backdrop-filter: blur(14px);
}

.front-body .chapter-executive-chart .chapter-summary-card { --card-accent: #5D7153; }
.front-body .chapter-executive-chart .chapter-rank-card { --card-accent: #C98A2E; }
.front-body .chapter-executive-chart .chapter-composition-card { --card-accent: #33527c; }

.front-body .chapter-executive-chart .chapter-executive-card::before {
    height: 4px;
    background: linear-gradient(90deg, var(--card-accent, #5D7153), color-mix(in srgb, var(--card-accent, #5D7153) 54%, #ffffff));
}

.front-body .chapter-executive-chart .chart-card-title {
    margin-bottom: 1rem;
}

.front-body .chapter-executive-chart .chart-card-title span {
    color: color-mix(in srgb, var(--card-accent, #5D7153) 78%, #111827);
    font-size: .72rem;
    letter-spacing: .14em;
}

.front-body .chapter-executive-chart .chart-card-title strong {
    min-width: 76px;
    padding: .44rem .68rem;
    border: 1px solid color-mix(in srgb, var(--card-accent, #5D7153) 22%, transparent);
    border-radius: 999px;
    background: rgba(255,255,255,.74);
    color: #111827;
    font-size: .9rem;
    text-align: center;
    box-shadow: 0 12px 24px rgba(24,33,45,.08);
}

.front-body .chapter-executive-chart .chapter-summary-meter,
.front-body .chapter-executive-chart .chapter-bars,
.front-body .chapter-executive-chart .chapter-composition-card {
    gap: .78rem;
}

.front-body .chapter-executive-chart .chapter-summary-main {
    position: relative;
    overflow: hidden;
    min-height: 158px;
    padding: 1rem 1rem 1.08rem;
    border: 1px solid rgba(93,113,83,.18);
    border-radius: 24px;
    background:
        radial-gradient(circle at 92% 18%, rgba(93,113,83,.22), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,.86), rgba(240,246,238,.72));
}

.front-body .chapter-executive-chart .chapter-summary-main::after {
    content: "";
    position: absolute;
    right: 1rem;
    top: 1rem;
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(93,113,83,.95), rgba(47,143,136,.78));
    box-shadow: 0 16px 30px rgba(93,113,83,.22);
}

.front-body .chapter-executive-chart .chapter-summary-main span {
    color: rgba(36,49,63,.62);
    font-size: .76rem;
}

.front-body .chapter-executive-chart .chapter-summary-main strong {
    margin: .34rem 0 .12rem;
    color: #111827;
    font-family: var(--font-body);
    font-size: clamp(3.25rem, 6vw, 5.25rem);
    letter-spacing: -.04em;
}

.front-body .chapter-executive-chart .chapter-summary-main small {
    color: rgba(36,49,63,.68);
    font-size: .84rem;
}

.front-body .chapter-executive-chart .chapter-summary-main em {
    display: inline-flex;
    width: max-content;
    margin-top: .68rem;
    padding: .36rem .62rem;
    border-radius: 999px;
    background: rgba(93,113,83,.12);
    color: #3f5a35;
    font-size: .78rem;
    font-style: normal;
    font-weight: 950;
}

.front-body .chapter-executive-chart .chapter-summary-row,
.front-body .chapter-executive-chart .chapter-bar-row {
    border-left-width: 0;
    border-color: color-mix(in srgb, var(--chart-color, #5D7153) 22%, rgba(36,49,63,.08));
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--chart-color, #5D7153) 11%, #ffffff), rgba(255,255,255,.70));
    box-shadow: 0 12px 28px rgba(24,33,45,.07), inset 0 1px 0 rgba(255,255,255,.78);
}

.front-body .chapter-executive-chart .chapter-summary-row {
    padding: .72rem;
    border-radius: 18px;
}

.front-body .chapter-executive-chart .chapter-summary-row.army { --chart-color: #5D7153; }
.front-body .chapter-executive-chart .chapter-summary-row.orange { --chart-color: #C98A2E; }
.front-body .chapter-executive-chart .chapter-summary-row.pink { --chart-color: #7A2428; }

.front-body .chapter-executive-chart .chapter-summary-row > div,
.front-body .chapter-executive-chart .chapter-bar-row > div {
    align-items: center;
}

.front-body .chapter-executive-chart .chapter-summary-row span,
.front-body .chapter-executive-chart .chapter-bar-row span {
    display: grid;
    gap: .12rem;
    color: #111827;
    font-size: .86rem;
    font-weight: 950;
    line-height: 1.22;
}

.front-body .chapter-executive-chart .chapter-bar-row span small {
    color: rgba(36,49,63,.58);
    font-size: .68rem;
    font-weight: 800;
}

.front-body .chapter-executive-chart .chapter-summary-row b,
.front-body .chapter-executive-chart .chapter-bar-row b {
    display: inline-grid;
    place-items: center;
    min-width: 38px;
    height: 38px;
    padding: 0 .58rem;
    border: 1px solid color-mix(in srgb, var(--chart-color, #5D7153) 20%, #ffffff);
    border-radius: 13px;
    background: linear-gradient(135deg, var(--chart-color, #5D7153), color-mix(in srgb, var(--chart-color, #5D7153) 72%, #111827));
    color: #fff;
    font-size: 1.02rem;
    box-shadow: 0 14px 28px color-mix(in srgb, var(--chart-color, #5D7153) 20%, transparent);
}

.front-body .chapter-executive-chart .chapter-summary-row > i,
.front-body .chapter-executive-chart .chapter-bar-row > i {
    height: 9px;
    background: rgba(36,49,63,.10);
}

.front-body .chapter-executive-chart .chapter-summary-row > i span,
.front-body .chapter-executive-chart .chapter-bar-row > i span {
    min-width: 8px;
    background: linear-gradient(90deg, var(--chart-color, #5D7153), color-mix(in srgb, var(--chart-color, #5D7153) 62%, #ffffff)) !important;
}

.front-body .chapter-executive-chart .chapter-bar-row {
    padding: .78rem;
    border-radius: 18px;
}

.front-body .chapter-executive-chart .chapter-bar-row em {
    color: rgba(36,49,63,.58);
    font-size: .7rem;
    font-style: normal;
    font-weight: 850;
}

.front-body .chapter-executive-chart .chapter-composition-meter {
    padding: 1rem;
    border-radius: 24px;
    border-color: rgba(51,82,124,.14);
    background:
        radial-gradient(circle at 100% 0, rgba(51,82,124,.16), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,.86), rgba(241,245,249,.68));
}

.front-body .chapter-executive-chart .chapter-composition-total span {
    color: rgba(36,49,63,.62);
    font-size: .76rem;
}

.front-body .chapter-executive-chart .chapter-composition-total strong {
    color: #111827;
    font-family: var(--font-body);
    font-size: clamp(3rem, 5.6vw, 4.7rem);
}

.front-body .chapter-executive-chart .chapter-stack-bar {
    height: 24px;
    border: 1px solid rgba(36,49,63,.08);
    background: rgba(36,49,63,.08);
    box-shadow: inset 0 1px rgba(255,255,255,.72), 0 12px 26px rgba(24,33,45,.08);
}

.front-body .chapter-executive-chart .chapter-composition-meter p {
    color: rgba(36,49,63,.70);
    font-size: .86rem;
    font-weight: 800;
}

.front-body .chapter-executive-chart .chapter-chart-legend {
    grid-template-columns: 1fr 1fr;
    gap: .52rem;
}

.front-body .chapter-executive-chart .chapter-chart-legend span {
    min-height: 38px;
    padding: .46rem .56rem;
    border: 1px solid rgba(36,49,63,.08);
    border-radius: 14px;
    background: rgba(255,255,255,.66);
    color: #24313F;
    font-size: .78rem;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}

.front-body .chapter-executive-chart .chapter-chart-legend i {
    width: .64rem;
    height: .64rem;
    box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 8%, transparent);
}

/* Back Panel Status Pengkab/Kota: executive polish, data source unchanged - 20260709 */
.admin-body .chapter-kpi.chart-kpi {
    background:
        radial-gradient(circle at 95% 0, rgba(93,113,83,.13), transparent 28%),
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(248,250,252,.86));
}

.admin-body .chapter-kpi .chapter-status-card {
    border-left-width: 0 !important;
    border-color: color-mix(in srgb, var(--status-color) 28%, rgba(148,163,184,.28)) !important;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--status-color) 12%, #ffffff), rgba(255,255,255,.76)) !important;
    box-shadow: 0 12px 26px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.72) !important;
}

.admin-body .chapter-kpi .chapter-status-icon {
    border-radius: 14px !important;
    background: linear-gradient(135deg, var(--status-color), color-mix(in srgb, var(--status-color) 72%, #111827)) !important;
    box-shadow: 0 12px 24px color-mix(in srgb, var(--status-color) 22%, transparent) !important;
}

.admin-body .chapter-kpi .chapter-status-card strong {
    display: inline-grid;
    place-items: center;
    min-width: 38px;
    height: 34px;
    border: 1px solid color-mix(in srgb, var(--status-color) 18%, #ffffff);
    border-radius: 12px;
    background: rgba(255,255,255,.82);
    box-shadow: 0 10px 22px rgba(15,23,42,.08);
}

.admin-body .chapter-kpi .chapter-status-progress {
    height: 8px !important;
}

.admin-body .chapter-kpi .chapter-status-progress i {
    background: linear-gradient(90deg, var(--status-color), color-mix(in srgb, var(--status-color) 62%, #ffffff)) !important;
}

@media (max-width: 1080px) {
    .front-body .chapter-executive-chart .chapter-insight-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .front-body .chapter-executive-chart .chapter-composition-card {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .front-body .chapter-executive-chart {
        width: min(100% - 1rem, 100%);
        padding: 1rem !important;
        border-radius: 22px;
    }

    .front-body .chapter-executive-chart .chapter-insight-head {
        align-items: flex-start;
    }

    .front-body .chapter-executive-chart .chapter-insight-grid,
    .front-body .chapter-executive-chart .chapter-chart-legend {
        grid-template-columns: 1fr;
    }

    .front-body .chapter-executive-chart .chapter-composition-card {
        grid-column: auto;
    }
}

/* IPSI-inspired Executive Chart model for ASAD chapter status - 20260709 */
.front-body .chapter-executive-chart {
    width: min(1480px, calc(100% - 2rem)) !important;
    padding: clamp(1.35rem, 2.4vw, 2rem) !important;
    border-radius: 30px !important;
    background:
        radial-gradient(circle at 10% 0, rgba(201,138,46,.16), transparent 30%),
        radial-gradient(circle at 90% 8%, rgba(93,113,83,.14), transparent 28%),
        linear-gradient(135deg, #fffaf1 0%, #f6efe3 46%, #fffdf7 100%) !important;
    box-shadow: 0 30px 80px rgba(47, 31, 21, .12) !important;
}

.front-body .chapter-executive-chart .chapter-insight-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: start !important;
    margin-bottom: clamp(.95rem, 1.7vw, 1.25rem) !important;
}

.front-body .chapter-executive-chart .chapter-insight-head .eyebrow {
    margin-bottom: .45rem;
    color: #0b7a4f !important;
    font-size: .86rem;
    letter-spacing: .12em;
}

.front-body .chapter-executive-chart .chapter-insight-head h2 {
    max-width: 1040px !important;
    color: #211815 !important;
    font-size: clamp(2rem, 2.85vw, 3.25rem) !important;
    font-weight: 950 !important;
    line-height: 1.08 !important;
}

.front-body .chapter-executive-chart .chapter-insight-head p:not(.eyebrow) {
    max-width: 960px !important;
    color: rgba(54,43,39,.72) !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
}

.front-body.home-page .chapter-executive-chart .chapter-insight-head .index-cta-map {
    min-width: 180px;
    min-height: 54px;
    align-self: center;
    justify-self: end;
    margin-right: .15rem;
    border: 1px solid rgba(122,36,40,.12) !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,247,237,.78)) !important;
    box-shadow: 0 18px 38px rgba(122,36,40,.12), inset 0 1px 0 rgba(255,255,255,.75) !important;
    color: #4b1016 !important;
}

.front-body .chapter-executive-chart .chapter-insight-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(.9rem, 1.7vw, 1.25rem) !important;
    min-width: 0 !important;
    overflow: hidden;
}

.front-body .chapter-executive-chart .chapter-visual-card {
    position: relative;
    display: grid;
    grid-template-rows: auto auto auto minmax(190px, 1fr);
    min-height: 370px !important;
    padding: clamp(1rem, 1.55vw, 1.28rem) !important;
    overflow: hidden;
    min-width: 0 !important;
    border: 1px solid rgba(54,43,39,.10) !important;
    border-radius: 28px !important;
    background:
        radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--card-accent, #5D7153) 15%, transparent), transparent 28%),
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,255,255,.80)) !important;
    box-shadow: 0 22px 55px rgba(47,31,21,.11), inset 0 1px 0 rgba(255,255,255,.78) !important;
}

.front-body .chapter-executive-chart .chapter-visual-card::before {
    height: 0 !important;
}

.front-body .chapter-executive-chart .chapter-card-kicker {
    color: color-mix(in srgb, var(--card-accent, #5D7153) 88%, #211815);
    font-size: .78rem;
    font-weight: 950;
    letter-spacing: .12em;
    line-height: 1;
    text-transform: uppercase;
}

.front-body .chapter-executive-chart .chapter-visual-card h3 {
    max-width: calc(100% - 86px);
    margin: .62rem 0 .35rem;
    color: #4b1016;
    font-family: var(--font-body);
    font-size: clamp(1.18rem, 1.7vw, 1.72rem);
    font-weight: 950;
    letter-spacing: -.015em;
    line-height: 1.08;
}

.front-body .chapter-executive-chart .chapter-visual-card p {
    max-width: calc(100% - 76px);
    min-height: 38px;
    margin: 0 0 .75rem;
    color: rgba(54,43,39,.68);
    font-size: .92rem;
    font-weight: 650;
    line-height: 1.45;
}

.front-body .chapter-executive-chart .chapter-card-badge {
    position: absolute;
    top: clamp(1rem, 1.7vw, 1.35rem);
    right: clamp(1rem, 1.7vw, 1.35rem);
    display: inline-grid;
    place-items: center;
    min-width: 68px;
    height: 68px;
    padding: 0 .92rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--card-accent, #22C55E) 36%, rgba(255,255,255,.72));
    border-radius: 24px;
    background:
        radial-gradient(circle at 24% 18%, rgba(255,255,255,.92), transparent 27%),
        radial-gradient(circle at 76% 86%, color-mix(in srgb, var(--card-accent, #22C55E) 58%, transparent), transparent 42%),
        linear-gradient(145deg, color-mix(in srgb, var(--card-accent, #22C55E) 46%, #ffffff), var(--card-accent, #22C55E));
    color: #0f172a;
    font-size: clamp(1.65rem, 2.4vw, 2.35rem);
    font-weight: 950;
    letter-spacing: -.045em;
    line-height: 1;
    text-shadow:
        0 1px 0 rgba(255,255,255,.66),
        0 10px 26px rgba(15,23,42,.16);
    box-shadow:
        0 22px 38px color-mix(in srgb, var(--card-accent, #22C55E) 32%, transparent),
        0 8px 14px rgba(15,23,42,.08),
        inset 0 1px 0 rgba(255,255,255,.86),
        inset 0 -13px 18px rgba(15,23,42,.08);
}

.front-body .chapter-executive-chart .chapter-card-badge::after {
    content: "";
    position: absolute;
    inset: 7px 10px auto;
    height: 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255,255,255,.55), rgba(255,255,255,0));
    pointer-events: none;
}

.front-body .chapter-executive-chart .chapter-summary-card { --card-accent: #22C55E; }
.front-body .chapter-executive-chart .chapter-donut-card { --card-accent: #38BDF8; }
.front-body .chapter-executive-chart .chapter-composition-card { --card-accent: #FACC15; }

.front-body .chapter-executive-chart .chapter-vertical-chart {
    position: relative;
    display: grid;
    align-items: end;
    gap: clamp(.55rem, 1vw, .9rem);
    min-height: 194px;
    padding: 1rem .85rem .85rem;
    border: 1px solid rgba(54,43,39,.08);
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(54,43,39,.08) 1px, transparent 1px) 0 18px / 100% 54px,
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(250,247,241,.82));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.74);
}

.front-body .chapter-executive-chart .chapter-overview-chart {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.front-body .chapter-executive-chart .chapter-status-chart {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .42rem;
}

.front-body .chapter-executive-chart .chapter-vertical-item {
    display: grid;
    grid-template-rows: auto minmax(108px, 1fr) auto auto;
    align-items: end;
    justify-items: center;
    min-width: 0;
    height: 100%;
    gap: .32rem;
    color: #211815;
    text-align: center;
    cursor: help;
    outline: none;
    transition: transform .2s ease, filter .2s ease;
}

.front-body .chapter-executive-chart .chapter-vertical-item:hover,
.front-body .chapter-executive-chart .chapter-vertical-item:focus {
    transform: translateY(-3px);
    filter: saturate(1.08);
}

.front-body .chapter-executive-chart .chapter-vertical-item b {
    color: #3b201d;
    font-size: .96rem;
    font-weight: 950;
    line-height: 1;
}

.front-body .chapter-executive-chart .chapter-vertical-item i {
    position: relative;
    display: flex;
    align-items: flex-end;
    width: min(54px, 70%);
    height: 100%;
    min-height: 108px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 42% 14%, color-mix(in srgb, var(--bar-color) 26%, #ffffff), transparent 28%),
        linear-gradient(180deg, color-mix(in srgb, var(--bar-color) 16%, #ffffff), color-mix(in srgb, var(--bar-color) 8%, #ffffff));
    border: 1px solid color-mix(in srgb, var(--bar-color) 18%, rgba(255,255,255,.7));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.82),
        0 10px 24px color-mix(in srgb, var(--bar-color) 12%, transparent);
}

.front-body .chapter-executive-chart .chapter-status-chart .chapter-vertical-item i {
    width: min(46px, 72%);
}

.front-body .chapter-executive-chart .chapter-vertical-item i span {
    display: block;
    width: 100%;
    height: var(--bar-height);
    min-height: 9px;
    border-radius: 999px 999px 12px 12px;
    background:
        radial-gradient(circle at 42% 14%, rgba(255,255,255,.86), transparent 30%),
        linear-gradient(180deg, color-mix(in srgb, var(--bar-color) 54%, #ffffff), var(--bar-color) 72%, color-mix(in srgb, var(--bar-color) 88%, #0f172a));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.58),
        0 14px 28px color-mix(in srgb, var(--bar-color) 34%, transparent);
    transition: transform .2s ease, box-shadow .2s ease;
}

.front-body .chapter-executive-chart .chapter-vertical-item:hover i span,
.front-body .chapter-executive-chart .chapter-vertical-item:focus i span {
    transform: scaleY(1.03);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.62),
        0 18px 34px color-mix(in srgb, var(--bar-color) 42%, transparent);
}

.front-body .chapter-executive-chart .chapter-vertical-item small {
    width: 100%;
    color: rgba(54,43,39,.78);
    font-size: .68rem;
    font-weight: 950;
    line-height: 1.15;
    overflow-wrap: normal;
    word-break: normal;
}

.front-body .chapter-executive-chart .chapter-vertical-item em {
    min-height: 20px;
    color: rgba(54,43,39,.58);
    font-size: .66rem;
    font-style: normal;
    font-weight: 850;
}

.front-body .chapter-executive-chart .chapter-donut-visual-wrap {
    display: grid;
    grid-template-columns: minmax(150px, .84fr) minmax(170px, 1fr);
    gap: clamp(.85rem, 1.5vw, 1.1rem);
    align-items: center;
    min-height: 202px;
    padding: .85rem;
    border: 1px solid rgba(54,43,39,.08);
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(242,249,244,.82));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.74);
}

.front-body .chapter-executive-chart .chapter-donut-visual {
    position: relative;
    display: grid;
    place-items: center;
    width: min(168px, 100%);
    aspect-ratio: 1;
    justify-self: center;
    border-radius: 999px;
    background:
        radial-gradient(circle at 32% 24%, rgba(255,255,255,.92), transparent 26%),
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(232,247,240,.76));
    box-shadow:
        0 18px 34px rgba(56, 189, 248, .16),
        0 0 42px rgba(34, 197, 94, .12),
        inset 0 0 0 1px rgba(255,255,255,.64);
}

.front-body .chapter-executive-chart .chapter-donut-visual::before {
    content: "";
    position: absolute;
    inset: 27%;
    border-radius: inherit;
    background: linear-gradient(135deg, #fff, #f9fafb);
    box-shadow: inset 0 0 0 1px rgba(54,43,39,.08);
    z-index: 1;
    pointer-events: none;
}

.front-body .chapter-executive-chart .chapter-donut-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    transform: rotate(-90deg);
}

.front-body .chapter-executive-chart .chapter-donut-track {
    fill: none;
    stroke: rgba(15,23,42,.07);
    stroke-width: 27;
}

.front-body .chapter-executive-chart .chapter-donut-slice {
    cursor: help;
    outline: none;
}

.front-body .chapter-executive-chart .chapter-donut-slice circle {
    fill: none;
    stroke: var(--slice-color);
    stroke-width: 27;
    stroke-linecap: butt;
    filter: drop-shadow(0 9px 14px color-mix(in srgb, var(--slice-color) 22%, transparent));
    transition: stroke-width .2s ease, filter .2s ease, opacity .2s ease;
}

.front-body .chapter-executive-chart .chapter-donut-slice:hover circle,
.front-body .chapter-executive-chart .chapter-donut-slice:focus circle {
    stroke-width: 31;
    filter: drop-shadow(0 13px 18px color-mix(in srgb, var(--slice-color) 36%, transparent));
}

.front-body .chapter-executive-chart .chapter-donut-visual span {
    position: relative;
    z-index: 2;
    display: grid;
    justify-items: center;
    color: #3b201d;
    line-height: 1;
}

.front-body .chapter-executive-chart .chapter-donut-visual span strong {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 950;
    letter-spacing: -.04em;
}

.front-body .chapter-executive-chart .chapter-donut-visual span small {
    margin-top: .3rem;
    color: rgba(54,43,39,.70);
    font-size: .78rem;
    font-weight: 950;
    text-transform: uppercase;
}

.front-body .chapter-executive-chart .chapter-donut-legend {
    display: grid;
    gap: .52rem;
    min-width: 0;
}

.front-body .chapter-executive-chart .chapter-donut-legend div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: .45rem;
    align-items: center;
    min-height: 34px;
    padding: .34rem .46rem;
    border: 1px solid color-mix(in srgb, var(--legend-color) 16%, rgba(54,43,39,.08));
    border-radius: 999px;
    background: rgba(255,255,255,.74);
    cursor: help;
    outline: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.front-body .chapter-executive-chart .chapter-donut-legend div:hover,
.front-body .chapter-executive-chart .chapter-donut-legend div:focus {
    transform: translateX(3px);
    border-color: color-mix(in srgb, var(--legend-color) 42%, rgba(54,43,39,.08));
    box-shadow: 0 10px 22px color-mix(in srgb, var(--legend-color) 14%, transparent);
}

.front-body .chapter-executive-chart .chapter-donut-legend i {
    width: .72rem;
    height: .72rem;
    border-radius: 50%;
    background: var(--legend-color);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--legend-color) 14%, transparent);
}

.front-body .chapter-executive-chart .chapter-donut-legend span,
.front-body .chapter-executive-chart .chapter-donut-legend b,
.front-body .chapter-executive-chart .chapter-donut-legend em {
    color: #362b27;
    font-size: .76rem;
    font-weight: 900;
    line-height: 1;
}

.front-body .chapter-executive-chart .chapter-donut-legend span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.front-body .chapter-executive-chart .chapter-donut-legend em {
    color: rgba(54,43,39,.58);
    font-size: .68rem;
    font-style: normal;
}

@media (max-width: 1180px) {
    .front-body .chapter-executive-chart .chapter-insight-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .front-body .chapter-executive-chart .chapter-donut-card {
        grid-column: span 1;
    }

    .front-body .chapter-executive-chart .chapter-composition-card {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 760px) {
    .front-body .chapter-executive-chart .chapter-insight-head,
    .front-body .chapter-executive-chart .chapter-insight-grid {
        grid-template-columns: 1fr !important;
    }

    .front-body .chapter-executive-chart .chapter-visual-card {
        min-height: 0 !important;
        grid-template-rows: auto auto auto auto;
    }

    .front-body .chapter-executive-chart .chapter-visual-card h3,
    .front-body .chapter-executive-chart .chapter-visual-card p {
        max-width: 100%;
        padding-right: 82px;
    }

    .front-body .chapter-executive-chart .chapter-donut-visual-wrap {
        grid-template-columns: 1fr;
    }

    .front-body .chapter-executive-chart .chapter-vertical-chart {
        min-height: 210px;
    }

    .front-body .chapter-executive-chart .chapter-card-badge {
        min-width: 58px;
        height: 58px;
        border-radius: 20px;
        font-size: 1.45rem;
    }
}

/* Final cascade: public navigation, signed-in hero, and GIS refinements. */
.front-body .site-header,
.front-body[class*="theme-"] .site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    min-height: 72px !important;
    padding: .55rem clamp(.9rem, 2.4vw, 2.6rem) !important;
    border-bottom: 0 !important;
    background: linear-gradient(105deg, rgba(255,255,255,.97), rgba(247,249,246,.96), rgba(255,249,235,.96)) !important;
    box-shadow: 0 12px 30px rgba(15,23,42,.12) !important;
    backdrop-filter: blur(16px) saturate(1.08) !important;
}

.front-body .site-header::before,
.front-body[class*="theme-"] .site-header::before {
    background: linear-gradient(90deg, rgba(255,255,255,.58), rgba(93,113,83,.04), rgba(201,138,46,.08)) !important;
}

.front-body .site-header::after,
.front-body[class*="theme-"] .site-header::after {
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, #c98a2e, #f2c96d 42%, #5d7153) !important;
    opacity: 1 !important;
}

.front-body .site-header .brand strong,
.front-body .site-header .brand small,
.front-body .site-header .site-nav > a,
.front-body .site-header .nav-parent {
    color: #172033 !important;
}

.front-body .site-header .brand small {
    color: #5d7153 !important;
}

.front-body .site-nav {
    border-color: rgba(201,138,46,.18) !important;
    background: rgba(255,255,255,.68) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 18px rgba(15,23,42,.06) !important;
}

.front-body .site-nav > a.active,
.front-body .nav-dropdown.active > .nav-parent {
    color: #fff !important;
    background: linear-gradient(135deg, #d69a32, #c17a19) !important;
    box-shadow: 0 8px 18px rgba(201,138,46,.26) !important;
}

.front-body .site-nav > a:hover,
.front-body .nav-parent:hover,
.front-body .nav-dropdown:hover > .nav-parent,
.front-body .nav-dropdown:focus-within > .nav-parent,
.front-body .nav-dropdown.open > .nav-parent {
    color: #172033 !important;
    background: rgba(201,138,46,.12) !important;
}

.front-body .language-switcher {
    border-color: rgba(23,32,51,.14) !important;
    background: rgba(255,255,255,.72) !important;
}

.front-body .language-switcher a {
    color: #172033 !important;
}

.front-body .language-switcher a.active {
    color: #fff !important;
    background: #c98a2e !important;
}

.front-body .breaking-bar,
.front-body .breaking-track {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.front-body {
    overflow-x: hidden !important;
}

.front-body.home-page .profile-with-speakers,
.front-body.home-page .profile-message-card {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

.front-body.home-page .home-login-welcome,
.front-body.home-page[class*="theme-"] .home-login-welcome {
    position: absolute !important;
    right: clamp(1rem, 3vw, 3.2rem) !important;
    bottom: clamp(1rem, 3.2vh, 2.2rem) !important;
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) 48px !important;
    align-items: center !important;
    align-self: auto !important;
    gap: .78rem !important;
    width: min(560px, calc(100% - 2rem)) !important;
    min-height: 82px !important;
    padding: .72rem .78rem !important;
    border: 1px solid rgba(232,182,75,.45) !important;
    border-radius: 21px !important;
    background: linear-gradient(120deg, rgba(15,23,42,.92), rgba(38,55,46,.9), rgba(60,43,25,.9)) !important;
    box-shadow: 0 22px 48px rgba(5,10,18,.28), inset 0 1px 0 rgba(255,255,255,.1) !important;
    backdrop-filter: blur(14px) saturate(1.12) !important;
}

.front-body.home-page .home-login-welcome .home-logout-icon,
.front-body.home-page[class*="theme-"] .home-login-welcome .home-logout-icon {
    display: grid !important;
    width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    color: #fff !important;
    background: linear-gradient(145deg, #f6a51f, #dd6415) !important;
    box-shadow: 0 10px 22px rgba(221,100,21,.32) !important;
}

.front-body .gis-google-pin {
    width: 18px !important;
    height: 18px !important;
    border-width: 2px !important;
    box-shadow: 0 7px 14px rgba(15,23,42,.18), 0 0 0 2px color-mix(in srgb, var(--pin, #16a34a) 14%, transparent) !important;
}

.front-body .gis-google-pin span {
    inset: 3px !important;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--pin, #16a34a) 82%, #fff) !important;
}

.front-body .gis-fallback-pin {
    width: .78rem !important;
    height: .78rem !important;
}

.front-body .gis-map,
.front-body .gis-map-watermark {
    height: clamp(560px, 60vh, 660px) !important;
    min-height: 560px !important;
}

@media (max-width: 980px) {
    .front-body .gis-map,
    .front-body .gis-map-watermark {
        height: 500px !important;
        min-height: 500px !important;
    }
}

@media (max-width: 680px) {
    .front-body.home-page .home-login-welcome,
    .front-body.home-page[class*="theme-"] .home-login-welcome {
        right: .8rem !important;
        bottom: .8rem !important;
        grid-template-columns: 40px minmax(0, 1fr) 42px !important;
        width: calc(100% - 1.6rem) !important;
        min-height: 72px !important;
        padding: .6rem !important;
    }

    .front-body .gis-map,
    .front-body .gis-map-watermark {
        height: 430px !important;
        min-height: 430px !important;
    }
}

@media (max-width: 1020px) {
    .front-body .site-header,
    .front-body[class*="theme-"] .site-header {
        position: sticky !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        min-height: 72px !important;
        padding: .5rem .75rem !important;
        overflow: visible !important;
        z-index: 10020 !important;
    }

    .front-body .nav-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-left: auto !important;
        position: relative !important;
        z-index: 10031 !important;
        flex: 0 0 44px !important;
        width: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        color: #172033 !important;
        background: rgba(255,255,255,.9) !important;
        border: 1px solid rgba(201,138,46,.28) !important;
        box-shadow: 0 6px 16px rgba(15,23,42,.08) !important;
    }

    .front-body .site-nav {
        position: fixed !important;
        top: calc(env(safe-area-inset-top) + 72px) !important;
        right: .65rem !important;
        bottom: .65rem !important;
        left: .65rem !important;
        z-index: 10030 !important;
        display: none !important;
        width: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: .55rem !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        align-content: flex-start !important;
        flex: none !important;
        border: 1px solid rgba(201,138,46,.22) !important;
        border-radius: 16px !important;
        background: rgba(255,255,255,.98) !important;
        box-shadow: 0 22px 44px rgba(15,23,42,.18) !important;
        backdrop-filter: blur(16px) !important;
    }

    .front-body .site-nav.open {
        display: flex !important;
    }

    .front-body .site-nav > a,
    .front-body .site-nav .nav-parent {
        width: 100% !important;
        color: #172033 !important;
    }

    .front-body .site-nav .nav-dropdown-menu {
        background: #f7f8f6 !important;
        border-color: rgba(93,113,83,.14) !important;
    }

    .front-body .site-nav .nav-dropdown-menu a {
        color: #283548 !important;
    }

    .front-body .language-switcher {
        flex: 0 0 auto !important;
        margin-left: .2rem !important;
    }
}

/* Final cascade: transparent public navigation, GIS map, and signed-in hero refinements. */
.front-body .site-nav {
    gap: .18rem !important;
    padding: .3rem .42rem !important;
    border: 1px solid rgba(201,138,46,.22) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.09) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 6px 18px rgba(23,32,51,.035) !important;
    backdrop-filter: blur(10px) saturate(1.04) !important;
}

.front-body .site-nav::after {
    content: '';
    position: absolute;
    right: 1.05rem;
    bottom: -.28rem;
    left: 1.05rem;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(201,138,46,.72) 18%, #c98a2e 50%, rgba(201,138,46,.72) 82%, transparent);
    opacity: .9;
    pointer-events: none;
}

.front-body .site-nav > a,
.front-body .site-header .nav-parent {
    padding: .56rem .7rem !important;
    border-radius: 999px !important;
}

.front-body .site-nav > a.active,
.front-body .nav-dropdown.active > .nav-parent {
    color: #172033 !important;
    background: rgba(255,255,255,.14) !important;
    box-shadow: inset 0 -2px 0 #c98a2e, 0 4px 12px rgba(201,138,46,.1) !important;
}

.front-body .site-nav > a.active::before,
.front-body .nav-dropdown.active > .nav-parent::before {
    opacity: 0 !important;
}

.front-body .site-nav > a:hover,
.front-body .nav-parent:hover,
.front-body .nav-dropdown:hover > .nav-parent,
.front-body .nav-dropdown:focus-within > .nav-parent,
.front-body .nav-dropdown.open > .nav-parent {
    color: #172033 !important;
    background: rgba(255,255,255,.18) !important;
    box-shadow: inset 0 -2px 0 rgba(201,138,46,.68), inset 0 0 0 1px rgba(201,138,46,.14) !important;
}

.front-body.home-page .home-login-welcome,
.front-body.home-page[class*="theme-"] .home-login-welcome {
    grid-template-columns: 42px minmax(0, 1fr) 42px !important;
    gap: .62rem !important;
    width: min(470px, calc(100% - 2rem)) !important;
    min-height: 72px !important;
    padding: .58rem .64rem !important;
    border-radius: 18px !important;
}

.front-body.home-page .home-login-welcome .home-login-avatar {
    width: 42px !important;
    height: 42px !important;
}

.front-body.home-page .home-login-welcome .home-login-copy small {
    font-size: .61rem !important;
    letter-spacing: .08em !important;
}

.front-body.home-page .home-login-welcome .home-login-copy p {
    margin: .1rem 0 !important;
    font-size: 1rem !important;
    line-height: 1.05 !important;
}

.front-body.home-page .home-login-welcome .home-login-copy > span {
    display: block !important;
    overflow: hidden !important;
    color: rgba(255,255,255,.72) !important;
    font-size: .66rem !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.front-body.home-page .home-login-welcome .home-logout-icon,
.front-body.home-page[class*="theme-"] .home-login-welcome .home-logout-icon {
    width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    border: 1px solid rgba(255,255,255,.28) !important;
    border-radius: 14px !important;
    box-shadow: 0 7px 16px rgba(221,100,21,.25), inset 0 1px 0 rgba(255,255,255,.3) !important;
}

.front-body.home-page .home-login-welcome .home-logout-icon svg {
    width: 19px !important;
    height: 19px !important;
}

.front-body .gis-map,
.front-body .gis-map-watermark {
    height: clamp(500px, 53vh, 540px) !important;
    min-height: 500px !important;
}

@media (max-width: 980px) {
    .front-body .gis-map,
    .front-body .gis-map-watermark {
        height: 470px !important;
        min-height: 470px !important;
    }
}

@media (max-width: 680px) {
    .front-body .site-nav::after {
        display: none;
    }

    .front-body .site-nav {
        border-radius: 16px !important;
        background: rgba(255,255,255,.96) !important;
    }

    .front-body.home-page .home-login-welcome,
    .front-body.home-page[class*="theme-"] .home-login-welcome {
        grid-template-columns: 38px minmax(0, 1fr) 40px !important;
        width: calc(100% - 1.6rem) !important;
        min-height: 66px !important;
        padding: .5rem !important;
    }

    .front-body.home-page .home-login-welcome .home-login-avatar,
    .front-body.home-page .home-login-welcome .home-logout-icon {
        width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
    }

    .front-body .gis-map,
    .front-body .gis-map-watermark {
        height: 410px !important;
        min-height: 410px !important;
    }
}

/* Keep the logout action inside the signed-in hero card despite older generic link rules. */
.front-body.home-page .home-login-welcome .home-logout-icon,
.front-body.home-page[class*="theme-"] .home-login-welcome .home-logout-icon {
    position: static !important;
    inset: auto !important;
    display: grid !important;
    flex: 0 0 42px !important;
    align-self: center !important;
    justify-self: end !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.front-body.home-page .home-login-welcome .home-logout-icon svg {
    width: 19px !important;
    height: 19px !important;
    max-width: 19px !important;
    max-height: 19px !important;
}

/* Final cascade: compact PROBIS-style headers for the home Executive Chart cards. */

/* Transaction card headers: final cascade after all legacy admin/report card styling. */
.admin-body .admin-grid > .admin-card {
    --transaction-head-start: #078cc8;
    --transaction-head-end: #3269be;
    padding: 1rem !important;
}

.admin-body .admin-grid > .admin-card:nth-child(3n + 2) {
    --transaction-head-start: #bd4f91;
    --transaction-head-end: #8755bb;
}

.admin-body .admin-grid > .admin-card:nth-child(3n) {
    --transaction-head-start: #d58a1f;
    --transaction-head-end: #e15d46;
}

.admin-body .admin-grid > .admin-card::before {
    display: none;
}

.admin-body .admin-grid > .admin-card > h2,
.admin-body .admin-grid > .admin-card > .admin-card-head {
    position: relative;
    z-index: 1;
    min-height: 62px;
    margin: -1rem -1rem 1rem !important;
    padding: .82rem 1rem !important;
    border: 0 !important;
    border-radius: 21px 21px 14px 14px;
    background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.14) 0 1px, transparent 1px 11px),
        linear-gradient(135deg, var(--transaction-head-start), var(--transaction-head-end));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 9px 20px rgba(15,23,42,.1);
}

.admin-body .admin-grid > .admin-card > h2,
.admin-body .admin-grid > .admin-card > .admin-card-head h2,
.admin-body .admin-grid > .admin-card > .admin-card-head h3 {
    color: #fff !important;
    font-weight: 900 !important;
    text-shadow: 0 1px 2px rgba(15,23,42,.2);
}

.admin-body .admin-grid > .admin-card > h2 {
    display: flex;
    align-items: center;
    font-size: 1.1rem !important;
    line-height: 1.15;
}

.admin-body .admin-grid > .admin-card > .admin-card-head {
    display: flex;
    align-items: center;
    gap: .8rem;
}

.admin-body .admin-grid > .admin-card > .admin-card-head.stacked {
    align-items: flex-start;
}

.admin-body .admin-grid > .admin-card > h2::before,
.admin-body .admin-grid > .admin-card > .admin-card-head h2::before,
.admin-body .admin-grid > .admin-card > .admin-card-head h3::before {
    background: rgba(255,255,255,.92) !important;
    filter: drop-shadow(0 2px 3px rgba(15,23,42,.18));
}

.admin-body .admin-grid > .admin-card > .admin-card-head p {
    margin: .24rem 0 0;
    color: rgba(255,255,255,.86) !important;
    font-size: .76rem;
    line-height: 1.35;
}

.admin-body .admin-grid > .admin-card > .admin-card-head > span,
.admin-body .admin-grid > .admin-card > .admin-card-head.compact span {
    flex: 0 0 auto;
    border-color: rgba(255,255,255,.34) !important;
    background: rgba(255,255,255,.18) !important;
    color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}

.front-body .training-report-grid-compact .verified-report-card {
    --report-head-start: #078cc8;
    --report-head-end: #3269be;
    gap: .72rem !important;
    padding: 0 .92rem .92rem !important;
}

.front-body .training-report-grid-compact .verified-report-card:nth-child(3n + 2) {
    --report-head-start: #bd4f91;
    --report-head-end: #8755bb;
}

.front-body .training-report-grid-compact .verified-report-card:nth-child(3n) {
    --report-head-start: #d58a1f;
    --report-head-end: #e15d46;
}

.front-body .training-report-grid-compact .verified-report-head {
    min-height: 66px;
    margin: 0 -.92rem;
    padding: .72rem .92rem;
    border-radius: 21px 21px 14px 14px;
    background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.15) 0 1px, transparent 1px 11px),
        linear-gradient(135deg, var(--report-head-start), var(--report-head-end));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.27), 0 8px 18px rgba(15,23,42,.1);
}

.front-body .training-report-grid-compact .verified-title p,
.front-body .training-report-grid-compact .verified-title h2,
.front-body .training-report-grid-compact .verified-title small {
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(15,23,42,.18);
}

.front-body .training-report-grid-compact .verified-logo-wrap {
    border-color: rgba(255,255,255,.52);
    background: rgba(255,255,255,.94);
    box-shadow: 0 8px 18px rgba(15,23,42,.16);
}

.front-body .training-report-grid-compact .verified-status {
    border-color: rgba(255,255,255,.35);
    background: rgba(255,255,255,.2);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.24);
}

@media (max-width: 760px) {
    .admin-body .admin-grid > .admin-card {
        padding: .85rem !important;
    }

    .admin-body .admin-grid > .admin-card > h2,
    .admin-body .admin-grid > .admin-card > .admin-card-head {
        min-height: 58px;
        margin: -.85rem -.85rem .85rem !important;
        padding: .72rem .85rem !important;
        border-radius: 17px 17px 12px 12px;
    }

    .front-body .training-report-grid-compact .verified-report-card {
        padding: 0 .72rem .72rem !important;
    }

    .front-body .training-report-grid-compact .verified-report-head {
        min-height: 62px;
        margin: 0 -.72rem;
        padding: .68rem .72rem;
        border-radius: 17px 17px 12px 12px;
    }
}
.front-body .chapter-executive-chart .chapter-visual-card {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    padding: .72rem !important;
}

.front-body .chapter-executive-chart .chapter-visual-card::before {
    display: none;
}

.front-body .chapter-executive-chart .chapter-visual-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .7rem;
    align-items: start;
    min-height: 96px;
    padding: .78rem .88rem .72rem;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 21px 21px 16px 16px;
    background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.14) 0 1px, transparent 1px 9px),
        linear-gradient(125deg, var(--chart-head-start), var(--chart-head-end));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 12px 24px color-mix(in srgb, var(--chart-head-end) 20%, transparent);
}

.front-body .chapter-executive-chart .chapter-summary-card {
    --chart-head-start: #0b91cc;
    --chart-head-end: #0d6ea8;
}

.front-body .chapter-executive-chart .chapter-donut-card {
    --chart-head-start: #7b4fc3;
    --chart-head-end: #b7558e;
}

.front-body .chapter-executive-chart .chapter-composition-card {
    --chart-head-start: #db951c;
    --chart-head-end: #d55b40;
}

.front-body .chapter-executive-chart .chapter-visual-heading {
    min-width: 0;
}

.front-body .chapter-executive-chart .chapter-visual-header .chapter-card-kicker {
    display: block;
    margin: 0 0 .36rem;
    color: rgba(255,255,255,.84);
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .12em;
    line-height: 1;
}

.front-body .chapter-executive-chart .chapter-visual-header h3 {
    max-width: none;
    margin: 0;
    color: #fff;
    font-family: var(--font-body);
    font-size: clamp(1.08rem, 1.65vw, 1.36rem);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.12;
    text-shadow: 0 1px 2px rgba(15,23,42,.22);
}

.front-body .chapter-executive-chart .chapter-visual-header p {
    display: -webkit-box;
    max-width: none;
    min-height: 0;
    margin: .34rem 0 0;
    overflow: hidden;
    color: rgba(255,255,255,.86);
    font-size: .72rem;
    font-weight: 650;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.front-body .chapter-executive-chart .chapter-visual-header .chapter-card-badge {
    position: relative;
    top: auto;
    right: auto;
    min-width: 46px;
    height: 46px;
    padding: 0 .5rem;
    border: 1px solid rgba(255,255,255,.38);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(255,255,255,.32), rgba(255,255,255,.12));
    color: #fff;
    font-size: clamp(1.38rem, 2.1vw, 1.78rem);
    font-weight: 950;
    letter-spacing: -.035em;
    text-shadow: 0 2px 7px rgba(15,23,42,.25);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 8px 18px rgba(15,23,42,.16);
}

.front-body .chapter-executive-chart .chapter-visual-header .chapter-card-badge::after {
    display: none;
}

.front-body .chapter-executive-chart .chapter-visual-card > .chapter-vertical-chart,
.front-body .chapter-executive-chart .chapter-visual-card > .chapter-donut-visual-wrap {
    flex: 1 1 auto;
    min-height: 0;
}

@media (max-width: 760px) {
    .front-body .chapter-executive-chart .chapter-visual-card {
        gap: .72rem;
        padding: .64rem !important;
    }

    .front-body .chapter-executive-chart .chapter-visual-header {
        min-height: 90px;
        padding: .72rem .75rem .66rem;
        border-radius: 18px 18px 14px 14px;
    }

    .front-body .chapter-executive-chart .chapter-visual-header .chapter-card-badge {
        min-width: 42px;
        height: 42px;
        border-radius: 13px;
        font-size: 1.3rem;
    }
}
/* Compact concurrent-session notice on the administrator login form. */
.login-card .flash.session-conflict {
    display: grid;
    gap: .68rem;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 0 .9rem !important;
    padding: .78rem !important;
    border: 1px solid rgba(201, 138, 46, .42) !important;
    border-left: 3px solid #c98a2e !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, rgba(255, 250, 235, .98), rgba(255, 244, 214, .94)) !important;
    box-shadow: 0 10px 24px rgba(92, 56, 15, .12), inset 0 1px 0 rgba(255, 255, 255, .78);
    color: #422006 !important;
    text-align: left !important;
    white-space: normal !important;
}

.login-card .session-conflict-head {
    display: flex;
    align-items: center;
    gap: .58rem;
}

.login-card .session-conflict-mark {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    place-items: center;
    border-radius: 11px;
    background: linear-gradient(135deg, #d69e2e, #ad6c12);
    box-shadow: 0 7px 14px rgba(173, 108, 18, .24);
}

.login-card .session-conflict-mark svg {
    width: 18px;
    height: 18px;
    fill: #fffaf0;
}

.login-card .session-conflict-kicker {
    display: block;
    margin-bottom: .05rem;
    color: #9a5a09;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.login-card .session-conflict-head strong {
    display: block;
    color: #47230b;
    font-size: .91rem;
    line-height: 1.2;
}

.login-card .session-conflict > p {
    margin: 0;
    color: #704019;
    font-size: .78rem;
    line-height: 1.42;
}

.login-card .session-conflict-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .42rem;
    margin: 0;
}

.login-card .session-conflict-details > div {
    min-width: 0;
    padding: .43rem .5rem;
    border: 1px solid rgba(180, 113, 29, .16);
    border-radius: 9px;
    background: rgba(255, 255, 255, .58);
}

.login-card .session-conflict-details dt {
    margin: 0 0 .12rem;
    color: #986016;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.login-card .session-conflict-details dd {
    margin: 0;
    color: #4a260c;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

@media (max-width: 380px) {
    .login-card .session-conflict-details {
        grid-template-columns: 1fr;
    }
}