:root {
  --bg: #eef1f4;
  --bg-accent: #d7e4ea;
  --surface: #f7f8fa;
  --surface-2: #eef1f4;
  --text: #10141a;
  --muted: #5b6774;
  --border: #c9d2da;
  --primary: #0f766e;
  --primary-2: #115e59;
  --primary-text: #f4fffd;
  --ok: #0f766e;
  --ok-bg: #d1fae5;
  --err: #9f1239;
  --err-bg: #ffe4e6;
  --shadow: 0 12px 40px rgba(16, 20, 26, .08);
  --radius: 10px;
  --focus: 0 0 0 2px color-mix(in srgb, var(--primary) 35%, transparent);
  --glow: 0 0 24px color-mix(in srgb, var(--primary) 22%, transparent);
  color-scheme: light;
}

html[data-theme="dark"] {
  --bg: #07090d;
  --bg-accent: #102226;
  --surface: #10141b;
  --surface-2: #161c25;
  --text: #e8eef4;
  --muted: #8b97a6;
  --border: #24303c;
  --primary: #2dd4bf;
  --primary-2: #14b8a6;
  --primary-text: #04201c;
  --ok: #5eead4;
  --ok-bg: rgba(15, 118, 110, .28);
  --err: #fb7185;
  --err-bg: rgba(159, 18, 57, .28);
  --shadow: 0 18px 50px rgba(0, 0, 0, .45);
  --focus: 0 0 0 2px color-mix(in srgb, var(--primary) 45%, transparent);
  --glow: 0 0 28px color-mix(in srgb, var(--primary) 18%, transparent);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { touch-action: manipulation; }
html, body { min-height: 100%; }
body {
  margin: 0;
  font-family: "Segoe UI", system-ui, sans-serif;
  background:
    radial-gradient(900px 420px at 110% -10%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 58%),
    radial-gradient(800px 380px at -10% 110%, var(--bg-accent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 92%, #000), var(--bg));
  color: var(--text);
  line-height: 1.55;
  letter-spacing: .01em;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .22;
  background-image:
    linear-gradient(color-mix(in srgb, var(--border) 70%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--border) 70%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 70% -10%, #000 12%, transparent 62%);
}
.app-shell, .admin-app, .auth-screen { position: relative; z-index: 1; }
a, button, label, summary, .app-nav-item, .tab-btn, .rental-subnav-link, .table-action, .icon-btn {
  touch-action: manipulation;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: none; color: color-mix(in srgb, var(--primary) 80%, var(--text)); }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; accent-color: var(--primary); }
button:disabled { opacity: .65; cursor: wait; }
:focus-visible { outline: none; box-shadow: var(--focus); }

.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: .85rem;
  padding: .7rem 1.2rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.public-topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding: .65rem 1.4rem;
}
.public-topbar .brand { justify-self: start; }
.public-topbar .top-nav { justify-self: center; flex: none; justify-content: center; }
.public-topbar .topbar-actions { justify-self: end; margin-left: 0; }
.brand { font-weight: 650; color: var(--text); text-decoration: none; min-width: 0; letter-spacing: .02em; }
.brand:hover { text-decoration: none; }
.brand span, .user-chip span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px;
}
.top-nav { display: flex; align-items: center; gap: .25rem; flex: 1; flex-wrap: wrap; }
.nav-link {
  color: var(--muted); text-decoration: none; font-weight: 550;
  padding: .45rem .8rem; border-radius: 8px;
}
.nav-link:hover, .nav-link.active {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--text);
  text-decoration: none;
}
.topbar-actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.user-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 40px; padding: .15rem .7rem .15rem .2rem;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text); cursor: pointer; font-weight: 600;
}
.user-chip .profile-pic { width: 30px; height: 30px; border-width: 0; border-radius: 6px; }
.login-btn { min-height: 40px; padding-inline: 1.05rem; }
.icon-btn, .btn, .btn-secondary, .ghost-btn {
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: 8px; cursor: pointer;
}
.icon-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.icon-btn svg { width: 16px; height: 16px; fill: currentColor; display: block; }
.btn, .btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 42px; padding: .65rem 1rem; font-weight: 600; text-decoration: none;
  letter-spacing: .02em;
}
.btn { background: var(--primary); color: var(--primary-text); border: 0; box-shadow: var(--glow); }
.btn:hover, .btn-secondary:hover { text-decoration: none; }
.btn-secondary { background: transparent; }
.ghost-btn {
  border: 0; background: transparent; min-height: 34px; padding: 0 .65rem; font-weight: 600; color: var(--muted);
}
.theme-icon {
  width: 16px; height: 16px; display: block; position: relative;
}
.theme-icon::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  background: currentColor;
  box-shadow:
    0 -7px 0 -4px currentColor,
    0 7px 0 -4px currentColor,
    -7px 0 0 -4px currentColor,
    7px 0 0 -4px currentColor;
}
html[data-theme="light"] .theme-icon::before {
  inset: 2px 1px 1px 4px;
  background: transparent;
  border: 1.6px solid currentColor;
  box-shadow: inset -5px -2px 0 -1px currentColor;
}
.menu-icon {
  width: 16px; height: 1.5px; display: block; position: relative;
  background: currentColor; border-radius: 1px;
}
.menu-icon::before, .menu-icon::after {
  content: ""; position: absolute; left: 0; width: 16px; height: 1.5px;
  background: currentColor; border-radius: 1px;
}
.menu-icon::before { top: -5px; }
.menu-icon::after { top: 5px; }
.close-icon {
  width: 14px; height: 14px; display: block; position: relative;
}
.close-icon::before, .close-icon::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 14px; height: 1.5px; background: currentColor; border-radius: 1px;
}
.close-icon::before { transform: translate(-50%, -50%) rotate(45deg); }
.close-icon::after { transform: translate(-50%, -50%) rotate(-45deg); }
.page { width: min(1180px, calc(100% - 1.6rem)); margin: 1.1rem auto 2rem; }
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.form { padding: 1.3rem; display: grid; gap: 1rem; }
.form h1, .form h2, .page-head h1 { margin: 3px; line-height: 1.15; letter-spacing: -.02em; }
.form p, .page-head p { margin: 3px; }
.auth-card { width: min(520px, 100%); max-width: 520px; margin-inline: auto; }
.auth-wide { width: min(640px, 100%); max-width: 640px; }
.page-auth {
  flex: 1;
  width: 100%;
  max-width: none;
  min-height: calc(100dvh - 76px);
  display: grid;
  place-items: center;
  margin: 0;
  padding: 1.25rem 1.2rem 2rem;
}
.grid { display: grid; gap: 1rem; }
.auth-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field { display: grid; gap: .4rem; }
.field-span { grid-column: 1 / -1; }
.field label, .field-label { font-size: .82rem; color: var(--muted); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.field input, .field textarea, .field select {
  width: 100%; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); padding: .8rem .95rem;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--primary); box-shadow: var(--focus); outline: none; }
.password-wrap { display: flex; align-items: center; gap: .35rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); padding-right: .25rem; }
.password-wrap input { border: 0; background: transparent; box-shadow: none !important; }
.input-prefix-wrap {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  overflow: hidden;
}
.input-prefix-wrap:focus-within {
  border-color: var(--primary);
  box-shadow: var(--focus);
}
.input-prefix {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.6rem;
  padding: 0 .75rem;
  border-right: 1px solid var(--border);
  color: var(--muted);
  font-weight: 650;
  background: color-mix(in srgb, var(--border) 35%, var(--surface-2));
}
.field .input-prefix-wrap input {
  border: 0;
  background: transparent;
  box-shadow: none !important;
  border-radius: 0;
}
.remember-row, .hint-text, .muted, .form-footer, .footer-note { color: var(--muted); }
.remember-row { display: flex; align-items: center; gap: .5rem; font-size: .92rem; }
.hint-text { margin: 3px; font-size: .85rem; }
.form-footer { margin: 3px; }
.alert, .msg {
  padding: .8rem 1rem; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text);
}
.alert-success, .msg.ok { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.alert-error, .msg.err { background: var(--err-bg); color: var(--err); border-color: transparent; }
.eyebrow {
  color: var(--primary); font-size: .72rem; font-weight: 650;
  letter-spacing: .16em; text-transform: uppercase; margin: 3px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}
.lede { font-size: 1.05rem; color: var(--muted); max-width: 42rem; }
.hero-panel { display: grid; gap: 1.2rem; }
.hero-copy { padding: .4rem .2rem 0; }
.hero-copy h1 { margin: 3px; font-size: clamp(2.1rem, 5vw, 3.8rem); line-height: 1.02; letter-spacing: -.03em; font-weight: 650; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1rem; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.feature-card { padding: 1.15rem; }
.feature-card h2 { margin: 0 0 .4rem; font-size: 1.02rem; font-weight: 600; letter-spacing: -.01em; }
.feature-card p { margin: 0; color: var(--muted); }
.footer-note { margin: 1.2rem 0 0; text-align: center; }
.profile-pic { width: 70px; height: 70px; border-radius: 8px; object-fit: cover; border: 1px solid var(--border); }
.brand .profile-pic { width: 34px; height: 34px; border-width: 1px; }
.dropdown { position: relative; }
.dropdown-menu {
  position: absolute; right: 0; top: calc(100% + .5rem); min-width: 220px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow); padding: .4rem; display: none; z-index: 20;
}
.dropdown.open .dropdown-menu { display: grid; }
.dropdown-menu a, .dropdown-menu button {
  padding: .7rem .8rem; border-radius: 7px; background: transparent; border: 0;
  text-align: left; color: var(--text); width: 100%; cursor: pointer; font-weight: 550;
}
.dropdown-menu a:hover, .dropdown-menu button:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); text-decoration: none; }
.sidebar-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 1rem; width: min(1280px, calc(100% - 1.6rem)); }
.sidebar-layout.is-collapsed { grid-template-columns: 84px minmax(0, 1fr); }
.sidebar {
  padding: 1rem; position: sticky; top: 82px; height: calc(100vh - 108px);
  display: flex; flex-direction: column; gap: 1rem;
}
.sidebar.collapsed .sidebar-label, .sidebar.collapsed .sidebar-footer, .sidebar.collapsed .nav-link { font-size: 0; padding: .7rem; }
.nav-stack { display: grid; gap: .35rem; }
.nav-stack .nav-link { display: block; }
.sidebar-footer { margin-top: auto; }
.company-block { text-align: center; }
.company-block .profile-pic { margin: 0 auto; }
.avatar-row { display: flex; align-items: center; gap: .7rem; }
.photo-wrap { position: relative; display: inline-block; line-height: 0; }
.photo-wrap-lg { width: 140px; height: 140px; }
.photo-wrap-lg > .profile-pic,
.photo-wrap-lg .profile-pic { width: 140px !important; height: 140px !important; border-radius: 10px; }
.field label.float-upload,
.float-upload {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--primary);
  color: var(--primary-text);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 0;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  line-height: 0;
  box-shadow: var(--glow);
  z-index: 2;
}
.field label.float-upload span,
.float-upload span { display: none; }
.field label.float-upload::before,
.field label.float-upload::after,
.float-upload::before,
.float-upload::after {
  content: "";
  position: absolute;
  background: var(--primary-text);
  border-radius: 1px;
}
.field label.float-upload::before,
.float-upload::before { width: 12px; height: 2px; }
.field label.float-upload::after,
.float-upload::after { width: 2px; height: 12px; }
html[data-theme="dark"] .float-upload { border-color: transparent; }
.photo-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.table-thumb, .data-table .table-thumb, .data-table .profile-pic {
  width: 40px; height: 40px; border-radius: 8px; object-fit: cover; border: 1px solid var(--border); display: block;
}
.page-head, .dashboard-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.page-head h1, .dashboard-head h1 { margin: .15rem 0; font-size: clamp(1.55rem, 4vw, 2.2rem); letter-spacing: -.025em; font-weight: 650; }
.stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.stat { padding: 1.15rem; display: grid; gap: .45rem; }
.stat span { color: var(--muted); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; font-family: "IBM Plex Mono", ui-monospace, monospace; }
.stat strong { font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1; letter-spacing: -.04em; font-weight: 650; }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.list { display: grid; }
.list-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--border); }
.list-row:last-child { border-bottom: 0; }
.list-row > div { display: grid; }
.list-row small, .list-row time { color: var(--muted); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .78rem; }
.profile-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 1rem; }
.profile-grid > .card:last-child { grid-column: 1 / -1; }
.log-list { display: grid; gap: .75rem; }
.log-item { padding: .85rem 0; border-bottom: 1px solid var(--border); }
.log-item:last-child { border-bottom: 0; }
.log-item p { margin: .4rem 0 0; overflow-wrap: anywhere; }
.log-item-head { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.badge {
  display: inline-flex; align-items: center; padding: .18rem .5rem; border-radius: 6px;
  background: color-mix(in srgb, var(--primary) 12%, transparent); font-size: .72rem; font-weight: 650;
  letter-spacing: .06em; text-transform: uppercase; font-family: "IBM Plex Mono", ui-monospace, monospace;
}
.empty-state { padding: 1rem 0; color: var(--muted); }
.phone-wrap { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: .6rem; }
.phone-wrap select { padding-inline: .65rem; font-weight: 650; letter-spacing: .02em; }
.sidebar-backdrop {
  position: fixed; inset: 0; background: rgba(4, 6, 10, .62); z-index: 40; border: 0;
}
.toast-host { position: fixed; right: 1rem; bottom: 1rem; z-index: 1000; display: grid; gap: .6rem; width: min(380px, calc(100vw - 2rem)); }
.toast {
  padding: .85rem 1rem; border: 1px solid var(--border); border-left: 3px solid var(--primary);
  border-radius: 8px; background: var(--surface); color: var(--text); box-shadow: var(--shadow);
  transform: translateY(12px); opacity: 0; transition: .22s ease;
}
.toast.err { border-left-color: #e11d48; }
.toast.show { transform: translateY(0); opacity: 1; }
.spinner { width: 16px; height: 16px; border: 2px solid color-mix(in srgb, var(--primary-text) 35%, transparent); border-top-color: currentColor; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 960px) {
  .feature-grid, .auth-grid, .sidebar-layout, .stats-grid, .profile-grid { grid-template-columns: 1fr; }
  .profile-grid > .card:last-child { grid-column: auto; }
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 60;
    width: min(300px, 86vw); height: 100vh; border-radius: 0;
    transform: translateX(-110%); transition: transform .2s ease;
  }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar-layout, .sidebar-layout.is-collapsed { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .topbar, .public-topbar { padding-inline: .7rem; gap: .45rem; }
  .public-topbar { grid-template-columns: minmax(0, auto) 1fr auto; }
  .brand span { max-width: 92px; font-size: .92rem; }
  .user-chip span { max-width: 72px; }
  .nav-link { padding: .4rem .55rem; font-size: .9rem; }
  .login-btn { padding-inline: .85rem; min-height: 38px; }
  .page, .sidebar-layout { width: calc(100% - 1rem); margin-inline: auto; }
  .page-auth { width: 100%; min-height: calc(100dvh - 68px); padding: .75rem .7rem 1.4rem; }
  .page-auth .auth-card,
  .page-auth .auth-card.auth-wide { width: 100%; max-width: 100%; }
  .auth-grid { grid-template-columns: 1fr; }
  .phone-wrap { grid-template-columns: 92px minmax(0, 1fr); }
  .form { padding: 1rem; }
  .hero-copy h1 { font-size: 2rem; }
  .stats-grid { grid-template-columns: 1fr; }
  .list-row { align-items: flex-start; }
}

.pic-fallback {
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--primary) 18%, var(--surface-2));
  color: var(--primary); font-weight: 700; border-radius: 8px;
}
.auth-brand { display: flex; align-items: center; gap: 1rem; }
.auth-brand h1 { margin: 0; }
.auth-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  position: relative;
}
.theme-float { position: absolute; top: 1rem; right: 1rem; z-index: 5; }
.auth-screen .auth-card { margin: 0; width: min(460px, 100%); }

.admin-app {
  min-height: 100vh;
  display: flex;
  background: var(--bg);
}
.app-sidebar {
  width: 248px;
  flex: 0 0 248px;
  height: 100vh;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: .85rem .65rem;
  background: #080a0e;
  color: #c9d2dc;
  border-right: 1px solid rgba(255,255,255,.06);
  z-index: 60;
}
.app-sidebar .profile-pic { width: 32px; height: 32px; border-color: rgba(255,255,255,.12); border-radius: 6px; }
.app-brand, .app-user {
  display: flex; align-items: center; gap: .65rem;
  padding: .45rem .5rem; color: inherit; text-decoration: none; border-radius: 8px;
}
.app-brand:hover { text-decoration: none; background: rgba(255,255,255,.04); }
.app-brand strong, .app-user strong { display: block; font-size: .9rem; line-height: 1.2; font-weight: 600; }
.app-brand small, .app-user small { display: block; color: #7d8896; font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; font-family: "IBM Plex Mono", ui-monospace, monospace; }
.app-nav { display: grid; gap: .2rem; }
.app-nav-item, .app-settings-menu a, .app-settings-menu button {
  display: flex; align-items: center; gap: .65rem;
  width: 100%; padding: .62rem .7rem; border: 0; background: transparent;
  color: #c9d2dc; text-decoration: none; border-radius: 8px; cursor: pointer; font-weight: 550; text-align: left;
}
.app-nav-item:hover, .app-settings-menu a:hover, .app-settings-menu button:hover {
  background: rgba(255,255,255,.05); text-decoration: none; color: #fff;
}
.app-nav-item.is-active, .app-settings-menu a.is-active {
  background: color-mix(in srgb, #2dd4bf 16%, transparent); color: #5eead4;
  box-shadow: inset 2px 0 0 #2dd4bf;
}
.app-ico { width: 20px; height: 20px; display: grid; place-items: center; flex: 0 0 20px; }
.app-ico svg { width: 17px; height: 17px; fill: currentColor; }
.app-sidebar-end { margin-top: auto; display: grid; gap: .5rem; }
.app-settings { position: relative; }
.app-settings-menu {
  position: absolute; left: 0; right: 0; bottom: calc(100% + .4rem);
  background: #10151c; border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px; padding: .35rem; box-shadow: 0 16px 40px rgba(0,0,0,.45);
  display: grid; gap: .1rem;
}
.app-settings-menu[hidden] { display: none !important; }
.app-frame { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-topbar {
  min-height: 62px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: .8rem;
  padding: .65rem 1.2rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 40;
}
.app-topbar-left { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.app-page-title { margin: 0; font-size: 1rem; font-weight: 650; letter-spacing: -.01em; }
.app-clock {
  justify-self: center; text-align: center; font-weight: 500; font-size: .84rem;
  color: var(--muted); white-space: nowrap;
  font-family: "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .03em;
}
.app-topbar .topbar-actions { justify-self: end; }
.app-user {
  width: 100%; border: 0; background: transparent; cursor: pointer; text-align: left;
}
.field-alert { margin-top: .35rem; }
.tabs { display: flex; gap: .35rem; border-bottom: 1px solid var(--border); padding-bottom: .5rem; margin-bottom: .4rem; }
.tab-btn {
  border: 0; background: transparent; color: var(--muted); font-weight: 650;
  padding: .45rem .75rem; border-radius: 7px; cursor: pointer; text-decoration: none;
}
a.tab-btn:hover { text-decoration: none; color: var(--text); }
.tab-btn.is-active { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--text); }
.charge-type-row { display: flex; flex-wrap: wrap; gap: .35rem 1rem; }
.field .charge-type-row label {
  font-size: .92rem;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 550;
}
.field textarea { resize: vertical; min-height: 92px; }
.skip-link,
body > a[href="#main"] { display: none !important; }
.address-block {
  display: grid;
  gap: 1rem;
  padding-top: 1.1rem;
  margin-top: .2rem;
  border-top: 1px solid var(--border);
}
.address-title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 650;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: .4rem;
}
.address-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1rem; }
.hours-block {
  display: grid;
  gap: .15rem;
  padding-top: 1.1rem;
  margin-top: .2rem;
  border-top: 1px solid var(--border);
}
.hours-hint { margin: .25rem 0 .35rem; font-size: .88rem; }
.hours-day {
  display: grid;
  grid-template-columns: minmax(6.5rem, auto) minmax(0, 1fr);
  gap: .85rem 1.1rem;
  align-items: start;
  padding: .95rem 0;
  border-bottom: 1px solid var(--border);
}
.hours-day:last-of-type { border-bottom: 0; padding-bottom: .2rem; }
.hours-day-toggle {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding-top: 1.85rem;
  color: var(--text);
  font-weight: 650;
  cursor: pointer;
  user-select: none;
}
.hours-day-toggle input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--primary);
  flex: 0 0 auto;
  cursor: pointer;
}
.hours-day-name { font-size: .95rem; }
.hours-slots { min-width: 0; }
.hours-slot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: .75rem;
  align-items: end;
}
.hours-time-field label {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 550;
  color: var(--muted);
}
.hours-time {
  position: relative;
  display: flex;
  align-items: center;
  gap: .55rem;
  min-height: 46px;
  padding: 0 .9rem 0 .75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
}
.hours-time:focus-within {
  border-color: var(--primary);
  box-shadow: var(--focus);
}
.hours-time-icon {
  display: inline-flex;
  color: var(--muted);
  flex: 0 0 auto;
}
.hours-time-icon svg { width: 16px; height: 16px; fill: currentColor; display: block; }
.hours-time-display { font-size: .95rem; line-height: 1.2; }
.field.hours-time-field input.hours-time-picker {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none !important;
  cursor: pointer;
  color: transparent;
}
.hours-day.is-off .hours-slots { opacity: .42; }
.hours-day.is-off .hours-time-picker { pointer-events: none; }
.field label { display: inline-flex; align-items: center; gap: .35rem; }
.info-tip {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid var(--muted);
  color: var(--muted);
  font-size: .65rem;
  font-weight: 700;
  display: inline-grid;
  place-items: center;
  line-height: 1;
  cursor: help;
  flex: 0 0 15px;
}
.req { color: #e11d48; }
@media (max-width: 640px) {
  .address-row { grid-template-columns: 1fr; }
  .hours-day { grid-template-columns: 1fr; }
  .hours-day-toggle { padding-top: 0; }
  .hours-slot { grid-template-columns: 1fr; }
}
.app-content { width: min(1120px, calc(100% - 2.5rem)); margin: 0 auto; padding: 1.5rem 0 2.25rem; }
.admin-app.is-collapsed .app-sidebar { width: 76px; flex-basis: 76px; }
.admin-app.is-collapsed .app-label, .admin-app.is-collapsed .app-user small, .admin-app.is-collapsed .app-brand small { display: none; }
.admin-app.is-collapsed .app-brand, .admin-app.is-collapsed .app-user, .admin-app.is-collapsed .app-nav-item { justify-content: center; padding-inline: .55rem; }
.admin-app.is-collapsed .app-settings-menu { left: calc(100% + .5rem); right: auto; bottom: 0; width: 220px; }

.page { width: min(1180px, calc(100% - 2rem)); margin: 1.4rem auto 2.2rem; }
.form { padding: 1.4rem; display: grid; gap: 1.1rem; }
.hero-panel { display: grid; gap: 1.5rem; }
.feature-grid { gap: 1.1rem; }
.profile-grid { gap: 1.15rem; }
.stats-grid { gap: 1.1rem; margin-bottom: 1.15rem; }
.page-head, .dashboard-head { margin-bottom: 1.2rem; gap: 1.1rem; }

@media (max-width: 960px) {
  .admin-app { display: block; }
  .app-sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; transform: translateX(-110%);
    transition: transform .2s ease; width: min(280px, 86vw); flex-basis: auto;
  }
  .app-sidebar.is-open { transform: translateX(0); }
  .admin-app.is-collapsed .app-sidebar { width: min(280px, 86vw); }
  .admin-app.is-collapsed .app-label { display: block; }
  .app-content { width: calc(100% - 1.5rem); padding-top: 1.15rem; }
  .app-clock { font-size: .72rem; }
}

.table-wrap { overflow-x: auto; min-width: 0; width: 100%; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th:last-child,
.data-table td:last-child { width: 1%; white-space: nowrap; }
.table-actions { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.table-action { width: 36px; height: 36px; min-width: 36px; color: var(--text); border-radius: 8px; }
.table-action svg { width: 15px; height: 15px; fill: currentColor; display: block; pointer-events: none; }
.table-action.is-danger { color: #e11d48; }
html[data-theme="dark"] .table-action.is-danger { color: #fb7185; }
.badge.role-superadmin { background: color-mix(in srgb, #2dd4bf 16%, transparent); color: #0f766e; }
.badge.role-admin { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); }
.badge.role-staff { background: color-mix(in srgb, #64748b 16%, transparent); color: #475569; }
html[data-theme="dark"] .badge.role-superadmin { color: #5eead4; }
html[data-theme="dark"] .badge.role-staff { color: #94a3b8; }

.user-dialog {
  width: min(760px, calc(100vw - 1.25rem));
  max-height: calc(100vh - 2rem);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  padding: 1.15rem;
  box-shadow: var(--shadow);
}
.item-dialog {
  width: min(1080px, calc(100vw - 1.25rem));
  padding: 1rem 1.15rem;
}
.item-dialog .grid { gap: .75rem; }
.item-fields,
.item-attr-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem 1rem;
  align-items: start;
}
.item-fields > .field-span,
.item-attr-fields > .hint-text {
  grid-column: 1 / -1;
}
.user-dialog::backdrop { background: rgba(4, 6, 10, .72); }
.dialog-head, .dialog-actions { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.dialog-actions { justify-content: flex-end; padding-top: .35rem; }
.perm-block { display: grid; gap: .65rem; }
.perm-block h3 { margin: 0; font-size: 1rem; }
.perm-table { display: grid; }
.perm-row {
  display: grid;
  grid-template-columns: minmax(8rem, 1.4fr) repeat(3, minmax(4.5rem, auto));
  gap: .65rem;
  align-items: center;
  padding: .7rem 0;
  border-bottom: 1px solid var(--border);
}
.perm-row:last-child { border-bottom: 0; }
.perm-head { font-size: .72rem; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-family: "IBM Plex Mono", ui-monospace, monospace; }
.perm-page { font-weight: 600; }
.perm-check { display: inline-flex; align-items: center; gap: .4rem; font-weight: 550; color: var(--text); }
.perm-check.is-disabled { opacity: .45; }
.denied-card { max-width: 640px; }

.dataTables_wrapper { color: var(--text); width: 100%; min-width: 0; }
table.dataTable { border-collapse: collapse !important; }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate { color: var(--muted); }
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  border-radius: 8px;
  padding: .45rem .7rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 7px !important;
  color: var(--text) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--primary) !important;
  color: var(--primary-text) !important;
  border-color: transparent !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: color-mix(in srgb, var(--primary) 12%, transparent) !important;
  color: var(--text) !important;
  border-color: transparent !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: var(--muted) !important;
  background: transparent !important;
}
table.dataTable thead th,
table.dataTable tbody td {
  color: var(--text);
  border-color: var(--border) !important;
  background: transparent;
}
table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover { background: color-mix(in srgb, var(--primary) 8%, transparent) !important; }
table.dataTable thead th { border-bottom: 1px solid var(--border) !important; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted) !important; }
[hidden] { display: none !important; }

@media (max-width: 720px) {
  .perm-head { display: none; }
  .perm-row { grid-template-columns: 1fr; gap: .45rem; }
  .dialog-head, .dialog-actions { flex-wrap: wrap; }
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter { float: none; text-align: left; }
  .item-fields,
  .item-attr-fields { grid-template-columns: 1fr; }
}

.app-content :is(h1, h2, h3, h4, p, label, small, button, input, select, textarea, .btn, .btn-secondary, .icon-btn, .ghost-btn, .field, .card, .alert, .badge, .hint-text, .muted, .stat, .list-row, .perm-row, .feature-card, .log-item, .nav-link, .user-chip, .login-btn, .hero-actions > *, .page-head > *, .section-heading > *, .dialog-actions > *),
.page :is(h1, h2, h3, h4, p, label, small, button, input, select, textarea, .btn, .btn-secondary, .icon-btn, .ghost-btn, .field, .card, .alert, .badge, .hint-text, .muted, .stat, .list-row, .feature-card, .nav-link, .user-chip, .login-btn),
.user-dialog :is(h1, h2, h3, h4, p, label, small, button, input, select, textarea, .btn, .btn-secondary, .icon-btn, .ghost-btn, .field, .hint-text, .muted, .perm-row),
.auth-screen :is(h1, h2, h3, h4, p, label, small, button, input, select, textarea, .btn, .btn-secondary, .icon-btn, .ghost-btn, .field, .card, .alert, .hint-text, .muted) {
  margin: 3px;
}
.card, .form, .stat, .feature-card, .alert { margin: 3px; }
.page .auth-card,
.page-auth .auth-card,
.auth-screen .auth-card {
  margin-left: auto;
  margin-right: auto;
}
.form, .grid, .hero-panel, .feature-grid, .profile-grid, .stats-grid, .hero-actions, .address-block, .hours-block, .perm-table { gap: max(6px, 1rem); }
.field, .address-row, .phone-wrap, .auth-grid { gap: max(6px, .55rem); }

.rental-subnav {
  display: flex; flex-wrap: wrap; gap: .35rem;
  justify-content: center;
  margin: 0 auto 1rem;
}
.rental-subnav-link {
  padding: .4rem .7rem; border-radius: 8px; border: 1px solid var(--border);
  color: var(--muted); font-weight: 600; font-size: .86rem; background: var(--surface);
}
.rental-subnav-link:hover, .rental-subnav-link.is-active {
  color: var(--text); border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
}
.rental-mode-badge {
  display: flex; align-items: center; gap: .5rem;
  padding: .45rem .6rem; border-radius: 8px;
  background: rgba(255,255,255,.04); color: #c9d2dc; font-size: .78rem;
}
.app-content .rental-mode-badge, .page .rental-mode-badge {
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  color: var(--text); border: 1px solid var(--border);
  justify-content: center;
  text-align: center;
  margin: 0 auto .55rem;
}
.rental-mode-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #2dd4bf; flex: 0 0 8px;
}
.rental-mode-property .rental-mode-dot { background: #60a5fa; }
.rental-mode-item .rental-mode-dot { background: #f59e0b; }
.admin-app.is-collapsed .rental-mode-badge { justify-content: center; padding-inline: .4rem; }
.admin-app.is-collapsed .rental-mode-badge span:last-child { display: none; }
.rental-type-status { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.rental-type-card {
  position: relative; display: grid; gap: .2rem; cursor: pointer;
  padding: .9rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2);
}
.rental-type-card input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.rental-type-card:hover { border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); }
.rental-type-card.is-on { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); box-shadow: inset 2px 0 0 var(--primary); }
.rental-type-card strong { display: block; }
.rental-type-card small { color: var(--muted); }
.accent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: .55rem;
}
.field label.accent-choice,
.accent-choice {
  position: relative;
  display: grid;
  align-items: stretch;
  gap: .3rem;
  padding: .7rem .75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  cursor: pointer;
  color: var(--text);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.accent-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.accent-choice:hover { border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); }
.accent-choice.is-on {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  box-shadow: inset 2px 0 0 var(--primary);
}
.accent-choice strong { display: block; font-size: .9rem; }
.accent-choice small { color: var(--muted); font-size: .72rem; }
.accent-dots { display: flex; align-items: center; gap: .35rem; }
.accent-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.accent-dot-dark { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.settings-card { padding: 1.1rem; display: grid; gap: .75rem; }
.toggle-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .55rem 0; border-bottom: 1px solid var(--border);
}
.toggle-row:last-child { border-bottom: 0; }
.toggle-copy { display: grid; gap: .15rem; min-width: 0; }
.toggle-copy strong { font-size: .95rem; }
.toggle-copy small { color: var(--muted); font-size: .8rem; }
.toggle { display: inline-flex; align-items: center; gap: .5rem; flex: 0 0 auto; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.toggle-ui {
  width: 44px; height: 24px; border-radius: 999px; background: var(--border);
  position: relative; display: inline-block; transition: background .18s ease;
}
.toggle-knob {
  position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--surface); box-shadow: 0 1px 4px rgba(0,0,0,.25); transition: transform .18s ease;
}
.toggle input:checked + .toggle-ui { background: var(--primary); }
.toggle input:checked + .toggle-ui .toggle-knob { transform: translateX(20px); }
.toggle input:focus-visible + .toggle-ui { box-shadow: var(--focus); }
.toggle-state {
  min-width: 1.8rem; font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); font-family: "IBM Plex Mono", ui-monospace, monospace;
}
.toggle input:checked ~ .toggle-state { color: var(--primary); }
.rental-period-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.rental-period-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rental-duration-box, .rental-price-box {
  padding: .55rem .7rem; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface-2); display: grid; gap: .15rem;
}
.submission-dialog {
  width: min(840px, calc(100vw - 1.25rem));
  padding: 1rem 1.1rem;
}
.submission-dialog .grid,
.submission-form { gap: .65rem; }
.submission-dialog :is(.field, label, p, .hint-text, h2) { margin: 0; }
.rental-summary {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem;
}
.rental-summary > div {
  padding: .45rem .65rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-2); display: grid; gap: .1rem;
}
.rental-summary span {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); font-weight: 650;
}
.item-cell { display: flex; align-items: center; gap: .6rem; min-width: 13rem; }
.item-cell strong { display: block; line-height: 1.25; }
.item-cell small { color: var(--muted); font-size: .75rem; }
.submission-table td { vertical-align: middle; }
.submission-page .card.form { padding: 1rem; }
.rental-kv { display: grid; grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr); gap: .35rem .8rem; }
.rental-kv dt { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 650; }
.rental-kv dd { margin: 0; }
.dt-stack { display: grid; gap: .15rem; }
.dt-stack small { color: var(--muted); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .78rem; }
.rental-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.catalog-page { display: grid; gap: 1.2rem; }
.catalog-heading { margin-top: .2rem; }
.catalog-heading h2 { margin: 0; font-size: 1.25rem; letter-spacing: -.02em; }
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.product-card { overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.product-card-media {
  aspect-ratio: 4 / 3;
  background: var(--surface-2);
  overflow: hidden;
}
.product-card-media img,
.product-card-media .catalog-fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.catalog-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--primary) 16%, var(--surface-2));
  color: var(--primary);
  font-size: 2.4rem;
  font-weight: 700;
}
.product-card-body { padding: .9rem 1rem 1rem; display: grid; gap: .3rem; flex: 1; }
.product-card-body h3 { margin: 0; font-size: 1.02rem; letter-spacing: -.015em; line-height: 1.25; }
.product-card-meta, .product-card-copy { margin: 0; color: var(--muted); font-size: .82rem; }
.product-card-copy { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-card-price {
  display: flex; flex-wrap: wrap; gap: .35rem .85rem;
  margin-top: auto; padding-top: .55rem;
  color: var(--primary); font-weight: 700; font-size: 1rem;
}
.product-card-price small { color: var(--muted); font-weight: 600; font-size: .75rem; }
.catalog-empty { padding: 2rem 0; text-align: center; }
@media (max-width: 960px) {
  .settings-grid, .rental-type-status, .rental-detail-grid { grid-template-columns: 1fr; }
  .rental-period-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .rental-period-grid, .rental-period-grid-4, .rental-kv, .rental-summary { grid-template-columns: 1fr; }
  .toggle-row { align-items: flex-start; flex-wrap: wrap; }
  .catalog-grid { grid-template-columns: 1fr; }
}