.scr-page { background: var(--light-color, #f8f9fa); min-height: 100vh; padding: 1.5rem 0 3rem; }
.scr-title { color: var(--heading-color, #1f2937); }
.scr-title i { color: var(--primary, #3f6244); }
.scr-card { background: var(--card-bg, #fff); border-radius: 12px; border: 1px solid var(--border-color, #e5e7eb); box-shadow: var(--shadow-sm, 0 1px 4px rgba(0,0,0,.06)); }
.scr-filter-bar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-color, #f0f0f0); }
.scr-filter-bar select, .scr-filter-bar input { height: 36px; font-size: .82rem; border-radius: 8px; border: 1px solid var(--input-border, #e5e7eb); padding: 0 .65rem; background: var(--input-bg, #fff); color: var(--text-color, #374151); }
.scr-filter-bar select:focus, .scr-filter-bar input:focus { outline: none; border-color: var(--primary, #3f6244); box-shadow: 0 0 0 3px var(--ring, rgba(63,98,68,.12)); }
.scr-filter-bar label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted, #6b7280); margin-bottom: 0; }
.scr-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.scr-table thead th { background: var(--soft, #f6f8f6); color: var(--text-color, #374151); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; padding: .6rem .85rem; border-bottom: 2px solid var(--border-color, #e5e7eb); white-space: nowrap; }
.scr-table tbody tr:hover { background: var(--table-hover, #f9fafb); }
.scr-table td { padding: .55rem .85rem; border-bottom: 1px solid var(--border-color, #f0f0f0); vertical-align: middle; }
.cat-divider td { background: var(--primary-soft, #f0f4f0); font-weight: 700; color: var(--heading-color, #3f6244); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; padding: .45rem .85rem; }
.comm-cell { min-width: 80px; }
.badge-inactive { background: var(--danger-bg, #fee2e2); color: var(--danger-text, #b91c1c); font-size: .72rem; padding: .2rem .5rem; border-radius: 20px; }
.badge-active { background: var(--success-bg, #dcfce7); color: var(--success-text, #15803d); font-size: .72rem; padding: .2rem .5rem; border-radius: 20px; }
.btn-edit-comm { display: inline-flex; align-items: center; gap: .3rem; padding: .28rem .7rem; font-size: .78rem; font-weight: 600;
    color: var(--primary, #3f6244); background: var(--primary-soft, #f0f4f0); border: 1px solid var(--border-color, #c5d9c7); border-radius: 6px; text-decoration: none; white-space: nowrap;
    transition: background .15s, border-color .15s; cursor: pointer; }
.btn-edit-comm:hover { background: var(--table-hover, #e0ebe1); border-color: var(--primary-light, #6b8f71); color: var(--heading-color, #2d4a31); }
.btn-export { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .9rem; font-size: .82rem; font-weight: 600;
    border-radius: 8px; border: none; cursor: pointer; text-decoration: none; transition: opacity .15s; }
.btn-export:hover { opacity: .85; }
.btn-excel { background: #16a34a; color: #fff; }
.btn-pdf   { background: #dc2626; color: #fff; }
.scr-search { margin-left: auto; }
.pkg-name-cell { font-weight: 600; color: var(--text-color, #374151); }
.pkg-badge { font-size: .72rem; padding: .2rem .55rem; border-radius: 20px; font-weight: 600; }
.gender-chip { font-size: .72rem; background: var(--comm-fixed-bg, #ede9fe); color: var(--comm-fixed, #5b21b6); padding: .15rem .45rem; border-radius: 20px; }
[data-theme="theme3"] .gender-chip { background: var(--primary-soft); color: var(--primary-light); border: 1px solid var(--border-color); }
.summary-chips { display: flex; gap: .5rem; flex-wrap: wrap; padding: .75rem 1.25rem; background: var(--soft, #f9faf9); border-bottom: 1px solid var(--border-color, #f0f0f0); }
.summary-chip { font-size: .78rem; background: var(--card-bg, #fff); border: 1px solid var(--border-color, #e5e7eb); border-radius: 20px; padding: .25rem .75rem; color: var(--text-color, #374151); }
.summary-chip strong { color: var(--heading-color, #3f6244); }
.no-data { text-align: center; color: var(--text-muted, #9ca3af); padding: 2.5rem 1rem; font-size: .9rem; }
.table-wrap { overflow-x: auto; }