/* =====================================================================
   LibraryNest shared components (loaded after style.css)

   1. Tokens          the approved palette, shared with the Flutter LnTheme
   2. Utilities       the small Bootstrap subset some pages already use
   3. Profile grid    Bootstrap-style grid, scoped to .profile-page only
   4. Icons           bi-* / fa-* icons as CSS masks (no font dependency)
   5. Page classes    classes templates referenced but no CSS defined
   6. Feedback        form banner, field errors, busy buttons, confirm modal
   ===================================================================== */

/* 1. Tokens ----------------------------------------------------------- */
/* Breakpoints used across this file (UI Phase 7):
     max-width 1200px  wide layouts collapse (payment side panel)
     max-width  960px  tablet: multi-column grids reduce
     max-width  767px  compact: sidebar becomes a drawer, tables stack
     max-width  640px  phone: single column, full-width actions
     max-width  420px  very small phones (report filter only)            */
:root {
    --ln-primary: #3157c8;
    --ln-primary-hover: #2547ad;
    --ln-primary-soft: #eef3ff;
    --ln-accent: #13a889;
    --ln-success: #147d61;
    --ln-success-soft: #ecf8f3;
    --ln-warning: #a15c0b;
    --ln-warning-soft: #fdf5ea;
    --ln-danger: #c2414b;
    --ln-danger-soft: #fdf0f1;
    --ln-text: #172033;
    --ln-muted: #667085;
    --ln-border: #e2e7ef;
    --ln-page: #f4f6fa;
    --ln-surface: #fff;
    --ln-radius-input: 8px;
    --ln-radius-card: 12px;
    --ln-radius-dialog: 16px;
    /* Moved from style.css in UI Phase 7 so every token lives here. */
    --ln-surface-muted: #f8f9fc;
    --ln-border-strong: #cbd4e1;
    --ln-subtle: #98a2b3;
    --ln-focus: rgba(49, 87, 200, 0.24);
    --ln-font: Inter, "Segoe UI", Arial, sans-serif;
    --ln-space-1: 0.375rem;
    --ln-space-2: 0.625rem;
    --ln-space-3: 0.875rem;
    --ln-space-4: 1rem;
    --ln-space-5: 1.25rem;
    --ln-space-6: 1.5rem;
    --ln-radius-sm: 0.5rem;
    --ln-radius-md: 0.75rem;
    --ln-radius-lg: 1rem;
    --ln-shadow-sm: 0 1px 2px rgba(16, 24, 40, .04);
    --ln-shadow-md: 0 8px 24px rgba(23, 32, 51, .07);
}

/* 2. Utilities ---------------------------------------------------------- */

.small { font-size: 0.875em; }
.text-muted { color: var(--ln-muted) !important; }

.border { border: 1px solid var(--ln-border) !important; }

.border-top { border-top: 1px solid var(--ln-border) !important; }
.rounded { border-radius: var(--ln-radius-input) !important; }

.form-text { display: block; margin-top: 0.35rem; font-size: 0.85rem; color: var(--ln-muted); }

/* 3. Profile grid (scoped: other pages use .row with their own meaning) -- */

/* Base form and button styles that style.css's .profile-page rules assume
   (they were written on top of Bootstrap, which is not loaded). Low
   specificity, so the existing profile rules still win where they apply. */

/* 4. Icons --------------------------------------------------------------- */

/* 5. Page classes ------------------------------------------------------ */

.table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.table th, .table td { padding: 0.7rem 0.85rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--ln-border); }
.table thead th { background: var(--ln-page); color: var(--ln-muted); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.table tbody tr:last-child td { border-bottom: 0; }

.pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; justify-content: center; margin: 1rem 0; }
.pagination a { padding: 0.45rem 0.9rem; border: 1px solid var(--ln-border); border-radius: var(--ln-radius-input); background: var(--ln-surface); color: var(--ln-primary); text-decoration: none; font-weight: 600; }
.pagination a:hover { background: var(--ln-primary-soft); }
.pagination span { color: var(--ln-muted); }

.form-input { width: 100%; box-sizing: border-box; padding: 0.6rem 0.75rem; border: 1px solid var(--ln-border); border-radius: var(--ln-radius-input); background: var(--ln-surface); color: var(--ln-text); font: inherit; }
.form-input:focus { outline: none; border-color: var(--ln-primary); box-shadow: 0 0 0 3px rgba(49, 87, 200, .18); }
.checkbox-label { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.category-delete-btn { border: 1px solid #f1c7cb; background: var(--ln-danger-soft); color: var(--ln-danger); border-radius: var(--ln-radius-input); padding: 0.3rem 0.65rem; cursor: pointer; font-weight: 600; }
.pricing-custom-input, .pricing-discount-input { max-width: 180px; }

.branch-information-card, .branch-deletion-card, .branch-subscription-group, .branch-group-allocation { border: 1px solid var(--ln-border); border-radius: var(--ln-radius-card); background: var(--ln-surface); padding: 1rem 1.25rem; }
.branch-deletion-card { border-color: #f1c7cb; }
.allocation-new-label { font-weight: 600; color: var(--ln-primary); }
.nav-icon { display: inline-flex; width: 1.25em; justify-content: center; }

/* 6. Feedback ------------------------------------------------------------ */
.ln-form-banner { display: flex; gap: 0.65rem; align-items: flex-start; margin: 0 0 1rem; padding: 0.8rem 1rem; border-radius: var(--ln-radius-card); border: 1px solid #f1c7cb; background: var(--ln-danger-soft); color: var(--ln-danger); font-weight: 500; }
.ln-form-banner::before { content: ''; width: 1.15em; height: 1.15em; flex: none; margin-top: 0.1em; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Cpath d='M12 16.5h.01'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Cpath d='M12 16.5h.01'/%3E%3C/svg%3E") center / contain no-repeat; }
.ln-field-error { display: block; margin-top: 0.3rem; color: var(--ln-danger); font-size: 0.82rem; font-weight: 500; }
.ln-input-invalid, input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--ln-danger) !important; box-shadow: 0 0 0 3px rgba(194, 65, 75, .14) !important; }
button.ln-busy, input[type="submit"].ln-busy { opacity: 0.7; cursor: progress; pointer-events: none; }
button.ln-busy::after { content: ''; display: inline-block; width: 0.9em; height: 0.9em; margin-left: 0.5em; vertical-align: -0.12em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ln-spin 0.7s linear infinite; }
@keyframes ln-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { button.ln-busy::after { animation: none; } }

.ln-modal-backdrop { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(23, 32, 51, .45); }
.ln-modal { width: 100%; max-width: 420px; background: var(--ln-surface); border-radius: var(--ln-radius-dialog); box-shadow: 0 20px 50px rgba(23, 32, 51, .25); padding: 1.4rem 1.4rem 1.1rem; color: var(--ln-text); }
.ln-modal h2 { margin: 0 0 0.5rem; font-size: 1.1rem; font-weight: 700; }
.ln-modal p { margin: 0 0 1.2rem; color: var(--ln-muted); line-height: 1.5; }
.ln-modal-actions { display: flex; justify-content: flex-end; gap: 0.6rem; flex-wrap: wrap; }
.ln-modal-actions button { min-height: 40px; padding: 0.5rem 1rem; border-radius: var(--ln-radius-input); font: inherit; font-weight: 600; cursor: pointer; border: 1px solid var(--ln-border); background: var(--ln-surface); color: var(--ln-text); }
.ln-modal-actions .ln-modal-confirm { border-color: var(--ln-danger); background: var(--ln-danger); color: #fff; }
.ln-modal-actions .ln-modal-confirm.ln-modal-confirm-primary { border-color: var(--ln-primary); background: var(--ln-primary); }

/* 7. Module layout (Phase 2) ---------------------------------------------
   Reusable building blocks for redesigned module pages. Everything is
   namespaced ln-* so it never collides with the older style.css classes. */
.ln-page { display: flex; flex-direction: column; gap: 1.25rem; color: var(--ln-text); }
.ln-page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.ln-page-title { margin: 0; font-size: 1.6rem; font-weight: 750; letter-spacing: -0.01em; color: var(--ln-text); }
.ln-page-subtitle { margin: 0.25rem 0 0; color: var(--ln-muted); font-size: 0.95rem; }
.ln-page-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ln-back-link { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--ln-muted); font-size: 0.875rem; font-weight: 600; text-decoration: none; margin-bottom: 0.35rem; }
.ln-back-link:hover { color: var(--ln-primary); }

.ln-card { background: var(--ln-surface); border: 1px solid var(--ln-border); border-radius: var(--ln-radius-card); box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.ln-card-body { padding: 1.25rem; }
.ln-card-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--ln-border); }
.ln-card-title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--ln-text); }

/* Buttons */
.ln-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
    min-height: 40px; padding: 0.5rem 1rem; border-radius: 10px; border: 1px solid transparent;
    font: inherit; font-size: 0.9rem; font-weight: 600; line-height: 1.2; text-decoration: none;
    cursor: pointer; white-space: nowrap; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.ln-btn:focus-visible, .ln-icon-btn:focus-visible, .ln-chip:focus-visible { outline: 3px solid rgba(49, 87, 200, .35); outline-offset: 2px; }
.ln-btn-primary { background: var(--ln-primary); border-color: var(--ln-primary); color: #fff; }
.ln-btn-primary:hover { background: var(--ln-primary-hover); border-color: var(--ln-primary-hover); color: #fff; }
.ln-btn-secondary { background: var(--ln-surface); border-color: var(--ln-border); color: var(--ln-text); }
.ln-btn-secondary:hover { background: var(--ln-page); }
.ln-btn-ghost { background: transparent; color: var(--ln-muted); }
.ln-btn-ghost:hover { background: var(--ln-page); color: var(--ln-text); }
.ln-btn-danger { background: var(--ln-surface); border-color: #f1c7cb; color: var(--ln-danger); }
.ln-btn-danger:hover { background: var(--ln-danger-soft); }
.ln-btn-sm { min-height: 34px; padding: 0.35rem 0.75rem; font-size: 0.85rem; }

.ln-icon-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
    padding: 0; border-radius: 8px; border: 1px solid var(--ln-border); background: var(--ln-surface);
    color: var(--ln-muted); cursor: pointer; text-decoration: none; flex: none;
}
.ln-icon-btn:hover { color: var(--ln-primary); border-color: #c7d3f3; background: var(--ln-primary-soft); }
.ln-icon-btn.ln-danger:hover { color: var(--ln-danger); border-color: #f1c7cb; background: var(--ln-danger-soft); }
.ln-icon-btn.ln-success:hover { color: var(--ln-success); border-color: #c8ecdf; background: var(--ln-success-soft); }
.ln-icon-btn .ln-i { width: 17px; height: 17px; }
.ln-actions { display: flex; align-items: center; gap: 0.35rem; flex-wrap: nowrap; }
.ln-actions form { margin: 0; display: inline-flex; }

/* Icons (same mask technique as section 4) */
.ln-i { display: inline-block; width: 1.1em; height: 1.1em; flex: none; background-color: currentColor;
    -webkit-mask: var(--ln-icon) center / contain no-repeat; mask: var(--ln-icon) center / contain no-repeat; }
.ln-i-plus { --ln-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.ln-i-search { --ln-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); }
.ln-i-edit { --ln-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3Cpath d='m13.5 6.5 4 4'/%3E%3C/svg%3E"); }
.ln-i-eye { --ln-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.ln-i-trash { --ln-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3'/%3E%3C/svg%3E"); }
.ln-i-power { --ln-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 3v8'/%3E%3Cpath d='M6.3 7.2a8 8 0 1 0 11.4 0'/%3E%3C/svg%3E"); }
.ln-i-users { --ln-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c.9-3.6 3.4-5.5 6.5-5.5s5.6 1.9 6.5 5.5'/%3E%3Cpath d='M16 4.6a3.5 3.5 0 0 1 0 6.8M18.5 14.8c1.5.8 2.5 2.6 3 5.2'/%3E%3C/svg%3E"); }
.ln-i-refresh { --ln-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 0 0-14.6-4.5L4 8M4 4v4h4'/%3E%3Cpath d='M4 13a8 8 0 0 0 14.6 4.5L20 16M20 20v-4h-4'/%3E%3C/svg%3E"); }
.ln-i-phone { --ln-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='7' y='2.5' width='10' height='19' rx='2'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E"); }
.ln-i-back { --ln-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E"); }

/* Stat tiles */
.ln-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.75rem; }
.ln-stat { background: var(--ln-surface); border: 1px solid var(--ln-border); border-radius: var(--ln-radius-card); padding: 0.85rem 1rem; }
.ln-stat-label { display: block; color: var(--ln-muted); font-size: 0.8rem; font-weight: 600; }
.ln-stat-value { display: block; margin-top: 0.2rem; font-size: 1.35rem; font-weight: 750; color: var(--ln-text); font-variant-numeric: tabular-nums; }
.ln-stat-success .ln-stat-value { color: var(--ln-success); }
.ln-stat-muted .ln-stat-value { color: var(--ln-muted); }

/* Toolbar, search, filter chips */
.ln-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--ln-border); }
.ln-search { position: relative; flex: 1 1 260px; max-width: 460px; display: flex; align-items: center; }
.ln-search .ln-i { position: absolute; left: 0.75rem; color: var(--ln-muted); pointer-events: none; }
.content .ln-search input, .ln-search input {
    width: 100%; min-height: 40px; box-sizing: border-box; padding: 0.5rem 0.75rem 0.5rem 2.3rem;
    border: 1px solid #cbd5e1; border-radius: 10px; background: var(--ln-surface); font: inherit; font-size: 0.92rem; color: var(--ln-text);
}
.ln-search input:focus { outline: none; border-color: var(--ln-primary); box-shadow: 0 0 0 3px rgba(49, 87, 200, .18); }
.ln-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.75rem 1.25rem 0; }
.ln-chip {
    display: inline-flex; align-items: center; gap: 0.35rem; min-height: 32px; padding: 0.3rem 0.8rem;
    border-radius: 999px; border: 1px solid var(--ln-border); background: var(--ln-surface);
    color: var(--ln-muted); font-size: 0.84rem; font-weight: 600; text-decoration: none;
}
.ln-chip:hover { color: var(--ln-text); background: var(--ln-page); }
.ln-chip[aria-current="true"] { background: var(--ln-primary-soft); border-color: #c7d3f3; color: var(--ln-primary); }
.ln-results-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem 1.25rem; color: var(--ln-muted); font-size: 0.85rem; }
.ln-results-meta a { color: var(--ln-primary); font-weight: 600; text-decoration: none; }

/* Data table: scrolls on tablets, becomes stacked cards on phones */
.ln-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ln-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.ln-table th { padding: 0.65rem 1rem; background: var(--ln-page); color: var(--ln-muted); font-size: 0.72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--ln-border); }
.ln-table td { padding: 0.8rem 1rem; border-top: 0; border-bottom: 1px solid var(--ln-border); color: var(--ln-text); font-size: 0.875rem; vertical-align: middle; }
.ln-table tbody tr:last-child td { border-bottom: 0; }
.ln-table tbody tr:hover { background: #f8faff; }
.ln-table .ln-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ln-table .ln-col-actions { width: 1%; white-space: nowrap; }
.ln-cell-sub { display: block; margin-top: 0.15rem; color: var(--ln-muted); font-size: 0.8rem; }

.ln-person { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.ln-avatar {
    display: inline-flex; align-items: center; justify-content: center; flex: none; width: 38px; height: 38px;
    border-radius: 50%; background: var(--ln-primary-soft); color: var(--ln-primary); font-weight: 700; overflow: hidden;
}
.ln-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ln-avatar-lg { width: 64px; height: 64px; font-size: 1.5rem; }
.ln-person-name { display: block; font-weight: 650; color: var(--ln-text); text-decoration: none; }
a.ln-person-name:hover { color: var(--ln-primary); }

@media (max-width: 767px) {
    .ln-table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .ln-table-stack, .ln-table-stack tbody, .ln-table-stack tr, .ln-table-stack td { display: block; width: 100%; box-sizing: border-box; }
    .ln-table-stack tr { padding: 0.85rem 1rem; border-bottom: 1px solid var(--ln-border); }
    .ln-table-stack tbody tr:hover { background: transparent; }
    .ln-table-stack td { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.3rem 0; border: 0; }
    .ln-table-stack td[data-label]::before { content: attr(data-label); color: var(--ln-muted); font-size: 0.78rem; font-weight: 600; }
    .ln-table-stack td.ln-cell-primary { padding-bottom: 0.5rem; }
    .ln-table-stack td.ln-cell-primary::before, .ln-table-stack td.ln-col-actions::before { content: none; }
    .ln-table-stack td.ln-col-actions { justify-content: flex-end; padding-top: 0.6rem; width: 100%; }
    .ln-table-stack td.ln-empty-cell { display: block; }
    .ln-toolbar, .ln-chips, .ln-results-meta, .ln-card-header, .ln-card-body { padding-left: 1rem; padding-right: 1rem; }
    .ln-search { max-width: none; }
    .ln-page-title { font-size: 1.35rem; }
    .ln-stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
    .ln-stat { padding: 0.6rem 0.7rem; }
    .ln-stat-value { font-size: 1.1rem; }
    .ln-page-actions, .ln-page-actions .ln-btn { width: 100%; }
}

/* Badges */
.ln-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.76rem; font-weight: 650; white-space: nowrap; border: 1px solid transparent; }
.ln-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ln-badge-plain::before { content: none; }
.ln-badge-success { background: var(--ln-success-soft); color: var(--ln-success); border-color: #c8ecdf; }
.ln-badge-warning { background: var(--ln-warning-soft); color: var(--ln-warning); border-color: #f3dcbd; }
.ln-badge-danger { background: var(--ln-danger-soft); color: var(--ln-danger); border-color: #f1c7cb; }
.ln-badge-neutral { background: var(--ln-page); color: var(--ln-muted); border-color: var(--ln-border); }
.ln-badge-info { background: var(--ln-primary-soft); color: var(--ln-primary); border-color: #c7d3f3; }

/* Empty state */
.ln-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; padding: 2.75rem 1.25rem; }
.ln-empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--ln-primary-soft); color: var(--ln-primary); margin-bottom: 0.35rem; }
.ln-empty-icon .ln-i { width: 26px; height: 26px; }
.ln-empty h2, .ln-empty h3 { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--ln-text); }
.ln-empty p { margin: 0; max-width: 420px; color: var(--ln-muted); font-size: 0.9rem; line-height: 1.5; }
.ln-empty .ln-btn { margin-top: 0.75rem; }
td.ln-empty-cell { padding: 0 !important; }
.ln-table tbody tr.ln-empty-row:hover { background: transparent; }

/* Form field feedback inside the existing .form-group layout */
.form-group .ln-field-error { margin-top: 0.35rem; }
.ln-required { color: var(--ln-danger); margin-left: 0.15rem; }
.ln-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Member profile header (member_detail.html) */
.member-summary-heading .member-summary-title { flex: 1 1 auto; min-width: 0; }
.member-summary-heading .member-summary-avatar { align-self: center; }
@media (max-width: 640px) {
    .member-summary-heading { flex-wrap: wrap; }
    .member-summary-heading .member-summary-avatar { width: 52px; height: 52px; font-size: 1.25rem; }
}
.ln-nowrap { white-space: nowrap; }
.ln-table .ln-col-person { min-width: 230px; }
/* Top bar title: shrink and ellipsise instead of breaking words on phones. */
.page-title { min-width: 0; overflow-wrap: normal; word-break: normal; }
@media (max-width: 640px) {
    .page-title { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
.ln-form-banner:focus { outline: none; }
.ln-table th, .ln-table td { padding-left: 0.85rem; padding-right: 0.85rem; }
.ln-table th:first-child, .ln-table td:first-child { padding-left: 1.25rem; }
.ln-table th:last-child, .ln-table td:last-child { padding-right: 1.25rem; }

/* 8. Payments & renewals (Phase 2) ---------------------------------------- */
.ln-i-receipt { --ln-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-3-2-3 2-3-2-3 2z'/%3E%3Cpath d='M9 8h6M9 12h6M9 16h3'/%3E%3C/svg%3E"); }
.ln-i-check { --ln-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }

.ln-stat-danger .ln-stat-value { color: var(--ln-danger); }
.ln-stat-row-wide { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.ln-stack-end { display: flex; flex-direction: column; }
.ln-btn-cash { color: var(--ln-success); border-color: #c8ecdf; background: var(--ln-success-soft); }
.ln-btn-cash:hover { background: #dff3ea; }
.ln-card-subtitle { margin: 0.2rem 0 0; color: var(--ln-muted); font-size: 0.85rem; }
.ln-text-success { color: var(--ln-success) !important; }
.ln-text-danger { color: var(--ln-danger) !important; }

/* Two-column form + sticky summary */
.ln-pay-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.25rem; align-items: start; }
.ln-pay-main { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.ln-pay-side { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 1rem; }
@media (max-width: 1200px) {
    .ln-pay-layout { grid-template-columns: 1fr; }
    .ln-pay-side { position: static; }
}
.ln-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
.ln-form-grid .form-group { margin: 0; }
.ln-span-2 { grid-column: 1 / -1; }
@media (max-width: 640px) { .ln-form-grid { grid-template-columns: 1fr; } }
.ln-form-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: flex-end; }
.ln-pay-side .ln-form-actions .ln-btn { flex: 1 1 auto; }

.ln-input-prefix { position: relative; display: flex; align-items: center; }
.ln-input-prefix > span { position: absolute; left: 0.85rem; color: var(--ln-muted); font-weight: 600; pointer-events: none; }
.ln-input-prefix input, .content .ln-input-prefix input { width: 100%; padding-left: 2rem; }

.ln-pay-period { margin: 0 0 0.75rem; font-weight: 700; color: var(--ln-text); }
.ln-summary-list { margin: 0; display: flex; flex-direction: column; }
.ln-summary-list > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--ln-border); }
.ln-summary-list dt { color: var(--ln-muted); font-size: 0.9rem; }
.ln-summary-list dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--ln-text); }
.ln-summary-list .ln-summary-total { border-bottom: 0; padding-top: 0.8rem; }
.ln-summary-list .ln-summary-total dt { color: var(--ln-text); font-weight: 700; }
.ln-summary-list .ln-summary-total dd { font-size: 1.3rem; font-weight: 800; }
.ln-summary-note { margin: 0.75rem 0 0; color: var(--ln-muted); font-size: 0.82rem; }
.ln-pay-person { margin-bottom: 0.75rem; }

.ln-empty-compact { padding: 1rem 0.5rem; }
.ln-empty-compact .ln-empty-icon { width: 46px; height: 46px; }
.ln-empty-compact h3 { font-size: 0.98rem; }
.ln-empty-icon-success { background: var(--ln-success-soft); color: var(--ln-success); }

/* Renewal plan picker */
.ln-plan-group { border: 0; margin: 0 0 1.25rem; padding: 0; min-width: 0; }
.ln-plan-group legend { padding: 0; margin-bottom: 0.6rem; font-weight: 600; font-size: 0.9rem; color: var(--ln-text); }
.ln-plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.6rem; }
.ln-plan-option { position: relative; display: block; cursor: pointer; }
.ln-plan-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ln-plan-body { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.8rem 0.9rem; border: 1.5px solid var(--ln-border); border-radius: var(--ln-radius-card); background: var(--ln-surface); transition: border-color .15s, background-color .15s; }
.ln-plan-months { font-weight: 700; color: var(--ln-text); }
.ln-plan-price { color: var(--ln-muted); font-variant-numeric: tabular-nums; font-weight: 600; }
.ln-plan-option:hover .ln-plan-body { border-color: #c7d3f3; }
.ln-plan-option input:checked + .ln-plan-body { border-color: var(--ln-primary); background: var(--ln-primary-soft); }
.ln-plan-option input:checked + .ln-plan-body .ln-plan-price { color: var(--ln-primary); }
.ln-plan-option input:focus-visible + .ln-plan-body { outline: 3px solid rgba(49, 87, 200, .35); outline-offset: 2px; }
.ln-plan-group[aria-describedby] .ln-plan-body, .ln-plan-option input[aria-invalid="true"] + .ln-plan-body { border-color: #f1c7cb; }
.ln-method-group { max-width: 420px; margin: 0; }
.ln-inline-notice { margin: 0; padding: 0.75rem 0.9rem; border-radius: var(--ln-radius-card); background: var(--ln-warning-soft); color: var(--ln-warning); font-weight: 600; }
.ln-form-banner-info { border-color: #c7d3f3; background: var(--ln-primary-soft); color: var(--ln-primary); }
.ln-form-banner[hidden] { display: none !important; }
.ln-form-banner-info::before { background: currentColor; }
.ln-payments-page .ln-actions { flex-wrap: wrap; justify-content: flex-end; max-width: 170px; margin-left: auto; }
.ln-payments-page .ln-table .ln-col-person { min-width: 190px; }
@media (max-width: 767px) {
    .ln-stat-row-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ln-payments-page .ln-actions { max-width: none; }
}

/* 9. Staff (Phase 2) ------------------------------------------------------ */
.ln-i-pause { --ln-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M9 6v12M15 6v12'/%3E%3C/svg%3E"); }
button.ln-chip { font: inherit; font-size: 0.84rem; font-weight: 600; cursor: pointer; }
.ln-badge-sm { font-size: 0.7rem; padding: 0.12rem 0.5rem; align-self: flex-start; margin-top: 0.25rem; }
.ln-break { word-break: break-word; }
.ln-muted { color: var(--ln-muted); }
.ln-email-cell { min-width: 200px; }
.ln-staff-page .ln-table .ln-col-person { min-width: 210px; }
tr[hidden] { display: none !important; }
@media (max-width: 767px) {
    .ln-staff-page .ln-stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ln-table-stack .ln-email-cell { align-items: flex-end; min-width: 0; }
    .ln-table-stack .ln-badge-sm { align-self: flex-end; }
}
.ln-staff-form-header { margin-bottom: 1.25rem; }
.ln-form-banner:focus, .ln-form-banner:focus-visible { outline: none !important; box-shadow: none !important; }

/* 10. Books & issues (Phase 2) -------------------------------------------- */
.ln-i-book { --ln-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5A2.5 2.5 0 0 1 6.5 3H20v15H6.5A2.5 2.5 0 0 0 4 20.5z'/%3E%3Cpath d='M4 20.5A2.5 2.5 0 0 0 6.5 23H20v-5'/%3E%3Cpath d='M8 7h8'/%3E%3C/svg%3E"); }
.ln-book-cover {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 36px; height: 50px; border-radius: 6px; overflow: hidden;
    background: var(--ln-primary-soft); color: var(--ln-primary); border: 1px solid var(--ln-border);
}
.ln-book-cover img { width: 100%; height: 100%; object-fit: cover; }
.ln-book-cover .ln-i { width: 18px; height: 18px; }
.ln-book-cover-lg { width: 64px; height: 88px; border-radius: 8px; }
.ln-book-cover-lg .ln-i { width: 26px; height: 26px; }
.ln-avatar-md { width: 44px; height: 44px; font-size: 1.05rem; }
.ln-books-page .ln-table .ln-col-person { min-width: 240px; }

.ln-book-form { display: flex; flex-direction: column; gap: 1.25rem; max-width: 880px; }
.ln-inline-field { display: flex; gap: 0.5rem; align-items: stretch; }
.ln-inline-field select { flex: 1 1 auto; min-width: 0; }
.ln-cover-upload { display: flex; gap: 1rem; align-items: center; }
.ln-cover-upload input[type="file"] { max-width: 100%; }
.ln-inline-notice-info { background: var(--ln-primary-soft); color: var(--ln-primary); font-weight: 500; }

/* Issue summary previews */
.ln-issue-summary { display: flex; flex-direction: column; gap: 0.9rem; }
.ln-issue-preview { display: flex; gap: 0.8rem; align-items: center; }
.ln-issue-preview[hidden], .ln-issue-empty[hidden] { display: none; }
.ln-issue-preview .ln-avatar-lg { width: 56px; height: 56px; font-size: 1.3rem; }
.ln-issue-empty { margin: 0; font-size: 0.9rem; }

/* Issued books grouped by member */
.ln-issue-groups { display: flex; flex-direction: column; gap: 1rem; padding: 0 1.25rem 1.25rem; }
.ln-issue-group { border: 1px solid var(--ln-border); border-radius: var(--ln-radius-card); background: var(--ln-surface); overflow: hidden; }
.ln-issue-group[hidden], .ln-issue-row[hidden], .ln-issue-history[hidden] { display: none; }
.ln-issue-group-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.85rem 1rem; background: var(--ln-page); border-bottom: 1px solid var(--ln-border); }
.ln-issue-list { list-style: none; margin: 0; padding: 0; }
.ln-issue-list:empty { display: none; }
.ln-issue-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 0.75rem 1.25rem; align-items: center; padding: 0.9rem 1rem; border-bottom: 1px solid var(--ln-border); }
.ln-issue-list > .ln-issue-row:last-child { border-bottom: 0; }
.ln-issue-main { display: flex; gap: 0.75rem; align-items: center; min-width: 0; }
.ln-issue-title { min-width: 0; flex: 1 1 auto; }
.ln-issue-status { flex: none; }
.ln-issue-dates { display: flex; gap: 1.25rem; margin: 0; flex-wrap: wrap; }
.ln-issue-dates dt, .ln-issue-fine-grid dt { color: var(--ln-muted); font-size: 0.75rem; font-weight: 600; }
.ln-issue-dates dd, .ln-issue-fine-grid dd { margin: 0.1rem 0 0; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.ln-issue-actions { display: flex; gap: 0.4rem; justify-content: flex-end; }
.ln-issue-actions form { margin: 0; }
.ln-issue-fine { grid-column: 1 / -1; padding: 0.7rem 0.85rem; border-radius: var(--ln-radius-input); background: var(--ln-warning-soft); border: 1px solid #f3dcbd; }
.ln-issue-fine-head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; margin-bottom: 0.45rem; }
.ln-issue-fine-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem 1rem; margin: 0; }
.ln-issue-history { border-top: 1px solid var(--ln-border); }
.ln-issue-history > summary { cursor: pointer; padding: 0.7rem 1rem; color: var(--ln-muted); font-weight: 600; font-size: 0.875rem; }
.ln-issue-history > summary:hover { color: var(--ln-text); }
.ln-issue-history[open] > summary { border-bottom: 1px solid var(--ln-border); }
@media (max-width: 960px) {
    .ln-issue-row { grid-template-columns: 1fr; }
    .ln-issue-actions { justify-content: flex-start; }
    .ln-issue-fine-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .ln-issue-groups { padding: 0 1rem 1rem; }
    .ln-issue-group-header { flex-wrap: wrap; }
    .ln-cover-upload { align-items: flex-start; }
    .ln-inline-field { flex-wrap: wrap; }
}
.ln-empty[hidden] { display: none !important; }

/* Attendance (attendance.html) */
.ln-i-login { --ln-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-4'/%3E%3Cpath d='M10 16l4-4-4-4M14 12H4'/%3E%3C/svg%3E"); }
.ln-i-logout { --ln-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M16 16l4-4-4-4M20 12H10'/%3E%3C/svg%3E"); }
.ln-i-clock { --ln-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.ln-notice { display: flex; gap: 0.6rem; align-items: center; padding: 0.75rem 1rem; border-radius: var(--ln-radius-card); font-weight: 600; }
.ln-notice[hidden] { display: none; }
.ln-notice-success { background: var(--ln-success-soft); color: var(--ln-success); border: 1px solid #c8ecdf; }
.ln-notice-success::before { content: ''; width: 1.1em; height: 1.1em; flex: none; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.ln-card-hint { margin: 0; padding: 0 1.25rem 1.1rem; color: var(--ln-muted); font-size: 0.88rem; }
.ln-attendance-page .ln-stat-row { grid-template-columns: repeat(auto-fit, minmax(160px, 220px)); }
.ln-attendance-page .ln-toolbar { border-bottom: 0; }
.ln-attendance-page .ln-toolbar + .ln-table-wrap { border-top: 1px solid var(--ln-border); }
@media (max-width: 767px) {
    .ln-attendance-page .ln-stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ln-attendance-page .ln-toolbar .ln-btn { flex: 1 1 auto; }
    .ln-card-hint { padding: 0 1rem 1rem; }
}

/* Branches (branches.html, add/edit_branch.html, branch_detail.html) */
.ln-i-building { --ln-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V5a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v16'/%3E%3Cpath d='M15 9h4a1 1 0 0 1 1 1v11'/%3E%3Cpath d='M2 21h20M8 8h3M8 12h3M8 16h3'/%3E%3C/svg%3E"); }
.ln-card.branch-information-card, .ln-card.branch-subscription-group, .ln-card.branch-deletion-card { padding: 0; }
.ln-branch-logo {
    display: inline-flex; align-items: center; justify-content: center; flex: none; width: 42px; height: 42px;
    border-radius: 10px; background: var(--ln-primary-soft); color: var(--ln-primary); overflow: hidden; border: 1px solid #dbe3f5;
}
.ln-branch-logo img { width: 100%; height: 100%; object-fit: cover; }
.ln-branch-logo[hidden], .ln-branch-logo img[hidden], .ln-branch-logo .ln-i[hidden] { display: none; }
.ln-branch-logo .ln-i { width: 20px; height: 20px; }
.ln-branch-logo-lg { width: 72px; height: 72px; border-radius: 14px; }
.ln-branch-logo-lg .ln-i { width: 32px; height: 32px; }
.ln-code { display: inline-block; padding: 0.1rem 0.45rem; border-radius: 6px; background: var(--ln-page); border: 1px solid var(--ln-border); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; font-weight: 600; color: var(--ln-text); letter-spacing: .02em; }
.ln-branch-page tr[data-branch-row][hidden], .ln-branch-page tr#branchNoMatch[hidden] { display: none !important; }
.ln-branch-page .ln-stat-row { grid-template-columns: repeat(auto-fit, minmax(150px, 220px)); }
.ln-branch-page .ln-badge + .ln-badge { margin-left: 0.3rem; }

.ln-branch-form { display: flex; flex-direction: column; gap: 1.25rem; max-width: 900px; }
.ln-branch-form-page .ln-form-grid input, .ln-branch-form-page .ln-form-grid select, .ln-branch-form-page .ln-form-grid textarea,
.ln-branch-form-page .branch-subscription-group select, .ln-branch-form-page .branch-subscription-group input { width: 100%; box-sizing: border-box; }
.ln-form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ln-form-note { display: block; margin: 0.35rem 0 0; color: var(--ln-muted); font-size: 0.84rem; line-height: 1.5; }
.ln-branch-allocation { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--ln-border); }
.ln-branch-allocation.ln-is-muted { opacity: .6; }
.ln-branch-allocation h3, .branch-group-allocation h4 { margin: 0 0 0.6rem; font-size: 0.92rem; font-weight: 700; color: var(--ln-text); }
.ln-card .branch-group-allocation { margin-top: 1rem; background: var(--ln-page); }
.ln-card .branch-group-allocation[hidden] { display: none; }
.ln-branch-group-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; }
.ln-branch-fieldset { margin: 0.75rem 0 0; padding: 0.8rem 1rem 1rem; border: 1px solid var(--ln-border); border-radius: var(--ln-radius-input); background: var(--ln-surface); min-width: 0; }
.ln-branch-fieldset legend { padding: 0 0.35rem; font-weight: 650; font-size: 0.88rem; color: var(--ln-text); }
.ln-logo-upload { display: flex; align-items: center; gap: 1rem; }
.ln-logo-upload input[type="file"] { width: auto !important; }

.ln-branch-hero { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; border-bottom: 1px solid var(--ln-border); }
.ln-branch-hero-text h2 { margin: 0; font-size: 1.2rem; font-weight: 750; color: var(--ln-text); overflow-wrap: anywhere; }
.ln-branch-hero-text p { margin: 0.3rem 0 0.5rem; color: var(--ln-muted); font-size: 0.88rem; }
.ln-branch-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ln-detail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem 1.25rem; margin: 0; padding: 1.25rem; }
.ln-detail-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; margin: 1rem 0; }
.ln-detail-item dt { color: var(--ln-muted); font-size: 0.76rem; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
.ln-detail-item dd { margin: 0.25rem 0 0; color: var(--ln-text); font-size: 0.92rem; font-weight: 550; overflow-wrap: anywhere; }
.ln-detail-wide { grid-column: span 2; }
.ln-branch-records { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.ln-danger-zone { border-color: #f1c7cb; }
.ln-danger-zone > .ln-card-header { background: var(--ln-danger-soft); border-bottom-color: #f1c7cb; border-radius: var(--ln-radius-card) var(--ln-radius-card) 0 0; }
.ln-danger-zone .ln-card-title { color: var(--ln-danger); }
.ln-callout { margin: 0 0 1rem; padding: 0.8rem 1rem; border-radius: var(--ln-radius-card); border: 1px solid var(--ln-border); background: var(--ln-page); }
.ln-callout strong { display: block; color: var(--ln-text); font-size: 0.92rem; }
.ln-callout p { margin: 0.25rem 0 0; color: var(--ln-muted); font-size: 0.88rem; line-height: 1.5; }
.ln-callout-warning { background: var(--ln-warning-soft); border-color: #f3dcbd; }
.ln-callout-warning strong { color: var(--ln-warning); }
.ln-callout-info { background: var(--ln-primary-soft); border-color: #c7d3f3; }
.ln-callout-info strong { color: var(--ln-primary); }
.ln-callout-danger { background: var(--ln-danger-soft); border-color: #f1c7cb; }
.ln-callout-danger strong { color: var(--ln-danger); }
.ln-branch-step { margin: 0 0 1.25rem; }
.ln-branch-step h3 { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.3rem; font-size: 1rem; font-weight: 700; color: var(--ln-text); }
.ln-branch-step > p { margin: 0 0 0.8rem; color: var(--ln-muted); font-size: 0.9rem; }
.ln-step-number { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ln-primary-soft); color: var(--ln-primary); font-size: 0.8rem; font-weight: 750; }
.ln-checklist { margin: 0; padding-left: 1.2rem; color: var(--ln-text); font-size: 0.9rem; line-height: 1.7; }
.ln-record-summary { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.5rem; margin: 0 0 0.6rem; }
.ln-record-summary > div { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.55rem 0.75rem; border: 1px solid var(--ln-border); border-radius: var(--ln-radius-input); background: var(--ln-surface); }
.ln-record-summary dt { color: var(--ln-muted); font-size: 0.85rem; }
.ln-record-summary dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ln-text); }
.ln-branch-password-form { display: flex; flex-direction: column; gap: 1rem; max-width: 460px; }
.ln-branch-password-form .form-group { margin: 0; }
.ln-branch-password-form input[type="password"] { width: 100%; box-sizing: border-box; }
.ln-form-actions-start { justify-content: flex-start; }
.ln-btn-danger-solid { background: var(--ln-danger); border-color: var(--ln-danger); color: #fff; }
.ln-btn-danger-solid:hover { background: #a8363f; border-color: #a8363f; color: #fff; }
.ln-branch-detail-page .branch-start-deletion-form { margin-top: 0; }

@media (max-width: 960px) {
    .ln-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ln-branch-records { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .ln-form-grid-3 { grid-template-columns: 1fr; }
    .ln-branch-page .ln-stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ln-branch-hero { padding: 1rem; }
    .ln-detail-grid { padding: 1rem; grid-template-columns: 1fr 1fr; }
    .ln-detail-wide { grid-column: 1 / -1; }
    .ln-detail-grid-2 { padding: 0; }
    .ln-branch-page .ln-table-stack td[data-label="Status"] { flex-wrap: wrap; justify-content: flex-end; }
    .ln-logo-upload { align-items: flex-start; }
    .ln-branch-password-form { max-width: none; }
}

/* Reports (reports.html) */
.ln-stat-warning .ln-stat-value { color: var(--ln-warning); }
.ln-report-filter { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)) 1fr; gap: 1rem 1.25rem; align-items: end; }
.ln-report-filter .form-group { margin: 0; }
.ln-report-filter input[type="date"] { width: 100%; box-sizing: border-box; }
.ln-report-filter-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ln-report-range-error { grid-column: 1 / -1; margin-top: -0.4rem; }
.ln-report-range-error[hidden] { display: none; }
.ln-report-nav { padding: 0; }
.ln-report-nav .ln-chip { text-decoration: none; }
.ln-report-section { scroll-margin-top: 1rem; }
.ln-report-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.6rem; margin: 0 0 0.75rem; font-size: 1.05rem; font-weight: 700; color: var(--ln-text); }
.ln-report-heading span { color: var(--ln-muted); font-size: 0.85rem; font-weight: 500; }
.ln-report-stats { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.ln-money { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ln-table .ln-col-amount { text-align: right; white-space: nowrap; }
.ln-report-page tr[data-report-row][hidden] { display: none !important; }
.ln-report-more { display: flex; justify-content: center; padding: 0.9rem; border-top: 1px solid var(--ln-border); }
.ln-report-more[hidden] { display: none; }
@media (max-width: 767px) {
    .ln-report-filter { grid-template-columns: 1fr 1fr; }
    .ln-report-filter-actions { grid-column: 1 / -1; }
    .ln-report-filter-actions .ln-btn { flex: 1 1 auto; }
    .ln-report-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ln-report-stats-money { grid-template-columns: 1fr; }
    .ln-report-nav { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.25rem; }
    .ln-report-nav .ln-chip { flex: none; }
    .ln-table .ln-col-amount { text-align: inherit; }
}
@media (max-width: 420px) {
    .ln-report-filter { grid-template-columns: 1fr; }
}

/* Pay Later review (Phase 6) */
.ln-paylater-nav { margin-bottom: 1rem; }
.ln-paylater-months { margin-top: 0.35rem; font-size: 0.84rem; }
.ln-paylater-months summary { cursor: pointer; color: var(--ln-primary); }
.ln-paylater-months ul { margin: 0.35rem 0 0; padding-left: 1.1rem; }
.ln-paylater-history { list-style: none; margin: 0; }
.ln-paylater-history li + li { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--ln-border); }
.ln-paylater-history p { margin: 0.2rem 0 0; }
.ln-paylater-decisions { gap: 1rem; align-items: start; }
.ln-paylater-cases { display: grid; gap: 1rem; }
.ln-paylater-case dl { margin: 0.75rem 0; }
.ln-paylater-case dd { margin: 0; }
.ln-paylater-definitions { margin-top: 0.75rem; font-size: 0.88rem; }
.ln-paylater-definitions dt { font-weight: 650; margin-top: 0.4rem; }
.ln-paylater-definitions dd { margin: 0; color: var(--ln-muted); }
.ln-paylater-decisions { display: grid; }
@media (max-width: 767px) { .ln-paylater-decisions { grid-template-columns: 1fr; } }

/* ======================================================================
   Phase 1 UI foundation: navigation icons, grouped sidebar, mobile drawer
   ====================================================================== */
.ln-i-home { --ln-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11 12 4l9 7'/%3E%3Cpath d='M5 10v10h5v-6h4v6h5V10'/%3E%3C/svg%3E"); }
.ln-i-seat { --ln-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 12V6a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v6'/%3E%3Cpath d='M4 12h16v4H4zM6 16v4M18 16v4'/%3E%3C/svg%3E"); }
.ln-i-calendar { --ln-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3.5 10h17'/%3E%3C/svg%3E"); }
.ln-i-wallet { --ln-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7a2 2 0 0 1 2-2h11v4'/%3E%3Cpath d='M4 7v11a2 2 0 0 0 2 2h14V9H6a2 2 0 0 1-2-2z'/%3E%3Cpath d='M16 14.5h.01'/%3E%3C/svg%3E"); }
.ln-i-hourglass { --ln-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12M6 21h12M7 3c0 5 10 5 10 9s-10 4-10 9M17 3c0 5-10 5-10 9s10 4 10 9'/%3E%3C/svg%3E"); }
.ln-i-book-open { --ln-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6c-2-1.5-5-2-8-1.5V19c3-.5 6 0 8 1.5 2-1.5 5-2 8-1.5V4.5c-3-.5-6 0-8 1.5z'/%3E%3Cpath d='M12 6v14.5'/%3E%3C/svg%3E"); }
.ln-i-bell { --ln-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9a6 6 0 0 1 12 0c0 6 2.5 7.5 2.5 7.5h-17S6 15 6 9z'/%3E%3Cpath d='M10 20a2 2 0 0 0 4 0'/%3E%3C/svg%3E"); }
.ln-i-chart { --ln-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16'/%3E%3Cpath d='M7 16v-5M12 16V7M17 16v-8'/%3E%3C/svg%3E"); }
.ln-i-badge { --ln-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='17' rx='2'/%3E%3Ccircle cx='12' cy='11' r='2.5'/%3E%3Cpath d='M8 17.5c.7-1.8 2.2-2.7 4-2.7s3.3.9 4 2.7M10 4v2h4V4'/%3E%3C/svg%3E"); }
.ln-i-card { --ln-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2'/%3E%3Cpath d='M3 10h18M7 15h4'/%3E%3C/svg%3E"); }
.ln-i-settings { --ln-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3M5.3 5.3l2.1 2.1M16.6 16.6l2.1 2.1M5.3 18.7l2.1-2.1M16.6 7.4l2.1-2.1'/%3E%3C/svg%3E"); }
.ln-i-menu { --ln-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E"); }

/* Sidebar items and groups */
.sidebar .nav-icon.ln-i { width: 19px; height: 19px; opacity: .9; }
.sidebar .nav-item.active .nav-icon.ln-i { opacity: 1; }
.sidebar .brand-logo .ln-i { width: 22px; height: 22px; color: #fff; }
.nav-group { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.nav-group-label { margin: 0; padding: 6px 13px 2px; color: #7c869a; font-size: 0.7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sidebar .nav-item.active { color: #fff; font-weight: 650; }
.sidebar .logout-btn { display: flex; align-items: center; gap: 13px; padding: 11px 13px; font-size: 14px; font-weight: 600; text-decoration: none; }
.sidebar .logout-btn .nav-icon.ln-i { width: 18px; height: 18px; }
.notification-btn .ln-i { width: 19px; height: 19px; }

/* Skip link: visible only when focused with the keyboard */
.ln-skip-link { position: absolute; left: 12px; top: -48px; z-index: 1000; padding: 10px 14px; border-radius: 8px; background: var(--ln-primary); color: #fff; font-weight: 700; text-decoration: none; }
.ln-skip-link:focus { top: 12px; outline: 3px solid #fff; }
#main-content:focus { outline: none; }

/* Menu button: only shown where the sidebar becomes a drawer */
.ln-nav-toggle { display: none; flex: none; width: 42px; height: 42px; place-items: center; border: 1px solid var(--ln-border); border-radius: 10px; background: var(--ln-surface); color: var(--ln-text); cursor: pointer; }
.ln-nav-toggle .ln-i { width: 22px; height: 22px; }
.ln-nav-toggle:focus-visible { outline: 3px solid rgba(49, 87, 200, .35); outline-offset: 2px; }
.ln-nav-backdrop { position: fixed; inset: 0; z-index: 899; background: rgba(15, 23, 42, .45); }
.ln-nav-backdrop[hidden] { display: none; }

@media (max-width: 767px) {
    .ln-nav-toggle { display: grid; }
    .topbar { display: flex; align-items: center; }

    /* The sidebar becomes an off-canvas drawer (replaces the horizontal strip). */
    .sidebar {
        position: fixed; top: 0; bottom: 0; left: 0; z-index: 900;
        width: min(300px, 86vw); min-height: 0; max-height: 100vh;
        padding: 18px 14px; gap: 6px;
        overflow-y: auto; overscroll-behavior: contain;
        transform: translateX(-105%); visibility: hidden;
        transition: transform .22s ease, visibility 0s linear .22s;
    }
    body.ln-nav-open .sidebar { transform: none; visibility: visible; transition: transform .22s ease; }
    body.ln-nav-open { overflow: hidden; }
    .sidebar-nav, .sidebar-bottom { flex-direction: column; gap: 4px; overflow: visible; }
    .sidebar-nav .nav-item, .sidebar-bottom .nav-item, .sidebar-bottom .logout-btn { flex: 0 0 auto; white-space: normal; min-height: 44px; }
    .sidebar-bottom { margin-top: 14px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .08); }
    .brand-info h2 { max-width: 190px; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .sidebar, body.ln-nav-open .sidebar { transition: none; }
}

/* ======================================================================
   Phase 2: shared authentication / public page layout (auth_base.html)
   Self-contained: these pages do not load style.css.
   ====================================================================== */
.ln-auth-body {
    margin: 0; min-height: 100vh; box-sizing: border-box;
    background: radial-gradient(1200px 500px at 50% -10%, #e8eefc 0%, rgba(232, 238, 252, 0) 70%), var(--ln-page);
    color: var(--ln-text); font-family: var(--ln-font); font-size: 15px; line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
.ln-auth-body *, .ln-auth-body *::before, .ln-auth-body *::after { box-sizing: border-box; }
.ln-auth-body a { color: var(--ln-primary); font-weight: 600; text-decoration: none; }
.ln-auth-body a:hover { text-decoration: underline; }
.ln-auth-body :is(a, button, input, select, textarea):focus-visible { outline: 3px solid var(--ln-focus); outline-offset: 2px; }
.ln-auth { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 40px 16px 28px; }
.ln-auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; color: var(--ln-text); font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; }
.ln-auth-brand:hover { text-decoration: none; }
.ln-auth-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--ln-primary); color: #fff; box-shadow: 0 6px 16px rgba(49, 87, 200, .28); }
.ln-auth-mark .ln-i { width: 22px; height: 22px; }

/* The card: new pages use .ln-auth-card; signup pages keep .auth-card */
.ln-auth-card, .ln-auth .auth-card {
    width: 100%; max-width: 440px; padding: 32px;
    background: var(--ln-surface); border: 1px solid var(--ln-border); border-radius: var(--ln-radius-dialog);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 32px rgba(16, 24, 40, .06);
}
.ln-auth .auth-container { width: 100%; display: flex; justify-content: center; }
.ln-auth .auth-card { max-width: 640px; }
.ln-auth-card.is-centered { text-align: center; }
.ln-auth-card h1, .ln-auth .auth-header h2 { margin: 0 0 6px; font-size: 1.45rem; line-height: 1.25; letter-spacing: -.02em; }
.ln-auth-lead, .ln-auth .auth-header p { margin: 0 0 22px; color: var(--ln-muted); }
.ln-auth .auth-header { text-align: center; }
.ln-auth-card p { margin: 0 0 14px; }
.ln-auth-muted { color: var(--ln-muted); font-size: .92rem; }

/* Status icon at the top of message pages */
.ln-auth-status { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%; background: var(--ln-primary-soft); color: var(--ln-primary); }
.ln-auth-status .ln-i { width: 26px; height: 26px; }
.ln-auth-status.is-success { background: var(--ln-success-soft); color: var(--ln-success); }
.ln-auth-status.is-danger { background: var(--ln-danger-soft); color: var(--ln-danger); }
.ln-auth-code { margin: 0 0 4px; color: var(--ln-primary); font-size: 3rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; }

/* Fields */
.ln-auth .form-group, .ln-auth-field { margin-bottom: 16px; text-align: left; }
.ln-auth .form-group label, .ln-auth-field label { display: block; margin-bottom: 6px; color: var(--ln-text); font-size: .88rem; font-weight: 650; }
.ln-auth .form-group label span { color: var(--ln-muted); font-weight: 500; }
.ln-auth :is(.form-group, .ln-auth-field) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
    width: 100%; min-height: 46px; padding: 10px 12px;
    border: 1px solid var(--ln-border-strong, #cbd4e1); border-radius: var(--ln-radius-input);
    background: #fff; color: var(--ln-text); font: inherit; font-size: .95rem;
}
.ln-auth :is(.form-group, .ln-auth-field) textarea { min-height: 88px; resize: vertical; }
.ln-auth :is(.form-group, .ln-auth-field) :is(input, select, textarea):focus { outline: none; border-color: var(--ln-primary); box-shadow: 0 0 0 3px var(--ln-focus); }
.ln-auth :is(.form-group, .ln-auth-field) input[type="file"] { width: 100%; padding: 8px; border: 1px dashed var(--ln-border-strong, #cbd4e1); border-radius: var(--ln-radius-input); background: var(--ln-page); font: inherit; font-size: .9rem; }
.ln-auth :is(.form-group, .ln-auth-field) small, .ln-auth-help { display: block; margin-top: 5px; color: var(--ln-muted); font-size: .82rem; line-height: 1.45; }
.ln-auth .errorlist { margin: 6px 0 0; padding: 0; list-style: none; color: var(--ln-danger); font-size: .84rem; font-weight: 600; }
.ln-auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -4px 0 16px; font-size: .88rem; }

/* Sections inside the signup card */
.ln-auth .auth-section { text-align: left; }
.ln-auth .auth-section + .auth-section { margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--ln-border); }
.ln-auth .auth-section h3 { margin: 0 0 14px; font-size: 1rem; }

/* Messages */
.ln-auth-alert, .ln-auth .auth-error { margin: 0 0 18px; padding: 11px 14px; border: 1px solid #f1c7cb; border-radius: var(--ln-radius-input); background: var(--ln-danger-soft); color: var(--ln-danger); font-size: .9rem; font-weight: 600; text-align: left; }
.ln-auth-alert.is-success { border-color: #c8ecdf; background: var(--ln-success-soft); color: var(--ln-success); }
.ln-auth-alert.is-info { border-color: #c7d3f3; background: var(--ln-primary-soft); color: var(--ln-primary); }
.ln-auth-note { margin: 0 0 18px; padding: 14px; border-radius: var(--ln-radius-card); background: var(--ln-page); border: 1px solid var(--ln-border); text-align: left; }
.ln-auth-note strong { display: block; margin-bottom: 4px; }

/* Buttons */
.ln-auth-btn, .ln-auth .primary-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; min-height: 46px; padding: 10px 16px; border: 1px solid transparent; border-radius: 10px;
    background: var(--ln-primary); color: #fff; font: inherit; font-size: .95rem; font-weight: 700; cursor: pointer; text-decoration: none;
}
.ln-auth-btn:hover, .ln-auth .primary-btn:hover { background: var(--ln-primary-hover); text-decoration: none; color: #fff; }
.ln-auth-btn:disabled { opacity: .55; cursor: not-allowed; }
.ln-auth-btn.is-secondary { background: #fff; color: var(--ln-text); border-color: var(--ln-border-strong, #cbd4e1); }
.ln-auth-btn.is-secondary:hover { background: var(--ln-page); color: var(--ln-text); }
.ln-auth-actions { display: grid; gap: 10px; margin-top: 6px; }
.ln-auth-switch { margin: 18px 0 0; color: var(--ln-muted); font-size: .9rem; text-align: center; }
.ln-auth-switch div { margin-top: 6px; }
.ln-auth-footer { margin: 22px 0 0; color: var(--ln-muted); font-size: .8rem; text-align: center; }

/* Password show/hide (login and signup keep their own ids/JS) */
.ln-auth :is(.password-control, .signup-password-control) { position: relative; }
.ln-auth :is(.password-control, .signup-password-control) input { padding-right: 48px !important; }
.ln-auth :is(.password-toggle, .password-visibility-toggle) {
    position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
    display: grid; place-items: center; width: 36px; height: 36px; padding: 6px;
    border: 0; border-radius: 8px; background: transparent; color: var(--ln-muted); cursor: pointer;
}
.ln-auth :is(.password-toggle, .password-visibility-toggle):hover { background: var(--ln-primary-soft); color: var(--ln-primary); }
.ln-auth :is(.password-toggle, .password-visibility-toggle) svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ln-auth .password-eye-off, .ln-auth .password-toggle.is-visible .password-eye { display: none; }
.ln-auth .password-toggle.is-visible .password-eye-off { display: block; }

/* Google sign-up pieces */
.ln-auth .google-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 46px; margin: 4px 0 0; border: 1px solid var(--ln-border-strong, #cbd4e1); border-radius: 10px; background: #fff; color: var(--ln-text); font-weight: 700; }
.ln-auth .google-btn:hover { background: var(--ln-page); text-decoration: none; }
.ln-auth .google-icon, .ln-auth .google-badge { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ln-primary-soft); color: var(--ln-primary); font-weight: 800; font-size: .85rem; }
.ln-auth .google-badge { width: 44px; height: 44px; margin: 0 auto 12px; font-size: 1.1rem; }
.ln-auth .signup-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0 8px; color: var(--ln-muted); font-size: .78rem; font-weight: 700; }
.ln-auth .signup-divider::before, .ln-auth .signup-divider::after { content: ''; flex: 1; height: 1px; background: var(--ln-border); }
.ln-auth .manual-signup-text { margin-bottom: 18px; font-size: .9rem; }
.ln-auth .verified-box { margin: 0 0 18px; padding: 12px 14px; border: 1px solid #c8ecdf; border-radius: var(--ln-radius-card); background: var(--ln-success-soft); text-align: left; }
.ln-auth .verified-title { color: var(--ln-success); font-weight: 700; margin-bottom: 4px; }
.ln-auth .verified-info { display: flex; flex-wrap: wrap; gap: 6px 10px; color: var(--ln-text); font-size: .9rem; }
.ln-auth .back-login { margin-top: 18px; color: var(--ln-muted); text-align: center; font-size: .9rem; }
.ln-auth .signup-logo-preview { margin-top: 10px; }
.ln-auth .signup-logo-preview img { width: 72px; height: 72px; object-fit: contain; border: 1px solid var(--ln-border); border-radius: 12px; background: #fff; }
.ln-auth .signup-logo-preview[hidden] { display: none; }
.ln-auth .signup-submit { margin-top: 6px; }
.ln-auth .cf-turnstile { min-height: 65px; }

/* Signup: two fields per row on wider screens */
@media (min-width: 641px) {
    .ln-auth .auth-section { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
    .ln-auth .auth-section > h3, .ln-auth .auth-section > .signup-logo-field, .ln-auth .auth-section > button,
    .ln-auth .auth-section > .form-group:has(textarea) { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .ln-auth { padding-top: 24px; }
    .ln-auth-card, .ln-auth .auth-card { padding: 22px 18px; border-radius: var(--ln-radius-card); }
}
.ln-auth-messages { width: 100%; max-width: 440px; }

/* ======================================================================
   Phase 2: dashboard (built on ln-page / ln-card / ln-stat)
   ====================================================================== */
.ln-dash-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.85rem; }
.ln-dash-stat {
    position: relative; display: flex; flex-direction: column; gap: 2px; min-height: 128px;
    padding: 1rem 1.1rem; border: 1px solid var(--ln-border); border-radius: var(--ln-radius-card);
    background: var(--ln-surface); color: var(--ln-text); text-decoration: none;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
a.ln-dash-stat:hover { border-color: #c7d3f3; box-shadow: 0 6px 18px rgba(16, 24, 40, .07); transform: translateY(-1px); text-decoration: none; }
a.ln-dash-stat:focus-visible { outline: 3px solid rgba(49, 87, 200, .35); outline-offset: 2px; }
.ln-dash-stat-icon { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 8px; border-radius: 10px; background: var(--ln-primary-soft); color: var(--ln-primary); }
.ln-dash-stat-icon .ln-i { width: 19px; height: 19px; }
.ln-dash-stat .ln-stat-value { font-size: 1.5rem; }
.ln-dash-stat-hint { color: var(--ln-muted); font-size: 0.82rem; }
.ln-dash-stat.is-success .ln-dash-stat-icon { background: var(--ln-success-soft); color: var(--ln-success); }
.ln-dash-stat.is-danger .ln-dash-stat-icon { background: var(--ln-danger-soft); color: var(--ln-danger); }
.ln-dash-stat.is-danger .ln-stat-value { color: var(--ln-danger); }

.ln-dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; align-items: start; }
.ln-dash-grid:empty { display: none; }

.ln-dash-attention, .ln-dash-activity { list-style: none; margin: 0; padding: 0.35rem 1.25rem 0.75rem; }
.ln-dash-attention li, .ln-dash-activity li { display: flex; align-items: center; gap: 0.85rem; padding: 0.8rem 0; }
.ln-dash-attention li + li, .ln-dash-activity li + li { border-top: 1px solid var(--ln-border); }
.ln-dash-attention li > div, .ln-dash-activity li > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ln-dash-attention li > div span, .ln-dash-activity li > div span { color: var(--ln-muted); font-size: 0.85rem; }
.ln-dash-attention-icon { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 10px; }
.ln-dash-attention-icon .ln-i { width: 19px; height: 19px; }
.ln-dash-attention-icon.is-danger { background: var(--ln-danger-soft); color: var(--ln-danger); }
.ln-dash-attention-icon.is-warning { background: var(--ln-warning-soft); color: var(--ln-warning); }
.ln-dash-activity li > strong { white-space: nowrap; }

.ln-dash-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.65rem; }
.ln-dash-action {
    display: flex; align-items: center; gap: 0.6rem; min-height: 52px; padding: 0.7rem 0.85rem;
    border: 1px solid var(--ln-border); border-radius: 10px; background: var(--ln-page);
    color: var(--ln-text); font-weight: 650; font-size: 0.92rem; text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}
.ln-dash-action .ln-i { width: 19px; height: 19px; color: var(--ln-primary); }
.ln-dash-action:hover { background: var(--ln-primary-soft); border-color: #c7d3f3; text-decoration: none; }
.ln-dash-action:focus-visible { outline: 3px solid rgba(49, 87, 200, .35); outline-offset: 2px; }

@media (max-width: 960px) {
    .ln-dash-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .ln-dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
    .ln-dash-stat { min-height: 116px; padding: 0.85rem; }
    .ln-dash-stat .ln-stat-value { font-size: 1.2rem; overflow-wrap: anywhere; }
    .ln-dash-attention li { flex-wrap: wrap; }
    .ln-dash-attention li .ln-btn { margin-left: calc(38px + 0.85rem); }
    .ln-dashboard .ln-page-actions { width: 100%; }
    .ln-dashboard .ln-page-actions .ln-btn { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .ln-dash-stat, .ln-dash-action { transition: none; }
    a.ln-dash-stat:hover { transform: none; }
}

/* ======================================================================
   Phase 3: members module
   ====================================================================== */
.ln-member-form { display: flex; flex-direction: column; gap: 1.25rem; }
.ln-member-form :is(input, select)[readonly], .ln-member-form select:disabled {
    background: var(--ln-page); color: var(--ln-muted); border-style: dashed; cursor: not-allowed;
}
.ln-member-form .ln-callout { margin: 0; }
.ln-member-form-actions { padding: 0.25rem 0 0.5rem; }
@media (max-width: 640px) {
    .ln-member-form .ln-form-grid { grid-template-columns: 1fr; }
    .ln-member-form .ln-span-2 { grid-column: auto; }
    .ln-member-form-actions { flex-direction: column-reverse; }
    .ln-member-form-actions .ln-btn { width: 100%; justify-content: center; }
}

/* Member detail */
.ln-member-detail { gap: 1rem; }
.ln-member-detail .member-summary-heading { display: flex; align-items: flex-start; gap: 1rem; }
.ln-member-detail .member-summary-title { flex: 1 1 auto; min-width: 0; }
.ln-member-detail .member-summary-title .ln-page-title { overflow-wrap: anywhere; }
.ln-member-detail .member-summary-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.ln-member-detail .member-actions { justify-content: flex-end; align-items: center; }
.ln-member-detail .member-actions form { margin: 0; display: inline-flex; }
.ln-member-detail .member-summary-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin: 1.1rem 0 0; }
.ln-member-detail .member-summary-stats .ln-stat { margin: 0; }
.ln-member-detail .member-summary-stats dd { margin: 0.2rem 0 0; font-size: 1.15rem; }
.ln-member-detail .member-renew-callout { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 1rem 0 0; }
.ln-member-detail .member-renew-callout p { margin: 0.15rem 0 0; }
.ln-member-detail .member-section-nav { display: flex; gap: 0.25rem; padding: 0.35rem; overflow-x: auto; }
.ln-member-detail .member-tab { font-size: 0.88rem; }
.ln-member-detail .member-overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.ln-member-detail .member-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ln-member-detail .member-pricing-list { display: grid; gap: 0; }
.ln-member-detail .member-pricing-row { display: grid; grid-template-columns: minmax(180px, 1.3fr) 1fr 1fr auto; gap: 0.75rem; align-items: end; padding: 1rem 1.25rem; }
.ln-member-detail .member-pricing-row + .member-pricing-row { border-top: 1px solid var(--ln-border); }
.ln-member-detail .member-pricing-row .form-group { margin: 0; }
.ln-member-detail .member-pricing-plan { display: flex; flex-direction: column; gap: 0.2rem; }
.ln-member-detail .member-pricing-plan span { color: var(--ln-muted); font-size: 0.85rem; }
.ln-member-detail .member-pricing-plan .member-special-active { align-self: flex-start; color: var(--ln-primary); }
.ln-member-detail .member-pricing-actions { display: flex; gap: 0.4rem; }
@media (max-width: 960px) {
    .ln-member-detail .member-summary-heading { flex-wrap: wrap; }
    .ln-member-detail .member-actions { width: 100%; justify-content: flex-start; }
    .ln-member-detail .member-summary-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ln-member-detail .member-overview-grid { grid-template-columns: 1fr; }
    .ln-member-detail .member-pricing-row { grid-template-columns: 1fr 1fr; }
    .ln-member-detail .member-pricing-plan, .ln-member-detail .member-pricing-actions { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .ln-member-detail .member-actions .ln-btn, .ln-member-detail .member-actions form { flex: 1 1 100%; }
    .ln-member-detail .member-actions .ln-btn { justify-content: center; width: 100%; }
    .ln-member-detail .member-info-grid, .ln-member-detail .member-pricing-row { grid-template-columns: 1fr; }
}

/* Member app credentials */
.ln-credentials-list { display: grid; gap: 0.9rem; margin: 0; }
.ln-credentials-list dt { color: var(--ln-muted); font-size: 0.78rem; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
.ln-credentials-list dd { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0.3rem 0 0; font-weight: 600; }
.ln-credentials-list .ln-code { font-size: 1rem; padding: 0.3rem 0.6rem; }
.ln-credentials-warning { padding-top: 0; }
.ln-credentials-warning .ln-callout { margin: 0; }

/* ======================================================================
   Phase 4: staff forms (Add / Edit staff)
   ====================================================================== */
.ln-staff-form { display: flex; flex-direction: column; gap: 1.25rem; }
.ln-staff-form :is(input, select)[readonly], .ln-staff-form :is(input, select):disabled {
    background: var(--ln-page); color: var(--ln-muted); border-style: dashed; cursor: not-allowed;
}
.ln-staff-form .ln-callout { margin: 0; }
.ln-staff-form .permissions-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.85rem; }
.ln-staff-form .permission-group { margin: 0; padding: 0; border: 1px solid var(--ln-border); border-radius: var(--ln-radius-card); background: var(--ln-surface); overflow: hidden; }
.ln-staff-form .permission-group-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 0; padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--ln-border); background: var(--ln-page); }
.ln-staff-form .permission-group-header h4 { margin: 0; font-size: 0.92rem; color: var(--ln-text); }
.ln-staff-form .permission-list { display: flex; flex-direction: column; gap: 0; padding: 0.25rem 0; }
.ln-staff-form .permission-item { display: flex; align-items: flex-start; gap: 0.65rem; margin: 0; padding: 0.55rem 0.85rem; border: 0; border-radius: 0; background: transparent; cursor: pointer; }
.ln-staff-form .permission-item:hover { background: var(--ln-primary-soft); }
.ln-staff-form .permission-item input[type="checkbox"] { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--ln-primary); }
.ln-staff-form .permission-content strong { display: block; font-size: 0.9rem; color: var(--ln-text); }
.ln-staff-form .permission-content span { display: block; color: var(--ln-muted); font-size: 0.82rem; line-height: 1.4; }
.ln-staff-form .permission-empty { padding: 1rem; color: var(--ln-muted); }
.ln-staff-form-actions { padding: 0.25rem 0 0.5rem; }
@media (max-width: 640px) {
    .ln-staff-form .ln-form-grid { grid-template-columns: 1fr; }
    .ln-staff-form .ln-span-2 { grid-column: auto; }
    .ln-staff-form-actions { flex-direction: column-reverse; }
    .ln-staff-form-actions .ln-btn { width: 100%; justify-content: center; }
}

/* ======================================================================
   Phase 5: settings page
   ====================================================================== */
.settings-nav-item > .ln-i:first-child { width: 18px; height: 18px; flex: none; }
.settings-navigation-label { text-transform: uppercase; letter-spacing: .08em; }
.settings-nav-item[aria-selected="true"] > .ln-i { color: var(--ln-primary); }
.settings-branch-picker { margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--ln-border); }
.settings-section .ln-required { margin-left: 0.15rem; }
.settings-sensitive-note { margin: 0 0 1.1rem; }
.settings-sensitive-note p { margin: 0.25rem 0 0; }
.settings-toggle { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; font-weight: 650; }
.settings-toggle input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--ln-primary); }
.settings-category-add { display: flex; gap: 0.6rem; }
.settings-category-add input { flex: 1; min-width: 0; }
.settings-category-existing { margin-top: 1.25rem; }
.settings-subheading { margin: 0 0 0.6rem; font-size: 0.92rem; color: var(--ln-text); }
.settings-category-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.settings-category-list .category-container {
    display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.35rem 0.3rem 0.75rem;
    border: 1px solid var(--ln-border); border-radius: 999px; background: var(--ln-page); font-size: 0.9rem; font-weight: 600;
}
.settings-category-list .category-delete-btn {
    display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: var(--ln-danger); cursor: pointer;
}
.settings-category-list .category-delete-btn:hover { background: var(--ln-danger-soft); }
.settings-category-list .category-delete-btn:focus-visible { outline: 3px solid rgba(194, 65, 75, .3); outline-offset: 1px; }
.settings-category-list .category-delete-btn .ln-i { width: 16px; height: 16px; }
.settings-category-empty { color: var(--ln-muted); }
.settings-savebar .ln-btn { min-height: 44px; padding-inline: 1.4rem; white-space: nowrap; }
@media (max-width: 767px) {
    .settings-savebar .ln-btn { width: 100%; justify-content: center; }
    .settings-category-add { flex-direction: column; }
}

/* ======================================================================
   Phase 6: remaining pages (profile, seats, holidays, reminders, fines,
   member portal). Built on the shared tokens and components.
   ====================================================================== */
.ln-narrow-page { max-width: 760px; }
.ln-chips-flush { padding: 0; }
.ln-pagination { display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 1rem; color: var(--ln-muted); font-size: 0.9rem; }
.ln-filter-bar { align-items: end; }
.ln-filter-bar .form-group { margin: 0; }

/* Profile */
.ln-profile-grid { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.ln-profile-identity .ln-card-body { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; }
.ln-profile-identity h2 { margin: 0.35rem 0 0; font-size: 1.15rem; }
.ln-profile-identity .ln-avatar-lg { width: 96px; height: 96px; font-size: 2rem; }
.ln-profile-main { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.ln-profile-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ln-profile-libraries { list-style: none; margin: 0; padding: 0.25rem 1.25rem 0.75rem; }
.ln-profile-libraries li { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.75rem 0; }
.ln-profile-libraries li + li { border-top: 1px solid var(--ln-border); }
.ln-profile-libraries .ln-i { width: 20px; height: 20px; margin-top: 2px; color: var(--ln-primary); }
.ln-profile-libraries li > div { display: flex; flex-direction: column; }
.ln-profile-password .ln-card-body { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.ln-profile-form { display: flex; flex-direction: column; gap: 1.25rem; }
.ln-profile-photo-row { display: flex; align-items: center; gap: 1.25rem; }
.ln-profile-photo-row .form-group { flex: 1; margin: 0; }
.ln-profile-photo-row .ln-avatar-lg .ln-i { width: 30px; height: 30px; }

/* Seats */
.ln-seat-rooms { display: flex; flex-direction: column; gap: 1.5rem; }
.ln-seat-room[hidden] { display: none; }
.ln-seat-room-title { margin: 0 0 0.75rem; font-size: 0.95rem; color: var(--ln-text); }
.ln-seat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.65rem; list-style: none; margin: 0; padding: 0; }
.ln-seat { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.75rem; border: 1px solid var(--ln-border); border-radius: var(--ln-radius-card); background: var(--ln-surface); }
.ln-seat[hidden] { display: none; }
.ln-seat.is-vacant { border-color: #c8ecdf; background: var(--ln-success-soft); }
.ln-seat-head { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; }
.ln-seat-number { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.ln-seat-member { font-weight: 600; font-size: 0.88rem; overflow-wrap: anywhere; }
.ln-seat-note { font-size: 0.78rem; }
.ln-seat form { margin: 0; }
.ln-seat-delete { color: var(--ln-danger); padding-inline: 0.4rem; }

/* Holidays */
.ln-holiday-form { display: block; }
.ln-holiday-form-actions { border-top: 1px solid var(--ln-border); }
.ln-holidays-page .holiday-row-cancelled td { opacity: .7; }

/* Reminders / fines / reconciliation */
.ln-review-form { display: flex; flex-direction: column; gap: 0.5rem; min-width: 240px; padding: 0.75rem; border: 1px solid var(--ln-border); border-radius: var(--ln-radius-card); background: var(--ln-page); }
.ln-review-form .form-group { margin: 0; }
.ln-review-form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; font-weight: 600; }
.ln-audit-details { margin-top: 0.4rem; font-size: 0.85rem; }
.ln-audit-details summary { cursor: pointer; color: var(--ln-primary); }
.ln-audit-details ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.ln-adjust-form { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.ln-adjust-form :is(select, input) { min-width: 0; flex: 1 1 110px; }
.ln-adjust-form-wide { align-items: end; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--ln-border); }
.ln-adjust-form-wide .form-group { margin: 0; flex: 1 1 160px; }
.ln-fine-breakdown { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.6rem; margin: 0 0 0.75rem; }
.ln-fine-breakdown > div { padding: 0.6rem 0.75rem; border-radius: 10px; background: var(--ln-page); }
.ln-fine-breakdown dt { color: var(--ln-muted); font-size: 0.78rem; font-weight: 650; }
.ln-fine-breakdown dd { margin: 0.15rem 0 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.ln-recon-details { padding: 0; margin-bottom: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ln-recon-capture { margin: 0 0 1rem; padding: 0.75rem 1rem; border: 1px solid #f3dcbd; border-radius: var(--ln-radius-card); background: var(--ln-warning-soft); }
.ln-recon-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.75rem; margin-top: 0.75rem; }
.ln-recon-history { margin: 0 0 1rem; padding-left: 1.1rem; font-size: 0.88rem; }
.ln-recon-history li + li { margin-top: 0.5rem; }
.ln-recon-history pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.78rem; }

/* Member portal */
.ln-member-portal-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ln-member-portal-period { margin: 0 0 0.75rem; color: var(--ln-muted); }
.ln-member-portal-pay { display: grid; gap: 0.75rem; max-width: 420px; margin-top: 1rem; }
.ln-member-portal-pay .form-group { margin: 0; }
.ln-member-portal-cash { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.6rem 0.75rem; border-radius: 10px; background: var(--ln-page); }
.ln-member-portal-icon { background: var(--ln-primary-soft); color: var(--ln-primary); }

@media (max-width: 960px) {
    .ln-profile-grid { grid-template-columns: 1fr; }
    .ln-recon-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .ln-profile-details, .ln-member-portal-details, .ln-recon-details { grid-template-columns: 1fr; }
    .ln-profile-photo-row { flex-direction: column; align-items: flex-start; }
    .ln-seat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ======================================================================
   My Subscription page (ln-sub-*). Group-allocation pieces keep their
   classes from subscription.css.
   ====================================================================== */
.ln-sub-page { gap: 1.25rem; }
.ln-sub-library-picker { display: flex; align-items: center; gap: 0.5rem; }
.ln-sub-library-picker label { font-weight: 650; font-size: 0.88rem; }
.ln-sub-library-picker select { min-width: 200px; }
.ln-sub-top { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr); gap: 1.25rem; align-items: stretch; }
.ln-sub-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; align-items: start; }
.ln-sub-eyebrow { margin: 0; color: var(--ln-muted); font-size: 0.75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* Plan card */
.ln-sub-plan { border-color: #c7d3f3; background: linear-gradient(180deg, var(--ln-primary-soft) 0%, var(--ln-surface) 55%); }
.ln-sub-plan > .ln-card-body, .ln-sub-redeem > .ln-card-body { display: flex; flex-direction: column; gap: 1rem; height: 100%; }
.ln-sub-plan-head { display: flex; align-items: center; gap: 0.85rem; }
.ln-sub-plan-title { flex: 1; min-width: 0; }
.ln-sub-plan-title h2 { margin: 0.15rem 0 0; font-size: 1.45rem; line-height: 1.25; letter-spacing: -.02em; overflow-wrap: anywhere; }
.ln-sub-plan-icon { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 12px; background: var(--ln-primary); color: #fff; }
.ln-sub-plan-icon .ln-i { width: 22px; height: 22px; }
.ln-sub-plan-icon.is-accent { background: var(--ln-success-soft); color: var(--ln-success); }
.ln-sub-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.6rem; margin: 0; }
.ln-sub-facts > div { padding: 0.65rem 0.8rem; border: 1px solid var(--ln-border); border-radius: 10px; background: var(--ln-surface); }
.ln-sub-facts dt { color: var(--ln-muted); font-size: 0.76rem; font-weight: 650; }
.ln-sub-facts dd { margin: 0.2rem 0 0; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ln-sub-bar { height: 10px; border-radius: 999px; background: var(--ln-border); overflow: hidden; }
.ln-sub-bar > span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--ln-primary); transition: width .3s ease; }
.ln-sub-bar.is-warning > span { background: var(--ln-warning); }
.ln-sub-bar.is-danger > span { background: var(--ln-danger); }
.ln-sub-period .ln-form-note { margin-top: 0.4rem; }
[data-plan-notices]:empty { display: none; }
[data-plan-notices] { display: grid; gap: 0.6rem; }
[data-plan-notices] .ln-callout { margin: 0; }
[data-plan-notices] .ln-callout p { margin: 0.2rem 0 0; }
.ln-sub-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; }
.ln-sub-actions[hidden] { display: none; }

/* Redeem card */
.ln-sub-redeem .ln-card-title { margin: 0; font-size: 1.15rem; }
.ln-sub-redeem .ln-card-subtitle { margin: 0; }
.ln-sub-redeem-form { display: flex; flex-direction: column; gap: 0.6rem; }
.ln-sub-redeem-form .form-group { margin: 0; }
.ln-sub-redeem-form input { text-transform: uppercase; letter-spacing: .06em; font-weight: 650; }
.ln-sub-redeem-form input::placeholder { text-transform: none; letter-spacing: normal; font-weight: 400; }
.ln-sub-feedback { margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--ln-muted); }
.ln-sub-feedback:empty { display: none; }
.ln-sub-feedback.is-success { padding: 0.6rem 0.75rem; border-radius: 10px; background: var(--ln-success-soft); color: var(--ln-success); }
.ln-sub-feedback.is-error { padding: 0.6rem 0.75rem; border-radius: 10px; background: var(--ln-danger-soft); color: var(--ln-danger); }
.ln-sub-steps { margin: 0; padding-left: 1.1rem; color: var(--ln-muted); font-size: 0.85rem; line-height: 1.6; }

/* Storage */
.ln-sub-storage-summary { display: grid; gap: 0.5rem; margin-bottom: 0.75rem; }
.ln-sub-storage-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.ln-sub-storage-big { margin: 0; font-size: 1.05rem; }
.ln-sub-storage-big strong { font-size: 1.4rem; }
.ln-sub-storage-free { color: var(--ln-success); font-weight: 700; }
[data-storage-alerts] .ln-callout { margin: 0 0 0.75rem; }
[data-storage-alerts] .ln-callout p { margin: 0.2rem 0 0; }
.ln-sub-more { margin: 0.25rem 0 0; }
.ln-sub-more summary { cursor: pointer; color: var(--ln-primary); font-weight: 650; font-size: 0.9rem; }
.ln-sub-more[open] summary { margin-bottom: 0.5rem; }
.ln-sub-toggle { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--ln-border); }
.ln-sub-toggle form { margin: 0; }
.ln-sub-toggle .ln-form-note { margin: 0.2rem 0 0; }

/* Detail rows, payments, notices */
.ln-sub-detail-list { display: grid; gap: 0; }
.ln-sub-detail { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--ln-border); font-size: 0.9rem; }
.ln-sub-detail:last-child { border-bottom: 0; }
.ln-sub-detail-label { color: var(--ln-muted); }
.ln-sub-detail-value { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.ln-sub-payments { list-style: none; margin: 0; padding: 0; }
.ln-sub-payments li { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.7rem 0; }
.ln-sub-payments li + li { border-top: 1px solid var(--ln-border); }
.ln-sub-payment-info { display: flex; flex-direction: column; min-width: 0; }
.ln-sub-payment-side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; text-align: right; }
.ln-sub-payment-amount { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ln-sub-notices { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.ln-sub-notices li { display: flex; gap: 0.5rem; align-items: flex-start; }
.ln-sub-notices .ln-i { color: var(--ln-primary); margin-top: 2px; }
.ln-sub-page .group-allocation-card { border-radius: var(--ln-radius-card); }

@media (max-width: 960px) {
    .ln-sub-top, .ln-sub-two { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .ln-sub-library-picker { width: 100%; }
    .ln-sub-library-picker select { flex: 1; min-width: 0; }
    .ln-sub-plan-head { flex-wrap: wrap; }
    .ln-sub-actions .ln-btn, .ln-sub-redeem-form .ln-btn, .ln-sub-toggle .ln-btn { width: 100%; justify-content: center; }
    .ln-sub-toggle form { width: 100%; }
    .ln-sub-payments li { flex-direction: column; }
    .ln-sub-payment-side { align-items: flex-start; text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .ln-sub-bar > span { transition: none; } }