/* LENTERA visual refresh — blue identity, demo-inspired layout. Presentation only. */
:root {
  --blue-950: #082b63;
  --blue-900: #0b3679;
  --blue-800: #0d47a1;
  --blue-700: #155db8;
  --blue-600: #2476ca;
  --blue-500: #36a0e6;
  --blue-100: #e8f3ff;
  --blue-050: #f3f8ff;
  --cyan-100: #e6f8ff;
  --ink: #17345a;
  --muted: #657993;
  --line: #dce7f4;
  --surface: #ffffff;
  --page: #f3f7fc;
  --shadow-soft: 0 10px 30px rgba(9, 48, 105, .07);
  --shadow-card: 0 18px 44px rgba(9, 48, 105, .11);
  --radius-card: 20px;
}

html { scroll-behavior: smooth; }
body {
  background: var(--page) !important;
  color: var(--ink) !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  line-height: 1.65;
}
button, input, select, textarea { font-family: inherit !important; }
:focus-visible { outline: 3px solid #65c8f4; outline-offset: 3px; }

/* Public navigation */
.site-header {
  position: sticky !important;
  top: 0;
  z-index: 60;
  padding: 0 max(0px, calc((100vw - 1280px) / 2)) !important;
  background: rgba(255,255,255,.94) !important;
  border-bottom: 1px solid rgba(211,226,244,.9) !important;
  box-shadow: 0 5px 24px rgba(8,43,99,.055) !important;
  backdrop-filter: blur(16px);
}
.site-header .bar {
  width: 100%;
  max-width: 1280px !important;
  min-height: 76px !important;
  margin: auto !important;
  padding: 10px 24px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 22px !important;
}
.site-header .brand { gap: 11px; color: var(--blue-800) !important; }
.site-header .brand-mark {
  width: 46px !important;
  height: 46px !important;
  display: block !important;
  overflow: hidden;
  padding: 0 !important;
  border-radius: 13px !important;
  background: #0a2e86 !important;
  box-shadow: 0 5px 14px rgba(13,71,161,.18);
}
.site-header .brand-mark img { display: block; width: 100%; height: 100%; object-fit: cover; }
.site-header .brand strong { font-size: 20px !important; letter-spacing: 1.7px; line-height: 1.1; }
.site-header .brand small { color: #71839b !important; font-size: 9px !important; letter-spacing: .6px; }
.site-header nav { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 5px !important; }
.site-header nav a {
  padding: 9px 12px !important;
  border-radius: 999px !important;
  color: #385372 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  transition: .2s ease;
}
.site-header nav a:hover { background: var(--blue-050) !important; color: var(--blue-800) !important; }
.site-header nav .nav-cta { padding: 10px 18px !important; border: 1px solid var(--blue-800) !important; background: var(--blue-800) !important; color: #fff !important; box-shadow: 0 6px 16px rgba(13,71,161,.16); }
.site-header nav .nav-cta:hover { background: var(--blue-950) !important; color: #fff !important; }
.site-header nav .nav-button { border-radius: 999px !important; padding: 9px 15px !important; }
.nav-toggle { border-radius: 12px !important; }

/* Page canvas and shared components */
body > main:not(.home-main) {
  width: min(1280px, calc(100% - 48px));
  max-width: 1280px !important;
  min-height: 64vh;
  margin: 38px auto 64px !important;
  padding: 0 !important;
}
h1, h2, h3, h4 { font-family: inherit !important; letter-spacing: -.035em; }
h1 { color: var(--blue-900); font-weight: 800; }
h2 { color: var(--blue-900); font-weight: 800; }
h3 { color: #1d426e; font-weight: 750; }
p { line-height: 1.7; }
.card, .admin-panel, .site-detail-panel, .quiz-index-card, .quiz-question-card, .hunter-item {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-card) !important;
  background: #fff !important;
  box-shadow: var(--shadow-soft) !important;
}
.card { padding: 23px; }
button, .button {
  border-radius: 12px !important;
  font-weight: 750 !important;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease !important;
}
button:hover, .button:hover { transform: translateY(-2px); box-shadow: 0 9px 20px rgba(13,71,161,.16); }
button.secondary, .button.secondary { background: #fff !important; color: var(--blue-800) !important; border-color: #c8dbf1 !important; }
button.secondary:hover, .button.secondary:hover { background: var(--blue-050) !important; }
input, select, textarea {
  border: 1px solid #cad9eb !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: var(--ink) !important;
  box-shadow: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--blue-500) !important; box-shadow: 0 0 0 4px rgba(54,160,230,.13) !important; }
label, .field label { color: #345273; font-weight: 700; }
.field { margin-bottom: 15px; }
.alert { border-radius: 14px !important; box-shadow: 0 5px 18px rgba(13,71,161,.05); }
.pill { border-radius: 999px !important; background: var(--blue-100) !important; color: var(--blue-800) !important; }
.empty, .explore-empty { border-radius: 16px !important; background: #fff; border-color: #cbdcf0 !important; }
.section-heading-row { margin: 38px 0 20px !important; align-items: end; }
.section-heading-row h2 { color: var(--blue-900) !important; font-size: clamp(24px, 3vw, 34px) !important; }
.section-kicker, .section-heading-row .section-kicker { color: var(--blue-600) !important; font-size: 10px !important; font-weight: 850 !important; letter-spacing: 1.7px !important; }
.text-link { color: var(--blue-800) !important; font-weight: 800; }
.table-wrap { border: 1px solid var(--line) !important; border-radius: 16px !important; box-shadow: var(--shadow-soft) !important; }
th { background: #edf5ff !important; color: var(--blue-900) !important; }
td, th { border-color: #e6eef7 !important; }
.tabs { gap: 8px !important; margin: 22px 0 !important; }
.tabs a { border: 1px solid #d4e2f2 !important; border-radius: 999px !important; background: #fff !important; color: #385777 !important; padding: 9px 15px !important; font-weight: 700; }
.tabs a.active { background: var(--blue-800) !important; border-color: var(--blue-800) !important; color: #fff !important; }

/* Home — demo composition adapted to LENTERA blue identity */
body > main.home-main {
  width: 100% !important;
  max-width: none !important;
  min-height: 0;
  margin: 0 !important;
  padding: 0 !important;
}
.home-page { overflow: hidden; background: var(--page); }
.home-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background-image: linear-gradient(108deg, rgba(5,28,68,.94) 0%, rgba(9,55,125,.86) 52%, rgba(13,71,161,.48) 100%), var(--home-hero-image);
  background-size: cover;
  background-position: center;
  border-radius: 0 0 34px 34px;
  box-shadow: 0 20px 48px rgba(8,43,99,.17);
}
.home-hero::before, .home-hero::after { content: ""; position: absolute; z-index: -1; pointer-events: none; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; }
.home-hero::before { width: 520px; height: 520px; right: -150px; top: -230px; box-shadow: 0 0 0 45px rgba(255,255,255,.035), 0 0 0 90px rgba(255,255,255,.025); }
.home-hero::after { width: 250px; height: 250px; right: 12%; bottom: -190px; }
.home-hero-inner { width: min(1280px, calc(100% - 48px)); min-height: 560px; margin: auto; padding: 58px 0 82px; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.home-hero-content { position: relative; z-index: 2; max-width: 790px; }
.home-institution-logos { display: flex; align-items: center; gap: 12px; margin: 0 0 24px; }
.home-institution-logos img { display: block; width: auto; height: 72px; max-width: 90px; object-fit: contain; padding: 5px; border: 1px solid rgba(255,255,255,.7); border-radius: 12px; background: rgba(255,255,255,.96); box-shadow: 0 7px 20px rgba(0,0,0,.13); }
.home-institution-logos img:first-child { width: 70px; }
.home-institution-logos img:last-child { width: 72px; }
.home-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 12px; color: #bfe7ff; font-size: 10px; font-weight: 850; letter-spacing: 1.9px; }
.home-eyebrow::before { content: ""; width: 25px; height: 2px; border-radius: 2px; background: #65c8f4; }
.home-hero h1 { max-width: 780px; margin: 0; color: #fff !important; font-size: clamp(39px, 5.8vw, 70px); font-weight: 850; line-height: 1.04; letter-spacing: -.055em; }
.home-hero h1 span { color: #8ed8ff; }
.home-lead { max-width: 610px; margin: 20px 0 5px; color: #e3f3ff; font-size: 16px; font-weight: 700; }
.home-description { max-width: 610px; margin: 6px 0 0; color: rgba(255,255,255,.82); font-size: 14px; }
.home-hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 25px; }
.home-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 12px 19px; border: 1px solid transparent; border-radius: 999px; font-size: 13px; font-weight: 800; text-decoration: none; transition: .2s ease; }
.home-button .icon { width: 16px; height: 16px; }
.home-button:hover { transform: translateY(-2px); }
.home-button-primary { background: #fff; color: var(--blue-900); box-shadow: 0 8px 20px rgba(0,0,0,.12); }
.home-button-primary:hover { background: #e8f6ff; color: var(--blue-950); }
.home-button-outline { color: #fff; background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.45); backdrop-filter: blur(8px); }
.home-button-outline:hover { background: rgba(255,255,255,.18); color: #fff; }
.home-hero-note { display: flex; align-items: center; gap: 11px; margin-top: 29px; color: rgba(255,255,255,.76); font-size: 11px; letter-spacing: .2px; }
.home-hero-note span { width: 36px; height: 1px; background: #8ed8ff; }
.home-hero-side { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-right: 4%; color: #fff; text-align: center; }
.home-hero-seal { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 150px; height: 150px; border: 1px solid rgba(255,255,255,.58); border-radius: 50%; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 8px rgba(255,255,255,.05), 0 15px 38px rgba(0,0,0,.13); transform: rotate(8deg); backdrop-filter: blur(7px); }
.home-hero-seal span { color: #d6efff; font-size: 8px; font-weight: 800; letter-spacing: 2px; }
.home-hero-seal strong { color: #fff; font-size: 39px; line-height: 1.2; letter-spacing: .1em; }
.home-hero-side-caption { color: rgba(255,255,255,.72); font-size: 8px; font-weight: 750; letter-spacing: 1.4px; line-height: 1.7; }
.home-stat-strip { position: relative; z-index: 4; width: min(1160px, calc(100% - 48px)); margin: -42px auto 0; display: grid; grid-template-columns: 1.25fr repeat(3,1fr); align-items: stretch; overflow: hidden; border: 1px solid #dce8f5; border-radius: 19px; background: #fff; box-shadow: var(--shadow-card); }
.home-stat-intro { display: flex; flex-direction: column; justify-content: center; padding: 19px 26px; color: var(--blue-950); font-size: 17px; font-weight: 850; line-height: 1.35; }
.home-stat-intro em { color: var(--blue-600); font-style: normal; font-weight: 650; }
.home-stat { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 18px 22px; border-left: 1px solid #e4edf7; }
.home-stat strong { color: var(--blue-800); font-size: 29px; font-weight: 850; line-height: 1.2; }
.home-stat span { color: var(--muted); font-size: 11px; }
.home-section { width: min(1160px, calc(100% - 48px)); margin: auto; padding: 82px 0 18px; }
.home-section-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 26px; }
.home-section-eyebrow { display: inline-block; margin-bottom: 8px; color: var(--blue-600); font-size: 10px; font-weight: 850; letter-spacing: 1.7px; }
.home-section-head h2 { margin: 0; color: var(--blue-950); font-size: clamp(29px, 4vw, 42px); line-height: 1.12; letter-spacing: -.045em; }
.home-section-head > p { max-width: 410px; margin: 0; color: var(--muted); font-size: 13px; }
.home-site-grid { grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap: 19px !important; }
.home-site-grid .site-card { margin: 0; }
.home-section-action { display: flex; justify-content: center; margin-top: 24px; }
.home-text-link { display: inline-flex; align-items: center; gap: 9px; color: var(--blue-800); font-size: 13px; font-weight: 850; text-decoration: none; }
.home-text-link:hover { color: var(--blue-600); }
.home-empty-state { grid-column: 1/-1; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 45px 20px; border: 1px dashed #bfd2e8; border-radius: 18px; background: #fff; color: var(--muted); text-align: center; }
.home-empty-state .icon { width: 32px; height: 32px; color: var(--blue-600); }
.home-empty-state strong { color: var(--blue-900); }
.home-empty-state span { font-size: 12px; }
.home-discover-section { margin-top: 78px; padding: 66px 24px; background: linear-gradient(125deg, #082b63 0%, #0d47a1 58%, #176dc0 100%); }
.home-discover-inner { width: min(1160px, 100%); margin: auto; display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.home-discover-copy .home-section-eyebrow { color: #a9e3ff; }
.home-discover-copy h2 { margin: 0 0 14px; color: #fff; font-size: clamp(34px, 4vw, 48px); line-height: 1.1; letter-spacing: -.05em; }
.home-discover-copy h2 em { color: #9bdfff; font-style: normal; }
.home-discover-copy p { max-width: 460px; margin: 0 0 22px; color: rgba(255,255,255,.78); font-size: 14px; }
.home-button-light { background: #fff; color: var(--blue-900); }
.home-button-light:hover { background: #e9f6ff; color: var(--blue-950); }
.home-feature-cards { display: grid; gap: 11px; }
.home-feature-card { display: flex; align-items: center; gap: 14px; padding: 17px 18px; border: 1px solid rgba(255,255,255,.2); border-radius: 16px; background: rgba(255,255,255,.1); color: #fff; text-decoration: none; backdrop-filter: blur(8px); transition: .2s ease; }
.home-feature-card:hover { transform: translateX(4px); background: rgba(255,255,255,.17); color: #fff; }
.home-feature-card > span:nth-child(2) { flex: 1; min-width: 0; }
.home-feature-card strong, .home-feature-card small { display: block; }
.home-feature-card strong { font-size: 14px; }
.home-feature-card small { margin-top: 3px; color: rgba(255,255,255,.73); font-size: 11px; }
.home-feature-card > .icon { width: 17px; height: 17px; color: #a8e2ff; }
.home-feature-icon { display: grid; place-items: center; flex: none; width: 43px; height: 43px; border-radius: 13px; background: rgba(255,255,255,.15); color: #bceaff; }
.home-feature-icon .icon { width: 21px; height: 21px; }
.home-how-section { padding-top: 78px; padding-bottom: 88px; }
.home-steps-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 17px; }
.home-step-card { position: relative; min-height: 220px; padding: 25px 23px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow-soft); }
.home-step-number { position: absolute; top: 18px; right: 19px; color: #c3d9f0; font-size: 23px; font-weight: 900; }
.home-step-icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 18px; border-radius: 14px; background: var(--blue-100); color: var(--blue-800); }
.home-step-icon .icon { width: 23px; height: 23px; }
.home-step-card h3 { margin: 0 0 7px; color: var(--blue-900); font-size: 17px; }
.home-step-card p { margin: 0; color: var(--muted); font-size: 12px; }

/* Site cards, explore, detail, map and gallery */
.site-card { overflow: hidden; border: 1px solid var(--line) !important; border-radius: 18px !important; background: #fff !important; box-shadow: var(--shadow-soft) !important; transition: transform .25s ease, box-shadow .25s ease !important; }
.site-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card) !important; }
.site-card-image-link { display: block; overflow: hidden; }
.site-card-photo, .site-card-image img { display: block; width: 100%; height: 210px; object-fit: cover; transition: transform .5s ease; }
.site-card:hover .site-card-photo, .site-card:hover .site-card-image img { transform: scale(1.045); }
.site-card-placeholder { min-height: 210px; display: grid; place-items: center; align-content: center; gap: 8px; background: linear-gradient(140deg,#e6f3ff,#cde8fa); color: var(--blue-700); }
.site-card-body { padding: 18px 19px 17px !important; }
.site-card-category { display: inline-flex; padding: 5px 10px !important; border-radius: 999px !important; background: var(--blue-100) !important; color: var(--blue-800) !important; font-size: 10px; font-weight: 800; }
.site-card-title { margin: 10px 0 7px !important; color: var(--blue-950) !important; font-size: 20px !important; line-height: 1.25; }
.site-card-title a { color: inherit !important; text-decoration: none; }
.site-card-description { color: var(--muted) !important; font-size: 12px !important; line-height: 1.65; }
.site-card-location { color: #71849d !important; font-size: 11px !important; }
.site-card-footer { border-top: 1px solid #edf2f8; padding-top: 12px; }
.site-card-link { color: var(--blue-800) !important; font-size: 12px; font-weight: 850; }
.site-card-favorites { color: #71849d; font-size: 11px; }
.explore-hero { border-radius: 25px !important; background: linear-gradient(115deg,#082b63,#0d47a1 60%,#2c8bd1) !important; box-shadow: var(--shadow-card); }
.explore-hero h1 { color: #fff !important; }
.explore-hero p { color: rgba(255,255,255,.82) !important; }
.explore-eyebrow, .explore-section-label { color: #5ebdf0 !important; }
.explore-hero-button, .explore-search-button { border-radius: 999px !important; }
.explore-list-section { padding-top: 44px; }
.explore-section-heading h2 { color: var(--blue-950) !important; }
.explore-total { border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: var(--shadow-soft); }
.explore-total strong { color: var(--blue-800) !important; }
.explore-search-panel { border: 1px solid var(--line) !important; border-radius: 17px !important; background: #fff !important; box-shadow: var(--shadow-soft); }
.explore-search-button { background: var(--blue-800) !important; border-color: var(--blue-800) !important; }
.explore-reset-button { color: var(--blue-800) !important; }
.site-detail-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 17px; padding: 9px 14px; border: 1px solid #d7e5f5; border-radius: 999px; background: #fff; color: var(--blue-800); font-size: 12px; font-weight: 800; text-decoration: none; }
.site-detail-hero { overflow: hidden; border-radius: 25px !important; background: linear-gradient(120deg,#082b63,#0d47a1 60%,#2186c9) !important; box-shadow: var(--shadow-card); }
.site-detail-hero h1 { color: #fff !important; }
.site-detail-hero-address { color: rgba(255,255,255,.83) !important; }
.site-detail-panel { margin-top: 19px; padding: 24px !important; }
.site-detail-panel h2 { color: var(--blue-900) !important; }
.site-detail-section-label { color: var(--blue-600) !important; font-size: 10px !important; font-weight: 850; letter-spacing: 1.5px; }
.site-detail-info-icon, .site-detail-subsection h3 span { background: var(--blue-100) !important; color: var(--blue-800) !important; }
.site-detail-map-button, .site-detail-feedback-button { border-radius: 12px !important; }
.site-detail-gallery-item { overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.site-detail-gallery-item img { border-radius: 0 !important; }
.gallery-count { background: var(--blue-100) !important; color: var(--blue-800) !important; }
.gallery-section-heading h2 { color: var(--blue-900); }

/* Forms, register and login */
.auth { width: min(100%, 560px); margin: 30px auto !important; padding: 27px !important; border: 1px solid var(--line) !important; border-radius: 22px !important; background: #fff !important; box-shadow: var(--shadow-card) !important; }
.auth h1 { margin: 0 0 18px; font-size: 29px; }
.auth form { margin-top: 16px; }
.auth form button { width: 100%; }
.register-page { max-width: 690px !important; padding: 25px !important; }
.register-heading { display: flex; align-items: center; gap: 15px; margin-bottom: 18px; }
.register-mark { display: grid; place-items: center; flex: none; width: 62px; height: 62px; overflow: hidden; border-radius: 16px; background: #092b82; box-shadow: 0 7px 18px rgba(13,71,161,.18); }
.register-mark img { width: 100%; height: 100%; object-fit: cover; }
.register-heading .section-kicker { margin: 0 0 4px; }
.register-page h1 { margin: 0 0 4px !important; color: var(--blue-950) !important; font-size: 27px !important; }
.register-heading .muted { margin: 0; font-size: 12px; }
.register-benefits { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px !important; margin: 17px 0 18px !important; }
.register-benefits > div { min-width: 0; align-items: flex-start !important; gap: 8px !important; padding: 10px !important; border: 1px solid #dceafa !important; border-radius: 13px !important; background: #f6faff !important; }
.register-benefits .icon { width: 19px !important; height: 19px !important; color: var(--blue-700); }
.register-benefits strong { font-size: 11px !important; color: var(--blue-900) !important; }
.register-benefits small { color: var(--muted) !important; font-size: 10px !important; line-height: 1.4; }
.register-form { margin-top: 0 !important; }
.register-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 13px; }
.register-form-grid .field-wide { grid-column: 1/-1; }
.register-form-grid .field { margin-bottom: 12px; }
.register-form-grid label { margin-bottom: 5px; font-size: 12px; }
.register-form-grid input { min-height: 43px; padding: 10px 12px; font-size: 13px; }
.register-submit { display: flex !important; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 46px; margin-top: 4px; background: var(--blue-800) !important; }
.register-bottom-links { display: flex; justify-content: center; gap: 6px; margin-top: 15px; color: var(--muted); font-size: 12px; }
.register-bottom-links a { color: var(--blue-800); font-weight: 850; text-decoration: none; }
.register-note { margin: 13px 0 0 !important; padding: 10px 12px; border-radius: 11px; background: #f2f7fd; color: var(--muted); font-size: 10px !important; line-height: 1.5; text-align: center; }


/* Admin application shell */
.admin-layout {
  grid-template-columns: 230px minmax(0,1fr) !important;
  max-width: 1680px;
  margin: 0 auto;
  min-height: calc(100vh - 76px) !important;
  background: var(--page);
}

.admin-sidebar {
  position: sticky;
  top: 76px;
  align-self: start;
  height: calc(100vh - 76px);
  overflow-y: auto;
  padding: 15px 10px 18px !important;
  background: linear-gradient(180deg,#082b63 0%,#0b3c85 48%,#0d47a1 100%) !important;
  color: #fff;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.3) transparent;
}

.admin-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 5px 18px;
  padding: 6px 7px 13px;
  border-bottom: 1px solid rgba(255,255,255,.17);
  color: #fff;
  text-decoration: none;
}

.admin-sidebar-brand img {
  display: block;
  width: 34px;
  height: 34px;
  flex: none;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,.7);
  border-radius: 10px;
}

.admin-sidebar-brand strong,
.admin-sidebar-brand small {
  display: block;
}

.admin-sidebar-brand strong {
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 1.2px;
  line-height: 1.2;
}

.admin-sidebar-brand small {
  margin-top: 2px;
  color: #b8ddfa;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.2px;
}

.sidebar-heading {
  margin: 0 9px 8px !important;
  padding: 0 !important;
  color: #a9d8fa !important;
  font-size: 8px !important;
  font-weight: 850;
  letter-spacing: 1.5px !important;
}

.admin-sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-sidebar a:not(.admin-sidebar-brand) {
  display: flex !important;
  align-items: center;
  gap: 8px !important;
  min-height: 38px;
  margin: 0 !important;
  padding: 8px 10px !important;
  border: 1px solid transparent;
  border-radius: 10px !important;
  background: transparent;
  color: rgba(255,255,255,.86) !important;
  font-size: 11px !important;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  transition: .18s ease;
}

.admin-sidebar a:not(.admin-sidebar-brand) > .icon {
  flex: none;
  width: 15px;
  height: 15px;
  color: #b9e2ff;
}

.admin-sidebar a:not(.admin-sidebar-brand) > span:not(.nav-badge) {
  min-width: 0;
}

.admin-sidebar a:not(.admin-sidebar-brand):hover {
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
  transform: translateX(2px);
}

.admin-sidebar a:not(.admin-sidebar-brand).active {
  background: #eaf6ff !important;
  border-color: #eaf6ff;
  color: var(--blue-950) !important;
  box-shadow: 0 5px 12px rgba(0,0,0,.12);
}

.admin-sidebar a:not(.admin-sidebar-brand).active > .icon {
  color: var(--blue-800);
}

.admin-sidebar .nav-badge {
  margin-left: auto;
  min-width: 18px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #fff;
  color: var(--blue-800);
  font-size: 9px;
  font-weight: 900;
}

.admin-sidebar a.active .nav-badge {
  background: var(--blue-800);
  color: #fff;
}

.admin-main {
  min-width: 0;
}

.admin-topbar {
  position: sticky;
  top: 76px;
  z-index: 20;
  min-height: 58px !important;
  padding: 10px 22px !important;
  background: rgba(255,255,255,.94) !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: 0 4px 16px rgba(8,43,99,.035);
  backdrop-filter: blur(12px);
}

.admin-topbar h1 {
  color: var(--blue-950) !important;
  font-size: 17px !important;
  font-weight: 850;
  letter-spacing: -.03em;
}

.admin-user {
  color: #60758f;
  font-size: 10px !important;
  font-weight: 700;
}

.admin-user > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.admin-user .icon {
  width: 14px;
  height: 14px;
  color: var(--blue-600);
}

.admin-view-site {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  border: 1px solid #d7e6f5;
  border-radius: 999px;
  background: #f7fbff;
  color: var(--blue-800) !important;
  font-size: 10px;
  font-weight: 800;
  text-decoration: none;
}

.admin-view-site:hover {
  background: var(--blue-100);
}

.admin-content {
  min-width: 0;
  padding: 18px 22px !important;
}

.admin-content > .alert {
  margin-bottom: 14px;
}

.admin-content .card {
  border-radius: 15px !important;
}

.admin-content .tabs a {
  border-radius: 999px !important;
}

/* Dashboard panels, metrics and moderation cards */
.admin-dashboard {
  max-width: 1600px !important;
}

.admin-heading {
  margin-bottom: 17px !important;
}

.admin-heading h1 {
  color: var(--blue-950) !important;
  font-size: clamp(22px,2.5vw,29px) !important;
}

.admin-heading .eyebrow {
  color: var(--blue-600) !important;
  font-size: 9px !important;
  letter-spacing: 1.5px !important;
}

.admin-heading p.description {
  color: var(--muted) !important;
  font-size: 12px;
}

.admin-metric {
  border-radius: 14px !important;
  border-color: var(--line) !important;
  box-shadow: var(--shadow-soft) !important;
}

.admin-metric::before {
  width: 3px !important;
  background: linear-gradient(180deg,#6bd0f7,#0d47a1) !important;
}

.admin-metric-icon {
  color: var(--blue-700) !important;
  background: var(--blue-100) !important;
  border-radius: 11px !important;
}

.admin-metric-value {
  color: var(--blue-900) !important;
}

.admin-metric-decoration {
  background: #8bd6f7 !important;
}

.admin-panel {
  border-radius: 16px !important;
  border-color: var(--line) !important;
  box-shadow: var(--shadow-soft) !important;
}

.admin-panel-heading {
  align-items: center !important;
  margin-bottom: 14px !important;
}

.admin-panel-heading h2 {
  color: var(--blue-900) !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  letter-spacing: -.02em;
}

.admin-panel-heading .section-kicker {
  margin: 0 0 3px !important;
  color: var(--blue-600) !important;
  font-size: 8px !important;
  letter-spacing: 1.3px !important;
}

.admin-panel-link {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  border: 1px solid #d5e5f6;
  border-radius: 999px;
  background: #f7fbff;
  color: var(--blue-800) !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  text-decoration: none;
  white-space: nowrap;
}

.admin-panel-link:hover {
  background: var(--blue-100);
}

.admin-week-stat {
  border-color: #dceafa !important;
  border-radius: 11px !important;
  background: #f6faff !important;
}

.admin-week-stat-value,
.admin-chart-value,
.admin-popular-count {
  color: var(--blue-800) !important;
}

.admin-chart-bar {
  background: linear-gradient(180deg,#58c5f2,#0d47a1) !important;
}

.admin-chart-bar.is-zero {
  background: #cbd9e8 !important;
}

.admin-popular-rank {
  background: var(--blue-100) !important;
  color: var(--blue-800) !important;
}

.admin-table th {
  background: #edf5ff !important;
  color: var(--blue-900) !important;
}

.admin-site-name {
  color: var(--blue-800) !important;
}

.admin-user-badge {
  background: var(--blue-100) !important;
  color: var(--blue-800) !important;
}

.admin-pending-panel {
  margin: 18px 0 !important;
}

.admin-pending-photo {
  overflow: hidden;
  border: 1px solid #e1ebf6 !important;
  border-radius: 12px !important;
  background: #fff;
}

.admin-pending-photo img {
  display: block;
  width: 100%;
  object-fit: cover;
}

.admin-pending-photo-body strong {
  color: var(--blue-900) !important;
}

.admin-feedback-pending-item {
  padding: 12px 0 !important;
  border-bottom: 1px solid #e8eff7 !important;
}

.admin-feedback-pending-item > div:first-child strong {
  color: var(--blue-900);
}

.admin-feedback-pending-item > div:first-child small {
  display: block;
  color: var(--muted);
  font-size: 9px;
}

.admin-feedback-pending-item > p {
  margin: 7px 0;
  color: #4e6682;
  font-size: 11px;
}

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

.admin-feedback-actions form {
  margin: 0;
}

.admin-feedback-actions button {
  min-height: 30px;
  padding: 6px 9px;
  font-size: 10px;
}

.admin-empty-state {
  border: 1px dashed #d1e1f2;
  border-radius: 12px;
  background: #f8fbff;
}

/* Admin resources, settings and data forms */
.admin-form-page {
  max-width: 1050px !important;
}

.admin-form-heading h1 {
  color: var(--blue-950) !important;
}

.form-guide-card {
  border: 1px solid #d8e8f8 !important;
  border-radius: 14px !important;
  background: linear-gradient(110deg,#f1f8ff,#fff) !important;
}

.admin-data-form {
  padding: 19px !important;
}

.admin-form-grid {
  gap: 0 14px !important;
}

.form-section-intro {
  border-bottom-color: #e1ebf6 !important;
}

.form-section-intro strong {
  color: var(--blue-900) !important;
}

.admin-form-actions {
  border-top-color: #e4edf7 !important;
}

.admin-thumb {
  border-radius: 9px !important;
}

.admin-setting-description {
  padding: 11px 13px;
  border-radius: 11px;
  background: #f4f9ff;
  color: var(--muted);
}


/* Quiz, History Hunter, feedback, timeline and other user pages */
.quiz-index-heading h1, .quiz-page > h1 { color: var(--blue-950) !important; }
.quiz-index-heading > p:last-child, .quiz-page-intro { color: var(--muted) !important; }
.quiz-index-card { border-radius: 18px !important; }
.quiz-index-icon, .quiz-question-number { background: var(--blue-100) !important; color: var(--blue-800) !important; }
.quiz-index-card h2, .quiz-question-title { color: var(--blue-900) !important; }
.quiz-answer-option { border-color: #dce7f4 !important; border-radius: 13px !important; }
.quiz-answer-option:has(input:checked) { border-color: var(--blue-600) !important; background: #eef7ff !important; color: var(--blue-900) !important; }
.quiz-submit-button { background: var(--blue-800) !important; }
.hunter-progress, .hunter-radar { border-radius: 18px !important; }
.hunter-progress-head span { color: var(--blue-800) !important; }
.hunter-bar { background: #e6f0fb !important; }
.hunter-bar span { background: linear-gradient(90deg,#63c9f4,#0d47a1) !important; }
.hunter-ico { background: var(--blue-100) !important; color: var(--blue-800) !important; }
.hunter-item { transition: transform .2s ease, box-shadow .2s ease; }
.hunter-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-card) !important; }
.feedback-rating-summary { border-color: #dceafa !important; border-radius: 14px !important; background: #f6faff !important; }
.feedback-rating-summary > strong { color: var(--blue-800) !important; }
.feedback-card, .feedback-item { border-radius: 16px !important; }
.timeline.card, article.card.timeline { border-left: 4px solid var(--blue-500) !important; }

/* PWA install prompt and footer */
.pwa-tools { width: min(1180px, calc(100% - 48px)); margin: 24px auto !important; }
#pwa-install-wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 18px; border: 1px solid #d7e8f8; border-radius: 16px; background: #fff; box-shadow: var(--shadow-soft); }
.pwa-install-copy { max-width: none !important; margin: 0 !important; }
.pwa-install-copy strong { color: var(--blue-900) !important; font-size: 13px !important; }
.pwa-install-copy small { display: none !important; }
#pwa-install { flex: none; border-radius: 999px !important; }
.site-footer { margin-top: 55px; padding: 34px 20px !important; border: 0 !important; background: linear-gradient(120deg,#082b63,#0d47a1) !important; color: rgba(255,255,255,.78) !important; }
.site-footer strong { color: #fff !important; font-size: 18px; letter-spacing: 2.5px !important; }
.site-footer p { margin: 6px 0 !important; color: #d9edff; font-size: 12px; }
.site-footer small { color: #a9d9fa; font-size: 10px; }

/* Responsive layout */
@media (max-width: 1100px) {
  .site-header .bar { min-height: 66px !important; padding: 9px 18px !important; }
  .site-header nav { gap: 4px !important; }
  .site-header nav a { min-height: 42px; }
}
@media (max-width: 900px) {
  .home-hero-inner { min-height: 0; padding: 52px 0 76px; }
  .home-hero-side { margin-right: 0; }
  .home-hero-seal { width: 118px; height: 118px; }
  .home-hero-seal strong { font-size: 31px; }
  .home-site-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .home-discover-inner { grid-template-columns: 1fr; gap: 30px; }
  .admin-layout { grid-template-columns: minmax(0,1fr) !important; }
  .admin-sidebar { position: sticky; top: 66px; z-index: 35; height: auto; padding: 9px 13px !important; }
  .admin-sidebar-brand, .sidebar-heading { display: none !important; }
  .admin-sidebar nav { flex-direction: row; gap: 6px; overflow-x: auto; padding: 1px 0 5px; scrollbar-width: thin; }
  .admin-sidebar a:not(.admin-sidebar-brand) { flex: none; min-height: 38px; padding: 8px 11px !important; white-space: nowrap; font-size: 11px !important; }
  .admin-topbar { top: 66px; }
  .admin-analytics { grid-template-columns: 1fr !important; }
  .admin-content { padding: 20px !important; }
}
@media (max-width: 680px) {
  body > main:not(.home-main) { width: min(100% - 30px, 600px); margin: 25px auto 45px !important; }
  .site-header .bar { padding: 9px 15px !important; }
  .site-header .brand-mark { width: 39px !important; height: 39px !important; }
  .site-header .brand strong { font-size: 17px !important; }
  .site-header .brand small { display: none !important; }
  .home-hero { border-radius: 0 0 24px 24px; }
  .home-hero-inner { width: min(100% - 32px, 560px); min-height: 0; padding: 37px 0 68px; }
  .home-hero-content { max-width: 100%; }
  .home-institution-logos { gap: 9px; margin-bottom: 18px; }
  .home-institution-logos img { height: 59px; max-width: 72px; border-radius: 10px; }
  .home-institution-logos img:first-child, .home-institution-logos img:last-child { width: 59px; }
  .home-eyebrow { font-size: 8px; letter-spacing: 1.2px; }
  .home-hero h1 { font-size: clamp(36px, 10vw, 49px); }
  .home-lead { font-size: 14px; }
  .home-description { font-size: 12px; }
  .home-hero-side { display: none; }
  .home-hero-actions .home-button { flex: 1 1 100%; }
  .home-hero-note { font-size: 9px; }
  .home-stat-strip { width: min(100% - 30px, 560px); margin-top: -32px; grid-template-columns: repeat(3,minmax(0,1fr)); }
  .home-stat-intro { grid-column: 1/-1; padding: 14px 17px 8px; font-size: 15px; }
  .home-stat { padding: 13px 10px; border-left: 0; }
  .home-stat + .home-stat { border-left: 1px solid #e4edf7; }
  .home-stat strong { font-size: 22px; }
  .home-stat span { font-size: 9px; }
  .home-section { width: min(100% - 30px, 560px); padding: 60px 0 12px; }
  .home-section-head { display: block; margin-bottom: 20px; }
  .home-section-head h2 { font-size: 31px; }
  .home-section-head > p { margin-top: 11px; font-size: 12px; }
  .home-site-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .home-discover-section { margin-top: 55px; padding: 48px 15px; }
  .home-discover-inner { width: min(100%,560px); gap: 23px; }
  .home-discover-copy h2 { font-size: 36px; }
  .home-feature-card { padding: 14px 12px; gap: 10px; }
  .home-feature-icon { width: 38px; height: 38px; }
  .home-how-section { padding: 58px 0 65px; }
  .home-steps-grid { grid-template-columns: 1fr; gap: 12px; }
  .home-step-card { min-height: 0; padding: 20px; }
  .register-page { padding: 20px 16px !important; }
  .register-heading { align-items: flex-start; gap: 11px; }
  .register-mark { width: 49px; height: 49px; border-radius: 13px; }
  .register-page h1 { font-size: 23px !important; }
  .register-heading .muted { font-size: 11px; }
  .register-benefits { grid-template-columns: 1fr !important; gap: 7px !important; }
  .register-benefits > div { align-items: center !important; padding: 8px 10px !important; }
  .register-benefits small { font-size: 10px !important; }
  .register-form-grid { grid-template-columns: 1fr; }
  .register-form-grid .field-wide { grid-column: auto; }
  .admin-topbar { top: 66px; padding: 11px 14px !important; }
  .admin-topbar h1 { font-size: 16px !important; }
  .admin-user { gap: 8px; }
  .admin-view-site { padding: 7px 9px; font-size: 10px; }
  .admin-content { padding: 14px !important; }
  .admin-panel { padding: 17px !important; }
  .admin-panel-heading { align-items: flex-start !important; }
  .admin-panel-heading .admin-panel-link { flex: none; }
  .admin-metrics { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .admin-week-summary { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .admin-pending-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .admin-pending-photo img { height: 100px; }
  .site-detail-panel { padding: 18px !important; }
  .site-detail-summary-grid, .site-detail-summary-actions { grid-template-columns: 1fr !important; }
  .explore-hero { border-radius: 18px !important; }
  .explore-section-heading { align-items: flex-start !important; }
  #pwa-install-wrap { align-items: stretch; flex-direction: column; }
  #pwa-install { width: 100%; }
  .pwa-tools { width: calc(100% - 30px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Map interfaces */
.peta-layout { grid-template-columns: 330px minmax(0,1fr) !important; gap: 18px !important; }
.peta-sidebar, .petaadm-side { border: 1px solid var(--line) !important; border-radius: 18px !important; background: #fff !important; box-shadow: var(--shadow-soft); }
.peta-sidebar > input[type="search"], .petaadm-side > input[type="search"] { margin: 12px !important; width: calc(100% - 24px) !important; }
.peta-item { border-color: #e1eaf5 !important; border-radius: 12px !important; color: var(--blue-900) !important; }
.peta-item:hover, .peta-item.active { border-color: #a9cdec !important; background: #edf6ff !important; box-shadow: inset 3px 0 0 var(--blue-700) !important; }
.peta-stage #map, .peta-stage iframe, .petaadm-stage #adm-map, .petaadm-stage iframe { border: 1px solid var(--line) !important; border-radius: 18px !important; box-shadow: var(--shadow-soft); }
.peta-detail { overflow: hidden; border: 1px solid var(--line); border-radius: 17px !important; box-shadow: var(--shadow-card) !important; }
.peta-detail-body h2 { color: var(--blue-950) !important; }
.peta-detail-actions .button { border-radius: 10px !important; }
.peta-detail-close { border-radius: 50% !important; }
.petaadm { grid-template-columns: 330px minmax(0,1fr) !important; gap: 18px !important; }
.petaadm-form { border-radius: 18px !important; }
.petaadm-form h2 { color: var(--blue-900) !important; }
.petaadm-stage #adm-map, .petaadm-stage iframe { border-radius: 17px !important; }
.adm-ok { color: #167c59 !important; }
.adm-warn { color: #a56812 !important; }

/* Badges, QR management, tables and feedback */
.badge-grid { max-width: none !important; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)) !important; }
.badge-card { border: 1px solid var(--line) !important; border-radius: 18px !important; box-shadow: var(--shadow-soft) !important; }
.badge-card.earned { border-color: #8cc8ef !important; background: linear-gradient(180deg,#f2f9ff,#fff) !important; }
.badge-card.locked { opacity: .72; }
.badge-card h2 { color: var(--blue-900) !important; }
.badge-icon { display: inline-grid; place-items: center; width: 62px; height: 62px; border-radius: 18px; background: var(--blue-100); color: var(--blue-800); }
.badge-icon .icon { width: 31px; height: 31px; }
.badge-status.ok { color: #16805b !important; }
.admin-qr-card { border: 1px solid var(--line) !important; border-radius: 17px !important; box-shadow: var(--shadow-soft) !important; }
.admin-qr-card-image { border-radius: 13px !important; background: #f3f8ff !important; }
.admin-qr-card-content h2 { color: var(--blue-900) !important; }
.statistics-export-panel { border-color: #d8e8f8 !important; border-radius: 16px !important; background: #f4f9ff !important; }
.statistics-export-panel strong { color: var(--blue-900); }
.statistics-export-panel p { color: var(--muted) !important; }
.feedback-card { padding: 18px 20px !important; }
.feedback-card-heading strong { color: var(--blue-900); }
.feedback-card .text { color: #4e6682; }
.my-photos, .photo-contribute { border-radius: 17px !important; }
.photo-toggle-button { border-color: #cfe3f7 !important; background: #eaf5ff !important; color: var(--blue-800) !important; }
.photo-toggle-button:hover { background: #dceeff !important; color: var(--blue-900) !important; }
.photo-picker { border-color: #c9ddef !important; border-radius: 15px !important; background: #f6faff !important; }
.photo-picker-empty { color: var(--blue-800); }
.photo-chip.pending { background: #fff4d6 !important; color: #8a5a00 !important; }

/* Resource management page heading and search bar */
.admin-content > h1 { margin: 0 0 14px; color: var(--blue-950) !important; font-size: clamp(25px,3vw,32px) !important; }
.admin-content > .actions { margin: 0 0 17px !important; }
.admin-content > .search { border: 1px solid var(--line) !important; border-radius: 16px !important; background: #fff !important; box-shadow: var(--shadow-soft); }
.admin-content .table-stack { border-radius: 16px !important; }
.admin-content .table-stack td .actions a { color: var(--blue-800); font-weight: 750; }
.admin-content .table-stack td .actions button { min-height: 35px; padding: 7px 10px; font-size: 11px; }

@media (max-width: 900px) {
  .peta-layout, .petaadm { grid-template-columns: 1fr !important; }
  .peta-sidebar, .petaadm-side { max-height: 330px !important; }
  .peta-stage { min-height: 470px !important; }
  .petaadm-stage { height: 430px !important; }
}
@media (max-width: 600px) {
  .peta-stage { min-height: 380px !important; }
  .petaadm-stage { height: 360px !important; }
  .peta-detail { left: 9px !important; bottom: 9px !important; width: calc(100% - 18px) !important; max-height: 68% !important; }
  .statistics-export-panel { padding: 15px !important; }
  .admin-qr-card { grid-template-columns: 88px minmax(0,1fr) !important; gap: 10px !important; padding: 12px !important; }
  .admin-qr-card-image { min-height: 88px !important; }
  .admin-qr-card-image img { width: 82px !important; height: 82px !important; }
}

/* Nested main elements are content regions, not independent page canvases. */
main.admin-content, main.site-detail-main { max-width: none !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; }


/* HERO BACKGROUND LENTERA */
.home-hero {
    background-image:
        linear-gradient(
            110deg,
            rgba(5, 35, 85, 0.84),
            rgba(12, 65, 140, 0.68),
            rgba(15, 90, 165, 0.52)
        ),
        url('/images/identity/tetenger-hero.jpeg') !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    border-radius: 34px !important;
    width: calc(100% - 64px);
    margin: 32px auto;
}

/* Konten hero berada di tengah */
.home-hero-inner {
    justify-content: center !important;
}

.home-hero-content {
    max-width: 1100px !important;
    width: 100%;
    text-align: center;
}

/* Logo di tengah tanpa kotak tambahan */
.home-institution-logos {
    justify-content: center !important;
}

.home-institution-logos img {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Judul, deskripsi dan tombol di tengah */
.home-hero h1,
.home-lead,
.home-description {
    margin-left: auto !important;
    margin-right: auto !important;
}

.home-hero-actions {
    justify-content: center !important;
}

.home-hero-note {
    justify-content: center !important;
}

/* Hilangkan dekorasi samping */
.home-hero-side {
    display: none !important;
}

/* Tampilan mobile */
@media (max-width: 680px) {
    .home-hero {
        width: calc(100% - 24px);
        margin: 16px auto;
        border-radius: 22px !important;
        background-position: center center !important;
    }

    .home-hero-inner {
        min-height: 520px;
        padding: 40px 18px 55px;
    }
}


/* Ukuran logo di atas judul hero LENTERA */
.home-institution-logos {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 18px !important;
}

.home-institution-logos img {
    height: 58px !important;
    width: auto !important;
    max-width: 75px !important;
    object-fit: contain !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Ukuran logo pada HP */
@media (max-width: 680px) {
    .home-institution-logos img {
        height: 46px !important;
        max-width: 60px !important;
    }

    .home-institution-logos {
        gap: 9px !important;
    }
}


/* PERBAIKAN TULISAN DI SAMPING LOGO LENTERA */
.site-header .brand,
.site-header .brand strong {
    color: #123b78 !important;
}

.site-header .brand small {
    display: block !important;
    color: #315b91 !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    line-height: 1.4 !important;
}

/* TETAP TAMPIL DI HP */
@media (max-width: 680px) {
    .site-header .brand small {
        display: block !important;
        color: #315b91 !important;
        font-size: 9px !important;
        max-width: 145px;
    }
}


/* PERBAIKAN LOGO PEMKAB SLEMAN */
.home-institution-logos {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    overflow: visible !important;
    padding: 6px 8px !important;
}

.home-institution-logos img {
    display: block !important;
    width: auto !important;
    height: 52px !important;
    max-width: 100px !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
    flex-shrink: 0 !important;
    border-radius: 0 !important;
}

/* Tampilan HP */
@media (max-width: 680px) {
    .home-institution-logos img {
        height: 44px !important;
        max-width: 85px !important;
    }
}


/* ==========================================
   LENTERA - ADMIN RESOURCE COMPACT
   Berlaku untuk halaman pengelolaan data
   Dashboard tidak ikut berubah
========================================== */

.admin-content .admin-resource-page {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 12px 14px 30px;
    box-sizing: border-box;
    color: #183153;
}

/* JUDUL HALAMAN */

.admin-resource-page > h1 {
    color: #0D3475 !important;
    font-size: 28px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
    margin: 0 0 14px !important;
}

/* TOMBOL TAMBAH DATA */

.admin-resource-page > .actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px !important;
}

.admin-resource-page > .actions .button {
    min-height: 36px !important;
    padding: 8px 15px !important;
    font-size: 12px !important;
    border-radius: 10px !important;
    line-height: 1.3 !important;
}

/* TAB FILTER */

.admin-resource-page > .tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0 0 16px !important;
}

.admin-resource-page > .tabs a {
    padding: 7px 12px !important;
    font-size: 11px !important;
    border-radius: 9px !important;
}

/* PENCARIAN */

.admin-resource-page > .search {
    display: flex;
    align-items: end;
    gap: 12px;
    padding: 16px 18px !important;
    margin: 0 0 18px !important;
    background: #FFFFFF;
    border: 1px solid #DFEAF7;
    border-radius: 16px !important;
    box-shadow: 0 4px 14px rgba(13,71,161,.045);
}

.admin-resource-page .search .field {
    flex: 1;
    min-width: 0;
}

.admin-resource-page .search label {
    display: block;
    font-size: 12px !important;
    font-weight: 700;
    margin-bottom: 6px !important;
}

.admin-resource-page .search input {
    width: 100%;
    height: 40px !important;
    min-height: 40px !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    border-radius: 10px !important;
    box-sizing: border-box;
}

.admin-resource-page .search > button {
    min-height: 40px !important;
    padding: 8px 17px !important;
    font-size: 12px !important;
    border-radius: 10px !important;
    white-space: nowrap;
}

/* TABEL DATA */

.admin-resource-page .table-wrap {
    width: 100%;
    overflow-x: auto;
    background: #FFFFFF;
    border: 1px solid #DFEAF7;
    border-radius: 16px !important;
    box-shadow: 0 4px 14px rgba(13,71,161,.045);
}

.admin-resource-page .table-wrap table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    min-width: 620px;
}

.admin-resource-page .table-wrap th {
    padding: 12px 14px !important;
    background: #EDF5FF !important;
    color: #0D47A1 !important;
    font-size: 11px !important;
    font-weight: 800;
    white-space: nowrap;
}

.admin-resource-page .table-wrap td {
    padding: 12px 14px !important;
    color: #475569;
    font-size: 12px !important;
    line-height: 1.5;
    border-bottom: 1px solid #E8EFF7;
    vertical-align: middle;
}

.admin-resource-page .table-wrap tbody tr:last-child td {
    border-bottom: none;
}

.admin-resource-page .table-wrap tbody tr:hover {
    background: #F7FBFF;
}

/* INFORMASI TAMBAHAN */

.admin-resource-page .small {
    display: block;
    margin-top: 3px;
    font-size: 10px !important;
    line-height: 1.5;
}

.admin-resource-page .muted {
    color: #71839A;
}

.admin-resource-page .admin-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 8px;
    vertical-align: middle;
    margin-right: 8px;
}

/* TOMBOL AKSI TABEL */

.admin-resource-page .table-wrap .actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.admin-resource-page .table-wrap .actions form {
    margin: 0;
}

.admin-resource-page .table-wrap .actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 5px 9px;
    border: 1px solid #D8E7F7;
    border-radius: 8px;
    background: #F7FBFF;
    color: #0D47A1;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}

.admin-resource-page .table-wrap .actions button {
    min-height: 30px !important;
    padding: 5px 10px !important;
    font-size: 10px !important;
    border-radius: 8px !important;
}

/* QR CODE */

.admin-resource-page .admin-qr-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 15px;
}

.admin-resource-page .admin-qr-card {
    overflow: hidden;
    border: 1px solid #DFEAF7;
    border-radius: 15px;
    background: #FFFFFF;
    box-shadow: 0 4px 12px rgba(13,71,161,.05);
}

.admin-resource-page .admin-qr-card-image img {
    width: 100%;
    max-height: 210px;
    object-fit: contain;
}

.admin-resource-page .admin-qr-card-content {
    padding: 14px;
}

.admin-resource-page .admin-qr-card-content h2 {
    font-size: 15px;
    color: #0D3475;
}

.admin-resource-page .admin-qr-card-content p {
    font-size: 11px;
    color: #71839A;
}

.admin-resource-page .admin-qr-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.admin-resource-page .admin-qr-actions .button {
    min-height: 32px;
    padding: 7px 11px;
    font-size: 11px;
}

/* PAGINATION */

.admin-resource-page nav[role="navigation"] {
    margin-top: 17px;
    font-size: 12px;
}

/* RESPONSIVE */

@media (max-width: 768px) {
    .admin-content .admin-resource-page {
        padding: 10px 8px 22px;
    }

    .admin-resource-page > h1 {
        font-size: 23px !important;
    }

    .admin-resource-page > .search {
        align-items: stretch;
        flex-direction: column;
        padding: 13px !important;
    }

    .admin-resource-page .search > button {
        width: 100%;
    }

    .admin-resource-page .admin-qr-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .admin-resource-page .admin-qr-gallery {
        grid-template-columns: 1fr;
    }

    .admin-resource-page .table-wrap th,
    .admin-resource-page .table-wrap td {
        padding: 10px !important;
    }
}


/* ==========================================
   LENTERA - FULL HEIGHT ADMIN SIDEBAR
   Lebar tetap 258px
========================================== */

@media (min-width: 769px) {

    /* Background biru mengikuti tinggi seluruh halaman */
    .admin-layout {
        grid-template-columns: 258px minmax(0, 1fr) !important;

        background:
            linear-gradient(
                180deg,
                #082b63 0%,
                #0b3c85 48%,
                #0d47a1 100%
            ) left top / 258px 100% no-repeat,
            var(--page) !important;
    }

    /* Sidebar transparan agar background induk terlihat */
    .admin-sidebar {
        background: transparent !important;
    }
    
/* SIDEBAR ADMIN FULL HEIGHT */
@media (min-width: 769px) {

    .admin-layout {
        display: grid !important;
        grid-template-columns: 258px minmax(0, 1fr) !important;
        align-items: stretch !important;
        height: auto !important;
        min-height: calc(100vh - 76px) !important;
    }

    .admin-sidebar {
        position: relative !important;
        top: auto !important;
        align-self: stretch !important;

        width: 258px !important;
        height: auto !important;
        min-height: calc(100vh - 76px) !important;

        overflow-y: visible !important;

        background: linear-gradient(
            180deg,
            #082b63 0%,
            #0b3c85 48%,
            #0d47a1 100%
        ) !important;
    }

    .admin-main {
        min-width: 0;
    }
}

}


/* FIX FINAL: SIDEBAR BIRU MENYAMBUNG SAMPAI FOOTER */

@media (min-width: 901px) {

    body:has(.admin-layout) {
        --sidebar-left: max(0px, calc((100vw - 1680px) / 2));

        background-color: var(--page) !important;

        background-image:
            linear-gradient(
                180deg,
                #082b63 0%,
                #0b3c85 48%,
                #0d47a1 100%
            ),
            linear-gradient(var(--page), var(--page)) !important;

        background-size:
            258px 100%,
            100% 100% !important;

        background-position:
            var(--sidebar-left) 0,
            0 0 !important;

        background-repeat: no-repeat !important;
    }

    /* Hapus background tambahan sebelumnya */
    body:has(.admin-layout)::before {
        content: none !important;
        display: none !important;
    }

    /* Area layout harus transparan */
    .admin-layout,
    .admin-sidebar,
    .admin-main,
    .admin-content,
    body:has(.admin-layout) > main,
    body:has(.admin-layout) .pwa-tools {
        background-color: transparent !important;
    }
}

/* Tampilan mobile tetap seperti semula */
@media (max-width: 900px) {
    body:has(.admin-layout) {
        background: var(--page) !important;
        background-image: none !important;
    }
}


/* SAMAKAN WARNA BACKGROUND SIDEBAR ADMIN */

@media (min-width: 901px) {
    body:has(.admin-layout) {
        position: relative;
        isolation: isolate;
    }

    body:has(.admin-layout)::before {
        content: "";
        position: fixed;
        inset: 0 auto 0 0;
        width: 258px;

        background: linear-gradient(
            180deg,
            #082b63 0%,
            #0b3c85 48%,
            #0d47a1 100%
        );

        z-index: -1;
        pointer-events: none;
    }

    .admin-sidebar {
        background: transparent !important;
    }

    .admin-layout {
        background: transparent !important;
    }
}


/* =========================================
   LENTERA - STATISTIK SCAN
   Khusus halaman Statistik Admin
========================================= */

 
.admin-statistics-page {
    width: 100%;
    max-width: 1525px;
    margin: 0 auto;
    padding: 8px 14px 32px;
    box-sizing: border-box;
}

.admin-statistics-page h1,
.admin-statistics-page h2,
.admin-statistics-page h3 {
    margin-top: 0;
}

.admin-statistics-heading {
    margin-bottom: 20px;
}

.admin-statistics-eyebrow {
    display: block;
    margin-bottom: 6px;
    color: #2476ca;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.admin-statistics-heading h1 {
    margin: 0 0 6px !important;
    color: #0b3679 !important;
    font-size: 27px !important;
    line-height: 1.3;
    font-weight: 800;
}

.admin-statistics-heading p,
.admin-statistics-panel-heading p,
.admin-statistics-section-heading p {
    margin: 0;
    color: #71839a;
    font-size: 12px;
    line-height: 1.6;
}

/* FILTER */

.admin-statistics-filter {
    display: grid;
    grid-template-columns: minmax(220px, 1.5fr)
                           repeat(2, minmax(140px, .8fr))
                           auto auto;
    align-items: end;
    gap: 12px;
    padding: 17px;
    margin: 0 0 16px;
    background: #fff;
    border: 1px solid #dce7f4;
    border-radius: 15px;
    box-shadow: 0 5px 18px rgba(9,48,105,.04);
}

.admin-statistics-filter .field {
    min-width: 0;
    margin: 0 !important;
}

.admin-statistics-filter label {
    display: block;
    margin-bottom: 6px;
    color: #345273;
    font-size: 11px;
    font-weight: 750;
}

.admin-statistics-filter input,
.admin-statistics-filter select {
    width: 100%;
    height: 40px;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid #d5e2f1;
    border-radius: 9px;
    background: #fff;
    color: #183153;
    font-size: 12px;
}

.admin-statistics-submit {
    height: 40px;
    min-height: 40px;
    padding: 8px 16px;
    border-radius: 9px;
    font-size: 12px;
    white-space: nowrap;
}

.admin-statistics-reset {
    display: inline-flex;
    height: 40px;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    color: #56708f;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

/* RINGKASAN */

.admin-statistics-overview {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 12px;
}

.admin-statistics-total,
.admin-statistics-export {
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 0;
    padding: 19px;
    border: 1px solid #dce7f4;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(9,48,105,.04);
}

.admin-statistics-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #e8f3ff;
    color: #155db8;
}

.admin-statistics-icon .icon {
    width: 23px;
    height: 23px;
}

.admin-statistics-total > div:last-child {
    display: grid;
    gap: 2px;
}

.admin-statistics-total span,
.admin-statistics-export strong {
    color: #526984;
    font-size: 12px;
    font-weight: 700;
}

.admin-statistics-total strong {
    color: #0b3679;
    font-size: 28px;
    line-height: 1.2;
}

.admin-statistics-total small {
    color: #8392a6;
    font-size: 10px;
}

.admin-statistics-export {
    justify-content: space-between;
    flex-wrap: wrap;
}

.admin-statistics-export p {
    margin: 5px 0 0;
    color: #71839a;
    font-size: 11px;
}

.admin-statistics-export-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 37px;
    padding: 8px 13px;
    border-radius: 9px;
    background: #0d47a1;
    color: white !important;
    font-size: 11px;
    font-weight: 750;
    text-decoration: none;
}

.admin-statistics-export-button .icon {
    width: 15px;
    height: 15px;
}

.admin-statistics-note {
    margin: 10px 0 18px;
    color: #71839a;
    font-size: 11px;
    line-height: 1.6;
}

/* PANEL DAN TABEL */

.admin-statistics-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 15px;
    margin-bottom: 16px;
}

.admin-statistics-panel {
    min-width: 0;
    padding: 18px;
    margin-bottom: 16px;
    border: 1px solid #dce7f4;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(9,48,105,.04);
}

.admin-statistics-panel-heading {
    margin-bottom: 13px;
}

.admin-statistics-panel-heading h2,
.admin-statistics-section-heading h2 {
    margin: 0 0 5px !important;
    color: #0b3679;
    font-size: 16px !important;
    font-weight: 800;
    letter-spacing: -.3px;
}

.admin-statistics-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e4edf7;
    border-radius: 10px;
    -webkit-overflow-scrolling: touch;
}

.admin-statistics-table-wrap table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

.admin-statistics-table-wrap th {
    padding: 11px 12px;
    background: #edf5ff;
    color: #0b3679;
    font-size: 11px;
    font-weight: 800;
    text-align: left;
    white-space: nowrap;
}

.admin-statistics-table-wrap td {
    padding: 11px 12px;
    border-top: 1px solid #edf1f6;
    color: #526984;
    font-size: 12px;
    line-height: 1.5;
    vertical-align: middle;
}

.admin-statistics-table-wrap tbody tr:hover {
    background: #f7fbff;
}

.admin-statistics-table-wrap td strong {
    color: #0d47a1;
}

.admin-statistics-log-table {
    min-width: 650px;
}

.admin-statistics-pagination {
    margin-top: 15px;
    font-size: 12px;
}

/* STATISTIK TAMBAHAN */

.admin-statistics-section {
    margin-top: 22px;
}

.admin-statistics-section-heading {
    margin-bottom: 13px;
}

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

.admin-statistics-small-card {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    padding: 16px;
    border: 1px solid #dce7f4;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(9,48,105,.035);
}

.admin-statistics-small-card span {
    color: #71839a;
    font-size: 11px;
}

.admin-statistics-small-card strong {
    color: #345273;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.admin-statistics-small-card b {
    color: #0d47a1;
    font-size: 24px;
    line-height: 1.2;
}

.admin-statistics-small-card small {
    color: #8392a6;
    font-size: 10px;
}

.admin-statistics-empty {
    color: #71839a;
    font-size: 12px;
}

/* RESPONSIVE TABLET */

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

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

/* RESPONSIVE MOBILE */


@media (max-width: 640px) {
    .admin-site-form-page {
        padding: 10px 8px 22px !important;
        box-sizing: border-box !important;
    }
}

    .admin-statistics-heading h1 {
        font-size: 23px !important;
    }

    .admin-statistics-filter {
        grid-template-columns: 1fr;
        gap: 11px;
        padding: 14px;
    }

    .admin-statistics-filter input,
    .admin-statistics-filter select {
        height: 42px;
    }

    .admin-statistics-submit {
        width: 100%;
    }

    .admin-statistics-reset {
        width: 100%;
        height: 32px;
    }

    .admin-statistics-total,
    .admin-statistics-export {
        padding: 15px;
    }

    .admin-statistics-total strong {
        font-size: 25px;
    }

    .admin-statistics-columns {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .admin-statistics-panel {
        padding: 14px;
    }

    .admin-statistics-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .admin-statistics-small-card {
        padding: 13px;
    }

    .admin-statistics-small-card b {
        font-size: 21px;
    }


@media (max-width: 360px) {
    .admin-statistics-card-grid {
        grid-template-columns: 1fr;
    }
}


/* =====================================
   FORM TAMBAH DATA TETENGER
   Khusus resource sites
===================================== */


/* Samakan layout dengan Statistik Scan */
.admin-site-form-page {
    width: 100% !important;
    max-width: 1525px !important;
    margin: 0 auto !important;
    padding: 8px 14px 32px !important;
    box-sizing: border-box !important;
}


/* Header */
.admin-site-form-page .admin-form-heading {
    margin-bottom: 20px !important;
    gap: 15px;
}

.admin-site-form-page .admin-form-heading h1 {
    font-size: 25px !important;
    line-height: 1.35;
    margin-bottom: 5px;
}

/* Panduan pengisian */
.admin-site-form-page .form-guide-card {
    margin-bottom: 18px !important;
    padding: 16px 19px !important;
    border-radius: 13px !important;
}

.admin-site-form-page .form-guide-card p {
    font-size: 12px !important;
    line-height: 1.65;
}

/* Form utama */
.admin-site-form-page .admin-data-form {
    padding: 25px !important;
    border-radius: 15px !important;
}

/* Susunan input */
.admin-site-form-page .admin-form-grid.site-fields {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 22px !important;
}

.admin-site-form-page .admin-form-grid .field {
    min-width: 0;
    margin-bottom: 17px !important;
}

.admin-site-form-page .admin-form-grid .field-wide {
    grid-column: 1 / -1 !important;
}

/* Label */
.admin-site-form-page .admin-data-form label {
    display: block;
    margin-bottom: 7px;
    font-size: 12px !important;
    font-weight: 750;
}

/* Input */
.admin-site-form-page .admin-data-form input,
.admin-site-form-page .admin-data-form select {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    font-size: 12px;
    border-radius: 9px;
    box-sizing: border-box;
}

/* Textarea */
.admin-site-form-page .admin-data-form textarea {
    width: 100%;
    min-height: 145px;
    padding: 12px;
    font-size: 12px;
    line-height: 1.6;
    border-radius: 9px;
    box-sizing: border-box;
    resize: vertical;
}

/* Pembatas bagian informasi */
.admin-site-form-page .form-section-intro {
    margin: 15px 0 17px !important;
    padding-bottom: 12px !important;
}

.admin-site-form-page .form-section-intro strong {
    font-size: 14px;
}

.admin-site-form-page .form-section-intro p {
    margin-top: 5px;
    font-size: 11px;
    line-height: 1.6;
}

/* Tombol */
.admin-site-form-page .admin-form-actions {
    margin-top: 10px !important;
    padding-top: 18px !important;
    gap: 10px;
}

.admin-site-form-page .admin-form-actions button,
.admin-site-form-page .admin-form-actions a {
    min-height: 39px;
    padding: 9px 16px;
    font-size: 12px;
    border-radius: 9px;
}

/* Tablet dan HP */
@media (max-width: 768px) {
    .admin-site-form-page {
        padding: 0 2px 25px !important;
    }

    .admin-site-form-page .admin-form-heading {
        align-items: flex-start;
    }

    .admin-site-form-page .admin-data-form {
        padding: 17px !important;
    }

    .admin-site-form-page .admin-form-grid.site-fields {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .admin-site-form-page .admin-form-grid .field-wide {
        grid-column: auto !important;
    }

    .admin-site-form-page .admin-form-actions {
        display: flex;
        flex-direction: column;
    }

    .admin-site-form-page .admin-form-actions button,
    .admin-site-form-page .admin-form-actions a {
        width: 100%;
        justify-content: center;
    }
}


/* =========================================
   LENTERA - TAMBAH GALERI
   Layout mengikuti Statistik Scan
========================================= */

.admin-gallery-form-page {
    width: 100% !important;
    max-width: 1525px !important;
    margin: 0 auto !important;
    padding: 8px 14px 32px !important;
    box-sizing: border-box !important;
}

/* Header */
.admin-gallery-form-page .admin-form-heading {
    margin: 0 0 22px !important;
    gap: 15px;
}

.admin-gallery-form-page .admin-form-heading h1 {
    font-size: 25px !important;
    line-height: 1.35;
    margin-bottom: 6px;
}

/* Form utama */
.admin-gallery-form-page .admin-data-form {
    width: 100%;
    padding: 23px !important;
    margin: 0;
    box-sizing: border-box;
    border-radius: 15px !important;
}

/* Susunan kolom */
.admin-gallery-form-page .admin-form-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 20px !important;
}

.admin-gallery-form-page .admin-form-grid .field {
    min-width: 0;
    margin-bottom: 18px !important;
}

.admin-gallery-form-page .admin-form-grid .field-wide {
    grid-column: 1 / -1;
}

/* Label */
.admin-gallery-form-page .admin-data-form label {
    display: block;
    margin-bottom: 7px;
    color: #234566;
    font-size: 12px !important;
    font-weight: 750;
}

/* Input dan pilihan */
.admin-gallery-form-page .admin-data-form input:not([type="file"]),
.admin-gallery-form-page .admin-data-form select {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    box-sizing: border-box;
    border-radius: 9px;
    font-size: 12px;
}

/* Upload foto */
.admin-gallery-form-page .admin-data-form input[type="file"] {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 42px;
    padding: 9px;
    box-sizing: border-box;
    border: 1px solid #d5e2f1;
    border-radius: 9px;
    background: #f8fbff;
    font-size: 12px;
}

/* Petunjuk upload */
.admin-gallery-form-page .admin-data-form .small,
.admin-gallery-form-page .admin-data-form .field-hint {
    display: block;
    margin-top: 7px;
    color: #71839a;
    font-size: 11px;
    line-height: 1.6;
}

/* Pratinjau foto */
.admin-gallery-form-page .setting-image-preview {
    display: block;
    width: min(100%, 420px);
    max-height: 240px;
    margin: 10px 0 14px;
    object-fit: cover;
    border-radius: 11px;
}

/* Tombol */
.admin-gallery-form-page .admin-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
    padding-top: 18px;
}

.admin-gallery-form-page .admin-form-actions button,
.admin-gallery-form-page .admin-form-actions a {
    min-height: 39px;
    padding: 9px 16px;
    border-radius: 9px;
    font-size: 12px;
}

/* Tablet dan mobile */
@media (max-width: 768px) {
    .admin-gallery-form-page {
        padding: 10px 8px 22px !important;
    }

    .admin-gallery-form-page .admin-form-heading {
        align-items: flex-start;
    }

    .admin-gallery-form-page .admin-data-form {
        padding: 17px !important;
    }

    .admin-gallery-form-page .admin-form-grid {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .admin-gallery-form-page .admin-form-grid .field-wide {
        grid-column: auto;
    }

    .admin-gallery-form-page .admin-form-actions {
        flex-direction: column;
    }

    .admin-gallery-form-page .admin-form-actions button,
    .admin-gallery-form-page .admin-form-actions a {
        width: 100%;
        justify-content: center;
    }
}


/* =========================================
   LENTERA - TAMBAH DAN EDIT QR CODE
   Layout mengikuti Tambah Galeri
========================================= */

.admin-qr-form-page {
    width: 100% !important;
    max-width: 1525px !important;
    margin: 0 auto !important;
    padding: 8px 14px 32px !important;
    box-sizing: border-box !important;
}

/* Heading */
.admin-qr-form-page .admin-form-heading {
    margin: 0 0 22px !important;
    gap: 15px;
}

.admin-qr-form-page .admin-form-heading h1 {
    color: #0b3679 !important;
    font-size: 25px !important;
    font-weight: 800;
    line-height: 1.35;
}

.admin-qr-form-page .admin-form-heading p {
    font-size: 12px;
    line-height: 1.6;
}

/* Panduan QR Code */
.admin-qr-form-page .form-guide-card {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-bottom: 18px !important;
    padding: 16px 18px !important;
    border: 1px solid #d8e8f8 !important;
    border-radius: 13px !important;
    background: linear-gradient(110deg,#f1f8ff,#fff) !important;
}

.admin-qr-form-page .form-guide-card p {
    margin: 5px 0 0;
    color: #647b96;
    font-size: 12px;
    line-height: 1.65;
}

/* Form utama */
.admin-qr-form-page .admin-data-form {
    width: 100%;
    padding: 23px !important;
    margin: 0;
    box-sizing: border-box;
    border: 1px solid #dce8f6 !important;
    border-radius: 15px !important;
    box-shadow: 0 5px 18px rgba(13,71,161,.045) !important;
}

/* Grid form */
.admin-qr-form-page .admin-form-grid {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 0 20px !important;
}

.admin-qr-form-page .admin-form-grid .field {
    min-width: 0;
    margin-bottom: 18px !important;
}

.admin-qr-form-page .admin-form-grid .field-wide {
    grid-column: 1 / -1;
}

/* Label */
.admin-qr-form-page .admin-data-form label {
    display: block;
    margin-bottom: 7px;
    color: #345273;
    font-size: 12px !important;
    font-weight: 750;
}

/* Input dan select */
.admin-qr-form-page .admin-data-form input:not([type=file]),
.admin-qr-form-page .admin-data-form select,
.admin-qr-form-page .admin-data-form textarea {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid #d5e2f1;
    border-radius: 9px;
    background: #fbfdff;
    font-size: 12px;
}

.admin-qr-form-page .admin-data-form input:not([type=file]),
.admin-qr-form-page .admin-data-form select {
    min-height: 42px;
    padding: 9px 12px;
}

/* Upload gambar QR */
.admin-qr-form-page .admin-data-form input[type=file] {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 42px;
    padding: 9px;
    box-sizing: border-box;
    border: 1px solid #d5e2f1;
    border-radius: 9px;
    background: #f8fbff;
    font-size: 12px;
}

/* Preview QR */
.admin-qr-form-page .setting-image-preview {
    display: block;
    width: min(100%,300px);
    max-height: 300px;
    margin: 10px 0 15px;
    padding: 8px;
    border: 1px solid #e0eaf5;
    border-radius: 12px;
    background: #fff;
    object-fit: contain;
}

/* Petunjuk */
.admin-qr-form-page .admin-data-form .small,
.admin-qr-form-page .admin-data-form .field-hint {
    display: block;
    margin-top: 7px;
    color: #71839a;
    font-size: 11px;
    line-height: 1.6;
}

/* Tombol */
.admin-qr-form-page .admin-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
    padding-top: 18px;
    border-top: 1px solid #e4edf7;
}

.admin-qr-form-page .admin-form-actions button,
.admin-qr-form-page .admin-form-actions a {
    min-height: 39px;
    padding: 9px 16px;
    border-radius: 9px;
    font-size: 12px;
}

/* Tablet dan HP */
@media (max-width: 768px) {
    .admin-qr-form-page {
        padding: 10px 8px 22px !important;
    }

    .admin-qr-form-page .admin-form-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-qr-form-page .admin-data-form {
        padding: 17px !important;
    }

    .admin-qr-form-page .admin-form-grid {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .admin-qr-form-page .admin-form-grid .field-wide {
        grid-column: auto;
    }

    .admin-qr-form-page .admin-form-actions {
        flex-direction: column;
    }

    .admin-qr-form-page .admin-form-actions button,
    .admin-qr-form-page .admin-form-actions a {
        width: 100%;
        justify-content: center;
    }
}


/* =========================================
   LENTERA - TAMBAH DAN EDIT BADGE
   Layout mengikuti Tambah Galeri
========================================= */

.admin-badge-form-page {
    width: 100% !important;
    max-width: 1525px !important;
    margin: 0 auto !important;
    padding: 8px 14px 32px !important;
    box-sizing: border-box !important;
}

/* Heading */
.admin-badge-form-page .admin-form-heading {
    margin: 0 0 22px !important;
    gap: 15px;
}

.admin-badge-form-page .admin-form-heading h1 {
    color: #0b3679 !important;
    font-size: 25px !important;
    font-weight: 800;
    line-height: 1.35;
}

.admin-badge-form-page .admin-form-heading p {
    font-size: 12px;
    line-height: 1.6;
}

/* Form utama */
.admin-badge-form-page .admin-data-form {
    width: 100%;
    padding: 23px !important;
    margin: 0;
    box-sizing: border-box;
    border: 1px solid #dce8f6 !important;
    border-radius: 15px !important;
    box-shadow: 0 5px 18px rgba(13,71,161,.045) !important;
}

/* Grid form */
.admin-badge-form-page .admin-form-grid {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 0 20px !important;
}

.admin-badge-form-page .admin-form-grid .field {
    min-width: 0;
    margin-bottom: 18px !important;
}

.admin-badge-form-page .admin-form-grid .field-wide {
    grid-column: 1 / -1;
}

/* Label */
.admin-badge-form-page .admin-data-form label {
    display: block;
    margin-bottom: 7px;
    color: #345273;
    font-size: 12px !important;
    font-weight: 750;
}

/* Input, select, textarea */
.admin-badge-form-page .admin-data-form input:not([type=file]),
.admin-badge-form-page .admin-data-form select,
.admin-badge-form-page .admin-data-form textarea {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid #d5e2f1;
    border-radius: 9px;
    background: #fbfdff;
    font-size: 12px;
}

.admin-badge-form-page .admin-data-form input:not([type=file]),
.admin-badge-form-page .admin-data-form select {
    min-height: 42px;
    padding: 9px 12px;
}

.admin-badge-form-page .admin-data-form textarea {
    min-height: 100px;
    padding: 11px 12px;
    line-height: 1.6;
    resize: vertical;
}

/* Upload ikon badge */
.admin-badge-form-page .admin-data-form input[type=file] {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 42px;
    padding: 9px;
    box-sizing: border-box;
    border: 1px solid #d5e2f1;
    border-radius: 9px;
    background: #f8fbff;
    font-size: 12px;
}

/* Preview ikon */
.admin-badge-form-page .setting-image-preview {
    display: block;
    width: 120px;
    height: 120px;
    max-width: 100%;
    margin: 10px 0 14px;
    padding: 10px;
    border: 1px solid #e0eaf5;
    border-radius: 13px;
    background: #f8fbff;
    object-fit: contain;
}

/* Petunjuk input */
.admin-badge-form-page .admin-data-form .small,
.admin-badge-form-page .admin-data-form .field-hint {
    display: block;
    margin-top: 7px;
    color: #71839a;
    font-size: 11px;
    line-height: 1.6;
}

/* Pesan validasi */
.admin-badge-form-page .field-error {
    display: block;
    margin-top: 6px;
    font-size: 11px;
}

/* Tombol */
.admin-badge-form-page .admin-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
    padding-top: 18px;
    border-top: 1px solid #e4edf7;
}

.admin-badge-form-page .admin-form-actions button,
.admin-badge-form-page .admin-form-actions a {
    min-height: 39px;
    padding: 9px 16px;
    border-radius: 9px;
    font-size: 12px;
}

/* Mobile */
@media (max-width: 768px) {
    .admin-badge-form-page {
        padding: 10px 8px 22px !important;
    }

    .admin-badge-form-page .admin-form-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-badge-form-page .admin-data-form {
        padding: 17px !important;
    }

    .admin-badge-form-page .admin-form-grid {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .admin-badge-form-page .admin-form-grid .field-wide {
        grid-column: auto;
    }

    .admin-badge-form-page .admin-form-actions {
        flex-direction: column;
    }

    .admin-badge-form-page .admin-form-actions button,
    .admin-badge-form-page .admin-form-actions a {
        width: 100%;
        justify-content: center;
    }
}


/* =========================================
   LENTERA - FORM TIMELINE SEJARAH
   Konsisten dengan halaman Tambah Galeri
========================================= */

.admin-timeline-form-page {
    width: 100% !important;
    max-width: 1525px !important;
    margin: 0 auto !important;
    padding: 8px 14px 32px !important;
    box-sizing: border-box !important;
}

/* Heading */
.admin-timeline-form-page .admin-form-heading {
    margin-bottom: 22px !important;
    gap: 15px;
}

.admin-timeline-form-page .admin-form-heading h1 {
    color: #0b3679 !important;
    font-size: 25px !important;
    font-weight: 800;
    line-height: 1.35;
}

.admin-timeline-form-page .admin-form-heading p {
    font-size: 12px;
    line-height: 1.6;
}

/* Form utama */
.admin-timeline-form-page .admin-data-form {
    width: 100%;
    padding: 23px !important;
    margin: 0;
    box-sizing: border-box;
    border: 1px solid #dce8f6 !important;
    border-radius: 15px !important;
    box-shadow: 0 5px 18px rgba(13,71,161,.045) !important;
}

/* Susunan field */
.admin-timeline-form-page .admin-form-grid {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 0 20px !important;
}

.admin-timeline-form-page .admin-form-grid .field {
    min-width: 0;
    margin-bottom: 18px !important;
}

/* Judul peristiwa memenuhi lebar form */
.admin-timeline-form-page .admin-form-grid .field:has(label[for="judul"]) {
    grid-column: 1 / -1;
}

/* Cerita sejarah memenuhi lebar form */
.admin-timeline-form-page .admin-form-grid .field:has(label[for="cerita"]) {
    grid-column: 1 / -1;
}

/* Label */
.admin-timeline-form-page .admin-data-form label {
    display: block;
    margin-bottom: 7px;
    color: #345273;
    font-size: 12px !important;
    font-weight: 750;
}

/* Input dan select */
.admin-timeline-form-page .admin-data-form input:not([type=file]),
.admin-timeline-form-page .admin-data-form select,
.admin-timeline-form-page .admin-data-form textarea {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid #d5e2f1;
    border-radius: 9px;
    background: #fbfdff;
    font-size: 12px;
}

.admin-timeline-form-page .admin-data-form input:not([type=file]),
.admin-timeline-form-page .admin-data-form select {
    min-height: 42px;
    padding: 9px 12px;
}

/* Cerita sejarah */
.admin-timeline-form-page .admin-data-form textarea {
    min-height: 180px;
    padding: 12px;
    line-height: 1.7;
    resize: vertical;
}

/* Upload foto */
.admin-timeline-form-page .admin-data-form input[type=file] {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 42px;
    padding: 9px;
    box-sizing: border-box;
    border: 1px solid #d5e2f1;
    border-radius: 9px;
    background: #f8fbff;
    font-size: 12px;
}

/* Pratinjau foto */
.admin-timeline-form-page .setting-image-preview {
    display: block;
    width: min(100%, 320px);
    max-height: 200px;
    margin: 10px 0 14px;
    padding: 5px;
    border: 1px solid #e0eaf5;
    border-radius: 11px;
    background: #fff;
    object-fit: cover;
}

/* Petunjuk */
.admin-timeline-form-page .admin-data-form .small,
.admin-timeline-form-page .admin-data-form .field-hint {
    display: block;
    margin-top: 7px;
    color: #71839a;
    font-size: 11px;
    line-height: 1.6;
}

/* Tombol */
.admin-timeline-form-page .admin-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
    padding-top: 18px;
    border-top: 1px solid #e4edf7;
}

.admin-timeline-form-page .admin-form-actions button,
.admin-timeline-form-page .admin-form-actions a {
    min-height: 39px;
    padding: 9px 16px;
    border-radius: 9px;
    font-size: 12px;
}

/* Responsif HP */
@media (max-width: 768px) {
    .admin-timeline-form-page {
        padding: 10px 8px 22px !important;
    }

    .admin-timeline-form-page .admin-form-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-timeline-form-page .admin-data-form {
        padding: 17px !important;
    }

    .admin-timeline-form-page .admin-form-grid {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .admin-timeline-form-page .admin-form-grid .field {
        grid-column: auto !important;
    }

    .admin-timeline-form-page .admin-data-form textarea {
        min-height: 150px;
    }

    .admin-timeline-form-page .admin-form-actions {
        flex-direction: column;
    }

    .admin-timeline-form-page .admin-form-actions button,
    .admin-timeline-form-page .admin-form-actions a {
        width: 100%;
        justify-content: center;
    }
}


/* =========================================
   LENTERA - EDIT PENGATURAN
   Konsisten dengan form admin lainnya
========================================= */

.admin-settings-form-page {
    width: 100% !important;
    max-width: 1525px !important;
    margin: 0 auto !important;
    padding: 8px 14px 32px !important;
    box-sizing: border-box !important;
}

/* Heading */
.admin-settings-form-page .admin-form-heading {
    margin-bottom: 20px !important;
    gap: 15px;
}

.admin-settings-form-page .admin-form-heading h1 {
    color: #0b3679 !important;
    font-size: 25px !important;
    font-weight: 800;
    line-height: 1.35;
}

.admin-settings-form-page .admin-form-heading p {
    font-size: 12px;
    line-height: 1.6;
}

/* Keterangan nama pengaturan */
.admin-settings-form-page .admin-setting-description {
    margin: 0 0 18px !important;
    padding: 14px 17px;
    border: 1px solid #dce8f6;
    border-radius: 12px;
    background: #f5f9ff;
    color: #526b86;
    font-size: 12px;
    line-height: 1.7;
}

.admin-settings-form-page .admin-setting-description strong {
    color: #174a89;
    font-size: 13px;
}

/* Form utama */
.admin-settings-form-page .admin-data-form {
    width: 100%;
    padding: 23px !important;
    margin: 0;
    box-sizing: border-box;
    border: 1px solid #dce8f6 !important;
    border-radius: 15px !important;
    box-shadow: 0 5px 18px rgba(13,71,161,.045) !important;
}

/* Jarak field */
.admin-settings-form-page .admin-data-form .field {
    width: 100%;
    min-width: 0;
    margin-bottom: 18px !important;
}

/* Label */
.admin-settings-form-page .admin-data-form label {
    display: block;
    margin-bottom: 8px;
    color: #345273;
    font-size: 12px !important;
    font-weight: 750;
}

/* Kolom nilai pengaturan */
.admin-settings-form-page .admin-data-form textarea {
    display: block;
    width: 100%;
    min-height: 165px;
    padding: 13px 14px;
    box-sizing: border-box;
    border: 1px solid #d5e2f1;
    border-radius: 10px;
    background: #fbfdff;
    color: #334155;
    font-size: 13px;
    line-height: 1.7;
    resize: vertical;
}

/* Focus */
.admin-settings-form-page .admin-data-form textarea:focus,
.admin-settings-form-page .admin-data-form input:focus {
    border-color: #4b9be5;
    outline: 3px solid rgba(79,195,247,.16);
}

/* Upload background */
.admin-settings-form-page .admin-data-form input[type=file] {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 43px;
    padding: 9px;
    box-sizing: border-box;
    border: 1px solid #d5e2f1;
    border-radius: 9px;
    background: #f8fbff;
    font-size: 12px;
}

/* Pratinjau gambar background */
.admin-settings-form-page .setting-image-preview {
    display: block;
    width: min(100%, 520px);
    max-height: 240px;
    margin: 10px 0 16px;
    padding: 5px;
    box-sizing: border-box;
    border: 1px solid #dce8f6;
    border-radius: 12px;
    background: #fff;
    object-fit: cover;
}

/* Keterangan tambahan */
.admin-settings-form-page .admin-data-form .small,
.admin-settings-form-page .admin-data-form .muted {
    display: block;
    margin-top: 8px;
    color: #71839a;
    font-size: 11px;
    line-height: 1.7;
}

/* Pesan kesalahan */
.admin-settings-form-page .field-error {
    display: block;
    margin-top: 7px;
    color: #c0392b;
    font-size: 11px;
}

/* Tombol */
.admin-settings-form-page .admin-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
    padding-top: 18px;
    border-top: 1px solid #e4edf7;
}

.admin-settings-form-page .admin-form-actions button,
.admin-settings-form-page .admin-form-actions a {
    min-height: 39px;
    padding: 9px 16px;
    border-radius: 9px;
    font-size: 12px;
}

/* Tablet dan HP */
@media (max-width: 768px) {
    .admin-settings-form-page {
        padding: 10px 8px 22px !important;
    }

    .admin-settings-form-page .admin-form-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-settings-form-page .admin-data-form {
        padding: 17px !important;
    }

    .admin-settings-form-page .admin-data-form textarea {
        min-height: 145px;
        font-size: 12px;
    }

    .admin-settings-form-page .setting-image-preview {
        width: 100%;
        max-width: 100%;
        max-height: 200px;
    }

    .admin-settings-form-page .admin-form-actions {
        flex-direction: column;
    }

    .admin-settings-form-page .admin-form-actions button,
    .admin-settings-form-page .admin-form-actions a {
        width: 100%;
        justify-content: center;
    }
}


/* Ukuran banner  */
#pwa-install-wrap {
    width: fit-content !important;
    max-width: min(100%, 640px) !important;
    margin: 0 auto !important;
    padding: 11px 15px !important;
    gap: 13px !important;
    border-radius: 14px !important;
    box-sizing: border-box;
}

/* Tulisan banner */
.pwa-install-copy strong {
    font-size: 12px !important;
}

/* Tombol Pasang LENTERA */
#pwa-install {
    min-height: 40px !important;
    padding: 9px 17px !important;
    font-size: 13px !important;
    border-radius: 30px !important;
}

/* Tampilan HP */
@media (max-width: 900px) {
    #pwa-install-wrap {
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px !important;
        gap: 10px !important;
    }

    #pwa-install {
        min-height: 40px !important;
        width: 100% !important;
    }
}
 

/* =========================================
   LENTERA - TAMPILAN KUIS TETENGER
   ========================================= */

#kuis.site-detail-panel {
    margin-top: 19px !important;
    padding: 24px !important;
    border: 1px solid #dce8f6 !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 6px 22px rgba(13, 71, 161, .05) !important;
    box-sizing: border-box;
}

#kuis .site-detail-section-label {
    margin-bottom: 7px !important;
    color: #2876c5 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px;
}

#kuis h2 {
    margin: 0 0 17px !important;
    color: #103c76 !important;
    font-size: 23px !important;
    font-weight: 800 !important;
}

/* Daftar kuis */
#kuis .site-detail-quiz-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
}

/* Kartu kuis */
#kuis .site-detail-quiz {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    width: 100%;
    min-width: 0;
    padding: 16px !important;
    border: 1px solid #dce8f6 !important;
    border-radius: 15px !important;
    background: #fff !important;
    box-shadow: 0 3px 12px rgba(13, 71, 161, .035);
    box-sizing: border-box;
    transition: border-color .2s ease, box-shadow .2s ease;
}

#kuis .site-detail-quiz:hover {
    border-color: #b7d5f3 !important;
    box-shadow: 0 6px 17px rgba(13, 71, 161, .08);
}

/* Ikon */
#kuis .site-detail-quiz-icon {
    display: grid;
    place-items: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: #eaf3ff;
    color: #1556a5;
}

#kuis .site-detail-quiz-icon .icon {
    width: 22px;
    height: 22px;
}

/* Informasi kuis */
#kuis .site-detail-quiz-info {
    flex: 1 1 auto;
    min-width: 0;
}

#kuis .site-detail-quiz-info h3 {
    margin: 0 0 5px !important;
    color: #173f75 !important;
    font-size: 15px !important;
    font-weight: 750 !important;
}

#kuis .site-detail-quiz-info p {
    margin: 0 0 6px !important;
    color: #647b96 !important;
    font-size: 12px !important;
    line-height: 1.6;
}

#kuis .site-detail-quiz-info span {
    color: #71859d !important;
    font-size: 11px !important;
}

/* Tombol mulai */
#kuis .site-detail-quiz-action {
    flex: 0 0 auto;
}

#kuis .site-detail-quiz-action form {
    margin: 0;
}

#kuis .site-detail-quiz-action button {
    min-height: 39px;
    padding: 9px 17px !important;
    border: 1px solid #124b98 !important;
    border-radius: 10px !important;
    background: #124b98 !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer;
    transition: background .2s ease;
}

#kuis .site-detail-quiz-action button:hover {
    background: #0b3679 !important;
}

/* Kondisi belum ada kuis */
#kuis .site-detail-empty {
    margin: 0;
    padding: 18px;
    border: 1px dashed #cbdced;
    border-radius: 13px;
    background: #f7faff;
    color: #71859d;
    font-size: 13px;
    text-align: center;
    line-height: 1.6;
}

/* Tampilan tablet dan HP */
@media (max-width: 640px) {
    #kuis.site-detail-panel {
        padding: 17px !important;
        margin-top: 15px !important;
    }

    #kuis h2 {
        font-size: 20px !important;
        margin-bottom: 14px !important;
    }

    #kuis .site-detail-quiz {
        flex-wrap: wrap;
        gap: 11px !important;
        padding: 13px !important;
    }

    #kuis .site-detail-quiz-icon {
        flex-basis: 41px;
        width: 41px;
        height: 41px;
    }

    #kuis .site-detail-quiz-info {
        flex: 1 1 calc(100% - 60px);
    }

    #kuis .site-detail-quiz-action {
        width: 100%;
        flex-basis: 100%;
    }

    #kuis .site-detail-quiz-action button {
        width: 100%;
        min-height: 42px;
    }
}


/* ==========================================
   LENTERA - REDESAIN HALAMAN DAFTAR KUIS
   ========================================== */

.quiz-index-page {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px 0 40px;
    box-sizing: border-box;
}

/* Heading */
.quiz-index-heading {
    max-width: 800px;
    margin-bottom: 24px !important;
}

.quiz-index-heading .eyebrow {
    margin-bottom: 8px;
    color: #2876c5;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.quiz-index-heading h1 {
    margin: 0 0 10px !important;
    color: #103c76 !important;
    font-size: clamp(30px, 3vw, 38px) !important;
    line-height: 1.2;
    font-weight: 800;
}

.quiz-index-heading > p:last-child {
    max-width: 760px;
    margin: 0 !important;
    color: #647b96 !important;
    font-size: 14px !important;
    line-height: 1.7;
}

/* Grid kartu */
.quiz-index-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 340px));
    align-items: stretch;
    gap: 16px !important;
    width: 100%;
}

/* Kartu kuis */
.quiz-index-card {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    min-width: 0;
    min-height: 220px;
    padding: 20px !important;
    border: 1px solid #dce8f6 !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 5px 18px rgba(13,71,161,.05) !important;
    box-sizing: border-box;
    transition: transform .2s ease, box-shadow .2s ease;
}

.quiz-index-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(13,71,161,.09) !important;
}

/* Ikon */
.quiz-index-icon {
    display: grid;
    place-items: center;
    width: 42px !important;
    height: 42px !important;
    margin-bottom: 13px !important;
    border-radius: 12px !important;
    background: #eaf3ff !important;
    color: #1556a5 !important;
}

/* Judul */
.quiz-index-card h2 {
    margin: 0 0 7px !important;
    color: #173f75 !important;
    font-size: 17px !important;
    font-weight: 750;
    line-height: 1.4;
}

/* Deskripsi */
.quiz-index-card p {
    margin: 0 0 12px !important;
    color: #647b96 !important;
    font-size: 13px !important;
    line-height: 1.6;
}

/* Informasi jumlah soal */
.quiz-index-meta {
    display: inline-flex;
    align-items: center;
    margin-top: 3px;
    padding: 5px 10px;
    border-radius: 7px;
    background: #eef5ff;
    color: #245b99 !important;
    font-size: 11px !important;
    font-weight: 650;
}

/* Tombol */
.quiz-index-card form {
    width: 100%;
    margin: auto 0 0 !important;
    padding-top: 15px;
}

.quiz-index-card form button,
.quiz-index-card > a.button {
    width: 100%;
    min-height: 40px;
    padding: 9px 15px !important;
    border-radius: 9px !important;
    font-size: 13px !important;
    font-weight: 700;
}

/* Pagination */
.quiz-index-page nav {
    margin-top: 24px;
}

/* Mobile */
@media (max-width: 640px) {
    .quiz-index-page {
        padding: 18px 0 28px;
    }

    .quiz-index-heading {
        margin-bottom: 19px !important;
    }

    .quiz-index-heading h1 {
        font-size: 28px !important;
    }

    .quiz-index-heading > p:last-child {
        font-size: 13px !important;
    }

    .quiz-index-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px !important;
    }

    .quiz-index-card {
        min-height: 0;
        padding: 17px !important;
    }
}


/* ==========================================
   LENTERA - FORM TAMBAH / EDIT PENGGUNA
   ========================================== */

.admin-user-form-page {
    width: 100% !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 8px 14px 32px !important;
    box-sizing: border-box !important;
}

/* Heading */
.admin-user-form-page .admin-form-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px !important;
}

.admin-user-form-page .admin-form-heading h1 {
    color: #103c76 !important;
    font-size: 27px !important;
    font-weight: 800 !important;
    line-height: 1.3;
    margin: 0;
}

.admin-user-form-page .admin-form-heading p.muted {
    color: #647b96 !important;
    font-size: 13px !important;
    line-height: 1.6;
    margin-top: 7px !important;
}

/* Panduan */
.admin-user-form-page .form-guide-card {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-bottom: 18px !important;
    padding: 16px 18px !important;
    border: 1px solid #d8e8f8 !important;
    border-radius: 14px !important;
    background: linear-gradient(110deg, #f1f8ff, #fff) !important;
}

.admin-user-form-page .form-guide-card strong {
    color: #174a89;
    font-size: 14px;
}

.admin-user-form-page .form-guide-card p {
    margin: 5px 0 0;
    color: #647b96;
    font-size: 12px;
    line-height: 1.7;
}

/* Form utama */
.admin-user-form-page .admin-data-form {
    width: 100%;
    padding: 24px !important;
    margin: 0 !important;
    border: 1px solid #dce8f6 !important;
    border-radius: 17px !important;
    background: #fff !important;
    box-shadow: 0 5px 20px rgba(13, 71, 161, .05) !important;
    box-sizing: border-box;
}

/* Susunan input */
.admin-user-form-page .admin-form-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px !important;
    row-gap: 0 !important;
}

.admin-user-form-page .admin-data-form .field {
    min-width: 0;
    margin-bottom: 18px !important;
}

.admin-user-form-page .admin-data-form label {
    display: block;
    margin-bottom: 7px;
    color: #345273 !important;
    font-size: 12px !important;
    font-weight: 750 !important;
}

/* Input dan select */
.admin-user-form-page .admin-data-form input,
.admin-user-form-page .admin-data-form select {
    width: 100%;
    min-height: 43px;
    padding: 10px 12px;
    border: 1px solid #d5e2f1 !important;
    border-radius: 10px !important;
    background: #fbfdff !important;
    color: #334155;
    font-size: 13px !important;
    box-sizing: border-box;
    transition: border-color .2s, box-shadow .2s;
}

.admin-user-form-page .admin-data-form input:focus,
.admin-user-form-page .admin-data-form select:focus {
    border-color: #4b9be5 !important;
    outline: 3px solid rgba(79, 195, 247, .14);
}

/* Keterangan field */
.admin-user-form-page .field-hint {
    margin: 6px 0 0;
    color: #74869b;
    font-size: 11px;
    line-height: 1.6;
}

/* Pesan validasi */
.admin-user-form-page .field-error {
    display: block;
    margin-top: 5px;
    color: #b42332;
    font-size: 11px;
}

/* Tombol */
.admin-user-form-page .admin-form-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
    padding-top: 19px;
    border-top: 1px solid #e4edf7;
}

.admin-user-form-page .admin-form-actions button,
.admin-user-form-page .admin-form-actions a {
    min-height: 40px;
    padding: 10px 18px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
}

/* Mobile */
@media (max-width: 640px) {
    .admin-user-form-page {
        padding: 12px 10px 25px !important;
    }

    .admin-user-form-page .admin-form-heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .admin-user-form-page .admin-form-heading h1 {
        font-size: 23px !important;
    }

    .admin-user-form-page .admin-data-form {
        padding: 17px !important;
        border-radius: 14px !important;
    }

    .admin-user-form-page .admin-form-grid {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .admin-user-form-page .admin-form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-user-form-page .admin-form-actions button,
    .admin-user-form-page .admin-form-actions a {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}


/* ==========================================
   LENTERA - FOOTER DUA TINGKAT
   ========================================== */

/* CTA bagian atas */
.lentera-footer-cta {
    width: 100%;
    padding: 48px 20px 44px;
    background: #f3f7fc;
    border-top: 1px solid #d5e2f1;
    box-sizing: border-box;
}

.lentera-footer-cta-inner {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.lentera-footer-kicker {
    margin: 0 0 10px;
    color: #2876c5;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}

.lentera-footer-cta-inner h2 {
    margin: 0 0 12px;
    color: #103c76;
    font-size: clamp(25px, 3vw, 34px);
    font-weight: 800;
    line-height: 1.3;
}

.lentera-footer-desc {
    max-width: 650px;
    margin: 0 auto;
    color: #647b96;
    font-size: 14px;
    line-height: 1.8;
}

/* Area instalasi PWA */
.lentera-footer-pwa {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: 100%;
    margin: 24px auto 0 !important;
    padding: 0 !important;
    display: flex;
    justify-content: center;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.lentera-footer-pwa #pwa-install-wrap:not([hidden]) {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    width: fit-content;
    max-width: 100%;
    padding: 13px 16px;
    border: 1px solid #d5e5f5;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 7px 22px rgba(13,71,161,.06);
}

.lentera-footer-pwa #pwa-install-wrap[hidden],
.lentera-footer-pwa #pwa-update[hidden] {
    display: none !important;
}

.lentera-footer-pwa .pwa-install-copy strong {
    color: #123f7f;
    font-size: 14px;
}

.lentera-footer-pwa #pwa-install,
.lentera-footer-pwa #pwa-update {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    padding: 10px 21px;
    border: 0;
    border-radius: 999px;
    background: #104ba5;
    color: #fff;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
}

/* Footer utama */
.site-footer.lentera-footer-modern {
    display: block !important;
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: linear-gradient(110deg, #0d3474, #104ba5) !important;
    color: #fff !important;
    text-align: center;
    box-sizing: border-box;
}

.lentera-footer-main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 38px 20px 30px;
}

.lentera-footer-brand h2 {
    margin: 0 0 9px;
    color: #fff !important;
    font-size: 25px;
    font-weight: 900;
    letter-spacing: 4px;
}

.lentera-footer-brand p {
    margin: 0 0 5px;
    color: rgba(255,255,255,.85) !important;
    font-size: 14px;
}

.lentera-footer-brand span {
    color: rgba(255,255,255,.65);
    font-size: 12px;
}

/* Ikon akses cepat */
.lentera-footer-shortcuts {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 23px 0 19px;
}

.lentera-footer-shortcuts a {
    display: grid;
    place-items: center;
    width: 39px;
    height: 39px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    color: #fff;
    text-decoration: none;
    transition: .2s ease;
}

.lentera-footer-shortcuts a:hover {
    background: #fff;
    color: #104ba5;
    transform: translateY(-3px);
}

/* Navigasi footer */
.lentera-footer-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-top: 8px;
}

.lentera-footer-nav a {
    color: #fff !important;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
}

.lentera-footer-nav a:hover {
    color: #9bd9ff !important;
}

/* Baris copyright */
.lentera-footer-bottom {
    padding: 15px 16px;
    background: #092c64;
    text-align: center;
}

.lentera-footer-bottom p {
    margin: 0 0 5px;
    color: rgba(255,255,255,.9);
    font-size: 11px;
}

.lentera-footer-bottom span {
    color: rgba(255,255,255,.65);
    font-size: 10px;
}

/* Responsif */
@media (max-width: 640px) {
    .lentera-footer-cta {
        padding: 35px 15px;
    }

    .lentera-footer-cta-inner h2 {
        font-size: 25px;
    }

    .lentera-footer-desc {
        font-size: 13px;
    }

    .lentera-footer-pwa #pwa-install-wrap:not([hidden]) {
        flex-direction: column;
        width: 100%;
        box-sizing: border-box;
        gap: 12px;
    }

    .lentera-footer-pwa #pwa-install {
        width: 100%;
    }

    .lentera-footer-main {
        padding: 32px 15px 25px;
    }

    .lentera-footer-nav {
        gap: 14px 17px;
    }

    .lentera-footer-nav a {
        font-size: 11px;
    }
}