/* Gurukul Setu admin theme — tokens from the reference repository (Bootstrap 5.3.3 + Inter) */
:root {
  --primary: #ad3939;
  --primary-mid: #A02020;
  --accent: #c04d40;
  --bg: #F8F3F3;
  --surface: #ffffff;
  --text: #2A1515;
  --text-2: #5C3A3A;
  --text-muted: #9B7575;
  --border: #EDE2E2;
  --radius: .75rem;
  --radius-sm: .45rem;
  --radius-lg: 1rem;
  --sidebar-w: 248px;
  --topbar-h: 56px;
  --bs-primary: var(--primary);
  --bs-primary-rgb: 173, 57, 57;
  --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Noto Sans Gujarati', sans-serif;
  --bs-body-color: var(--text);
  --bs-body-bg: var(--bg);
  --bs-border-color: var(--border);
  --bs-link-color: var(--primary);
  --bs-link-hover-color: var(--primary-mid);
  --bs-link-color-rgb: 173, 57, 57;
}
[data-bs-theme="dark"] {
  --bg: #1b1313;
  --surface: #241a1a;
  --text: #f3e9e9;
  --text-2: #d8c3c3;
  --text-muted: #a88f8f;
  --border: #3a2a2a;
  --bs-body-color: var(--text);
  --bs-body-bg: var(--bg);
  --bs-border-color: var(--border);
}
html, body { background: var(--bg); color: var(--text); }
body { font-family: var(--bs-body-font-family); font-size: .9rem; }
.gu, [lang="gu"] { font-family: 'Noto Sans Gujarati', 'Hind Vadodara', var(--bs-body-font-family); }
a { text-decoration: none; }
.text-muted, .small-muted { color: var(--text-muted) !important; }
.text-2 { color: var(--text-2); }

/* buttons */
.btn-primary { --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-hover-bg: var(--primary-mid);
  --bs-btn-hover-border-color: var(--primary-mid); --bs-btn-active-bg: var(--primary-mid); --bs-btn-disabled-bg: var(--primary); --bs-btn-disabled-border-color: var(--primary); }
.btn-outline-primary { --bs-btn-color: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-hover-bg: var(--primary);
  --bs-btn-hover-border-color: var(--primary); --bs-btn-active-bg: var(--primary-mid); }
.btn { border-radius: var(--radius-sm); }
.btn-soft { background: #f6eaea; color: var(--primary); border: 1px solid var(--border); }
.btn-soft:hover { background: #f0dcdc; color: var(--primary-mid); }
[data-bs-theme="dark"] .btn-soft { background: #3a2626; }
.form-control, .form-select { border-radius: var(--radius-sm); border-color: var(--border); }
.form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 .2rem rgba(173,57,57,.15); }
.form-label { font-weight: 500; color: var(--text-2); margin-bottom: .25rem; font-size: .82rem; }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }

/* layout */
.topbar { position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h); background: var(--surface); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 1rem; z-index: 1030; gap: .75rem; }
.brand { display: flex; align-items: center; gap: .55rem; font-weight: 700; color: var(--primary); font-size: 1.05rem; }
.brand .logo { width: 32px; height: 32px; border-radius: 9px; background: var(--primary); color: #fff; display: grid; place-items: center; font-weight: 700; }
.brand small { font-weight: 500; color: var(--text-muted); font-size: .75rem; }
.sidebar { position: fixed; top: var(--topbar-h); bottom: 0; left: 0; width: var(--sidebar-w); background: var(--surface);
  border-right: 1px solid var(--border); overflow-y: auto; padding: .75rem .6rem 2rem; z-index: 1020; }
.sidebar .side-search { position: sticky; top: -.75rem; z-index: 2; margin: -.75rem -.6rem .4rem; padding: .7rem .6rem .45rem; background: var(--surface); }
.sidebar .side-search i { position: absolute; left: 1.2rem; top: 50%; transform: translateY(-35%); color: var(--text-muted); font-size: .85rem; }
.sidebar .side-search input { width: 100%; border: 1px solid var(--border); border-radius: 999px; padding: .38rem .8rem .38rem 2rem; font-size: .85rem; background: var(--surface); color: var(--text); }
.sidebar .side-search input:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 .15rem rgba(173, 57, 57, .12); }
.sidebar .section { display: flex; align-items: center; width: calc(100% - .2rem); gap: .6rem; border: 0; background: none; text-align: left; font-size: .95rem; font-weight: 600; color: var(--text);
  margin: .2rem .1rem 0; padding: .5rem .65rem; border-radius: var(--radius-sm); cursor: pointer; }
.sidebar .section .sec-ic { font-size: 1.1rem; width: 1.2rem; text-align: center; color: var(--primary); }
.sidebar .side-group.open > .section { background: #f7eded; }
[data-bs-theme="dark"] .sidebar .side-group.open > .section { background: #352424; }
@media (min-width: 992px) {
  .sidebar { transition: transform .28s ease; }
  .main { transition: margin-left .28s ease; }
  html.side-hidden .sidebar { transform: translateX(-100%); }
  html.side-hidden .main { margin-left: 0; }
  html.side-hidden .view-as-banner { left: 0; }
}
.sidebar .section:hover { background: #f7eded; color: var(--primary); }
.sidebar .section > span:not(.side-sum) { flex: 1; }
.sidebar .section .side-sum { font-size: .65rem; }
.sidebar .section .bi-chevron-down { font-size: .7rem; transition: transform .28s ease; }
.sidebar .section, .sidebar .nav-link { transition: background-color .18s ease, color .18s ease; }
@media (prefers-reduced-motion: reduce) { .sidebar *, .sidebar, .main { transition: none !important; } }
.sidebar .side-group.open > .section .bi-chevron-down { transform: rotate(180deg); }
.sidebar .side-group.has-active > .section { color: var(--primary); }
.sidebar .section .bi-chevron-down { color: var(--text-muted); }
.sidebar .side-items .nav-link { padding: .25rem .55rem; font-size: .86rem; gap: .5rem; margin: .08rem .35rem .08rem 0; border-radius: 8px; }
.sidebar .side-items .nav-link i { font-size: .95rem; width: 1.1rem; }
.sidebar .side-items .badge { font-size: .65rem; }
/* open / close slides smoothly: the row height animates between 0 and its content */
.sidebar .side-items { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; margin-left: .5rem; padding-left: .35rem; border-left: 1px solid transparent; }
.sidebar .side-inner { overflow: hidden; min-height: 0; visibility: hidden; opacity: 0; transition: opacity .22s ease, visibility 0s linear .28s; }
.sidebar .side-group.open > .side-items, .sidebar.searching .side-group .side-items { grid-template-rows: 1fr; border-left-color: var(--border); }
.sidebar .side-group.open .side-inner, .sidebar.searching .side-inner { visibility: visible; opacity: 1; transition: opacity .25s ease .05s, visibility 0s; }
.sidebar .side-group:not(.open) .side-sum { display: inline-block; }
.sidebar .side-group.open .side-sum { display: none; }
.sidebar [hidden] { display: none !important; }
.sidebar .side-none { color: var(--text-muted); font-size: .85rem; padding: .8rem .6rem; }
[data-bs-theme="dark"] .sidebar .section:hover { background: #352424; }
.sidebar .nav-link { display: flex; align-items: center; gap: .6rem; color: var(--text-2); padding: .45rem .65rem; border-radius: var(--radius-sm); font-weight: 500; }
.sidebar .nav-link i { font-size: 1.05rem; width: 1.2rem; text-align: center; }
.sidebar .nav-link:hover { background: #f7eded; color: var(--primary); }
.sidebar .nav-link.active { background: var(--primary); color: #fff; }
[data-bs-theme="dark"] .sidebar .nav-link:hover { background: #352424; }
.sidebar .badge { margin-left: auto; }
.main { margin-left: var(--sidebar-w); padding: calc(var(--topbar-h) + 1.25rem) 1.5rem 1rem; min-height: 100vh; display: flex; flex-direction: column; }
.main > .content { flex: 1; }
.footer { color: var(--text-muted); font-size: .78rem; padding: 1.25rem 0 .5rem; border-top: 1px solid var(--border); margin-top: 2rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.page-head h1 { font-size: 1.35rem; font-weight: 700; margin: 0; }
.page-head .sub { color: var(--text-muted); font-size: .85rem; margin-top: .15rem; }
.card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: 0 1px 2px rgba(42,21,21,.03); }
.card-header { background: transparent; border-bottom: 1px solid var(--border); font-weight: 600; padding: .75rem 1rem; }
.view-as-banner { background: #fff3cd; color: #664d03; padding: .4rem 1rem; text-align: center; font-size: .82rem; position: fixed; top: var(--topbar-h); left: var(--sidebar-w); right: 0; z-index: 1025; }

/* tiles */
.tile { padding: 1rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); height: 100%; display: block; color: inherit; }
.tile:hover { border-color: var(--accent); }
.tile .num { font-size: 1.6rem; font-weight: 700; color: var(--text); line-height: 1.1; }
.tile .lbl { color: var(--text-muted); font-size: .8rem; }
.tile i { font-size: 1.3rem; color: var(--primary); }

/* badges / chips */
.badge { font-weight: 600; border-radius: 999px; }
.chip { display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .65rem; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-2); font-size: .78rem; cursor: pointer; white-space: nowrap; }
.chip.active, .chip:hover { border-color: var(--primary); color: var(--primary); background: #fbf1f1; }
.chip .count { font-weight: 700; }
.tag-badge { display: inline-block; padding: .12rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 600; color: #fff; margin: 0 .2rem .2rem 0; white-space: nowrap; line-height: 1.4; }
.src-final { background: #d1f0dd; color: #0f5132; }
.src-temp { background: #fff1c2; color: #6b4e00; }
.badge-late { background: #3b3b3b; color: #fff; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: #f1dede; color: var(--primary); display: inline-grid; place-items: center;
  font-weight: 700; font-size: .8rem; overflow: hidden; flex-shrink: 0; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.lg { width: 72px; height: 72px; font-size: 1.3rem; }
.chips-row { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: thin; }

/* grid (DataTables server-side) */
.grid-toolbar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: .6rem; }
.grid-toolbar .search { position: relative; flex: 1 1 260px; max-width: 420px; }
.grid-toolbar .search input { padding-left: 2rem; }
.grid-toolbar .search i { position: absolute; left: .65rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
.pills { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .5rem; }
.pill { background: #f6eaea; color: var(--primary); border-radius: 999px; padding: .15rem .55rem; font-size: .75rem; }
.pill button { border: 0; background: none; color: inherit; padding: 0 0 0 .25rem; }
/* every table: white rows, one heading style */
.table { --bs-table-bg: var(--surface); --bs-table-color: var(--text); --bs-table-border-color: var(--border); --bs-table-hover-bg: #fbf2f2;
  --bs-table-hover-color: var(--text); --bs-table-striped-bg: #fcf8f8; }
[data-bs-theme="dark"] .table { --bs-table-hover-bg: #2c2020; --bs-table-striped-bg: #281d1d; }
.table > thead > tr > th { background: #faf4f4; color: var(--text-2); font-size: .78rem; font-weight: 600; white-space: nowrap; vertical-align: bottom;
  border-bottom: 1px solid var(--border); }
[data-bs-theme="dark"] .table > thead > tr > th { background: #2a1f1f; }
.table-responsive { border-radius: var(--radius-sm); }

/* grid (DataTables server-side): the table scrolls inside its own box, header row and name column stay visible */
table.dataTable { border-collapse: separate !important; border-spacing: 0; margin: 0 !important; }
.grid-wrap { position: relative; overflow: auto; max-height: calc(100vh - var(--topbar-h) - 210px); min-height: 160px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
table.setu-table thead th { position: sticky !important; top: 0; z-index: 3; }
table.setu-table td { vertical-align: middle; white-space: nowrap; }
table.setu-table td:nth-child(1), table.setu-table th:nth-child(1) { position: sticky; left: 0; z-index: 2; width: 40px; min-width: 40px; }
table.setu-table td:nth-child(2), table.setu-table th:nth-child(2) { position: sticky; left: 0; z-index: 2; }
.grid-selectable table.setu-table td:nth-child(2), .grid-selectable table.setu-table th:nth-child(2) { left: 40px; box-shadow: 1px 0 0 var(--border); }
table.setu-table th:nth-child(1), table.setu-table th:nth-child(2) { z-index: 4; }
table.setu-table td:nth-child(1), table.setu-table td:nth-child(2) { background: var(--surface); }
.density-compact table.setu-table td { padding-top: .25rem; padding-bottom: .25rem; font-size: .82rem; }
.grid-wrap.loading table { opacity: .55; transition: opacity .15s; }
.grid-progress { position: absolute; top: 0; left: 0; height: 2px; background: var(--primary); width: 0; transition: width .3s; z-index: 5; }
.grid-wrap.loading .grid-progress { width: 70%; }
div.dataTables_wrapper div.dataTables_info { color: var(--text-muted); font-size: .8rem; }
.page-link { color: var(--primary); }
.active > .page-link, .page-link.active { background: var(--primary); border-color: var(--primary); }
.select-all-banner { background: #fff5e6; border: 1px solid #f2d7a7; border-radius: var(--radius-sm); padding: .4rem .75rem; font-size: .82rem; margin-bottom: .5rem; display: none; }
.skeleton { display: block; height: .8rem; border-radius: 4px; background: linear-gradient(90deg, #f1e7e7 25%, #f8f1f1 37%, #f1e7e7 63%); background-size: 400% 100%; animation: sk 1.2s ease infinite; }
@keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* editable lists: one table row per record, headings on top, the empty "add" row last */
.edit-table td { padding: .3rem .35rem; vertical-align: middle; }
.edit-table th { padding: .45rem .35rem; }
.edit-table .form-control, .edit-table .form-select { min-width: 64px; }
.edit-table tr.new-row td { background: #fcf7f7; }
[data-bs-theme="dark"] .edit-table tr.new-row td { background: #2a1f1f; }
.edit-table tr.new-row td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

/* form helpers (setu-fields.js) */
.gu-note { font-size: .76rem; color: #2f6fb3; margin-top: .2rem; min-height: 0; }
.gu-note:empty { display: none; }
.gu-note a { font-weight: 600; }
/* Person profile: address updated / confirmed / home pin dates */
.address-dates { padding: .45rem .7rem; border-radius: var(--radius-sm, 8px); background: var(--surface-2, #faf6f6); border: 1px solid var(--border, #eee); }
.address-dates.due { background: #fff8e6; border-color: #f0d58a; }
[data-bs-theme=dark] .address-dates.due { background: #3a2f12; border-color: #6b5520; }
/* "why is this here?" hints (setu-fields.js §6) */
.hint-i { color: var(--text-muted, #8a8a8a); font-size: .8em; margin-left: .3rem; cursor: help; font-weight: 400; vertical-align: .05em; }
.hint-i:hover, .hint-i:focus { color: var(--primary); outline: none; }
.btn-hints.active { background: #fff4d6; color: #7a5200; border-color: #f0d58a; }
[data-bs-theme=dark] .btn-hints.active { background: #3a2f12; color: #ffd76a; border-color: #6b5520; }
/* "where am I" bar on top of every page */
.crumbs { margin: -.25rem 0 .75rem; font-size: .82rem; }
.crumbs .breadcrumb { --bs-breadcrumb-divider: '›'; font-size: .82rem; flex-wrap: wrap; }
.crumbs .breadcrumb-item a { color: var(--text-2, #666); text-decoration: none; }
.crumbs .breadcrumb-item a:hover { color: var(--primary); text-decoration: underline; }
.crumbs .breadcrumb-item.active { color: var(--text, #222); font-weight: 600; }
.crumb-back { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .6rem; border-radius: 999px; border: 1px solid var(--border, #ddd);
  background: var(--surface, #fff); color: var(--primary); text-decoration: none; font-weight: 600; max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumb-back:hover { border-color: var(--primary); }
/* red * after the name of every mandatory box (added by setu-fields.js) */
.req-star { color: #d63939; font-weight: 700; margin-left: .1rem; }
/* Gujarati spelling choices under a Gujarati name box */
.gu-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.gu-chips:empty { display: none; }
.gu-chip { border: 1px solid var(--border, #ddd); background: var(--surface, #fff); color: var(--text, #222); border-radius: 999px; padding: .12rem .6rem; font-size: .82rem; line-height: 1.5; cursor: pointer; }
.gu-chip:hover { border-color: var(--primary); }
.gu-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.places-wrap { position: relative; }
.places-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 1080; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: 0 10px 28px rgba(42,21,21,.14); margin-top: 2px; overflow: hidden; }
.places-item { display: flex; gap: .55rem; align-items: flex-start; width: 100%; text-align: left; border: 0; background: none; padding: .5rem .7rem; font-size: .86rem; }
.places-item i { color: var(--primary); margin-top: .15rem; }
.places-item b { display: block; font-weight: 600; color: var(--text); }
.places-item small { color: var(--text-muted); }
.places-item:hover, .places-item.active { background: #fbf1f1; }
.places-foot { font-size: .66rem; color: var(--text-muted); text-align: right; padding: .15rem .6rem; border-top: 1px solid var(--border); }
.places-hint { font-size: .74rem; color: var(--text-muted); margin-top: .2rem; }
.photo-box { display: flex; gap: 1rem; align-items: center; margin-top: .5rem; flex-wrap: wrap; }
.photo-view { width: 160px; height: 160px; border-radius: 12px; border: 2px solid var(--border); cursor: grab; touch-action: none; background: #fff; }
.photo-view:active { cursor: grabbing; }
.photo-tools { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: .3rem; }

/* family suggestions: one card per group of people who may be one family */
.fs-bar { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; justify-content: space-between; }
.fs-tabs .nav-link { padding: .35rem .85rem; color: var(--text-2); border-radius: 999px; }
.fs-tabs .nav-link.active { background: var(--primary); color: #fff; }
.fs-tabs .badge { background: rgba(0,0,0,.08); color: inherit; font-weight: 600; margin-left: .2rem; }
.fs-tabs .nav-link.active .badge { background: rgba(255,255,255,.25); }
.fs-chips { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.fs-chips .chip { text-decoration: none; color: var(--text-2); font-size: .82rem; }
.fs-how { background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: .5rem .8rem; }
.fs-card { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem; margin-bottom: 1rem; }
.fs-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.fs-title { font-size: 1.05rem; font-weight: 600; margin: 0; }
.fs-why { margin: .5rem 0 .8rem; font-size: .88rem; color: var(--text-2); display: grid; gap: .15rem; }
.fs-why i { color: var(--primary); }
.fs-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .5rem; }
.fs-person { display: flex; align-items: center; gap: .6rem; padding: .5rem .65rem; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; background: var(--surface); }
.fs-person:has(input:checked) { border-color: var(--primary); background: #fdf6f6; }
.fs-person:has(input:not(:checked)) { opacity: .55; }
.fs-avatar { flex: 0 0 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #f3e3e3; color: var(--primary); font-weight: 700; }
.fs-pinfo { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fs-pname { font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-psub { font-size: .76rem; color: var(--text-muted); }
.fs-open { color: var(--text-muted); padding: .2rem; }
.fs-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; justify-content: space-between; margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--border); }
.fs-family { min-width: 240px; max-width: 420px; flex: 1; }
.fs-buttons { display: flex; gap: .5rem; flex-wrap: wrap; }
.fs-pairs { margin-top: .7rem; font-size: .86rem; }
.fs-pairs summary { color: var(--text-muted); cursor: pointer; }
[data-bs-theme=dark] .fs-person:has(input:checked) { background: rgba(173,57,57,.12); }

/* duplicates group: the three possible answers side by side */
.decide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .75rem; }
.decide-opt { display: flex; flex-direction: column; gap: .45rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .85rem 1rem; }
.decide-opt.is-main { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(173,57,57,.08); }
.decide-opt .do-t { font-weight: 600; }
.decide-opt .do-t i { color: var(--primary); }
.decide-opt .do-s { font-size: .84rem; color: var(--text-2); flex: 1; }
.decide-opt .btn { align-self: flex-start; }

/* family page: members as cards */
.fm-list { display: grid; gap: .6rem; }
.fm-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .65rem .8rem; background: var(--surface); }
.fm-card.is-head { border-color: #f0d58a; background: #fffbef; }
.fm-top { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.fm-name { font-weight: 600; }
.fm-lines { font-size: .84rem; color: var(--text-2); margin-top: .15rem; }
.fm-lines i { color: var(--text-muted); width: 1rem; display: inline-block; }
.fm-btns { margin-left: auto; display: flex; gap: .35rem; }
.fm-edit { margin-top: .6rem; padding-top: .6rem; border-top: 1px dashed var(--border); }
[data-bs-theme=dark] .fm-card.is-head { background: rgba(240,213,138,.08); }

/* "How to use" side panel — no backdrop, so the page stays usable beside it */
.btn-how { background: #fff4d6; color: #7a5200; border: 1px solid #f0d58a; font-weight: 600; }
.btn-how:hover, .btn-how:focus { background: #ffe9a8; color: #5c3d00; border-color: #e6c25c; }
.how-guest { position: fixed; top: calc(.75rem + env(safe-area-inset-top, 0px)); right: .75rem; z-index: 1030; }
.how-to { width: min(380px, 100%) !important; border-left: 3px solid #f0d58a !important; }
.how-to .offcanvas-header { background: #fffaf0; border-bottom: 1px solid var(--border); }
.how-to .offcanvas-title i { color: #d49b00; }
.how-page { font-size: 1.15rem; font-weight: 700; color: var(--primary); }
.how-intro { font-size: .95rem; color: var(--text-2); margin: .25rem 0 1rem; }
.how-steps { list-style: none; padding: 0; margin: 0 0 1rem; counter-reset: none; }
.how-steps li { display: flex; gap: .7rem; align-items: flex-start; padding: .55rem 0; border-bottom: 1px dashed var(--border); font-size: .95rem; line-height: 1.45; }
.how-n { flex: 0 0 28px; height: 28px; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .85rem; }
.how-sub { font-weight: 600; font-size: .85rem; margin-bottom: .35rem; color: var(--text); }
.how-tips, .how-signs { background: var(--surface-2, #faf6f6); border-radius: var(--radius-sm); padding: .65rem .8rem; margin-bottom: .8rem; }
.how-tips ul, .how-signs ul { margin: 0; padding-left: 1.1rem; font-size: .88rem; }
.how-signs ul { list-style: none; padding: 0; }
.how-signs li { display: flex; gap: .5rem; padding: .2rem 0; }
.how-signs li i { flex: 0 0 1rem; }
@media (min-width: 1200px) { body.how-open .main { margin-right: min(380px, 100%); } }
[data-bs-theme=dark] .btn-how { background: #3a2f12; color: #ffd76a; border-color: #6b5520; }
[data-bs-theme=dark] .how-to .offcanvas-header { background: transparent; }

/* add member: list of everything to fix, each line jumps to its box */
.fix-list { list-style: none; padding: 0; margin: .4rem 0 0; font-size: .82rem; }
.fix-list li { padding: .25rem 0; border-top: 1px dashed var(--border); }
.fix-list a { color: inherit; text-decoration: none; }
.fix-list a:hover { text-decoration: underline; }

/* update-link wizard (section-wise form → preview → submit); without JS all sections simply show */
.wz-nav { display: none; }
.wz-on .wz-nav { display: flex; list-style: none; padding: 0; margin: .4rem 0 1rem; gap: .25rem; counter-reset: none; overflow-x: auto; }
.wz-nav li { flex: 1 1 0; min-width: 64px; }
.wz-dot { width: 100%; border: 0; background: none; padding: .3rem .1rem; display: flex; flex-direction: column; align-items: center; gap: .2rem; color: var(--text-muted); font-size: .72rem; position: relative; }
.wz-dot .n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--border); background: var(--surface); font-weight: 600; font-size: .8rem; z-index: 1; }
.wz-nav li + li .wz-dot::before { content: ''; position: absolute; top: 17px; right: 50%; width: 100%; height: 2px; background: var(--border); }
.wz-dot.done .n { border-color: var(--primary); color: var(--primary); }
.wz-dot.active .n { background: var(--primary); border-color: var(--primary); color: #fff; }
.wz-dot.active, .wz-dot.done { color: var(--text); }
.wz-dot:disabled { opacity: .6; }
.wz-h { font-weight: 600; margin-bottom: .6rem; }
.wz-step + .wz-step { margin-top: 1.25rem; }
.wz-on .wz-step + .wz-step { margin-top: 0; }
.wz-preview { display: none; }
.wz-on .wz-preview { display: block; }
.wz-on .wz-preview.d-none { display: none; }
.wz-bar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: 1.25rem; padding-top: .9rem; border-top: 1px solid var(--border); }
.wz:not(.wz-on) #wzBack, .wz:not(.wz-on) #wzNext, .wz:not(.wz-on) #wzCount { display: none; }
.wz-sum { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .6rem .8rem; margin-bottom: .6rem; }
.wz-sum-h { display: flex; justify-content: space-between; align-items: center; font-weight: 600; margin-bottom: .35rem; }
.wz-sum dl { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: .2rem .8rem; margin: 0; font-size: .86rem; }
.wz-sum dt { font-weight: 500; color: var(--text-muted); }
.wz-sum dd { margin: 0; word-break: break-word; }
.wz-sum dd.text-muted { grid-column: 1 / -1; }
.wz-thumb { width: 72px; height: 72px; border-radius: 8px; object-fit: cover; border: 1px solid var(--border); }
.wz-cur { object-fit: cover; border: 1px solid var(--border); }
@media (max-width: 575px) { .wz-dot .t { display: none; } .wz-dot.active .t { display: block; } }

/* duplicates */
.dup-help { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .75rem; }
.dup-help > div, .step-head { display: flex; gap: .6rem; align-items: flex-start; }
.dup-help > div { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .7rem .9rem; flex-wrap: wrap; }
.dup-help b, .step-head b { display: block; color: var(--text); }
.dup-help span:not(.dh-n), .step-head span:not(.dh-n) { font-size: .82rem; color: var(--text-2); }

.dh-n { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--primary); color: #fff; display: inline-grid; place-items: center; font-weight: 700; font-size: .8rem; flex-shrink: 0; }
.step-head { margin: 0 0 .6rem; }
.tile-active { border-color: var(--primary) !important; box-shadow: inset 0 0 0 1px var(--primary); }
.tile .lbl span { font-size: .72rem; color: var(--text-muted); }
.dup-card { display: grid; grid-template-columns: 190px 1fr 120px; gap: 1rem; align-items: center; background: var(--surface); border: 1px solid var(--border);
  border-left-width: 4px; border-radius: var(--radius); padding: .85rem 1rem; margin-bottom: .6rem; color: inherit; }
.dup-card:hover { box-shadow: 0 4px 16px rgba(42,21,21,.08); color: inherit; }
.dup-verdict { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .88rem; }
.dup-verdict i { font-size: 1.3rem; }
.tone-success { border-left-color: #198754; } .tone-success .dup-verdict, .tone-success .vb-icon { color: #198754; }
.tone-danger { border-left-color: #c0392b; } .tone-danger .dup-verdict, .tone-danger .vb-icon { color: #b42318; }
.tone-info { border-left-color: #2f6fb3; } .tone-info .dup-verdict, .tone-info .vb-icon { color: #2f6fb3; }
.tone-warning { border-left-color: #d49a1a; } .tone-warning .dup-verdict, .tone-warning .vb-icon { color: #9a6700; }
.tone-secondary { border-left-color: #8a8f96; } .tone-secondary .dup-verdict, .tone-secondary .vb-icon { color: #5b6570; }
.dup-people { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .35rem; }
.person-chip { background: #f8f1f1; border: 1px solid var(--border); border-radius: 999px; padding: .1rem .6rem; font-size: .8rem; }
.person-chip b { font-weight: 600; color: var(--text); }
.person-chip.more { background: transparent; color: var(--text-muted); }
.why-chip { display: inline-block; background: #fff7e6; border: 1px solid #f1d9a6; border-radius: 6px; padding: .05rem .5rem; font-size: .78rem; margin: 0 .25rem .2rem 0; color: #6b4e00; }
.why-chip b { color: #3d2c00; }
.dup-advice { font-size: .8rem; color: var(--text-muted); margin-top: .2rem; }
.dup-meta { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.dup-count { font-size: 1.5rem; font-weight: 700; line-height: 1; }
.verdict-banner { display: flex; gap: .9rem; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--radius); padding: .9rem 1.1rem; }
.vb-icon { font-size: 1.8rem; line-height: 1; }
.vb-title { font-weight: 700; font-size: 1.02rem; margin-bottom: .1rem; }
.person-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .75rem; }
.person-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .8rem .9rem; transition: border-color .15s, opacity .15s; }
.person-card.is-keep { border: 2px solid var(--primary); box-shadow: 0 0 0 3px rgba(173,57,57,.08); }
.person-card.is-in { border-color: #e2b4b4; background: #fffafa; }
.person-card.is-out { opacity: .6; }
.person-card.is-closed { opacity: .5; background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(0,0,0,.015) 8px 16px); }
.pairs-card .card-header i { color: #b42318; }
.pc-head { display: flex; gap: .4rem; align-items: center; margin-bottom: .3rem; }
.pc-row { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.pc-name { font-weight: 600; font-size: .95rem; }
.pc-facts { display: grid; grid-template-columns: 82px 1fr; gap: .1rem .5rem; margin: .5rem 0; font-size: .8rem; }
.pc-facts dt { color: var(--text-muted); font-weight: 500; }
.pc-facts dd { margin: 0; }
.pc-actions { border-top: 1px solid var(--border); padding-top: .5rem; display: flex; flex-direction: column; gap: .3rem; }
.pc-actions label { display: flex; gap: .45rem; align-items: center; font-size: .84rem; cursor: pointer; margin: 0; }
.person-card.is-keep .pc-keep span { font-weight: 700; color: var(--primary); }
.cmp-table th.fld { font-weight: 500; color: var(--text-2); font-size: .82rem; background: var(--surface); white-space: nowrap; }
.cmp-table td, .cmp-table th { vertical-align: middle; }
.cmp-table tr.differs th.fld { color: var(--text); font-weight: 600; }
.cmp-table tr.differs th.fld::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #d49a1a; margin-right: .4rem; vertical-align: middle; }
.pick-cell { display: block; border: 1px solid transparent; border-radius: var(--radius-sm); padding: .3rem .5rem; cursor: pointer; margin: 0; font-size: .86rem; }
.pick-cell input { position: absolute; opacity: 0; pointer-events: none; }
.cmp-table tr.differs .pick-cell { border-color: var(--border); }
.cmp-table tr.differs .pick-cell:hover { border-color: var(--accent); }
.pick-cell.is-picked { background: #fdf3f3; border-color: var(--primary) !important; box-shadow: inset 3px 0 0 var(--primary); }
.cmp-table tr:not(.differs) .pick-cell.is-picked { background: transparent; border-color: transparent !important; box-shadow: none; }
.res-col { background: #f7fbf8; min-width: 180px; font-weight: 500; }
[data-bs-theme="dark"] .res-col { background: #1f2a22; }
.from-badge { font-size: .68rem; background: #fff1d1; color: #8a5a00; border-radius: 999px; padding: 0 .4rem; font-weight: 600; }
@media (max-width: 767.98px) { .dup-card { grid-template-columns: 1fr; } .dup-meta { align-items: flex-start; text-align: left; } }

/* roles list */
.role-icon { width: 34px; height: 34px; border-radius: 9px; background: #f6eaea; color: var(--primary); display: grid; place-items: center; flex-shrink: 0; }
.role-icon.is-system { background: #2a1515; color: #fff; }
[data-bs-theme="dark"] .role-icon { background: #3a2626; }

/* role editor */
.role-summary { display: flex; flex-wrap: wrap; gap: .4rem; }
.sum-chip { background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: .15rem .65rem; font-size: .8rem; color: var(--text-2); }
.sum-chip b { color: var(--text); }
.sum-chip.sum-high b { color: #b42318; }
.role-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--border); flex-wrap: nowrap; overflow-x: auto; list-style: none; padding: 0; position: sticky;
  top: var(--topbar-h); background: var(--bg); z-index: 5; }
.role-tabs button { border: 0; background: none; padding: .6rem .9rem; color: var(--text-2); font-weight: 500; border-bottom: 2px solid transparent; white-space: nowrap;
  display: inline-flex; align-items: center; gap: .4rem; margin-bottom: -1px; }
.role-tabs button:hover { color: var(--primary); }
.role-tabs button.active { color: var(--primary); border-bottom-color: var(--primary); }
.tab-count { background: #f1e4e4; color: var(--primary); border-radius: 999px; font-size: .7rem; font-weight: 700; padding: .05rem .45rem; min-width: 1.4rem; text-align: center; }
[data-bs-theme="dark"] .tab-count { background: #3a2626; }
.perm-search-icon { position: absolute; left: .6rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: .8rem; }
.seg .btn { font-size: .78rem; }
.seg .btn-check:checked + .btn { background: var(--primary); border-color: var(--primary); color: #fff; }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1rem; align-items: start; }
.perm-module { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.perm-module.has-on { border-color: #e6c9c9; }
.perm-module header { display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem; border-bottom: 1px solid var(--border); background: #fcf8f8; }
[data-bs-theme="dark"] .perm-module header { background: #2a1f1f; }
.pm-icon { width: 34px; height: 34px; border-radius: 9px; background: #f6eaea; color: var(--primary); display: grid; place-items: center; font-size: 1rem; flex-shrink: 0; }
[data-bs-theme="dark"] .pm-icon { background: #3a2626; }
.pm-name { font-weight: 600; color: var(--text); line-height: 1.2; }
.pm-count { font-size: .74rem; color: var(--text-muted); }
.pm-list { padding: .25rem 0; }
.pm-all-wrap { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: .75rem; color: var(--text-muted); cursor: pointer; }
.perm-item { display: flex; align-items: flex-start; gap: .65rem; padding: .5rem .9rem; cursor: pointer; margin: 0; }
.perm-item + .perm-item { border-top: 1px solid #f5ecec; }
[data-bs-theme="dark"] .perm-item + .perm-item { border-top-color: #2f2424; }
.perm-item:hover { background: #fbf4f4; }
[data-bs-theme="dark"] .perm-item:hover { background: #2c2020; }
.perm-item:not(.is-on) .pi-label { color: var(--text-2); }
.perm-item.is-on .pi-label { font-weight: 500; }
.form-check-input[type=checkbox]:indeterminate { background-color: #d99a9a; border-color: #d99a9a; }
.form-switch .form-check-input[type=checkbox]:indeterminate { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); background-position: center; }
.perm-item.is-on { background: #fdf8f8; }
[data-bs-theme="dark"] .perm-item.is-on { background: #2a1f1f; }
.perm-item .form-switch .form-check-input { margin-top: .15rem; cursor: pointer; }
.pi-text { flex: 1; min-width: 0; }
.pi-label { display: block; color: var(--text); font-size: .86rem; line-height: 1.3; }
.pi-key { font-size: .7rem; color: var(--text-muted); background: none; padding: 0; }
.risk { font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; padding: .1rem .45rem; border-radius: 999px; flex-shrink: 0; margin-top: .15rem; }
.risk-low { background: #eef0f2; color: #5b6570; }
.risk-medium { background: #fff1d1; color: #8a5a00; }
.risk-high { background: #fde4e4; color: #b42318; }
.field-table td, .field-table th { vertical-align: middle; }
.field-table tbody tr.is-set td { background: #fdf7f7; }
.field-table tbody tr.is-set td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
.field-table .form-check-input { width: 1.1rem; height: 1.1rem; cursor: pointer; }
.fa-hidden:checked { background-color: #6c757d; border-color: #6c757d; }
.fa-masked:checked { background-color: #b7791f; border-color: #b7791f; }
.fa-view:checked { background-color: #2f6fb3; border-color: #2f6fb3; }
.fa-edit:checked { background-color: #198754; border-color: #198754; }
.deleg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .6rem; }
.deleg-item { display: flex; gap: .7rem; align-items: flex-start; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .65rem .8rem; cursor: pointer; margin: 0; }
.deleg-item:has(input:checked) { border-color: var(--primary); background: #fdf7f7; }
.save-bar { position: sticky; bottom: 0; z-index: 6; margin-top: 1rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem 1rem; box-shadow: 0 -4px 16px rgba(42,21,21,.06); }
.save-bar.is-dirty { border-color: #e7c46a; background: #fffbef; }
[data-bs-theme="dark"] .save-bar.is-dirty { background: #2e2716; }
@media (max-width: 991.98px) { .save-bar { bottom: 62px; } .perm-grid { grid-template-columns: 1fr; } }

/* multi-select dropdown (Tom Select, Bootstrap 5 theme) in the portal colours */
.ts-wrapper.multi .ts-control { border-color: var(--border); border-radius: var(--radius-sm); background: var(--surface); min-height: calc(1.5em + .75rem + 2px); }
.ts-wrapper.form-select-sm .ts-control, .ts-wrapper.multi.form-select-sm .ts-control { min-height: calc(1.5em + .5rem + 2px); padding: .15rem .4rem; font-size: .875rem; }
.ts-wrapper.focus .ts-control { border-color: var(--accent); box-shadow: 0 0 0 .2rem rgba(173,57,57,.15); }
.ts-wrapper.multi .ts-control > .item { background: #f6eaea; color: var(--primary); border: 1px solid #ecd3d3; border-radius: 999px; padding: 0 .1rem 0 .55rem; margin: .1rem .25rem .1rem 0; font-size: .8rem; }
.ts-wrapper.multi .ts-control > .item .remove { border-left: 0; color: var(--primary); padding: 0 .35rem; border-radius: 0 999px 999px 0; }
.ts-wrapper.multi .ts-control > .item .remove:hover { background: #ecd3d3; }
.ts-wrapper.disabled .ts-control { background: #f3eeee; opacity: .7; }
.ts-dropdown { z-index: 1090; border-color: var(--border); border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(42,21,21,.12); font-size: .875rem; }
.ts-dropdown .option { display: flex; align-items: center; gap: .45rem; }
.ts-dropdown .active { background: #fbf1f1; color: var(--text); }
.ts-dropdown .option input[type=checkbox] { accent-color: var(--primary); margin: 0; }
.ts-wrapper .clear-button { color: var(--text-muted); }
.cond-val .ts-wrapper { min-width: 220px; max-width: 320px; }
.rv-flex > .form-select, .rv-flex > .form-control { flex: 1 1 140px; min-width: 120px; }
/* a small labelled box inside a row of boxes: <label class="rv-f"><span>Course</span><select …></label> */
.rv-f { display: flex; flex-direction: column; gap: .15rem; flex: 1 1 150px; min-width: 120px; margin: 0; }
.rv-f > span { font-size: .78rem; font-weight: 500; color: var(--text-2); }
[data-bs-theme="dark"] .ts-wrapper.multi .ts-control, [data-bs-theme="dark"] .ts-dropdown { background: var(--surface); color: var(--text); }
[data-bs-theme="dark"] .ts-wrapper.multi .ts-control > .item { background: #3a2626; border-color: #4a3030; color: #f3d6d6; }
[data-bs-theme="dark"] .ts-dropdown .active { background: #352424; }

/* review & finalize */
.check-ok { color: #198754; }
.check-bad { color: #dc3545; }
.orig-value { font-size: .72rem; color: var(--text-muted); }
.hint-tag { background: #fff6dd; border: 1px dashed #e7c46a; color: #6b4e00; padding: .15rem .5rem; border-radius: 6px; font-size: .78rem; margin-right: .25rem; display: inline-block; }
.suggestion { border: 1px dashed var(--accent); border-radius: var(--radius-sm); padding: .35rem .6rem; margin: .25rem 0; display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.issue-error { color: #b02a37; }
.issue-warning { color: #997404; }
.cell-value { font-family: ui-monospace, monospace; background: #f8f0f0; padding: 0 .3rem; border-radius: 4px; }

/* tree */
.tree ul { list-style: none; padding-left: 1.25rem; border-left: 1px dashed var(--border); margin: 0; }
.tree li { padding: .2rem 0; }
.tree .node { display: inline-flex; gap: .4rem; align-items: center; padding: .2rem .5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }

/* timeline */
.timeline { border-left: 2px solid var(--border); padding-left: 1rem; }
.timeline .item { position: relative; margin-bottom: 1rem; }
.timeline .item::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); position: absolute; left: -1.38rem; top: .35rem; }

/* offcanvas quick view */
.offcanvas { background: var(--surface); }

/* mobile */
.bottom-tabs { display: none; }
@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-100%); transition: transform .2s; width: 100%; max-width: 340px; }
  body.sidebar-open .sidebar { transform: translateX(0); box-shadow: 0 0 0 100vmax rgba(0,0,0,.25); }
  .main { margin-left: 0; padding: calc(var(--topbar-h) + 1rem) 1rem calc(70px + 1rem); }
  .view-as-banner { left: 0; }
  .bottom-tabs { display: flex; position: fixed; bottom: 0; left: 0; right: 0; height: 62px; background: var(--surface); border-top: 1px solid var(--border); z-index: 1030; }
  .bottom-tabs a, .bottom-tabs button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-muted);
    font-size: .68rem; border: 0; background: none; min-height: 44px; }
  .bottom-tabs a.active { color: var(--primary); }
  .bottom-tabs i { font-size: 1.25rem; }
  /* list → cards */
  table.setu-table.cards thead { display: none; }
  table.setu-table.cards, table.setu-table.cards tbody, table.setu-table.cards tr, table.setu-table.cards td { display: block; width: 100%; }
  table.setu-table.cards tr { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: .6rem; padding: .5rem .75rem; background: var(--surface); }
  table.setu-table.cards td { border: 0; padding: .15rem 0; position: static !important; white-space: normal; box-shadow: none !important; }
  .grid-wrap { overflow: visible; max-height: none; border: 0; background: transparent; }
  table.setu-table.cards td[data-label]:not(.card-title):not(.card-check)::before { content: attr(data-label) ': '; color: var(--text-muted); font-size: .75rem; }
  table.setu-table.cards td.low-priority, table.setu-table.cards td.is-empty { display: none; }
  table.setu-table.cards td.card-check { float: left; width: auto; margin-right: .5rem; }
  .grid-toolbar { flex-wrap: wrap; }
  .grid-toolbar .search { flex: 1 1 100%; max-width: none; }
  .grid-toolbar .btn { white-space: nowrap; }
  .btn, .form-control, .form-select, .chip { min-height: 38px; }
}
@media print { .sidebar, .topbar, .footer, .bottom-tabs, .no-print { display: none !important; } .main { margin: 0; padding: 0; } }

/* settings: image fields (logo, favicon, login image) */
.set-img { display: flex; gap: .75rem; align-items: flex-start; flex-wrap: wrap; }
.set-img-box { width: 96px; height: 64px; border: 1px dashed var(--border); border-radius: var(--radius-sm); display: grid; place-items: center; background: repeating-conic-gradient(#f3f3f3 0 25%, #fff 0 50%) 0 / 12px 12px; overflow: hidden; text-align: center; }
.set-img-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
.brand-logo { height: 32px; width: auto; max-width: 160px; object-fit: contain; }
.guest-logo { height: 64px; width: auto; max-width: 240px; object-fit: contain; }
.login-split { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: center; }
@media (min-width: 768px) { .login-split { grid-template-columns: 1.1fr 1fr; } }
.login-pic img { width: 100%; max-height: 440px; object-fit: cover; border-radius: var(--radius); box-shadow: 0 10px 30px rgba(42,21,21,.12); }
.photo-current { width: 72px; height: 72px; border-radius: 12px; object-fit: cover; border: 1px solid var(--border); flex: 0 0 72px; }
.photo-none { display: grid; place-items: center; background: var(--surface-2, #faf6f6); color: var(--text-muted); font-size: 1.8rem; }

/* volunteer drives: done / being checked / pending legend (panel + member portal) */
.drive-bar-legend { display: flex; flex-wrap: wrap; gap: .25rem .9rem; }
.drive-bar-legend .dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; vertical-align: middle; }
.vol-set { display: flex; flex-direction: column; gap: .2rem; }
.vol-set .form-check { min-height: 0; }

/* give a role: Role · Inside · Which part · values */
.give-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .5rem .75rem; align-items: start; }
.give { display: grid; gap: 1rem; }
.give-h { font-weight: 700; margin-bottom: .45rem; display: flex; align-items: center; gap: .5rem; }
.give-n { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; }
.give-roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .5rem; }
.give-role { display: flex; gap: .5rem; align-items: flex-start; border: 1.5px solid var(--border); border-radius: 12px; padding: .6rem .7rem; cursor: pointer; background: var(--surface, #fff); }
.give-role:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent); }
.give-role input { margin-top: .25rem; }
.give-role-body { display: flex; flex-direction: column; line-height: 1.3; }
.give-role-part { font-size: .8rem; color: var(--primary); font-weight: 600; margin-top: .1rem; }
.give-role-desc { font-size: .78rem; color: var(--text-muted); margin-top: .15rem; }
.give-kinds { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
.give-kind { border: 1.5px solid var(--border); border-radius: 999px; padding: .3rem .85rem; cursor: pointer; display: inline-flex; gap: .4rem; align-items: center; }
.give-kind:has(input:checked) { border-color: var(--primary); color: var(--primary); font-weight: 600; }
.give-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .35rem .75rem; max-height: 320px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; padding: .6rem; }
.give-item { display: flex; align-items: center; gap: .45rem; padding: .25rem .35rem; border-radius: 8px; cursor: pointer; }
.give-item:hover { background: var(--bg, #f7f3f3); }
.give-item:has(input:checked) { background: color-mix(in srgb, var(--primary) 8%, transparent); font-weight: 600; }
.give-count { margin-left: auto; font-size: .75rem; color: var(--text-muted); font-weight: 400; white-space: nowrap; }
.give-group { grid-column: 1 / -1; font-size: .78rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; margin-top: .2rem; }
.give-summary { border-radius: 10px; padding: .6rem .8rem; background: #eaf7ef; border-left: 4px solid #2e9a5b; min-height: 2.4rem; }
.give-summary:empty { display: none; }

/* what an assignment covers: branch chip + batch / tag chips */
.scope-chips { display: inline-flex; flex-wrap: wrap; gap: .25rem; align-items: center; }
.scope-chip { display: inline-flex; align-items: center; gap: .25rem; border-radius: 999px; padding: .05rem .55rem; font-size: .78rem; line-height: 1.5; white-space: nowrap; border: 1px solid transparent; }
.scope-branch { background: #fdf0e2; color: #8a4b0f; border-color: #f2d3ad; font-weight: 600; }
.scope-batch { background: #e9f2fc; color: #1f4f80; border-color: #cbdff4; }
.scope-tag { background: #f1eafb; color: #53308a; border-color: #ddd0f1; }
.scope-whole, .scope-more { background: var(--bg, #f7f3f3); color: var(--text-muted); border-color: var(--border); }
.scope-all { background: #fbeeee; color: #7d2424; border-color: #efd0d0; font-weight: 600; }
.give-tools { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: .5rem; }
.give-search { position: relative; flex: 1 1 240px; max-width: 360px; }
.give-search i { position: absolute; left: .6rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: .85rem; }
.give-search input { padding-left: 1.9rem; }
.give-group[hidden], .give-item[hidden] { display: none !important; }

/* live search: results fade while the new ones load */
[data-live-results] { transition: opacity .15s; }
[data-live-results].live-loading { opacity: .45; pointer-events: none; }

/* duplicate check (Temp → Duplicates → one group): one question, one comparison table, merge choices only after "Yes" */
.d-contents { display: contents; }
.dupq-why { display: flex; gap: .7rem; align-items: flex-start; padding: .7rem .85rem; border-radius: var(--radius-sm); background: #faf6f6; border-left: 4px solid var(--border); font-size: .88rem; }
.dupq-why > i { font-size: 1.3rem; line-height: 1; }
.dupq-why.tone-danger { border-left-color: #b42318; } .dupq-why.tone-danger > i { color: #b42318; }
.dupq-why.tone-success { border-left-color: #1f7a4d; } .dupq-why.tone-success > i { color: #1f7a4d; }
.dupq-why.tone-warning { border-left-color: #d49a1a; } .dupq-why.tone-warning > i { color: #b07a0c; }
.dupq-why.tone-info { border-left-color: #2b6cb0; } .dupq-why.tone-info > i { color: #2b6cb0; }
.dupq-q { font-size: 1.25rem; font-weight: 700; margin: 1.1rem 0 .2rem; }
.diff-key { background: #fff4cc; border-radius: 4px; padding: 0 .3rem; }
.dup-answers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .7rem; }
.dup-ans { display: flex; gap: .75rem; align-items: flex-start; text-align: left; width: 100%; padding: .9rem 1rem; border-radius: var(--radius); border: 2px solid var(--border);
  background: var(--surface); color: var(--text); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.dup-ans:hover, .dup-ans:focus-visible { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(173,57,57,.1); outline: 0; }
.dup-ans > i { font-size: 1.6rem; line-height: 1; color: var(--text-2); }
.dup-ans b { display: block; font-size: 1rem; }
.dup-ans small { display: block; color: var(--text-2); font-size: .82rem; margin-top: .15rem; }
.dup-ans.is-yes > i { color: #1f7a4d; } .dup-ans.is-yes { border-color: #b9dcc8; }
.dup-ans.is-no > i { color: #b42318; }
.dup-pairs { border-top: 1px dashed var(--border); padding-top: .6rem; }
.dup-page:not(.is-merging) .merge-only { display: none !important; }
.dup-page:not(.is-merging) .pick-cell { pointer-events: none; }
.dup-page.is-merging .dupq .dup-answers, .dup-page.is-merging .dupq-q, .dup-page.is-merging .dupq-q + p { display: none; }
.dup-steps { display: grid; gap: .35rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .7rem .9rem; font-size: .88rem; }
.dup-table th.fld-h { min-width: 140px; }
.dup-table th.col-row { min-width: 210px; vertical-align: top; background: var(--surface); }
.colh-no { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 700; }
.colh-name { font-weight: 700; font-size: .95rem; margin-top: .15rem; }
.colh-src { font-size: .74rem; color: var(--text-muted); font-weight: 400; }
.colh-final { display: inline-block; margin-top: .3rem; font-size: .78rem; font-weight: 600; color: #1f7a4d; }
.colh-ctl { display: flex; gap: .6rem; align-items: center; margin-top: .45rem; font-weight: 400; }
.keep-btn { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .6rem; border-radius: 999px; border: 1px solid var(--border); cursor: pointer; font-size: .8rem; margin: 0; }
.keep-btn input { margin: 0; }
th.col-row.is-keep .keep-btn { background: var(--primary); border-color: var(--primary); color: #fff; }
th.col-row.is-keep { box-shadow: inset 0 3px 0 var(--primary); }
th.col-row.is-closed .colh-name { color: var(--text-2); }
.dup-table .col-row.is-off { opacity: .35; }
.dup-table tr.differs > th.fld, .dup-table tr.differs > td { background: #fffaeb; }
.dup-table tr.differs > th.fld { color: var(--text); font-weight: 600; }
.dup-table tr.always > th.fld, .dup-table tr.always > td { background: #faf8f8; }
.dup-table .res-col { min-width: 180px; font-weight: 600; background: #f6fbf8 !important; }
.merge-bar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .75rem 1rem; margin-bottom: 1rem;
  padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0px)); background: var(--surface); border: 1px solid var(--primary); border-radius: var(--radius); box-shadow: 0 -6px 18px rgba(0,0,0,.06); font-size: .9rem; }
.dup-table .pick-cell { position: relative; } /* keeps the hidden radio inside the scrolling table (it widened the page) */
.dup-page.is-merging .dup-table .col-row.is-closed { display: none; } /* merging: only the rows that can be merged */

/* self-update / registration links (public, phone first) */
.lk-who { display: grid; gap: .5rem; }
.lk-who-opt { display: flex; gap: .6rem; align-items: flex-start; padding: .65rem .75rem; border: 2px solid var(--border); border-radius: var(--radius); cursor: pointer; margin: 0; }
.lk-who-opt input { margin-top: .3rem; accent-color: var(--primary); }
.lk-who-opt b { display: block; } .lk-who-opt small { display: block; color: var(--text-2); }
.lk-who-opt:has(input:checked) { border-color: var(--primary); background: #fdf5f5; }
.lk-notfound { border: 1px solid #f1d9a6; background: #fff8e6; border-radius: var(--radius); padding: .75rem .85rem; }
.lk-people, .lk-kinds { display: grid; gap: .5rem; }
.lk-person, .lk-kind { display: flex; gap: .75rem; align-items: center; padding: .75rem .85rem; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); text-decoration: none; background: var(--surface); }
.lk-person:hover, .lk-kind:hover { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(173,57,57,.08); }
.lk-person b, .lk-kind b { display: block; } .lk-person small, .lk-kind small { display: block; color: var(--text-2); font-size: .82rem; }
.lk-ava { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%; background: #f3e3e3; color: var(--primary); display: grid; place-items: center; font-weight: 700; }
.lk-kind { align-items: flex-start; padding: 1rem; border-width: 2px; }
.lk-kind-i { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; background: #f3e3e3; color: var(--primary); display: grid; place-items: center; font-size: 1.3rem; }
.lk-kind.is-basic .lk-kind-i { background: #e8f4ee; color: #1f7a4d; }
.lk-kind-secs { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .45rem; }
.lk-kind-secs span { font-size: .72rem; border: 1px solid var(--border); border-radius: 999px; padding: .05rem .5rem; color: var(--text-2); }
.lk-kind > .bi-chevron-right, .lk-person > .bi-chevron-right { align-self: center; color: var(--text-muted); }
.lk-yesno { display: flex; gap: .5rem; }
.lk-yesno label { flex: 1; display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .55rem; border: 2px solid var(--border); border-radius: var(--radius); cursor: pointer; margin: 0; font-weight: 600; }
.lk-yesno label:has(input:checked) { border-color: var(--primary); background: #fdf5f5; color: var(--primary); }
.lk-saints { max-height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.lk-saint { display: flex; align-items: center; gap: .5rem; padding: .45rem .7rem; border-bottom: 1px solid var(--border); }
.lk-saint:last-child { border-bottom: 0; }
.lk-saint label { margin: 0; cursor: pointer; }
.lk-main { white-space: nowrap; color: var(--text-2); }
.lk-sub { font-weight: 600; font-size: .9rem; margin-top: .5rem; border-top: 1px dashed var(--border); padding-top: .6rem; }
/* Update links → Forms builder */
.lf-table tr.lf-off td:not(:nth-child(2)) { opacity: .45; }
.lf-fields { display: flex; flex-wrap: wrap; gap: .4rem .6rem; }
.lf-field { display: flex; flex-direction: column; gap: .15rem; font-size: .78rem; color: var(--text-2); margin: 0; min-width: 150px; }
.lf-st.is-req { border-color: var(--primary); color: var(--primary); font-weight: 600; }
.lf-st.is-opt { border-color: #8fc0a6; }
/* self-update form v2 — phone friendly */
.wz-on .wz-bar { position: sticky; bottom: 0; z-index: 5; background: var(--surface); margin: 1rem -1rem -1rem; padding: .75rem 1rem; padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
  border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 -6px 14px rgba(0,0,0,.05); }
.wz-bar .btn { min-height: 44px; padding-inline: 1.1rem; }
.wz-single.wz-on .wz-step + .wz-step:not(.d-none) { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--border); }
.wz-progress { display: none; }
.lk-intro { font-size: .9rem; color: var(--text-2); background: #faf6f6; border-radius: var(--radius-sm); padding: .5rem .7rem; }
.lk-help { color: var(--text-2); }
.lk-note { font-size: .85rem; background: #f6f9fc; border: 1px solid #dfe8f1; border-radius: var(--radius-sm); padding: .5rem .7rem; }
.lk-restored { background: #eef7f1; border: 1px solid #c9e6d4; border-radius: var(--radius-sm); padding: .4rem .7rem; margin-bottom: .5rem; }
.lk-choices { display: flex; flex-wrap: wrap; gap: .45rem; }
.lk-choices label { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .85rem; border: 2px solid var(--border); border-radius: 999px; cursor: pointer; margin: 0; font-weight: 500; }
.lk-choices label:has(input:checked) { border-color: var(--primary); background: #fdf5f5; color: var(--primary); }
.lk-choices input, .lk-yesno input { accent-color: var(--primary); }
@media (max-width: 575.98px) {
  .wz .form-control, .wz .form-select { font-size: 16px; min-height: 46px; }   /* 16px: phones do not zoom into the box */
  .wz-on .wz-nav { display: none; }
  .wz-on .wz-progress { display: block; margin: .3rem 0 1rem; }
  .wz-progress-t { font-size: .82rem; color: var(--text-2); margin-bottom: .3rem; }
  .wz-progress-bar { height: 6px; border-radius: 999px; background: #f0e3e3; overflow: hidden; }
  .wz-progress-bar span { display: block; height: 100%; background: var(--primary); border-radius: 999px; transition: width .2s; }
  .lk-yesno label, .lk-choices label { min-height: 46px; }
  .lk-choices label { flex: 1 1 calc(50% - .45rem); justify-content: center; }
}
.lf-texts-box { background: #faf8f8; border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: .6rem .75rem; margin: 0 0 .6rem; }
.lf-text-row { padding: .3rem 0; border-top: 1px dotted var(--border); }
.lf-q-row { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .6rem .75rem; margin-bottom: .5rem; background: var(--surface); }
.lf-q-row.is-new { border-style: dashed; }
.camp-bars { display: flex; flex-wrap: wrap; gap: .2rem .7rem; color: var(--text-2); margin-top: .15rem; }
/* Update requests */
.ur-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.ur-who { min-width: 0; }
.ur-status { flex: 0 0 auto; align-self: flex-start; white-space: nowrap; font-size: .75rem; padding: .35em .75em; }
.ur-table td, .ur-table th { padding: .5rem .75rem; }
.ur-decide { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.ur-decide label { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .7rem; margin: 0; cursor: pointer; font-size: .82rem; }
.ur-decide input { position: absolute; opacity: 0; pointer-events: none; }
.ur-decide label + label { border-left: 1px solid var(--border); }
.ur-decide label.is-yes:has(input:checked) { background: #1f7a4d; color: #fff; }
.ur-decide label.is-no:has(input:checked) { background: #6c757d; color: #fff; }
.ur-decide label:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: -2px; }
/* date picker (setu-fields.js): year → month → day */
.dp-wrap { position: relative; display: flex; align-items: stretch; }
.dp-wrap > input { flex: 1 1 auto; min-width: 0; padding-right: 2.6rem; }
.dp-btn { position: absolute; right: 2px; top: 2px; bottom: 2px; width: 2.4rem; border: 0; background: transparent; color: var(--primary); border-radius: var(--radius-sm); }
.dp-btn:hover { background: #fbf1f1; }
.dp { position: absolute; z-index: 1060; top: calc(100% + 4px); left: 0; width: 300px; max-width: 92vw; background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: 0 12px 30px rgba(0,0,0,.15); padding: .6rem; }
.dp-sheet { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-width: none; border-radius: 18px 18px 0 0; padding: .9rem .9rem calc(.9rem + env(safe-area-inset-bottom, 0px)); }
.dp-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: .2rem; }
.dp-step { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--primary); }
.dp-x { border: 0; background: none; font-size: 1.4rem; line-height: 1; color: var(--text-muted); padding: 0 .3rem; }
.dp-head { display: flex; align-items: center; justify-content: space-between; gap: .3rem; margin-bottom: .4rem; }
.dp-head b, .dp-title { font-weight: 700; }
.dp-title { border: 0; background: none; color: var(--text); padding: .25rem .6rem; border-radius: 8px; }
.dp-title:hover { background: #fbf1f1; }
.dp-nav { border: 1px solid var(--border); background: var(--surface); width: 36px; height: 36px; border-radius: 10px; font-size: 1.2rem; line-height: 1; color: var(--text); }
.dp-nav:disabled { opacity: .35; }
.dp-decades { display: flex; gap: .3rem; overflow-x: auto; padding-bottom: .4rem; margin-bottom: .3rem; scrollbar-width: thin; }
.dp-decades button { flex: 0 0 auto; border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: .2rem .6rem; font-size: .8rem; }
.dp-decades button.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.dp-grid { display: grid; gap: .3rem; }
.dp-g3 { grid-template-columns: repeat(3, 1fr); }
.dp-g7 { grid-template-columns: repeat(7, 1fr); }
.dp-grid button { border: 1px solid transparent; background: #f7f2f2; border-radius: 10px; padding: .55rem 0; font-size: .9rem; color: var(--text); }
.dp-g7 button { padding: .45rem 0; }
.dp-grid button:hover:not(:disabled) { border-color: var(--primary); }
.dp-grid button.today { border-color: #d9b2b2; }
.dp-grid button.sel { background: var(--primary); color: #fff; font-weight: 700; }
.dp-grid button:disabled { opacity: .3; }
.dp-wd span { text-align: center; font-size: .72rem; color: var(--text-muted); padding-bottom: .1rem; }
.dp-foot { display: flex; justify-content: space-between; margin-top: .5rem; }
.dp-foot button { border: 0; background: none; color: var(--primary); font-size: .85rem; padding: .2rem .3rem; }
.dp-sheet .dp-grid button { padding: .75rem 0; font-size: 1rem; }
.lf-note { font-size: .72rem; color: var(--text-2); max-width: 340px; line-height: 1.3; }

/* ───────── sign-in and update-link pages (layouts/guest.blade.php) ───────── */
body.guest { min-height: 100vh; font-family: Inter, 'Noto Sans Gujarati', system-ui, sans-serif; -webkit-font-smoothing: antialiased; background: #fbf6ef; color: #1d1517; }
body.guest h1, body.guest h2, body.guest h3, body.guest h4, body.guest h5 { font-family: 'Plus Jakarta Sans', 'Noto Sans Gujarati', Inter, sans-serif; letter-spacing: -.01em; }
.auth-mark { width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(135deg, var(--primary), #6e1f22); color: #fff; display: inline-grid; place-items: center; font-weight: 700; font-size: 1.35rem; font-family: 'Noto Sans Gujarati', sans-serif; box-shadow: 0 8px 20px rgba(173,57,57,.3); flex: none; }
/* shared form look */
body.guest .form-control, body.guest .form-select { border-radius: 12px; border: 1.5px solid #e6dccf; background: #fff; padding: .7rem .9rem; font-size: 1rem; transition: border-color .15s, box-shadow .15s; }
body.guest .form-control:focus, body.guest .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 .22rem rgba(173,57,57,.14); }
body.guest .form-label { font-weight: 600; font-size: .86rem; color: #4a3d3f; margin-bottom: .3rem; }
body.guest .btn-primary { background: linear-gradient(135deg, var(--primary), #8c2a2c); border: 0; border-radius: 999px; padding: .75rem 1.2rem; font-weight: 700; letter-spacing: .01em; box-shadow: 0 10px 24px rgba(173,57,57,.28); transition: transform .15s, box-shadow .15s, filter .15s; }
body.guest .btn-primary:hover, body.guest .btn-primary:focus { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(173,57,57,.34); filter: brightness(1.05); }
body.guest .btn-primary:active { transform: none; }
body.guest .btn-soft { border-radius: 999px; background: #fff; border: 1.5px solid #e6dccf; color: #6e1f22; font-weight: 600; }
body.guest .btn-soft:hover { border-color: var(--primary); color: var(--primary); background: #fff; }
body.guest a { color: var(--primary); }
body.guest .form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
body.guest .alert { border-radius: 14px; border: 0; }
/* centred card pages */
.auth-center { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.2rem; position: relative; overflow: hidden;
  background: radial-gradient(900px 500px at 85% -10%, rgba(240,162,59,.22), transparent 60%), radial-gradient(700px 500px at -10% 110%, rgba(173,57,57,.16), transparent 60%), #fbf6ef; }
.auth-card-wrap { width: 100%; position: relative; z-index: 1; }
.auth-head { display: flex; align-items: center; justify-content: center; gap: .75rem; text-decoration: none; color: inherit; margin-bottom: 1.2rem; }
.auth-head-t b { display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.25rem; color: #6e1f22; line-height: 1.15; }
.auth-head-t small { display: block; color: #7d6f70; }
.auth-center .card { border: 1px solid rgba(234,223,211,.9); border-radius: 24px; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); box-shadow: 0 24px 60px rgba(58,16,19,.12); padding: 1.6rem !important; }
.auth-center .card h5 { font-weight: 800; font-size: 1.3rem; }
/* split screen */
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: 1fr; }
.auth-brand { position: relative; color: #fff; overflow: hidden; background: linear-gradient(135deg, #a83232 0%, #c4443c 45%, #e9763a 100%); }
.auth-brand::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.1) 1.5px, transparent 1.5px); background-size: 24px 24px; }
.auth-brand::after { content: ''; position: absolute; width: 520px; height: 520px; right: -190px; bottom: -190px; border-radius: 50%; background: radial-gradient(circle, rgba(255,190,90,.35), transparent 68%); }
.auth-brand[style*="--pic"] { background: linear-gradient(135deg, rgba(168,50,50,.82), rgba(233,118,58,.72)), var(--pic) center / cover; }
.auth-brand-in { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 1.2rem; height: 100%; padding: 1.4rem 1.4rem 3.6rem; }
.auth-id { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: #fff; }
.auth-id b { display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.15rem; line-height: 1.15; } .auth-id small { display: block; opacity: .75; }
.auth-logo { height: 48px; width: auto; max-width: 170px; object-fit: contain; background: rgba(255,255,255,.95); border-radius: 12px; padding: 5px 8px; }
.auth-id .auth-mark { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); box-shadow: none; }
.auth-copy h2 { font-size: 1.5rem; font-weight: 800; line-height: 1.2; margin: 0 0 .5rem; color: #fff; }
.auth-copy p { color: rgba(255,255,255,.85); margin: 0 0 1rem; }
.auth-copy ul { list-style: none; padding: 0; margin: 0; display: none; gap: .75rem; flex-direction: column; }
.auth-copy li { display: flex; gap: .75rem; align-items: flex-start; }
.auth-copy li i { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); color: #f0a23b; font-size: 1.1rem; }
.auth-copy li b { display: block; font-size: .98rem; } .auth-copy li span { display: block; font-size: .85rem; color: rgba(255,255,255,.75); }
.auth-foot { display: none; margin-top: auto; font-size: .8rem; color: rgba(255,255,255,.65); }
.auth-panel { display: flex; align-items: flex-start; justify-content: center; padding: 0 1rem 2rem; margin-top: -2.4rem; position: relative; z-index: 2;
  background: transparent; }
.auth-box { width: 100%; max-width: 440px; background: #fff; border-radius: 24px; padding: 1.5rem; box-shadow: 0 24px 60px rgba(58,16,19,.18); }
.auth-box .card { border: 0; box-shadow: none; background: transparent; padding: 0 !important; }
.auth-box .card h5 { font-weight: 800; font-size: 1.35rem; }
.auth-box .btn-primary { margin-top: .4rem; }
@media (min-width: 992px) {
  .auth-shell { grid-template-columns: minmax(380px, 5fr) 6fr; }
  .auth-brand-in { padding: 2.6rem 3rem; min-height: 100vh; justify-content: space-between; gap: 2rem; }
  .auth-copy { margin: auto 0; max-width: 460px; } .auth-copy h2 { font-size: 2.3rem; } .auth-copy p { font-size: 1.05rem; } .auth-copy ul { display: flex; }
  .auth-foot { display: block; }
  .auth-panel { align-items: center; margin-top: 0; padding: 2rem; background: radial-gradient(700px 420px at 100% 0, rgba(240,162,59,.16), transparent 60%), #fbf6ef; }
  .auth-box { padding: 2.2rem; max-width: 470px; box-shadow: 0 30px 70px rgba(58,16,19,.14); border: 1px solid #f0e6da; }
}
.how-guest { z-index: 1040; background: rgba(255,255,255,.92); backdrop-filter: blur(6px); border-radius: 999px !important; box-shadow: 0 4px 14px rgba(0,0,0,.1); }
/* the update-link choice boxes and notes inside the new look */
body.guest .lk-who-opt { border-radius: 14px; border-width: 1.5px; border-color: #e6dccf; transition: border-color .15s, background .15s; } body.guest .lk-who-opt:hover { border-color: var(--primary); }
body.guest .lk-who-opt:has(input:checked) { background: #fdf3f1; box-shadow: 0 0 0 3px rgba(173,57,57,.1); }
body.guest .lk-notfound { border-radius: 14px; } body.guest .lk-intro { background: #fbf3ea; border-radius: 12px; }
body.guest .auth-id:hover, body.guest .auth-head:hover { text-decoration: none; }
/* inputs with an icon, phone box, small link row, language switch */
.auth-field { position: relative; } .auth-field > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #9a8c86; font-size: 1.05rem; pointer-events: none; }
.auth-field .form-control { padding-left: 2.6rem; } .auth-field .auth-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: #9a8c86; padding: .4rem .6rem; border-radius: 8px; } .auth-field .auth-eye:hover { color: var(--primary); } .auth-field .auth-eye i { position: static; transform: none; pointer-events: none; }
.auth-field:has(.auth-eye) .form-control { padding-right: 2.8rem; }
.auth-phone { display: flex; gap: .5rem; margin-bottom: .4rem; }
.auth-cc { position: relative; flex: 0 0 84px; } .auth-cc > span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #9a8c86; font-weight: 600; pointer-events: none; } .auth-cc .form-control { padding-left: 1.7rem; padding-right: .5rem; }
.auth-phone > .form-control { flex: 1; min-width: 0; letter-spacing: .02em; }
.auth-code { font-size: 1.6rem !important; letter-spacing: .5em; font-weight: 700; padding-left: 1.2em !important; }
.auth-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem .9rem; margin-top: 1.1rem; font-size: .85rem; }
.auth-links a { text-decoration: none; color: #6e1f22; font-weight: 600; padding: .25rem .5rem; border-radius: 999px; } .auth-links a:hover { background: #f7eded; }
.auth-lang { display: flex; justify-content: flex-end; gap: .25rem; margin-bottom: .8rem; }
.auth-lang a { text-decoration: none; padding: .2rem .7rem; border-radius: 999px; background: #f4ede4; color: #6e1f22; font-weight: 600; font-size: .8rem; } .auth-lang a.on { background: var(--primary); color: #fff; }
body.guest .auth-id, body.guest .auth-id:hover { color: #fff; } body.guest .auth-id b { color: #fff; }
body.guest .auth-field .form-control { padding-left: 2.6rem; } body.guest .auth-field:has(.auth-eye) .form-control { padding-right: 2.8rem; }
body.guest .auth-cc .form-control { padding-left: 1.8rem; padding-right: .4rem; }
body.guest .auth-links a { color: #6e1f22; }

/* small actions without reloading (public/js/setu-nav.js) */
.setu-loadbar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 3000; background: linear-gradient(90deg, transparent, var(--primary), transparent); background-size: 50% 100%; animation: setu-load 1s linear infinite; }
@keyframes setu-load { from { background-position: -50% 0; } to { background-position: 150% 0; } }
html.setu-busy, html.setu-busy * { cursor: progress; }
button[data-busy] { opacity: .65; }
/* turning globe behind the sign-in brand panel (public/js/auth-globe.js) */
.auth-globe { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
.auth-globe.ready { opacity: 1; }
/* the card shown when pointing at a Gurukul on the globe */
.globe-tip { position: absolute; left: 0; top: 0; z-index: 5; max-width: 260px; pointer-events: none; background: rgba(255,255,255,.97); color: #1d1517; border-radius: 12px; padding: .55rem .75rem; box-shadow: 0 12px 30px rgba(58,16,19,.28); font-size: .8rem; line-height: 1.35; }
.globe-tip b { display: block; font-size: .88rem; color: #6e1f22; } .globe-tip span { display: block; color: #4a3d3f; margin-top: .1rem; } .globe-tip small { display: block; margin-top: .25rem; color: #ad3939; font-weight: 600; }
.auth-brand.globe-pointing { cursor: pointer; }
.auth-brand::after { z-index: 0; }
.auth-net { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.2rem; padding: .4rem .85rem; border-radius: 999px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); font-size: .85rem; font-weight: 600; backdrop-filter: blur(4px); }
.auth-net::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.25); }
/* drag the sign-in globe: the panel shows a grab hand over the world; on phones vertical scrolling still works */
.auth-brand { touch-action: pan-y; }
.auth-brand.globe-dragging { cursor: grabbing; user-select: none; }
.auth-brand.globe-over { cursor: grab; } .auth-brand.globe-over.globe-pointing { cursor: pointer; }
/* "Gurukul Global Network" under the sign-in globe */
.globe-label { position: absolute; z-index: 2; transform: translateX(-50%); text-align: center; pointer-events: none; white-space: nowrap; opacity: 0; animation: globe-label-in 1s ease .8s forwards; }
.globe-label b { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .9rem; border-radius: 999px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3);
  backdrop-filter: blur(4px); font-family: 'Plus Jakarta Sans', Inter, sans-serif; font-size: .95rem; letter-spacing: .02em; color: #fff; }
.globe-label small { display: block; margin-top: .3rem; font-size: .74rem; color: rgba(255,255,255,.75); }
@keyframes globe-label-in { to { opacity: 1; } }