/* Zetu Team — responsive application stylesheet */
:root {
  color-scheme: light;
  --green:#1B7A3D; --green-dark:#145D30; --dark-green:#0F4A26;
  --yellow:#F5C518; --white:#fff; --off-white:#F7F9F7;
  --page:#F4F7F4; --text-dark:#17231B; --text-muted:#64736A;
  --border:#DCE5DE; --error-red:#C83F45;
  --shadow:0 2px 8px rgba(15,74,38,.07),0 1px 2px rgba(15,74,38,.04);
  --shadow-lg:0 16px 40px rgba(15,74,38,.12);
  --radius:10px; --radius-lg:16px;
  --focus-ring:0 0 0 3px rgba(245,197,24,.32);
  --transition:180ms ease;
}
* { box-sizing:border-box; }
html { min-width:320px; scroll-behavior:smooth; }
body {
  margin:0; min-height:100vh; background:var(--page); color:var(--text-dark);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p { margin-top:0; }
h1,h2,h3,h4 { color:var(--dark-green); line-height:1.25; }
h1 { font-size:clamp(1.7rem,3vw,2.25rem); }
h2 { font-size:1.4rem; }
h3 { font-size:1.1rem; }
p { margin-bottom:1rem; }
a { color:var(--green); text-underline-offset:3px; }
a:hover { color:var(--dark-green); }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
img { max-width:100%; }
:focus-visible { outline:0; box-shadow:var(--focus-ring); }

/* Shared layout */
.container { width:min(100% - 2.5rem,1200px); margin-inline:auto; }
.section { padding:2rem 0; }
.section--padded { padding:clamp(2.5rem,7vh,5rem) 0; }
.flex { display:flex; align-items:center; gap:1rem; }
.flex--between { justify-content:space-between; }
.flex--start { align-items:flex-start; }
.grid { display:grid; gap:1.5rem; }
.u-text-center,.text-center { text-align:center; }
.u-text-danger { color:var(--error-red); }
.u-text-green { color:var(--green); }
.u-mt-2,.mt-2 { margin-top:1rem; }
.u-mb-2,.mb-2 { margin-bottom:1rem; }
.mt-1 { margin-top:.5rem; } .mb-1 { margin-bottom:.5rem; }
.u-hidden { display:none!important; }

/* Header */
.site-header {
  position:relative; z-index:10; background:var(--green); color:var(--white);
  padding:.95rem 0; box-shadow:0 2px 8px rgba(15,74,38,.12);
}
.site-header .container { display:flex; align-items:center; justify-content:space-between; }
.brand-wordmark { color:var(--white); font-size:1.25rem; font-weight:800; letter-spacing:-.035em; text-decoration:none; }
.brand-wordmark span { color:var(--yellow); }
.brand-wordmark:hover { color:var(--white); opacity:.92; text-decoration:none; }
.header-actions { display:flex; align-items:center; gap:.75rem; }

/* Cards and authentication screens */
.card {
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow); padding:clamp(1.35rem,3vw,2rem);
}
.card--padded { padding:2rem; }
.section > .container > .card { width:100%; }
body:has(#login-form) main .container,
body:has(#forgot-password-form) main .container,
body:has(#reset-password-form) main .container,
body:has(#verify-form) main .container,
body:has(#setup-password-form) main .container {
  display:flex; justify-content:center;
}
body:has(#login-form) .card,
body:has(#forgot-password-form) .card,
body:has(#reset-password-form) .card,
body:has(#verify-form) .card,
body:has(#setup-password-form) .card {
  width:min(100%,440px)!important; margin:0 auto!important;
}
body:has(#login-form) .section--padded,
body:has(#forgot-password-form) .section--padded,
body:has(#reset-password-form) .section--padded,
body:has(#verify-form) .section--padded,
body:has(#setup-password-form) .section--padded { padding:clamp(2rem,8vh,5.5rem) 0; }

/* Buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:42px; border:1px solid transparent; border-radius:9px;
  padding:.65rem 1.15rem; font-size:.92rem; font-weight:650; line-height:1.2;
  text-decoration:none; transition:background var(--transition),border-color var(--transition),transform var(--transition),box-shadow var(--transition);
}
.btn:hover { text-decoration:none; }
.btn:active { transform:translateY(1px); }
.btn:disabled { opacity:.58; cursor:not-allowed; }
.btn--primary { background:var(--green); color:var(--white); }
.btn--primary:hover { background:var(--green-dark); color:var(--white); }
.btn--accent { background:var(--yellow); color:var(--dark-green); }
.btn--accent:hover { background:#E9B900; color:var(--dark-green); }
.btn--ghost { background:transparent; color:var(--green); border-color:var(--green); }
.btn--ghost:hover { background:rgba(27,122,61,.07); }
.btn--danger { color:var(--error-red); background:#fff; border-color:var(--error-red); }
.btn--danger:hover { background:#FFF4F4; }
.btn--full { width:100%; }
.btn-spinner { display:none; width:15px; height:15px; border:2px solid currentColor; border-top-color:transparent; border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* Forms */
.form { width:100%; max-width:640px; }
.form-group { margin-bottom:1.1rem; }
.form-group label { display:block; margin-bottom:.42rem; color:var(--text-dark); font-size:.9rem; font-weight:650; }
.form-group label .req { color:var(--green); }
input,select,textarea {
  display:block; width:100%; min-height:44px; padding:.68rem .8rem;
  color:var(--text-dark); background:#fff; border:1px solid #CBD8CE;
  border-radius:8px; outline:none; transition:border-color var(--transition),box-shadow var(--transition);
}
input::placeholder,textarea::placeholder { color:#98A59C; }
input:focus,select:focus,textarea:focus { border-color:var(--green); box-shadow:var(--focus-ring); }
input.error,select.error,textarea.error { border-color:var(--error-red); }
textarea { min-height:110px; resize:vertical; }
input[type=checkbox],input[type=radio] { width:auto; min-height:0; accent-color:var(--green); }
.form-actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.35rem; }
.field-error { display:block; margin-top:.3rem; color:var(--error-red); font-size:.82rem; }
.file-input { position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; }
.file-label { display:inline-flex; align-items:center; gap:.5rem; padding:.65rem 1rem; border:1px dashed var(--border); border-radius:8px; cursor:pointer; color:var(--text-muted); }
.file-label:hover { border-color:var(--green); color:var(--green); }
.file-name,.hint { margin-top:.35rem; color:var(--text-muted); font-size:.82rem; }
.code-input { font-size:1.6rem; letter-spacing:.5rem; text-align:center; font-weight:700; }
.checkbox-row { display:flex; align-items:flex-start; gap:.6rem; font-size:.9rem; line-height:1.45; cursor:pointer; }
.checkbox-row input { margin-top:.25rem; }
.pw-checks { list-style:none; padding:0; margin:.5rem 0; color:var(--text-muted); font-size:.82rem; }
.pw-checks li.ok { color:var(--green); }

/* Notices and feedback */
.alert { padding:.85rem 1rem; margin-bottom:1rem; border:1px solid transparent; border-radius:9px; font-size:.9rem; }
.alert--error { color:#9F252B; background:#FFF1F1; border-color:#F2CACA; }
.alert--success { color:var(--dark-green); background:#EFF8F1; border-color:#CDE6D2; }
.alert--info { color:#755900; background:#FFF9E5; border-color:#F2E3A5; }
.unpaid-notice { margin-bottom:1.25rem; padding:1rem 1.1rem; background:#FFFAE9; border:1px solid #F0E1A7; border-left:4px solid var(--yellow); border-radius:9px; }
.unpaid-notice__title { display:flex; align-items:center; gap:.5rem; margin-bottom:.35rem; color:#624B00; font-size:.9rem; font-weight:750; }
.unpaid-notice__message { margin:0; color:#514A34; font-size:.88rem; line-height:1.5; }
.unpaid-notice__reminder { padding-top:.7rem; margin-top:.7rem; border-top:1px solid #F0E1A7; color:var(--text-muted); font-size:.83rem; }

/* Admin application shell */
.admin-layout { display:grid; grid-template-columns:250px minmax(0,1fr); min-height:calc(100vh - 64px); }
.admin-sidebar { position:sticky; top:0; height:100vh; overflow-y:auto; padding:1.5rem 0; color:#fff; background:var(--dark-green); }
.admin-sidebar a { color:rgba(255,255,255,.86); }
.admin-sidebar a:hover,.admin-sidebar a.active { color:var(--yellow); text-decoration:none; }
.admin-sidebar .nav-group { margin-bottom:1.5rem; }
.admin-sidebar .nav-label { display:block; padding:0 1.5rem .5rem; color:rgba(255,255,255,.55); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; }
.admin-sidebar .nav-link { display:block; padding:.68rem 1.5rem; border-left:3px solid transparent; font-size:.9rem; font-weight:550; }
.admin-sidebar .nav-link:hover { background:rgba(255,255,255,.06); border-left-color:var(--yellow); }
.admin-sidebar .nav-link.active { color:var(--yellow); background:rgba(245,197,24,.12); border-left-color:var(--yellow); }
.admin-main { min-width:0; min-height:100vh; padding:2rem clamp(1rem,3vw,2rem); background:var(--page); }

/* Data displays */
.grid { display:grid; gap:1.25rem; }
.counters { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem; margin-bottom:1.75rem; }
.counter,.status-card { padding:1.35rem; background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow); }
.counter__label,.status-card .status-title { margin-bottom:.45rem; color:var(--text-muted); font-size:.76rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.counter__value { color:var(--dark-green); font-size:2rem; font-weight:800; }
.counter__value--green { color:var(--green); } .counter__value--yellow { color:#876800; } .counter__value--red { color:var(--error-red); }
.status-card { text-align:center; }
.status-card .status-value { margin:.4rem 0; font-size:2rem; font-weight:800; }
.status-card .status-note { color:var(--text-muted); font-size:.85rem; }
.table-wrap { width:100%; overflow-x:auto; }
table { width:100%; border-collapse:collapse; overflow:hidden; background:#fff; border:1px solid var(--border); border-radius:9px; }
th,td { padding:.8rem .9rem; border-bottom:1px solid var(--border); text-align:left; font-size:.88rem; }
th { color:var(--dark-green); background:#F1F5F1; font-size:.73rem; font-weight:750; letter-spacing:.05em; text-transform:uppercase; }
tbody tr:last-child td { border-bottom:0; }
tbody tr:hover { background:#F8FBF8; }
.table-actions { display:flex; flex-wrap:wrap; gap:.5rem; }
.status-pill { display:inline-flex; align-items:center; padding:.28rem .7rem; border:1px solid transparent; border-radius:999px; font-size:.75rem; font-weight:750; letter-spacing:.02em; text-transform:uppercase; }
.status-pill--submitted { color:#765B00; background:#FFF7D9; border-color:#F0E1A7; }
.status-pill--approved { color:var(--green); background:#EDF7EF; border-color:#CDE6D2; }
.status-pill--needs_update { color:var(--error-red); background:#FFF1F1; border-color:#F2CACA; }

/* Onboarding wizard */
.progress-indicator { display:flex; align-items:center; gap:.5rem; margin-bottom:1.5rem; padding-bottom:1rem; border-bottom:1px solid var(--border); overflow-x:auto; }
.progress-step { display:flex; min-width:70px; flex-direction:column; align-items:center; gap:.4rem; color:var(--text-muted); font-size:.74rem; font-weight:650; }
.progress-step .step-ring { display:flex; width:28px; height:28px; align-items:center; justify-content:center; border:2px solid var(--border); border-radius:50%; font-size:.8rem; font-weight:800; }
.progress-step.completed .step-ring { color:#fff; background:var(--green); border-color:var(--green); }
.progress-step.current .step-ring { color:var(--dark-green); background:var(--yellow); border-color:var(--yellow); }
.progress-step.completed .step-label,.progress-step.current .step-label { color:var(--dark-green); }
.progress-connector { flex:1; min-width:14px; height:2px; background:var(--border); }
.progress-connector.completed { background:var(--green); }
.form-section { margin-bottom:1.75rem; padding-bottom:1.4rem; border-bottom:1px solid var(--border); }
.form-section:last-child { border:0; margin-bottom:0; padding-bottom:0; }
.form-section__header { display:flex; align-items:center; gap:.75rem; margin-bottom:1.1rem; }
.form-section__number { display:flex; width:29px; height:29px; flex:none; align-items:center; justify-content:center; color:#fff; background:var(--green); border-radius:50%; font-size:.85rem; font-weight:800; }
.form-section__title { color:var(--dark-green); font-size:1.1rem; font-weight:750; }
.form-section__subtitle { margin-top:.25rem; color:var(--text-muted); font-size:.85rem; }
.form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; }
.step-panel { display:none; } .step-panel.active { display:block; }
.summary-list { display:grid; grid-template-columns:1fr 1fr; gap:.75rem 1.5rem; margin:0 0 1rem; }
.summary-list dt,.detail-field__label { color:var(--text-muted); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; }
.summary-list dd { margin:0; font-weight:650; overflow-wrap:anywhere; }
.detail-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; margin-bottom:1.5rem; }
.detail-field { padding:1rem; background:var(--off-white); border:1px solid var(--border); border-radius:9px; }
.detail-field__label { display:block; margin-bottom:.35rem; }
.detail-field__value { color:var(--text-dark); font-size:.95rem; font-weight:650; overflow-wrap:anywhere; }
.detail-field__value--muted,.detail-field.empty .detail-field__value { color:var(--text-muted); font-weight:400; }

/* Dialogs, uploads and feedback */
.modal-overlay { display:none; position:fixed; inset:0; z-index:1000; align-items:center; justify-content:center; padding:1rem; background:rgba(13,30,19,.48); backdrop-filter:blur(3px); }
.modal-overlay.open { display:flex; }
.modal { position:relative; width:100%; max-width:520px; padding:1.6rem; background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); }
.modal__title { margin-bottom:.75rem; color:var(--dark-green); font-size:1.1rem; font-weight:750; }
.modal__body { margin-bottom:1.25rem; color:var(--text-dark); font-size:.9rem; }
.modal__actions { display:flex; justify-content:flex-end; gap:.75rem; }
.close-btn { position:absolute; top:.7rem; right:.9rem; border:0; background:transparent; color:var(--text-muted); font-size:1.5rem; }
.upload-preview { display:flex; align-items:center; gap:1rem; margin-top:.75rem; padding:1rem; background:var(--off-white); border:1px solid var(--border); border-radius:9px; }
.upload-preview img,.upload-preview .doc-icon { width:64px; height:64px; flex:none; object-fit:cover; border-radius:8px; }
.doc-icon { display:flex; align-items:center; justify-content:center; color:var(--text-muted); font-size:2rem; }
.upload-info { flex:1; min-width:0; } .upload-info .upload-file-name { font-weight:650; overflow-wrap:anywhere; } .upload-info .upload-file-meta { color:var(--text-muted); font-size:.8rem; }
.upload-progress,.progress-strip { width:100%; height:7px; margin-top:.5rem; overflow:hidden; background:#E7EEE8; border-radius:99px; }
.upload-progress-bar,.progress-fill { width:0; height:100%; background:var(--green); transition:width .25s ease; }
.progress-label { display:flex; justify-content:space-between; margin-bottom:.25rem; color:var(--text-muted); font-size:.75rem; }
.doc-preview { display:block; max-width:100%; max-height:70vh; margin-top:1rem; border:1px solid var(--border); border-radius:9px; }
iframe.doc-preview { width:100%; height:70vh; }
.toast-container { position:fixed; top:1.25rem; right:1.25rem; z-index:2000; display:flex; flex-direction:column; gap:.7rem; pointer-events:none; }
.toast { min-width:280px; max-width:420px; padding:.9rem 1.1rem; background:#fff; border-left:4px solid var(--green); border-radius:9px; box-shadow:var(--shadow-lg); pointer-events:auto; animation:slideIn .25s ease; }
.toast--error { border-left-color:var(--error-red); } .toast--warning { border-left-color:var(--yellow); }
.toast__title { margin-bottom:.2rem; color:var(--text-dark); font-size:.9rem; font-weight:750; }
.toast__message { color:var(--text-muted); font-size:.85rem; }
@keyframes slideIn { from { opacity:0; transform:translateX(12px); } to { opacity:1; transform:translateX(0); } }
.spinner { display:inline-block; width:20px; height:20px; border:2.5px solid #DDE9DF; border-top-color:var(--green); border-radius:50%; animation:spin .8s linear infinite; }
.spinner--sm { width:14px; height:14px; border-width:2px; } .spinner--lg { width:32px; height:32px; border-width:3px; }
.skeleton { background:linear-gradient(90deg,#F1F5F1 25%,#E4ECE5 50%,#F1F5F1 75%); background-size:200% 100%; animation:pulse 1.5s infinite; border-radius:8px; }
.skeleton--text { height:1rem; margin-bottom:.7rem; } .skeleton--text--short { width:40%; } .skeleton--text--medium { width:70%; } .skeleton--text--long { width:100%; } .skeleton--avatar { width:40px; height:40px; border-radius:50%; } .skeleton--table-row { height:72px; margin-bottom:.7rem; } .skeleton--card { height:120px; margin-bottom:1rem; }
@keyframes pulse { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
.cooldown-btn { position:relative; overflow:hidden; } .cooldown-overlay { position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; color:#fff; background:rgba(27,122,61,.3); font-size:.85rem; font-weight:650; }
.recipient-list { max-height:220px; overflow:auto; padding:.5rem .75rem; border:1px solid var(--border); border-radius:9px; }
.recipient-list label { display:flex; align-items:center; gap:.5rem; padding:.25rem 0; font-size:.9rem; } .recipient-list input { width:auto; }
.notes-list { margin:0; padding:0; list-style:none; font-size:.9rem; } .notes-list li { padding:.6rem 0; border-bottom:1px solid var(--border); } .notes-list small { display:block; color:var(--text-muted); }

/* Responsive behaviour */
@media (max-width:800px) {
  .container { width:min(100% - 2rem,1200px); }
  .admin-layout { grid-template-columns:1fr; }
  .admin-sidebar { position:static; width:100%; height:auto; padding:.75rem 0; }
  .admin-main { min-height:auto; padding:1.25rem 1rem; }
  .admin-sidebar .nav-group { margin-bottom:.5rem; }
  .admin-sidebar .nav-label { padding:.5rem 1rem; }
  .admin-sidebar .nav-link { display:inline-flex; padding:.55rem .8rem; border-left:0; border-radius:7px; }
  .admin-sidebar .nav-link.active { background:rgba(245,197,24,.12); }
}
@media (max-width:560px) {
  body { font-size:14px; }
  .container { width:calc(100% - 1.5rem); }
  .site-header { padding:.8rem 0; }
  .brand-wordmark { font-size:1.12rem; }
  .section--padded { padding:2rem 0; }
  .card { padding:1.2rem; }
  .form-actions { flex-direction:column; }
  .form-actions .btn,.btn--full { width:100%; }
  .summary-list { grid-template-columns:1fr; }
  .modal { max-width:100%; padding:1.2rem; }
  .toast-container { left:.75rem; right:.75rem; top:.75rem; }
  .toast { min-width:0; width:100%; max-width:none; }
  .progress-step { min-width:60px; font-size:.68rem; }
  .progress-step .step-ring { width:24px; height:24px; }
}



/* =========================================================
   ZETU TEAM — product-grade visual refinement
   Shared desktop, tablet and mobile polish
   ========================================================= */
:root {
  --green:#176B3A;
  --green-dark:#10552E;
  --dark-green:#103F26;
  --page:#F5F7F5;
  --off-white:#F8FAF8;
  --text-dark:#17231B;
  --text-muted:#66746B;
  --border:#E1E8E2;
  --radius:12px;
  --radius-lg:18px;
  --shadow:0 1px 3px rgba(16,63,38,.05),0 8px 24px rgba(16,63,38,.045);
  --shadow-lg:0 20px 55px rgba(16,63,38,.14);
}
html { -webkit-text-size-adjust:100%; }
body { background:var(--page); letter-spacing:-.01em; }
.container { width:min(100% - 3rem,1240px); }
.site-header { padding:1rem 0; }
.site-header .container { min-height:36px; }
.brand-wordmark { font-size:1.32rem; letter-spacing:-.045em; }
.section { padding:2.25rem 0; }
.section--padded { padding:clamp(2.5rem,7vh,5rem) 0; }
h1 { letter-spacing:-.045em; font-weight:800; }
h2,h3,h4 { letter-spacing:-.03em; font-weight:750; }
p { line-height:1.65; }
.card {
  border-color:#E4EAE5;
  border-radius:18px;
  box-shadow:0 2px 5px rgba(16,63,38,.035),0 14px 38px rgba(16,63,38,.055);
}
.btn { min-height:46px; border-radius:10px; padding:.75rem 1.15rem; font-weight:700; }
.btn--primary { box-shadow:0 3px 8px rgba(23,107,58,.16); }
.btn--primary:hover { box-shadow:0 5px 14px rgba(23,107,58,.2); transform:translateY(-1px); }
input,select,textarea { min-height:48px; border-color:#D5DFD7; border-radius:10px; padding:.75rem .9rem; }
textarea { min-height:120px; }
.form-group { margin-bottom:1.25rem; }
.form-group label { margin-bottom:.5rem; font-size:.88rem; }
.alert { border-radius:10px; line-height:1.5; }
.unpaid-notice {
  margin:1.15rem 0 1.3rem;
  padding:1rem 1.05rem;
  border:1px solid #F0E1A7;
  border-left:4px solid #E5B817;
  border-radius:11px;
  background:#FFF9E8;
}
.unpaid-notice__title { font-size:.88rem; font-weight:800; }
.unpaid-notice__message { font-size:.86rem; line-height:1.55; }

/* Auth screens: deliberate, centered and uncluttered */
body:has(#login-form),
body:has(#forgot-password-form),
body:has(#reset-password-form),
body:has(#verify-form),
body:has(#setup-password-form) {
  min-height:100svh;
  background:
    radial-gradient(ellipse at 50% 0%,rgba(23,107,58,.075),transparent 42%),
    #F5F7F5;
}
body:has(#login-form) .site-header,
body:has(#forgot-password-form) .site-header,
body:has(#reset-password-form) .site-header,
body:has(#verify-form) .site-header,
body:has(#setup-password-form) .site-header {
  background:rgba(255,255,255,.94);
  color:var(--dark-green);
  border-bottom:1px solid #E7ECE8;
  box-shadow:none;
}
body:has(#login-form) .brand-wordmark,
body:has(#forgot-password-form) .brand-wordmark,
body:has(#reset-password-form) .brand-wordmark,
body:has(#verify-form) .brand-wordmark,
body:has(#setup-password-form) .brand-wordmark { color:var(--dark-green); }
body:has(#login-form) .brand-wordmark span,
body:has(#forgot-password-form) .brand-wordmark span,
body:has(#reset-password-form) .brand-wordmark span,
body:has(#verify-form) .brand-wordmark span,
body:has(#setup-password-form) .brand-wordmark span { color:#D5A900; }
body:has(#login-form) main,
body:has(#forgot-password-form) main,
body:has(#reset-password-form) main,
body:has(#verify-form) main,
body:has(#setup-password-form) main { min-height:calc(100svh - 62px); display:flex; align-items:center; }
body:has(#login-form) main .container,
body:has(#forgot-password-form) main .container,
body:has(#reset-password-form) main .container,
body:has(#verify-form) main .container,
body:has(#setup-password-form) main .container { width:min(100% - 2rem,460px); }
body:has(#login-form) .card,
body:has(#forgot-password-form) .card,
body:has(#reset-password-form) .card,
body:has(#verify-form) .card,
body:has(#setup-password-form) .card {
  width:100%!important;
  max-width:460px!important;
  margin:0 auto!important;
  padding:clamp(1.35rem,4vw,2.25rem);
}
body:has(#login-form) .card h2 { font-size:1.65rem!important; margin-bottom:.45rem; }
body:has(#login-form) .card > p:nth-of-type(1) { color:#68766D!important; margin-bottom:1.1rem; }
body:has(#login-form) .card .form-actions { margin-top:1.5rem; }
body:has(#login-form) .card > p:last-child { line-height:1.55; }

/* Admin workspace */
.admin-layout { grid-template-columns:252px minmax(0,1fr); background:#F5F7F5; }
.admin-sidebar {
  top:0; height:100svh; padding:1.35rem .75rem;
  background:#123F29;
  border-right:1px solid rgba(255,255,255,.08);
}
.admin-sidebar .nav-label { padding:1rem .9rem .45rem; font-size:.66rem; letter-spacing:.11em; }
.admin-sidebar .nav-link {
  margin:.12rem 0; padding:.72rem .9rem; border-radius:9px;
  border-left:0; color:rgba(255,255,255,.82); transition:background .16s ease,color .16s ease;
}
.admin-sidebar .nav-link:hover { background:rgba(255,255,255,.08); border-left:0; }
.admin-sidebar .nav-link.active { color:#F7D65C; background:rgba(247,214,92,.13); border-left:0; }
.admin-main { padding:clamp(1.25rem,3vw,2.5rem); }
.admin-main > h1,.admin-main > h2 { margin-bottom:1.35rem; }
.counters { grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); gap:1rem; }
.counter,.status-card { border-radius:14px; padding:1.25rem; box-shadow:var(--shadow); }
.counter__value,.status-card .status-value { letter-spacing:-.05em; }
.table-wrap { border:1px solid var(--border); border-radius:12px; background:#fff; }
.table-wrap table { border:0; border-radius:12px; }
th,td { padding:.9rem 1rem; }
th { white-space:nowrap; }
tbody tr:hover { background:#F7FAF7; }
.form-section { padding-bottom:1.6rem; }
.form-section__header { align-items:flex-start; }
.form-section__number { border-radius:9px; width:32px; height:32px; }
.form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.detail-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); }
.detail-field { border-radius:11px; padding:1.05rem; }
.modal { border-radius:16px; }

/* Prevent long content and controls from breaking narrow screens */
.container,.admin-main,.card,.form,.form-section,.form-grid,.detail-grid { min-width:0; }
button,a,input,select,textarea { max-width:100%; }
img,video,iframe { max-width:100%; }
.table-wrap { -webkit-overflow-scrolling:touch; }
pre,code { overflow-wrap:anywhere; }
@media (max-width:900px) {
  .admin-layout { grid-template-columns:1fr; }
  .admin-sidebar {
    position:sticky; top:0; z-index:50; width:100%; height:auto;
    padding:.55rem .65rem; overflow:visible;
    box-shadow:0 4px 14px rgba(16,63,38,.12);
  }
  .admin-sidebar .nav-group {
    display:flex; align-items:center; gap:.35rem;
    margin:0; padding:.1rem 0; overflow-x:auto; scrollbar-width:thin;
    -webkit-overflow-scrolling:touch;
  }
  .admin-sidebar .nav-label { display:none; }
  .admin-sidebar .nav-link {
    display:inline-flex; align-items:center; justify-content:center;
    flex:0 0 auto; white-space:nowrap; margin:0; padding:.65rem .8rem;
    font-size:.82rem;
  }
  .admin-main { min-height:calc(100svh - 58px); padding:1.25rem; }
}
@media (max-width:640px) {
  body { font-size:14px; }
  .container { width:calc(100% - 1.25rem); }
  .site-header { padding:.8rem 0; }
  .brand-wordmark { font-size:1.18rem; }
  .section { padding:1.35rem 0; }
  .section--padded { padding:1.5rem 0; }
  .card { padding:1.05rem; border-radius:14px; }
  .admin-main { padding:1rem .75rem 1.5rem; }
  .admin-sidebar { padding:.45rem .45rem; }
  .admin-sidebar .nav-group { gap:.25rem; }
  .admin-sidebar .nav-link { padding:.58rem .68rem; font-size:.78rem; }
  .form-grid { grid-template-columns:minmax(0,1fr); gap:0; }
  .form-group { margin-bottom:1rem; }
  .form-actions { flex-direction:column; gap:.6rem; }
  .form-actions .btn,.btn--full { width:100%; }
  .summary-list { grid-template-columns:minmax(0,1fr); gap:.6rem; }
  .detail-grid { grid-template-columns:minmax(0,1fr); }
  .counters { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
  .counter,.status-card { min-width:0; padding:.9rem; border-radius:12px; }
  .counter__value,.status-card .status-value { font-size:1.55rem; }
  .counter__label,.status-card .status-title { font-size:.66rem; }
  .table-wrap { overflow-x:auto; }
  table { min-width:620px; }
  th,td { padding:.72rem .75rem; font-size:.82rem; }
  .progress-indicator { justify-content:flex-start; }
  .progress-step { flex:0 0 62px; }
  .modal-overlay { align-items:flex-end; padding:.5rem; }
  .modal { max-height:90svh; overflow-y:auto; border-radius:16px 16px 12px 12px; padding:1.15rem; }
  .modal__actions { flex-direction:column-reverse; }
  .modal__actions .btn { width:100%; }
  .toast-container { left:.6rem; right:.6rem; top:.6rem; }
}
@media (max-width:380px) {
  .counters { grid-template-columns:minmax(0,1fr); }
  .admin-sidebar .nav-link { padding:.55rem .6rem; }
  .card { padding:.9rem; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}


/* Login page — faithful adaptation of the supplied minimal blue template */
.auth-reference-page {
  min-height:100vh;
  min-height:100svh;
  margin:0;
  color:#fff;
  background:
    radial-gradient(ellipse at 18% 18%,rgba(180,218,255,.62) 0%,rgba(112,171,231,.22) 34%,transparent 58%),
    radial-gradient(ellipse at 80% 82%,rgba(0,47,112,.55) 0%,transparent 48%),
    linear-gradient(135deg,#8FC2F5 0%,#4F91D8 42%,#07509B 100%);
  font-family:Arial,Helvetica,sans-serif;
  letter-spacing:0;
}
.auth-reference-page .toast-container { z-index:2000; }
.auth-reference {
  display:flex;
  min-height:100vh;
  min-height:100svh;
  align-items:center;
  justify-content:center;
  padding:36px 22px;
}
.auth-panel {
  width:min(100%,430px);
  margin:auto;
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  color:#fff;
}
.auth-mark {
  width:66px;
  height:66px;
  margin:0 auto 13px;
}
.auth-mark svg { display:block;width:100%;height:100%; }
.auth-brand {
  margin:0 auto 12px;
  color:rgba(255,255,255,.9);
  font-size:12px;
  font-weight:700;
  letter-spacing:.24em;
  text-align:center;
}
.auth-title {
  margin:0 0 48px;
  color:#fff;
  font-size:clamp(24px,4vw,30px);
  font-weight:300;
  letter-spacing:.16em;
  line-height:1.2;
  text-align:center;
}
.auth-form { width:100%;max-width:none;margin:0; }
.auth-field {
  display:flex;
  align-items:center;
  gap:17px;
  min-height:55px;
  margin-bottom:18px;
  border-bottom:1px solid rgba(255,255,255,.9);
}
.auth-field__icon {
  display:flex;
  width:22px;
  flex:0 0 22px;
  align-items:center;
  justify-content:center;
  margin:0;
  color:#fff;
}
.auth-field__icon svg { width:20px;height:20px; }
.auth-field input {
  width:100%;
  min-width:0;
  min-height:52px;
  padding:8px 0;
  color:#fff;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  font-size:16px;
  font-weight:400;
  letter-spacing:.025em;
}
.auth-field input::placeholder { color:rgba(255,255,255,.94);opacity:1; }
.auth-field input:focus { border:0;outline:0;box-shadow:none; }
.auth-field:focus-within { border-bottom-width:2px; }
.auth-options {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:31px 0 25px;
  color:#fff;
  font-size:13px;
}
.auth-remember {
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#fff;
  cursor:pointer;
  white-space:nowrap;
}
.auth-remember input {
  width:15px;
  height:15px;
  min-height:15px;
  margin:0;
  accent-color:#073E80;
}
.auth-options a {
  color:rgba(255,255,255,.95);
  font-size:13px;
  font-style:italic;
  text-decoration:none;
}
.auth-options a:hover { color:#fff;text-decoration:underline; }
.auth-notice {
  display:flex;
  flex-direction:column;
  gap:3px;
  margin:0 0 23px;
  padding:10px 12px;
  color:rgba(255,255,255,.94);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.28);
  border-radius:2px;
  font-size:12px;
  line-height:1.5;
}
.auth-notice strong {
  color:#fff;
  font-size:12px;
  font-weight:700;
}
.auth-submit { margin-top:0; }
.auth-submit__button {
  display:flex;
  width:100%;
  min-height:56px;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 20px;
  color:#fff;
  background:#073E80;
  border:0;
  border-radius:0;
  box-shadow:none;
  font-size:14px;
  font-weight:700;
  letter-spacing:.14em;
  transition:background .18s ease,transform .18s ease;
}
.auth-submit__button:hover { background:#05356D; }
.auth-submit__button:active { transform:translateY(1px); }
.auth-submit__button:focus-visible { outline:2px solid #fff;outline-offset:4px;box-shadow:none; }
.auth-submit__button .btn-spinner { display:none;width:15px;height:15px;border:2px solid rgba(255,255,255,.85);border-top-color:transparent;border-radius:50%; }
.auth-submit__button[aria-busy="true"] .btn-spinner { display:inline-block; }
.auth-invite {
  margin:22px 0 0;
  color:rgba(255,255,255,.88);
  font-size:12px;
  line-height:1.55;
  text-align:center;
}
.auth-invite a { color:#fff; }
.auth-alert {
  margin:0 0 17px;
  padding:10px 12px;
  color:#fff;
  background:rgba(5,42,91,.24);
  border:1px solid rgba(255,255,255,.45);
  border-radius:2px;
  font-size:13px;
  line-height:1.45;
}
.auth-alert--success,.auth-alert--error { color:#fff; }
.auth-reference-page :focus-visible { outline:2px solid #fff;outline-offset:3px;box-shadow:none; }
@media (max-width:560px) {
  .auth-reference { padding:26px 23px; }
  .auth-panel { width:min(100%,390px); }
  .auth-mark { width:60px;height:60px; }
  .auth-title { margin-bottom:39px;font-size:25px; }
  .auth-field { min-height:53px;margin-bottom:15px; }
  .auth-field input { min-height:50px;font-size:15px; }
  .auth-options { margin:27px 0 21px;font-size:12px; }
  .auth-options a { font-size:12px; }
  .auth-notice { margin-bottom:19px;padding:9px 10px;font-size:11px; }
  .auth-submit__button { min-height:53px; }
}
@media (max-width:360px) {
  .auth-reference { padding:22px 17px; }
  .auth-options { gap:8px; }
  .auth-remember { gap:6px; }
}


/* Shared transparent blue authentication flow — login, verification and password recovery */
body.auth-reference-page,
body.auth-reference-page:has(#login-form),
body.auth-reference-page:has(#forgot-form),
body.auth-reference-page:has(#reset-form),
body.auth-reference-page:has(#verify-form) {
  min-height:100svh;
  color:#fff;
  background:
    radial-gradient(ellipse at 18% 18%,rgba(180,218,255,.62) 0%,rgba(112,171,231,.22) 34%,transparent 58%),
    radial-gradient(ellipse at 80% 82%,rgba(0,47,112,.55) 0%,transparent 48%),
    linear-gradient(135deg,#8FC2F5 0%,#4F91D8 42%,#07509B 100%);
}
body.auth-reference-page main,
body.auth-reference-page:has(#verify-form) main {
  display:flex;
  min-height:100svh;
  min-height:100vh;
  align-items:center;
  justify-content:center;
}
.auth-description {
  max-width:360px;
  margin:-27px auto 32px;
  color:rgba(255,255,255,.9);
  font-size:13px;
  line-height:1.6;
  text-align:center;
}
.auth-pw-checks {
  margin:-5px 0 17px 39px;
  color:rgba(255,255,255,.78);
  font-size:11px;
  line-height:1.6;
}
.auth-pw-checks li.ok { color:#fff;font-weight:700; }
.auth-link-button {
  display:inline;
  padding:0;
  color:#fff;
  background:transparent;
  border:0;
  font:inherit;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
.auth-link-button:disabled { opacity:.65;cursor:not-allowed; }
.auth-reference-page .auth-field .code-input {
  text-align:left;
  letter-spacing:.18em;
}
.auth-reference-page .auth-alert--error {
  background:rgba(112,13,20,.22);
  border-color:rgba(255,255,255,.48);
}
.auth-reference-page .auth-alert--success {
  background:rgba(5,42,91,.2);
  border-color:rgba(255,255,255,.42);
}
.auth-reference-page .auth-field input:-webkit-autofill,
.auth-reference-page .auth-field input:-webkit-autofill:hover,
.auth-reference-page .auth-field input:-webkit-autofill:focus {
  -webkit-text-fill-color:#fff;
  -webkit-box-shadow:0 0 0 1000px rgba(7,62,128,.22) inset;
  transition:background-color 9999s ease-out;
}
.auth-reference-page .auth-submit__button:disabled { opacity:.72;cursor:wait; }
@media(max-width:560px) {
  .auth-description { margin:-19px auto 26px;font-size:12px; }
  .auth-reference-page .auth-field { gap:13px; }
  .auth-pw-checks { margin-left:35px; }
}

/* Product-wide refinement: consistent surfaces, spacing and responsive controls */
.member-nav {
  position:sticky;
  top:0;
  z-index:40;
  padding:.85rem 0;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--border);
  box-shadow:0 2px 10px rgba(17,48,29,.045);
  backdrop-filter:blur(12px);
}
.member-welcome { color:var(--dark-green);font-weight:750; }
.member-nav .btn--ghost { border-color:transparent; }
main .container > h1 { margin-bottom:1.25rem; }
.card + .card { margin-top:1rem; }
.card h2,.card h3 { letter-spacing:-.02em; }
.form-group label { line-height:1.4; }
input,select,textarea { min-width:0; }
.btn { min-height:43px; }
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:3px solid rgba(27,122,61,.22);
  outline-offset:2px;
}
.admin-sidebar { backdrop-filter:blur(12px); }
.admin-main > .container { max-width:1500px; }
.counter,.status-card,.card,.table-wrap { box-shadow:0 2px 10px rgba(17,48,29,.045); }
.table-wrap table { min-width:620px; }
@media(max-width:640px) {
  .member-nav { padding:.7rem 0; }
  .member-nav .container { gap:.5rem; }
  .member-welcome { font-size:.9rem; }
  .member-nav .header-actions { gap:.35rem; }
  .member-nav .btn { min-height:38px;padding:.5rem .65rem;font-size:.78rem; }
}


/* Mobile auth layout hardening: same template, properly fitted on narrow phones */
.auth-reference-page {
  width:100%;
  min-width:320px;
  min-height:100dvh;
  overflow-x:hidden;
  background-attachment:scroll;
}
.auth-reference-page .auth-reference {
  width:100%;
  min-height:100dvh;
  min-height:100svh;
  padding:clamp(22px,5vh,48px) clamp(18px,5vw,30px);
}
.auth-reference-page .auth-panel {
  width:min(100%,430px);
  max-width:430px;
}
.auth-reference-page .auth-form,
.auth-reference-page .auth-field,
.auth-reference-page .auth-submit { width:100%;min-width:0; }
.auth-reference-page .auth-field input {
  flex:1 1 auto;
  width:1%;
  min-width:0;
}
.auth-reference-page .auth-title {
  overflow-wrap:anywhere;
  text-wrap:balance;
}
.auth-reference-page .auth-description { padding-inline:4px; }
@media screen and (max-width:600px) {
  html:has(body.auth-reference-page) {
    min-width:320px;
    min-height:100%;
  }
  body.auth-reference-page {
    display:block;
    min-height:100dvh!important;
    min-height:100svh!important;
    padding:0;
    background-size:cover;
    background-position:center;
  }
  body.auth-reference-page .auth-reference {
    display:flex!important;
    width:100%;
    min-height:100dvh!important;
    min-height:100svh!important;
    align-items:center!important;
    justify-content:center!important;
    padding:28px 22px max(28px,env(safe-area-inset-bottom));
  }
  body.auth-reference-page .auth-panel {
    width:100%!important;
    max-width:390px!important;
    margin:auto!important;
  }
  body.auth-reference-page .auth-mark { width:56px;height:56px; }
  body.auth-reference-page .auth-brand { font-size:11px; }
  body.auth-reference-page .auth-title {
    margin:0 0 32px;
    font-size:clamp(21px,6vw,25px);
    line-height:1.25;
    letter-spacing:.12em;
  }
  body.auth-reference-page .auth-description {
    margin:-16px auto 25px;
    font-size:12px;
    line-height:1.55;
  }
  body.auth-reference-page .auth-field {
    min-height:51px;
    margin-bottom:14px;
    gap:12px;
  }
  body.auth-reference-page .auth-field input {
    min-height:48px;
    font-size:16px;
  }
  body.auth-reference-page .auth-options {
    flex-wrap:wrap;
    margin:23px 0 20px;
    font-size:12px;
  }
  body.auth-reference-page .auth-notice {
    margin-bottom:18px;
    padding:9px 10px;
    font-size:11px;
  }
  body.auth-reference-page .auth-submit__button {
    min-height:51px;
    width:100%;
  }
  body.auth-reference-page .auth-invite {
    margin-top:18px;
    font-size:12px;
  }
  body.auth-reference-page .auth-pw-checks { margin-left:34px; }
}
@media screen and (max-height:620px) and (max-width:600px) {
  body.auth-reference-page .auth-reference {
    align-items:flex-start!important;
    padding-top:20px;
    padding-bottom:20px;
  }
  body.auth-reference-page .auth-title { margin-bottom:22px; }
  body.auth-reference-page .auth-mark { width:46px;height:46px;margin-bottom:8px; }
  body.auth-reference-page .auth-field { min-height:45px;margin-bottom:10px; }
  body.auth-reference-page .auth-field input { min-height:42px; }
}