:root{
  /* SLSU-inspired light blue, white and dark blue palette. */
  --navy:#0b2d5c;
  --navy-2:#153f75;
  --sky:#49a8d8;
  --sky-soft:#e8f5fb;
  --white:#fff;
  --ink:#132238;
  --muted:#66768c;
  --line:#dce5ef;
  --surface:#f5f8fc;
  --success:#166534;
  --danger:#b42318;
  --warning:#9a6700;
  --shadow:0 14px 35px rgba(17,43,78,.09);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
*{box-sizing:border-box}
html,body{width:100%;min-height:100%;overflow-x:hidden}
body{margin:0;background:var(--surface);color:var(--ink);-webkit-text-size-adjust:100%}
img{max-width:100%;height:auto}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}
.login-shell{
  min-height:100vh;
  min-height:100dvh;
  width:100%;
  display:grid;
  place-items:center;
  padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  background:linear-gradient(145deg,var(--navy),var(--navy-2) 55%,#286d9a);
}
.login-card{
  width:min(430px,calc(100vw - 32px));
  max-width:430px;
  min-width:0;
  overflow:hidden;
  background:white;
  border-radius:24px;
  padding:clamp(24px,6vw,42px);
  box-shadow:0 25px 80px rgba(0,0,0,.25);
}
.brand-mark{width:82px;height:82px;border-radius:22px;background:var(--sky-soft);color:var(--navy);display:grid;place-items:center;font-weight:900;letter-spacing:.04em;font-size:22px;border:1px solid #bfe2f3}
.brand-mark.small{width:44px;height:44px;border-radius:13px;font-size:13px}

.login-logo-wrap{width:clamp(160px,42vw,220px);max-width:62%;aspect-ratio:1/1;display:block;overflow:hidden;border-radius:26px;margin:0 auto clamp(15px,4vw,20px);box-shadow:0 12px 30px rgba(11,45,92,.15)}
.login-logo{display:block;width:100%!important;height:100%!important;max-width:100%!important;object-fit:cover;margin:0!important;border-radius:0;box-shadow:none}
.login-card{text-align:center;min-width:0}
.login-card .google-slot{display:flex;justify-content:center;width:100%;min-width:0;overflow:hidden}
#googleButton>div,#googleButton iframe{max-width:100%!important}
.sidebar-logo{width:64px;height:64px;display:block;object-fit:contain;border-radius:14px;flex:0 0 auto}
.brand>div:last-child{min-width:0}
.brand strong{font-size:14px;line-height:1.2}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:800;color:var(--sky)}
h1{font-size:clamp(28px,8vw,38px);line-height:1.1;margin:.3rem 0 1rem;overflow-wrap:anywhere}
h2,h3{margin:0}
.muted,.panel p,.fine{color:var(--muted)}
.fine{font-size:12px;line-height:1.5}
.google-slot{margin:28px 0 14px}
.menu-toggle,.menu-close,.sidebar-backdrop{display:none}
.menu-toggle{width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--navy);padding:10px;place-items:center;box-shadow:0 5px 16px rgba(17,43,78,.08)}
.menu-toggle span{display:block;width:21px;height:2px;background:currentColor;border-radius:999px;margin:2.5px 0}
.menu-toggle:hover{background:var(--sky-soft);border-color:#bddfeb}
.menu-close{position:absolute;right:12px;top:12px;width:38px;height:38px;border:0;border-radius:10px;background:rgba(255,255,255,.09);color:#fff;font-size:28px;line-height:1;place-items:center;z-index:2}
.menu-close:hover{background:rgba(255,255,255,.17)}
.sidebar-backdrop{border:0;padding:0;margin:0;background:rgba(5,21,42,.52)}
.app-shell{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:100vh}
.sidebar{background:var(--navy);color:white;display:flex;flex-direction:column;padding:20px 16px;position:sticky;top:0;height:100vh}
.brand{display:flex;gap:12px;align-items:center;padding:6px 8px 22px}
.brand strong,.brand span{display:block}.brand span{font-size:12px;color:#b9d2e9;margin-top:2px}
nav{display:grid;gap:6px}
nav button,.ghost{border:0;background:transparent;color:#d9e7f5;text-align:left;padding:11px 13px;border-radius:10px}
nav button:hover,nav button.active{background:rgba(255,255,255,.12);color:white}
.nav-group{display:grid;gap:4px}
.nav-group-toggle{display:flex;justify-content:space-between;align-items:center;width:100%}
.nav-chevron{transition:transform .18s ease;font-size:13px}
.nav-group.is-open .nav-chevron{transform:rotate(180deg)}
.nav-submenu{display:grid;gap:3px;padding-left:15px}
.nav-submenu button{padding:9px 13px;border-left:2px solid rgba(73,168,216,.4);border-radius:0 9px 9px 0;font-size:13px}
.sidebar-footer{margin-top:auto;border-top:1px solid rgba(255,255,255,.14);padding-top:15px}
#userCard{font-size:12px;line-height:1.5;color:#d5e6f5;padding:0 10px 8px;min-width:0;overflow-wrap:anywhere}
.sidebar-footer .ghost{width:100%;margin-top:2px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);text-align:center;font-weight:800}
.sidebar-footer .ghost:hover{background:rgba(255,255,255,.14);color:#fff}
.content{padding:24px 32px 50px;min-width:0}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.topbar h2{font-size:30px}
.pill{background:var(--sky-soft);color:var(--navy);border:1px solid #c6e7f7;padding:8px 12px;border-radius:999px;font-size:12px;font-weight:800}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:20px}
.stat,.panel{background:white;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.stat{padding:20px}.stat span{display:block;color:var(--muted);font-size:12px}.stat strong{display:block;font-size:30px;margin-top:6px;color:var(--navy)}
.panel{padding:20px;margin-bottom:20px}
.panel-head{display:flex;justify-content:space-between;gap:20px;align-items:start;margin-bottom:18px}.panel-head p{margin:6px 0 0;font-size:13px}
.form-panel{max-width:1000px}
label{display:grid;gap:7px;font-size:13px;font-weight:700;color:#34465e;margin-bottom:15px}
input,select,textarea{width:100%;border:1px solid #cbd8e6;border-radius:10px;background:white;padding:11px 12px;color:var(--ink);outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--sky);box-shadow:0 0 0 3px rgba(73,168,216,.16)}
textarea{resize:vertical;line-height:1.45}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.grid-5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.grid-6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.grid-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.7fr);gap:20px}
.filter-box{padding:16px;background:#f8fbfe;border:1px solid var(--line);border-radius:12px;margin-bottom:15px}
.primary,.secondary,.danger{border-radius:10px;padding:10px 15px;font-weight:800;border:1px solid transparent}
.primary{background:var(--navy);color:white}.primary:hover{background:var(--navy-2)}
.primary:disabled{opacity:.45;cursor:not-allowed}
.secondary{background:white;color:var(--navy);border-color:#cbd8e6}
.danger{background:var(--danger);color:white}
.actions{display:flex;justify-content:flex-end;margin-top:18px}
.message-meta,.preview-bar{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:-7px;margin-bottom:15px;color:var(--muted);font-size:12px}
.message-meta select{width:auto;min-width:180px;padding:7px 10px}
.preview-bar{margin:15px 0}
.recipient-results{display:grid;gap:6px;max-height:240px;overflow:auto;margin:-4px 0 15px}
.recipient-row{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:white;cursor:pointer}
.recipient-row:hover,.recipient-row.selected{border-color:var(--sky);background:var(--sky-soft)}
.recipient-row small{color:var(--muted)}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.05em;padding:10px 8px;border-bottom:1px solid var(--line)}
td{padding:11px 8px;border-bottom:1px solid #edf2f7;vertical-align:top}
.status{font-size:11px;padding:4px 8px;border-radius:999px;font-weight:800;background:#edf2f7}
.status.submitted,.status.scheduled{background:#e7f6ed;color:var(--success)}
.status.failed{background:#feeceb;color:var(--danger)}
.preview-note{padding:12px;border-radius:10px;background:var(--sky-soft);color:var(--navy);font-size:13px;margin-bottom:12px}
.preview-note.bad{background:#fff3cd;color:#7a5200}
.toast{position:fixed;right:24px;top:24px;z-index:9999;max-width:420px;padding:12px 16px;border-radius:11px;background:#132238;color:white;box-shadow:var(--shadow);opacity:0;pointer-events:none;transform:translateY(-8px);transition:.2s}
.toast.show{opacity:1;transform:none}.toast.error{background:var(--danger)}
dialog{border:0;border-radius:18px;padding:0;box-shadow:0 30px 100px rgba(0,0,0,.28);width:min(560px,calc(100vw - 32px))}
dialog::backdrop{background:rgba(8,24,44,.55)}
dialog form{padding:24px}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
@media(max-width:950px){
  .app-shell{grid-template-columns:1fr}
  .menu-toggle{display:grid;flex:0 0 auto}
  .menu-close{display:grid}
  .sidebar{
    position:fixed;
    inset:0 auto 0 0;
    width:min(82vw,300px);
    height:100vh;
    height:100dvh;
    z-index:1200;
    padding:max(18px,env(safe-area-inset-top)) 16px max(18px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
    transform:translateX(-105%);
    transition:transform .24s ease;
    box-shadow:16px 0 45px rgba(5,21,42,.28);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .sidebar.is-open{transform:translateX(0)}
  .sidebar-backdrop{display:block;position:fixed;inset:0;z-index:1100;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility .2s ease}
  .sidebar-backdrop.is-open{opacity:1;visibility:visible;pointer-events:auto}
  body.menu-open{overflow:hidden}
  .sidebar .brand{padding-right:44px}
  .sidebar nav{grid-template-columns:1fr;gap:6px}
  .sidebar nav button{width:100%;text-align:left;padding:12px 13px;font-size:14px}
  .sidebar-footer{display:block;margin-top:auto;padding-top:15px}
  .sidebar-footer #userCard{padding:0 10px 10px}
  .sidebar-footer .ghost{width:100%;margin-top:2px;padding:10px 13px}
  .topbar{justify-content:flex-start;gap:12px}
  .topbar-title{min-width:0;flex:1}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-4,.grid-5,.grid-6{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .content{padding:18px max(14px,env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
  .grid-2,.grid-4,.grid-5,.grid-6,.grid-layout,.stats{grid-template-columns:minmax(0,1fr)}
  .topbar{align-items:flex-start;gap:12px;margin-bottom:18px}
  .topbar h2{font-size:clamp(24px,8vw,30px)}
  .pill{display:none}
  .sidebar-footer #userCard{font-size:11px;line-height:1.35}
  .panel,.stat{padding:16px}
  .panel-head{flex-wrap:wrap;gap:12px}
  .panel-head .secondary{width:100%}
  .message-meta,.preview-bar{flex-wrap:wrap;align-items:stretch}
  .message-meta select{width:100%;min-width:0}
  .preview-bar>*,.preview-bar button{width:100%}
  .recipient-row{flex-wrap:wrap}
  .actions{justify-content:stretch}
  .actions .primary{width:100%}
  .toast{left:14px;right:14px;top:max(14px,env(safe-area-inset-top));max-width:none}
  dialog form{padding:20px}
}
@media(max-width:430px){
  .login-shell{
    place-items:center;
    padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  }
  .login-card{border-radius:20px;padding:24px 18px}
  .login-logo-wrap{width:170px;max-width:58%;margin-bottom:15px;border-radius:24px}
  .eyebrow{font-size:10px;line-height:1.45;letter-spacing:.09em}
  .login-card h1{font-size:clamp(25px,7.6vw,31px);margin-top:.45rem}
  .login-card .muted{font-size:14px;line-height:1.5}
  .google-slot{margin:22px 0 12px}
  .fine{font-size:11px}
  .sidebar-logo{width:56px;height:56px}
  .brand strong{font-size:13px}
  .brand span{font-size:11px}
}
@media(max-width:360px){
  .sidebar{width:min(88vw,290px)}
  .login-card{padding:20px 14px}
  .login-logo-wrap{width:150px}
  .login-card h1{font-size:25px}
}
@media(prefers-reduced-motion:reduce){
  .sidebar,.sidebar-backdrop{transition:none!important}
}
@media(orientation:landscape) and (max-height:560px){
  .login-shell{place-items:start center;padding-top:max(12px,env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom))}
  .login-card{margin:auto 0;padding-top:22px;padding-bottom:22px}
  .login-logo-wrap{width:120px;margin-bottom:10px}
  .google-slot{margin:16px 0 10px}
}

/* Message merge fields — portal-side only (v1.1.12). */
.merge-tools{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:-3px 0 12px;color:var(--muted);font-size:12px}
.merge-tools>span:first-child{font-weight:800;color:#34465e}
.merge-select{width:auto;min-width:230px;max-width:100%;padding:7px 10px;border-radius:9px;background:#fff;color:var(--navy);font-size:12px;font-weight:700}
.merge-select:focus{border-color:var(--sky);box-shadow:0 0 0 3px rgba(73,168,216,.14)}
.merge-hint{min-width:0;overflow-wrap:anywhere}
.personalized-preview{margin:0 0 14px;padding:10px 12px;border:1px solid #c6e7f7;border-radius:10px;background:#f4fbfe;color:#24445f;font-size:12px;line-height:1.5;overflow-wrap:anywhere}
@media(max-width:430px){
  .merge-tools{align-items:flex-start}
  .merge-select{width:100%;min-width:0}
  .merge-hint{flex-basis:100%}
}

/* Individual student academic merge fields (v1.1.12). */
.individual-academic-fields{margin-top:4px}
.academic-hint{margin:-6px 0 16px}
#individualStudentAcademicFields.hidden + .academic-hint{display:none}

/* Birthday automation */
.automation-toggle{display:flex;grid-template-columns:none;align-items:center;gap:10px;padding:13px 14px;border:1px solid var(--line);border-radius:12px;background:#f8fbfe;margin-bottom:18px}
.automation-toggle input{width:18px;height:18px;flex:0 0 auto}
.automation-toggle span{font-weight:800;color:var(--navy)}
.automation-info{margin:16px 0 4px;padding:14px 16px;border:1px solid #c6e7f7;border-radius:12px;background:var(--sky-soft);color:var(--navy);font-size:13px;line-height:1.55}
.automation-status{margin-top:14px;font-size:13px;line-height:1.55;color:#34465e}
.automation-status p{margin:0 0 10px}
.automation-status .status{display:inline-block;white-space:normal}

/* Birthday 12-month plan (v1.1.16) */
.birthday-actions{gap:10px;flex-wrap:wrap}
@media(max-width:640px){.birthday-actions .secondary,.birthday-actions .primary{width:100%}}


/* v1.1.19 template management */
.template-row-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.template-row-actions button{padding:7px 10px;font-size:12px}
.template-message-cell{white-space:pre-wrap;min-width:220px;max-width:520px;line-height:1.45}
.template-editor-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
@media(max-width:640px){
  .template-row-actions{min-width:132px}
  .template-row-actions button{flex:1 1 auto}
  .template-editor-actions>button{flex:1 1 140px}
}

/* UniFi voucher merge field (v1.1.20) */
.voucher-dialog{width:min(680px,calc(100vw - 28px))}
.voucher-dialog .muted{margin:6px 0 18px;line-height:1.5}
.voucher-help{margin:-8px 0 15px}
.voucher-note{margin:0 0 16px;padding:12px 14px;border:1px solid #f0d88c;border-radius:10px;background:#fff8db;color:#684f00;font-size:12px;line-height:1.5}
.voucher-dialog input::placeholder{font-size:12px}
@media(max-width:640px){
  .voucher-dialog{width:calc(100vw - 20px);max-height:calc(100dvh - 24px);overflow:auto}
  .voucher-dialog .dialog-actions{position:sticky;bottom:0;background:#fff;padding-top:10px}
  .voucher-dialog .dialog-actions button{flex:1 1 0}
}

/* v1.1.35 user management */
.user-row-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-width:132px}
.user-row-actions button{padding:7px 10px;font-size:12px}
.user-row-actions button:disabled{opacity:.45;cursor:not-allowed}
.user-edit-dialog{width:min(560px,calc(100vw - 28px))}
.user-edit-dialog .muted{margin:6px 0 18px;line-height:1.5}
.user-active-toggle{display:flex;align-items:center;gap:10px;margin-top:14px;font-weight:700}
.user-active-toggle input{width:auto;margin:0;accent-color:var(--navy)}
@media(max-width:640px){
  .user-row-actions{min-width:118px}
  .user-row-actions button{flex:1 1 auto}
  .user-edit-dialog{width:calc(100vw - 20px);max-height:calc(100dvh - 24px);overflow:auto}
  .user-edit-dialog .dialog-actions{position:sticky;bottom:0;background:#fff;padding-top:10px}
  .user-edit-dialog .dialog-actions button{flex:1 1 0}
}

/* v1.3.0 voucher inventory and guest controls */
.voucher-panel{max-width:none}
.voucher-panel-head{align-items:center}
.voucher-toolbar{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:14px}
.voucher-toolbar label{width:min(520px,100%);margin:0}
.voucher-count{color:var(--muted);font-size:12px;font-weight:800;white-space:nowrap}
.voucher-table-scroll{width:100%;overflow:auto;border:1px solid var(--line);border-radius:12px;background:#fff}
.voucher-table{min-width:1080px}
.voucher-used-table{min-width:1580px}
.voucher-table th{position:sticky;top:0;z-index:1;background:#f7fbfe;white-space:nowrap}
.voucher-table td{white-space:nowrap}
.voucher-row{cursor:pointer;transition:background .15s ease}
.voucher-row:hover,.voucher-row:focus{background:var(--sky-soft);outline:none}
.voucher-row:focus{box-shadow:inset 3px 0 var(--sky)}
.voucher-code{font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;letter-spacing:.04em}
.live-indicator{color:var(--success);font-weight:800}
.voucher-pagination{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin-top:14px;color:var(--muted);font-size:12px;font-weight:800}
.voucher-pagination button{padding:7px 12px}
.voucher-pagination button:disabled{opacity:.4;cursor:not-allowed}
.voucher-status{text-transform:capitalize}
.voucher-status.active{background:#e7f6ed;color:var(--success)}
.voucher-status.expired{background:#feeceb;color:var(--danger)}
.voucher-status.unused{background:#e8f5fb;color:var(--navy)}
.voucher-admin-dialog{width:min(840px,calc(100vw - 28px));max-height:calc(100dvh - 32px);overflow:auto}
.voucher-admin-dialog form{padding:26px}
.voucher-dialog-heading{display:flex;justify-content:space-between;align-items:start;gap:20px;margin-bottom:20px}
.voucher-dialog-heading .eyebrow{margin:0 0 5px}
.voucher-dialog-close{border:0;background:#edf3f8;color:var(--navy);width:38px;height:38px;border-radius:11px;font-size:25px;line-height:1}
.voucher-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--line)}
.voucher-detail-item{display:grid;gap:5px;min-width:0;padding:13px 15px;background:#fff}
.voucher-detail-item span{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:800}
.voucher-detail-item strong{overflow-wrap:anywhere;font-size:13px}
.voucher-live-note,.voucher-control-panel{margin:16px 0 0;padding:14px 16px;border-radius:12px;font-size:12px;line-height:1.55}
.voucher-live-note{background:#fff8db;border:1px solid #f0d88c;color:#684f00}
.voucher-control-panel{background:#f4fbfe;border:1px solid #c6e7f7;color:#24445f}
.voucher-control-panel h4{margin:0 0 5px;color:var(--navy)}
.voucher-control-panel p{margin:0 0 13px}
.voucher-extend-row{display:flex;align-items:end;gap:10px;flex-wrap:wrap}
.voucher-extend-row label{margin:0;min-width:210px;flex:1}
.voucher-revoke-panel{background:#fff6f5;border-color:#f3c7c3}
.voucher-control-panel button:disabled{opacity:.4;cursor:not-allowed}
@media(max-width:640px){
  .voucher-toolbar{align-items:stretch;flex-direction:column}
  .voucher-count{white-space:normal}
  .voucher-pagination{justify-content:space-between}
  .voucher-admin-dialog{width:calc(100vw - 20px)}
  .voucher-admin-dialog form{padding:20px}
  .voucher-detail-grid{grid-template-columns:1fr}
  .voucher-extend-row>*{width:100%}
  .voucher-admin-dialog .dialog-actions{position:sticky;bottom:0;background:#fff;padding-top:10px}
}