:root{--bg:#f5f6fa;--card:#fff;--soft:#f9fafb;--text:#171717;--muted:#667085;--line:#e5e7eb;--red:#d7001d;--red-soft:#fff1f3;--green:#16a34a;--green-soft:#ecfdf5;--blue:#2563eb;--blue-soft:#eff6ff;--yellow:#d97706;--yellow-soft:#fffbeb;--purple:#7c3aed;--purple-soft:#f5f3ff;--shadow:0 16px 40px rgba(15,23,42,.08);--shadow-soft:0 8px 24px rgba(15,23,42,.05)}*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;background:radial-gradient(circle at 15% 8%,rgba(215,0,29,.06),transparent 26%),radial-gradient(circle at 90% 0%,rgba(37,99,235,.05),transparent 24%),var(--bg);color:var(--text);line-height:1.5}button,input,select,textarea{font:inherit}button{cursor:pointer}.page{width:min(760px,calc(100% - 32px));margin:28px auto 80px}.admin-page{width:min(1180px,calc(100% - 32px))}.reference-note{margin:0 0 18px;padding:14px 16px;border:1px dashed #fecdd3;border-radius:18px;background:rgba(255,241,243,.72);color:#9f1239;font-size:13px;font-weight:750}.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}.topbar.simple{display:block}.title{margin:0;font-size:30px;line-height:1.15;font-weight:950;letter-spacing:-.05em}.subtitle{margin:6px 0 0;color:var(--muted);font-size:14px}.btn{min-height:42px;padding:0 16px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--text);font-weight:850;transition:.18s ease;white-space:nowrap}.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-soft)}.btn-primary{border-color:var(--red);background:var(--red);color:#fff;box-shadow:0 12px 24px rgba(215,0,29,.18)}.btn-danger{border-color:#fecdd3;background:var(--red-soft);color:var(--red)}.btn-muted{color:var(--muted);background:var(--soft)}.account-card{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:14px 0 18px;padding:14px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow-soft)}.account-left,.staff-row{display:flex;align-items:center;gap:12px;min-width:0}.account-avatar,.avatar-mini{border-radius:50%;display:grid;place-items:center;flex:0 0 auto;background:linear-gradient(135deg,#fef3c7,#fecdd3);border:1px solid #fff;box-shadow:0 8px 18px rgba(15,23,42,.08)}.account-avatar{width:46px;height:46px;font-size:24px}.avatar-mini{width:38px;height:38px;font-size:20px}.account-name,.staff-name{font-weight:950;color:var(--text)}.account-meta,.staff-meta{color:var(--muted);font-size:13px}.tabs{display:grid;gap:8px;padding:8px;margin:0 0 18px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.92);box-shadow:var(--shadow-soft)}.staff-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}.auth-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-tabs{grid-template-columns:repeat(6,minmax(0,1fr))}.tab{min-height:44px;border:0;border-radius:12px;background:transparent;color:var(--muted);font-weight:900;white-space:nowrap}.tab.active{background:var(--red-soft);color:var(--red);box-shadow:0 14px 30px rgba(215,0,29,.08)}.screen{display:none;margin-bottom:30px}.screen.active{display:block}.staff-card,.card{padding:18px;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:var(--shadow);overflow:hidden}.card{padding:20px}.card-title{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px}h2{margin:0;font-size:22px;font-weight:950;letter-spacing:-.03em}.card-desc{margin:4px 0 0;color:var(--muted);font-size:13px}.shift-list,.list{display:grid;gap:12px}.shift-card,.item-card{display:grid;gap:12px;padding:16px;border:1px solid var(--line);border-radius:18px;background:#fff}.shift-head,.item-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.shift-main,.item-main{min-width:0}.shift-title,.item-title{margin:0;color:var(--text);font-size:18px;line-height:1.28;font-weight:950;letter-spacing:-.03em}.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.pill,.badge{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:850;white-space:nowrap}.pill{border:1px solid var(--line);background:#f9fafb;color:#4b5563}.badge-open,.badge-green{border:1px solid #bbf7d0;background:var(--green-soft);color:var(--green)}.badge-gray{border:1px solid #e5e7eb;background:#f3f4f6;color:#6b7280}.badge-pending,.badge-yellow{border:1px solid #fde68a;background:var(--yellow-soft);color:var(--yellow)}.badge-signed,.badge-red{border:1px solid #fecdd3;background:var(--red-soft);color:var(--red)}.badge-assigned,.badge-blue{border:1px solid #bfdbfe;background:var(--blue-soft);color:var(--blue)}.badge-purple{border:1px solid #ddd6fe;background:var(--purple-soft);color:var(--purple)}.actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}.action-btn{min-height:42px;padding:0 20px;border-radius:999px;border:1px solid var(--red);background:#fff;color:var(--red);font-weight:950;white-space:nowrap}.action-btn.signed,.action-btn.active{border-color:#fecdd3;background:var(--red-soft);color:var(--red)}.note{margin:14px 0 0;padding:12px;border-radius:14px;background:#fffbeb;color:#92400e;font-size:13px;font-weight:700}.submit-bar{position:sticky;bottom:16px;display:grid;grid-template-columns:auto 1fr;gap:10px;padding:12px;margin-top:14px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.94);backdrop-filter:blur(16px);box-shadow:var(--shadow)}label{display:block;margin-bottom:6px;color:#344054;font-size:13px;font-weight:850}input,select,textarea{width:100%;min-height:44px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--text);padding:0 12px;outline:none}textarea{min-height:82px;padding-top:12px;resize:vertical}input:focus,select:focus,textarea:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(215,0,29,.08)}.field{margin-bottom:14px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.field-full{grid-column:1/-1}.hour-form{display:grid;gap:12px;margin-top:12px;padding:14px;border:1px solid var(--line);border-radius:18px;background:var(--soft)}.empty-state{padding:26px 16px;border:1px dashed #d1d5db;border-radius:18px;background:var(--soft);text-align:center;color:var(--muted);font-size:14px;font-weight:700}.guest-shell{display:block}.logged-shell{display:none}.is-staff-logged-in .guest-shell{display:none}.is-staff-logged-in .logged-shell{display:block}.admin-login-shell{display:none}.admin-shell{display:block}.admin-demo:not(.is-admin-logged-in) .admin-login-shell{display:block}.admin-demo:not(.is-admin-logged-in) .admin-shell{display:none}.emoji-picker{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;margin-top:8px}.emoji-option{min-height:42px;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:22px}.emoji-option.active{border-color:#fecdd3;background:var(--red-soft);box-shadow:0 0 0 3px rgba(215,0,29,.06)}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}.metric{padding:16px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow-soft)}.metric-num{display:block;font-size:24px;line-height:1;font-weight:950}.metric-label{display:block;margin-top:8px;color:var(--muted);font-size:13px;font-weight:700}.grid-admin{display:grid;grid-template-columns:.92fr 1.28fr;gap:16px;align-items:start}.grid-two,.grid-three{display:grid;gap:16px;align-items:start}.grid-two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-three{grid-template-columns:repeat(3,minmax(0,1fr))}.position-box,.soft-box{margin-top:14px;padding:14px;border-radius:18px;border:1px solid var(--line);background:var(--soft)}.position-head,.setting-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;font-weight:950}.position-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.position-item{padding:10px;border:1px solid var(--line);border-radius:14px;background:#fff}.position-item span{display:block;margin-bottom:8px;color:var(--muted);font-size:12px;font-weight:800}.position-item input{text-align:center;font-weight:950}.setting-row{margin:0;padding:14px 0;border-top:1px solid var(--line);font-weight:400}.setting-row:first-of-type{border-top:0;padding-top:0}.switch{width:48px;height:28px;border-radius:999px;background:var(--red);padding:3px;flex:0 0 auto}.switch:after{content:"";display:block;width:22px;height:22px;margin-left:auto;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(15,23,42,.18)}.demo-footer{width:min(1180px,calc(100% - 32px));margin:-48px auto 60px;color:var(--muted);font-size:12px}@media(max-width:900px){.page,.admin-page{width:min(100% - 24px,520px);margin:18px auto 56px}.reference-note{display:none}.topbar{display:block}.topbar>.btn{margin-top:12px}.title{font-size:25px;letter-spacing:-.045em}.subtitle{font-size:13px}.account-card{align-items:center;padding:12px}.account-avatar{width:42px;height:42px}.account-card .btn{min-height:40px;padding:0 12px;font-size:14px}.staff-tabs,.admin-tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:7px}.tab{min-height:42px;font-size:15px}.staff-card,.card{padding:16px;border-radius:20px}.card-title{display:block}.card-title>.badge{margin-top:10px}h2{font-size:22px}.shift-card,.item-card{padding:14px}.shift-head,.item-row{display:block}.shift-title,.item-title{font-size:18px}.shift-head>.badge{margin-top:10px}.actions{display:grid;grid-template-columns:1fr;margin-top:2px}.actions .btn,.actions .action-btn{width:100%}.submit-bar{grid-template-columns:1fr}.form-grid,.grid-admin,.grid-two,.grid-three,.position-grid{grid-template-columns:1fr}.metrics{grid-template-columns:repeat(2,1fr)}.emoji-picker{grid-template-columns:repeat(6,1fr)}}@media(max-width:420px){.page,.admin-page{width:calc(100% - 20px);margin-top:14px}.title{font-size:23px}.account-card{gap:10px}.account-meta{font-size:12px}.staff-card,.card{padding:14px}.pills{gap:6px}.pill,.badge{font-size:11px;min-height:27px;padding:0 9px}.emoji-picker{grid-template-columns:repeat(5,1fr)}}


/* user requested refinements */
.staff-demo:not(.is-staff-logged-in) .topbar.simple {
  text-align: center;
  margin-bottom: 20px;
}
.staff-demo:not(.is-staff-logged-in) .title,
.staff-demo:not(.is-staff-logged-in) .subtitle {
  text-align: center;
}
.account-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.avatar-editor {
  display: none;
  margin: -6px 0 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}
.avatar-editor.open {
  display: block;
}
.avatar-editor .card-title {
  margin-bottom: 10px;
}
@media(max-width:900px){
  .account-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}


/* v3: soften visual left alignment inside rounded form cards */
.guest-shell .staff-card {
  padding-left: 24px;
  padding-right: 24px;
}
.guest-shell .staff-card .card-title {
  padding-left: 2px;
}
.guest-shell .field label {
  padding-left: 2px;
}
.guest-shell .note {
  margin-left: 0;
  margin-right: 0;
}
@media(max-width:900px){
  .guest-shell .staff-card {
    padding-left: 22px;
    padding-right: 22px;
  }
}
@media(max-width:420px){
  .guest-shell .staff-card {
    padding-left: 20px;
    padding-right: 20px;
  }
}


/* v10: move guest form text slightly left */
.tabs .tab {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
}

.tabs .tab.active {
  background: #ffedf1;
  color: var(--red);
}

/* Login/register: keep all text left-aligned, but move it slightly left from v9 */
.guest-shell .staff-card h2,
.guest-shell .staff-card .card-desc,
.guest-shell .field > label {
  padding-left: 8px;
  margin-left: 0;
  text-align: left;
}

/* Make placeholder text align with those labels */
.guest-shell .field input,
.guest-shell .field select,
.guest-shell .field textarea {
  padding-left: 8px;
}

/* Keep boxes/buttons aligned by their outer edges */
.guest-shell .btn-primary,
.guest-shell .note {
  transform: none;
  width: 100%;
}


/* v12: venue/status capsule cleanup and personal info entry */
.account-card {
  flex-wrap: wrap;
}

.account-card > .btn {
  margin-left: auto;
}

.account-card > .btn + .btn {
  margin-left: 0;
}

.shift-card .pills {
  align-items: center;
}

.shift-card .badge {
  margin-top: 0;
}

.shift-card .pills .badge {
  min-height: 28px;
}

.card-title > .badge.badge-open {
  display: none;
}

.profile-screen .emoji-picker {
  margin-bottom: 4px;
}

@media(max-width:900px){
  .account-card {
    display: grid;
    grid-template-columns: 1fr auto;
  }

  .account-card .account-left {
    grid-row: span 2;
  }

  .account-card > .btn {
    width: auto;
    min-width: 96px;
    justify-self: end;
  }
}

@media(max-width:420px){
  .account-card {
    grid-template-columns: 1fr;
  }

  .account-card .account-left {
    grid-row: auto;
  }

  .account-card > .btn {
    width: 100%;
    justify-self: stretch;
  }
}


/* v13: logged-in header removed and account actions cleaned */
.logged-shell > .topbar {
  display: none;
}

.logged-shell .account-card {
  margin-top: 0;
}

.logged-shell .account-card > .btn {
  min-width: 96px;
}

.profile-screen .form-grid {
  margin-top: 16px;
}

@media(max-width:900px){
  .logged-shell .account-card {
    display: grid;
    grid-template-columns: 1fr auto;
  }

  .logged-shell .account-card .account-left {
    grid-row: span 2;
  }

  .logged-shell .account-card > .btn {
    width: auto;
    justify-self: end;
  }
}

@media(max-width:420px){
  .logged-shell .account-card {
    grid-template-columns: 1fr;
  }

  .logged-shell .account-card .account-left {
    grid-row: auto;
  }

  .logged-shell .account-card > .btn {
    width: 100%;
    justify-self: stretch;
  }
}


/* v14: final account actions + complete personal info page */
.logged-shell .account-card {
  display: flex;
  align-items: center;
}

.account-actions {
  display: grid;
  gap: 10px;
  margin-left: auto;
}

.account-actions .btn {
  min-width: 112px;
}

.profile-avatar-card {
  margin-top: 0;
}

.profile-finance-grid {
  margin-top: 16px;
}

.profile-screen .emoji-picker {
  margin-top: 10px;
}

@media (max-width: 900px) {
  .logged-shell .account-card {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .logged-shell .account-card .account-left {
    grid-row: auto;
  }

  .account-actions {
    margin-left: 0;
    justify-self: end;
  }

  .account-actions .btn {
    width: 112px;
    min-width: 112px;
  }
}

@media (max-width: 420px) {
  .logged-shell .account-card {
    grid-template-columns: 1fr;
  }

  .account-actions {
    width: 100%;
    justify-self: stretch;
  }

  .account-actions .btn {
    width: 100%;
  }
}


/* v15: calibrate logged-in account card layout */
.logged-shell .account-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px;
  align-items: center;
  gap: 14px;
  min-height: auto;
  padding: 16px;
}

.logged-shell .account-card .account-left {
  min-width: 0;
  align-self: center;
}

.logged-shell .account-card .account-avatar {
  width: 48px;
  height: 48px;
  font-size: 25px;
}

.logged-shell .account-card .account-name {
  line-height: 1.15;
}

.logged-shell .account-card .account-meta {
  margin-top: 4px;
}

.account-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  width: 128px;
  margin-left: 0;
  justify-self: end;
}

.account-actions .btn {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 14px;
}

@media (max-width: 420px) {
  .logged-shell .account-card {
    grid-template-columns: minmax(0, 1fr) 116px;
    padding: 14px;
    gap: 10px;
  }

  .logged-shell .account-card .account-avatar {
    width: 44px;
    height: 44px;
    font-size: 23px;
  }

  .account-actions {
    width: 116px;
    gap: 8px;
  }

  .account-actions .btn {
    min-height: 42px;
    padding: 0 10px;
    font-size: 14px;
  }
}

@media (max-width: 360px) {
  .logged-shell .account-card {
    grid-template-columns: 1fr;
  }

  .account-actions {
    width: 100%;
  }
}


/* v16: account actions stay on the right + full account display */
.logged-shell .account-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  column-gap: 14px !important;
  row-gap: 0 !important;
  padding: 16px !important;
}

.logged-shell .account-card .account-left {
  min-width: 0;
  align-self: center;
}

.logged-shell .account-card .account-meta {
  white-space: nowrap;
}

.account-actions {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  width: 128px !important;
  margin-left: 0 !important;
  justify-self: end !important;
  align-self: center !important;
}

.account-actions .btn {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  padding: 0 12px !important;
  border-radius: 14px !important;
}

@media (max-width: 420px) {
  .logged-shell .account-card {
    grid-template-columns: minmax(0, 1fr) 112px !important;
    gap: 10px !important;
    padding: 14px !important;
  }

  .logged-shell .account-card .account-avatar {
    width: 44px;
    height: 44px;
    font-size: 23px;
  }

  .logged-shell .account-card .account-name {
    font-size: 18px;
  }

  .logged-shell .account-card .account-meta {
    font-size: 12px;
  }

  .account-actions {
    width: 112px !important;
    justify-self: end !important;
  }

  .account-actions .btn {
    min-height: 42px !important;
    font-size: 14px !important;
  }
}

@media (max-width: 350px) {
  .logged-shell .account-card {
    grid-template-columns: 1fr !important;
  }

  .account-actions {
    width: 100% !important;
  }
}


/* v17: final account card alignment - right buttons, compact layout */
.logged-shell .account-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 16px !important;
  min-height: 0 !important;
}

.logged-shell .account-card .account-left {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.logged-shell .account-card .account-avatar {
  width: 46px !important;
  height: 46px !important;
  font-size: 24px !important;
  flex: 0 0 46px !important;
}

.logged-shell .account-card .account-name {
  line-height: 1.15 !important;
}

.logged-shell .account-card .account-meta {
  margin-top: 4px !important;
  white-space: nowrap !important;
  font-size: 13px !important;
}

.account-actions {
  flex: 0 0 116px !important;
  width: 116px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  margin-left: auto !important;
  justify-self: end !important;
  align-self: center !important;
}

.account-actions .btn {
  width: 116px !important;
  min-width: 0 !important;
  min-height: 42px !important;
  padding: 0 10px !important;
  border-radius: 14px !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

@media (max-width: 420px) {
  .logged-shell .account-card {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px !important;
  }

  .logged-shell .account-card .account-left {
    gap: 10px !important;
  }

  .logged-shell .account-card .account-avatar {
    width: 42px !important;
    height: 42px !important;
    font-size: 22px !important;
    flex-basis: 42px !important;
  }

  .logged-shell .account-card .account-name {
    font-size: 17px !important;
  }

  .logged-shell .account-card .account-meta {
    font-size: 12px !important;
  }

  .account-actions {
    flex-basis: 106px !important;
    width: 106px !important;
    gap: 8px !important;
  }

  .account-actions .btn {
    width: 106px !important;
    min-height: 40px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 350px) {
  .logged-shell .account-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .account-actions {
    width: 100% !important;
    flex-basis: auto !important;
  }

  .account-actions .btn {
    width: 100% !important;
  }
}


/* v18: responsive account card alignment for narrow mobile preview */
.logged-shell .account-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 116px !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 16px !important;
}

.logged-shell .account-card .account-left {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.logged-shell .account-card .account-avatar {
  width: 46px !important;
  height: 46px !important;
  flex: 0 0 46px !important;
}

.logged-shell .account-card .account-name {
  font-size: 18px !important;
  line-height: 1.15 !important;
}

.logged-shell .account-card .account-meta {
  margin-top: 4px !important;
  font-size: 13px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.account-actions {
  width: 116px !important;
  min-width: 116px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  justify-self: end !important;
  align-self: center !important;
  margin-left: 0 !important;
}

.account-actions .btn {
  width: 116px !important;
  min-width: 0 !important;
  min-height: 42px !important;
  padding: 0 10px !important;
  border-radius: 14px !important;
  font-size: 14px !important;
}

@media (max-width: 430px) {
  .logged-shell .account-card {
    grid-template-columns: minmax(0, 1fr) 104px !important;
    gap: 10px !important;
    padding: 14px !important;
  }

  .logged-shell .account-card .account-left {
    gap: 10px !important;
  }

  .logged-shell .account-card .account-avatar {
    width: 42px !important;
    height: 42px !important;
    flex-basis: 42px !important;
    font-size: 22px !important;
  }

  .logged-shell .account-card .account-name {
    font-size: 17px !important;
  }

  .logged-shell .account-card .account-meta {
    font-size: 12px !important;
    max-width: 160px !important;
  }

  .account-actions {
    width: 104px !important;
    min-width: 104px !important;
  }

  .account-actions .btn {
    width: 104px !important;
    min-height: 40px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 370px) {
  .logged-shell .account-card {
    grid-template-columns: minmax(0, 1fr) 96px !important;
  }

  .logged-shell .account-card .account-meta {
    max-width: 132px !important;
  }

  .account-actions {
    width: 96px !important;
    min-width: 96px !important;
  }

  .account-actions .btn {
    width: 96px !important;
    padding: 0 8px !important;
  }
}


/* v19: force account card to stay two-column on narrow screens */
.logged-shell .account-card {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 16px !important;
}

.logged-shell .account-card .account-left {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.logged-shell .account-card .account-avatar {
  width: 46px !important;
  height: 46px !important;
  flex: 0 0 46px !important;
  font-size: 24px !important;
}

.logged-shell .account-card .account-name {
  font-size: 18px !important;
  line-height: 1.15 !important;
}

.logged-shell .account-card .account-meta {
  margin-top: 4px !important;
  font-size: 13px !important;
  white-space: nowrap !important;
}

.account-actions {
  flex: 0 0 112px !important;
  width: 112px !important;
  min-width: 112px !important;
  margin-left: auto !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  align-self: center !important;
  justify-self: end !important;
}

.account-actions .btn {
  width: 112px !important;
  min-width: 0 !important;
  min-height: 42px !important;
  padding: 0 10px !important;
  border-radius: 14px !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

@media (max-width: 430px) {
  .logged-shell .account-card {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px !important;
  }

  .logged-shell .account-card .account-left {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 9px !important;
  }

  .logged-shell .account-card .account-avatar {
    width: 40px !important;
    height: 40px !important;
    flex-basis: 40px !important;
    font-size: 21px !important;
  }

  .logged-shell .account-card .account-name {
    font-size: 17px !important;
  }

  .logged-shell .account-card .account-meta {
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  .account-actions {
    flex: 0 0 100px !important;
    width: 100px !important;
    min-width: 100px !important;
    margin-left: auto !important;
    gap: 8px !important;
  }

  .account-actions .btn {
    width: 100px !important;
    min-height: 40px !important;
    padding: 0 8px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 360px) {
  .logged-shell .account-card {
    gap: 8px !important;
    padding: 12px !important;
  }

  .logged-shell .account-card .account-avatar {
    width: 36px !important;
    height: 36px !important;
    flex-basis: 36px !important;
    font-size: 19px !important;
  }

  .logged-shell .account-card .account-name {
    font-size: 16px !important;
  }

  .logged-shell .account-card .account-meta {
    font-size: 11px !important;
  }

  .account-actions {
    flex-basis: 92px !important;
    width: 92px !important;
    min-width: 92px !important;
  }

  .account-actions .btn {
    width: 92px !important;
    min-height: 38px !important;
    font-size: 12px !important;
  }
}


/* v26 CLEAN: stable staff logged-in layout, profile screen is inside logged-shell */
.is-staff-logged-in .demo-footer {
  display: none !important;
}

.is-staff-logged-in .logged-shell {
  display: grid !important;
  gap: 16px !important;
  width: min(760px, calc(100% - 32px)) !important;
  margin: 28px auto 60px !important;
}

.logged-shell .account-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 16px !important;
  border-radius: 22px !important;
}

.logged-shell .account-card .account-left {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.logged-shell .account-card .account-avatar {
  width: 46px !important;
  height: 46px !important;
  flex: 0 0 46px !important;
  font-size: 24px !important;
}

.logged-shell .account-card .account-meta {
  white-space: nowrap !important;
}

.logged-shell .account-actions {
  flex: 0 0 112px !important;
  width: 112px !important;
  min-width: 112px !important;
  margin-left: auto !important;
  display: grid !important;
  gap: 8px !important;
}

.logged-shell .account-actions .btn {
  width: 112px !important;
  min-width: 0 !important;
  min-height: 42px !important;
  padding: 0 10px !important;
  border-radius: 14px !important;
  font-size: 14px !important;
}

.logged-shell .tabs.staff-tabs {
  margin: 0 !important;
}

.logged-shell .screen {
  margin: 0 !important;
  padding: 0 !important;
}

.logged-shell .screen.active {
  display: block !important;
  margin: 0 !important;
}

.profile-screen .profile-card,
.logged-shell .staff-card {
  width: 100% !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

.profile-avatar-card {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  padding: 14px !important;
  margin: 14px 0 12px !important;
}

.profile-avatar-card .account-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.profile-emoji-picker {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 0 0 16px !important;
}

.profile-info-grid {
  gap: 14px !important;
}

.profile-info-grid label {
  color: var(--text) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
}

.profile-actions {
  margin-top: 14px !important;
}

@media (max-width: 430px) {
  .is-staff-logged-in .logged-shell {
    width: calc(100% - 28px) !important;
    gap: 14px !important;
    margin-top: 22px !important;
  }

  .logged-shell .account-card {
    gap: 10px !important;
    padding: 14px !important;
  }

  .logged-shell .account-card .account-left {
    gap: 9px !important;
  }

  .logged-shell .account-card .account-avatar {
    width: 40px !important;
    height: 40px !important;
    flex-basis: 40px !important;
    font-size: 21px !important;
  }

  .logged-shell .account-card .account-name {
    font-size: 17px !important;
  }

  .logged-shell .account-card .account-meta {
    font-size: 12px !important;
  }

  .logged-shell .account-actions {
    flex: 0 0 100px !important;
    width: 100px !important;
    min-width: 100px !important;
  }

  .logged-shell .account-actions .btn {
    width: 100px !important;
    min-height: 40px !important;
    font-size: 13px !important;
  }

  .profile-emoji-picker {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }
}

@media (max-width: 360px) {
  .is-staff-logged-in .logged-shell {
    width: calc(100% - 22px) !important;
  }

  .logged-shell .account-card {
    gap: 8px !important;
    padding: 12px !important;
  }

  .logged-shell .account-card .account-avatar {
    width: 36px !important;
    height: 36px !important;
    flex-basis: 36px !important;
    font-size: 19px !important;
  }

  .logged-shell .account-actions {
    flex-basis: 92px !important;
    width: 92px !important;
    min-width: 92px !important;
  }

  .logged-shell .account-actions .btn {
    width: 92px !important;
    font-size: 12px !important;
  }
}


/* v27: remove all prototype/reference reminder UI */
.reference-note,
.demo-footer {
  display: none !important;
}

.staff-demo,
.admin-demo {
  padding-top: 0 !important;
}

.is-staff-logged-in .logged-shell {
  margin-top: 28px !important;
}

.guest-shell,
.logged-shell {
  margin-top: 28px !important;
}


/* v29: avatar selector becomes modal, default card follows reference */
.avatar-setting-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 16px !important;
}

.avatar-setting-card .account-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}

.avatar-setting-card .account-avatar {
  width: 46px !important;
  height: 46px !important;
  flex: 0 0 46px !important;
  font-size: 23px !important;
}

.avatar-select-btn {
  min-width: 112px;
  min-height: 42px;
  color: var(--red);
  border-color: #ffb8c3;
  background: #fff;
}

.avatar-select-btn:hover {
  background: #fff1f4;
  border-color: #ff9bad;
}

.avatar-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.avatar-modal.open {
  display: flex;
}

.avatar-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.62);
  backdrop-filter: blur(4px);
}

.avatar-modal-panel {
  position: relative;
  z-index: 1;
  width: min(520px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 48px));
  overflow: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.24);
  padding: 26px 26px 20px;
}

.avatar-modal-panel h2 {
  text-align: center;
  margin: 0;
  font-size: 24px;
  font-weight: 900;
  color: var(--text);
}

.avatar-modal-panel p {
  text-align: center;
  margin: 6px 0 20px;
  color: var(--muted);
  font-size: 14px;
}

.avatar-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: #8a94a6;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.avatar-modal-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  padding: 2px;
}

.avatar-modal-option {
  min-height: 48px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 22px;
  cursor: pointer;
  transition: 0.16s ease;
}

.avatar-modal-option:hover {
  transform: translateY(-1px);
  border-color: #ffc1cc;
  background: #fff7f9;
}

.avatar-modal-option.active {
  border-color: #ff9bad;
  background: #fff1f4;
  box-shadow: inset 0 0 0 2px rgba(215, 0, 29, 0.08);
}

.avatar-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 22px;
}

.avatar-modal-actions .btn {
  min-width: 90px;
}

@media (max-width: 430px) {
  .avatar-setting-card {
    padding: 14px !important;
  }

  .avatar-select-btn {
    min-width: 94px;
    min-height: 40px;
    font-size: 13px;
  }

  .avatar-modal {
    align-items: flex-end;
    padding: 16px;
  }

  .avatar-modal-panel {
    width: 100%;
    max-height: calc(100vh - 80px);
    border-radius: 22px;
    padding: 22px 16px 16px;
  }

  .avatar-modal-panel h2 {
    font-size: 20px;
  }

  .avatar-modal-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
  }

  .avatar-modal-option {
    min-height: 42px;
    font-size: 20px;
  }

  .avatar-modal-actions {
    justify-content: center;
  }
}


/* v31: move avatar modal action buttons closer */
.avatar-modal-panel {
  padding-bottom: 16px !important;
}

.avatar-modal-grid {
  margin-bottom: 0 !important;
}

.avatar-modal-actions {
  margin-top: 12px !important;
  padding-top: 0 !important;
  justify-content: flex-end !important;
}

.avatar-modal-actions .btn {
  min-height: 40px !important;
}

@media (max-width: 430px) {
  .avatar-modal-panel {
    padding-bottom: 14px !important;
  }

  .avatar-modal-actions {
    margin-top: 10px !important;
  }

  .avatar-modal-actions .btn {
    min-height: 38px !important;
  }
}


/* v32: avatar modal layout matches reference screenshot */
.avatar-modal {
  padding: 24px !important;
}

.avatar-modal-backdrop {
  background: rgba(15, 23, 42, 0.58) !important;
  backdrop-filter: blur(5px) !important;
}

.avatar-modal-panel {
  width: min(520px, calc(100vw - 32px)) !important;
  max-height: min(860px, calc(100vh - 48px)) !important;
  padding: 28px 22px 24px !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  box-shadow: 0 26px 90px rgba(15, 23, 42, 0.26) !important;
}

.avatar-modal-panel h2 {
  font-size: 24px !important;
  line-height: 1.15 !important;
  margin: 0 !important;
  text-align: center !important;
}

.avatar-modal-panel p {
  margin: 8px 0 12px !important;
  font-size: 14px !important;
  text-align: center !important;
}

.avatar-modal-close {
  top: 18px !important;
  right: 18px !important;
  width: 32px !important;
  height: 32px !important;
  font-size: 28px !important;
}

.avatar-modal-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 14px !important;
  border: 1px solid var(--line) !important;
  border-radius: 20px !important;
  background: #fff !important;
  max-height: min(520px, calc(100vh - 250px)) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

.avatar-modal-grid::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.avatar-modal-option {
  min-height: 48px !important;
  border-radius: 11px !important;
  font-size: 21px !important;
  background: #fff !important;
}

.avatar-modal-option.active {
  border-color: #ff9bad !important;
  background: #fff1f4 !important;
  box-shadow: inset 0 0 0 2px rgba(215, 0, 29, 0.08) !important;
}

.avatar-modal-actions {
  display: flex !important;
  justify-content: center !important;
  gap: 12px !important;
  margin-top: 20px !important;
  padding-top: 0 !important;
}

.avatar-modal-actions .btn {
  min-width: 88px !important;
  min-height: 42px !important;
  border-radius: 12px !important;
}

.avatar-modal-actions .btn-primary {
  min-width: 96px !important;
}

@media (max-width: 430px) {
  .avatar-modal {
    align-items: center !important;
    padding: 16px !important;
  }

  .avatar-modal-panel {
    width: min(360px, calc(100vw - 28px)) !important;
    max-height: calc(100vh - 40px) !important;
    padding: 22px 14px 18px !important;
    border-radius: 22px !important;
  }

  .avatar-modal-panel h2 {
    font-size: 20px !important;
  }

  .avatar-modal-panel p {
    margin: 6px 0 10px !important;
    font-size: 13px !important;
  }

  .avatar-modal-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 10px !important;
    border-radius: 18px !important;
    max-height: calc(100vh - 210px) !important;
  }

  .avatar-modal-option {
    min-height: 40px !important;
    border-radius: 10px !important;
    font-size: 19px !important;
  }

  .avatar-modal-actions {
    margin-top: 14px !important;
  }

  .avatar-modal-actions .btn {
    min-width: 82px !important;
    min-height: 38px !important;
  }
}


/* v33: personal info button active state only */
.account-actions .btn.active {
  background: var(--red-soft) !important;
  color: var(--red) !important;
  border-color: transparent !important;
  box-shadow: 0 14px 30px rgba(215, 0, 29, 0.08) !important;
}


/* v34: enlarge top account identity area and rename account label */
.logged-shell .account-card .account-left {
  gap: 14px !important;
}

.logged-shell .account-card .account-avatar {
  width: 52px !important;
  height: 52px !important;
  flex: 0 0 52px !important;
  font-size: 27px !important;
}

.logged-shell .account-card .account-name {
  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
}

.logged-shell .account-card .account-meta {
  margin-top: 5px !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  color: var(--muted) !important;
}

/* Keep the profile avatar setting card unchanged except for its own text rhythm */
.profile-avatar-card .account-name {
  font-size: 18px !important;
}

.profile-avatar-card .account-meta {
  font-size: 13px !important;
}

@media (max-width: 430px) {
  .logged-shell .account-card .account-left {
    gap: 11px !important;
  }

  .logged-shell .account-card .account-avatar {
    width: 48px !important;
    height: 48px !important;
    flex-basis: 48px !important;
    font-size: 25px !important;
  }

  .logged-shell .account-card .account-name {
    font-size: 19px !important;
  }

  .logged-shell .account-card .account-meta {
    margin-top: 4px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 360px) {
  .logged-shell .account-card .account-avatar {
    width: 42px !important;
    height: 42px !important;
    flex-basis: 42px !important;
    font-size: 22px !important;
  }

  .logged-shell .account-card .account-name {
    font-size: 17px !important;
  }

  .logged-shell .account-card .account-meta {
    font-size: 12px !important;
  }
}


/* v35: add login password change section */
.password-section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.section-subtitle {
  margin-bottom: 12px;
}

.section-subtitle h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 900;
  color: var(--text);
}

.section-subtitle p {
  margin: 5px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.password-grid {
  gap: 14px !important;
}

.password-grid input {
  min-height: 44px;
}

@media (max-width: 430px) {
  .password-section {
    margin-top: 14px;
    padding-top: 12px;
  }

  .section-subtitle h3 {
    font-size: 16px;
  }

  .section-subtitle p {
    font-size: 12px;
  }
}


/* v36: cleaner signup page layout inspired by final mockup */
.staff-tabs {
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
  border-radius: 18px !important;
}

.staff-tabs .tab {
  position: relative !important;
  min-height: 58px !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #506078 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

.staff-tabs .tab.active {
  background: transparent !important;
  color: var(--red) !important;
  box-shadow: none !important;
}

.staff-tabs .tab.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 34px;
  height: 3px;
  border-radius: 999px;
  background: var(--red);
  transform: translateX(-50%);
}

.signup-card-clean {
  padding: 22px !important;
  border-radius: 24px !important;
  overflow: visible !important;
}

.signup-title-clean {
  margin-bottom: 18px !important;
}

.signup-title-clean h2 {
  font-size: 28px !important;
  letter-spacing: -0.04em !important;
}

.signup-title-clean .card-desc {
  font-size: 15px !important;
  color: #52627a !important;
}

.signup-filter-row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin: 18px 0 20px;
}

.filter-label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 950;
  font-size: 15px;
}

.filter-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #f3f4f6;
  color: #475467;
  font-size: 18px;
}

.signup-filter-row select {
  min-height: 48px !important;
  border-radius: 16px !important;
  padding-left: 18px !important;
  font-weight: 800;
}

.signup-shift-list {
  gap: 16px !important;
}

.signup-shift-card {
  position: relative;
  padding: 20px !important;
  border-radius: 22px !important;
  background: #fff !important;
  border: 1px solid #e3e8ef !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.035);
}

.shift-card-top {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
}

.shift-date-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #dcfce7;
  color: var(--green);
  font-size: 20px;
}

.shift-date-icon.muted {
  background: #f1f5f9;
  color: #64748b;
}

.signup-shift-card .shift-title {
  font-size: 22px !important;
  line-height: 1.2 !important;
  margin-top: 3px !important;
  letter-spacing: -0.035em !important;
}

.signup-shift-card .pills {
  gap: 9px !important;
  margin-top: 14px !important;
}

.signup-shift-card .pill {
  min-height: 32px !important;
  padding: 0 11px !important;
  background: #f7f8fa !important;
  border-color: transparent !important;
  color: #475467 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

.venue-row {
  margin-top: 10px;
}

.venue-badge {
  min-height: 32px !important;
  padding: 0 13px !important;
  font-size: 13px !important;
}

.venue-badge.snow {
  border-color: #fecdd3 !important;
  background: #fff1f3 !important;
  color: var(--red) !important;
}

.venue-badge.sea {
  border-color: #bbf7d0 !important;
  background: #ecfdf5 !important;
  color: var(--green) !important;
}

.status-badge {
  min-height: 34px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
}

.status-signed,
.signup-shift-card .action-btn.signed {
  border-color: #86efac !important;
  background: #ecfdf5 !important;
  color: var(--green) !important;
}

.status-open {
  border-color: #bbf7d0 !important;
  background: #ecfdf5 !important;
  color: var(--green) !important;
}

.signup-shift-card .actions {
  margin-top: 18px !important;
}

.signup-shift-card .action-btn {
  width: 100% !important;
  min-height: 52px !important;
  border-radius: 999px !important;
  font-size: 18px !important;
  background: #fff !important;
  color: var(--red) !important;
  border: 1.5px solid var(--red) !important;
  font-weight: 950 !important;
}

.signup-shift-card .action-btn.signed {
  border: 1.5px solid #86efac !important;
}

.signup-shift-card .action-btn.active {
  background: var(--red-soft) !important;
  color: var(--red) !important;
  border-color: #ff9bad !important;
}

.signup-submit-bar {
  bottom: 12px !important;
  display: grid !important;
  grid-template-columns: 1fr 1.4fr !important;
  gap: 12px !important;
  padding: 12px !important;
  margin-top: 18px !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 -8px 30px rgba(15, 23, 42, 0.08) !important;
}

.signup-submit-bar .selected-count {
  justify-content: flex-start;
  font-size: 16px;
  border-color: transparent;
  background: transparent;
  box-shadow: none !important;
}

.signup-submit-bar .selected-count strong {
  color: var(--red);
  font-size: 24px;
  line-height: 1;
  margin: 0 3px;
}

.signup-submit-bar .btn-primary {
  min-height: 54px !important;
  border-radius: 16px !important;
  font-size: 18px !important;
}

@media (max-width: 430px) {
  .staff-tabs .tab {
    min-height: 52px !important;
    font-size: 14px !important;
  }

  .signup-card-clean {
    padding: 16px !important;
    border-radius: 22px !important;
  }

  .signup-title-clean h2 {
    font-size: 24px !important;
  }

  .signup-title-clean .card-desc {
    font-size: 13px !important;
  }

  .signup-filter-row {
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 14px 0 16px;
  }

  .filter-icon {
    width: 30px;
    height: 30px;
    font-size: 16px;
  }

  .signup-filter-row select {
    min-height: 46px !important;
  }

  .signup-shift-card {
    padding: 16px !important;
    border-radius: 20px !important;
  }

  .shift-card-top {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 10px;
  }

  .shift-date-icon {
    width: 36px;
    height: 36px;
    font-size: 17px;
  }

  .signup-shift-card .shift-title {
    font-size: 20px !important;
  }

  .signup-shift-card .pill,
  .venue-badge,
  .status-badge {
    font-size: 12px !important;
  }

  .signup-shift-card .action-btn {
    min-height: 48px !important;
    font-size: 17px !important;
  }

  .signup-submit-bar {
    grid-template-columns: 1fr 1.35fr !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  .signup-submit-bar .btn-primary {
    min-height: 50px !important;
    font-size: 17px !important;
  }
}

@media (max-width: 360px) {
  .shift-card-top {
    grid-template-columns: 1fr auto;
  }

  .shift-date-icon {
    display: none;
  }

  .signup-submit-bar {
    grid-template-columns: 1fr !important;
  }

  .signup-submit-bar .selected-count {
    justify-content: center;
  }
}


/* v37: signup card details use compact 2x2 grid pills */
.signup-shift-card {
  padding: 18px !important;
}

.shift-card-top {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: start !important;
}

.shift-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.shift-title-row .shift-title {
  margin: 2px 0 0 !important;
}

.shift-title-row .status-badge {
  flex: 0 0 auto;
}

.shift-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 10px;
  margin-top: 14px;
}

.info-pill {
  min-height: 38px;
  padding: 0 12px;
  border-radius: 14px;
  background: #f7f8fa;
  color: #475467;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 13px;
  line-height: 1.1;
  white-space: nowrap;
  box-sizing: border-box;
}

.info-pill strong {
  font-weight: 900;
}

.info-pill.venue-info.snow {
  background: #fff1f3;
  color: var(--red);
}

.info-pill.venue-info.sea {
  background: #ecfdf5;
  color: var(--green);
}

.signup-shift-card .actions {
  margin-top: 16px !important;
}

.signup-shift-card .action-btn {
  min-height: 50px !important;
}

@media (max-width: 430px) {
  .signup-shift-card {
    padding: 16px !important;
  }

  .shift-card-top {
    grid-template-columns: 40px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .shift-title-row {
    gap: 8px;
  }

  .shift-title-row .shift-title {
    font-size: 20px !important;
  }

  .shift-info-grid {
    gap: 8px;
    margin-top: 12px;
  }

  .info-pill {
    min-height: 36px;
    padding: 0 8px;
    border-radius: 13px;
    font-size: 12px;
    gap: 5px;
  }

  .status-badge {
    min-height: 30px !important;
    padding: 0 11px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 360px) {
  .shift-card-top {
    grid-template-columns: 1fr !important;
  }

  .shift-date-icon {
    display: none !important;
  }

  .shift-info-grid {
    grid-template-columns: 1fr 1fr;
  }

  .info-pill {
    font-size: 11px;
  }
}


/* v38: align signup pill grid left and neutralize venue pill color */
.signup-shift-card {
  position: relative !important;
}

.shift-card-top {
  display: block !important;
}

.shift-date-icon {
  position: absolute !important;
  top: 18px !important;
  left: 18px !important;
}

.shift-main {
  width: 100% !important;
}

.shift-title-row {
  padding-left: 54px !important;
  min-height: 44px !important;
}

.shift-info-grid {
  width: 100% !important;
  margin-top: 14px !important;
  padding-left: 0 !important;
  justify-items: stretch !important;
}

.info-pill {
  justify-content: center !important;
  text-align: center !important;
}

.info-pill.venue-info.snow,
.info-pill.venue-info.sea {
  background: #f7f8fa !important;
  color: #475467 !important;
  border-color: transparent !important;
}

.info-pill.venue-info.snow strong,
.info-pill.venue-info.sea strong {
  color: #475467 !important;
}

/* Keep only status badges and action buttons as colored states */
.status-signed,
.status-open {
  background: #ecfdf5 !important;
  color: var(--green) !important;
  border-color: #bbf7d0 !important;
}

@media (max-width: 430px) {
  .shift-date-icon {
    top: 16px !important;
    left: 16px !important;
  }

  .shift-title-row {
    padding-left: 46px !important;
    min-height: 40px !important;
  }

  .shift-info-grid {
    margin-top: 12px !important;
  }
}

@media (max-width: 360px) {
  .shift-date-icon {
    display: grid !important;
    width: 34px !important;
    height: 34px !important;
    font-size: 16px !important;
  }

  .shift-title-row {
    padding-left: 42px !important;
  }

  .shift-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}


/* v39: signup page uses left date block card layout only */
.signup-shift-card-v39 {
  display: grid !important;
  grid-template-columns: 82px minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: stretch !important;
  padding: 18px !important;
  border-radius: 22px !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04) !important;
  position: relative !important;
}

.signup-shift-card-v39 .shift-date-block {
  display: grid !important;
  justify-items: center !important;
  align-content: center !important;
  border-right: 1px solid #eef0f3 !important;
  padding-right: 14px !important;
  min-height: 128px !important;
}

.signup-shift-card-v39 .shift-month,
.signup-shift-card-v39 .shift-weekday {
  color: var(--red) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

.signup-shift-card-v39 .shift-day {
  margin: 7px 0 !important;
  color: #111827 !important;
  font-size: 42px !important;
  line-height: 0.95 !important;
  font-weight: 950 !important;
  letter-spacing: -0.05em !important;
}

.signup-shift-card-v39 .shift-content {
  min-width: 0 !important;
  display: grid !important;
  align-content: start !important;
}

.signup-shift-card-v39 .shift-title-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 10px !important;
  padding-left: 0 !important;
  min-height: auto !important;
}

.signup-shift-card-v39 .shift-title {
  margin: 0 !important;
  color: #111827 !important;
  font-size: 21px !important;
  line-height: 1.2 !important;
  font-weight: 950 !important;
  letter-spacing: -0.035em !important;
}

.signup-shift-card-v39 .shift-time {
  margin-top: 9px !important;
  color: #111827 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

.signup-shift-card-v39 .shift-meta-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px 16px !important;
  margin-top: 14px !important;
  padding-top: 12px !important;
  border-top: 1px solid #eef0f3 !important;
  color: #374151 !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
}

.signup-shift-card-v39 .status-badge {
  flex: 0 0 auto !important;
  min-height: 32px !important;
  padding: 0 13px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

.signup-shift-card-v39 .status-open,
.signup-shift-card-v39 .status-signed {
  background: #ecfdf5 !important;
  color: var(--green) !important;
  border: 1px solid #bbf7d0 !important;
}

.signup-shift-card-v39 .status-ended {
  background: #f3f4f6 !important;
  color: #6b7280 !important;
  border: 1px solid #e5e7eb !important;
}

.signup-shift-card-v39 .actions {
  display: flex !important;
  justify-content: flex-end !important;
  margin-top: 16px !important;
}

.signup-shift-card-v39 .action-btn {
  width: 96px !important;
  min-height: 42px !important;
  padding: 0 18px !important;
  border-radius: 12px !important;
  border: 1.5px solid var(--red) !important;
  background: #fff !important;
  color: var(--red) !important;
  font-size: 16px !important;
  font-weight: 950 !important;
}

.signup-shift-card-v39 .action-btn.signed,
.signup-shift-card-v39 .action-btn.active {
  border-color: #bbf7d0 !important;
  background: #ecfdf5 !important;
  color: var(--green) !important;
}

@media (max-width: 430px) {
  .signup-shift-card-v39 {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 16px !important;
  }

  .signup-shift-card-v39 .shift-date-block {
    min-height: 122px !important;
    padding-right: 12px !important;
  }

  .signup-shift-card-v39 .shift-month,
  .signup-shift-card-v39 .shift-weekday {
    font-size: 14px !important;
  }

  .signup-shift-card-v39 .shift-day {
    font-size: 38px !important;
  }

  .signup-shift-card-v39 .shift-title {
    font-size: 20px !important;
  }

  .signup-shift-card-v39 .shift-time {
    font-size: 14px !important;
  }

  .signup-shift-card-v39 .shift-meta-row {
    gap: 10px !important;
    font-size: 13px !important;
  }

  .signup-shift-card-v39 .status-badge {
    min-height: 30px !important;
    padding: 0 11px !important;
    font-size: 12px !important;
  }

  .signup-shift-card-v39 .action-btn {
    width: 82px !important;
    min-height: 40px !important;
    padding: 0 12px !important;
    font-size: 15px !important;
  }
}

@media (max-width: 360px) {
  .signup-shift-card-v39 {
    grid-template-columns: 64px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 14px !important;
  }

  .signup-shift-card-v39 .shift-date-block {
    padding-right: 10px !important;
  }

  .signup-shift-card-v39 .shift-day {
    font-size: 34px !important;
  }

  .signup-shift-card-v39 .shift-title-row {
    align-items: flex-start !important;
  }

  .signup-shift-card-v39 .status-badge {
    padding: 0 9px !important;
  }
}


/* v41: custom venue filter matches site style */
.signup-filter-select {
  position: relative;
}

.signup-filter-trigger {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px 0 18px;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  background: #fff;
  color: var(--text);
  box-shadow: 0 8px 20px rgba(15,23,42,.03);
  transition: .18s ease;
}

.signup-filter-trigger:hover {
  border-color: #f3b7c1;
  box-shadow: 0 10px 24px rgba(215,0,29,.05);
}

.signup-filter-select.open .signup-filter-trigger {
  border-color: #ff9bad;
  box-shadow: 0 0 0 3px rgba(215,0,29,.08);
}

.signup-filter-trigger-value {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 15px;
  font-weight: 900;
  color: #101828;
}

.signup-filter-trigger-icon {
  flex: 0 0 auto;
  font-size: 16px;
}

.signup-filter-chevron {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid #667085;
  border-bottom: 2px solid #667085;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .18s ease, border-color .18s ease;
}

.signup-filter-select.open .signup-filter-chevron {
  transform: rotate(225deg) translateY(-1px);
  border-color: var(--red);
}

.signup-filter-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid #eceff3;
  border-radius: 18px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 18px 36px rgba(15,23,42,.12);
  backdrop-filter: blur(10px);
}

.signup-filter-option {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: #344054;
  font-size: 15px;
  font-weight: 850;
  text-align: left;
  transition: .16s ease;
}

.signup-filter-option:hover {
  background: #f8fafc;
  color: #101828;
}

.signup-filter-option.active {
  background: #fff1f4;
  color: var(--red);
}

@media (max-width: 430px) {
  .signup-filter-trigger {
    min-height: 50px;
    padding: 0 14px 0 16px;
    border-radius: 16px;
  }

  .signup-filter-trigger-value {
    font-size: 14px;
    gap: 9px;
  }

  .signup-filter-menu {
    top: calc(100% + 6px);
    padding: 7px;
    border-radius: 16px;
  }

  .signup-filter-option {
    min-height: 42px;
    font-size: 14px;
    border-radius: 12px;
  }
}


/* v42: fix custom venue filter collapse behavior */
.signup-filter-menu {
  display: none !important;
}

.signup-filter-select.open .signup-filter-menu,
.signup-filter-menu.open {
  display: grid !important;
}

.signup-filter-menu[aria-hidden="true"] {
  display: none !important;
}

.signup-filter-menu[aria-hidden="false"] {
  display: grid !important;
}


/* v44: allow venue filter to hide unmatched signup cards */
.signup-shift-card-v39[hidden] {
  display: none !important;
}


/* v45: records page card layout only */
.records-card-clean {
  padding: 22px !important;
  border-radius: 24px !important;
}

.records-title-clean {
  margin-bottom: 18px !important;
}

.records-title-clean h2 {
  font-size: 28px !important;
  letter-spacing: -0.04em !important;
}

.records-title-clean .card-desc {
  font-size: 15px !important;
  color: #52627a !important;
}

.records-shift-list {
  gap: 16px !important;
}

.records-shift-card {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 18px;
  padding: 18px;
  border: 1px solid #e5e7eb;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.records-date-block {
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: 128px;
  padding-right: 14px;
  border-right: 1px solid #eef0f3;
}

.records-month,
.records-weekday {
  color: var(--red);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.2;
}

.records-day {
  margin: 7px 0;
  color: #111827;
  font-size: 42px;
  line-height: 0.95;
  font-weight: 950;
  letter-spacing: -0.05em;
}

.records-content {
  min-width: 0;
  display: grid;
  align-content: start;
}

.records-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.records-shift-title {
  margin: 0;
  color: #111827;
  font-size: 21px;
  line-height: 1.2;
  font-weight: 950;
  letter-spacing: -0.035em;
}

.records-status-badge {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #fbbf24;
  border-radius: 999px;
  background: #fffbeb;
  color: #d97706;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.records-info-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #eef0f3;
}

.records-time {
  color: #374151;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

.records-need {
  min-height: 34px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f8fafc;
  color: #374151;
  font-size: 14px;
  font-weight: 850;
  white-space: nowrap;
}

.records-state-bar,
.records-cancel-btn {
  width: 100%;
  min-height: 46px;
  margin-top: 16px;
  border-radius: 13px;
  font-size: 16px;
  font-weight: 950;
}

.records-state-bar {
  display: grid;
  place-items: center;
  border: 1px solid #fde68a;
  background: #fffbeb;
  color: #b45309;
}

.records-cancel-btn {
  border: 1.5px solid var(--red);
  background: #fff;
  color: var(--red);
}

.records-note {
  margin-top: 16px;
  padding: 13px 14px;
  border: 1px solid #fde68a;
  border-radius: 16px;
  background: #fffbeb;
  color: #92400e;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.55;
}

@media (max-width: 430px) {
  .records-card-clean {
    padding: 16px !important;
    border-radius: 22px !important;
  }

  .records-title-clean h2 {
    font-size: 24px !important;
  }

  .records-title-clean .card-desc {
    font-size: 13px !important;
  }

  .records-shift-card {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
    border-radius: 20px;
  }

  .records-date-block {
    min-height: 122px;
    padding-right: 12px;
  }

  .records-month,
  .records-weekday {
    font-size: 14px;
  }

  .records-day {
    font-size: 38px;
  }

  .records-shift-title {
    font-size: 20px;
  }

  .records-status-badge {
    min-height: 30px;
    padding: 0 11px;
    font-size: 12px;
  }

  .records-time {
    font-size: 14px;
  }

  .records-need {
    min-height: 32px;
    padding: 0 12px;
    font-size: 13px;
  }

  .records-state-bar,
  .records-cancel-btn {
    min-height: 44px;
    font-size: 15px;
  }
}

@media (max-width: 360px) {
  .records-shift-card {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
  }

  .records-date-block {
    padding-right: 10px;
  }

  .records-day {
    font-size: 34px;
  }

  .records-title-row {
    align-items: flex-start;
  }

  .records-info-row {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .records-need {
    justify-self: start;
  }
}


/* v46: assignments page card layout only */
.assignments-card-clean {
  padding: 22px !important;
  border-radius: 24px !important;
}

.assignments-title-clean {
  margin-bottom: 18px !important;
}

.assignments-title-clean h2 {
  font-size: 28px !important;
  letter-spacing: -0.04em !important;
}

.assignments-title-clean .card-desc {
  font-size: 15px !important;
  color: #52627a !important;
}

.assignments-shift-list {
  gap: 16px !important;
}

.assignments-shift-card {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 18px;
  padding: 18px;
  border: 1px solid #e5e7eb;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.assignments-date-block {
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: 128px;
  padding-right: 14px;
  border-right: 1px solid #eef0f3;
}

.assignments-month,
.assignments-weekday {
  color: var(--red);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.2;
}

.assignments-day {
  margin: 7px 0;
  color: #111827;
  font-size: 42px;
  line-height: 0.95;
  font-weight: 950;
  letter-spacing: -0.05em;
}

.assignments-content {
  min-width: 0;
  display: grid;
  align-content: start;
}

.assignments-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.assignments-shift-title {
  margin: 0;
  color: #111827;
  font-size: 21px;
  line-height: 1.2;
  font-weight: 950;
  letter-spacing: -0.035em;
}

.assignments-status-badge {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.assignments-status-badge.ready {
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #2563eb;
}

.assignments-status-badge.waiting {
  border: 1px solid #ddd6fe;
  background: #f5f3ff;
  color: #7c3aed;
}

.assignments-info-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #eef0f3;
}

.assignments-time {
  color: #374151;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

.assignments-position {
  min-height: 34px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f8fafc;
  color: #374151;
  font-size: 14px;
  font-weight: 850;
  white-space: nowrap;
}

.assignments-hour-panel {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid #eef0f3;
  border-radius: 18px;
  background: #f8fafc;
}

.assignments-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.assignments-form-grid label {
  color: #344054;
  font-size: 13px;
  font-weight: 850;
}

.assignments-form-grid input,
.assignments-form-grid textarea {
  border-radius: 13px;
  background: #fff;
}

.assignments-form-grid input[readonly] {
  color: #475467;
  background: #f9fafb;
}

.assignments-field-full {
  grid-column: 1 / -1;
}

.assignments-submit-btn {
  width: 100%;
  min-height: 46px;
  margin-top: 14px;
  border: 1px solid var(--red);
  border-radius: 13px;
  background: var(--red);
  color: #fff;
  font-size: 16px;
  font-weight: 950;
  box-shadow: 0 12px 24px rgba(215, 0, 29, 0.16);
}

.assignments-state-bar {
  width: 100%;
  min-height: 46px;
  margin-top: 16px;
  display: grid;
  place-items: center;
  border: 1px solid #fde68a;
  border-radius: 13px;
  background: #fffbeb;
  color: #b45309;
  font-size: 16px;
  font-weight: 950;
}

.assignments-note {
  margin-top: 16px;
  padding: 13px 14px;
  border: 1px solid #fde68a;
  border-radius: 16px;
  background: #fffbeb;
  color: #92400e;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.55;
}

@media (max-width: 430px) {
  .assignments-card-clean {
    padding: 16px !important;
    border-radius: 22px !important;
  }

  .assignments-title-clean h2 {
    font-size: 24px !important;
  }

  .assignments-title-clean .card-desc {
    font-size: 13px !important;
  }

  .assignments-shift-card {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
    border-radius: 20px;
  }

  .assignments-date-block {
    min-height: 122px;
    padding-right: 12px;
  }

  .assignments-month,
  .assignments-weekday {
    font-size: 14px;
  }

  .assignments-day {
    font-size: 38px;
  }

  .assignments-shift-title {
    font-size: 20px;
  }

  .assignments-status-badge {
    min-height: 30px;
    padding: 0 11px;
    font-size: 12px;
  }

  .assignments-time {
    font-size: 14px;
  }

  .assignments-position {
    min-height: 32px;
    padding: 0 12px;
    font-size: 13px;
  }

  .assignments-hour-panel {
    padding: 12px;
    border-radius: 16px;
  }

  .assignments-form-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .assignments-submit-btn,
  .assignments-state-bar {
    min-height: 44px;
    font-size: 15px;
  }
}

@media (max-width: 360px) {
  .assignments-shift-card {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
  }

  .assignments-date-block {
    padding-right: 10px;
  }

  .assignments-day {
    font-size: 34px;
  }

  .assignments-title-row {
    align-items: flex-start;
  }

  .assignments-info-row {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .assignments-position {
    justify-self: start;
  }
}


/* v48: assignments auto checkout display only */
.assignments-auto-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.assignments-auto-item {
  min-height: 70px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
}

.assignments-auto-label {
  color: #667085;
  font-size: 13px;
  font-weight: 850;
}

.assignments-auto-item strong {
  color: #111827;
  font-size: 15px;
  font-weight: 950;
  line-height: 1.25;
}

.assignments-auto-tip {
  margin-top: 10px;
  color: #667085;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.45;
}

@media (max-width: 430px) {
  .assignments-auto-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .assignments-auto-item {
    min-height: 62px;
    padding: 11px 13px;
    border-radius: 13px;
  }

  .assignments-auto-item strong {
    font-size: 14px;
  }
}


/* v49: assignments latest arrival time display only */
.assignments-arrival-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #eef0f3;
}

.assignments-info-box {
  min-height: 58px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #f8fafc;
}

.assignments-info-box span {
  color: #667085;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.2;
}

.assignments-info-box strong {
  color: #111827;
  font-size: 15px;
  font-weight: 950;
  line-height: 1.2;
  white-space: nowrap;
}

.assignments-info-box.late {
  border-color: #fde68a;
  background: #fffbeb;
}

.assignments-info-box.late strong {
  color: #b45309;
}

.assignments-info-box.position {
  background: #fff;
}

@media (max-width: 430px) {
  .assignments-arrival-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .assignments-info-box {
    min-height: 54px;
    padding: 9px 10px;
    border-radius: 13px;
  }

  .assignments-info-box strong {
    font-size: 14px;
  }

  .assignments-info-box.position {
    grid-column: 1 / -1;
  }
}


/* v50: assignments optional late arrival input only */
.assignments-info-box.late-input-box {
  border-color: #fde68a;
  background: #fffbeb;
}

.assignments-info-box.late-input-box label {
  margin: 0;
  color: #92400e;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
}

.assignments-late-input {
  min-height: 28px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #111827 !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
}

.assignments-late-input::placeholder {
  color: #b45309;
  opacity: .72;
  font-weight: 850;
}

.assignments-late-input:focus {
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

@media (max-width: 430px) {
  .assignments-late-input {
    font-size: 14px !important;
  }
}


/* v51: mobile fix for assignments page only */
@media (max-width: 430px) {
  .assignments-shift-card {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
  }

  .assignments-date-block {
    min-height: auto;
    align-content: start;
    padding-top: 6px;
    padding-right: 10px;
  }

  .assignments-title-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: start;
  }

  .assignments-shift-title {
    font-size: 18px;
    line-height: 1.25;
    word-break: break-word;
  }

  .assignments-status-badge {
    justify-self: start;
  }

  .assignments-arrival-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .assignments-info-box {
    min-height: 52px;
    padding: 8px 10px;
  }

  .assignments-info-box span,
  .assignments-info-box.late-input-box label,
  .assignments-auto-label {
    font-size: 11px;
  }

  .assignments-info-box strong,
  .assignments-late-input {
    font-size: 13px !important;
    line-height: 1.2;
  }

  .assignments-info-box.position {
    grid-column: 1 / -1;
  }

  .assignments-hour-panel {
    margin-top: 12px;
    padding: 10px;
    border-radius: 14px;
  }

  .assignments-auto-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .assignments-auto-item {
    min-height: 56px;
    padding: 10px 12px;
  }

  .assignments-auto-tip {
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.5;
  }

  .assignments-submit-btn,
  .assignments-state-bar {
    min-height: 42px;
    margin-top: 12px;
    font-size: 15px;
  }
}

@media (max-width: 360px) {
  .assignments-shift-card {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
  }

  .assignments-date-block {
    padding-right: 8px;
  }

  .assignments-day {
    font-size: 32px;
  }

  .assignments-shift-title {
    font-size: 17px;
  }
}


/* v52: refine assignments mobile layout only */
@media (max-width: 430px) {
  .assignments-shift-card {
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
  }

  .assignments-date-block {
    min-height: auto;
    padding-right: 8px;
    align-content: center;
  }

  .assignments-month,
  .assignments-weekday {
    font-size: 12px;
    line-height: 1.15;
  }

  .assignments-day {
    margin: 5px 0;
    font-size: 30px;
    line-height: 0.92;
  }

  .assignments-content {
    gap: 0;
  }

  .assignments-arrival-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
  }

  .assignments-info-box {
    min-height: 48px;
    padding: 8px 9px;
    border-radius: 12px;
    gap: 3px;
  }

  .assignments-info-box span,
  .assignments-info-box.late-input-box label,
  .assignments-auto-label {
    font-size: 11px;
    line-height: 1.15;
  }

  .assignments-info-box strong,
  .assignments-late-input {
    font-size: 12px !important;
    line-height: 1.2;
  }

  .assignments-late-input::placeholder {
    font-size: 12px;
    white-space: nowrap;
  }

  .assignments-info-box.position {
    grid-column: 1 / -1;
    width: fit-content;
    min-width: 110px;
    max-width: 140px;
    justify-self: start;
    min-height: 44px;
    background: #fff;
  }

  .assignments-hour-panel {
    margin-top: 10px;
    padding: 10px;
  }

  .assignments-auto-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .assignments-auto-item {
    min-height: 54px;
    padding: 10px 11px;
    border-radius: 12px;
  }

  .assignments-auto-item strong {
    font-size: 14px;
  }

  .assignments-auto-tip {
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.45;
  }

  .assignments-submit-btn,
  .assignments-state-bar {
    min-height: 42px;
    margin-top: 10px;
  }
}

@media (max-width: 360px) {
  .assignments-shift-card {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 9px;
    padding: 11px;
  }

  .assignments-month,
  .assignments-weekday {
    font-size: 11px;
  }

  .assignments-day {
    font-size: 28px;
  }

  .assignments-info-box.position {
    min-width: 100px;
  }
}


/* v53: assignments final layout from current discussion only */
.assignments-shift-card-v53 {
  grid-template-columns: 82px minmax(0, 1fr) !important;
}

.assignments-content-v53 {
  gap: 0 !important;
}

.assignments-title-row-v53 {
  align-items: center !important;
  padding-bottom: 12px;
  border-bottom: 1px solid #eef0f3;
}

.assignments-role-line {
  margin-top: 12px;
  color: #475467;
  font-size: 15px;
  font-weight: 850;
}

.assignments-time-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.assignments-time-box {
  min-height: 72px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #f8fafc;
}

.assignments-time-box span,
.assignments-time-box label {
  margin: 0;
  color: #667085;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.2;
}

.assignments-time-box strong,
.assignments-time-box .assignments-late-input {
  color: #111827 !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  line-height: 1.2 !important;
}

.assignments-time-box.late-input-box {
  border-color: #fde68a;
  background: #fffbeb;
}

.assignments-time-box.late-input-box label,
.assignments-time-box.late-input-box .assignments-late-input::placeholder {
  color: #b45309;
}

.assignments-time-box .assignments-late-input {
  width: 100% !important;
  min-height: 28px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.assignments-time-box .assignments-late-input:focus {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

.assignments-submit-panel {
  margin-top: 16px;
  display: grid;
  gap: 12px;
}

.assignments-auto-summary {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 13px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #fff;
  color: #5b667a;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.55;
}

.summary-icon {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #667085;
  font-size: 19px;
  font-weight: 900;
}

.assignments-shift-card-v53 .assignments-submit-btn {
  min-height: 52px;
  margin-top: 0;
  border-radius: 16px;
  font-size: 18px;
}

@media (max-width: 430px) {
  .assignments-shift-card-v53 {
    grid-template-columns: 54px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 13px !important;
  }

  .assignments-shift-card-v53 .assignments-date-block {
    align-content: start !important;
    padding-top: 8px !important;
    padding-right: 9px !important;
    min-height: 0 !important;
  }

  .assignments-shift-card-v53 .assignments-month,
  .assignments-shift-card-v53 .assignments-weekday {
    font-size: 12px !important;
  }

  .assignments-shift-card-v53 .assignments-day {
    margin: 5px 0 !important;
    font-size: 31px !important;
  }

  .assignments-title-row-v53 {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    align-items: center !important;
    padding-bottom: 10px;
  }

  .assignments-title-row-v53 .assignments-shift-title {
    min-width: 0;
    flex: 1 1 auto;
    font-size: 18px !important;
    line-height: 1.2 !important;
    word-break: normal !important;
  }

  .assignments-title-row-v53 .assignments-status-badge {
    flex: 0 0 auto;
    justify-self: auto;
    min-height: 28px;
    padding: 0 10px;
    font-size: 12px;
  }

  .assignments-role-line {
    margin-top: 10px;
    font-size: 13px;
  }

  .assignments-time-grid {
    gap: 8px;
    margin-top: 11px;
  }

  .assignments-time-box {
    min-height: 60px;
    padding: 9px 10px;
    border-radius: 13px;
  }

  .assignments-time-box span,
  .assignments-time-box label {
    font-size: 12px;
  }

  .assignments-time-box strong,
  .assignments-time-box .assignments-late-input {
    font-size: 15px !important;
  }

  .assignments-time-box .assignments-late-input::placeholder {
    font-size: 14px;
  }

  .assignments-submit-panel {
    margin-top: 12px;
    gap: 10px;
  }

  .assignments-auto-summary {
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 8px;
    padding: 11px 12px;
    border-radius: 14px;
    font-size: 12px;
    line-height: 1.5;
  }

  .summary-icon {
    width: 22px;
    height: 22px;
    font-size: 16px;
  }

  .assignments-shift-card-v53 .assignments-submit-btn {
    min-height: 46px;
    border-radius: 14px;
    font-size: 16px;
  }
}

@media (max-width: 360px) {
  .assignments-shift-card-v53 {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 9px !important;
    padding: 11px !important;
  }

  .assignments-title-row-v53 {
    align-items: flex-start !important;
  }

  .assignments-title-row-v53 .assignments-status-badge {
    padding: 0 8px;
  }

  .assignments-shift-card-v53 .assignments-day {
    font-size: 28px !important;
  }

  .assignments-time-grid {
    grid-template-columns: 1fr;
  }
}


/* v54: fix assignments mobile layout only */
@media (max-width: 430px) {
  .assignments-shift-card-v53 {
    display: block !important;
    padding: 14px !important;
    border-radius: 20px !important;
  }

  .assignments-shift-card-v53 .assignments-date-block {
    min-height: 0 !important;
    padding: 0 0 10px 0 !important;
    margin: 0 0 12px 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid #eef0f3 !important;
    display: flex !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    gap: 6px !important;
  }

  .assignments-shift-card-v53 .assignments-month,
  .assignments-shift-card-v53 .assignments-weekday {
    font-size: 13px !important;
    line-height: 1 !important;
    color: var(--red) !important;
    font-weight: 900 !important;
  }

  .assignments-shift-card-v53 .assignments-day {
    margin: 0 2px !important;
    font-size: 24px !important;
    line-height: 1 !important;
    letter-spacing: -0.04em !important;
  }

  .assignments-title-row-v53 {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    padding-bottom: 10px !important;
  }

  .assignments-title-row-v53 .assignments-shift-title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .assignments-title-row-v53 .assignments-status-badge {
    flex: 0 0 auto !important;
    min-height: 30px !important;
    padding: 0 11px !important;
    font-size: 12px !important;
  }

  .assignments-role-line {
    margin-top: 10px !important;
    font-size: 13px !important;
  }

  .assignments-time-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
    margin-top: 12px !important;
  }

  .assignments-time-box {
    min-height: 62px !important;
    padding: 10px 11px !important;
    border-radius: 14px !important;
  }

  .assignments-time-box span,
  .assignments-time-box label {
    font-size: 12px !important;
  }

  .assignments-time-box strong,
  .assignments-time-box .assignments-late-input {
    font-size: 15px !important;
    line-height: 1.2 !important;
  }

  .assignments-time-box .assignments-late-input::placeholder {
    font-size: 14px !important;
  }

  .assignments-submit-panel {
    margin-top: 12px !important;
    gap: 10px !important;
  }

  .assignments-auto-summary {
    grid-template-columns: 22px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 11px 12px !important;
    border-radius: 14px !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  .assignments-shift-card-v53 .assignments-submit-btn {
    min-height: 46px !important;
    border-radius: 14px !important;
    font-size: 16px !important;
  }

  .assignments-shift-card-v53 .assignments-state-bar {
    min-height: 44px !important;
    margin-top: 12px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
  }
}

@media (max-width: 360px) {
  .assignments-time-grid {
    grid-template-columns: 1fr !important;
  }

  .assignments-title-row-v53 .assignments-shift-title {
    font-size: 18px !important;
  }
}


/* v55: attendance page card layout only */
.attendance-card-clean {
  padding: 22px !important;
  border-radius: 24px !important;
}

.attendance-title-clean {
  margin-bottom: 18px !important;
}

.attendance-title-clean h2 {
  font-size: 28px !important;
  letter-spacing: -0.04em !important;
}

.attendance-title-clean .card-desc {
  font-size: 15px !important;
  color: #52627a !important;
}

.attendance-summary-badge {
  min-height: 32px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #fde68a;
  border-radius: 999px;
  background: #fffbeb;
  color: #d97706;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.attendance-shift-list {
  gap: 16px !important;
}

.attendance-shift-card {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid #e5e7eb;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.attendance-date-line {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eef0f3;
}

.attendance-date-line span {
  color: var(--red);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}

.attendance-date-line strong {
  color: #111827;
  font-size: 26px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.04em;
}

.attendance-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.attendance-shift-title {
  margin: 0;
  color: #111827;
  font-size: 21px;
  line-height: 1.2;
  font-weight: 950;
  letter-spacing: -0.035em;
}

.attendance-status-badge {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.attendance-status-badge.pending {
  border: 1px solid #fde68a;
  background: #fffbeb;
  color: #d97706;
}

.attendance-status-badge.approved {
  border: 1px solid #bbf7d0;
  background: #ecfdf5;
  color: #16a34a;
}

.attendance-status-badge.rejected {
  border: 1px solid #fecdd3;
  background: #fff1f3;
  color: var(--red);
}

.attendance-role-line {
  color: #475467;
  font-size: 15px;
  font-weight: 850;
}

.attendance-time-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.attendance-info-box {
  min-height: 70px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #f8fafc;
}

.attendance-info-box span {
  color: #667085;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.2;
}

.attendance-info-box strong {
  color: #111827;
  font-size: 17px;
  font-weight: 950;
  line-height: 1.2;
  white-space: nowrap;
}

.attendance-info-box.hours {
  background: #fff;
}

.attendance-info-box.hours strong {
  color: #111827;
}

.attendance-note {
  margin-top: 16px;
  padding: 13px 14px;
  border: 1px solid #fde68a;
  border-radius: 16px;
  background: #fffbeb;
  color: #92400e;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.55;
}

@media (max-width: 430px) {
  .attendance-card-clean {
    padding: 16px !important;
    border-radius: 22px !important;
  }

  .attendance-title-clean {
    margin-bottom: 16px !important;
  }

  .attendance-title-clean h2 {
    font-size: 24px !important;
  }

  .attendance-title-clean .card-desc {
    font-size: 13px !important;
  }

  .attendance-summary-badge {
    margin-top: 10px;
    min-height: 30px;
    padding: 0 11px;
    font-size: 12px;
  }

  .attendance-shift-card {
    gap: 11px;
    padding: 14px;
    border-radius: 20px;
  }

  .attendance-date-line {
    gap: 6px;
    padding-bottom: 10px;
  }

  .attendance-date-line span {
    font-size: 13px;
  }

  .attendance-date-line strong {
    font-size: 24px;
  }

  .attendance-title-row {
    gap: 8px;
  }

  .attendance-shift-title {
    min-width: 0;
    flex: 1 1 auto;
    font-size: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .attendance-status-badge {
    min-height: 30px;
    padding: 0 11px;
    font-size: 12px;
  }

  .attendance-role-line {
    font-size: 13px;
  }

  .attendance-time-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .attendance-info-box {
    min-height: 60px;
    padding: 10px 11px;
    border-radius: 14px;
  }

  .attendance-info-box span {
    font-size: 12px;
  }

  .attendance-info-box strong {
    font-size: 15px;
  }

  .attendance-info-box.hours {
    grid-column: 1 / -1;
  }

  .attendance-note {
    margin-top: 14px;
    font-size: 12px;
  }
}

@media (max-width: 360px) {
  .attendance-time-grid {
    grid-template-columns: 1fr;
  }

  .attendance-info-box.hours {
    grid-column: auto;
  }

  .attendance-shift-title {
    font-size: 18px;
  }
}


/* v56: logic consistency fixes only */
.records-status-badge.assigned {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #2563eb;
}

.records-state-bar.assigned {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #2563eb;
}

.signup-shift-list {
  padding-bottom: 88px;
}

@media (max-width: 430px) {
  .signup-shift-list {
    padding-bottom: 96px;
  }
}


/* v57: show latest acceptable arrival time on signup/records time line only */
@media (max-width: 430px) {
  .signup-shift-card-v39 .shift-time,
  .records-time {
    font-size: 13px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
  }
}


/* v58: force visible latest arrival text for signup/records */
.shift-time-late,
.records-time-late {
  color: #111827 !important;
  font-weight: 800 !important;
}

@media (max-width: 430px) {
  .signup-shift-card-v39 .shift-time-late {
    font-size: 13px !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
    letter-spacing: -0.02em !important;
  }

  .records-time-late {
    font-size: 13px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
  }
}

@media (max-width: 360px) {
  .signup-shift-card-v39 .shift-time-late {
    font-size: 12px !important;
  }
}


/* v59: records page final signup result states only */
.records-status-badge.standby {
  border-color: #ddd6fe;
  background: #f5f3ff;
  color: #7c3aed;
}

.records-state-bar.standby {
  border-color: #ddd6fe;
  background: #f5f3ff;
  color: #7c3aed;
}

.records-status-badge.not-selected {
  border-color: #e5e7eb;
  background: #f3f4f6;
  color: #6b7280;
}

.records-state-bar.not-selected {
  border-color: #e5e7eb;
  background: #f8fafc;
  color: #475467;
}

.records-note {
  color: #92400e;
}


/* v60: auth tabs use underline active style to match staff tabs */
.auth-tabs {
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
  border-radius: 18px !important;
}

.auth-tabs .tab {
  position: relative !important;
  min-height: 58px !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #506078 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}

.auth-tabs .tab.active {
  background: transparent !important;
  color: var(--red) !important;
  box-shadow: none !important;
}

.auth-tabs .tab.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 34px;
  height: 3px;
  border-radius: 999px;
  background: var(--red);
  transform: translateX(-50%);
}

@media (max-width: 430px) {
  .auth-tabs .tab {
    min-height: 52px !important;
    font-size: 14px !important;
  }
}