/* ============ SOURCE: index.css ============ */
/* Admin Zavier theme-owned stylesheet; visual tokens are finalized by css/theme.css. */
/* Source: app/Modules/Opac/Views/index.php */

.opac-catalog-page {
    --opac-blue: #ea580c;
    --opac-blue-dark: #c2410c;
    --opac-blue-soft: #fff7ed;
    --opac-border: #f3dfd0;
    --opac-text: #172b43;
    --opac-muted: #64748b;
    min-height: 100vh;
    padding: 104px 20px 76px;
    color: var(--opac-text);
    background: #f4f7fa;
}

.opac-catalog-shell { width: 100%; max-width: 1180px; margin: 0 auto; }
.opac-page-header { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; padding: 18px 20px; background: #fff; border: 1px solid var(--opac-border); border-radius: 18px; }
.opac-page-back, .opac-page-heading-icon, .opac-search-heading > span, .opac-quick-menu > a > span, .opac-sidebar-heading > span, .opac-empty > span { display: inline-flex; align-items: center; justify-content: center; }
.opac-page-back { flex: 0 0 42px; width: 42px; height: 42px; color: var(--opac-blue-dark); background: var(--opac-blue-soft); border: 1px solid #edc4a0; border-radius: 12px; text-decoration: none; }
.opac-page-back:hover, .opac-page-back:focus { color: #fff; background: var(--opac-blue); border-color: var(--opac-blue); }
.opac-page-heading-icon { flex: 0 0 46px; width: 46px; height: 46px; color: var(--opac-blue); background: var(--opac-blue-soft); border-radius: 13px; }
.opac-page-header svg { width: 21px; height: 21px; }
.opac-page-header h1 { margin: 0; color: var(--opac-text); font-size: clamp(1.3rem, 2.3vw, 1.75rem); font-weight: 700; line-height: 1.25; }
.opac-page-header p { margin: 3px 0 0; color: var(--opac-muted); font-size: .86rem; }

.opac-banner { height: 230px; margin-bottom: 16px; overflow: hidden; background: #f3dfd0; border: 1px solid var(--opac-border); border-radius: 18px; }
.opac-banner .carousel-inner, .opac-banner .carousel-item { height: 100%; }
.opac-banner img { width: 100%; height: 100%; object-fit: cover; }

.opac-search-panel, .opac-sidebar-panel, .opac-results { overflow: hidden; background: #fff; border: 1px solid var(--opac-border); border-radius: 18px; box-shadow: 0 3px 12px rgba(194, 65, 12, .04); }
.opac-search-panel { margin-bottom: 16px; }
.opac-search-heading { display: flex; align-items: center; gap: 11px; padding: 15px 18px; border-bottom: 1px solid #f8ece0; }
.opac-search-heading > span { flex: 0 0 38px; width: 38px; height: 38px; color: var(--opac-blue); background: var(--opac-blue-soft); border-radius: 11px; }
.opac-search-heading svg { width: 19px; height: 19px; }
.opac-search-heading h2, .opac-results-header h2, .opac-sidebar-title h2, .opac-sidebar-heading h2 { margin: 0; color: var(--opac-text); font-size: .96rem; font-weight: 700; }
.opac-search-heading p, .opac-results-header p { margin: 2px 0 0; color: var(--opac-muted); font-size: .74rem; }
.opac-search-panel form { padding: 16px; }
.opac-search-row { display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; gap: 9px; }
.opac-search-category, .opac-search-input { position: relative; margin: 0; }
.opac-search-category select, .opac-search-input input, .opac-advanced-grid input { width: 100%; min-height: 46px; padding: 10px 13px; color: var(--opac-text); background: #fff; border: 1px solid #e7c9b2; border-radius: 11px; outline: 0; font-size: .84rem; }
.opac-search-category select { padding-right: 36px; appearance: none; }
.opac-search-category > svg { position: absolute; top: 50%; right: 13px; width: 16px; height: 16px; color: #8797a8; transform: translateY(-50%); pointer-events: none; }
.opac-search-input > svg { position: absolute; top: 50%; left: 14px; width: 18px; height: 18px; color: #8797a8; transform: translateY(-50%); }
.opac-search-input input { padding-left: 43px; }
.opac-search-category select:focus, .opac-search-input input:focus, .opac-advanced-grid input:focus { border-color: var(--opac-blue); box-shadow: 0 0 0 3px rgba(234, 88, 12, .12); }
.opac-search-input-wrapper { position: relative; width: 100%; }
.opac-search-suggestions { position: absolute; z-index: 20; top: calc(100% + 6px); right: 0; left: 0; max-height: min(360px, 55vh); padding: 6px; overflow-y: auto; background: #fff; border: 1px solid var(--opac-border); border-radius: 12px; box-shadow: 0 12px 28px rgba(23, 43, 67, .16); }
.opac-search-suggestions[hidden] { display: none; }
.opac-suggestion-heading { padding: 8px 10px; color: var(--opac-muted); font-size: .68rem; font-weight: 700; }
.opac-search-suggestions .suggestion-item { display: flex; width: 100%; align-items: flex-start; gap: 9px; padding: 9px 10px; color: var(--opac-text); text-align: left; background: transparent; border: 0; border-radius: 8px; font: inherit; cursor: pointer; }
.opac-search-suggestions .suggestion-item:hover, .opac-search-suggestions .suggestion-item:focus-visible { background: var(--opac-blue-soft); outline: 0; }
.opac-search-suggestions .suggestion-item > span { min-width: 0; overflow-wrap: anywhere; }
.opac-search-suggestions .suggestion-item strong { font-size: .78rem; font-weight: 650; }
.opac-search-suggestions .suggestion-item small { color: var(--opac-muted); font-size: .7rem; }
.opac-suggestion-icon { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 2px; color: var(--opac-blue); }
.opac-search-row > button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 46px; padding: 9px 20px; color: #fff; background: var(--opac-blue); border: 1px solid var(--opac-blue); border-radius: 11px; font-size: .82rem; font-weight: 700; }
.opac-search-row > button svg { width: 17px; height: 17px; }
.opac-filter-toggle { display: inline-flex; align-items: center; gap: 7px; margin-top: 11px; padding: 5px 2px; color: var(--opac-blue-dark); background: transparent; border: 0; font-size: .75rem; font-weight: 700; }
.opac-filter-toggle svg { width: 15px; height: 15px; }
.opac-filter-toggle svg:last-child { margin-left: 2px; }
.opac-advanced-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; padding-top: 12px; }
.opac-advanced-grid label { color: #52687e; font-size: .72rem; font-weight: 650; }
.opac-advanced-grid input { min-height: 42px; margin-top: 5px; }

.opac-quick-menu { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.opac-quick-menu > a { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 11px; align-items: center; padding: 14px; color: inherit; background: #fff; border: 1px solid var(--opac-border); border-radius: 15px; text-decoration: none; }
.opac-quick-menu > a > span { grid-row: 1 / 3; width: 40px; height: 40px; color: var(--opac-blue); background: var(--opac-blue-soft); border-radius: 11px; }
.opac-quick-menu svg { width: 20px; height: 20px; }
.opac-quick-menu strong { color: #294158; font-size: .8rem; }
.opac-quick-menu small { color: var(--opac-muted); font-size: .67rem; }
.opac-quick-menu > a:hover { background: #f7fafc; border-color: #fdba74; }
.opac-alert { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; padding: 12px 14px; color: #8a4e21; background: #fff8eb; border: 1px solid #efd5aa; border-radius: 12px; font-size: .78rem; }
.opac-alert svg { flex: 0 0 18px; width: 18px; height: 18px; }

.opac-content-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: start; }
.opac-filter-sidebar { position: -webkit-sticky; position: sticky; align-self: start; top: 92px; height: max-content; }
.opac-sidebar-stack { display: flex; flex-direction: column; gap: 12px; margin-top: 0 !important; }
.opac-sidebar-panel { margin-top: 0 !important; }
.opac-sidebar-heading { display: flex; align-items: center; gap: 11px; padding: 15px; }
.opac-sidebar-heading > span { width: 38px; height: 38px; color: var(--opac-blue); background: var(--opac-blue-soft); border-radius: 11px; }
.opac-sidebar-heading svg { width: 19px; height: 19px; }
.opac-sidebar-heading strong { display: block; color: var(--opac-blue-dark); font-size: 1.25rem; line-height: 1.2; }
.opac-sidebar-title { display: flex; align-items: center; gap: 8px; padding: 13px 15px; border-bottom: 1px solid #f8ece0; }
.opac-sidebar-title svg { width: 17px; height: 17px; color: var(--opac-blue); }
.opac-sidebar-panel ul { margin: 0; padding: 7px 14px; list-style: none; }
.opac-sidebar-panel li + li { border-top: 1px solid #edf2f6; }
.opac-sidebar-panel li a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; color: #435a70; font-size: .73rem; text-decoration: none; }
.opac-sidebar-panel li a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opac-sidebar-panel li a strong { flex: 0 0 auto; padding: 3px 7px; color: var(--opac-blue-dark); background: var(--opac-blue-soft); border-radius: 7px; font-size: .65rem; }

.opac-results-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; border-bottom: 1px solid #f8ece0; }
.opac-results-header > a { display: inline-flex; align-items: center; gap: 6px; color: var(--opac-blue); font-size: .74rem; font-weight: 700; text-decoration: none; }
.opac-results-header > a svg { width: 15px; height: 15px; }
.opac-results-header .nav-pills { gap: 8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.opac-results-header .nav-pills::-webkit-scrollbar { display: none; }
.opac-results-header .nav-pills .nav-link { display: flex; align-items: center; gap: 6px; padding: .4rem 1rem; color: #475569; background-color: #f1f5f9; border-radius: 20px; font-weight: 600; white-space: nowrap; transition: all .2s ease-in-out; }
.opac-results-header .nav-pills .nav-link svg { width: 16px; height: 16px; }
.opac-results-header .nav-pills .nav-link:hover { background-color: #e2e8f0; }
.opac-results-header .nav-pills .nav-link.active { color: #fff; background-color: var(--opac-blue, #c2410c); }
.opac-book-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 12px; padding: 16px; }
.opac-book-card { min-width: 0; }
.opac-book-cover { position: relative; display: block; width: 100%; overflow: hidden; aspect-ratio: 2 / 3; background: #edf2f7; border: 1px solid #f3dfd0; border-radius: 13px; }
.opac-book-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .22s ease; }
.opac-book-card:hover .opac-book-cover img { transform: scale(1.025); }
.opac-cover-fallback { display: flex; width: 100%; height: 100%; padding: 12px; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #8797a8; text-align: center; }
.opac-cover-fallback[hidden] { display: none; }
.opac-cover-fallback svg { width: 30px; height: 30px; }
.opac-cover-fallback small { font-size: .67rem; font-weight: 650; }
.opac-book-badge { position: absolute; z-index: 2; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 4px; max-width: calc(100% - 16px); padding: 5px 7px; color: var(--opac-blue-dark); background: rgba(255, 255, 255, .94); border-radius: 8px; box-shadow: 0 2px 8px rgba(23, 43, 67, .12); font-size: .62rem; font-weight: 700; }
.opac-book-badge svg { width: 12px; height: 12px; }
.opac-book-info { padding: 10px 2px 3px; }
.opac-book-info h3 { display: -webkit-box; min-height: 2.65em; margin: 0 0 4px; overflow: hidden; color: #20374e; font-size: .82rem; font-weight: 700; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.opac-book-info h3 a { color: inherit; text-decoration: none; }
.opac-book-info p, .opac-book-info small { display: block; margin: 0; overflow: hidden; color: var(--opac-muted); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.opac-book-info small { margin-top: 2px; color: #8998a8; font-size: .65rem; }
.opac-empty { display: flex; min-height: 330px; padding: 28px; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.opac-empty > span { width: 58px; height: 58px; margin-bottom: 14px; color: var(--opac-blue); background: var(--opac-blue-soft); border-radius: 17px; }
.opac-empty svg { width: 28px; height: 28px; }
.opac-empty h3 { margin: 0; color: var(--opac-text); font-size: .98rem; }
.opac-empty p { max-width: 440px; margin: 7px 0 17px; color: var(--opac-muted); font-size: .78rem; }
.opac-empty a { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; color: #fff; background: var(--opac-blue); border-radius: 10px; font-size: .75rem; font-weight: 700; text-decoration: none; }
.opac-empty a svg { width: 15px; height: 15px; }
.opac-results-footer { display: flex; flex-direction: column; align-items: center; padding: 16px; border-top: 1px solid #f8ece0; }
.opac-results-footer > small { margin-top: 8px; color: var(--opac-muted); font-size: .68rem; }

@media (max-width: 991.98px) {
    .opac-content-grid { grid-template-columns: 1fr; }
    .opac-filter-sidebar { display: none; }
    .opac-book-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .opac-advanced-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .opac-catalog-page { padding: 76px 0 calc(92px + env(safe-area-inset-bottom)); }
    .opac-page-header { gap: 10px; margin: 0 12px 12px; padding: 13px; border-radius: 16px; }
    .opac-page-heading-icon { display: none; }
    .opac-page-header p { font-size: .74rem; }
    .opac-banner { height: 145px; margin: 0 12px 12px; border-radius: 16px; }
    .opac-search-panel, .opac-results { margin: 0 12px 12px; border-radius: 16px; box-shadow: none; }
    .opac-search-heading { padding: 13px 14px; }
    .opac-search-panel form { padding: 13px; }
    .opac-search-row { grid-template-columns: minmax(0, 1fr) auto; }
    .opac-search-category { grid-column: 1 / -1; }
    .opac-search-row > button { width: 46px; padding: 0; }
    .opac-search-row > button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .opac-advanced-grid { grid-template-columns: 1fr; }
    .opac-quick-menu { display: flex; gap: 10px; margin: 0 0 12px; padding: 2px 12px 10px; overflow-x: auto; scroll-padding-inline: 12px; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .opac-quick-menu::-webkit-scrollbar { display: none; }
    .opac-quick-menu > a { flex: 0 0 154px; scroll-snap-align: start; }
    .opac-content-grid { display: block; }
    .opac-results-header { position: relative; align-items: flex-start; padding: 13px 14px 16px; }
    .opac-results-header > a { position: absolute; right: 14px; bottom: 13px; font-size: .85rem; }
    .opac-results-header > div { width: 100%; }
    .opac-results-header > div > p { margin-bottom: 0; padding-right: 130px; }
    .opac-book-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 9px; padding: 12px; }
    .opac-book-info h3 { font-size: .78rem; }
    .opac-book-info small { display: none; }
    .opac-results-footer { padding: 13px; }
}

@media (max-width: 360px) {
    .opac-book-grid { grid-template-columns: 1fr; }
    .opac-book-cover { max-width: 190px; margin: 0 auto; }
}

@media (min-width: 769px) and (max-width: 1024px) { .opac-quick-menu { grid-template-columns: repeat(3, minmax(0, 1fr)); } }


/* ============ SOURCE: browse.css ============ */
/* Admin Zavier theme-owned stylesheet; visual tokens are finalized by css/theme.css. */
/* Source: app/Modules/Opac/Views/browse.php */

.catalog-browse-page {
    --browse-blue: #ea580c;
    --browse-blue-dark: #c2410c;
    --browse-blue-soft: #fff7ed;
    --browse-border: #f3dfd0;
    --browse-text: #172b43;
    --browse-muted: #64748b;
    min-height: 100vh;
    padding: 104px 20px 76px;
    color: var(--browse-text);
    background: #f4f7fa
}

.catalog-browse-shell {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto
}

.browse-page-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--browse-border);
    border-radius: 18px
}

.browse-back,.browse-heading-icon,.browse-panel-header>span,.browse-book-icon,.browse-welcome>span,.browse-empty>span {
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.browse-back {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    color: var(--browse-blue-dark);
    background: var(--browse-blue-soft);
    border: 1px solid #edc4a0;
    border-radius: 12px;
    text-decoration: none
}

.browse-back:hover,.browse-back:focus {
    color: #fff;
    background: var(--browse-blue);
    border-color: var(--browse-blue)
}

.browse-heading-icon {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    color: var(--browse-blue);
    background: var(--browse-blue-soft);
    border-radius: 13px
}

.browse-page-header svg {
    width: 21px;
    height: 21px
}

.browse-heading {
    min-width: 0;
    flex: 1
}

.browse-heading h1 {
    margin: 0;
    color: var(--browse-text);
    font-size: clamp(1.3rem,2.3vw,1.75rem);
    font-weight: 700;
    line-height: 1.25
}

.browse-heading p {
    margin: 3px 0 0;
    color: var(--browse-muted);
    font-size: .86rem
}

.browse-kpi-list {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 12px;
    margin-bottom: 16px
}

.browse-kpi-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--browse-border);
    border-radius: 16px
}

.browse-kpi-card>span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    color: var(--browse-blue);
    background: var(--browse-blue-soft);
    border-radius: 12px
}

.browse-kpi-card svg {
    width: 21px;
    height: 21px
}

.browse-kpi-card div {
    display: flex;
    min-width: 0;
    flex-direction: column
}

.browse-kpi-card small {
    color: var(--browse-muted);
    font-size: .74rem;
    font-weight: 600
}

.browse-kpi-card strong {
    color: var(--browse-text);
    font-size: 1.42rem;
    line-height: 1.2
}

.browse-panel,.browse-results,.browse-welcome,.browse-empty {
    margin-bottom: 16px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--browse-border);
    border-radius: 18px;
    box-shadow: 0 3px 12px rgba(194,65,12,.04)
}

.browse-panel-header {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 15px 18px;
    border-bottom: 1px solid #f8ece0
}

.browse-panel-header>span {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    color: var(--browse-blue);
    background: var(--browse-blue-soft);
    border-radius: 11px
}

.browse-panel-header svg {
    width: 19px;
    height: 19px
}

.browse-panel-header h2,.browse-results-toolbar h2,.browse-welcome h2,.browse-empty h2 {
    margin: 0;
    color: var(--browse-text);
    font-size: .98rem;
    font-weight: 700
}

.browse-panel-header p,.browse-results-toolbar p {
    margin: 2px 0 0;
    color: var(--browse-muted);
    font-size: .75rem
}

.browse-category-list {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
    padding: 16px
}

.browse-category-list a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 9px 12px;
    color: var(--browse-blue-dark);
    background: #fff;
    border: 1px solid #fdba74;
    border-radius: 11px;
    font-size: .83rem;
    font-weight: 700;
    text-decoration: none
}

.browse-category-list a:hover,.browse-category-list a:focus,.browse-category-list a.is-active {
    color: #fff;
    background: var(--browse-blue);
    border-color: var(--browse-blue)
}

.browse-category-list svg {
    width: 17px;
    height: 17px
}

.browse-filter-body {
    padding: 16px
}

.browse-search-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 9px
}

.browse-search-input {
    position: relative;
    margin: 0
}

.browse-search-input>svg {
    position: absolute;
    top: 50%;
    left: 14px;
    width: 18px;
    height: 18px;
    color: #8797a8;
    transform: translateY(-50%)
}

.browse-search-input input {
    width: 100%;
    min-height: 46px;
    padding: 10px 14px 10px 43px;
    color: var(--browse-text);
    background: #fff;
    border: 1px solid #e7c9b2;
    border-radius: 11px;
    outline: 0
}

.browse-search-input input:focus {
    border-color: var(--browse-blue);
    box-shadow: 0 0 0 3px rgba(234,88,12,.12)
}

.browse-search-form button {
    min-height: 46px;
    padding: 9px 20px;
    color: #fff;
    background: var(--browse-blue);
    border: 1px solid var(--browse-blue);
    border-radius: 11px;
    font-size: .83rem;
    font-weight: 700
}

.browse-alphabet {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px
}

.browse-alphabet a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--browse-blue-dark);
    background: #f5f8fb;
    border: 1px solid #f3dfd0;
    border-radius: 9px;
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none
}

.browse-alphabet a:hover,.browse-alphabet a:focus,.browse-alphabet a.is-active {
    color: #fff;
    background: var(--browse-blue);
    border-color: var(--browse-blue)
}

.browse-results-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    border-bottom: 1px solid #f8ece0
}

.browse-view-switch {
    display: flex;
    gap: 5px;
    padding: 4px;
    background: #edf3f8;
    border-radius: 11px
}

.browse-view-switch button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 34px;
    padding: 0;
    color: #60778e;
    background: transparent;
    border: 0;
    border-radius: 8px
}

.browse-view-switch button:hover,.browse-view-switch button.is-active {
    color: #fff;
    background: var(--browse-blue)
}

.browse-view-switch svg {
    width: 17px;
    height: 17px
}

.browse-grid-view {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px;
    padding: 16px
}

.browse-book-card {
    display: flex;
    min-width: 0;
    padding: 16px;
    flex-direction: column;
    background: #fff;
    border: 1px solid #f3dfd0;
    border-top: 3px solid var(--browse-blue);
    border-radius: 14px
}

.browse-book-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px
}

.browse-book-icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    color: var(--browse-blue);
    background: var(--browse-blue-soft);
    border-radius: 10px
}

.browse-book-icon svg {
    width: 18px;
    height: 18px
}

.browse-control-number {
    display: inline-block;
    max-width: 150px;
    overflow: hidden;
    padding: 4px 8px;
    color: #536b83;
    background: #f1f5f9;
    border-radius: 7px;
    font-family: monospace;
    font-size: .68rem;
    text-overflow: ellipsis;
    white-space: nowrap
}

.browse-book-card h3,.browse-list-item h3 {
    display: -webkit-box;
    margin: 0;
    color: #20374e;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden
}

.browse-book-card dl {
    display: grid;
    gap: 7px;
    margin: 13px 0
}

.browse-book-card dl div {
    min-width: 0
}

.browse-book-card dt {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #718398;
    font-size: .68rem;
    font-weight: 600
}

.browse-book-card dt svg {
    width: 12px;
    height: 12px
}

.browse-book-card dd {
    margin: 2px 0 0;
    overflow: hidden;
    color: #3b5167;
    font-size: .76rem;
    text-overflow: ellipsis;
    white-space: nowrap
}

.browse-subject {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 5px;
    max-width: 100%;
    overflow: hidden;
    padding: 5px 7px;
    color: var(--browse-blue-dark);
    background: var(--browse-blue-soft);
    border-radius: 7px;
    font-size: .68rem;
    text-overflow: ellipsis;
    white-space: nowrap
}

.browse-subject svg {
    flex: 0 0 12px;
    width: 12px;
    height: 12px
}

.browse-detail-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 14px;
    color: var(--browse-blue);
    font-size: .76rem;
    font-weight: 700;
    text-decoration: none
}

.browse-detail-link svg {
    width: 15px;
    height: 15px
}

.browse-list-view {
    display: grid
}

.browse-list-item {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto auto;
    align-items: center;
    gap: 13px;
    padding: 15px 18px;
    border-bottom: 1px solid #f8ece0
}

.browse-list-item:last-child {
    border-bottom: 0
}

.browse-list-item p {
    margin: 4px 0 7px;
    color: var(--browse-muted);
    font-size: .75rem
}

.browse-list-item>a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: var(--browse-blue);
    background: var(--browse-blue-soft);
    border-radius: 9px
}

.browse-list-item>a svg {
    width: 17px;
    height: 17px
}

.browse-table-wrap {
    overflow-x: auto
}

.browse-table-view table {
    width: 100%;
    border-collapse: collapse;
    font-size: .78rem
}

.browse-table-view th {
    padding: 12px 14px;
    color: #52687e;
    background: #f3f7fa;
    border-bottom: 1px solid #f3dfd0;
    font-size: .7rem;
    text-transform: uppercase;
    white-space: nowrap
}

.browse-table-view td {
    padding: 12px 14px;
    color: #425970;
    border-bottom: 1px solid #f8ece0
}

.browse-table-view td strong {
    color: #263e56
}

.browse-table-view td>a {
    display: inline-flex;
    color: var(--browse-blue)
}

.browse-table-view td>a svg {
    width: 17px;
    height: 17px
}

.browse-result-footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border-top: 1px solid #f8ece0
}

.browse-export-actions {
    display: flex;
    gap: 8px
}

.browse-export-actions button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 8px 12px;
    color: var(--browse-blue-dark);
    background: #fff;
    border: 1px solid #fdba74;
    border-radius: 10px;
    font-size: .76rem;
    font-weight: 700
}

.browse-export-actions svg {
    width: 16px;
    height: 16px
}

.browse-pagination {
    text-align: right
}

.browse-pagination small {
    display: block;
    margin-top: 7px;
    color: var(--browse-muted);
    font-size: .7rem
}

.browse-welcome,.browse-empty {
    display: flex;
    min-height: 250px;
    padding: 32px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center
}

.browse-welcome>span,.browse-empty>span {
    width: 58px;
    height: 58px;
    margin-bottom: 14px;
    color: var(--browse-blue);
    background: var(--browse-blue-soft);
    border-radius: 17px
}

.browse-welcome svg,.browse-empty>span svg {
    width: 28px;
    height: 28px
}

.browse-welcome p,.browse-empty p {
    max-width: 440px;
    margin: 7px 0 0;
    color: var(--browse-muted);
    font-size: .82rem
}

.browse-empty a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 17px;
    padding: 9px 13px;
    color: #fff;
    background: var(--browse-blue);
    border-radius: 10px;
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none
}

.browse-empty a svg {
    width: 16px;
    height: 16px
}

.browse-view.is-hidden {
    display: none
}

.browse-toast {
    position: fixed;
    z-index: 9999;
    top: 82px;
    right: 18px;
    max-width: calc(100vw - 36px);
    padding: 11px 14px;
    color: #27425e;
    background: #fff;
    border: 1px solid var(--browse-border);
    border-left: 4px solid var(--browse-blue);
    border-radius: 11px;
    box-shadow: 0 10px 28px rgba(23,43,67,.14);
    font-size: .8rem;
    font-weight: 600
}

@media(max-width:900px) {
    .browse-grid-view {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

@media(max-width:768px) {
    .catalog-browse-page {
        padding: 76px 0 calc(92px + env(safe-area-inset-bottom))
    }
    .browse-page-header {
        gap: 10px;
        margin: 0 12px 12px;
        padding: 13px;
        border-radius: 16px
    }
    .browse-heading-icon {
        display: none
    }
    .browse-heading p {
        font-size: .75rem
    }
    .browse-kpi-list {
        display: flex;
        gap: 10px;
        margin: 0 0 12px;
        padding: 2px 12px 10px;
        overflow-x: auto;
        scroll-padding-inline: 12px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none
    }
    .browse-kpi-list::-webkit-scrollbar {
        display: none
    }
    .browse-kpi-card {
        flex: 0 0 160px;
        scroll-snap-align: start
    }
    .browse-panel,.browse-results,.browse-welcome,.browse-empty {
        margin: 0 12px 12px;
        border-radius: 16px;
        box-shadow: none
    }
    .browse-panel-header {
        padding: 13px 14px
    }
    .browse-category-list {
        gap: 7px;
        padding: 13px
    }
    .browse-category-list a {
        min-width: 0;
        padding: 8px 5px;
        font-size: .74rem
    }
    .browse-filter-body {
        padding: 13px
    }
    .browse-search-form {
        grid-template-columns: 1fr
    }
    .browse-alphabet {
        flex-wrap: nowrap;
        margin-right: -13px;
        margin-left: -13px;
        padding: 0 13px 7px;
        overflow-x: auto;
        scroll-padding-inline: 13px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none
    }
    .browse-alphabet::-webkit-scrollbar {
        display: none
    }
    .browse-alphabet a {
        flex: 0 0 36px;
        scroll-snap-align: start
    }
    .browse-grid-view {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 8px;
        padding: 12px
    }
    .browse-book-card {
        padding: 12px
    }
    .browse-book-card h3 {
        font-size: .82rem
    }
    .browse-book-card dl {
        gap: 5px;
        margin: 10px 0
    }
    .browse-book-card dd {
        font-size: .7rem
    }
    .browse-list-item {
        grid-template-columns: auto minmax(0,1fr) auto;
        padding: 13px
    }
    .browse-list-item>.browse-control-number {
        display: none
    }
    .browse-results-toolbar,.browse-result-footer {
        padding: 13px
    }
    .browse-table-toggle {
        display: none!important
    }
    .browse-result-footer {
        align-items: stretch;
        flex-direction: column
    }
    .browse-pagination {
        text-align: center
    }
    .browse-export-actions button {
        flex: 1;
        justify-content: center
    }
    .browse-export-actions {
        display: grid;
        grid-template-columns: 1fr 1fr
    }
    .browse-toast {
        top: 70px;
        right: 12px;
        left: 12px;
        max-width: none
    }
}

@media(max-width:380px) {
    .browse-grid-view {
        grid-template-columns: 1fr
    }
}


/* ============ SOURCE: statistics.css ============ */
/* Admin Zavier theme-owned stylesheet; visual tokens are finalized by css/theme.css. */
/* Source: app/Modules/Opac/Views/statistics.php */

.catalog-statistics-page {
    --statistics-blue: #ea580c;
    --statistics-blue-dark: #c2410c;
    --statistics-blue-soft: #fff7ed;
    --statistics-border: #f3dfd0;
    --statistics-text: #172b43;
    --statistics-muted: #64748b;
    min-height: 100vh;
    padding: 104px 20px 76px;
    color: var(--statistics-text);
    background: #f4f7fa;
}

.catalog-statistics-shell {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}

.statistics-page-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    padding: 18px 20px;
    background: #ffffff;
    border: 1px solid var(--statistics-border);
    border-radius: 18px;
}

.statistics-back,
.statistics-heading-icon,
.statistics-print,
.statistics-panel-icon,
.statistics-icon-button,
.statistics-kpi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.statistics-back {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    color: var(--statistics-blue-dark);
    background: var(--statistics-blue-soft);
    border: 1px solid #edc4a0;
    border-radius: 12px;
    text-decoration: none;
}

.statistics-back:hover,
.statistics-back:focus {
    color: #ffffff;
    background: var(--statistics-blue);
    border-color: var(--statistics-blue);
}

.statistics-heading-icon {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    overflow: hidden;
    color: var(--statistics-blue);
    background: var(--statistics-blue-soft);
    border-radius: 13px;
}

.statistics-heading-icon img {
    width: 100%;
    height: 100%;
    padding: 5px;
    object-fit: contain;
}

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

.statistics-heading {
    min-width: 0;
    flex: 1;
}

.statistics-heading h1 {
    margin: 0;
    color: var(--statistics-text);
    font-size: clamp(1.3rem, 2.3vw, 1.75rem);
    font-weight: 700;
    line-height: 1.25;
}

.statistics-heading p {
    margin: 3px 0 0;
    color: var(--statistics-muted);
    font-size: 0.88rem;
    line-height: 1.45;
}

.statistics-print {
    gap: 7px;
    min-height: 42px;
    padding: 8px 14px;
    color: var(--statistics-blue-dark);
    background: #ffffff;
    border: 1px solid #fdba74;
    border-radius: 11px;
    font-size: 0.84rem;
    font-weight: 700;
}

.statistics-print:hover,
.statistics-print:focus {
    color: #ffffff;
    background: var(--statistics-blue);
    border-color: var(--statistics-blue);
}

.statistics-print svg,
.statistics-back svg {
    width: 18px;
    height: 18px;
}

.statistics-kpi-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.statistics-kpi-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    padding: 17px;
    background: #ffffff;
    border: 1px solid var(--statistics-border);
    border-radius: 16px;
}

.statistics-kpi-icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    color: var(--statistics-blue);
    background: var(--statistics-blue-soft);
    border-radius: 12px;
}

.statistics-kpi-icon svg {
    width: 21px;
    height: 21px;
}

.statistics-kpi-card > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.statistics-kpi-label {
    margin-bottom: 3px;
    color: var(--statistics-muted);
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.3;
}

.statistics-kpi-card strong {
    color: var(--statistics-text);
    font-size: 1.55rem;
    font-weight: 750;
    line-height: 1.15;
}

.statistics-kpi-card small {
    margin-top: 4px;
    color: #78889a;
    font-size: 0.72rem;
    line-height: 1.3;
}

.statistics-chart-grid,
.statistics-detail-grid {
    display: grid;
    gap: 16px;
}

.statistics-chart-grid {
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    margin-bottom: 16px;
}

.statistics-detail-grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, 1fr);
}

.statistics-side-column {
    display: grid;
    align-content: start;
    gap: 16px;
}

.statistics-panel {
    min-width: 0;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--statistics-border);
    border-radius: 18px;
    box-shadow: 0 3px 12px rgba(194, 65, 12, 0.04);
}

.statistics-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 72px;
    padding: 15px 17px;
    border-bottom: 1px solid #f8ece0;
}

.statistics-panel-header > div {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 11px;
}

.statistics-panel-icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    color: var(--statistics-blue);
    background: var(--statistics-blue-soft);
    border-radius: 11px;
}

.statistics-panel-icon svg {
    width: 19px;
    height: 19px;
}

.statistics-panel-header h2 {
    margin: 0;
    color: var(--statistics-text);
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.35;
}

.statistics-panel-header p {
    margin: 2px 0 0;
    color: var(--statistics-muted);
    font-size: 0.75rem;
    line-height: 1.4;
}

.statistics-icon-button {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    color: var(--statistics-blue-dark);
    background: #ffffff;
    border: 1px solid #edc4a0;
    border-radius: 10px;
}

.statistics-icon-button:hover,
.statistics-icon-button:focus {
    color: #ffffff;
    background: var(--statistics-blue);
    border-color: var(--statistics-blue);
}

.statistics-icon-button svg {
    width: 17px;
    height: 17px;
}

.statistics-chart {
    position: relative;
    width: 100%;
    height: 310px;
    padding: 18px;
}

.statistics-chart-doughnut {
    height: 310px;
}

.statistics-panel-body {
    padding: 18px;
}

.statistics-empty {
    position: absolute;
    inset: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--statistics-muted);
    text-align: center;
    font-size: 0.82rem;
}

.statistics-panel-body > .statistics-empty {
    position: static;
    min-height: 180px;
}

.statistics-empty svg {
    width: 34px;
    height: 34px;
    color: #94a8bd;
}

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

.publisher-item {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.publisher-rank {
    display: inline-flex;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: var(--statistics-blue-dark);
    background: var(--statistics-blue-soft);
    border: 1px solid #edc4a0;
    border-radius: 9px;
    font-size: 0.75rem;
    font-weight: 700;
}

.publisher-data {
    min-width: 0;
    flex: 1;
}

.publisher-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.publisher-meta span {
    min-width: 0;
    overflow: hidden;
    color: #2d435a;
    font-size: 0.82rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.publisher-meta strong {
    flex: 0 0 auto;
    color: var(--statistics-muted);
    font-size: 0.72rem;
    font-weight: 600;
}

.publisher-progress {
    display: block;
    width: 100%;
    height: 7px;
    overflow: hidden;
    appearance: none;
    background: #f8ece0;
    border: 0;
    border-radius: 999px;
}

.publisher-progress::-webkit-progress-bar {
    background: #f8ece0;
    border-radius: 999px;
}

.publisher-progress::-webkit-progress-value {
    background: var(--statistics-blue);
    border-radius: 999px;
}

.publisher-progress::-moz-progress-bar {
    background: var(--statistics-blue);
    border-radius: 999px;
}

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

.statistics-summary-list li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: #465b70;
    font-size: 0.82rem;
    line-height: 1.5;
}

.statistics-summary-list li > svg {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    color: var(--statistics-blue);
}

.statistics-export-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 16px;
}

.statistics-export-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;
    padding: 8px 12px;
    color: var(--statistics-blue-dark);
    background: #ffffff;
    border: 1px solid #fdba74;
    border-radius: 11px;
    font-size: 0.82rem;
    font-weight: 700;
}

.statistics-export-button:hover,
.statistics-export-button:focus {
    color: #ffffff;
    background: var(--statistics-blue);
    border-color: var(--statistics-blue);
}

.statistics-export-button svg {
    width: 17px;
    height: 17px;
}

.statistics-toast {
    position: fixed;
    z-index: 9999;
    top: 82px;
    right: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: min(360px, calc(100vw - 36px));
    padding: 12px 14px;
    color: #27425e;
    background: #ffffff;
    border: 1px solid var(--statistics-border);
    border-left: 4px solid var(--statistics-blue);
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(23, 43, 67, 0.14);
    font-size: 0.84rem;
    font-weight: 600;
}

.statistics-toast--success {
    border-left-color: #258451;
}

.statistics-toast-close {
    display: inline-flex;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    color: #64748b;
    background: transparent;
    border: 0;
    border-radius: 8px;
    font-size: 1.25rem;
    line-height: 1;
}

.statistics-toast-close:hover {
    background: #eef3f8;
}

@media (max-width: 991.98px) {
    .statistics-chart-grid,
    .statistics-detail-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .catalog-statistics-page {
        padding: 76px 0 calc(92px + env(safe-area-inset-bottom));
    }

    .catalog-statistics-shell {
        overflow: hidden;
    }

    .statistics-page-header {
        gap: 10px;
        margin: 0 12px 12px;
        padding: 13px;
        border-radius: 16px;
    }

    .statistics-back {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
    }

    .statistics-heading-icon {
        display: none;
    }

    .statistics-heading p {
        font-size: 0.76rem;
    }

    .statistics-print {
        flex: 0 0 40px;
        width: 40px;
        min-height: 40px;
        padding: 0;
    }

    .statistics-print span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .statistics-kpi-list {
        display: flex;
        gap: 10px;
        margin: 0 0 12px;
        padding: 2px 12px 10px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-padding-inline: 12px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .statistics-kpi-list::-webkit-scrollbar {
        display: none;
    }

    .statistics-kpi-card {
        flex: 0 0 184px;
        min-height: 110px;
        padding: 14px;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .statistics-kpi-card strong {
        font-size: 1.4rem;
    }

    .statistics-chart-grid,
    .statistics-detail-grid,
    .statistics-side-column {
        gap: 12px;
    }

    .statistics-chart-grid,
    .statistics-detail-grid {
        margin-right: 12px;
        margin-left: 12px;
    }

    .statistics-panel {
        border-radius: 16px;
        box-shadow: none;
    }

    .statistics-panel-header {
        min-height: 66px;
        padding: 13px 14px;
    }

    .statistics-panel-header h2 {
        font-size: 0.92rem;
    }

    .statistics-panel-header p {
        font-size: 0.7rem;
    }

    .statistics-panel-icon {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
    }

    .statistics-chart,
    .statistics-chart-doughnut {
        height: 270px;
        padding: 12px;
    }

    .statistics-panel-body {
        padding: 15px 14px;
    }

    .publisher-meta {
        gap: 8px;
    }

    .publisher-meta span {
        font-size: 0.78rem;
    }

    .statistics-toast {
        top: 70px;
        right: 12px;
        left: 12px;
        max-width: none;
    }
}

@media print {
    .catalog-statistics-page {
        padding: 0;
        background: #ffffff;
    }

    .no-print,
    .main-header,
    .mobile-bottom-nav,
    .main-footer {
        display: none !important;
    }

    .statistics-page-header,
    .statistics-panel,
    .statistics-kpi-card {
        break-inside: avoid;
        box-shadow: none;
    }

    .statistics-chart-grid,
    .statistics-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   TPBIS Filter Card & Components
   ========================================================================== */

.statistics-filter-card {
    background: #ffffff;
    border: 1px solid var(--statistics-border, #f3dfd0);
    border-radius: 18px;
    padding: 22px 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

.tpbis-date-filter {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tpbis-date-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: end;
    gap: 16px;
}

.tpbis-date-field {
    min-width: 0;
}

.tpbis-date-field label {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--statistics-text, #172b43);
}

.tpbis-date-field label svg,
.tpbis-date-field label [data-lucide] {
    width: 15px;
    height: 15px;
    color: var(--statistics-blue, #ea580c);
}

.tpbis-date-field input[type="date"] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 46px;
    height: 46px;
    padding: 10px 14px;
    border: 1.5px solid #cbd5e1;
    border-radius: 12px;
    background: #ffffff;
    color: var(--statistics-text, #172b43);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    transition: all 0.2s ease;
    outline: none;
}

.tpbis-date-field input[type="date"]:hover {
    border-color: #94a3b8;
}

.tpbis-date-field input[type="date"]:focus {
    border-color: var(--statistics-blue, #ea580c);
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
}

.tpbis-date-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    height: 46px;
    padding: 0 24px;
    border: 1px solid var(--statistics-blue, #ea580c);
    border-radius: 12px;
    background: var(--statistics-blue, #ea580c);
    color: #ffffff;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 8px rgba(234, 88, 12, 0.22);
}

.tpbis-date-submit:hover {
    background: var(--statistics-blue-dark, #c2410c);
    border-color: var(--statistics-blue-dark, #c2410c);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(234, 88, 12, 0.32);
}

.tpbis-date-submit:active {
    transform: translateY(0);
}

.tpbis-date-submit svg,
.tpbis-date-submit [data-lucide] {
    width: 17px;
    height: 17px;
}

.tpbis-date-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 18px;
    padding-top: 14px;
    border-top: 1px solid #f1f5f9;
}

.tpbis-date-presets {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.tpbis-presets-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--statistics-muted, #64748b);
    margin-right: 4px;
}

.tpbis-preset-btn,
.tpbis-date-presets button {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    background: #f8fafc;
    color: #475569;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.18s ease;
    line-height: 1.4;
}

.tpbis-preset-btn:hover,
.tpbis-date-presets button:hover {
    color: var(--statistics-blue, #ea580c);
    background: var(--statistics-blue-soft, #fff7ed);
    border-color: #fed7aa;
    transform: translateY(-1px);
}

.tpbis-preset-btn:active,
.tpbis-date-presets button:active {
    transform: translateY(0);
}

.tpbis-period-badge,
#tpbisPeriod {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--statistics-blue, #ea580c);
    background: var(--statistics-blue-soft, #fff7ed);
    border: 1px solid #ffedd5;
    padding: 6px 14px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#tpbisPeriod:empty {
    display: none;
}

/* Library Summary in Panel */
.tpbis-library-summary {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    padding: 16px 18px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
}

.tpbis-library-summary-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--statistics-blue-soft, #fff7ed);
    color: var(--statistics-blue, #ea580c);
}

.tpbis-library-summary-icon svg {
    width: 22px;
    height: 22px;
}

.tpbis-library-summary-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--statistics-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.tpbis-library-summary-value {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--statistics-text, #172b43);
    margin-top: 2px;
}

.tpbis-library-summary-value span:last-child {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--statistics-muted, #64748b);
    margin-left: 4px;
}

/* TPBIS Table & Pagination */
.tpbis-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tpbis-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.86rem;
}

.tpbis-table th {
    padding: 12px 14px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--statistics-muted, #64748b);
    background: #f8fafc;
    border-bottom: 1.5px solid #e2e8f0;
    white-space: nowrap;
}

.tpbis-table td {
    padding: 12px 14px;
    color: var(--statistics-text, #172b43);
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.tpbis-table tbody tr:hover td {
    background: #f8fafc;
}

.tpbis-table-number,
.tpbis-kpi-score {
    text-align: right;
    font-weight: 600;
}

.tpbis-kpi-score.is-excellent {
    color: #059669;
    font-weight: 700;
}

.tpbis-kpi-score.is-good {
    color: var(--statistics-blue, #ea580c);
    font-weight: 700;
}

.tpbis-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.74rem;
    font-weight: 600;
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
}

.tpbis-limit-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--statistics-muted, #64748b);
    margin-right: 6px;
}

.tpbis-limit-select {
    padding: 6px 12px;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    font-size: 0.82rem;
    color: var(--statistics-text, #172b43);
    font-weight: 500;
    outline: none;
    cursor: pointer;
}

.tpbis-limit-select:focus {
    border-color: var(--statistics-blue, #ea580c);
}

.tpbis-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding: 16px 20px;
    border-top: 1px solid #f1f5f9;
}

.tpbis-table-info {
    font-size: 0.82rem;
    color: var(--statistics-muted, #64748b);
}

.tpbis-pagination {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tpbis-pagination-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    color: #475569;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.tpbis-pagination-button:hover:not(:disabled) {
    border-color: var(--statistics-blue, #ea580c);
    color: var(--statistics-blue, #ea580c);
    background: var(--statistics-blue-soft, #fff7ed);
}

.tpbis-pagination-button.is-active {
    background: var(--statistics-blue, #ea580c);
    color: #ffffff;
    border-color: var(--statistics-blue, #ea580c);
}

.tpbis-pagination-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

@media screen and (max-width: 768px) {
    .statistics-filter-card {
        padding: 16px;
    }

    .tpbis-date-controls {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .tpbis-date-submit {
        width: 100%;
    }

    .tpbis-date-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .tpbis-period-badge,
    #tpbisPeriod {
        width: 100%;
        box-sizing: border-box;
        justify-content: center;
    }
}



/* ============ SOURCE: statistics-nav.css ============ */
/* Admin Zavier theme-owned stylesheet; visual tokens are finalized by css/theme.css. */
.opac-statistics-nav { display:flex; gap:8px; overflow-x:auto; margin:0 0 18px; padding:2px; }
.opac-statistics-nav a { display:inline-flex; align-items:center; justify-content:center; gap:8px; flex:1 1 0%; min-height:44px; padding:9px 18px; border:1px solid #f3dfd0; border-radius:12px; background:#fff; color:#c2410c; font-size:.85rem; font-weight:600; text-decoration:none; }
.opac-statistics-nav a[aria-current="page"],
.opac-statistics-nav a.active { background:#ea580c !important; border-color:#ea580c !important; color:#fff !important; }
.opac-statistics-nav a:hover { border-color:#ea580c; }
.opac-statistics-nav a:focus-visible { outline:3px solid #fdba74; outline-offset:2px; }
.opac-statistics-nav svg { width:18px; height:18px; }
@media(max-width:575px) {
    .opac-statistics-nav {
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .opac-statistics-nav::-webkit-scrollbar { display: none; }
    .opac-statistics-nav a {
        flex: 0 0 auto;
        min-width: max-content;
        white-space: nowrap;
        padding: 9px 14px;
        scroll-snap-align: start;
    }
}
@media print { .opac-statistics-nav { display:none; } }



/* ============ SOURCE: lokasi.css ============ */
/* Zavier theme-owned stylesheet; visual tokens are finalized by css/theme.css. */
/* Source: app/Modules/GuestBook/Views/lokasi.php */

.guest-location-page {
    --guest-blue: #ea580c;
    --guest-blue-dark: #c2410c;
    --guest-blue-soft: #fff7ed;
    --guest-border: #f3dfd0;
    --guest-text: #172b43;
    --guest-muted: #64748b;
    min-height: 100vh;
    padding: 104px 20px 76px;
    color: var(--guest-text);
    background: #f4f7fa
}

.guest-location-shell {
    width: 100%;
    max-width: 720px;
    margin: 0 auto
}

.guest-location-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--guest-border);
    border-radius: 10px
}

.guest-location-back,.guest-location-heading-icon,.guest-location-card-heading>span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    color: var(--guest-blue);
    background: var(--guest-blue-soft);
    border-radius: 10px
}

.guest-location-back {
    color: var(--guest-blue-dark);
    border: 1px solid #edc4a0;
    text-decoration: none
}

.guest-location-back:hover,.guest-location-back:focus {
    color: #fff;
    background: var(--guest-blue);
    border-color: var(--guest-blue)
}

.guest-location-header svg,.guest-location-card-heading svg {
    width: 21px;
    height: 21px
}

.guest-location-header h1 {
    margin: 0;
    color: var(--guest-text);
    font-size: clamp(1.3rem,2.3vw,1.7rem);
    font-weight: 700;
    line-height: 1.25
}

.guest-location-header p {
    margin: 3px 0 0;
    color: var(--guest-muted);
    font-size: .86rem;
    line-height: 1.45
}

.guest-location-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--guest-border);
    border-radius: 10px;
    box-shadow: 0 3px 12px rgba(194,65,12,.04)
}

.guest-location-card-heading {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 18px 20px;
    border-bottom: 1px solid #f8ece0
}

.guest-location-card-heading h2 {
    margin: 0;
    color: var(--guest-text);
    font-size: 1rem;
    font-weight: 700
}

.guest-location-card-heading p {
    margin: 3px 0 0;
    color: var(--guest-muted);
    font-size: .78rem;
    line-height: 1.4
}

.guest-location-card form {
    padding: 20px
}

.guest-location-field {
    margin-bottom: 18px
}

.guest-location-field label {
    display: block;
    margin-bottom: 7px;
    color: #263f59;
    font-size: .83rem;
    font-weight: 700
}

.guest-location-field small {
    display: block;
    margin-top: 6px;
    color: var(--guest-muted);
    font-size: .73rem
}

.guest-location-code-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 9px
}

.guest-location-field input {
    width: 100%;
    min-height: 46px;
    padding: 10px 13px;
    color: var(--guest-text);
    background: #fff;
    border: 1px solid #e7c9b2;
    border-radius: 10px;
    outline: 0;
    font-size: .9rem
}

.guest-location-field input:focus {
    border-color: var(--guest-blue);
    box-shadow: 0 0 0 3px rgba(234,88,12,.12)
}

.guest-location-code-row button,.guest-location-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 46px;
    padding: 9px 16px;
    border-radius: 10px;
    font-size: .83rem;
    font-weight: 700
}

.guest-location-code-row button {
    color: #fff;
    background: var(--guest-blue);
    border: 1px solid var(--guest-blue)
}

.guest-location-code-row button:disabled {
    cursor: wait;
    opacity: .7
}

.guest-location-code-row button svg,.guest-location-actions svg {
    width: 17px;
    height: 17px
}

.guest-location-result {
    padding: 16px;
    background: #f7f9fc;
    border: 1px solid #f8ece0;
    border-radius: 10px
}

.guest-location-result.is-verified {
    background: #fff7ed;
    border-color: #fdba74
}

.guest-location-result .guest-location-field:last-child {
    margin-bottom: 0
}

.guest-location-readonly {
    position: relative
}

.guest-location-readonly>svg {
    position: absolute;
    top: 50%;
    left: 13px;
    width: 17px;
    height: 17px;
    color: #7890a8;
    transform: translateY(-50%);
    pointer-events: none
}

.guest-location-readonly input {
    padding-left: 40px;
    color: #445a70;
    background: #edf2f7
}

.guest-location-actions {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 10px;
    margin-top: 20px
}

.guest-location-reset {
    color: var(--guest-blue-dark);
    background: #fff;
    border: 1px solid #fdba74
}

.guest-location-submit {
    color: #fff;
    background: var(--guest-blue);
    border: 1px solid var(--guest-blue)
}

.guest-location-reset:hover,.guest-location-reset:focus {
    background: var(--guest-blue-soft)
}

.guest-location-submit:hover,.guest-location-submit:focus,.guest-location-code-row button:hover,.guest-location-code-row button:focus {
    background: var(--guest-blue-dark);
    border-color: var(--guest-blue-dark)
}

.guest-location-spinner {
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: guest-location-spin .7s linear infinite
}

@keyframes guest-location-spin {
    to {
        transform: rotate(360deg)
    }
}

@media(max-width:768px) {
    .guest-location-page {
        padding: 76px 12px calc(92px + env(safe-area-inset-bottom))
    }
    .guest-location-header {
        gap: 10px;
        margin: 0 0 12px;
        padding: 16px;
        border: 1px solid #f8ece0;
        border-radius: 10px;
    }
    .guest-location-heading-icon {
        display: none
    }
    .guest-location-header p {
        font-size: .75rem
    }
    .guest-location-card {
        margin: 0 0 12px;
        border: 1px solid #f8ece0;
        border-radius: 10px;
        box-shadow: none;
    }
    .guest-location-card-heading,.guest-location-card form {
        padding: 15px 14px
    }
    .guest-location-code-row {
        grid-template-columns: 1fr
    }
    .guest-location-code-row button {
        width: 100%
    }
}


/* ============ SOURCE: pendaftaran-online.css ============ */
/* Zavier theme-owned stylesheet; visual tokens are finalized by css/theme.css. */
/* Source: app/Modules/Home/Views/pendaftaran-online.php */

.member-registration-page {
  --registration-blue: #ea580c;
  --registration-blue-dark: #c2410c;
  --registration-blue-soft: #fff7ed;
  --registration-border: #f3dfd0;
  --registration-text: #172b43;
  --registration-muted: #64748b;
  --registration-surface: #ffffff;
  min-height: 100vh;
  padding: 104px 20px 72px;
  color: var(--registration-text);
  background: #f4f7fa;
}

.registration-shell {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}

.registration-page-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  padding: 20px 22px;
  background: var(--registration-surface);
  border: 1px solid var(--registration-border);
  border-radius: 10px;
}

.registration-back {
  display: inline-flex;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--registration-blue-dark);
  background: var(--registration-blue-soft);
  border: 1px solid #fed7aa;
  border-radius: 10px;
  text-decoration: none;
}

.registration-back:hover {
  color: #ffffff;
  background: var(--registration-blue);
  border-color: var(--registration-blue);
}

.registration-back svg,
.registration-heading-icon svg {
  width: 22px;
  height: 22px;
}

.registration-heading {
  min-width: 0;
  flex: 1;
}

.registration-heading h1 {
  margin: 0;
  color: var(--registration-text);
  font-size: clamp(1.35rem, 2.5vw, 1.8rem);
  font-weight: 700;
  line-height: 1.25;
}

.registration-heading p {
  margin: 4px 0 0;
  color: var(--registration-muted);
  font-size: 0.94rem;
  line-height: 1.5;
}

.registration-heading-icon {
  display: inline-flex;
  flex: 0 0 46px;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  color: var(--registration-blue);
  background: var(--registration-blue-soft);
  border-radius: 10px;
}

.registration-progress {
  margin-bottom: 18px;
  padding: 18px 22px 16px;
  background: var(--registration-surface);
  border: 1px solid var(--registration-border);
  border-radius: 10px;
}

.registration-progress .progress {
  height: 5px;
  overflow: hidden;
  background: #f8ece0;
  border-radius: 999px;
}

.registration-progress .progress-bar {
  width: 33%;
  background: var(--registration-blue);
  border-radius: inherit;
  transition: width 0.25s ease;
}

.step-indicator {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 14px;
}

.step {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  color: #8290a2;
  font-size: 0.82rem;
  font-weight: 600;
}

.step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: #718096;
  background: #eef2f6;
  border-radius: 50%;
}

.step-icon svg {
  width: 15px;
  height: 15px;
}

.step.active {
  color: var(--registration-blue-dark);
}

.step.active .step-icon {
  color: #ffffff;
  background: var(--registration-blue);
}

.registration-form {
  display: grid;
  gap: 16px;
}

.registration-card {
  padding: 24px;
  background: var(--registration-surface);
  border: 1px solid var(--registration-border);
  border-radius: 10px;
  box-shadow: 0 3px 12px rgba(194, 65, 12, 0.05);
}

.registration-section-header {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f8ece0;
}

.registration-section-icon {
  display: inline-flex;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--registration-blue);
  background: var(--registration-blue-soft);
  border-radius: 10px;
}

.registration-section-icon svg {
  width: 20px;
  height: 20px;
}

.registration-section-number {
  display: block;
  margin-bottom: 2px;
  color: var(--registration-blue);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.registration-section-header h2 {
  margin: 0;
  color: var(--registration-text);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.35;
}

.registration-section-header p {
  margin: 3px 0 0;
  color: var(--registration-muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.member-registration-page .form-group {
  margin: 0;
}

.member-registration-page .form-label {
  display: block;
  margin: 0 0 7px;
  color: #34495f;
  font-size: 0.86rem;
  font-weight: 600;
}

.member-registration-page .required::after {
  color: #c2413b;
  content: " *";
}

.member-registration-page .form-control,
.member-registration-page .form-select {
  width: 100%;
  min-height: 48px;
  padding: 10px 13px;
  color: var(--registration-text);
  background-color: #ffffff;
  border: 1px solid #e7c9b2;
  border-radius: 10px;
  box-shadow: none;
  font-size: 0.95rem;
  line-height: 1.35;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.member-registration-page textarea.form-control {
  min-height: 92px;
  resize: vertical;
}

.member-registration-page .form-control::placeholder {
  color: #95a2b1;
}

.member-registration-page .form-control:focus,
.member-registration-page .form-select:focus {
  border-color: var(--registration-blue);
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
  outline: none;
}

.member-registration-page .form-control:disabled,
.member-registration-page .form-select:disabled {
  color: #8b98a8;
  background-color: #f2f5f8;
  cursor: not-allowed;
}

.member-registration-page .form-control.is-invalid,
.member-registration-page .form-select.is-invalid,
.member-registration-page .form-check-input.is-invalid {
  border-color: #c2413b;
}

.member-registration-page .form-control.is-valid,
.member-registration-page .form-select.is-valid,
.member-registration-page .form-check-input.is-valid {
  border-color: #218653;
}

.help-text {
  margin-top: 6px;
  color: var(--registration-muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.input-group-icon {
  position: relative;
}

.input-group-icon .form-control {
  padding-left: 42px;
}

.input-group-icon .icon {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 14px;
  width: 18px;
  height: 18px;
  color: #708399;
  pointer-events: none;
  transform: translateY(-50%);
}

.registration-check-column {
  display: flex;
  align-items: flex-end;
  padding-bottom: 24px;
}

.registration-check-button,
.registration-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 700;
}

.registration-check-button {
  width: 100%;
  color: var(--registration-blue-dark);
  background: #ffffff;
  border: 1px solid #fdba74;
}

.registration-check-button:hover,
.registration-check-button:focus {
  color: #ffffff;
  background: var(--registration-blue);
  border-color: var(--registration-blue);
}

.registration-check-button.btn-success {
  color: #17603b;
  background: #e8f6ee;
  border-color: #91c9a9;
}

.registration-check-button svg,
.registration-submit svg {
  width: 18px;
  height: 18px;
}

.copy-address-control,
.agreement-control {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 18px;
  padding: 14px;
  background: #f4f8fc;
  border: 1px solid #f3dfd0;
  border-radius: 10px;
  cursor: pointer;
}

.copy-address-control .form-check-input,
.agreement-control .form-check-input {
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  margin: 2px 0 0;
  border-color: #94a3b8;
}

.member-registration-page .form-check-input:checked {
  background-color: var(--registration-blue);
  border-color: var(--registration-blue);
}

.copy-address-control strong,
.copy-address-control small {
  display: block;
}

.copy-address-control strong {
  color: #2d435a;
  font-size: 0.88rem;
}

.copy-address-control small {
  margin-top: 2px;
  color: var(--registration-muted);
  font-size: 0.76rem;
  line-height: 1.4;
}

.registration-consent .registration-section-header {
  margin-bottom: 14px;
}

.agreement-control {
  align-items: flex-start;
  margin: 0;
  color: #34495f;
  font-size: 0.88rem;
  line-height: 1.5;
}

.registration-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  padding-top: 2px;
}

.registration-submit {
  min-width: 240px;
  min-height: 52px;
  padding: 11px 22px;
  color: #ffffff;
  background: var(--registration-blue);
  border: 1px solid var(--registration-blue);
}

.registration-submit:hover,
.registration-submit:focus {
  color: #ffffff;
  background: var(--registration-blue-dark);
  border-color: var(--registration-blue-dark);
}

.registration-check-button:disabled,
.registration-submit:disabled {
  opacity: 0.65;
  cursor: wait;
}

.registration-message {
  width: 100%;
  color: var(--registration-muted);
  font-size: 0.85rem;
  text-align: center;
}

.registration-login {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
  padding: 16px;
  color: var(--registration-muted);
  background: var(--registration-surface);
  border: 1px solid var(--registration-border);
  border-radius: 10px;
  font-size: 0.88rem;
}

.registration-login a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--registration-blue-dark);
  font-weight: 700;
  text-decoration: none;
}

.registration-login a:hover {
  text-decoration: underline;
}

.registration-login svg {
  width: 15px;
  height: 15px;
}

.shake {
  animation: registration-shake 0.42s ease both;
}

@keyframes registration-shake {
  20%, 60% { transform: translateX(-3px); }
  40%, 80% { transform: translateX(3px); }
}

@media (max-width: 768px) {
  .member-registration-page {
    padding: 76px 12px calc(92px + env(safe-area-inset-bottom));
  }

  .registration-page-header {
    gap: 11px;
    margin-bottom: 12px;
    padding: 16px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid #f8ece0;
  }

  .registration-back {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  .registration-heading p {
    font-size: 0.8rem;
  }

  .registration-heading-icon {
    display: none;
  }

  .registration-progress {
    margin-bottom: 12px;
    padding: 14px 12px 12px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-top: 1px solid #f8ece0;
    border-bottom: 1px solid #f8ece0;
  }

  .step {
    flex-direction: column;
    gap: 5px;
    font-size: 0.72rem;
  }

  .member-registration-page .mobile-bottom-nav,
  .member-registration-page .main-footer {
    display: none !important;
  }

  .registration-form {
    gap: 12px;
    padding-bottom: 30px;
  }

  .registration-card {
    padding: 18px 14px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-top: 1px solid #f8ece0;
    border-bottom: 1px solid #f8ece0;
    box-shadow: none;
  }

  .registration-section-header {
    gap: 11px;
    margin-bottom: 16px;
    padding-bottom: 14px;
  }

  .registration-section-header h2 {
    font-size: 1rem;
  }

  .registration-section-header p {
    font-size: 0.78rem;
  }

  .registration-section-icon {
    flex-basis: 38px;
    width: 38px;
    height: 38px;
    border-radius: 10px;
  }

  .member-registration-page .form-control,
  .member-registration-page .form-select {
    min-height: 50px;
    font-size: 16px;
  }

  .registration-check-column {
    padding-bottom: 0;
  }

  .registration-check-button {
    min-height: 50px;
  }

  .registration-actions {
    position: fixed;
    z-index: 1050;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 12px 16px max(12px, env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.98);
    border: none;
    border-top: 1px solid var(--registration-border);
    border-radius: 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
  }

  .registration-submit {
    width: 100%;
    min-height: 52px;
  }

  .registration-login {
    flex-direction: column;
    gap: 5px;
    margin-top: 12px;
    margin-bottom: 30px;
    border-radius: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .registration-progress .progress-bar,
  .member-registration-page .form-control,
  .member-registration-page .form-select {
    transition: none;
  }

  .shake {
    animation: none;
  }
}

/* ============ ADAPTASI JENDELA ============ */
/* quick-menu: OPAC AI dihapus (tidak ada route) -> 4 kolom */
.opac-quick-menu { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* section-title Statistik Cepat (bug tema: tidak punya rule) */
.statistics-section-title { margin: 2px 2px 12px; color: var(--statistics-blue); font-size: .72rem; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; }

/* padding wrapper disesuaikan dgn layout jendela (navbar/footer statis, main 80vh) */
.opac-catalog-page,
.catalog-browse-page,
.catalog-statistics-page,
.guest-location-page,
.member-registration-page { min-height: 80vh; padding: 24px 20px 40px; }

/* tombol Jump (quick-jump ke huruf) di nav alfabet browse */
.browse-jump-button {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; margin-left: 4px;
    color: #fff; background: var(--browse-blue-dark);
    border: 1px solid var(--browse-blue-dark); border-radius: 9px;
    font-size: .78rem; font-weight: 700; cursor: pointer;
}
.browse-jump-button:hover { background: var(--browse-blue); border-color: var(--browse-blue); }
.browse-jump-button svg { width: 16px; height: 16px; }

/* spinner lucide (loader-circle) saat proses */
.lucide-spin { animation: finexy-spin 0.9s linear infinite; }
@keyframes finexy-spin { to { transform: rotate(360deg); } }

/* ============ SOURCE: detail.css ============ */
/* OPAC catalog detail page; visual tokens match opac-catalog-page. */
/* Source: app/Modules/Opac/Views/detail.php */

.opac-detail-page {
    --opac-blue: #ea580c;
    --opac-blue-dark: #c2410c;
    --opac-blue-soft: #fff7ed;
    --opac-border: #f3dfd0;
    --opac-text: #172b43;
    --opac-muted: #64748b;
    min-height: 100vh;
    padding: 104px 20px 76px;
    color: var(--opac-text);
    background: #f4f7fa;
}

.opac-detail-shell { width: 100%; max-width: 1180px; margin: 0 auto; }
.opac-detail-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.opac-detail-id { display: inline-flex; align-items: center; padding: 6px 11px; color: var(--opac-blue-dark); background: var(--opac-blue-soft); border: 1px solid #edc4a0; border-radius: 10px; font-size: .7rem; font-weight: 700; }

.opac-detail-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 8px 14px; color: var(--opac-text); background: #fff; border: 1px solid #edc4a0; border-radius: 10px; font-size: .76rem; font-weight: 700; text-decoration: none; cursor: pointer; }
.opac-detail-btn svg { width: 16px; height: 16px; }
.opac-detail-btn-solid { color: #fff; background: var(--opac-blue); border-color: var(--opac-blue); }
.opac-detail-btn-solid:hover, .opac-detail-btn-solid:focus { color: #fff; background: var(--opac-blue-dark); border-color: var(--opac-blue-dark); }
.opac-detail-btn-ghost { color: var(--opac-blue-dark); }
.opac-detail-btn-ghost:hover, .opac-detail-btn-ghost:focus { color: #fff; background: var(--opac-blue); border-color: var(--opac-blue); }

.opac-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.opac-detail-main, .opac-detail-sidebar, .opac-detail-panel { min-width: 0; }
.opac-detail-main { display: flex; flex-direction: column; gap: 16px; }
.opac-detail-panel { overflow: hidden; background: #fff; border: 1px solid var(--opac-border); border-radius: 18px; box-shadow: 0 3px 12px rgba(194, 65, 12, .04); }

.opac-detail-hero { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 18px; padding: 18px; }
.opac-detail-cover { min-width: 0; }
.opac-detail-cover-img { display: flex; width: 100%; aspect-ratio: 2 / 3; align-items: center; justify-content: center; overflow: hidden; padding: 0; background: #edf2f7; border: 1px solid #f3dfd0; border-radius: 13px; }
.opac-detail-cover-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .22s ease; }
.opac-detail-cover-img:hover img { transform: scale(1.025); }
.opac-detail-cover-actions { display: flex; justify-content: center; margin-top: 9px; }
.opac-detail-cover-actions .opac-detail-btn { min-height: 32px; padding: 6px 11px; }

.opac-detail-hero-info { min-width: 0; }
.opac-detail-title { margin: 0 0 4px; color: #20374e; font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 800; line-height: 1.3; }
.opac-detail-sub { margin: 0 0 12px; color: var(--opac-muted); font-size: .82rem; }

.opac-detail-meta { display: grid; grid-template-columns: 118px minmax(0, 1fr); margin: 0; }
.opac-detail-meta dt, .opac-detail-meta dd { margin: 0; padding: 7px 0; border-top: 1px solid #f8ece0; }
.opac-detail-meta dt { color: var(--opac-muted); font-size: .72rem; font-weight: 650; }
.opac-detail-meta dd { color: var(--opac-text); font-size: .82rem; overflow-wrap: anywhere; }
.opac-detail-meta dd code { color: var(--opac-blue-dark); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .74rem; }

.opac-detail-section-head { display: flex; align-items: center; gap: 8px; margin: 0; padding: 15px 18px 11px; color: #20374e; font-size: .92rem; font-weight: 800; }
.opac-detail-section-head svg { width: 17px; height: 17px; color: var(--opac-blue); }
.opac-detail-section { padding: 0 18px 18px; }

.opac-detail-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.opac-detail-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; color: var(--opac-blue-dark); background: var(--opac-blue-soft); border: 1px solid #edc4a0; border-radius: 20px; font-size: .7rem; font-weight: 700; }
.opac-detail-chip svg { width: 13px; height: 13px; }
.opac-detail-chip-green { color: #166534; background: #f0fdf4; border-color: #bbf7d0; }
.opac-detail-chip-info { color: #0c4a6e; background: #f0f9ff; border-color: #bae6fd; }
.opac-detail-chip-warn { color: #92400e; background: #fffbeb; border-color: #fde68a; }
.opac-detail-chip-muted { color: #475569; background: #f1f5f9; border-color: #e2e8f0; }

.opac-detail-note { margin: 0; padding: 13px 14px; color: #435a70; background: var(--opac-blue-soft); border: 1px solid #f3dfd0; border-radius: 12px; font-size: .8rem; line-height: 1.55; }

.opac-detail-tools { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #f8ece0; }
.opac-detail-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.opac-detail-tabs button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; color: #475569; background: #f1f5f9; border: 0; border-radius: 20px; font-size: .75rem; font-weight: 600; cursor: pointer; }
.opac-detail-tabs button svg { width: 15px; height: 15px; }
.opac-detail-tabs button:hover, .opac-detail-tabs button:focus { background: #e2e8f0; }
.opac-detail-tabs button.active { color: #fff; background: var(--opac-blue); }
.opac-detail-downloads { display: flex; flex-wrap: wrap; gap: 6px; }
.opac-detail-downloads a { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; color: var(--opac-blue-dark); background: #fff; border: 1px solid #edc4a0; border-radius: 9px; font-size: .68rem; font-weight: 650; text-decoration: none; }
.opac-detail-downloads svg { width: 13px; height: 13px; }
.opac-detail-downloads a:hover, .opac-detail-downloads a:focus { color: #fff; background: var(--opac-blue); border-color: var(--opac-blue); }

.opac-detail-pane { display: none; padding: 16px; }
.opac-detail-pane.active { display: block; }
.opac-detail-pane-note { margin: 0 0 10px; color: var(--opac-muted); font-size: .72rem; }
.opac-detail-table-scroll { overflow-x: auto; }
.opac-detail-table { width: 100%; margin: 0; border-collapse: collapse; font-size: .78rem; }
.opac-detail-table th, .opac-detail-table td { padding: 10px 12px; text-align: left; border: 1px solid #f3dfd0; vertical-align: middle; }
.opac-detail-table thead th { color: #52687e; background: var(--opac-blue-soft); font-size: .7rem; font-weight: 800; white-space: nowrap; }
.opac-detail-table tbody tr:nth-child(even) { background: #fafcfe; }
.opac-detail-table tbody tr:hover { background: #fff7ed; }
.opac-detail-table code { color: var(--opac-blue-dark); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; }
.opac-detail-table .opac-detail-btn { min-height: 32px; padding: 5px 11px; }

.opac-detail-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 20px; font-size: .66rem; font-weight: 700; white-space: nowrap; }
.opac-detail-badge-loc { color: #0c4a6e; background: #f0f9ff; border: 1px solid #bae6fd; }
.opac-detail-badge-ok { color: #166534; background: #f0fdf4; border: 1px solid #bbf7d0; }
.opac-detail-badge-warn { color: #92400e; background: #fffbeb; border: 1px solid #fde68a; }
.opac-detail-badge-muted { color: #475569; background: #f1f5f9; border: 1px solid #e2e8f0; }

.opac-detail-marc-tip { margin: 0; padding: 13px 14px; background: var(--opac-blue-soft); border: 1px solid #f3dfd0; border-radius: 12px; }
.opac-detail-marc-tip h6 { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; color: var(--opac-blue-dark); font-size: .78rem; }
.opac-detail-marc-tip h6 svg { width: 14px; height: 14px; }
.opac-detail-marc-tip-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 16px; margin: 0; padding: 0; list-style: none; }
.opac-detail-marc-tip li { color: #52687e; font-size: .72rem; }
.opac-detail-marc-tip li strong { color: #20374e; }

.opac-detail-sidebar { display: flex; position: sticky; top: 92px; flex-direction: column; gap: 16px; }
.opac-detail-side-card { overflow: hidden; background: #fff; border: 1px solid var(--opac-border); border-radius: 18px; box-shadow: 0 3px 12px rgba(194, 65, 12, .04); }
.opac-detail-side-head { display: flex; align-items: center; gap: 8px; margin: 0; padding: 13px 15px; color: #20374e; border-bottom: 1px solid #f8ece0; font-size: .8rem; font-weight: 800; }
.opac-detail-side-head svg { width: 16px; height: 16px; color: var(--opac-blue); }
.opac-detail-side-body { padding: 13px 15px 15px; }
.opac-detail-stack { display: flex; flex-direction: column; gap: 6px; }
.opac-detail-side-link { display: flex; align-items: center; gap: 7px; width: 100%; padding: 8px 10px; color: #435a70; background: transparent; border: 0; border-radius: 9px; font-size: .75rem; text-align: left; text-decoration: none; cursor: pointer; }
.opac-detail-side-link:hover, .opac-detail-side-link:focus { color: var(--opac-blue-dark); background: var(--opac-blue-soft); }
.opac-detail-side-link svg { flex: 0 0 15px; width: 15px; height: 15px; color: var(--opac-blue); }
.opac-detail-info-row { display: flex; align-items: center; gap: 7px; margin: 6px 0; color: var(--opac-muted); font-size: .74rem; line-height: 1.6; }
.opac-detail-info-row svg { flex: 0 0 14px; width: 14px; height: 14px; color: var(--opac-blue); }
.opac-detail-info-row strong { color: #435a70; }

.opac-detail-lightbox { position: fixed; z-index: 1050; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(23, 43, 67, .78); }
.opac-detail-lightbox-frame { position: relative; max-width: min(560px, 92vw); }
.opac-detail-lightbox-frame img { width: 100%; max-height: 76vh; object-fit: contain; border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, .35); }
.opac-detail-lightbox-close { position: absolute; top: -14px; right: -14px; display: flex; width: 36px; height: 36px; align-items: center; justify-content: center; color: #fff; background: var(--opac-blue-dark); border: 0; border-radius: 50%; cursor: pointer; }
.opac-detail-lightbox-close svg { width: 18px; height: 18px; }
.opac-detail-lightbox-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; color: #fff; font-size: .82rem; }
.opac-detail-lightbox-meta .opac-detail-btn { color: #fff; border-color: rgba(255, 255, 255, .35); }
.opac-detail-lightbox-meta .opac-detail-btn:hover { background: #fff; color: var(--opac-blue-dark); }

@media (max-width: 991.98px) {
    .opac-detail-grid { grid-template-columns: 1fr; }
    .opac-detail-sidebar { position: static; }
}
@media (max-width: 768px) {
    .opac-detail-hero { grid-template-columns: 1fr; }
    .opac-detail-cover-img { max-width: 220px; margin: 0 auto; }
    .opac-detail-meta { grid-template-columns: 1fr; }
    .opac-detail-marc-tip-grid { grid-template-columns: 1fr; }
}
@media print {
    .opac-detail-page { padding: 0; background: #fff; }
    .opac-detail-actions, .opac-detail-tools, .opac-detail-sidebar { display: none !important; }
}

/* ============ KIOSK: peminjaman-mandiri / pengembalian-mandiri / baca-ditempat ============ */
/* Source: SelfLoan Views/simple_view.php, SelfReturn Views/simple_return_view.php, ReadOnSpot Views/index.php */

.kiosk-page{--kz:#ea580c;--kz-dark:#c2410c;--kz-soft:#fff7ed;--kz-border:#f3dfd0;--kz-text:#172b43;--kz-muted:#64748b;min-height:100vh;padding:104px 20px 76px;color:var(--kz-text);background:#f4f7fa}
.kiosk-shell{width:100%;max-width:900px;margin:0 auto}
.kiosk-header{display:flex;align-items:center;gap:14px;margin-bottom:16px;padding:18px 20px;background:#fff;border:1px solid var(--kz-border);border-radius:10px}
.kiosk-heading-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 42px;width:42px;height:42px;color:var(--kz);background:var(--kz-soft);border-radius:10px}
.kiosk-header svg,.kiosk-card-heading svg,.kiosk-step svg,.kiosk-member h3 svg{width:21px;height:21px}
.kiosk-header h1{margin:0;color:var(--kz-text);font-size:clamp(1.25rem,2.3vw,1.6rem);font-weight:700;line-height:1.25}
.kiosk-header p{margin:3px 0 0;color:var(--kz-muted);font-size:.86rem;line-height:1.45}
.kiosk-card{overflow:hidden;background:#fff;border:1px solid var(--kz-border);border-radius:10px;box-shadow:0 3px 12px rgba(194,65,12,.04);margin-bottom:16px}
.kiosk-card-heading{display:flex;gap:12px;align-items:center;padding:18px 20px;border-bottom:1px solid #f8ece0}
.kiosk-card-heading h2{margin:0;color:var(--kz-text);font-size:1rem;font-weight:700}
.kiosk-card-heading p{margin:3px 0 0;color:var(--kz-muted);font-size:.78rem;line-height:1.4}
.kiosk-card-heading-between{justify-content:space-between;flex-wrap:wrap;gap:10px}
.kiosk-card-body{padding:20px}
.kiosk-field{margin-bottom:18px}
.kiosk-field label{display:block;margin-bottom:7px;color:#263f59;font-size:.83rem;font-weight:700}
.kiosk-field small{display:block;margin-top:6px;color:var(--kz-muted);font-size:.73rem}
.kiosk-input{width:100%;min-height:46px;padding:10px 13px;color:var(--kz-text);background:#fff;border:1px solid #e7c9b2;border-radius:10px;outline:0;font-size:.9rem;transition:border-color .16s ease,box-shadow .16s ease}
.kiosk-input:focus{border-color:var(--kz);box-shadow:0 0 0 3px rgba(234,88,12,.12)}
.kiosk-input::placeholder{color:#9aa7b8}
.kiosk-input-lg{min-height:54px;font-size:1.05rem;text-align:center;letter-spacing:.5px;font-weight:600}
.kiosk-input-group{display:grid;grid-template-columns:1fr auto;gap:9px}
.kiosk-input-group .kiosk-input{text-align:center;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;letter-spacing:1px}
.kiosk-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:46px;padding:9px 16px;border-radius:10px;font-size:.83rem;font-weight:700;cursor:pointer;text-decoration:none;transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease,opacity .16s ease}
.kiosk-btn svg{width:17px;height:17px}
.kiosk-btn-primary{color:#fff;background:var(--kz);border:1px solid var(--kz)}
.kiosk-btn-primary:hover,.kiosk-btn-primary:focus{background:var(--kz-dark);border-color:var(--kz-dark)}
.kiosk-btn-outline{color:var(--kz-dark);background:#fff;border:1px solid #fdba74}
.kiosk-btn-outline:hover,.kiosk-btn-outline:focus{background:var(--kz-soft)}
.kiosk-btn-ghost{color:var(--kz-dark);background:var(--kz-soft);border:1px solid transparent}
.kiosk-btn-ghost:hover,.kiosk-btn-ghost:focus{background:#ffe8d6}
.kiosk-btn-danger{color:#fff;background:#dc2626;border:1px solid #dc2626}
.kiosk-btn-danger:hover,.kiosk-btn-danger:focus{background:#b91c1c;border-color:#b91c1c}
.kiosk-btn-block{width:100%}
.kiosk-btn-lg{min-height:52px;padding:12px 24px;font-size:.95rem}
.kiosk-btn-sm{min-height:38px;padding:7px 12px;font-size:.76rem}
.kiosk-btn:disabled{opacity:.6;cursor:not-allowed}
.kiosk-btn-loose{min-width:170px}
.kiosk-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.kiosk-actions .kiosk-btn{flex:1;min-width:140px}
.kiosk-actions-center{justify-content:center}
.kiosk-note{margin:12px 0 0;color:var(--kz-muted);font-size:.75rem;text-align:center}
.kiosk-status{margin:16px 0;padding:14px 16px;border-radius:10px;font-size:.85rem;line-height:1.55;text-align:center;border:1px solid transparent}
.kiosk-status svg{width:17px;height:17px;vertical-align:-3px;margin-right:4px}
.kiosk-status-info{color:var(--kz-dark);background:var(--kz-soft);border-color:#fdba74}
.kiosk-status-success{color:#166534;background:#f0fdf4;border-color:#86efac}
.kiosk-status-error{color:#991b1b;background:#fef2f2;border-color:#fca5a5}
.kiosk-alert{display:flex;gap:10px;align-items:flex-start;margin-bottom:16px;padding:14px 16px;border-radius:10px;font-size:.85rem;line-height:1.5;border:1px solid transparent}
.kiosk-alert svg{flex:0 0 18px;width:18px;height:18px;margin-top:1px}
.kiosk-alert-success{color:#166534;background:#f0fdf4;border-color:#86efac}
.kiosk-alert-error{color:#991b1b;background:#fef2f2;border-color:#fca5a5}
.kiosk-alert-info{color:var(--kz-dark);background:var(--kz-soft);border-color:#fdba74}
.kiosk-center{text-align:center}
.kiosk-muted{color:var(--kz-muted)}
.kiosk-inline-icon{width:14px;height:14px;vertical-align:-2px;margin-right:4px}
.kiosk-empty{text-align:center;padding:34px 16px;color:var(--kz-muted);font-size:.85rem;line-height:1.6}
.kiosk-empty svg{width:30px;height:30px;margin:0 auto 10px;color:#d3dbe4;display:block}
.kiosk-table-wrap{overflow-x:auto}
.kiosk-table{width:100%;border-collapse:collapse;font-size:.85rem}
.kiosk-table thead th{background:#f8fafc;color:#334968;text-align:left;padding:11px 14px;font-size:.72rem;letter-spacing:.02em;text-transform:uppercase;border-bottom:1px solid #f1e4d8;white-space:nowrap}
.kiosk-table tbody td{padding:11px 14px;border-bottom:1px solid #f8f1ea;color:var(--kz-text);vertical-align:middle}
.kiosk-table tbody tr:last-child td{border-bottom:0}
.kiosk-table tbody tr:hover{background:#fffaf5}
.kiosk-steps{display:flex;gap:8px;margin-bottom:16px}
.kiosk-step{flex:1;display:flex;gap:9px;align-items:center;padding:12px 14px;background:#fff;border:1px solid var(--kz-border);border-radius:10px;color:var(--kz-muted);font-size:.79rem;font-weight:600}
.kiosk-step svg{width:17px;height:17px;flex:0 0 17px}
.kiosk-step.is-active{color:var(--kz-dark);border-color:#fdba74;background:var(--kz-soft)}
.kiosk-step.is-done{color:#166534;border-color:#86efac;background:#f0fdf4}
.kiosk-member{position:relative;margin:0 0 20px;padding:20px;color:#fff;background:linear-gradient(135deg,#fb923c,#ea580c 55%,#c2410c);border-radius:12px;overflow:hidden}
.kiosk-member:after{content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.12)}
.kiosk-member h3{margin:0 0 12px;font-size:1rem;font-weight:800;display:flex;align-items:center;gap:8px}
.kiosk-member-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;position:relative;z-index:1}
.kiosk-member-grid div{display:flex;flex-direction:column}
.kiosk-member-grid span{font-size:.7rem;opacity:.85}
.kiosk-member-grid strong{font-size:.9rem;font-weight:700}
.kiosk-member-avatar{width:64px;height:64px;display:flex;align-items:center;justify-content:center;color:var(--kz);background:#fff;border-radius:16px;box-shadow:0 6px 16px rgba(0,0,0,.18)}
.kiosk-member-avatar svg{width:26px;height:26px}
.kiosk-badge{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:999px;font-size:.74rem;font-weight:700;white-space:nowrap}
.kiosk-badge svg{width:13px;height:13px}
.kiosk-badge-orange{color:var(--kz-dark);background:var(--kz-soft);border:1px solid #fdba74}
.kiosk-badge-green{color:#166534;background:#f0fdf4;border:1px solid #86efac}
.kiosk-badge-amber{color:#92400e;background:#fffbeb;border:1px solid #fde68a}
.kiosk-badge-red{color:#991b1b;background:#fef2f2;border:1px solid #fca5a5}
.kiosk-badge-blue{color:#1d4ed8;background:#eff6ff;border:1px solid #bfdbfe}
.kiosk-badge-gray{color:#475569;background:#f1f5f9;border:1px solid #e2e8f0}
.kiosk-book{display:flex;gap:14px;align-items:center;justify-content:space-between;padding:14px 16px;margin-bottom:10px;background:#fff;border:1px solid var(--kz-border);border-left:4px solid var(--kz);border-radius:10px}
.kiosk-book h4{margin:0 0 4px;color:var(--kz-text);font-size:.92rem;font-weight:700}
.kiosk-book p{margin:0;color:var(--kz-muted);font-size:.78rem;line-height:1.5}
.kiosk-book-meta{display:flex;flex-wrap:wrap;gap:4px 16px}
.kiosk-book-meta span{color:var(--kz-muted);font-size:.78rem}
.kiosk-book-meta strong{color:#334968;font-weight:600}
.kiosk-book-actions{flex:0 0 auto}
.kiosk-book-actions .kiosk-btn{min-height:38px;padding:7px 12px;font-size:.76rem}
.kiosk-detail{display:flex;justify-content:space-between;gap:16px;padding:7px 0;border-bottom:1px solid #f8f1ea;font-size:.86rem}
.kiosk-detail:last-child{border-bottom:0}
.kiosk-detail span:first-child{color:var(--kz-muted);flex:0 0 auto}
.kiosk-detail span:last-child{color:var(--kz-text);text-align:right}
.kiosk-detail strong{color:var(--kz-text);font-weight:600}
.kiosk-history-item{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:13px 15px;margin-bottom:10px;background:#fff;border:1px solid var(--kz-border);border-left:4px solid var(--kz);border-radius:10px}
.kiosk-history-item h4{margin:0 0 4px;font-size:.9rem;font-weight:700;color:var(--kz-text)}
.kiosk-history-item p{margin:0;font-size:.78rem;color:var(--kz-muted);line-height:1.5}
.kiosk-history-item .kiosk-right{text-align:right;flex:0 0 auto}
.kiosk-divider{height:1px;background:#f8ece0;margin:18px 0}
.kiosk-row{display:grid;grid-template-columns:1.4fr 1fr;gap:20px}
.kiosk-inline-flex{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.kiosk-fade{animation:kioskFade .25s ease}
@keyframes kioskFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.hidden{display:none!important}
@media(max-width:768px){
  .kiosk-page{padding:76px 12px calc(92px + env(safe-area-inset-bottom))}
  .kiosk-header{gap:10px;margin:0 0 12px;padding:16px}
  .kiosk-heading-icon{display:none}
  .kiosk-card-body{padding:16px}
  .kiosk-steps{flex-direction:column}
  .kiosk-member-grid{grid-template-columns:1fr}
  .kiosk-member{display:flex;flex-direction:column;gap:12px}
  .kiosk-member-avatar{display:none}
  .kiosk-book{flex-direction:column;align-items:stretch}
  .kiosk-book-actions{text-align:right}
  .kiosk-row{grid-template-columns:1fr}
  .kiosk-actions .kiosk-btn{min-width:100%}
}