:root {
    --bg: #0b0d16;
    --bg-grad-1: #14172a;
    --bg-grad-2: #0b0d16;
    --surface: #161927;
    --surface-2: #1d2132;
    --surface-light: #232739;
    --surface-hover: #272c41;
    --border: #2c3142;
    --border-soft: #232838;
    --primary: #7c6cf0;
    --primary-light: #b3a8ff;
    --primary-dark: #6354d8;
    --accent: #15d4cf;
    --accent-dark: #0fb3af;
    --danger: #f06363;
    --danger-dark: #d94f4f;
    --warning: #fbbf57;
    --success: #2bd4a4;
    --text: #eef0f8;
    --text-secondary: #a3a7bd;
    --text-muted: #71758c;
    --radius: 14px;
    --radius-sm: 10px;
    --radius-lg: 20px;
    --radius-pill: 999px;
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.25);
    --shadow: 0 8px 30px rgba(0,0,0,0.35);
    --shadow-lg: 0 24px 60px rgba(0,0,0,0.5);
    --glow: 0 0 0 4px rgba(124,108,240,0.16);
    --transition: 0.22s cubic-bezier(0.4,0,0.2,1);
    --font: 'Inter', system-ui, -apple-system, sans-serif;
    --font-display: 'Sora', system-ui, sans-serif;
    --body-glow-1: rgba(124,108,240,0.13);
    --body-glow-2: rgba(21,212,207,0.08);
    --card-grad-1: rgba(124,108,240,0.16);
    --card-grad-2: rgba(21,212,207,0.07);
    --tag-bg: rgba(124,108,240,0.16);
    --tag-border: rgba(124,108,240,0.2);
    --row-hover: rgba(124,108,240,0.05);
    --backdrop: rgba(5,6,12,0.7);
    --primary-on: #fff;
    --accent-on: #04201f;
}
@media (prefers-color-scheme: light) {
    :root {
        --bg: #f4f5fa;
        --bg-grad-1: #ffffff;
        --bg-grad-2: #eef0f7;
        --surface: #ffffff;
        --surface-2: #ffffff;
        --surface-light: #f1f2f8;
        --surface-hover: #e8e9f2;
        --border: #d9dbe7;
        --border-soft: #e7e8f0;
        --primary: #6354d8;
        --primary-light: #5a4bc8;
        --primary-dark: #4f41b8;
        --accent: #0c9d99;
        --accent-dark: #0a8682;
        --danger: #d94f4f;
        --danger-dark: #c43e3e;
        --warning: #d4920f;
        --success: #18a87f;
        --text: #1c1f2e;
        --text-secondary: #565a70;
        --text-muted: #888ca0;
        --shadow-sm: 0 1px 3px rgba(20,22,40,0.06);
        --shadow: 0 8px 24px rgba(20,22,40,0.1);
        --shadow-lg: 0 24px 50px rgba(20,22,40,0.16);
        --glow: 0 0 0 4px rgba(99,84,216,0.14);
        --body-glow-1: rgba(124,108,240,0.1);
        --body-glow-2: rgba(21,212,207,0.08);
        --card-grad-1: rgba(124,108,240,0.1);
        --card-grad-2: rgba(21,212,207,0.07);
        --tag-bg: rgba(99,84,216,0.1);
        --tag-border: rgba(99,84,216,0.18);
        --row-hover: rgba(99,84,216,0.05);
        --backdrop: rgba(20,22,40,0.4);
        --primary-on: #fff;
        --accent-on: #fff;
    }
}
* { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; -webkit-text-size-adjust:100%; color-scheme:light dark; }
body {
    font-family:var(--font);
    background:var(--bg);
    color:var(--text);
    min-height:100vh;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    background-image:
        radial-gradient(900px circle at 12% -5%, var(--body-glow-1), transparent 55%),
        radial-gradient(800px circle at 95% 8%, var(--body-glow-2), transparent 50%);
    background-attachment:fixed;
    letter-spacing:-0.011em;
}
h1,h2,h3,h4 { font-family:var(--font-display); letter-spacing:-0.02em; }
::-webkit-scrollbar { width:9px; height:9px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:var(--radius-pill); border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover { background:var(--surface-hover); background-clip:padding-box; }
::selection { background:rgba(124,108,240,0.35); color:#fff; }

.auth-container { min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:1.5rem; }
.auth-card {
    background:linear-gradient(165deg, var(--surface-2), var(--surface));
    border-radius:var(--radius-lg); padding:2.75rem 2.25rem;
    width:100%; max-width:780px; box-shadow:var(--shadow-lg);
    border:1px solid var(--border);
    overflow-y:auto; max-height:92vh; position:relative;
    animation:cardIn 0.5s cubic-bezier(0.16,1,0.3,1);
}
.auth-card::before {
    content:''; position:absolute; inset:0; border-radius:var(--radius-lg); padding:1px;
    background:linear-gradient(160deg, rgba(124,108,240,0.4), transparent 40%, transparent 70%, rgba(21,212,207,0.25));
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
@keyframes cardIn { from { opacity:0; transform:translateY(16px) scale(0.985); } to { opacity:1; transform:none; } }

.auth-logo { text-align:center; margin-bottom:2rem; font-family:var(--font-display); font-size:1.05rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--text); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.55rem; }
.auth-logo span:not(.icon) { background:linear-gradient(120deg, var(--primary-light), var(--accent)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.auth-logo .icon { display:none; }
.auth-logo .brand-mark { height:48px; width:auto; display:block; filter:drop-shadow(0 4px 12px rgba(0,0,0,0.35)); }
.auth-sub { text-align:center; color:var(--text-muted); font-size:0.85rem; margin-top:-1.2rem; margin-bottom:1.8rem; }

.form-group { margin-bottom:1.3rem; }
.form-group label { display:block; font-size:0.74rem; font-weight:600; color:var(--text-secondary); margin-bottom:0.45rem; text-transform:uppercase; letter-spacing:0.06em; }
.form-group input, .form-group select, .form-group textarea {
    width:100%; padding:0.8rem 1rem; background:var(--bg); border:1px solid var(--border);
    border-radius:var(--radius-sm); color:var(--text); font-size:0.92rem; font-family:var(--font);
    transition:var(--transition); outline:none;
}
.form-group input::placeholder, .form-group textarea::placeholder { color:var(--text-muted); }
.form-group input:hover, .form-group select:hover, .form-group textarea:hover { border-color:var(--surface-hover); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:var(--primary); box-shadow:var(--glow); background:var(--surface); }
.form-group select { cursor:pointer; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23a3a7bd' d='M6 8L0 0h12z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.4rem; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:540px) { .form-row { grid-template-columns:1fr; } }
.form-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0.8rem; }
@media (max-width:600px) { .form-row-3 { grid-template-columns:1fr; } }

.file-upload-area {
    border:1.5px dashed var(--border); border-radius:var(--radius-sm); padding:1rem; text-align:center;
    cursor:pointer; transition:var(--transition); background:var(--bg); position:relative;
}
.file-upload-area:hover { border-color:var(--primary-light); background:var(--row-hover); }
.file-upload-area .upload-icon { font-size:1.7rem; margin-bottom:0.25rem; }
.file-upload-area .upload-text { font-size:0.76rem; color:var(--text-muted); }
.file-upload-area input[type="file"] { position:absolute; inset:0; opacity:0; cursor:pointer; }
.file-name { font-size:0.76rem; color:var(--accent); margin-top:0.3rem; font-weight:600; word-break:break-all; }

/* ============================================================
 *  Lucide icon helper styling
 *  All icons rendered by icon() in app.js get class "i". They inherit
 *  currentColor and align nicely inside buttons, nav items, headers.
 * ============================================================ */
.i { flex-shrink: 0; vertical-align: -2px; }
.btn .i { width: 16px; height: 16px; }
.btn-sm .i, .btn-xs .i { width: 14px; height: 14px; }
.btn-lg .i { width: 18px; height: 18px; }
/* Sidebar nav icons sit in a fixed-width slot so labels align */
.nav-ico { display:inline-flex; align-items:center; justify-content:center; width: 22px; height: 22px; flex-shrink: 0; opacity: 0.85; }
.nav-ico .i { width: 18px; height: 18px; }
a.active .nav-ico, a:hover .nav-ico { opacity: 1; }
/* Page header icon (next to <h1>) — bigger, slightly tinted */
.page-header h1 .i { width: 24px; height: 24px; vertical-align: -4px; margin-right: 0.4rem; color: var(--primary-light); }
/* Stat tile icons */
.stat-ico .i { width: 22px; height: 22px; }
/* Empty-state icons — big */
.empty-ico .i { width: 48px; height: 48px; opacity: 0.5; }

.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:0.45rem;
    padding:0.72rem 1.5rem; border-radius:var(--radius-sm); font-weight:600; font-size:0.86rem;
    cursor:pointer; border:1px solid transparent; transition:var(--transition); font-family:var(--font);
    white-space:nowrap; letter-spacing:0.005em; position:relative; line-height:1;
}
.btn:disabled { opacity:0.5; cursor:not-allowed; }
.btn:active:not(:disabled) { transform:translateY(1px) scale(0.99); }
.btn-primary { background:linear-gradient(140deg, var(--primary), var(--primary-dark)); color:#fff; box-shadow:0 6px 18px rgba(124,108,240,0.32); }
.btn-primary:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 10px 26px rgba(124,108,240,0.45); }
.btn-accent { background:linear-gradient(140deg, var(--accent), var(--accent-dark)); color:var(--accent-on); box-shadow:0 6px 18px rgba(21,212,207,0.28); }
.btn-accent:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 10px 26px rgba(21,212,207,0.4); }
.btn-outline { background:var(--surface-light); border-color:var(--border); color:var(--text-secondary); }
.btn-outline:hover:not(:disabled) { border-color:var(--primary-light); color:var(--primary-light); background:var(--surface-hover); }
.btn-danger { background:linear-gradient(140deg, var(--danger), var(--danger-dark)); color:#fff; box-shadow:0 6px 18px rgba(240,99,99,0.25); }
.btn-danger:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 10px 26px rgba(240,99,99,0.38); }
.btn-sm { padding:0.5rem 1rem; font-size:0.78rem; }
.btn-xs { padding:0.4rem 0.75rem; font-size:0.74rem; border-radius:8px; }
.btn-block { width:100%; display:flex; }

.dashboard { display:none; min-height:100vh; }
.dashboard.active { display:flex; }
.sidebar {
    width:264px; background:linear-gradient(185deg, var(--surface-2), var(--surface));
    border-right:1px solid var(--border);
    padding:1.6rem 1rem; display:flex; flex-direction:column; position:fixed;
    top:0; left:0; bottom:0; z-index:100; transition:transform 0.32s cubic-bezier(0.4,0,0.2,1);
    overflow-y:auto;
    /* Cleaner scrollbar styling — only visible when actually needed */
    scrollbar-width:thin;
    scrollbar-color:var(--border) transparent;
}
.sidebar::-webkit-scrollbar { width:6px; }
.sidebar::-webkit-scrollbar-track { background:transparent; }
.sidebar::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
.sidebar::-webkit-scrollbar-thumb:hover { background:var(--border-soft, var(--text-muted)); }
/* Sidebar header: brand wordmark + Nexus tag stacked on the left,
   refresh button floats to the right. */
.sidebar-logo { font-family:var(--font-display); font-size:0.78rem; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; margin-bottom:1.8rem; padding:0.6rem 0.6rem; display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:0.5rem; }
.sidebar-logo .sidebar-logo-mark { display:flex; flex-direction:column; align-items:flex-start; gap:0.35rem; min-width:0; }
.sidebar-logo span:not(.icon) { background:linear-gradient(120deg, var(--primary-light), var(--accent)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.sidebar-logo .icon { display:none; }
.sidebar-logo .brand-mark { height:30px; width:auto; display:block; }

/* Refresh icon button — quiet by default, lights up on hover */
.sidebar-refresh {
    display:inline-flex; align-items:center; justify-content:center;
    width:34px; height:34px; padding:0; flex-shrink:0;
    background:transparent; border:1px solid var(--border-soft);
    border-radius:8px; color:var(--text-muted); cursor:pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}
.sidebar-refresh:hover { background:var(--surface-light); color:var(--primary-light); border-color:var(--primary); }
.sidebar-refresh:active { transform: rotate(-90deg); }
.sidebar-refresh.is-refreshing svg { animation: sidebar-refresh-spin 0.7s linear infinite; }
@keyframes sidebar-refresh-spin { to { transform: rotate(360deg); } }
.sidebar-nav { list-style:none; flex:1; }
.sidebar-nav .nav-label { font-size:0.66rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-muted); padding:0.5rem 0.7rem 0.4rem; }
.sidebar-nav li { margin-bottom:0.25rem; }
.sidebar-nav a {
    display:flex; align-items:center; gap:0.75rem; padding:0.72rem 0.8rem; border-radius:var(--radius-sm);
    color:var(--text-secondary); text-decoration:none; font-weight:500; font-size:0.9rem;
    transition:var(--transition); cursor:pointer; position:relative;
}
.sidebar-nav a .nav-ico { font-size:1.05rem; width:1.3rem; text-align:center; }
.sidebar-nav a:hover { background:var(--surface-light); color:var(--text); }
.sidebar-nav a.active {
    background:linear-gradient(135deg, rgba(124,108,240,0.22), rgba(124,108,240,0.08));
    color:var(--primary-light); font-weight:600;
}
.sidebar-nav a.active::before {
    content:''; position:absolute; left:-1rem; top:50%; transform:translateY(-50%);
    width:3px; height:60%; background:linear-gradient(var(--primary-light), var(--accent)); border-radius:var(--radius-pill);
}
.sidebar-nav .badge { margin-left:auto; background:linear-gradient(140deg, var(--danger), var(--danger-dark)); color:#fff; font-size:0.66rem; padding:2px 8px; border-radius:var(--radius-pill); font-weight:700; box-shadow:0 3px 8px rgba(240,99,99,0.4); }
.sidebar-footer { border-top:1px solid var(--border-soft); padding-top:1rem; margin-top:0.5rem; }
.sidebar-user { display:flex; align-items:center; gap:0.65rem; padding:0.5rem 0.6rem 0.8rem; }
.sidebar-user .avatar {
    width:38px; height:38px; border-radius:50%; flex-shrink:0;
    background:linear-gradient(140deg, var(--primary), var(--accent)); color:#fff;
    display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.95rem;
    font-family:var(--font-display); box-shadow:0 4px 12px rgba(124,108,240,0.35);
    background-size:cover; background-position:center;
}
.sidebar-user .meta { min-width:0; }
.sidebar-user .meta .name { font-size:0.84rem; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-user .meta .role { font-size:0.7rem; color:var(--text-muted); }
.main-content { flex:1; margin-left:264px; padding:1.75rem 2.25rem; min-height:100vh; transition:margin-left 0.32s ease; max-width:100%; }
@media (max-width:1024px) { .main-content { padding:1.5rem 1.5rem; } }
@media (max-width:768px) {
    .sidebar { transform:translateX(-100%); width:280px; box-shadow:var(--shadow-lg); }
    .sidebar.open { transform:translateX(0); }
    /* Top padding scales with the safe-area so on a notched iPhone in PWA
       mode the page content sits below the menu button rather than under it. */
    .main-content { margin-left:0; padding: calc(4.5rem + env(safe-area-inset-top, 0px)) 1.1rem 1.5rem; }
    .mobile-menu-btn { display:flex !important; }
}
.mobile-menu-btn {
    display:none;
    position:fixed;
    /* Respect the iOS notch / status bar (safe-area-inset-top) so the
       button never sits under the system UI. Same for left in case of
       landscape orientation with a notch. Minimum 1rem offset from edges
       to make the button comfortably tappable even on curved screens. */
    top: calc(1rem + env(safe-area-inset-top, 0px));
    left: calc(1rem + env(safe-area-inset-left, 0px));
    z-index:200;
    background:var(--surface-2);
    border:1px solid var(--border);
    color:var(--text);
    /* 48×48 — Apple/Material recommend ≥44, 48 is more comfortable */
    width:48px; height:48px;
    border-radius:12px;
    cursor:pointer;
    font-size:1.4rem;
    align-items:center;
    justify-content:center;
    box-shadow:0 4px 12px rgba(0,0,0,0.3);
    transition:var(--transition);
}
.mobile-menu-btn:hover { background:var(--surface-hover); }
.sidebar-backdrop { display:none; position:fixed; inset:0; background:var(--backdrop); backdrop-filter:blur(3px); z-index:99; }
.sidebar-backdrop.active { display:block; }

.page-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.6rem; }
.page-header h1 { font-size:1.6rem; font-weight:700; }
@media (max-width:540px) { .page-header h1 { font-size:1.3rem; } }

.card {
    background:var(--surface); border-radius:var(--radius); padding:1.6rem;
    border:1px solid var(--border-soft); box-shadow:var(--shadow-sm); margin-bottom:1.25rem;
    transition:var(--transition);
}
.card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.1rem; flex-wrap:wrap; gap:0.6rem; }
.card-title { font-family:var(--font-display); font-weight:700; font-size:1.05rem; }
@media (max-width:540px) { .card { padding:1.2rem; } }

.stats-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:1rem; margin-bottom:1.6rem; }
.stat-card {
    background:linear-gradient(160deg, var(--surface-2), var(--surface)); border-radius:var(--radius);
    padding:1.4rem 1.3rem; border:1px solid var(--border-soft); position:relative; overflow:hidden;
    transition:var(--transition);
}
.stat-card::after {
    content:''; position:absolute; top:-30%; right:-10%; width:120px; height:120px;
    background:radial-gradient(circle, var(--card-grad-1), transparent 70%);
}
.stat-card:hover { transform:translateY(-3px); border-color:var(--border); box-shadow:var(--shadow); }
.stat-card-link { display:block; }
.stat-card-link:hover { border-color:var(--primary-light); }
.stat-card .stat-value { font-family:var(--font-display); font-size:2.1rem; font-weight:800; color:var(--text); letter-spacing:-0.03em; line-height:1; }
.stat-card .stat-label { font-size:0.74rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; margin-top:0.5rem; font-weight:600; }
.stat-card .stat-ico { font-size:1.2rem; margin-bottom:0.6rem; display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center; background:var(--surface-light); border-radius:11px; }

.table-wrap { overflow-x:auto; border-radius:var(--radius-sm); border:1px solid var(--border-soft); -webkit-overflow-scrolling:touch; }
table { width:100%; border-collapse:collapse; font-size:0.84rem; min-width:560px; }
table th, table td { padding:0.8rem 1rem; text-align:left; border-bottom:1px solid var(--border-soft); }
table th { background:var(--surface-light); font-weight:700; color:var(--text-secondary); font-size:0.68rem; text-transform:uppercase; letter-spacing:0.06em; position:sticky; top:0; }
table tbody tr { transition:background 0.15s ease; }
table tbody tr:last-child td { border-bottom:none; }
table tr:hover td { background:var(--row-hover); }
.status-badge { display:inline-block; padding:3px 11px; border-radius:var(--radius-pill); font-size:0.7rem; font-weight:700; }
.status-pending { background:rgba(251,191,87,0.16); color:var(--warning); }
.status-approved { background:rgba(43,212,164,0.16); color:var(--success); }
.status-rejected { background:rgba(240,99,99,0.16); color:var(--danger); }
.role-tag { display:inline-block; padding:3px 10px; border-radius:var(--radius-pill); font-size:0.7rem; font-weight:600; background:var(--tag-bg); color:var(--primary-light); margin:2px; border:1px solid var(--tag-border); }

.calendar-nav { display:flex; align-items:center; justify-content:center; gap:0.5rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.calendar-nav select, .calendar-nav button { padding:0.6rem 1rem; background:var(--surface-light); border:1px solid var(--border); color:var(--text); border-radius:var(--radius-sm); cursor:pointer; font-size:0.88rem; font-family:var(--font); transition:var(--transition); }
.calendar-nav select:hover { border-color:var(--surface-hover); }
.calendar-nav button { font-weight:700; min-width:42px; }
.calendar-nav button:hover { background:var(--primary); border-color:var(--primary); color:#fff; }
.calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.calendar-day-header { text-align:center; font-weight:700; font-size:0.68rem; color:var(--text-muted); padding:0.5rem 0; text-transform:uppercase; letter-spacing:0.05em; }
.calendar-day {
    min-height:108px; border-radius:var(--radius-sm); background:var(--surface-light);
    border:1px solid transparent; cursor:pointer; display:flex; flex-direction:column;
    font-size:0.88rem; transition:var(--transition); position:relative;
    padding:5px; gap:3px; overflow:hidden;
}
.calendar-day .day-num { font-weight:600; font-size:0.82rem; color:var(--text-secondary); padding:1px 3px; flex-shrink:0; }
.calendar-day:hover { border-color:var(--primary); background:var(--surface-hover); }
.calendar-day.has-event { background:var(--surface-2); }
.calendar-day.today { border:2px solid var(--primary-light); padding:4px; }
.calendar-day.today .day-num {
    color:var(--primary-on); background:var(--primary); font-weight:800;
    border-radius:50%; width:22px; height:22px; display:flex; align-items:center; justify-content:center;
}
.calendar-day.other-month { color:var(--text-muted); opacity:0.4; cursor:default; background:transparent; }
.calendar-day.other-month:hover { border-color:transparent; background:transparent; }
/* "+" affordance shown only on empty admin-writer cells, only on hover */
.cal-add-hint {
    position:absolute; right:6px; bottom:4px; width:18px; height:18px;
    display:flex; align-items:center; justify-content:center;
    color:var(--text-muted); font-size:1.1rem; font-weight:300; line-height:1;
    opacity:0; transition:opacity 0.15s ease;
}
.calendar-day.clickable:hover .cal-add-hint { opacity:0.7; }
.cal-events { display:flex; flex-direction:column; gap:3px; overflow:hidden; }
.cal-event {
    font-size:0.68rem; font-weight:600; line-height:1.3; padding:2px 6px;
    border-radius:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    background:var(--primary); color:var(--primary-on); cursor:pointer;
    border-left:3px solid rgba(255,255,255,0.35); transition:var(--transition);
}
.cal-event:hover { filter:brightness(1.12); }
.cal-event.ev-available { background:var(--success); }
.cal-event.ev-maybe { background:var(--warning); color:#1c1f2e; }
.cal-event.ev-unavailable { background:var(--danger); }
.cal-event .ev-time { opacity:0.85; font-weight:700; margin-right:2px; }
.cal-more { font-size:0.66rem; font-weight:700; color:var(--text-muted); padding:1px 6px; cursor:pointer; }
.cal-more:hover { color:var(--primary-light); }
.cal-legend { display:flex; flex-wrap:wrap; gap:0.4rem 1.1rem; margin-top:1rem; font-size:0.74rem; color:var(--text-secondary); }
.cal-legend span { display:inline-flex; align-items:center; gap:0.4rem; }
.cal-legend .dot { width:11px; height:11px; border-radius:3px; }
@media (max-width:640px) {
    .calendar-day { min-height:78px; padding:3px; }
    .calendar-day .day-num { font-size:0.74rem; }
    .cal-event { font-size:0.6rem; padding:2px 4px; }
    .cal-event .ev-time { display:none; }
}

.modal-overlay { display:none; position:fixed; inset:0; background:var(--backdrop); backdrop-filter:blur(5px); z-index:1000; align-items:center; justify-content:center; padding:1rem; }
.modal-overlay.active { display:flex; animation:fadeIn 0.2s ease; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.modal {
    background:linear-gradient(170deg, var(--surface-2), var(--surface));
    border-radius:var(--radius-lg); padding:2rem; width:100%; max-width:560px; max-height:88vh;
    overflow-y:auto; box-shadow:var(--shadow-lg); border:1px solid var(--border); position:relative;
    animation:modalIn 0.32s cubic-bezier(0.16,1,0.3,1);
}
@keyframes modalIn { from { opacity:0; transform:translateY(20px) scale(0.97); } to { opacity:1; transform:none; } }
.modal h3 { font-size:1.2rem; margin-bottom:1.1rem; }
.modal-close { position:absolute; top:1.1rem; right:1.1rem; background:var(--surface-light); border:1px solid var(--border-soft); color:var(--text-secondary); width:34px; height:34px; border-radius:50%; cursor:pointer; font-size:1rem; display:flex; align-items:center; justify-content:center; transition:var(--transition); }
.modal-close:hover { background:var(--danger); border-color:var(--danger); color:#fff; transform:rotate(90deg); }

.toast-container { position:fixed; top:1.5rem; right:1.5rem; z-index:2000; display:flex; flex-direction:column; gap:0.6rem; }
@media (max-width:540px) { .toast-container { left:1rem; right:1rem; top:1rem; } }
.toast { background:var(--surface-2); border:1px solid var(--border); padding:0.9rem 1.3rem; border-radius:var(--radius-sm); box-shadow:var(--shadow-lg); animation:slideIn 0.35s cubic-bezier(0.16,1,0.3,1); font-weight:500; font-size:0.86rem; max-width:400px; display:flex; align-items:center; gap:0.6rem; }
.toast.success { border-left:3px solid var(--success); }
.toast.error { border-left:3px solid var(--danger); }
.toast.info { border-left:3px solid var(--primary); }
.toast::before { font-size:1rem; }
.toast.success::before { content:'✓'; color:var(--success); font-weight:800; }
.toast.error::before { content:'!'; color:var(--danger); font-weight:800; }
.toast.info::before { content:'i'; color:var(--primary); font-weight:800; font-style:italic; }
@keyframes slideIn { from { transform:translateX(120%); opacity:0; } to { transform:translateX(0); opacity:1; } }

.progress-bar-bg { height:8px; background:var(--surface-light); border-radius:var(--radius-pill); overflow:hidden; margin:0.35rem 0 0.5rem; }
.progress-bar-fill { height:100%; border-radius:var(--radius-pill); background:linear-gradient(90deg, var(--primary), var(--primary-light)); transition:width 0.6s ease; }
.progress-bar-fill.available { background:linear-gradient(90deg, var(--success), var(--accent)); }
.grid-2col { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
@media (max-width:900px) { .grid-2col { grid-template-columns:1fr; } }
.subtitle { color:var(--text-muted); font-size:0.85rem; }
a { color:var(--primary-light); text-decoration:none; transition:var(--transition); }
a:hover { color:var(--accent); }

.profile-hero {
    display:flex; align-items:center; gap:1.3rem; padding:1.7rem; margin-bottom:1.25rem;
    background:linear-gradient(135deg, var(--card-grad-1), var(--card-grad-2));
    border:1px solid var(--border-soft); border-radius:var(--radius); flex-wrap:wrap;
}
.profile-avatar {
    width:84px; height:84px; border-radius:50%; flex-shrink:0;
    background:linear-gradient(140deg, var(--primary), var(--accent)); color:#fff;
    display:flex; align-items:center; justify-content:center; font-weight:800; font-size:2rem;
    font-family:var(--font-display); box-shadow:0 10px 28px rgba(124,108,240,0.4);
    background-size:cover; background-position:center; position:relative; overflow:hidden;
    border:3px solid var(--surface-2);
}
.profile-avatar-edit { width:108px; height:108px; cursor:pointer; position:relative; }
.profile-avatar-edit .cam-overlay {
    position:absolute; inset:0; background:rgba(0,0,0,0.5); display:flex; align-items:center;
    justify-content:center; font-size:1.4rem; opacity:0; transition:var(--transition);
}
.profile-avatar-edit:hover .cam-overlay { opacity:1; }
.profile-avatar-edit input[type="file"] { position:absolute; inset:0; opacity:0; cursor:pointer; }
.profile-hero .p-name { font-family:var(--font-display); font-size:1.4rem; font-weight:700; }
.profile-hero .p-meta { color:var(--text-secondary); font-size:0.86rem; margin-top:0.2rem; }
.info-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:0.9rem; }
.info-item { background:var(--surface-2); border:1px solid var(--border-soft); border-radius:var(--radius-sm); padding:0.9rem 1.05rem; }
.info-item .info-label { font-size:0.68rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-muted); font-weight:700; margin-bottom:0.25rem; }
.info-item .info-value { font-size:0.92rem; color:var(--text); font-weight:500; word-break:break-word; }
.info-item.locked { position:relative; }
.info-item.locked::after { content:'🔒'; position:absolute; top:0.7rem; right:0.8rem; font-size:0.7rem; opacity:0.4; }

.event-card {
    background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius);
    padding:1.3rem; margin-bottom:1rem; transition:var(--transition); position:relative; overflow:hidden;
}
.event-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--border); transition:var(--transition); }
.event-card:hover { border-color:var(--border); box-shadow:var(--shadow); transform:translateY(-2px); }
.event-card.is-available::before { background:linear-gradient(var(--success), var(--accent)); }
.event-card.is-maybe::before { background:linear-gradient(var(--warning), #ff9c2c); }
.event-card.is-unavailable::before { background:linear-gradient(var(--danger), var(--danger-dark)); }
.event-card .ev-top { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; flex-wrap:wrap; }
.event-card .ev-title { font-family:var(--font-display); font-weight:700; font-size:1.05rem; }
.event-card .ev-detail { color:var(--text-secondary); font-size:0.84rem; margin-top:0.35rem; display:flex; flex-wrap:wrap; gap:0.3rem 1rem; }
.resp-pill { display:inline-flex; align-items:center; gap:0.35rem; padding:5px 12px; border-radius:var(--radius-pill); font-size:0.74rem; font-weight:700; white-space:nowrap; }
.resp-pill.available { background:rgba(43,212,164,0.15); color:var(--success); }
.resp-pill.unavailable { background:rgba(240,99,99,0.15); color:var(--danger); }
.resp-pill.maybe { background:rgba(251,191,87,0.18); color:var(--warning); }
.resp-pill.none { background:var(--surface-light); color:var(--text-muted); }
.ev-actions { display:flex; gap:0.5rem; margin-top:1rem; flex-wrap:wrap; }

.empty-state { text-align:center; padding:2.5rem 1rem; color:var(--text-muted); }
.empty-state .empty-ico { font-size:2.5rem; opacity:0.5; margin-bottom:0.6rem; }
.empty-state p { font-size:0.9rem; }

.grid-2col { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
@media (max-width:768px) { .grid-2col { grid-template-columns:1fr; } }
@media (max-width:480px) {
    .calendar-day { font-size:0.78rem; }
    .calendar-day-header { font-size:0.6rem; }
    .calendar-nav select, .calendar-nav button { padding:0.5rem 0.7rem; font-size:0.82rem; }
    .calendar-grid { gap:4px; }
}

.spinner { display:inline-block; width:1rem; height:1rem; border:2px solid rgba(255,255,255,0.3); border-top-color:#fff; border-radius:50%; animation:spin 0.7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.loading-overlay { display:none; position:fixed; inset:0; background:var(--backdrop); z-index:3000; align-items:center; justify-content:center; backdrop-filter:blur(3px); }
.loading-overlay.active { display:flex; }
.loading-overlay .spinner { width:2.5rem; height:2.5rem; border-width:3px; }

/* ============================================================
   Response Report Modal
   ============================================================ */
.response-report { max-width: 760px; }

.report-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0.6rem;
    margin: 0 0 1.4rem;
}
.report-stat {
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.8rem 0.6rem;
    text-align: center;
    border-top: 3px solid var(--c, var(--primary));
}
.report-stat.highlight {
    background: linear-gradient(160deg, rgba(124,108,240,0.08), var(--surface));
    box-shadow: 0 4px 12px rgba(124,108,240,0.15);
}
.report-stat-v { font-size: 1.6rem; font-weight: 800; color: var(--c, var(--text)); line-height: 1; margin-bottom: 0.2rem; }
.report-stat-l { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }

.response-bucket { margin-bottom: 1.2rem; }
.bucket-header {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.5rem 0.2rem; margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}
.bucket-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--bucket-color, var(--primary)); flex-shrink: 0; }
.bucket-label { font-weight: 700; font-size: 0.9rem; color: var(--text); }
.bucket-count {
    margin-left: auto;
    background: var(--surface-light);
    border-radius: var(--radius-pill);
    padding: 2px 10px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
}
.bucket-empty { color: var(--text-muted); font-size: 0.85rem; padding: 0.6rem 0.2rem; font-style: italic; }

.response-row {
    display: flex; align-items: center; gap: 0.8rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 0.5rem;
    background: var(--surface);
    transition: var(--transition);
}
.response-row.is-selected {
    background: linear-gradient(160deg, rgba(124,108,240,0.08), var(--surface));
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(124,108,240,0.18);
}
.resp-avatar {
    width: 42px; height: 42px; border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark, var(--accent)));
    background-size: cover; background-position: center;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; flex-shrink: 0;
}
.resp-meta { flex: 1; min-width: 0; }
.resp-name { font-weight: 700; color: var(--text); margin-bottom: 2px; }
.resp-sub { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 4px; }
.resp-roles { display: flex; flex-wrap: wrap; gap: 4px; }

.role-tag.mini { font-size: 0.7rem; padding: 2px 8px; }
.role-tag.matched { background: rgba(43,212,164,0.15); color: var(--success); border: 1px solid rgba(43,212,164,0.3); }

.resp-actions { display: flex; flex-direction: column; gap: 0.4rem; align-items: flex-end; min-width: 130px; }
.select-toggle {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.82rem; color: var(--text); cursor: pointer;
    user-select: none;
}
.select-toggle input { cursor: pointer; }
.role-select {
    background: var(--surface-light); border: 1px solid var(--border);
    color: var(--text); padding: 4px 8px; border-radius: var(--radius-sm);
    font-size: 0.75rem; max-width: 140px;
}
.role-select:disabled { opacity: 0.4; cursor: not-allowed; }

.report-footer {
    display: flex; gap: 0.6rem; justify-content: flex-end;
    padding-top: 1rem; border-top: 1px solid var(--border); margin-top: 1rem;
}

/* (Older rule kept as no-op; the canonical rules live below targeting
   .modal directly, since the HTML has no inner .modal-content element.) */
.modal.modal-large .modal-content { max-width: 820px; }

/* ============================================================
   Hours Tracker
   ============================================================ */
.hours-range {
    display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center;
    margin-bottom: 1.4rem;
    padding: 0.7rem;
    background: var(--surface-light);
    border-radius: var(--radius);
    border: 1px solid var(--border);
}
.hours-pill {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}
.hours-pill:hover { color: var(--text); border-color: var(--primary); }
.hours-pill.active {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark, var(--accent)));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 8px rgba(124,108,240,0.35);
}
.hours-range-dates {
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-family: 'Menlo', monospace;
}

.hours-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.4rem;
}
.hours-stat-card {
    padding: 1.4rem 1.2rem;
    border-radius: var(--radius);
    background: linear-gradient(160deg, var(--surface-2, var(--surface-light)), var(--surface));
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
    transition: var(--transition);
}
.hours-stat-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--card-accent, var(--primary));
}
.hours-stat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(20,22,40,0.10); }
.hours-stat-primary { --card-accent: var(--primary); }
.hours-stat-success { --card-accent: var(--success); }
.hours-stat-accent  { --card-accent: var(--accent, #ff9c2c); }

.hours-stat-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    font-weight: 700;
}
.hours-stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 0.4rem;
}
.hours-stat-sub {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.role-bar { margin: 1rem 0; }
.role-bar-head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 0.4rem; font-size: 0.85rem;
}
.role-bar-name { color: var(--text); font-weight: 600; }
.role-bar-val { color: var(--text-muted); font-size: 0.78rem; font-weight: 700; }
.role-bar-track {
    height: 10px; background: var(--surface-light); border-radius: 999px; overflow: hidden;
}
.role-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--accent, #ff9c2c));
    border-radius: 999px;
    transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.bar-mini { width: 100%; max-width: 140px; height: 6px; background: var(--surface-light); border-radius: 999px; overflow: hidden; }
.bar-mini-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--accent, #ff9c2c));
    border-radius: 999px;
}

/* ============================================================
   Active / Past event tabs
   ============================================================ */
.event-tabs {
    display: flex;
    gap: 0.3rem;
    padding: 0.3rem;
    background: var(--surface-light);
    border-radius: var(--radius);
    margin-bottom: 1rem;
    border: 1px solid var(--border);
    width: fit-content;
}
.event-tab {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}
.event-tab:hover { color: var(--text); }
.event-tab.active {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark, var(--accent)));
    color: #fff;
    box-shadow: 0 2px 8px rgba(124,108,240,0.30);
}

/* Past event card styling — faded look */
.event-card.is-past {
    opacity: 0.75;
    border-color: var(--border) !important;
}
.event-card.is-past::before { background: var(--text-muted) !important; }

/* Pills container in event card top (status + selection) */
.ev-pills {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: flex-end;
}

/* Selection-state pill (Pending / Confirmed) — shown to employees */
.select-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
}
.select-pill.pending {
    background: rgba(124,108,240,0.12);
    color: var(--primary);
    border: 1px dashed rgba(124,108,240,0.4);
}
.select-pill.confirmed {
    background: linear-gradient(135deg, rgba(43,212,164,0.18), rgba(124,108,240,0.18));
    color: var(--success);
    border: 1px solid rgba(43,212,164,0.4);
    box-shadow: 0 0 12px rgba(43,212,164,0.20);
}

/* ============================================================
   RESPONSE REPORT v2 — search, filters, bulk actions
   ============================================================ */

/* Big modal for reports — target .modal directly (the HTML has no inner
   .modal-content element). Earlier selectors targeted a child that doesn't
   exist, so size variants silently fell back to the base 560px max-width. */
.modal.modal-large  { max-width: 900px;  max-height: 92vh; }
.modal.modal-xlarge { max-width: 1400px; max-height: 96vh; width: 98vw; }

.rr-modal { display: flex; flex-direction: column; max-height: 90vh; }

.rr-header {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1rem;
}
.rr-title { margin: 0 0 0.4rem; font-size: 1.3rem; font-weight: 700; color: var(--text); }
.rr-event-name { font-weight: 600; color: var(--text); font-size: 1.05rem; margin-bottom: 0.3rem; }
.rr-event-meta { color: var(--text-muted); font-size: 0.88rem; margin-bottom: 0.6rem; }
.rr-roles { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.rr-role-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(124,108,240,0.14);
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 600;
}

/* Stat tiles act as filter buttons */
.rr-stats {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.6rem;
    margin-bottom: 1rem;
}
@media (max-width: 720px) {
    .rr-stats { grid-template-columns: repeat(3, 1fr); }
}
.rr-stat {
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.7rem 0.4rem;
    cursor: pointer;
    text-align: center;
    transition: var(--transition);
    color: var(--text);
}
.rr-stat:hover { transform: translateY(-1px); border-color: var(--primary); }
.rr-stat.active {
    background: linear-gradient(160deg, rgba(124,108,240,0.18), rgba(124,108,240,0.05));
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(124,108,240,0.18);
}
.rr-stat-v { font-size: 1.5rem; font-weight: 800; line-height: 1; margin-bottom: 0.3rem; }
.rr-stat-l { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); font-weight: 700; }
.rr-stat-avail .rr-stat-v { color: #2bd4a4; }
.rr-stat-maybe .rr-stat-v { color: #fbbf57; }
.rr-stat-unav  .rr-stat-v { color: #f06363; }
.rr-stat-selected {
    background: linear-gradient(160deg, rgba(124,108,240,0.22), rgba(43,212,164,0.12));
    border-color: var(--primary);
    cursor: default;
}
.rr-stat-selected .rr-stat-v { color: var(--primary); }

/* Controls row: search + role filter + bulk buttons */
.rr-controls {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.8rem;
    align-items: center;
}
.rr-search {
    flex: 1; min-width: 200px;
    padding: 9px 14px;
    background: var(--surface-light);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 10px;
    font-size: 0.9rem;
}
.rr-search:focus { outline: none; border-color: var(--primary); }
.rr-select {
    padding: 9px 12px;
    background: var(--surface-light);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 10px;
    font-size: 0.85rem;
    cursor: pointer;
}
.rr-bulk-btn {
    padding: 9px 14px;
    background: linear-gradient(135deg, var(--primary), var(--accent, #6354d8));
    color: #fff;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(124,108,240,0.3);
    transition: var(--transition);
}
.rr-bulk-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(124,108,240,0.4); }
.rr-bulk-clear {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    box-shadow: none;
}
.rr-bulk-clear:hover { color: var(--text); border-color: var(--text-muted); box-shadow: none; transform: none; }

/* List of people */
.rr-list {
    flex: 1;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    margin-bottom: 1rem;
    max-height: 65vh;
}
.rr-empty { padding: 3rem 1rem; text-align: center; color: var(--text-muted); }

.rr-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--border);
    transition: var(--transition);
    background: var(--surface);
}
.rr-row:last-child { border-bottom: none; }
.rr-row.is-selected {
    background: linear-gradient(90deg, rgba(43,212,164,0.10), transparent);
    border-left: 3px solid var(--success);
    padding-left: calc(1rem - 3px);
}

.rr-avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--primary), var(--accent, #6354d8));
    background-size: cover; background-position: center;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 0.95rem;
}

.rr-main { flex: 1; min-width: 0; }
.rr-line1 {
    display: flex; align-items: center; gap: 0.6rem;
    margin-bottom: 2px; flex-wrap: wrap;
}
.rr-name { font-weight: 700; color: var(--text); font-size: 0.95rem; }
.rr-line2 { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 4px; }
.rr-line3 { display: flex; flex-wrap: wrap; gap: 4px; }

.rr-badge {
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}
.rr-badge-avail { background: rgba(43,212,164,0.15); color: #1fbe8e; }
.rr-badge-maybe { background: rgba(251,191,87,0.18); color: #d4920f; }
.rr-badge-unav  { background: rgba(240,99,99,0.15); color: #d94f4f; }
.rr-badge-none  { background: var(--surface-light); color: var(--text-muted); }

.rr-mini-role {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--surface-light);
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 600;
    border: 1px solid var(--border);
}
.rr-mini-role.is-match { background: rgba(43,212,164,0.15); color: #1fbe8e; border-color: rgba(43,212,164,0.4); }

.rr-actions {
    display: flex; gap: 0.4rem; align-items: center; flex-shrink: 0;
}
.rr-role-select {
    padding: 6px 8px;
    background: var(--surface-light);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 8px;
    font-size: 0.75rem;
    max-width: 140px;
}
.rr-role-select:disabled { opacity: 0.4; cursor: not-allowed; }
.rr-toggle {
    padding: 8px 14px;
    border: 1px solid var(--border);
    background: var(--surface-light);
    color: var(--text-muted);
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}
.rr-toggle:hover { border-color: var(--primary); color: var(--text); }
.rr-toggle.is-on {
    background: linear-gradient(135deg, #2bd4a4, #1fbe8e);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(43,212,164,0.4);
}

/* Sticky footer */
.rr-footer {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 1rem; border-top: 1px solid var(--border);
    flex-wrap: wrap; gap: 0.8rem;
}
.rr-footer-info strong { color: var(--primary); font-size: 1.5rem; margin-right: 0.4rem; }
.rr-footer-actions { display: flex; gap: 0.6rem; }


/* ============================================================
   HOURS TRACKER v2 — pills, stat cards, bar charts
   ============================================================ */

/* Range row */
.ht-range-row {
    display: flex; gap: 0.8rem; align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.ht-pills {
    display: flex;
    gap: 0.3rem;
    background: var(--surface-light);
    padding: 0.3rem;
    border-radius: 12px;
    border: 1px solid var(--border);
}
.ht-pill {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 8px 16px;
    border-radius: 9px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}
.ht-pill:hover { color: var(--text); }
.ht-pill.active {
    background: linear-gradient(135deg, var(--primary), var(--accent, #6354d8));
    color: #fff;
    box-shadow: 0 2px 8px rgba(124,108,240,0.35);
}
.ht-range-dates {
    color: var(--text-muted);
    font-size: 0.82rem;
    background: var(--surface-light);
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    font-family: 'SF Mono', 'Menlo', monospace;
}

/* Stat cards row */
.ht-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.ht-stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.3rem 1.2rem;
    background: linear-gradient(160deg, var(--surface-2, var(--surface-light)), var(--surface));
    border: 1px solid var(--border);
    border-radius: 14px;
    position: relative;
    overflow: hidden;
    transition: var(--transition);
}
.ht-stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--accent);
}
.ht-stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(20,22,40,0.12); }
.ht-stat-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: rgba(124,108,240,0.12);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}
.ht-stat-card[style*="2bd4a4"] .ht-stat-icon { background: rgba(43,212,164,0.12); }
.ht-stat-card[style*="ff9c2c"] .ht-stat-icon { background: rgba(255,156,44,0.12); }
.ht-stat-card[style*="fbbf57"] .ht-stat-icon { background: rgba(251,191,87,0.15); }
.ht-stat-body { flex: 1; min-width: 0; }
.ht-stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: 0.3rem;
}
.ht-stat-value {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1;
    letter-spacing: -0.03em;
    margin-bottom: 0.3rem;
}
.ht-stat-unit {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 600;
    margin-left: 2px;
}
.ht-stat-sub { font-size: 0.78rem; color: var(--text-muted); }

/* Two-column charts grid */
.ht-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
@media (max-width: 900px) { .ht-grid-2 { grid-template-columns: 1fr; } }

/* Horizontal bar chart */
.ht-bars { padding: 0.4rem 0 0.2rem; }
.ht-bar-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 0.6rem 0;
}
.ht-bar-label {
    width: 130px;
    flex-shrink: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ht-bar-track {
    flex: 1;
    height: 30px;
    background: var(--surface-light);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}
.ht-bar-fill {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 12px;
    color: #fff;
    font-weight: 700;
    font-size: 0.78rem;
    border-radius: 8px;
    transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1);
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    min-width: 50px;
    box-sizing: border-box;
}

.ht-empty {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--text-muted);
}
.ht-empty-ico { font-size: 2.5rem; margin-bottom: 0.5rem; opacity: 0.6; }

/* Employee detail list */
.ht-search {
    padding: 8px 14px;
    background: var(--surface-light);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 10px;
    font-size: 0.85rem;
    min-width: 200px;
}
.ht-search:focus { outline: none; border-color: var(--primary); }

.ht-emp-list { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.4rem 0; }
.ht-emp-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: var(--transition);
}
.ht-emp-card:hover { border-color: var(--primary); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(20,22,40,0.06); }
.ht-emp-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--accent, #6354d8));
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 0.95rem;
    flex-shrink: 0;
}
.ht-emp-main { flex: 1; min-width: 0; }
.ht-emp-headline { display: flex; gap: 0.6rem; align-items: baseline; margin-bottom: 0.5rem; flex-wrap: wrap; }
.ht-emp-name  { font-weight: 700; color: var(--text); font-size: 0.95rem; }
.ht-emp-email { color: var(--text-muted); font-size: 0.76rem; }

.ht-emp-stack-row {
    margin-bottom: 0.4rem;
}
.ht-emp-stack {
    display: flex;
    height: 10px;
    background: var(--surface);
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid var(--border);
}
.ht-emp-roleseg {
    height: 100%;
    transition: width 600ms ease-out;
}
.ht-emp-legend {
    display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.ht-emp-roletag {
    font-size: 0.7rem; color: var(--text-muted);
    display: inline-flex; align-items: center; gap: 4px;
}
.ht-emp-rolesw {
    width: 9px; height: 9px; border-radius: 2px;
    display: inline-block;
}

.ht-emp-totals {
    text-align: right;
    min-width: 110px;
    flex-shrink: 0;
}
.ht-emp-hours {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1;
    letter-spacing: -0.02em;
}
.ht-emp-pay {
    color: var(--success);
    font-weight: 700;
    font-size: 0.9rem;
    margin-top: 0.2rem;
}
.ht-emp-events {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
}

.ht-select {
    padding: 8px 12px;
    background: var(--surface-light);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 10px;
    font-size: 0.82rem;
    cursor: pointer;
}

.ht-empty-mini { padding: 1rem; text-align: center; color: var(--text-muted); font-size: 0.85rem; }

/* ============================================================
   MOBILE TWEAKS for the employee My Hours view
   Inline styles can override CSS, but using `!important` lets
   these mobile rules win over the inline declarations.
   ============================================================ */
@media (max-width: 640px) {
    /* Smaller, tighter stat cards on phones */
    .ht-stat-card {
        padding: 0.9rem 0.9rem !important;
        gap: 0.6rem !important;
    }
    .ht-stat-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 1.1rem !important;
        border-radius: 9px !important;
    }
    .ht-stat-value {
        font-size: 1.35rem !important;
    }
    .ht-stat-label {
        font-size: 0.62rem !important;
    }
    .ht-stat-sub {
        font-size: 0.72rem !important;
    }

    /* Pills wrap onto their own line, dates pill becomes its own row */
    .ht-range-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.5rem !important;
    }
    .ht-pills {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .ht-pill {
        white-space: nowrap;
        font-size: 0.78rem !important;
        padding: 7px 12px !important;
    }
    .ht-range-dates {
        text-align: center;
        font-size: 0.76rem !important;
    }

    /* Bar chart: pull the label tighter */
    .ht-bar-label {
        font-size: 0.74rem !important;
        max-width: 90px !important;
        min-width: 60px !important;
    }
    .ht-bar-track { height: 26px !important; }
    .ht-bar-fill { font-size: 0.7rem !important; padding: 0 8px !important; min-width: 40px !important; }

    /* Employee detail card: stack content on narrow screens */
    .ht-emp-card {
        flex-wrap: wrap;
        padding: 0.8rem !important;
    }
    .ht-emp-totals {
        min-width: 100% !important;
        text-align: left !important;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 0.6rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--border);
        margin-top: 0.5rem;
    }
    .ht-emp-hours { font-size: 1.15rem !important; }

    /* Make the "Events Worked" table compact */
    .ht-grid-2 .table-wrap table { font-size: 0.78rem; }
    .ht-grid-2 .table-wrap th,
    .ht-grid-2 .table-wrap td { padding: 6px 6px; }

    /* Make modal padding tighter on phones */
    .modal.modal-large,
    .modal.modal-xlarge { padding: 1rem !important; }
    .rr-stats {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .rr-stat { padding: 0.5rem 0.3rem !important; }
    .rr-stat-v { font-size: 1.2rem !important; }
    .rr-stat-l { font-size: 0.62rem !important; }

    /* Response report row: wrap actions below on phones */
    .rr-row { flex-wrap: wrap !important; padding: 0.7rem 0.8rem !important; }
    .rr-main { min-width: calc(100% - 60px); }
    .rr-actions {
        margin-left: 58px;
        padding-top: 0.5rem;
        width: 100%;
        justify-content: flex-end !important;
    }
}

/* ============================================================
   Push 2/3: warning button + NEW staff badge
   ============================================================ */
.btn-warning {
    background: linear-gradient(140deg, var(--warning), #d4920f);
    color: #1c1f2e;
    box-shadow: 0 6px 18px rgba(251,191,87,0.28);
}
.btn-warning:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(251,191,87,0.42);
}

.badge-new {
    display: inline-block;
    background: linear-gradient(135deg, #2bd4a4, #15b89a);
    color: #04201f;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 2px 7px;
    border-radius: 6px;
    vertical-align: middle;
    margin-left: 4px;
    box-shadow: 0 2px 6px rgba(43,212,164,0.35);
}

/* ============================================================
   Universal paginator + capped panes
   ============================================================ */
.pager {
    display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap;
    justify-content: center; margin-top: 0.9rem;
    padding-top: 0.8rem; border-top: 1px solid var(--border);
}
/* Cap how tall a scrolling pane can grow; inner table scrolls if needed */
.pane-capped { max-height: 460px; overflow-y: auto; }
.pane-capped::-webkit-scrollbar { width: 8px; }
.pane-capped::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }

/* ============================================================
   MOBILE STAFF EXPERIENCE (#5)
   A native-app feel for staff (mostly on phones): bottom tab bar,
   sticky app header, larger touch targets, safe-area insets.
   Desktop (>768px) keeps the existing sidebar; the bottom bar and
   app header only appear on mobile and only for staff.
   ============================================================ */

/* The bottom tab bar + mobile app header are hidden by default
   (desktop). They are shown via .mobile-staff on <body> at <=768px. */
.staff-tabbar, .staff-appbar { display: none; }

@media (max-width: 768px) {
    /* When the staff mobile shell is active, free the content area from
       the sidebar offset and make room for the fixed top + bottom bars. */
    body.mobile-staff .sidebar { transform: translateX(-100%); }
    body.mobile-staff .mobile-menu-btn { display: none !important; }
    body.mobile-staff .main-content {
        margin-left: 0;
        padding: calc(env(safe-area-inset-top, 0px) + 4.2rem) 1rem
                 calc(env(safe-area-inset-bottom, 0px) + 5.6rem) 1rem;
    }

    /* ---- Sticky app header ---- */
    body.mobile-staff .staff-appbar {
        display: flex; align-items: center; justify-content: space-between;
        position: fixed; top: 0; left: 0; right: 0; z-index: 150;
        padding: calc(env(safe-area-inset-top, 0px) + 0.55rem) 1rem 0.55rem;
        background: rgba(13,15,24,0.82);
        backdrop-filter: saturate(140%) blur(14px);
        -webkit-backdrop-filter: saturate(140%) blur(14px);
        border-bottom: 1px solid var(--border-soft);
    }
    body.mobile-staff .staff-appbar .sab-title {
        font-family: var(--font-display); font-weight: 800; font-size: 1.15rem;
        letter-spacing: -0.02em; display: flex; align-items: center; gap: 0.5rem;
    }
    body.mobile-staff .staff-appbar .sab-ico {
        width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
        background-image: url('/assets/icon-192.png');
        background-size: cover; background-position: center;
        /* Hide any text content (legacy markup may still have "A" text) */
        font-size: 0; color: transparent;
    }
    body.mobile-staff .staff-appbar .sab-avatar {
        width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
        background: var(--surface-light) center/cover no-repeat;
        border: 2px solid var(--border);
        display: flex; align-items: center; justify-content: center;
        font-weight: 700; font-size: 0.85rem; color: var(--primary-light);
        cursor: pointer;
    }

    /* ---- Bottom tab bar ---- */
    body.mobile-staff .staff-tabbar {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
        padding: 0.4rem 0.3rem calc(env(safe-area-inset-bottom, 0px) + 0.4rem);
        background: rgba(13,15,24,0.9);
        backdrop-filter: saturate(140%) blur(16px);
        -webkit-backdrop-filter: saturate(140%) blur(16px);
        border-top: 1px solid var(--border-soft);
        justify-content: space-around;
    }
    body.mobile-staff .staff-tab {
        flex: 1; display: flex; flex-direction: column; align-items: center;
        gap: 2px; padding: 0.35rem 0.2rem; border: none; background: none;
        color: var(--text-muted); font-size: 0.62rem; font-weight: 700;
        letter-spacing: 0.01em; cursor: pointer; position: relative;
        transition: color 0.18s ease; -webkit-tap-highlight-color: transparent;
        border-radius: 12px; text-transform: uppercase;
    }
    body.mobile-staff .staff-tab .tab-ico {
        font-size: 1.35rem; line-height: 1; transition: transform 0.18s ease;
        display: inline-flex; align-items: center; justify-content: center;
    }
    body.mobile-staff .staff-tab .tab-ico .i { width: 22px; height: 22px; }
    body.mobile-staff .staff-tab.active { color: var(--primary-light); }
    body.mobile-staff .staff-tab.active .tab-ico { transform: translateY(-1px) scale(1.08); }
    body.mobile-staff .staff-tab.active::before {
        content: ''; position: absolute; top: -0.4rem; left: 50%; transform: translateX(-50%);
        width: 26px; height: 3px; border-radius: 3px;
        background: linear-gradient(90deg, var(--primary), var(--accent));
    }
    body.mobile-staff .staff-tab .tab-dot {
        position: absolute; top: 0.25rem; right: 50%; margin-right: -16px;
        min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
        background: var(--danger); color: #fff; font-size: 0.6rem; font-weight: 800;
        display: flex; align-items: center; justify-content: center; line-height: 1;
    }

    /* Hide the in-page header h1 on mobile staff (the appbar shows it) */
    body.mobile-staff .main-content > .page-header > h1 { display: none; }
    body.mobile-staff .main-content > .page-header {
        margin-bottom: 1rem; justify-content: flex-end;
    }
    /* If a page-header only had the h1, collapse its gap */
    body.mobile-staff .main-content > .page-header:empty { display: none; }

    /* Larger, comfier touch targets for staff */
    body.mobile-staff .btn { min-height: 44px; padding: 0.7rem 1.1rem; font-size: 0.92rem; }
    body.mobile-staff .btn-sm { min-height: 38px; }
    body.mobile-staff .btn-xs { min-height: 32px; }
    body.mobile-staff .btn-block { width: 100%; }

    /* Event cards feel more like tappable tiles */
    body.mobile-staff .card { border-radius: 18px; }

    /* Time inputs big enough to tap */
    body.mobile-staff input[type="time"],
    body.mobile-staff input[type="date"] { min-height: 46px; font-size: 1rem; }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .staff-tab, .staff-tab .tab-ico { transition: none !important; }
}

/* Staff event-card respond buttons: comfortable 3-up grid on phones */
@media (max-width: 768px) {
    body.mobile-staff .ev-respond-row { gap: 0.45rem; }
    body.mobile-staff .ev-respond-row .btn { flex: 1 1 calc(33.333% - 0.3rem); min-width: 0; padding: 0.6rem 0.4rem; }
    /* "Add to Calendar" goes full width on its own line */
    body.mobile-staff .ev-respond-row .btn:last-child { flex-basis: 100%; }
    /* My Events sort dropdown + tabs stack nicely */
    body.mobile-staff .event-tabs { width: 100%; }
    body.mobile-staff .event-tabs .event-tab { flex: 1; text-align: center; }
}

/* Multi-select rows used in the manual-invite picker (and any future similar UI) */
.mi-row { transition: background 0.12s ease; }
.mi-row:hover { background: var(--surface-light); }
.mi-row:has(.mi-check:checked) { background: rgba(124, 108, 240, 0.10); }

/* ============================================================
   Registration "Interested Roles" chips. Tablet/desktop = compact
   pills wrapping into rows. Mobile = full-width rows so they're
   easy to tap. Selection state driven entirely by the hidden
   checkbox so screen-readers and keyboard nav still work.
   ============================================================ */
.reg-role-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.6rem;
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-radius: 12px;
    min-height: 52px;
}
.reg-role-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.95rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
    min-height: 44px;            /* iOS-friendly touch target */
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
    font-size: 0.92rem;
    color: var(--text);
    line-height: 1.2;
}
.reg-role-chip:hover {
    border-color: var(--primary);
    background: var(--surface-hover);
}
.reg-role-chip-input {
    /* Hidden but accessible — keyboard tab + screen readers still find it. */
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}
.reg-role-chip-input:focus-visible + .reg-role-chip-label {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
    border-radius: 2px;
}
.reg-role-chip-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.reg-role-chip-label::before {
    /* Empty circle when unchecked; turns into a filled blue circle with
       a check glyph when the chip is selected. */
    content: '';
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--text-muted);
    border-radius: 50%;
    flex-shrink: 0;
    background: transparent center / 60% no-repeat;
    transition: background-color 0.12s ease, border-color 0.12s ease;
    display: inline-block;
}
.reg-role-chip:has(.reg-role-chip-input:checked) {
    background: rgba(124, 108, 240, 0.15);
    border-color: var(--primary);
    color: var(--text);
}
.reg-role-chip:has(.reg-role-chip-input:checked) .reg-role-chip-label::before {
    background-color: var(--primary);
    border-color: var(--primary);
    /* Inline SVG checkmark — guaranteed to render on every browser
       without font dependencies. */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8.5l3 3 6-7' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
}

/* Mobile (≤480 px): make each chip occupy its own row for tap comfort. */
@media (max-width: 480px) {
    .reg-role-chips {
        gap: 0.4rem;
        padding: 0.5rem;
    }
    .reg-role-chip {
        width: 100%;
        justify-content: flex-start;
        padding: 0.7rem 0.9rem;
        border-radius: 10px;
        min-height: 48px;
    }
}