/* ═══════════════════════════════════════════════════════
   TERMINPOOL — Global Stylesheet
   Accent: #74B815  |  Base: gray  |  Font: Open Sans | Radius: 0
═══════════════════════════════════════════════════════ */

:root {
  --accent:       #74B815;
  --accent-dark:  #5d9310;
  --accent-light: #eef6d6;
  --accent-mid:   #c8e88a;
  --gray-50:      #f8f9fa;
  --gray-100:     #f1f3f5;
  --gray-200:     #e9ecef;
  --gray-300:     #dee2e6;
  --gray-400:     #ced4da;
  --gray-500:     #adb5bd;
  --gray-600:     #868e96;
  --gray-700:     #495057;
  --gray-800:     #343a40;
  --gray-900:     #212529;
  --shadow-sm:    0 1px 4px rgba(0,0,0,.06);
  --shadow-md:    0 4px 16px rgba(0,0,0,.09);
  --content-width: 1320px;
}

*, *::before, *::after { box-sizing: border-box; border-radius: 0 !important; }

body {
  background: #f0f2f5;
  font-family: 'Open Sans', system-ui, sans-serif;
  font-size: .875rem;
  color: var(--gray-900);
  margin: 0;
}

/* ══ TOP NAVBAR ══ */
.top-navbar {
  background: #fff !important;
  border-bottom: 3px solid var(--accent) !important;
  height: 58px !important;
  display: flex !important;
  align-items: stretch !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* inner wrapper keeps navbar content constrained */
.navbar-inner {
  width: 100% !important;
  max-width: var(--content-width) !important;
  margin: 0 auto !important;
  padding: 0 1.5rem !important;
  display: flex !important;
  align-items: stretch !important;
  flex: 1 !important;
}

/* ══ OVERRIDE TABLER CONTAINER ══ */
.page-body .inner {
  max-width: var(--content-width) !important;
  margin: 0 auto !important;
  padding: 0 1.5rem !important;
  width: 100% !important;
}

.navbar-brand {
  display: flex; align-items: center;
  padding: 0 1.25rem 0 0;
  margin-right: .5rem;
  border-right: 1px solid var(--gray-200);
  flex-shrink: 0; text-decoration: none;
}
.navbar-brand img { height: 28px; display: block; }

.nav-main {
  display: flex; align-items: stretch;
  list-style: none; margin: 0; padding: 0; flex: 1;
}
.nav-main > .ni { position: relative; display: flex; align-items: stretch; }
.nav-main > .ni > a {
  display: flex; align-items: center; gap: .35rem;
  padding: 0 1rem;
  font-size: .815rem; font-weight: 600; color: var(--gray-700);
  text-decoration: none;
  border-bottom: 3px solid transparent; margin-bottom: -3px;
  white-space: nowrap; transition: color .12s, border-color .12s;
}
.nav-main > .ni > a .ti { font-size: .95rem; }
.nav-main > .ni:hover > a,
.nav-main > .ni > a.active { color: var(--accent); border-bottom-color: var(--accent); }

/* Right side */
.navbar-right {
  display: flex; align-items: stretch;
  margin-left: auto;
  border-left: 1px solid var(--gray-200);
}
.nb-cart {
  display: flex; align-items: center; gap: .5rem;
  padding: 0 1.1rem;
  border-right: 1px solid var(--gray-200);
  text-decoration: none; color: var(--gray-700);
  font-size: .815rem; font-weight: 600;
  transition: background .12s, color .12s;
  position: relative;
}
.nb-cart:hover { background: var(--gray-50); color: var(--accent); }
.nb-cart .ti { font-size: 1.1rem; }
.cart-count {
  background: var(--accent); color: #fff;
  font-size: .58rem; font-weight: 700;
  padding: .1em .35em; line-height: 1.4;
  position: absolute; top: 11px; right: 6px;
  min-width: 15px; text-align: center;
  border-radius: 99px !important;
}

.nb-user {
  display: flex; align-items: center; gap: .6rem;
  padding: 0 1rem; cursor: default;
  border-right: 1px solid var(--gray-200);
}
.nb-avatar {
  width: 28px; height: 28px;
  background: var(--accent); color: #fff;
  font-size: .68rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.nb-uname { font-size: .78rem; font-weight: 700; color: var(--gray-900); line-height: 1.2; }
.nb-uid   { font-size: .66rem; color: var(--gray-500); }

.nb-logout {
  display: flex; align-items: center; gap: .4rem;
  padding: 0 1rem; font-size: .8rem; font-weight: 600;
  color: var(--gray-600); text-decoration: none;
  transition: color .12s, background .12s;
}
.nb-logout:hover { color: #c92a2a; background: #fff5f5; }

.nb-login-btn, .nb-register-btn {
  display: flex; align-items: center; gap: .4rem;
  padding: 0 1rem; font-size: .8rem; font-weight: 600;
  text-decoration: none; transition: background .12s, color .12s;
  border-right: 1px solid var(--gray-200);
}
.nb-login-btn { color: var(--gray-700); }
.nb-login-btn:hover { background: var(--gray-50); color: var(--accent); }
.nb-register-btn { color: #fff; background: var(--accent); }
.nb-register-btn:hover { background: var(--accent-dark); }

/* ══ PAGE WRAPPER ══ */
.page-body { padding: 1.5rem 0 !important; width: 100% !important; }
.page-body .inner {
  max-width: var(--content-width) !important;
  margin: 0 auto !important;
  padding: 0 1.5rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ══ BUTTONS ══ */
.btn-ui {
  display: inline-flex; align-items: center; gap: .4rem;
  background: #fff; color: var(--gray-800);
  border: 1px solid var(--gray-400);
  padding: .42rem .9rem; font-size: .8rem; font-weight: 600;
  cursor: pointer; transition: all .12s; text-decoration: none;
  font-family: 'Open Sans', sans-serif;
  white-space: nowrap;
}
.btn-ui:hover { background: var(--gray-50); border-color: var(--gray-500); color: var(--gray-900); }
.btn-ui.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-ui.primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn-ui.danger { background: #fff; color: #c92a2a; border-color: #ffc9c9; }
.btn-ui.danger:hover { background: #fff5f5; border-color: #c92a2a; }
.btn-ui.ghost { background: transparent; border-color: transparent; color: var(--gray-600); }
.btn-ui.ghost:hover { background: var(--gray-100); color: var(--gray-900); }
.btn-ui:disabled { opacity: .5; cursor: not-allowed; }
.btn-ui .ti { font-size: .9rem; }

/* ══ CARD ══ */
.card {
  background: #fff;
  border: 1px solid var(--gray-300);
  box-shadow: var(--shadow-sm);
}
.card-header {
  padding: .85rem 1.25rem;
  display: flex; align-items: center; gap: .75rem;
  border-bottom: 1px solid var(--gray-200); flex-wrap: wrap;
}
.card-title {
  font-size: .9rem; font-weight: 700; color: var(--gray-900); margin: 0;
  display: flex; align-items: center; gap: .4rem;
}
.card-title .ti { color: var(--accent); font-size: 1rem; }
.card-badge {
  background: var(--accent-light); color: var(--accent-dark);
  font-size: .69rem; font-weight: 700; padding: .15rem .5rem;
}
.card-body { padding: 1.25rem; }

/* ══ SEARCH BOX ══ */
.search-box {
  display: flex; align-items: center; gap: .4rem;
  border: 1px solid var(--gray-400); background: var(--gray-50);
  padding: .36rem .75rem; min-width: 240px;
  transition: border-color .12s;
}
.search-box:focus-within { border-color: var(--accent); }
.search-box .ti { font-size: .9rem; color: var(--gray-500); flex-shrink: 0; }
.search-box input {
  border: none; background: transparent;
  font-size: .8rem; color: var(--gray-900); outline: none; width: 100%;
  font-family: 'Open Sans', sans-serif;
}

/* ══ FILTER CHIPS ══ */
.filter-wrap { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.filter-chip {
  padding: .2rem .55rem; font-size: .72rem; font-weight: 700;
  border: 1px solid var(--gray-300); background: #fff; cursor: pointer;
  color: var(--gray-700); transition: all .1s;
  font-family: 'Open Sans', sans-serif;
}
.filter-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
.filter-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ══ DATA TABLE ══ */
.data-table { width: 100%; border-collapse: collapse; font-size: .815rem; }
.data-table thead th {
  padding: .6rem 1rem; text-align: left;
  font-size: .67rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--gray-600); background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200); white-space: nowrap;
  cursor: pointer; user-select: none;
}
.data-table thead th:hover { color: var(--accent); }
.data-table thead th.tc { text-align: center; }
.sort-arrow { font-size: .6rem; opacity: .3; margin-left: .2rem; }
.sort-arrow.on { opacity: 1; color: var(--accent); }

.data-table tbody tr { border-bottom: 1px solid var(--gray-100); transition: background .08s; }
.data-table tbody tr:last-child { border-bottom: none; }
.data-table tbody tr:hover { background: var(--accent-light); }
.data-table td { padding: .72rem 1rem; vertical-align: middle; }
.data-table td.tc { text-align: center; }

/* ══ TABLE CELL COMPONENTS ══ */
.tid {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: .77rem; font-weight: 700; color: var(--gray-800);
  background: var(--gray-100); border: 1px solid var(--gray-300);
  padding: .18rem .45rem;
}
.sms-dot {
  width: 6px; height: 6px; background: var(--accent);
  display: inline-block; flex-shrink: 0;
  border-radius: 50% !important;
  animation: blink 2s infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }

.loc strong { font-weight: 700; color: var(--gray-900); display: block; }
.loc small   { font-size: .71rem; color: var(--gray-500); }

.ct-tag {
  background: var(--gray-100); border: 1px solid var(--gray-300);
  font-size: .7rem; font-weight: 700; color: var(--gray-700);
  padding: .12rem .45rem; display: inline-block;
}
.date-col strong { font-weight: 700; color: var(--gray-900); display: block; }
.date-col small  { font-size: .7rem; color: var(--gray-500); }

.time-badge {
  background: var(--accent-light); color: var(--accent-dark);
  font-size: .75rem; font-weight: 700;
  padding: .18rem .5rem; font-family: monospace;
  border: 1px solid var(--accent-mid); display: inline-block;
}

/* Buy / action buttons inside table */
.btn-buy {
  display: inline-flex; align-items: center; gap: .3rem;
  background: #fff; color: var(--gray-800);
  border: 1px solid var(--gray-400);
  padding: .32rem .7rem; font-size: .77rem; font-weight: 600;
  cursor: pointer; transition: all .12s; white-space: nowrap;
  font-family: 'Open Sans', sans-serif;
}
.btn-buy:hover { background: var(--accent-light); border-color: var(--accent); color: var(--accent-dark); }
.btn-buy.added { background: var(--accent-light); border-color: var(--accent); color: var(--accent-dark); }
.btn-buy.guest { color: var(--gray-600); }
.btn-buy.guest:hover { background: var(--gray-50); border-color: var(--accent); color: var(--accent); }

/* ══ PAGINATION ══ */
.pagination-bar {
  padding: .7rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--gray-200); flex-wrap: wrap; gap: .5rem;
}
.pag-info { font-size: .74rem; color: var(--gray-600); }
.pag-btns { display: flex; gap: .25rem; }
.pg-btn {
  height: 28px; min-width: 28px; padding: 0 .35rem;
  border: 1px solid var(--gray-300); background: #fff;
  font-size: .76rem; color: var(--gray-700);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .1s; font-family: 'Open Sans', sans-serif;
}
.pg-btn:hover { background: var(--accent-light); border-color: var(--accent); color: var(--accent-dark); }
.pg-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.pg-btn:disabled { opacity: .3; cursor: not-allowed; }

/* ══ SKELETON ══ */
.skel {
  background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
  height: 13px; display: inline-block;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* ══ EMPTY / ERROR STATE ══ */
.empty-state { text-align: center; padding: 3.5rem 1rem; color: var(--gray-500); }
.empty-state .ti { font-size: 2.5rem; display: block; margin-bottom: .75rem; color: var(--gray-400); }
.empty-state h3 { font-size: .95rem; font-weight: 700; color: var(--gray-700); margin: 0 0 .3rem; }
.empty-state p  { margin: 0; font-size: .82rem; }

/* ══ STATS ROW ══ */
.stats-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--gray-300);
  border: 1px solid var(--gray-300); margin-bottom: 1.5rem;
}
.stat-card {
  background: #fff; padding: 1rem 1.25rem;
  display: flex; align-items: center; gap: .85rem;
}
.stat-icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; flex-shrink: 0;
}
.si-green { background: var(--accent-light); color: var(--accent-dark); }
.si-blue  { background: #dbe4ff; color: #1971c2; }
.si-amber { background: #fff3bf; color: #e67700; }
.si-slate { background: var(--gray-100); color: var(--gray-700); }
.stat-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--gray-500); font-weight: 700; }
.stat-value { font-size: 1.45rem; font-weight: 700; color: var(--gray-900); line-height: 1.1; margin-top: .1rem; }
.stat-value small { font-size: .7rem; font-weight: 500; color: var(--gray-500); }

/* ══ STATUS BADGES ══ */
.badge {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: .15rem .45rem;
}
.badge-upcoming { background: #dbe4ff; color: #1971c2; }
.badge-done     { background: var(--accent-light); color: var(--accent-dark); }
.badge-pending  { background: #fff3bf; color: #b45309; }

/* ══ CALENDAR ══ */
.cal-nav-btn {
  width: 28px; height: 28px; border: 1px solid var(--gray-300); background: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--gray-700); transition: all .1s; font-size: .85rem;
}
.cal-nav-btn:hover { background: var(--accent-light); border-color: var(--accent); color: var(--accent-dark); }
.cal-month-label { font-size: .88rem; font-weight: 700; color: var(--gray-900); min-width: 135px; text-align: center; }

.cal-weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--gray-200);
}
.cal-wd {
  padding: .45rem 0; text-align: center;
  font-size: .66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--gray-500);
  border-right: 1px solid var(--gray-100);
}
.cal-wd:last-child { border-right: none; }
.cal-wd.weekend { color: #c92a2a; }

.cal-days { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-day {
  min-height: 86px; padding: .35rem .35rem .4rem;
  border-right: 1px solid var(--gray-100);
  border-bottom: 1px solid var(--gray-100);
  position: relative; transition: background .1s; cursor: pointer;
}
.cal-day:hover { background: var(--accent-light); }
.cal-day.other-month { background: #fafbfc; }
.cal-day.other-month .cal-day-num { color: var(--gray-400); }
.cal-day.today { background: #fffde7; }
.cal-day.today .cal-day-num {
  background: var(--accent); color: #fff;
  width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .75rem;
}
.cal-day.weekend .cal-day-num { color: #c92a2a; }
.cal-day:nth-child(7n) { border-right: none; }
.cal-day-num { font-size: .76rem; font-weight: 600; color: var(--gray-800); margin-bottom: .25rem; display: inline-block; }

.cal-event {
  display: flex; align-items: center; gap: .2rem;
  border-left: 3px solid;
  padding: .15rem .3rem; margin-bottom: .18rem;
  font-size: .65rem; font-weight: 600;
  cursor: pointer; transition: background .1s; line-height: 1.3; overflow: hidden;
}
.cal-event .ev-time { font-weight: 700; flex-shrink: 0; }
.cal-event .ev-city { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-event.status-upcoming { background: #dbe4ff; border-color: #1971c2; color: #1971c2; }
.cal-event.status-upcoming:hover { background: #bac8ff; }
.cal-event.status-done    { background: var(--accent-light); border-color: var(--accent); color: var(--accent-dark); }
.cal-event.status-done:hover { background: var(--accent-mid); }
.cal-event.status-pending { background: #fff3bf; border-color: #e67700; color: #b45309; }

.cal-legend {
  display: flex; gap: 1rem; padding: .65rem 1.25rem;
  border-top: 1px solid var(--gray-200); flex-wrap: wrap;
}
.leg { display: flex; align-items: center; gap: .35rem; font-size: .72rem; color: var(--gray-600); }
.leg-dot { width: 10px; height: 10px; flex-shrink: 0; }
.leg-dot.upcoming { background: #1971c2; }
.leg-dot.done     { background: var(--accent); }
.leg-dot.pending  { background: #e67700; }

/* ══ SIDEBAR ══ */
.sidebar-card { background: #fff; border: 1px solid var(--gray-300); box-shadow: var(--shadow-sm); }
.sidebar-header {
  padding: .8rem 1.1rem; border-bottom: 1px solid var(--gray-200);
  font-size: .85rem; font-weight: 700; color: var(--gray-900);
  display: flex; align-items: center; gap: .4rem;
}
.sidebar-header .ti { color: var(--accent); }

.termin-detail-item { border: 1px solid var(--gray-200); margin-bottom: .5rem; overflow: hidden; }
.tdi-header {
  background: var(--accent-light); padding: .4rem .7rem;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--accent-mid);
}
.tdi-id { font-family: monospace; font-size: .74rem; font-weight: 700; color: var(--accent-dark); display: flex; align-items: center; gap: .25rem; }
.tdi-time { font-size: .74rem; font-weight: 700; color: var(--accent-dark); }
.tdi-body { padding: .5rem .7rem; }
.tdi-city { font-size: .86rem; font-weight: 700; color: var(--gray-900); }
.tdi-plz  { font-size: .71rem; color: var(--gray-500); }

.ul-item {
  display: flex; align-items: center; gap: .65rem;
  padding: .65rem 1.1rem; border-bottom: 1px solid var(--gray-100);
  cursor: pointer; transition: background .1s;
}
.ul-item:last-child { border-bottom: none; }
.ul-item:hover { background: var(--accent-light); }
.ul-date-block {
  flex-shrink: 0; width: 36px; text-align: center;
  background: var(--gray-100); border: 1px solid var(--gray-300); padding: .2rem 0;
}
.ul-day-num { font-size: .92rem; font-weight: 700; color: var(--gray-900); line-height: 1; }
.ul-month   { font-size: .62rem; font-weight: 700; text-transform: uppercase; color: var(--gray-500); letter-spacing: .04em; }
.ul-info { flex: 1; min-width: 0; }
.ul-city { font-size: .82rem; font-weight: 700; color: var(--gray-900); }
.ul-meta { font-size: .7rem; color: var(--gray-500); margin-top: .1rem; }
.ul-time { font-size: .75rem; font-weight: 700; color: var(--accent-dark); background: var(--accent-light); border: 1px solid var(--accent-mid); padding: .12rem .4rem; flex-shrink: 0; font-family: monospace; }

/* ══ CART ITEMS ══ */
.cart-item {
  display: flex; align-items: center; gap: 1rem;
  padding: .85rem 1.25rem; border-bottom: 1px solid var(--gray-100);
  transition: background .1s;
}
.cart-item:last-child { border-bottom: none; }
.cart-item:hover { background: var(--gray-50); }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-title { font-weight: 700; font-size: .875rem; color: var(--gray-900); }
.cart-item-meta  { font-size: .75rem; color: var(--gray-500); margin-top: .15rem; }
.cart-item-actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }

/* ══ CHECKOUT STEPS ══ */
.steps {
  display: flex; align-items: center;
  gap: 0; margin-bottom: 1.5rem;
  border: 1px solid var(--gray-300);
  background: #fff;
}
.step {
  flex: 1; display: flex; align-items: center; gap: .6rem;
  padding: .85rem 1.25rem;
  font-size: .8rem; font-weight: 600; color: var(--gray-500);
  border-right: 1px solid var(--gray-300);
}
.step:last-child { border-right: none; }
.step.active { color: var(--accent-dark); background: var(--accent-light); }
.step.done   { color: var(--gray-600); }
.step-num {
  width: 22px; height: 22px; flex-shrink: 0;
  background: var(--gray-200); color: var(--gray-600);
  font-size: .72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.step.active .step-num { background: var(--accent); color: #fff; }
.step.done   .step-num { background: var(--gray-400); color: #fff; }

/* ══ AUTH MODAL ══ */
.modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.5); z-index: 9000;
  align-items: center; justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: #fff; width: 100%; max-width: 420px;
  border-top: 3px solid var(--accent);
  box-shadow: 0 24px 64px rgba(0,0,0,.22);
}
.modal-tabs { display: flex; border-bottom: 1px solid var(--gray-200); }
.modal-tab {
  flex: 1; padding: .85rem; text-align: center;
  font-size: .85rem; font-weight: 700; cursor: pointer;
  color: var(--gray-600); background: var(--gray-50);
  border: none; transition: all .12s;
  font-family: 'Open Sans', sans-serif;
}
.modal-tab.active { background: #fff; color: var(--accent); border-bottom: 2px solid var(--accent); }
.modal-body { padding: 1.5rem; }
.modal-close {
  position: absolute; top: .75rem; right: .75rem;
  background: none; border: none; font-size: 1.2rem;
  color: var(--gray-500); cursor: pointer; line-height: 1;
}

/* ══ FORM ══ */
.field { margin-bottom: .9rem; }
.field label { display: block; font-size: .77rem; font-weight: 700; color: var(--gray-700); margin-bottom: .28rem; }
.field input, .field select, .field textarea {
  width: 100%; border: 1px solid var(--gray-400);
  padding: .46rem .72rem; font-size: .84rem; color: var(--gray-900);
  background: #fff; outline: none; transition: border-color .12s;
  font-family: 'Open Sans', sans-serif;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(116,184,21,.1);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.field-hint { font-size: .71rem; color: var(--gray-500); margin-top: .22rem; }

/* ══ ALERTS ══ */
.alert {
  padding: .65rem 1rem; font-size: .81rem; font-weight: 500;
  border: 1px solid transparent; margin-bottom: 1rem;
  display: flex; align-items: flex-start; gap: .5rem;
}
.alert-success { background: var(--accent-light); border-color: var(--accent-mid); color: var(--accent-dark); }
.alert-error   { background: #fff5f5; border-color: #ffc9c9; color: #c92a2a; }
.alert-info    { background: #e7f5ff; border-color: #bac8ff; color: #1971c2; }
.alert-warning { background: #fff3bf; border-color: #ffe066; color: #b45309; }

/* ══ AUTH PAGES ══ */
.auth-page { min-height: calc(100vh - 58px); display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
.auth-card { background: #fff; width: 100%; max-width: 440px; border-top: 3px solid var(--accent); box-shadow: var(--shadow-md); }
.auth-card-header { padding: 1.5rem 1.5rem .25rem; }
.auth-card-header h2 { font-size: 1.05rem; font-weight: 700; color: var(--gray-900); margin: 0 0 .2rem; }
.auth-card-header p  { font-size: .79rem; color: var(--gray-600); margin: 0; }
.auth-card-body { padding: 1.25rem 1.5rem 1.5rem; }
.auth-switch { text-align: center; font-size: .79rem; color: var(--gray-600); margin-top: .9rem; }
.auth-switch a { color: var(--accent); font-weight: 700; text-decoration: none; }

/* ══ SECTION DIVIDER ══ */
.section-label {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--gray-500);
  padding: .5rem 0; margin-bottom: .5rem;
  border-bottom: 1px solid var(--gray-200);
}

/* ══ SPIN ══ */
.spin { animation: spin360 .8s linear infinite; display: inline-block; }
@keyframes spin360 { to { transform: rotate(360deg); } }

/* ══ RESPONSIVE ══ */
@media (max-width: 900px) {
  .stats-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .nav-main { display: none; }
  .page-body .inner { padding: 0 .85rem; }
  .field-row { grid-template-columns: 1fr; }
  .card-header { flex-direction: column; align-items: flex-start; }
  .search-box { min-width: unset; width: 100%; }
  .steps { flex-direction: column; }
  .step { width: 100%; border-right: none; border-bottom: 1px solid var(--gray-300); }
}
@media (max-width: 540px) {
  .stats-row { grid-template-columns: 1fr; }
}