/* ============================================================
   VETTA · app.css  — пълен дизайн систем
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap');

/* ── RESET & BASE ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --blue:    #116AD2;
  --blue-d:  #0D55A8;
  --blue-l:  #BFDBFE;
  --blue-ll: #EFF6FF;
  --teal:    #1EADBE;
  --teal-d:  #178A99;
  --grad:    linear-gradient(135deg, #116AD2, #1EADBE);
  --green:   #15803D;
  --green-l: #F0FDF4;
  --amber:   #B45309;
  --amber-l: #FEF3C7;
  --red:     #DC2626;
  --red-l:   #FFF5F5;
  --ink:     #0F1117;
  --ink2:    #1C2333;
  --ink3:    #374151;
  --ink4:    #6B7280;
  --ink5:    #9CA3AF;
  --bg:      #F5F7FA;
  --bg2:     #FAFBFC;
  --line:    #E5E7EB;
  --line-l:  #F3F4F6;
  --card:    #FFFFFF;
  --shadow:  0 1px 4px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04);
  --shadow-md: 0 4px 20px rgba(0,0,0,.10);
  --r:       10px;
  --r-lg:    14px;
}
html { font-size: 14px; }
body {
  font-family: 'DM Sans', 'Montserrat', sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  min-height: 100vh;
}
a { color: var(--blue); text-decoration: none; }
img { max-width: 100%; }
button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}
textarea { resize: vertical; }

/* ── AUTH PAGE ───────────────────────────────────────────── */
body.auth-body { background: radial-gradient(circle at top left, #11244a 0, #08101E 45%, #06101f 100%); }
.vx-auth {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}

/* Left panel */
.vx-left {
  background: linear-gradient(160deg, #0B1A35 0%, #0D2347 60%, #0A3060 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.vx-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .35; pointer-events: none; }
.vx-orb-1 { width: 400px; height: 400px; background: #116AD2; top: -80px; left: -80px; }
.vx-orb-2 { width: 300px; height: 300px; background: #1EADBE; bottom: -40px; right: -60px; }
.vx-content { position: relative; z-index: 1; max-width: 470px; }
.vx-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; }
.vx-logo img { height: 32px; width: auto; }
.vx-logo-text { font-size: 20px; font-weight: 900; color: #fff; letter-spacing: 5px; }
.vx-kicker { display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700; color:#C8DCF8; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); padding:8px 12px; border-radius:999px; margin-bottom:16px; backdrop-filter: blur(8px); }
.vx-kicker::before { content:""; width:8px; height:8px; border-radius:50%; background:#7DD3FC; box-shadow:0 0 0 6px rgba(125,211,252,.12); }
.vx-headline { font-size: 36px; font-weight: 800; color: #fff; line-height: 1.15; margin-bottom: 16px; letter-spacing:-.03em; }
.vx-headline em { font-style: normal; background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.vx-sub { color: rgba(255,255,255,.64); font-size: 14px; margin-bottom: 32px; line-height: 1.75; max-width: 430px; }
.vx-pets-showcase { display:grid; grid-template-columns:1.12fr .88fr; gap:16px; margin-bottom:30px; }
.vx-pet-stack { display:grid; gap:16px; }
.vx-pet-card { position:relative; overflow:hidden; display:flex; align-items:center; gap:14px; padding:14px; border-radius:24px; background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.07)); border:1px solid rgba(255,255,255,.12); box-shadow:0 16px 34px rgba(2,6,23,.22); backdrop-filter: blur(12px); }
.vx-pet-card::after { content:""; position:absolute; inset:auto -24px -24px auto; width:88px; height:88px; border-radius:50%; background:rgba(255,255,255,.06); }
.vx-pet-card-main { min-height:100%; align-items:flex-end; }
.vx-pet-art { width:74px; height:74px; border-radius:20px; flex:0 0 74px; display:flex; align-items:center; justify-content:center; font-size:30px; color:#fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 18px rgba(15,23,42,.18); }
.vx-pet-art.pet-icon-shell { background:linear-gradient(135deg, rgba(17,106,210,.95), rgba(30,173,190,.95)); }
.vx-pet-copy { position:relative; z-index:1; display:flex; flex-direction:column; gap:4px; }
.vx-pet-copy strong { font-size:14px; color:#fff; }
.vx-pet-copy span { font-size:11px; color:rgba(255,255,255,.74); line-height:1.55; }
.vx-feats { display: flex; flex-direction: column; gap: 12px; }
.vx-feat { display: flex; align-items: center; gap: 12px; }
.vx-feat-ic { font-size: 15px; width: 38px; height: 38px; background: rgba(255,255,255,.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color:#fff; border:1px solid rgba(255,255,255,.12); }
.vx-feat strong { display: block; font-size: 13px; font-weight: 600; color: #fff; }
.vx-feat span { font-size: 11px; color: rgba(255,255,255,.5); }
.vx-pet-photo-card { align-items:flex-end; }
.vx-pet-photo { width:88px; height:104px; object-fit:cover; border-radius:18px; flex:0 0 88px; box-shadow:0 10px 24px rgba(0,0,0,.18); background:rgba(255,255,255,.08); }
.vx-pet-photo-real { background-size:cover; background-position:center; position:relative; overflow:hidden; }
.vx-pet-photo-real::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,23,42,.02), rgba(15,23,42,.18)); }
.vx-pet-card-main .vx-pet-photo { width:118px; height:144px; flex-basis:118px; }
.vx-pet-card-solid { background:linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04)); }
.vx-mobile-pets { display:none; margin:0 0 20px; }
.vx-mobile-stage { position:relative; min-height:200px; }
.vx-mobile-hero-card { position:relative; min-height:196px; border-radius:28px; overflow:hidden; background-size:cover; background-position:center; box-shadow:0 24px 50px rgba(15,23,42,.18); }
.vx-mobile-hero-card::before { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,18,37,.08) 0%, rgba(7,18,37,.26) 38%, rgba(7,18,37,.78) 100%); }
.vx-mobile-chip { position:absolute; top:14px; left:14px; z-index:2; display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.24); color:#fff; font-size:11px; font-weight:700; backdrop-filter:blur(8px); }
.vx-mobile-overlay { position:absolute; left:16px; right:16px; bottom:16px; z-index:2; color:#fff; }
.vx-mobile-overlay strong { display:block; font-size:22px; line-height:1.1; font-weight:800; margin-bottom:8px; letter-spacing:-.02em; }
.vx-mobile-overlay span { display:block; max-width:76%; font-size:12px; line-height:1.6; color:rgba(255,255,255,.84); }
.vx-mobile-floating { position:absolute; z-index:3; border-radius:22px; box-shadow:0 18px 40px rgba(15,23,42,.16); }
.vx-float-photo { width:82px; height:82px; right:14px; bottom:-12px; background-size:cover; background-position:center; border:4px solid rgba(255,255,255,.92); }
.vx-float-stat { left:14px; bottom:-16px; display:flex; align-items:center; gap:10px; padding:12px 14px; background:rgba(255,255,255,.95); border:1px solid rgba(17,106,210,.08); }
.vx-float-stat i { width:38px; height:38px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#116AD2,#1EADBE); color:#fff; font-size:15px; }
.vx-float-stat strong { display:block; font-size:12px; color:var(--ink); }
.vx-float-stat span { display:block; font-size:11px; color:var(--ink4); }

/* Right panel */
.vx-right {
  background: radial-gradient(circle at top right, rgba(17,106,210,.1), transparent 34%), linear-gradient(180deg, #F8FBFF 0%, #FFFFFF 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 32px;
}
.vx-form-box { width: 100%; max-width: 448px; background:rgba(255,255,255,.9); border:1px solid rgba(17,106,210,.08); border-radius:32px; box-shadow:0 28px 70px rgba(15,23,42,.08); padding:30px; backdrop-filter: blur(12px); position:relative; overflow:hidden; }
.vx-form-box::before { content:""; position:absolute; inset:0 0 auto; height:92px; background:linear-gradient(180deg, rgba(17,106,210,.045), rgba(17,106,210,0)); pointer-events:none; }
.vx-form-logo { position:relative; display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.vx-form-logo img { height: 28px; width: auto; }
.vx-form-logo-t { font-size: 16px; font-weight: 800; letter-spacing: 4px; color: var(--ink); }
.vx-tabs { display:flex; gap:8px; padding:6px; border:none; background:#F2F7FD; border-radius:18px; margin-bottom:22px; position:relative; z-index:1; }
.vx-tab { flex:1; padding:12px 10px; background:transparent; border:none; font-size:13px; font-weight:700; color:var(--ink4); cursor:pointer; border-radius:12px; transition:all .18s ease; }
.vx-tab.active { color:var(--blue); background:#fff; box-shadow:0 8px 18px rgba(17,106,210,.10); }
.vx-panel { display: none; }
.vx-panel.vx-active { display: block; }
.vx-field { margin-bottom: 14px; }
.vx-lbl { display: block; font-size: 11px; font-weight: 600; color: var(--ink3); margin-bottom: 5px; letter-spacing: .3px; }
.vx-inp {
  width:100%; padding:13px 14px; border:1.5px solid #DCE7F5;
  border-radius:16px; font-size:14px; color:var(--ink);
  background:#F8FBFF; transition:border-color .15s, box-shadow .15s, background .15s, transform .15s;
  outline:none;
}
.vx-inp:focus { border-color: var(--blue); background: #fff; box-shadow:0 0 0 4px rgba(17,106,210,.08); transform:translateY(-1px); }
.vx-pw-wrap { position: relative; }
.vx-pw-wrap .vx-inp { padding-right: 40px; }
.vx-eye {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; font-size: 14px; color: var(--ink4);
  padding: 2px 4px; width:32px; height:32px; border-radius:10px;
}
.vx-str { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.vx-str-bar { flex: 1; height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; }
.vx-str-fill { height: 100%; border-radius: 2px; transition: width .3s, background .3s; width: 0; }
.vx-str-lbl { font-size: 10px; font-weight: 600; color: var(--ink4); min-width: 40px; }
.vx-check { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink3); margin-bottom: 16px; cursor: pointer; }
.vx-check input { accent-color: var(--blue); width: 14px; height: 14px; }
.vx-btn { box-shadow:0 18px 30px rgba(17,106,210,.24);
  width: 100%; padding: 14px; background: var(--grad); color: #fff;
  border: none; border-radius: 16px; font-size: 13px; font-weight: 700;
  cursor: pointer; letter-spacing: .3px; transition: opacity .15s, transform .15s, box-shadow .15s; display:flex; align-items:center; justify-content:center; gap:10px;
}
.vx-btn:hover { opacity: .96; transform:translateY(-1px); box-shadow:0 22px 36px rgba(17,106,210,.28); }
.vx-btn:disabled { opacity: .6; cursor: not-allowed; }
.vx-forgot { font-size: 11px; color: var(--blue); font-weight: 500; }
.vx-alert { display: none; padding: 10px 12px; border-radius: var(--r); font-size: 12px; font-weight: 500; margin-bottom: 14px; }
.vx-alert.error { display: block; background: var(--red-l); color: var(--red); border: 1px solid #FECACA; }
.vx-alert.success { display: block; background: var(--green-l); color: var(--green); border: 1px solid #BBF7D0; }
.vx-clinic-cta { display: flex; align-items: center; gap: 12px; padding: 14px; background: linear-gradient(180deg,#F8FBFF,#F3F8FF); border-radius: 18px; font-size: 12px; border:1px solid #E3EEFB; }
.vx-clinic-cta > span { width:42px; height:42px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:#fff; color:var(--blue); box-shadow:0 10px 18px rgba(17,106,210,.12); }
.vx-clinic-cta strong { display: block; font-weight: 600; color: var(--ink); }
.vx-clinic-cta span { color: var(--ink4); font-size: 11px; }
.vx-clinic-cta a { font-size: 11px; font-weight: 700; margin-left: auto; white-space: nowrap; display:inline-flex; align-items:center; gap:6px; }

/* ── DASHBOARD LAYOUT ────────────────────────────────────── */
body.dash-body { background: var(--bg); }

.ds {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px 40px;
}

/* Topbar */
.ds-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
  gap: 12px;
}
.ds-top-l { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ds-top-brand img { height: 26px; width: auto; }
.ds-top-sep { width: 1px; height: 20px; background: var(--line); }
.ds-top-name { font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.ds-top-sub { font-size: 11px; color: var(--ink4); white-space: nowrap; }
.ds-top-r { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ds-av {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--grad); color: #fff;
  font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden;
}
.ds-av img { width: 100%; height: 100%; object-fit: cover; }
.ds-premium { font-size: 11px; font-weight: 700; background: linear-gradient(135deg,#F59E0B,#D97706); color: #fff; padding: 4px 10px; border-radius: 20px; }
.ds-upgrade { font-size: 12px; font-weight: 600; color: var(--blue); border: 1.5px solid var(--blue); border-radius: 20px; padding: 5px 12px; cursor: pointer; background: none; transition: all .15s; white-space: nowrap; }
.ds-upgrade:hover { background: var(--blue); color: #fff; }

/* Stats */
.ds-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
.ds-stat {
  background: var(--card);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  border-left: 4px solid transparent;
  box-shadow: var(--shadow);
}
.ds-stat-blue  { border-left-color: var(--blue); }
.ds-stat-teal  { border-left-color: var(--teal); }
.ds-stat-amber { border-left-color: #F59E0B; }
.ds-stat-green { border-left-color: #22C55E; }
.ds-stat-n { font-size: 26px; font-weight: 800; color: var(--ink); line-height: 1; margin-bottom: 4px; }
.ds-stat-l { font-size: 11px; font-weight: 500; color: var(--ink4); text-transform: uppercase; letter-spacing: .5px; }

/* Tabs */
.ds-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 2px solid var(--line);
  margin-bottom: 18px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ds-tabs::-webkit-scrollbar { display: none; }
.ds-tab {
  padding: 9px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink4);
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
  display: flex;
  align-items: center;
  gap: 5px;
}
.ds-tab.active { color: var(--blue); border-bottom-color: var(--blue); }
.ds-tab:hover:not(.active) { color: var(--ink2); }
.ds-cnt {
  background: var(--blue-l);
  color: var(--blue);
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  min-width: 18px;
  text-align: center;
}

/* Panels */
.ds-panel { display: none; }
.ds-panel.active { display: block; }

/* Cards */
.ds-card {
  background: var(--card);
  border-radius: var(--r-lg);
  padding: 16px;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  margin-bottom: 12px;
}
.ds-card-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--ink4);
  margin-bottom: 12px;
}

/* Forms */
.ds-f { display: flex; flex-direction: column; }
.ds-fl { font-size: 11px; font-weight: 600; color: var(--ink3); margin-bottom: 4px; letter-spacing: .3px; }
.ds-fi {
  width: 100%;
  padding: 9px 11px;
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  font-size: 13px;
  color: var(--ink);
  background: var(--bg2);
  outline: none;
  transition: border-color .15s;
}
.ds-fi:focus { border-color: var(--blue); background: #fff; }
.ds-ta { min-height: 80px; }
.ds-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ds-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.ds-fa { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ds-pw { position: relative; }
.ds-pw .ds-fi { padding-right: 38px; }
.ds-eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 14px; color: var(--ink4); }

/* Buttons */
.ds-btn-pri {
  padding: 9px 18px;
  background: var(--grad);
  color: #fff;
  border: none;
  border-radius: var(--r);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity .15s;
}
.ds-btn-pri:hover { opacity: .88; }
.ds-btn-ghost {
  padding: 9px 16px;
  background: none;
  color: var(--ink3);
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s;
}
.ds-btn-ghost:hover { border-color: var(--ink3); }
.ds-btn-sm {
  padding: 5px 11px;
  border: none;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity .15s;
}
.ds-btn-sm:hover { opacity: .82; }
.ds-btn-blue   { background: var(--blue-ll); color: var(--blue); }
.ds-btn-teal   { background: #F0FDFA; color: var(--teal-d); }
.ds-btn-green  { background: var(--green-l); color: var(--green); }
.ds-btn-amber  { background: var(--amber-l); color: var(--amber); }
.ds-btn-danger { background: var(--red-l); color: var(--red); }

/* Pills */
.ds-pill { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 20px; font-size: 10px; font-weight: 700; white-space: nowrap; }
.ds-pill-blue  { background: var(--blue-ll); color: var(--blue); }
.ds-pill-teal  { background: #F0FDFA; color: var(--teal-d); }
.ds-pill-green { background: var(--green-l); color: var(--green); }
.ds-pill-amber { background: var(--amber-l); color: var(--amber); }
.ds-pill-gray  { background: var(--line-l); color: var(--ink4); }
.ds-pill-red   { background: var(--red-l); color: var(--red); }

/* Panel header */
.ds-ph {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.ds-ptitle { font-size: 15px; font-weight: 700; color: var(--ink); }

/* Empty state */
.ds-empty { text-align: center; padding: 48px 20px; color: var(--ink4); }
.ds-empty-ic { font-size: 40px; display: block; margin-bottom: 12px; }
.ds-empty h3 { font-size: 15px; font-weight: 600; color: var(--ink3); margin-bottom: 6px; }
.ds-empty p { font-size: 13px; }

/* Loading */
.ds-loading { text-align: center; padding: 24px; color: var(--ink4); font-size: 13px; }

/* Tables */
.adm-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.adm-table th { background: var(--line-l); padding: 8px 12px; text-align: left; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--ink4); position: sticky; top: 0; }
.adm-table td { padding: 9px 12px; border-bottom: 1px solid var(--line-l); vertical-align: middle; }
.adm-table tr:last-child td { border-bottom: none; }
.adm-table tr:hover td { background: var(--bg); }

/* Profile */
.ds-prof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ds-prof-hero { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.ds-prof-av-wrap { position: relative; }
.ds-prof-av {
  width: 62px; height: 62px; border-radius: 14px;
  background: var(--grad); color: #fff;
  font-size: 24px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.ds-prof-av img { width: 100%; height: 100%; object-fit: cover; }
.ds-prof-av-btn { position: absolute; bottom: -4px; right: -4px; width: 20px; height: 20px; background: var(--blue); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; border: 2px solid #fff; }
.ds-prof-info h3 { font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.ds-prof-info p { font-size: 12px; color: var(--ink4); margin-bottom: 4px; }
.ds-role-badge { display: inline-block; padding: 2px 9px; background: var(--blue-ll); color: var(--blue); border-radius: 20px; font-size: 10px; font-weight: 700; }
.ds-logout { margin-left: auto; font-size: 12px; color: var(--red); font-weight: 600; border: 1.5px solid var(--red); padding: 5px 12px; border-radius: var(--r); }

/* Vet grid */
.vet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; margin-bottom: 10px; }
.vet-card { background: var(--card); border-radius: var(--r-lg); padding: 14px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 10px; box-shadow: var(--shadow); }
.vet-card-l { display: flex; align-items: center; gap: 10px; min-width: 0; }
.vet-card-r { flex-shrink: 0; }
.vet-av { width: 40px; height: 40px; border-radius: 10px; background: var(--grad); color: #fff; font-size: 16px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.vet-av img { width: 100%; height: 100%; object-fit: cover; }
.vet-pname { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vet-pmeta { font-size: 11px; color: var(--ink4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vet-btn { padding: 5px 12px; border-radius: 7px; font-size: 11px; font-weight: 600; cursor: pointer; border: 1.5px solid var(--line); background: none; color: var(--ink3); transition: all .15s; white-space: nowrap; }
.vet-btn:hover { border-color: var(--blue); color: var(--blue); }
.vet-btn-pri { background: var(--blue-ll); color: var(--blue); border-color: transparent; }
.vet-btn-ghost { background: none; }

/* Access card */
.ds-acc-card { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--card); border-radius: var(--r-lg); border: 1px solid var(--line); margin-bottom: 8px; box-shadow: var(--shadow); }
.ds-acc-pending { border-left: 4px solid #F59E0B; }
.ds-acc-info { flex: 1; min-width: 0; }
.ds-acc-info strong { display: block; font-size: 13px; font-weight: 600; }
.ds-acc-info span { font-size: 12px; color: var(--ink4); }

/* Pet cards (owner) */
.ds-pets { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-bottom: 14px; }
.vpc { background: var(--card); border-radius: var(--r-lg); padding: 14px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.vpc-body { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.vpc-av { width: 52px; height: 52px; border-radius: 12px; background: var(--blue-ll); font-size: 22px; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; border: 2px solid var(--blue-l); }
.vpc-av img { width: 100%; height: 100%; object-fit: cover; }
.vpc-name { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.vpc-meta { font-size: 11px; color: var(--ink4); }
.vpc-age { font-weight: 600; color: var(--teal-d); }
.vpc-acts { display: flex; gap: 5px; flex-wrap: wrap; }
.vpc-b { flex: 1; min-width: 70px; padding: 6px 8px; border-radius: 7px; font-size: 11px; font-weight: 600; cursor: pointer; border: none; text-align: center; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 3px; }
.vpc-b-blue  { background: var(--blue-ll); color: var(--blue); }
.vpc-b-teal  { background: #F0FDFA; color: var(--teal-d); }
.vpc-b-red   { background: var(--red-l); color: var(--red); max-width: 36px; min-width: unset; flex: none; }

/* Upcoming */
.ds-upcoming { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-l); }
.ds-upcoming:last-child { border-bottom: none; }
.ds-up-date { width: 42px; text-align: center; background: var(--blue-ll); border-radius: 9px; padding: 6px 4px; flex-shrink: 0; }
.ds-up-day { font-size: 18px; font-weight: 800; color: var(--blue); line-height: 1; }
.ds-up-mon { font-size: 9px; font-weight: 700; text-transform: uppercase; color: var(--blue); letter-spacing: .5px; }
.ds-up-pet { font-size: 13px; font-weight: 600; color: var(--ink); }
.ds-up-clinic { font-size: 11px; color: var(--ink4); }

/* Member card */
.ds-member-card {
  background: var(--grad);
  border-radius: 16px;
  padding: 22px;
  position: relative;
  overflow: hidden;
  color: #fff;
}
.ds-mc-shine { position: absolute; top: -40px; right: -40px; width: 160px; height: 160px; background: rgba(255,255,255,.08); border-radius: 50%; }
.ds-mc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.ds-mc-logo { display: flex; align-items: center; gap: 8px; }
.ds-mc-logo img { height: 14px; filter: brightness(0) invert(1); }
.ds-mc-logo-text { font-size: 14px; font-weight: 900; letter-spacing: 4px; }
.ds-mc-badge { font-size: 10px; font-weight: 700; background: rgba(255,255,255,.2); padding: 3px 10px; border-radius: 20px; }
.ds-mc-bot { display: flex; gap: 24px; }
.ds-mc-lbl { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .7px; opacity: .65; margin-bottom: 2px; }
.ds-mc-val { font-size: 13px; font-weight: 700; }

/* Admin table wrap */
.adm-tw { overflow-x: auto; border-radius: var(--r-lg); }
.adm-chart-wrap { height: 200px; position: relative; }

/* Modal */
.modal-ov {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 16px;
  backdrop-filter: blur(2px);
}
.modal-ov.open { display: flex; }
.modal-box {
  background: #fff;
  border-radius: var(--r-lg);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-md);
  animation: modal-in .18s ease;
}
.modal-lg { max-width: 720px; }
@keyframes modal-in { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: none; } }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.modal-head h3 { font-size: 14px; font-weight: 700; color: var(--ink); }
.modal-x { background: none; border: none; font-size: 16px; color: var(--ink4); cursor: pointer; width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; }
.modal-x:hover { background: var(--line-l); }
.modal-body { padding: 18px; }

/* Toast */
.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--ink2);
  color: #fff;
  padding: 11px 18px;
  border-radius: var(--r);
  font-size: 13px;
  font-weight: 500;
  z-index: 9999;
  box-shadow: var(--shadow-md);
  animation: toast-in .2s ease;
  max-width: 320px;
}
.toast.success { background: var(--green); }
.toast.error   { background: var(--red); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }

/* Addform */
.ds-addform { background: var(--bg); border-radius: var(--r-lg); padding: 16px; border: 1px solid var(--line); margin-bottom: 14px; }
.ds-addform h3 { font-size: 13px; font-weight: 700; margin-bottom: 12px; color: var(--ink); }

/* Sub card */
.ds-sub { border-radius: var(--r-lg); padding: 20px; }
.ds-sub-premium { background: var(--grad); color: #fff; }
.ds-sub-badge { font-size: 10px; font-weight: 700; letter-spacing: 1px; opacity: .7; margin-bottom: 6px; }
.ds-sub h3 { font-size: 16px; font-weight: 700; margin-bottom: 14px; }
.ds-sub-row { display: flex; gap: 24px; flex-wrap: wrap; }
.ds-sub-row > div span { display: block; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .7px; opacity: .65; margin-bottom: 2px; }
.ds-sub-row > div strong { font-size: 13px; font-weight: 700; }

/* ── CHAT ─────────────────────────────────────────────────── */
.chat-wrap { display: grid; grid-template-columns: 240px 1fr; gap: 12px; height: 520px; }
.chat-sidebar { background: var(--card); border-radius: var(--r-lg); border: 1px solid var(--line); overflow-y: auto; display: flex; flex-direction: column; }
.chat-sidebar-hd { padding: 12px 14px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--ink4); border-bottom: 1px solid var(--line); }
.chat-conv-item { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; border-bottom: 1px solid var(--line-l); transition: background .12s; }
.chat-conv-item:hover, .chat-conv-item.active { background: var(--blue-ll); }
.chat-conv-av { width: 36px; height: 36px; border-radius: 9px; background: var(--blue-ll); border: 1px solid var(--blue-l); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.chat-conv-info { flex: 1; min-width: 0; }
.chat-conv-name { font-size: 12px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-conv-last { font-size: 11px; color: var(--ink4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.chat-main { background: var(--card); border-radius: var(--r-lg); border: 1px solid var(--line); display: flex; flex-direction: column; overflow: hidden; }
.chat-main-hd { padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; background: var(--bg2); }
.chat-msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--bg); }
.chat-msg { display: flex; flex-direction: column; max-width: 72%; }
.chat-msg.me { align-self: flex-end; align-items: flex-end; }
.chat-msg.them { align-self: flex-start; align-items: flex-start; }
.chat-bubble { padding: 9px 13px; border-radius: 14px; font-size: 13px; line-height: 1.5; word-break: break-word; }
.chat-msg.me   .chat-bubble { background: var(--blue); color: #fff; border-radius: 14px 14px 4px 14px; }
.chat-msg.them .chat-bubble { background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; }
.chat-meta { font-size: 10px; color: var(--ink5); margin-top: 3px; padding: 0 2px; }
.chat-input-wrap { padding: 10px 12px; border-top: 1px solid var(--line); display: flex; gap: 8px; background: #fff; }
.chat-input-wrap input { flex: 1; padding: 9px 12px; border: 1.5px solid var(--line); border-radius: var(--r); font-size: 13px; outline: none; background: var(--bg2); }
.chat-input-wrap input:focus { border-color: var(--blue); background: #fff; }
.chat-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--ink4); font-size: 13px; gap: 8px; }
.chat-empty-ic { font-size: 36px; }

/* ── CLINIC VIEW PAGE ─────────────────────────────────────── */
.clin-cover { position: relative; height: 220px; background: var(--grad); background-size: cover; background-position: center; border-radius: var(--r-lg); margin-bottom: 18px; overflow: hidden; }
.clin-cover-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,.15)); }
.clin-cover-content { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 16px; padding: 20px; height: 100%; }
.clin-av { width: 56px; height: 56px; background: rgba(255,255,255,.15); border: 2px solid rgba(255,255,255,.4); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 26px; flex-shrink: 0; }
.clin-name { font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 4px; }
.clin-city { font-size: 12px; color: rgba(255,255,255,.75); }
.clin-body { display: grid; grid-template-columns: 260px 1fr; gap: 14px; }
.clin-info-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line-l); font-size: 13px; }
.clin-info-row a { color: var(--blue); }
.clin-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.clin-gallery-item { border-radius: 9px; overflow: hidden; cursor: pointer; aspect-ratio: 1; }
.clin-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.clin-gallery-item:hover img { transform: scale(1.05); }
.ds-back { font-size: 13px; font-weight: 500; color: var(--blue); display: flex; align-items: center; gap: 4px; }

/* 404 */
.err-page { text-align: center; padding: 80px 20px; }
.err-logo img { height: 32px; }

/* ══════════════════════════════════════════════════════════
   MOBILE — BOTTOM NAV + FULL RESPONSIVE
   ══════════════════════════════════════════════════════════ */

/* ── BOTTOM NAV (mobile only) ─────────────────────────────── */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 600;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(0,0,0,.07);
  box-shadow: 0 -4px 24px rgba(0,0,0,.09);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mobile-nav-inner {
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  height: 56px;
}
.mob-nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 2px;
  position: relative;
  transition: background .15s;
  border-radius: 12px;
  margin: 4px 2px;
}
.mob-nav-btn .ic {
  font-size: 22px;
  line-height: 1;
  display: block;
  transition: transform .15s;
}
.mob-nav-btn span:last-child {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink4);
  font-family: 'DM Sans', 'Montserrat', sans-serif;
  transition: color .15s;
}
.mob-nav-btn.active .ic { transform: translateY(-1px); }
.mob-nav-btn.active span:last-child { color: var(--blue); }
.mob-nav-btn.active { background: var(--blue-ll); }
.mob-nav-ic-wrap { position: relative; display: flex; align-items: center; justify-content: center; }
.mob-badge {
  position: absolute;
  top: -4px; right: -6px;
  background: var(--red);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  border: 2px solid #fff;
  font-family: 'DM Sans', 'Montserrat', sans-serif;
}

/* ── BREAKPOINTS ──────────────────────────────────────────── */
@media (max-width: 960px) {
  .ds-stats { grid-template-columns: repeat(2, 1fr); }
  .ds-prof-grid { grid-template-columns: 1fr; }
  .clin-body { grid-template-columns: 1fr; }
  .chat-wrap { grid-template-columns: 1fr; height: auto; }
  .chat-sidebar { height: 180px; }
  .chat-main { height: 400px; }
  .adm-stats-grid { grid-template-columns: 1fr; }
  .adm-chart-wrap { height: 160px; }
  .ds-grid3 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  /* ── Layout ── */
  html { font-size: 14px; }
  body.dash-body { background: #F0F2F5; }
  .ds {
    padding: 0 0 72px;
    max-width: 100%;
  }

  /* ── Topbar ── */
  .ds-top {
    background: #fff;
    padding: 10px 16px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 400;
    box-shadow: 0 1px 8px rgba(0,0,0,.06);
  }
  .ds-top-brand { display: flex; }
  .ds-top-brand img { height: 22px; }
  .ds-top-sep { display: none; }
  .ds-top-name { font-size: 14px; font-weight: 700; max-width: 130px; }
  .ds-top-sub { font-size: 11px; }
  .ds-premium { font-size: 10px; padding: 3px 8px; }
  .ds-upgrade { font-size: 11px; padding: 5px 10px; }

  /* ── Stats ── */
  .ds-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 12px 12px 0;
    margin-bottom: 0;
  }
  .ds-stat {
    padding: 12px 14px;
    border-radius: 12px;
    border-left: 3px solid transparent;
  }
  .ds-stat-n { font-size: 24px; }
  .ds-stat-l { font-size: 10px; }

  /* ── Tabs — hidden on mobile, use bottom nav ── */
  .ds-tabs { display: none; }
  .mobile-nav { display: block; }

  /* ── Panels ── */
  .ds-panel {
    padding: 12px 12px 0;
  }
  .ds-ph {
    margin-bottom: 10px;
  }
  .ds-ptitle { font-size: 16px; }

  /* ── Pet cards ── */
  .ds-pets { grid-template-columns: 1fr; gap: 8px; }
  .vpc {
    border-radius: 12px;
    padding: 12px;
  }
  .vpc-av { width: 46px; height: 46px; font-size: 20px; border-radius: 10px; }
  .vpc-name { font-size: 15px; }
  .vpc-meta { font-size: 12px; }
  .vpc-acts { gap: 6px; }
  .vpc-b { font-size: 12px; padding: 7px 10px; border-radius: 8px; }

  /* ── Cards ── */
  .ds-card { border-radius: 12px; padding: 14px; }
  .ds-card-title { font-size: 11px; }
  .ds-addform { border-radius: 12px; padding: 14px; }

  /* ── Buttons ── */
  .ds-btn-pri { font-size: 13px; padding: 10px 16px; }

  /* ── Forms ── */
  .ds-grid2, .ds-grid3 { grid-template-columns: 1fr; }
  .ds-fi { font-size: 14px; padding: 10px 12px; }

  /* ── Chat ── */
  .chat-wrap { height: auto; }
  .chat-sidebar { height: 160px; border-radius: 12px; }
  .chat-main { height: 380px; border-radius: 12px; }

  /* ── Profile ── */
  .ds-prof-grid { grid-template-columns: 1fr; }
  .ds-prof-hero { flex-direction: column; text-align: center; align-items: center; }
  .ds-logout { margin-left: 0; margin-top: 8px; }

  /* ── Clinic view ── */
  .clin-cover { height: 160px; border-radius: 0; }
  .clin-name { font-size: 18px; }
  .clin-body { grid-template-columns: 1fr; }

  /* ── Upcoming ── */
  .ds-upcoming { padding: 8px 0; }
  .ds-up-day { font-size: 16px; }

  /* ── Auth ── */
  .vx-auth { grid-template-columns: 1fr; min-height: 100dvh; }
  .vx-left { display: none; }
  .vx-right { padding: 24px 20px; align-items: flex-start; padding-top: 40px; }
  .vx-form-box { max-width: 100%; }

  /* ── Modal ── */
  .modal-ov { align-items: flex-end; padding: 0; }
  .modal-box {
    border-radius: 20px 20px 0 0;
    max-height: 90dvh;
    animation: modal-mobile-in .22s ease;
  }
  @keyframes modal-mobile-in {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }

  /* ── Admin stats ── */
  [style*="repeat(6,1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }

  /* ── Toast position ── */
  .toast { bottom: 72px; right: 12px; left: 12px; max-width: 100%; text-align: center; }
}

@media (min-width: 601px) {
  .mobile-nav { display: none !important; }
}

/* ── ADMIN SPECIFIC ───────────────────────────────────────── */
.adm-user-av {
  width: 32px; height: 32px;
  background: var(--grad);
  color: #fff;
  font-size: 13px; font-weight: 700;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.adm-code {
  font-family: 'Courier New', monospace;
  background: var(--line-l);
  padding: 2px 6px; border-radius: 5px;
  font-size: 12px; letter-spacing: .4px;
}
.ds-pill-purple { background: #EDE9FE; color: #7C3AED; }
.adm-chart-wrap { height: 200px; position: relative; }

/* ── ADMIN CLINIC CARD ────────────────────────────────────── */
.adm-clinic-card-v2 {
  background: var(--card);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: box-shadow .2s, transform .15s;
}
.adm-clinic-card-v2:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.adm-clinic-cover-v2 {
  height: 130px;
  background: var(--grad);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.adm-clinic-cover-v2::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,.35));
}

/* ── ADMIN STATS GRID FIX ─────────────────────────────────── */
.adm-stats-6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
@media (max-width: 1100px) {
  .adm-stats-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .adm-stats-6 { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .adm-chart-wrap { height: 140px; }
}


/* ══════════════════════════════════════════════════════════
   PREMIUM — PRICING TABLE
   ══════════════════════════════════════════════════════════ */

.prem-upgrade-wrap { max-width: 680px; margin: 0 auto; }

/* Header */
.prem-header { text-align:center; padding: 18px 0 22px; }
.prem-header-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--blue-ll); color: var(--blue);
  font-size: 11px; font-weight: 700;
  padding: 4px 14px; border-radius: 20px;
  margin-bottom: 12px; letter-spacing: .4px;
}
.prem-header h2 { font-size: 20px; font-weight: 800; margin: 0 0 5px; color: var(--ink); }
.prem-header p  { font-size: 13px; color: var(--ink4); margin: 0; }

/* Plans grid */
.prem-plans-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
  align-items: start;
}

/* Plan card */
.prem-plan-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.prem-plan-featured {
  border: 2px solid var(--blue);
}
.prem-plan-popular {
  background: var(--blue-ll);
  color: var(--blue);
  text-align: center;
  font-size: 11px; font-weight: 700;
  padding: 6px;
  letter-spacing: .4px;
}
.prem-plan-head {
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--line-l);
}
.prem-plan-label {
  font-size: 11px; font-weight: 700;
  color: var(--ink4); letter-spacing: .5px;
  margin-bottom: 10px;
}
.prem-label-blue { color: var(--blue); }
.prem-plan-price-row { display: flex; align-items: baseline; gap: 4px; margin-bottom: 4px; }
.prem-plan-price-num { font-size: 30px; font-weight: 800; color: var(--ink); }
.prem-price-blue    { color: var(--blue); }
.prem-plan-price-per { font-size: 13px; color: var(--ink4); }
.prem-plan-desc { font-size: 12px; color: var(--ink4); }

/* Features */
.prem-plan-features { padding: 14px 20px; }
.prem-feat-row {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; color: var(--ink);
  padding: 5px 0;
}
.prem-feat-row b { font-weight: 700; }
.prem-feat-row.off { color: var(--ink5); text-decoration: line-through; opacity: .45; }
.prem-feat-divider { height: 1px; background: var(--line-l); margin: 4px 0; }
.prem-plan-foot { padding: 4px 20px 18px; }

/* Buttons */
.prem-btn-current {
  width: 100%; padding: 10px;
  background: var(--line-l); color: var(--ink4);
  border: none; border-radius: 10px;
  font-size: 13px; font-weight: 600;
  font-family: 'DM Sans', 'Montserrat', sans-serif;
  cursor: not-allowed; opacity: .5;
}
.prem-btn-select {
  width: 100%; padding: 11px;
  background: var(--blue-ll); color: var(--blue);
  border: 1px solid var(--blue);
  border-radius: 10px;
  font-size: 13px; font-weight: 700;
  font-family: 'DM Sans', 'Montserrat', sans-serif;
  cursor: pointer;
  transition: background .15s;
}
.prem-btn-select:hover { background: var(--blue); color: #fff; }

/* Payment section */
.prem-pay-section {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 12px;
}
.prem-pay-periods { padding: 18px 20px; border-bottom: 1px solid var(--line-l); }
.prem-pay-section-lbl {
  font-size: 11px; font-weight: 700;
  color: var(--ink4); letter-spacing: .4px;
  margin-bottom: 10px;
}
.prem-periods-row {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 8px;
}
.prem-period {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 6px;
  text-align: center;
  cursor: pointer;
  transition: all .15s;
  background: var(--card);
  position: relative;
  display: block;
}
.prem-period:hover { border-color: var(--blue); background: var(--blue-ll); }
.prem-period-active { border: 2px solid var(--blue) !important; background: var(--blue-ll); }
.prem-period-lbl   { font-size: 12px; font-weight: 600; color: var(--ink); }
.prem-period-price { font-size: 15px; font-weight: 800; color: var(--blue); margin-top: 3px; }
.prem-period-mo    { font-size: 10px; color: var(--ink4); margin-top: 2px; }
.prem-save-badge {
  position: absolute; top: -7px; right: 2px;
  background: var(--red); color: #fff;
  font-size: 9px; font-weight: 700;
  padding: 2px 5px; border-radius: 5px;
}

/* Summary */
.prem-pay-summary {
  padding: 16px 20px;
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line-l);
}
.prem-total-price { font-size: 26px; font-weight: 800; color: var(--blue); }
.prem-total-note  { font-size: 12px; color: var(--ink4); margin-top: 2px; }
.prem-btn-pay {
  padding: 12px 28px;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14px; font-weight: 700;
  font-family: 'DM Sans', 'Montserrat', sans-serif;
  cursor: pointer;
  transition: opacity .15s;
}
.prem-btn-pay:hover { opacity: .88; }
.prem-trust {
  padding: 10px 20px;
  display: flex; gap: 16px;
  font-size: 11px; color: var(--ink4);
  flex-wrap: wrap;
}

/* Card code section */
.prem-card-section {
  background: var(--line-l);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px 20px;
  display: flex; align-items: center;
  gap: 14px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.prem-card-icon {
  width: 42px; height: 42px;
  background: #DCFCE7;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}

/* Active premium */
.prem-active-wrap {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}
.prem-active-top {
  background: linear-gradient(135deg, var(--blue), var(--teal));
  padding: 20px 22px;
  color: #fff;
  display: flex; align-items: center; gap: 14px;
}
.prem-active-icon {
  width: 46px; height: 46px;
  background: rgba(255,255,255,.2);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
}
.prem-active-title { font-size: 16px; font-weight: 800; }
.prem-active-sub   { font-size: 12px; opacity: .8; margin-top: 2px; }
.prem-active-bot {
  display: grid;
  grid-template-columns: repeat(3,1fr);
}
.prem-active-stat {
  padding: 14px 18px;
  border-right: 1px solid var(--line);
}
.prem-active-stat:last-child { border-right: none; }
.prem-active-stat-lbl { font-size: 10px; font-weight: 700; color: var(--ink4); letter-spacing: .4px; text-transform: uppercase; margin-bottom: 4px; }
.prem-active-stat-val { font-size: 15px; font-weight: 800; color: var(--ink); }
.prem-member-card-wrap { margin-bottom: 14px; }

/* Responsive */
@media (max-width: 600px) {
  .prem-plans-grid { grid-template-columns: 1fr; }
  .prem-periods-row { grid-template-columns: repeat(2,1fr); }
  .prem-pay-summary { flex-direction: column; align-items: flex-start; }
  .prem-btn-pay { width: 100%; }
  .prem-active-bot { grid-template-columns: 1fr 1fr; }
  .prem-active-stat:nth-child(2) { border-right: none; }
  .prem-active-stat:last-child { grid-column: 1/-1; border-top: 1px solid var(--line); }
  .prem-card-section { flex-direction: column; align-items: flex-start; }
}

/* ── APPOINTMENTS ─────────────────────────────────────────── */
.appt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-l);
  flex-wrap: wrap;
}
.appt-row:last-child { border-bottom: none; }
.appt-row-info { flex: 1; min-width: 0; }

.slot-check-label {
  display: flex; align-items: center; gap: 5px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 12px; font-weight: 600;
  transition: background .12s, border-color .12s;
}
.slot-check-label:has(input:checked) {
  background: var(--blue-ll);
  border-color: var(--blue);
  color: var(--blue);
}

.slots-day-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--line-l);
  font-size: 12px;
}
.slots-day-item:last-child { border-bottom: none; }

/* ── CHAT TIME ────────────────────────────────────────────── */
.chat-time { font-size: 10px; color: var(--ink5); margin-top: 3px; padding: 0 2px; }
.chat-msg.me .chat-time { text-align: right; }
.chat-msg.them .chat-time { text-align: left; }

/* ── CHAT INPUT WRAP ─────────────────────────────────────── */
.chat-input-wrap {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  background: #fff;
  align-items: center;
}
.chat-input-wrap input {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 20px;
  font-family: inherit;
  font-size: 13px;
  outline: none;
}
.chat-input-wrap input:focus {
  border-color: var(--blue);
}

/* ── CHAT SIDEBAR ────────────────────────────────────────── */
.chat-wrap {
  display: grid;
  grid-template-columns: 260px 1fr;
  height: 500px;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
@media (max-width: 700px) {
  .chat-wrap {
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 400px;
  }
  .chat-sidebar {
    border-right: none !important;
    border-bottom: 1px solid var(--line);
    max-height: 180px;
    overflow-y: auto;
  }
  .chat-main {
    min-height: 280px;
  }
}
.chat-sidebar {
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.chat-sidebar-hd {
  padding: 12px 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink4);
  letter-spacing: .4px;
  border-bottom: 1px solid var(--line);
  text-transform: uppercase;
}
.chat-conv-list {
  flex: 1;
  overflow-y: auto;
}
.chat-conv-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-l);
  cursor: pointer;
  transition: background .1s;
}
.chat-conv-item:hover, .chat-conv-item.active { background: var(--blue-ll); }
.chat-conv-av {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--grad);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.chat-conv-info { flex: 1; min-width: 0; }
.chat-conv-name { font-size: 13px; font-weight: 600; }
.chat-conv-last { font-size: 11px; color: var(--ink4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.chat-main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.chat-main-hd {
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 700;
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.chat-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--ink4);
  font-size: 13px;
  gap: 8px;
}
.chat-empty-ic { font-size: 36px; }

/* ── MOBILE RESPONSIVE ───────────────────────────────────── */
@media (max-width: 700px) {
  /* Appointments: stack calendar above form */
  .appt-grid {
    grid-template-columns: 1fr !important;
  }

  /* Chat: stack sidebar above messages */
  .chat-wrap {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }
  .chat-sidebar {
    border-right: none !important;
    border-bottom: 1px solid var(--line);
    max-height: 200px;
    overflow-y: auto;
  }
  .chat-main {
    min-height: 300px;
  }
  .chat-msgs {
    min-height: 200px;
  }

  /* Stat grid on mobile */
  .ds-stats {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Week days: smaller */
  #ow-days-row, #vet-week-days, #cl-week-days {
    gap: 2px !important;
  }
}

/* ── HEALTH PROFILE ──────────────────────────────────────── */
.health-section {
  background: var(--bg);
  border-radius: 12px;
  padding: 14px;
  margin-top: 10px;
}
.health-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--ink4);
  margin-bottom: 10px;
}
.health-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  margin: 3px;
  cursor: pointer;
}
.health-tag.good  { background: #F0FDF4; border-color: #86EFAC; color: #15803D; }
.health-tag.bad   { background: #FFF1F2; border-color: #FECDD3; color: #BE123C; }
.health-tag.allergy { background: #FFF7ED; border-color: #FED7AA; color: #C2410C; }

/* ── SLOTS GRID MOBILE ───────────────────────────────────── */
@media (max-width: 500px) {
  .slots-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 5px !important;
  }
  #ow-days-row button {
    padding: 5px 1px !important;
  }
  #ow-days-row button span:nth-child(1) { font-size: 8px !important; }
  #ow-days-row button span:nth-child(2) { font-size: 13px !important; }
  #ow-days-row button span:nth-child(3) { font-size: 8px !important; }
}

/* ── FONT AWESOME INTEGRATION ──────────────────────────────── */
.ds-tab i, .mob-nav-btn i {
  font-size: 15px;
  width: 16px;
  text-align: center;
}
.mob-nav-btn i {
  display: block;
  font-size: 20px;
  margin-bottom: 3px;
}

/* ── IMPROVED INPUTS ─────────────────────────────────────────*/
.ds-fi {
  border-radius: var(--radius-sm) !important;
  border: 1.5px solid var(--line) !important;
  transition: border-color .15s, box-shadow .15s !important;
}
.ds-fi:focus {
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px rgba(26,111,245,.1) !important;
  outline: none !important;
}

/* ── BETTER PILLS ────────────────────────────────────────────*/
.ds-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  letter-spacing: .2px;
}

/* ── PET CARDS ───────────────────────────────────────────────*/
.vpc {
  border-radius: var(--radius) !important;
  border: 1px solid var(--line) !important;
  transition: transform .15s, box-shadow .15s !important;
}
.vpc:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow2) !important;
}

/* ── IMPROVED STAT CARDS ─────────────────────────────────────*/
.ds-stat-n {
  font-size: 32px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -1px !important;
}
.ds-stat-l {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  margin-top: 4px !important;
  opacity: .7 !important;
}

/* ── IMPROVED MODAL ──────────────────────────────────────────*/
.modal-box {
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 32px 80px rgba(0,0,0,.25) !important;
}
.modal-head {
  border-bottom: 1px solid var(--line-l) !important;
  padding: 20px 24px !important;
}

/* ── TOPBAR LOGO ─────────────────────────────────────────────*/
.topbar-logo span {
  letter-spacing: 4px !important;
  font-size: 18px !important;
}


/* ════════════════════════════════════════════════════════════
   REDESIGN v2 — Professional UI
   ════════════════════════════════════════════════════════════ */

/* ── TOPBAR IMPROVEMENTS ─────────────────────────────────── */
.topbar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.topbar-logo-icon {
  width: 36px;
  height: 36px;
  background: var(--grad);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(26,111,245,.3);
}
.topbar-logo-icon i { color: #fff; font-size: 18px; }
.topbar-logo span {
  font-size: 16px !important;
  font-weight: 900 !important;
  letter-spacing: 3px !important;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── STAT CARDS ──────────────────────────────────────────── */
.ds-stat {
  position: relative;
  overflow: hidden;
}
.ds-stat::after {
  content: '';
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 70px;
  height: 70px;
  border-radius: 50%;
  opacity: .06;
  background: currentColor;
}
.ds-stat-blue  { border-left-color: var(--blue);  color: var(--blue);  }
.ds-stat-teal  { border-left-color: var(--teal);  color: var(--teal);  }
.ds-stat-amber { border-left-color: var(--amber); color: var(--amber); }
.ds-stat-green { border-left-color: var(--green); color: var(--green); }

/* ── TABS ────────────────────────────────────────────────── */
.ds-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--line-l);
  border-radius: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.ds-tab {
  border-radius: 9px !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
}
.ds-tab.active {
  background: var(--white) !important;
  color: var(--blue) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.1) !important;
}
.ds-tab:not(.active):hover {
  background: rgba(255,255,255,.6) !important;
  color: var(--ink3) !important;
}

/* ── PANEL HEADERS ───────────────────────────────────────── */
.ds-ph {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--line-l);
}
.ds-ptitle {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ds-ptitle i {
  color: var(--blue);
  font-size: 15px;
}













/* ── CLINIC CARDS ────────────────────────────────────────── */
.clinic-card {
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: all .2s;
  box-shadow: var(--shadow);
}
.clinic-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow2);
  border-color: var(--blue);
}

/* ── BUTTONS ─────────────────────────────────────────────── */
.ds-btn-ghost {
  border: 1.5px solid var(--line) !important;
  border-radius: 8px !important;
  transition: all .15s !important;
}
.ds-btn-ghost:hover {
  border-color: var(--blue) !important;
  color: var(--blue) !important;
  background: var(--blue-ll) !important;
}

/* ── FORM INPUTS ─────────────────────────────────────────── */
.ds-fi {
  width: 100%;
  padding: 10px 14px !important;
  border-radius: 9px !important;
  border: 1.5px solid var(--line) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  background: var(--white) !important;
  color: var(--ink) !important;
  transition: all .15s !important;
  box-sizing: border-box;
}
.ds-fi:focus {
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px rgba(26,111,245,.1) !important;
  outline: none !important;
}
select.ds-fi { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; padding-right: 36px !important; }

/* ── CARDS GRID ──────────────────────────────────────────── */
.pets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
@media(max-width:600px) { .pets-grid { grid-template-columns: 1fr; } }

/* ── CHAT IMPROVEMENTS ───────────────────────────────────── */
.chat-bubble {
  border-radius: 16px !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  max-width: 100%;
  word-break: break-word;
}
.chat-msg.me .chat-bubble {
  border-radius: 16px 16px 4px 16px !important;
  background: var(--grad) !important;
}
.chat-msg.them .chat-bubble {
  border-radius: 16px 16px 16px 4px !important;
}

/* ── SLOT BUTTONS ────────────────────────────────────────── */
#ow-slots button, #vet-hours-grid button, #cl-hours-grid button {
  transition: all .15s !important;
}
#ow-slots button:hover:not(:disabled) {
  transform: scale(1.05);
}

/* ── PREMIUM BADGE ───────────────────────────────────────── */
.prem-badge {
  background: linear-gradient(135deg, #F59E0B, #D97706);
  color: #fff;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 2px 8px rgba(245,158,11,.3);
}

/* ── TABLE IMPROVEMENTS ──────────────────────────────────── */
.adm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.adm-table th {
  background: var(--bg);
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--ink4);
  border-bottom: 2px solid var(--line);
  white-space: nowrap;
}
.adm-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-l);
  vertical-align: middle;
}
.adm-table tr:last-child td { border-bottom: none; }
.adm-table tr:hover td { background: var(--bg); }

/* ── SCROLL IMPROVEMENTS ─────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--line-l); border-radius: 3px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink5); }

/* ── LOADING STATES ──────────────────────────────────────── */
.ds-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  color: var(--ink4);
  font-size: 13px;
  gap: 8px;
}
.ds-loading::before {
  content: '';
  width: 16px;
  height: 16px;
  border: 2px solid var(--line);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── EMPTY STATES ────────────────────────────────────────── */
.ds-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--ink4);
}
.ds-empty-ic {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: .5;
  display: block;
}
.ds-empty h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink3);
  margin: 0 0 6px;
}
.ds-empty p {
  font-size: 13px;
  margin: 0;
  line-height: 1.6;
}

/* ── TOAST IMPROVEMENTS ──────────────────────────────────── */
.toast {
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.15) !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* ── MOBILE NAV ──────────────────────────────────────────── */
.mob-nav {
  background: var(--white) !important;
  border-top: 1px solid var(--line) !important;
  box-shadow: 0 -4px 20px rgba(0,0,0,.06) !important;
}
.mob-nav-btn {
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 8px 4px !important;
  border-radius: 10px !important;
  transition: all .15s !important;
}
.mob-nav-btn.active {
  color: var(--blue) !important;
  background: var(--blue-ll) !important;
}
.mob-nav-btn i {
  font-size: 18px !important;
  margin-bottom: 3px !important;
}

/* ── TOPBAR USER INFO ────────────────────────────────────── */
.topbar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.topbar-avatar {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--grad);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
}

/* ── CARD TITLES ─────────────────────────────────────────── */
.ds-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink3);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.ds-card-title i { color: var(--blue); }

/* ── DASH BODY ───────────────────────────────────────────── */
.dash-body {
  min-height: 100vh;
  background: var(--bg);
}
.dash-content {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 24px 80px;
}
@media(max-width:600px) { .dash-content { padding: 16px 14px 80px; } }

@media (max-width: 980px) {
  .vx-auth { grid-template-columns: 1fr; }
  .vx-left { display:none; }
  .vx-right { padding: 22px 14px; align-items:flex-start; }
  .vx-form-box { max-width: 100%; border-radius: 28px; padding: 22px 18px 18px; }
  .vx-mobile-pets { display:block; }
}
@media (max-width: 560px) {
  body.auth-body { background: linear-gradient(180deg, #EAF3FF 0%, #F7FBFF 26%, #FFFFFF 60%); }
  .vx-right { background: transparent; padding: 0; align-items:flex-start; }
  .vx-form-box { max-width: 100%; min-height: 100dvh; border-radius: 0; padding: 18px 14px 26px; box-shadow: none; border:none; background:transparent; backdrop-filter:none; }
  .vx-form-box::before { display:none; }
  .vx-form-logo { margin-bottom: 14px; padding: 0 4px; }
  .vx-form-logo img { height: 22px; }
  .vx-form-logo-t { font-size: 14px; letter-spacing: 3px; }
  .vx-mobile-pets { display:block; margin-bottom: 28px; }
  .vx-tabs { margin-bottom: 18px; border-radius: 18px; padding:5px; background:rgba(255,255,255,.92); box-shadow:0 10px 24px rgba(15,23,42,.06); }
  .vx-tab { padding: 12px 8px; font-size: 13px; }
  .vx-panel { background:#fff; border:1px solid rgba(17,106,210,.08); border-radius:28px; box-shadow:0 18px 36px rgba(15,23,42,.07); padding:16px; }
  .vx-field { margin-bottom: 13px; }
  .vx-lbl { font-size: 11px; }
  .vx-inp { font-size: 16px; padding: 15px 14px; border-radius:18px; }
  .vx-btn { padding: 15px; font-size: 14px; border-radius:18px; }
  .vx-check { align-items:flex-start; }
  .vx-clinic-cta { align-items:flex-start; margin-top:14px; }
}


/* ===== LUX OWNER DASHBOARD OVERRIDES ===== */
.ds{padding:0 20px 48px}
.ds-top-premium{position:sticky;top:0;z-index:20;padding:16px 0 18px;margin-bottom:22px;backdrop-filter:blur(14px);background:linear-gradient(180deg, rgba(247,250,252,.95), rgba(247,250,252,.82))}
.ow-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:1.35fr .8fr;gap:18px;margin-bottom:18px;padding:26px;border-radius:30px;border:1px solid rgba(17,106,210,.08);background:radial-gradient(circle at top right, rgba(30,173,190,.18), transparent 28%),radial-gradient(circle at bottom left, rgba(17,106,210,.18), transparent 26%),linear-gradient(135deg, #0F172A 0%, #123A6F 52%, #1EADBE 100%);box-shadow:0 26px 70px rgba(15,23,42,.14)}
.ow-hero::after{content:"";position:absolute;right:-80px;top:-80px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.08);filter:blur(4px)}
.ow-hero-main,.ow-hero-side{position:relative;z-index:1}
.ow-hero-kicker{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:12px;font-weight:700}
.ow-hero h1{margin:14px 0 10px;font-size:36px;line-height:1.02;letter-spacing:-.03em;color:#fff}
.ow-hero p{max-width:650px;margin:0;color:rgba(255,255,255,.82);font-size:15px;line-height:1.7}
.ow-hero-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.ow-hero-pills span{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14);color:#fff;font-size:12px;font-weight:600}
.ow-hero-card{height:100%;min-height:180px;padding:18px;border-radius:24px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);display:flex;flex-direction:column;justify-content:space-between}
.ow-hero-stat strong{display:block;font-size:52px;line-height:1;color:#fff;font-weight:900;letter-spacing:-.04em}
.ow-hero-stat span{display:block;margin-top:4px;font-size:13px;color:rgba(255,255,255,.78)}
.ow-hero-actions{display:grid;gap:10px}
.ow-hero .ds-btn-pri,.ow-hero .ds-btn-ghost{width:100%;justify-content:center;border-radius:16px;padding:14px 16px;font-size:13px;font-weight:700}
.ow-hero .ds-btn-ghost{border-color:rgba(255,255,255,.22)!important;background:rgba(255,255,255,.08)!important;color:#fff!important}
.ds-stats-lux{gap:14px;margin-bottom:22px}
.ds-stats-lux .ds-stat{display:flex;align-items:center;gap:14px;min-height:104px;border:1px solid rgba(148,163,184,.14)!important;border-left-width:1px!important;border-radius:24px!important;background:linear-gradient(180deg,#fff,#f8fbff)!important;box-shadow:0 16px 36px rgba(15,23,42,.06)!important;padding:18px 20px!important}
.ds-stat-ic{width:52px;height:52px;border-radius:18px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#EFF6FF,#DBEAFE);color:var(--blue);font-size:20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.ds-stat-teal .ds-stat-ic{background:linear-gradient(135deg,#ECFEFF,#CCFBF1);color:var(--teal)}
.ds-stat-amber .ds-stat-ic{background:linear-gradient(135deg,#FFF7ED,#FFEDD5);color:#D97706}
.ds-stat-green .ds-stat-ic{background:linear-gradient(135deg,#F0FDF4,#DCFCE7);color:#16A34A}
.ds-tabs{gap:8px!important;padding:8px!important;border:none!important;background:#fff!important;border-radius:22px!important;box-shadow:0 12px 28px rgba(15,23,42,.06)!important;margin-bottom:24px!important}
.ds-tab{display:inline-flex;align-items:center;gap:8px;padding:12px 16px!important;border-radius:14px!important;color:#64748B!important;font-weight:700!important;font-size:13px!important}
.ds-tab.active{background:linear-gradient(135deg,#116AD2,#1EADBE)!important;color:#fff!important;box-shadow:0 14px 28px rgba(17,106,210,.22)!important}
.ds-ph{border:none!important;padding:0!important;margin:0 0 18px!important}
.ds-ptitle{font-size:24px!important;letter-spacing:-.03em}
.ds-btn-pri{display:inline-flex;align-items:center;gap:8px;border-radius:16px!important;padding:12px 16px!important;box-shadow:0 16px 30px rgba(17,106,210,.18)!important}
.ds-pets{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))!important;gap:18px!important}
.vpc-lux{position:relative;padding:0!important;border:none!important;border-radius:28px!important;overflow:hidden!important;background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%)!important;box-shadow:0 22px 46px rgba(15,23,42,.08)!important}
.vpc-lux:hover{transform:translateY(-6px)!important;box-shadow:0 30px 56px rgba(15,23,42,.12)!important}
.vpc-cover{position:relative;height:132px;padding:18px;background:radial-gradient(circle at top right, rgba(255,255,255,.24), transparent 22%),linear-gradient(135deg, #116AD2 0%, #1EADBE 100%)}
.vpc-cover-badge{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border-radius:999px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.16);color:#fff;font-size:12px;font-weight:700}
.vpc-icon-btn{position:absolute;right:16px;top:16px;width:42px;height:42px;border:none;border-radius:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.18);color:#fff;font-size:15px;backdrop-filter:blur(8px)}

.vpc-head{display:grid;grid-template-columns:76px minmax(0,1fr);align-items:end;gap:14px;margin-top:-34px;margin-bottom:14px}
.vpc-av{width:76px!important;height:76px!important;border-radius:22px!important;background:#fff!important;border:4px solid #fff!important;box-shadow:0 14px 30px rgba(15,23,42,.16)!important;position:relative}
.vpc-av-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:18px;background:linear-gradient(135deg,#EFF6FF,#DBEAFE);color:var(--blue);font-size:28px}
.vpc-main{min-width:0;flex:1;padding-bottom:6px}


.vpc-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.vpc-fact{padding:12px;border-radius:16px;background:#fff;border:1px solid rgba(148,163,184,.16);box-shadow:0 10px 20px rgba(15,23,42,.04)}
.vpc-fact span{display:block;font-size:11px;font-weight:700;color:#64748B;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.vpc-fact strong{display:block;font-size:13px;color:#0F172A;font-weight:800;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}



.vpc-b-soft{background:linear-gradient(180deg,#ECFEFF,#CCFBF1)!important;border-color:#5EEAD4!important;color:#0F766E!important}

.ds-card{border-radius:28px!important;border:1px solid rgba(148,163,184,.14)!important;box-shadow:0 18px 38px rgba(15,23,42,.06)!important;padding:20px 22px!important}
.ds-upcoming{padding:14px 0!important}
.ds-empty{padding:60px 24px!important;border:1px dashed rgba(148,163,184,.35);background:#fff;border-radius:28px;box-shadow:0 16px 36px rgba(15,23,42,.04)}
@media (max-width: 980px){.ow-hero{grid-template-columns:1fr;padding:22px;border-radius:24px}.ow-hero h1{font-size:28px}.ow-hero-card{min-height:auto}.ds-pets{grid-template-columns:1fr!important}}
@media (max-width: 640px){.ds{padding:0 14px 96px}.ds-top-premium{padding:10px 0 14px}.ds-top-l .ds-top-sep{display:none}.ow-hero{padding:18px;border-radius:22px}.ow-hero-kicker{font-size:11px}.ow-hero h1{font-size:24px}.ow-hero p{font-size:13px}.ow-hero-pills span{width:100%;justify-content:flex-start}.ds-stats-lux{grid-template-columns:1fr 1fr!important}.ds-stats-lux .ds-stat{min-height:90px;padding:16px!important;border-radius:20px!important}.ds-stat-ic{width:44px;height:44px;border-radius:15px;font-size:17px}.ds-tabs{padding:6px!important;border-radius:18px!important}.ds-tab{padding:11px 12px!important;font-size:12px!important}.ds-ptitle{font-size:20px!important}.vpc-cover{height:96px;padding:14px}.vpc-head{gap:12px;margin-top:-28px}.vpc-av{width:66px!important;height:66px!important;border-radius:20px!important}.vpc-facts{grid-template-columns:1fr;gap:8px}}



/* ===== DASHBOARD POLISH v3 ===== */
.ow-hero{
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.14), transparent 22%),
    radial-gradient(circle at bottom left, rgba(255,255,255,.09), transparent 18%),
    linear-gradient(135deg, #051B45 0%, #0D4EA9 45%, #1DB8C8 100%) !important;
  box-shadow:0 40px 90px rgba(15,23,42,.18)!important;
}
.ow-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(120deg, rgba(255,255,255,.08), transparent 26%),
    linear-gradient(300deg, rgba(255,255,255,.05), transparent 22%);
  pointer-events:none;
}
.ow-hero-card{
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08)) !important;
  border:1px solid rgba(255,255,255,.2) !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 22px 42px rgba(15,23,42,.16) !important;
}
.ow-hero-pills span{
  background:rgba(255,255,255,.12) !important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-color:rgba(255,255,255,.18) !important;
}
.ds-stats-lux .ds-stat{
  background:
    radial-gradient(circle at top right, rgba(17,106,210,.05), transparent 28%),
    linear-gradient(180deg,#FFFFFF 0%,#F7FAFE 100%) !important;
  box-shadow:0 24px 44px rgba(15,23,42,.07)!important;
}
.ds-tabs{
  background:rgba(255,255,255,.82)!important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 18px 34px rgba(15,23,42,.08)!important;
}
.ds-tab.active{
  background:linear-gradient(135deg,#0F66CF,#1EB4C6)!important;
  box-shadow:0 18px 34px rgba(17,106,210,.24)!important;
}
.vpc-lux{
  background:
    radial-gradient(circle at top right, rgba(17,106,210,.05), transparent 25%),
    linear-gradient(180deg,#FFFFFF 0%,#F8FBFF 100%) !important;
  box-shadow:0 28px 54px rgba(15,23,42,.09)!important;
}
.vpc-icon-btn:hover{
  background:rgba(255,255,255,.3)!important;
  transform:translateY(-1px);
}
.vpc-fact:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 28px rgba(15,23,42,.06)!important;
}
.ds-card{
  background:
    radial-gradient(circle at top right, rgba(17,106,210,.035), transparent 26%),
    linear-gradient(180deg,#FFFFFF 0%,#FAFCFF 100%) !important;
}
.mobile-nav{
  background:rgba(255,255,255,.94)!important;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-top:1px solid rgba(148,163,184,.16)!important;
  box-shadow:0 -18px 34px rgba(15,23,42,.08)!important;
}
.mobile-nav-inner{
  gap:6px;
  padding:6px 8px 0;
}
.mob-nav-btn{
  min-height:60px;
  border-radius:16px!important;
}
.mob-nav-btn.active{
  background:linear-gradient(180deg,#EFF6FF,#DBEAFE)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92), 0 12px 22px rgba(17,106,210,.08)!important;
}
.notif-fab{
  background:linear-gradient(135deg,#0F66CF,#1EB4C6)!important;
  box-shadow:0 26px 42px rgba(15,23,42,.18), 0 12px 22px rgba(17,106,210,.18)!important;
}
.vpc-card-tools{position:absolute;right:16px;top:16px;display:flex;gap:8px}
.vpc-card-tools .vpc-icon-btn{position:static}
#panel-ow-appointments .appt-grid,
#panel-cl-appointments .appt-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)!important}
#panel-vet-appointments > div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)!important}
.ds-prof-grid,.appt-grid{align-items:start}
.chat-wrap{grid-template-columns:320px minmax(0,1fr)!important}
.chat-main,.chat-sidebar,.ds-card,.vpc-lux{min-width:0}
.vpc-main,.vpc-meta,.vpc-fact strong,.chat-bubble{overflow-wrap:anywhere;word-break:break-word}
.ds-top{flex-wrap:wrap;gap:12px}
.ds-top-r{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px}
.ds-panel{min-width:0}
.adm-table td,.adm-table th{vertical-align:middle}

@media (max-width: 1100px){
  .chat-wrap{grid-template-columns:1fr!important}
  #panel-ow-appointments .appt-grid,
  #panel-cl-appointments .appt-grid,
  #panel-vet-appointments > div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
}
@media (max-width: 768px){
  .ds-stats-lux{grid-template-columns:1fr 1fr!important}
  .ds-ph{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
  .ds-ph .ds-btn-pri{width:100%;justify-content:center}
  .vpc-head{align-items:center}
  .vpc-facts{grid-template-columns:1fr 1fr}
  
  .ds-top-name{max-width:140px;overflow:hidden;text-overflow:ellipsis}
}
@media (max-width: 640px){
  .ds-top{align-items:flex-start}
  .ds-top-l{width:100%;min-width:0;gap:8px}
  .ds-top-r{width:100%;justify-content:space-between;margin-left:0}
  .ds-stats-lux{grid-template-columns:1fr!important}
  .ds-pets{grid-template-columns:1fr!important}
  .vpc-cover{height:88px}
  
  .vpc-head{display:grid;grid-template-columns:62px 1fr;gap:10px}
  .vpc-av{width:62px!important;height:62px!important}
  
  
  .vpc-facts{grid-template-columns:1fr!important}
  
  
  .vpc-card-tools{right:10px;top:10px;gap:6px}
  .vpc-icon-btn{width:36px;height:36px;border-radius:12px}
  .mobile-nav .ic i{font-size:18px}
  .chat-sidebar{order:2}
  .chat-main{order:1}
  .adm-table{min-width:640px}
}


/* === March 2026 premium pass: admin/clinic/vet dashboards === */
.dash-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,.9fr);gap:20px;padding:28px;border-radius:30px;overflow:hidden;background:linear-gradient(135deg,#0F2D62 0%,#1357B8 55%,#1EADBE 100%);box-shadow:0 24px 48px rgba(15,23,42,.16);color:#fff;margin-bottom:22px}
.dash-hero:before{content:"";position:absolute;inset:auto -60px -80px auto;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.18),transparent 65%)}
.dash-hero:after{content:"";position:absolute;left:-60px;top:-80px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.12),transparent 70%)}
.dash-hero > *{position:relative;z-index:1}
.dash-hero-kicker{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);font-size:12px;font-weight:800;letter-spacing:.03em;margin-bottom:14px}
.dash-hero h1{font-size:40px;line-height:1.02;font-weight:900;letter-spacing:-.03em;margin:0 0 10px}
.dash-hero p{font-size:15px;line-height:1.65;color:rgba(255,255,255,.86);max-width:760px;margin:0}
.dash-hero-pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.dash-hero-pills span{display:inline-flex;align-items:center;gap:8px;padding:11px 14px;border-radius:16px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);font-size:13px;font-weight:700}
.dash-hero-side{display:flex;flex-direction:column;justify-content:space-between;gap:14px;padding:22px;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.08));border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px);min-width:0}
.dash-hero-side strong{display:block;font-size:56px;line-height:.95;font-weight:900;margin-bottom:8px}
.dash-hero-side small{display:block;font-size:13px;color:rgba(255,255,255,.8);margin-bottom:14px}
.dash-hero-actions{display:flex;flex-direction:column;gap:10px}
.dash-hero-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px 16px;border-radius:16px;border:none;cursor:pointer;font:inherit;font-size:14px;font-weight:800;text-decoration:none;transition:transform .16s ease,box-shadow .16s ease}
.dash-hero-btn:hover{transform:translateY(-1px)}
.dash-hero-btn.primary{background:linear-gradient(135deg,#1F7AE0,#22B5D3);color:#fff;box-shadow:0 10px 24px rgba(31,122,224,.28)}
.dash-hero-btn.secondary{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);color:#fff}
.dash-hero{
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.14), transparent 22%),
    radial-gradient(circle at bottom left, rgba(255,255,255,.1), transparent 18%),
    linear-gradient(135deg,#082654 0%,#0F52B0 46%,#1EADBE 100%)!important;
  box-shadow:0 32px 60px rgba(15,23,42,.18)!important;
}
.dash-hero-kicker{
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.dash-hero-pills span{
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.dash-hero-side{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 20px 40px rgba(15,23,42,.14);
}
.dash-hero-btn.primary{
  box-shadow:0 16px 34px rgba(31,122,224,.34)!important;
}
.dash-hero-btn.secondary{
  background:rgba(255,255,255,.09)!important;
}
.dash-glass{background:linear-gradient(180deg,#fff,#f8fbff);border:1px solid rgba(148,163,184,.18);box-shadow:0 16px 36px rgba(15,23,42,.06);border-radius:26px}
.ds-tabs{box-shadow:0 16px 28px rgba(15,23,42,.05)}
.ds-tab{font-weight:800}
.ds-panel.active{animation:fadePanel .22s ease}
@keyframes fadePanel{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ds-card,.vet-card,.ds-addform,.ds-acc-card{border-radius:24px!important;border:1px solid rgba(148,163,184,.16)!important;box-shadow:0 16px 34px rgba(15,23,42,.05)!important}
.adm-table thead th{background:#F8FBFF}
.adm-table tbody tr:hover{background:#FBFDFF}
.slot-modal-card{background:#fff;border-radius:24px;padding:24px;width:min(420px,92vw);box-shadow:0 24px 60px rgba(15,23,42,.22);border:1px solid rgba(148,163,184,.16)}
.slot-status-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}
.slot-status-btn{padding:16px 12px;border-radius:18px;border:2px solid var(--line);background:#fff;cursor:pointer;font:inherit;text-align:left;transition:all .16s ease}
.slot-status-btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(15,23,42,.08)}
.slot-status-btn strong{display:block;font-size:15px;margin-bottom:4px}
.slot-status-btn span{display:block;font-size:12px;color:var(--ink4);line-height:1.45}
.slot-status-btn.free{border-color:#93C5FD;background:#EFF6FF;color:var(--blue)}
.slot-status-btn.busy{border-color:#FCD34D;background:#FFF7ED;color:#B45309}
.slot-status-btn.booked{border-color:#86EFAC;background:#DCFCE7;color:#15803D}
.slot-modal-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.slot-modal-actions button{flex:1}
@media (max-width: 1100px){.dash-hero{grid-template-columns:1fr}.dash-hero h1{font-size:32px}}
@media (max-width: 700px){.dash-hero{padding:18px;border-radius:24px}.dash-hero h1{font-size:26px}.dash-hero p{font-size:13px}.dash-hero-side{padding:18px;border-radius:20px}.dash-hero-side strong{font-size:42px}.dash-hero-pills span{width:100%;justify-content:flex-start}.slot-status-grid{grid-template-columns:1fr}}


/* Fixes: owner pet cards + responsive stability */
.vpc-head{grid-template-columns:84px minmax(0,1fr)!important;align-items:center!important}
.vpc-main{min-width:0!important;width:100%!important;overflow:hidden!important}
.vpc-facts{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.vpc-fact strong{white-space:normal!important;overflow-wrap:anywhere!important}
.vpc-b span{white-space:normal!important;line-height:1.25}
@media (max-width:1100px){
  .vpc-head{grid-template-columns:76px minmax(0,1fr)!important}
}
@media (max-width:760px){
  .appt-grid{grid-template-columns:1fr!important}
  #vet-hours-grid,#ow-slots{grid-template-columns:repeat(3,1fr)!important}
}
@media (max-width:520px){
  #vet-hours-grid,#ow-slots{grid-template-columns:repeat(2,1fr)!important}
  .vpc-facts{grid-template-columns:1fr!important}
}


/* --- bugfix polish v6 --- */
.vet-search-box{max-width:320px;width:100%;display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:16px;background:#fff;border:1px solid rgba(148,163,184,.18);box-shadow:0 12px 24px rgba(15,23,42,.05)}
.vet-search-box span{color:#64748B;font-size:15px}
.vet-search-inp{border:none;outline:none;background:transparent;width:100%;font:inherit;color:var(--ink)}
#vet-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.vet-card{padding:18px!important;align-items:flex-start!important;min-width:0}
.vet-card-l{min-width:0;flex:1}
.vet-card-r{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.vet-pname{font-size:20px;font-weight:800;line-height:1.1;margin-bottom:4px}
.vet-pmeta,.vet-powner{font-size:13px;line-height:1.45;overflow-wrap:anywhere}
.vet-av{width:64px!important;height:64px!important;border-radius:18px!important;overflow:hidden;flex:0 0 64px}
.slot-status-btn:disabled{opacity:.7;cursor:not-allowed;transform:none;box-shadow:none}
.slot-status-btn.noop{opacity:.82}
@media (max-width: 900px){
  #vet-grid{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .ds-ph{gap:12px;align-items:stretch!important}
  .vet-search-box{max-width:none}
  .vet-card{flex-direction:column!important}
  .vet-card-r{width:100%;justify-content:stretch}
  .vet-card-r .vet-btn{flex:1;justify-content:center}
  .mobile-nav{padding-bottom:max(10px, env(safe-area-inset-bottom))!important}
  .mobile-nav-inner{overflow-x:auto;scrollbar-width:none}
  .mobile-nav-inner::-webkit-scrollbar{display:none}
  .mob-nav-btn{min-width:74px;flex:1 0 auto}
  
  
}

/* --- hotfixes v6 --- */
.vet-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.vet-card{min-width:0;align-items:flex-start!important;padding:16px!important;border-radius:22px!important}
.vet-card-l{flex:1 1 auto;min-width:0;align-items:flex-start}
.vet-card-r{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;align-self:center;max-width:220px}
.vet-card-r .vet-btn{min-width:0}
.vet-pname,.vet-pmeta,.vet-powner{max-width:100%;overflow-wrap:anywhere;word-break:break-word}
.vet-powner{display:flex;align-items:center;gap:6px;margin-top:6px;color:var(--ink3);font-size:13px;line-height:1.35}
.vet-search{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line);background:#fff;border-radius:14px;box-shadow:0 8px 22px rgba(15,23,42,.04)}
.vet-search span{color:var(--ink4);font-size:14px;flex:0 0 auto}
.vet-search-inp{border:none!important;outline:none!important;width:100%;background:transparent;font:inherit;color:var(--ink)}
.slot-status-btn:disabled{pointer-events:none;opacity:.65}
.mobile-nav{z-index:9998}
.mobile-nav{
  background:rgba(255,255,255,.92)!important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-top:1px solid rgba(148,163,184,.18)!important;
  box-shadow:0 -14px 34px rgba(15,23,42,.08)!important;
}
.mobile-nav-inner{
  gap:6px;
  padding:6px 8px 0;
}
.mob-nav-btn{
  min-height:58px;
  border-radius:16px!important;
}
.mob-nav-btn.active{
  background:linear-gradient(180deg,#EFF6FF,#DBEAFE)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 10px 18px rgba(17,106,210,.08);
}
.mob-nav-ic-wrap .ic{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}
@media (max-width: 900px){
  .vet-grid{grid-template-columns:1fr}
  .vet-card{flex-direction:column;align-items:stretch!important}
  .vet-card-r{max-width:none;justify-content:stretch}
  .vet-card-r .vet-btn{flex:1 1 calc(50% - 4px);justify-content:center}
}
@media (max-width: 640px){
  .ds{padding-bottom:110px!important}
  .mobile-nav{padding-bottom:max(10px, env(safe-area-inset-bottom))}
  .mobile-nav-inner{overflow-x:auto;scrollbar-width:none}
  .mobile-nav-inner::-webkit-scrollbar{display:none}
  .mob-nav-btn{min-width:72px}
  .vet-card-r .vet-btn{flex:1 1 100%}
  .ds-ph{gap:10px;align-items:flex-start!important;flex-direction:column}
  .vet-search{width:100%;max-width:none!important}
}


/* --- hotfix v7 --- */
.vet-card{display:flex;justify-content:space-between;gap:14px}
.vet-card-l{display:flex;align-items:center;gap:12px;min-width:0}
.vet-card-r{align-self:center}
.vet-pname{white-space:normal;word-break:break-word}
.vet-pmeta,.vet-powner{white-space:normal;word-break:break-word}
@media (max-width: 640px){
  .vet-card-l{align-items:flex-start}
}

/* owner pet cards hotfix */
.vpc-head{grid-template-columns:88px minmax(0,1fr)!important;align-items:center!important;column-gap:14px!important}
.vpc-main{min-width:0!important;width:100%!important;overflow:hidden!important;padding-top:12px!important;position:relative;z-index:2}


.vpc-av{position:relative;z-index:3}
.edit-pet-preview{display:flex;align-items:center;gap:12px}
@media (max-width: 640px){
  .vpc-head{grid-template-columns:72px minmax(0,1fr)!important;align-items:center!important}
  .vpc-main{padding-top:8px!important}
  
}


/* hotfix v9: owner pet cards + chat icons */
.vpc-lux{overflow:hidden!important}
.vpc-head{display:grid!important;grid-template-columns:88px minmax(0,1fr)!important;align-items:end!important;column-gap:16px!important;margin-top:-26px!important;margin-bottom:16px!important}
.vpc-main{min-width:0!important;width:100%!important;overflow:visible!important;padding-top:24px!important;align-self:end!important}
.vpc-name{display:block!important;font-size:22px!important;line-height:1.18!important;margin:0 0 6px!important;word-break:break-word!important;overflow-wrap:anywhere!important}
.vpc-meta{display:block!important;font-size:13px!important;line-height:1.45!important;margin:0!important;word-break:break-word!important;overflow-wrap:anywhere!important}
.vpc-av{align-self:end!important}
@media (max-width: 900px){
  .vpc-head{grid-template-columns:74px minmax(0,1fr)!important;column-gap:12px!important;margin-top:-22px!important}
  .vpc-main{padding-top:18px!important}
  .vpc-name{font-size:19px!important}
}
@media (max-width: 640px){
  .vpc-head{grid-template-columns:64px minmax(0,1fr)!important;column-gap:10px!important;margin-top:-18px!important}
  .vpc-main{padding-top:14px!important}
  .vpc-name{font-size:17px!important}
  .vpc-meta{font-size:12px!important}
}

/* --- clinic dashboard refresh --- */
.cl-day-btn{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;padding:10px 4px;border-radius:16px;border:1px solid rgba(148,163,184,.18);background:linear-gradient(180deg,#fff,#f8fbff);cursor:pointer;font:inherit;transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;box-shadow:0 10px 24px rgba(15,23,42,.05)}
.cl-day-btn:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(15,23,42,.08)}
.cl-day-btn.is-active{background:linear-gradient(135deg,#1F7AE0,#22B5D3);border-color:transparent;box-shadow:0 14px 28px rgba(31,122,224,.24)}
.cl-day-btn.is-today:not(.is-active){border-color:rgba(34,181,211,.4);background:linear-gradient(180deg,#f0fdff,#f8fbff)}
.cl-day-name{font-size:10px;font-weight:800;letter-spacing:.04em;color:var(--ink4);text-transform:uppercase}
.cl-day-num{font-size:18px;font-weight:900;line-height:1;color:var(--ink)}
.cl-day-mon{font-size:10px;color:var(--ink4)}
.cl-day-btn.is-active .cl-day-name,.cl-day-btn.is-active .cl-day-num,.cl-day-btn.is-active .cl-day-mon{color:#fff}
.cl-slot-btn{padding:12px 8px;border:none;border-radius:16px;cursor:pointer;font:inherit;text-align:center;transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;box-shadow:0 10px 24px rgba(15,23,42,.05)}
.cl-slot-btn:hover{transform:translateY(-1px)}
.cl-slot-btn strong{display:block;font-size:14px;font-weight:900;line-height:1.1;margin-bottom:4px}
.cl-slot-btn span{display:block;font-size:11px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-slot-btn.free{background:linear-gradient(180deg,#f0f7ff,#e4f1ff);color:#0F5EC7;border:1px solid rgba(59,130,246,.22)}
.cl-slot-btn.busy{background:linear-gradient(180deg,#fff8ef,#fff1df);color:#C46A00;border:1px solid rgba(245,158,11,.28)}
.cl-slot-btn.booked{background:linear-gradient(180deg,#effcf4,#dcfce7);color:#138A46;border:1px solid rgba(22,163,74,.26)}
.cl-state-msg{grid-column:1/-1;padding:18px 14px;border-radius:18px;background:#fff;border:1px dashed rgba(148,163,184,.26);text-align:center;color:var(--ink4);font-size:13px}
.cl-state-msg.is-error{color:var(--red);background:#fff6f6}
.cl-state-msg.is-warn{color:#C46A00;background:#fff8ef}
.cl-conv-item{width:100%;display:flex;align-items:center;gap:12px;padding:12px 14px;border:none;border-bottom:1px solid var(--line-l);background:#fff;cursor:pointer;text-align:left;transition:background .16s ease}
.cl-conv-item:hover,.cl-conv-item.active{background:#f8fbff}
.cl-conv-avatar{width:38px;height:38px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#dbeafe,#e0f2fe);color:var(--blue);font-weight:900;flex:0 0 38px}
.cl-conv-main{display:block;min-width:0;flex:1}
.cl-conv-name{display:block;font-size:13px;font-weight:800;color:var(--ink);margin-bottom:3px}
.cl-conv-last{display:block;font-size:12px;color:var(--ink4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-conv-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 6px;margin-left:6px;border-radius:999px;background:var(--red);color:#fff;font-size:10px;font-weight:800}
#cl-hours-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important}
#clinic-conv-list{border-radius:20px;overflow:hidden;border:1px solid rgba(148,163,184,.14);background:#fff;box-shadow:0 14px 30px rgba(15,23,42,.05)}
#clinic-chat-msgs{background:linear-gradient(180deg,#fff,#f8fbff);border-radius:20px}
@media (max-width:760px){#cl-hours-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media (max-width:520px){#cl-hours-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.cl-slot-btn{padding:11px 6px}}


/* === April 2026 hotfix: owner cards + dashboard panel stability === */
.vpc-body{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:16px!important;margin-bottom:0!important;min-width:0!important}
.vpc-head{align-items:end!important}
.vpc-main{display:block!important;min-width:0!important;width:100%!important}
.vpc-name,.vpc-meta,.vpc-fact strong{writing-mode:horizontal-tb!important}
.vpc-acts{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;width:100%!important}
.vpc-b{width:100%!important;min-width:0!important}
.vpc-b span{white-space:normal!important;overflow-wrap:anywhere!important}
#panel-ow-appointments .ds-ph, #panel-ow-chat .ds-ph, #panel-cl-appointments .ds-ph, #panel-cl-chat .ds-ph{margin-top:0!important;padding-top:0!important}
#panel-ow-appointments, #panel-ow-chat, #panel-cl-appointments, #panel-cl-chat{margin-top:0!important;padding-top:0!important}
@media (max-width: 900px){.vpc-acts{grid-template-columns:1fr!important}}

/* === owner pet cards comfort pass === */
.ds-pets{
  align-items:start!important;
  justify-items:start!important;
}
.ds-pets .vpc-lux{
  width:100%!important;
  max-width:430px!important;
}
.vpc-body{
  padding:0 18px 18px!important;
}
.vpc-head{
  grid-template-columns:96px minmax(0,1fr)!important;
  column-gap:18px!important;
  margin-top:-20px!important;
  margin-bottom:18px!important;
}
.vpc-av{
  width:96px!important;
  height:96px!important;
  border-radius:26px!important;
}
.vpc-main{
  padding-top:28px!important;
}
.vpc-name{
  font-size:32px!important;
  line-height:1.05!important;
  margin-bottom:8px!important;
}
.vpc-meta{
  font-size:15px!important;
}
.vpc-facts{
  gap:12px!important;
  margin-bottom:18px!important;
}
.vpc-fact{
  padding:14px!important;
  border-radius:18px!important;
}
.vpc-fact strong{
  font-size:15px!important;
  line-height:1.4!important;
}
.vpc-acts{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
}
.vpc-b{
  min-height:46px!important;
  padding:10px 12px!important;
  border-radius:12px!important;
  font-size:13px!important;
  gap:8px!important;
}
.vpc-b i{
  font-size:14px!important;
}
@media (max-width: 1200px){
  .ds-pets .vpc-lux{max-width:400px!important}
  .vpc-head{grid-template-columns:84px minmax(0,1fr)!important}
  .vpc-av{width:84px!important;height:84px!important}
  .vpc-name{font-size:26px!important}
}
@media (max-width: 640px){
  .ds-pets .vpc-lux{max-width:none!important}
  .vpc-body{padding:0 14px 14px!important}
  .vpc-head{grid-template-columns:72px minmax(0,1fr)!important;column-gap:12px!important;margin-top:-16px!important}
  .vpc-av{width:72px!important;height:72px!important;border-radius:22px!important}
  .vpc-main{padding-top:18px!important}
  .vpc-name{font-size:22px!important}
  .vpc-meta{font-size:13px!important}
  .vpc-facts{grid-template-columns:1fr!important}
  .vpc-acts{grid-template-columns:1fr!important}
}

/* Owner dashboard hotfix v4 */
.clinic-search-results{display:flex;flex-direction:column;gap:12px;margin-top:8px}
#panel-ow-clinics .ds-card{padding:22px 24px!important}
#panel-ow-clinics .ds-card > div[style*="display:flex;gap:8px"]{margin-bottom:18px!important}
#panel-ow-clinics .vet-card{margin-bottom:0!important}
#panel-ow-clinics .vet-pmeta{margin-top:4px;line-height:1.5}
#panel-ow-clinics .vet-card-r{align-self:center}
.owner-chat-wrap{grid-template-columns:300px minmax(0,1fr)!important;gap:16px!important;min-height:560px}
#panel-ow-chat .ds-ph{margin-bottom:12px}
#panel-ow-chat .chat-sidebar,
#panel-ow-chat .chat-main{border-radius:24px!important;overflow:hidden}
#panel-ow-chat .chat-sidebar-hd,
#panel-ow-chat .chat-main-hd{padding:16px 18px!important}
#panel-ow-chat .chat-msgs{padding:20px!important;min-height:380px}
#panel-ow-chat .chat-conv-item{padding:14px 16px!important}
#panel-ow-chat .chat-input-wrap{padding:14px!important;border-top:1px solid var(--line)}
#panel-ow-chat .chat-input-wrap input{min-height:46px}
#panel-ow-appointments .ds-card{padding:22px 24px!important}
#panel-ow-appointments #ow-week-nav{margin-top:4px}
#panel-ow-appointments #ow-days-row{gap:8px!important;margin-bottom:18px!important}
#panel-ow-appointments #ow-slots{gap:10px!important;margin-top:8px}
#panel-ow-appointments #my-appts > div{padding-left:16px!important;padding-right:16px!important}
@media (max-width: 900px){
  .owner-chat-wrap{grid-template-columns:1fr!important;min-height:auto}
  #panel-ow-chat .chat-msgs{min-height:280px}
}


/* mobile-ready polish */
@media (max-width: 980px){
  .dash-hero{grid-template-columns:1fr !important;gap:18px !important;padding:24px !important;border-radius:28px !important}
  .dash-hero-side{width:100% !important}
  .ds-stats,.ds-stats-lux{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:12px !important}
  .ds-tabs{overflow:auto hidden;gap:10px !important;padding:10px !important;scrollbar-width:none}
  .ds-tabs::-webkit-scrollbar{display:none}
  .ds-tab{white-space:nowrap;flex:0 0 auto}
  .ds-ph{gap:12px !important;flex-direction:column;align-items:stretch !important}
  .chat-wrap{grid-template-columns:1fr !important;min-height:unset !important}
  .chat-sidebar{min-height:220px}
  .chat-main{min-height:420px}
  .vet-grid,.ow-pets-grid,.clinic-cards-grid{grid-template-columns:1fr !important}
}
@media (max-width: 768px){
  .ds{padding:14px 14px 92px !important}
  .ds-top{flex-direction:column;align-items:flex-start !important;gap:14px !important}
  .ds-top-r{width:100%;justify-content:space-between}
  .dash-hero h1{font-size:clamp(28px,8vw,42px) !important;line-height:1.05 !important}
  .dash-hero-pills{gap:8px !important}
  .dash-hero-pills span{width:100%;justify-content:center}
  .dash-hero-actions{grid-template-columns:1fr !important}
  .ds-stats,.ds-stats-lux{grid-template-columns:1fr !important}
  .ds-card, .ow-book-layout > *, .vet-grid + *{border-radius:22px !important}
  #ow-book-layout, .ow-book-layout, .owner-book-grid, .vet-schedule-grid{grid-template-columns:1fr !important}
  #ow-days-row, #vet-week-days, #cl-week-days{grid-template-columns:repeat(7,minmax(54px,1fr)) !important;overflow-x:auto}
  #ow-slots, #vet-hours-grid, #cl-hours-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .appt-row{flex-direction:column;align-items:flex-start !important}
  .adm-table{min-width:720px}
}
@media (max-width: 520px){
  .ds{padding-inline:12px !important}
  .dash-hero{padding:18px !important}
  .ds-stat{padding:18px !important;min-height:auto !important}
  .vet-card,.pet-card,.clinic-row{padding:14px !important}
  .vet-card-l,.vet-card-r{width:100%}
  .vet-card-r{justify-content:stretch !important;display:grid !important;grid-template-columns:1fr 1fr;gap:8px !important}
  .vet-btn,.ds-btn-pri,.ds-btn-ghost,.ds-btn-sm{min-height:44px}
  .chat-input-wrap{padding:10px !important}
  .chat-input-wrap input{min-height:44px}
}

/* Notifications panel */
.notif-fab{
  position:fixed;
  right:18px;
  bottom:calc(18px + env(safe-area-inset-bottom, 0px));
  z-index:9997;
  width:56px;
  height:56px;
  border:none;
  border-radius:18px;
  background:linear-gradient(135deg,#116AD2,#1EADBE);
  color:#fff;
  box-shadow:0 18px 36px rgba(17,106,210,.28);
  display:grid;
  place-items:center;
  cursor:pointer;
  font-size:20px;
}
.notif-fab-badge{
  position:absolute;
  top:-4px;
  right:-4px;
  min-width:22px;
  height:22px;
  padding:0 6px;
  border-radius:999px;
  background:#DC2626;
  color:#fff;
  font-size:11px;
  font-weight:800;
  display:grid;
  place-items:center;
  border:2px solid #fff;
}
.notif-panel{
  position:fixed;
  inset:0;
  z-index:9996;
  background:rgba(15,23,42,.24);
  display:flex;
  justify-content:flex-end;
  padding:18px;
  pointer-events:none;
}
.notif-panel.open{pointer-events:auto}
.notif-panel[hidden]{
  display:none!important;
}
.notif-panel-card{
  width:min(100%,420px);
  height:min(100%,680px);
  background:#fff;
  border-radius:28px;
  box-shadow:0 26px 56px rgba(15,23,42,.18);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  transform:translateX(22px);
  opacity:0;
  transition:transform .18s ease,opacity .18s ease;
}
.notif-panel.open .notif-panel-card{transform:translateX(0);opacity:1}
.notif-panel-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  padding:18px 18px 14px;
  border-bottom:1px solid var(--line);
}
.notif-panel-head strong{display:block;font-size:18px;color:var(--ink)}
.notif-panel-head span{display:block;font-size:12px;color:var(--ink4);margin-top:4px}
.notif-panel-actions{display:flex;align-items:center;gap:8px}
.notif-link-btn,.notif-close-btn{
  appearance:none;
  border:none;
  background:none;
  cursor:pointer;
  font:inherit;
}
.notif-link-btn{font-size:12px;font-weight:700;color:var(--blue)}
.notif-close-btn{
  width:36px;
  height:36px;
  border-radius:12px;
  background:#F3F6FB;
  color:var(--ink4);
  font-size:16px;
}
.notif-list{padding:10px;overflow:auto;display:grid;gap:8px}
.notif-item{
  appearance:none;
  width:100%;
  text-align:left;
  border:1px solid rgba(17,106,210,.08);
  background:#F8FBFF;
  border-radius:18px;
  padding:14px;
  cursor:pointer;
}
.notif-item.is-read{background:#fff;border-color:var(--line)}
.notif-item-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
  margin-bottom:6px;
}
.notif-item-head strong{font-size:13px;color:var(--ink)}
.notif-item-head span{font-size:11px;color:var(--ink5);white-space:nowrap}
.notif-item-body{font-size:12px;line-height:1.55;color:var(--ink3)}
.notif-empty{padding:24px 14px;text-align:center;color:var(--ink4);font-size:13px}
body.has-mobile-nav .notif-fab{
  bottom:calc(92px + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 700px){
  .notif-panel{
    align-items:flex-end;
    padding:0;
    background:rgba(15,23,42,.3);
  }
  .notif-panel-card{
    width:100%;
    height:min(78vh,680px);
    border-radius:24px 24px 0 0;
  }
  .notif-fab{right:14px}
}

/* PWA install banner */
.pwa-install-banner{
  position:fixed;
  left:16px;
  right:16px;
  bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  z-index:1200;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border-radius:22px;
  background:rgba(15,23,42,.96);
  color:#fff;
  box-shadow:0 22px 48px rgba(15,23,42,.28);
  backdrop-filter:blur(10px);
}
.pwa-install-banner[hidden]{display:none!important}
.pwa-install-copy{display:grid;gap:4px;min-width:0}
.pwa-install-copy strong{font-size:14px;font-weight:900}
.pwa-install-copy span{font-size:12px;line-height:1.45;color:rgba(255,255,255,.78)}
.pwa-install-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.pwa-install-btn,.pwa-dismiss-btn{
  appearance:none;
  border:none;
  cursor:pointer;
  font:inherit;
}
.pwa-install-btn{
  min-height:42px;
  padding:0 16px;
  border-radius:14px;
  background:linear-gradient(135deg,#1F7AE0,#22B5D3);
  color:#fff;
  font-weight:800;
}
.pwa-dismiss-btn{
  width:40px;
  height:40px;
  border-radius:12px;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:16px;
}
body.has-mobile-nav .pwa-install-banner{
  bottom:calc(90px + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 680px){
  .pwa-install-banner{
    left:12px;
    right:12px;
    padding:14px;
    border-radius:20px;
    flex-direction:column;
    align-items:stretch;
  }
  .pwa-install-actions{
    justify-content:space-between;
  }
  .pwa-install-btn{
    flex:1;
  }
}

/* ── DASHBOARD POLISH LAYER ──────────────────────────────── */
body.dash-body{
  background:
    radial-gradient(circle at top left, rgba(17,106,210,.08), transparent 22%),
    radial-gradient(circle at top right, rgba(30,173,190,.07), transparent 18%),
    linear-gradient(180deg, #F4F8FC 0%, #F7FAFD 30%, #F5F7FA 100%);
}
body.dash-body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.52), rgba(255,255,255,.52)),
    radial-gradient(circle at 1px 1px, rgba(148,163,184,.12) 1px, transparent 0);
  background-size:auto, 24px 24px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.55), transparent 72%);
  z-index:0;
}
.ds{
  position:relative;
  z-index:1;
}
.ds-top-premium{
  border-bottom:none!important;
}
.ds-top-premium::after{
  content:"";
  display:block;
  width:100%;
  height:1px;
  margin-top:14px;
  background:linear-gradient(90deg, rgba(148,163,184,0), rgba(148,163,184,.34), rgba(148,163,184,0));
}
.ds-panel{
  position:relative;
}
.ds-panel.active{
  animation:dashPanelIn .28s ease;
}
@keyframes dashPanelIn{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}
.ds-card,
.vet-card,
.ds-addform,
.ds-acc-card,
.chat-main,
.chat-sidebar,
.modal-box{
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.ds-card,
.vet-card,
.ds-addform,
.ds-acc-card{
  position:relative;
  overflow:hidden;
}
.ds-card::before,
.vet-card::before,
.ds-addform::before,
.ds-acc-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:56px;
  background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,0));
  pointer-events:none;
}
.ds-card:hover,
.vet-card:hover,
.ds-addform:hover,
.ds-acc-card:hover{
  transform:translateY(-2px);
  box-shadow:0 24px 44px rgba(15,23,42,.08)!important;
}
.ds-ph{
  margin-bottom:18px;
}
.ds-ptitle{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:18px;
  letter-spacing:-.02em;
}
.ds-ptitle i{
  width:38px;
  height:38px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#EFF6FF,#DBEAFE);
  color:var(--blue);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}
.ds-card-title{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  letter-spacing:.12em;
}
.ds-card-title::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg, rgba(17,106,210,.18), rgba(229,231,235,.15));
}
.ds-fi,
.chat-input-wrap input{
  border-color:#D9E3F1;
  background:linear-gradient(180deg,#FCFDFE,#F7FAFD);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
  transition:border-color .16s, box-shadow .16s, background .16s, transform .16s;
}
.ds-fi:hover,
.chat-input-wrap input:hover{
  border-color:#C4D6EC;
}
.ds-fi:focus,
.chat-input-wrap input:focus{
  transform:translateY(-1px);
  box-shadow:0 0 0 4px rgba(17,106,210,.08), 0 14px 24px rgba(17,106,210,.08);
}
.ds-fl{
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#64748B;
}
.ds-btn-pri,
.ds-btn-ghost,
.ds-btn-sm,
.vet-btn,
.vpc-b,
.notif-link-btn,
.notif-close-btn{
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, opacity .16s ease;
}
.ds-btn-pri:hover,
.vpc-b:hover,
.vet-btn-pri:hover,
.prem-btn-pay:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 30px rgba(17,106,210,.18);
}
.ds-btn-ghost:hover,
.vet-btn:hover,
.notif-link-btn:hover,
.notif-close-btn:hover{
  transform:translateY(-1px);
}
.ds-tab{
  position:relative;
  overflow:hidden;
}
.ds-tab::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(17,106,210,.12), rgba(30,173,190,.1));
  opacity:0;
  transition:opacity .16s ease;
}
.ds-tab > *{
  position:relative;
  z-index:1;
}
.ds-tab:not(.active):hover::before{
  opacity:1;
}
.ds-tab.active::after{
  content:"";
  position:absolute;
  inset:auto 12px 8px;
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.26);
  filter:blur(10px);
}
.ds-cnt{
  box-shadow:0 8px 18px rgba(17,106,210,.12);
}
.chat-sidebar{
  background:linear-gradient(180deg,#FFFFFF 0%, #F8FBFF 100%);
}
.chat-main{
  background:linear-gradient(180deg,#FFFFFF 0%, #FBFDFF 100%);
}
.chat-main-hd{
  background:linear-gradient(180deg,#F8FBFF,#F3F8FF);
  font-weight:700;
}
.chat-msgs{
  background:
    radial-gradient(circle at top right, rgba(17,106,210,.05), transparent 20%),
    linear-gradient(180deg,#F7FAFD 0%, #F4F8FB 100%);
}
.chat-bubble{
  box-shadow:0 10px 22px rgba(15,23,42,.06);
}
.chat-msg.me .chat-bubble{
  box-shadow:0 14px 28px rgba(17,106,210,.22);
}
.notif-fab{
  box-shadow:0 22px 38px rgba(15,23,42,.18), 0 10px 18px rgba(17,106,210,.16);
}
.notif-panel-card{
  background:linear-gradient(180deg,#FFFFFF 0%, #F9FBFE 100%);
}
.notif-item{
  box-shadow:0 10px 18px rgba(15,23,42,.04);
}
.notif-item:hover{
  transform:translateY(-1px);
  border-color:rgba(17,106,210,.2);
}
body.notif-open{
  overflow:hidden;
}
.ds-upcoming{
  padding:12px 2px;
}
.ds-up-date{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 10px 18px rgba(17,106,210,.08);
}
.prem-plan-card,
.prem-pay-section,
.prem-card-section,
.prem-active-wrap{
  box-shadow:0 18px 36px rgba(15,23,42,.07);
}
@media (max-width: 760px){
  .ds-ptitle{
    font-size:16px;
  }
  .ds-ptitle i{
    width:34px;
    height:34px;
    border-radius:12px;
    font-size:14px;
  }
  .ds-card::before,
  .vet-card::before,
  .ds-addform::before,
  .ds-acc-card::before{
    height:42px;
  }
}

/* ===== Owner luxury free-plan expansion ===== */
.ow-overview-shell{
  margin:6px 0 24px;
}
.ow-sticky-tabs{
  position:sticky;
  top:10px;
  z-index:40;
}
.ow-overview-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
}
.ow-overview-kicker{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(17,106,210,.08);
  color:var(--blue);
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.ow-overview-head h2{
  margin:10px 0 6px;
  font-size:32px;
  line-height:1.02;
  letter-spacing:-.04em;
  color:var(--ink);
}
.ow-overview-head p{
  max-width:760px;
  color:var(--ink4);
  font-size:14px;
  line-height:1.7;
}
.ow-lux-grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:16px;
  margin:0 0 18px;
}
.ow-lux-grid-secondary{
  grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,.9fr);
}
.ow-lux-card{
  position:relative;
  overflow:hidden;
  padding:22px;
  border-radius:28px;
  border:1px solid rgba(148,163,184,.15);
  background:
    radial-gradient(circle at top right, rgba(17,106,210,.07), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,250,254,.96));
  box-shadow:0 24px 48px rgba(15,23,42,.08);
}
.ow-lux-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:68px;
  background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,0));
  pointer-events:none;
}
.ow-lux-head{
  position:relative;
  z-index:1;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}
.ow-lux-kicker{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(17,106,210,.08);
  color:var(--blue);
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.ow-lux-head h3{
  margin:10px 0 0;
  font-size:24px;
  line-height:1.08;
  letter-spacing:-.03em;
  color:var(--ink);
}
.ow-lux-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 12px;
  border-radius:14px;
  background:linear-gradient(135deg,#EFF6FF,#E0F2FE);
  color:var(--blue);
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}
.ow-agenda-list,.ow-timeline-list,.ow-checklist{display:grid;gap:12px;position:relative;z-index:1}
.ow-agenda-item,.ow-timeline-item{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:14px 16px;
  border-radius:20px;
  background:rgba(255,255,255,.7);
  border:1px solid rgba(226,232,240,.9);
  box-shadow:0 12px 24px rgba(15,23,42,.04);
}
.ow-agenda-icon,.ow-timeline-dot{
  width:44px;
  height:44px;
  border-radius:16px;
  display:grid;
  place-items:center;
  font-size:16px;
  color:#fff;
  background:linear-gradient(135deg,#116AD2,#1EADBE);
  box-shadow:0 12px 20px rgba(17,106,210,.18);
}
.ow-agenda-icon.is-amber{background:linear-gradient(135deg,#F59E0B,#D97706)}
.ow-agenda-copy,.ow-timeline-copy{min-width:0}
.ow-agenda-copy strong,.ow-timeline-copy strong{
  display:block;
  font-size:14px;
  font-weight:800;
  color:var(--ink);
  margin-bottom:3px;
}
.ow-agenda-copy span,.ow-timeline-copy span{
  display:block;
  font-size:12px;
  line-height:1.55;
  color:var(--ink4);
  overflow-wrap:anywhere;
}
.ow-agenda-meta,.ow-timeline-item time{
  font-size:12px;
  font-weight:800;
  color:var(--ink3);
  white-space:nowrap;
}
.ow-action-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.ow-action-btn{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  min-height:132px;
  padding:18px;
  border:none;
  border-radius:22px;
  cursor:pointer;
  text-align:left;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.2), transparent 30%),
    linear-gradient(135deg,#0C4AA0 0%,#116AD2 56%,#1EADBE 100%);
  color:#fff;
  box-shadow:0 20px 36px rgba(17,106,210,.18);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.ow-action-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 28px 48px rgba(17,106,210,.24);
}
.ow-action-btn i{font-size:18px}
.ow-action-btn strong{font-size:15px;font-weight:800;line-height:1.2}
.ow-action-btn span{font-size:12px;line-height:1.55;color:rgba(255,255,255,.86)}
.ow-progress-bar{
  height:14px;
  border-radius:999px;
  background:#EAF1FB;
  overflow:hidden;
  margin-bottom:14px;
}
.ow-progress-bar span{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(135deg,#116AD2,#1EADBE);
  box-shadow:0 10px 22px rgba(17,106,210,.22);
}
.ow-check-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:16px;
  background:#F8FBFF;
  border:1px solid rgba(217,227,241,.95);
  color:var(--ink3);
  font-size:13px;
  font-weight:700;
}
.ow-check-item i{color:#94A3B8}
.ow-check-item.is-done{
  background:linear-gradient(180deg,#EFFCF6,#F7FFFB);
  border-color:rgba(34,197,94,.2);
  color:#0F5132;
}
.ow-check-item.is-done i{color:#16A34A}
.ow-upgrade-card{
  background:
    radial-gradient(circle at top right, rgba(245,158,11,.12), transparent 24%),
    linear-gradient(135deg,#0B1E42 0%,#0F66CF 42%,#1EADBE 100%);
  color:#fff;
}
.ow-upgrade-card .ow-lux-kicker{
  background:rgba(255,255,255,.12);
  color:#fff;
}
.ow-upgrade-card .ow-lux-head h3{color:#fff}
.ow-upgrade-copy{
  position:relative;
  z-index:1;
  color:rgba(255,255,255,.86);
  font-size:13px;
  line-height:1.7;
  margin-bottom:14px;
}
.ow-upgrade-points{
  position:relative;
  z-index:1;
  display:grid;
  gap:10px;
  margin-bottom:16px;
}
.ow-upgrade-points span{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:16px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.14);
  font-size:12px;
  font-weight:700;
}
.ow-upgrade-btn{
  position:relative;
  z-index:1;
  width:100%;
  justify-content:center;
  min-height:48px;
}
.ow-empty-state{
  display:grid;
  justify-items:center;
  gap:8px;
  padding:18px;
  border-radius:22px;
  background:#F8FBFF;
  border:1px dashed rgba(148,163,184,.34);
  text-align:center;
}
.ow-empty-state.slim{padding:14px}
.ow-empty-icon{
  width:52px;
  height:52px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#EFF6FF,#DBEAFE);
  color:var(--blue);
  font-size:20px;
}
.ow-empty-state strong{font-size:15px;color:var(--ink)}
.ow-empty-state span{font-size:12px;line-height:1.6;color:var(--ink4);max-width:420px}
.pet-mini-timeline{
  display:grid;
  gap:10px;
  margin-bottom:16px;
  padding:14px;
  border-radius:20px;
  background:linear-gradient(180deg,#F8FBFF,#FFFFFF);
  border:1px solid rgba(217,227,241,.95);
}
.pet-mini-timeline-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.pet-mini-timeline-head span{
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#64748B;
}
.pet-mini-link{
  appearance:none;
  border:none;
  background:none;
  cursor:pointer;
  color:var(--blue);
  font:inherit;
  font-size:12px;
  font-weight:800;
}
.pet-mini-events{display:grid;gap:8px}
.pet-mini-event{
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-radius:16px;
  background:#fff;
  border:1px solid rgba(226,232,240,.9);
}
.pet-mini-event-icon{
  width:36px;
  height:36px;
  border-radius:14px;
  display:grid;
  place-items:center;
  color:#fff;
  background:linear-gradient(135deg,#116AD2,#1EADBE);
  box-shadow:0 10px 18px rgba(17,106,210,.16);
}
.pet-mini-event-copy strong{
  display:block;
  font-size:13px;
  font-weight:800;
  color:var(--ink);
  margin-bottom:2px;
  overflow-wrap:anywhere;
}
.pet-mini-event-copy span{
  display:block;
  font-size:11px;
  line-height:1.5;
  color:var(--ink4);
}
.pet-mini-empty{
  padding:10px 2px 2px;
  font-size:12px;
  color:var(--ink4);
}

@media (max-width: 1180px){
  .ow-lux-grid,.ow-lux-grid-secondary{grid-template-columns:1fr}
}
@media (max-width: 760px){
  .ow-sticky-tabs{top:8px}
  .ow-overview-head h2{font-size:24px}
  .ow-overview-head p{font-size:13px}
  .ow-lux-card{padding:18px;border-radius:24px}
  .ow-lux-head h3{font-size:20px}
  .ow-agenda-item,.ow-timeline-item{grid-template-columns:auto minmax(0,1fr);align-items:flex-start}
  .ow-agenda-meta,.ow-timeline-item time{grid-column:2}
  .ow-action-grid{grid-template-columns:1fr}
}

/* ===== Auth premium redesign ===== */
body.auth-body{
  background:
    radial-gradient(circle at top left, rgba(17,106,210,.18), transparent 24%),
    radial-gradient(circle at bottom right, rgba(30,173,190,.16), transparent 22%),
    linear-gradient(135deg, #08152D 0%, #0A1E43 44%, #0A3060 100%);
}
.vx-auth{
  grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);
  min-height:100vh;
}
.vx-left{
  padding:52px;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.08), transparent 18%),
    radial-gradient(circle at bottom left, rgba(255,255,255,.06), transparent 24%),
    linear-gradient(160deg, #08152D 0%, #0A1E43 54%, #0A3060 100%);
}
.vx-content{max-width:560px}
.vx-headline{font-size:54px;line-height:.98;margin-bottom:18px}
.vx-sub{font-size:15px;max-width:520px;color:rgba(255,255,255,.76);margin-bottom:26px}
.vx-signature-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:14px;
  margin:0 0 22px;
}
.vx-signature-card{
  position:relative;
  overflow:hidden;
  padding:18px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  box-shadow:0 24px 50px rgba(2,6,23,.26);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.vx-signature-card-main{
  grid-row:span 2;
  min-height:258px;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.16), transparent 24%),
    linear-gradient(135deg, rgba(17,106,210,.34), rgba(30,173,190,.2));
}
.vx-signature-top{
  display:grid;
  gap:12px;
  margin-bottom:18px;
}
.vx-signature-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:max-content;
  padding:9px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.vx-signature-card strong{
  display:block;
  font-size:24px;
  line-height:1.08;
  font-weight:900;
  color:#fff;
  letter-spacing:-.03em;
}
.vx-signature-card p,
.vx-signature-card span{
  display:block;
  color:rgba(255,255,255,.78);
  font-size:13px;
  line-height:1.7;
}
.vx-signature-stats{
  display:grid;
  gap:10px;
  margin-top:18px;
}
.vx-signature-stats span{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:18px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.12);
  font-weight:700;
}
.vx-signature-icon{
  width:54px;
  height:54px;
  border-radius:18px;
  display:grid;
  place-items:center;
  margin-bottom:16px;
  font-size:20px;
  color:#fff;
  background:linear-gradient(135deg,#116AD2,#1EADBE);
  box-shadow:0 14px 24px rgba(17,106,210,.26);
}
.vx-proof{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:0 0 24px;
}
.vx-proof-item{
  padding:14px 16px;
  border-radius:20px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(10px);
}
.vx-proof-item strong{
  display:block;
  color:#fff;
  font-size:22px;
  font-weight:900;
  margin-bottom:4px;
}
.vx-proof-item span{
  display:block;
  color:rgba(255,255,255,.7);
  font-size:11px;
  line-height:1.5;
}
.vx-right{
  padding:38px 34px;
  align-items:center;
  background:
    radial-gradient(circle at top right, rgba(17,106,210,.1), transparent 30%),
    linear-gradient(180deg, rgba(248,251,255,.98) 0%, rgba(255,255,255,1) 100%);
}
.vx-form-box{
  max-width:520px;
  padding:34px;
  border-radius:36px;
  background:rgba(255,255,255,.88);
  box-shadow:0 34px 80px rgba(15,23,42,.12);
}
.vx-form-intro{
  position:relative;
  z-index:1;
  display:grid;
  gap:6px;
  margin-bottom:18px;
}
.vx-form-intro strong{
  display:block;
  color:var(--ink);
  font-size:28px;
  line-height:1.05;
  font-weight:900;
  letter-spacing:-.03em;
}
.vx-form-intro span{
  display:block;
  color:var(--ink4);
  font-size:13px;
  line-height:1.65;
}
.vx-tabs{padding:7px;border-radius:20px;margin-bottom:18px}
.vx-tab{padding:13px 10px;border-radius:14px;font-size:13px;font-weight:800}
.vx-tab.active{box-shadow:0 12px 24px rgba(17,106,210,.12)}
.vx-panel{
  background:rgba(255,255,255,.86);
  border:1px solid rgba(17,106,210,.08);
  border-radius:28px;
  box-shadow:0 16px 34px rgba(15,23,42,.06);
  padding:18px;
}
.vx-panel-head{
  display:grid;
  gap:4px;
  margin-bottom:14px;
}
.vx-panel-head strong{
  display:block;
  color:var(--ink);
  font-size:17px;
  font-weight:900;
}
.vx-panel-head span{
  display:block;
  color:var(--ink4);
  font-size:12px;
  line-height:1.55;
}
.vx-field{margin-bottom:15px}
.vx-lbl{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#64748B}
.vx-inp{
  min-height:54px;
  border-radius:18px;
  border-color:#D6E2F2;
  background:linear-gradient(180deg,#FCFDFE,#F7FAFD);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
}
.vx-eye{
  right:10px;
  width:36px;
  height:36px;
  border-radius:12px;
  color:#64748B;
}
.vx-btn{
  min-height:54px;
  border-radius:18px;
  font-size:14px;
  font-weight:800;
}
.vx-clinic-cta{
  margin-top:14px;
  border-radius:22px;
  padding:16px;
}
.vx-mobile-stage-clean{min-height:0}
.vx-mobile-hero-clean{
  min-height:210px;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.16), transparent 22%),
    linear-gradient(135deg,#0B1E42 0%,#116AD2 52%,#1EADBE 100%);
}
.vx-mobile-hero-clean::before{
  background:linear-gradient(180deg, rgba(7,18,37,.06) 0%, rgba(7,18,37,.2) 45%, rgba(7,18,37,.52) 100%);
}
@media (max-width: 1180px){
  .vx-headline{font-size:46px}
  .vx-proof{grid-template-columns:1fr}
}
@media (max-width: 980px){
  .vx-auth{grid-template-columns:1fr}
  .vx-left{display:none}
  .vx-right{padding:24px 16px;align-items:flex-start}
  .vx-form-box{max-width:100%;padding:24px;border-radius:30px}
  .vx-mobile-pets{display:block;margin-bottom:18px}
  .vx-form-intro strong{font-size:24px}
}
@media (max-width: 560px){
  body.auth-body{
    background:
      linear-gradient(180deg, #EAF3FF 0%, #F7FBFF 26%, #FFFFFF 60%);
  }
  .vx-right{padding:0;background:transparent}
  .vx-form-box{
    min-height:100dvh;
    border-radius:0;
    padding:18px 14px 28px;
    box-shadow:none;
    border:none;
    background:transparent;
    backdrop-filter:none;
  }
  .vx-form-box::before{display:none}
  .vx-form-intro{padding:0 4px}
  .vx-form-intro strong{font-size:22px}
  .vx-mobile-pets{display:block;margin-bottom:18px}
  .vx-mobile-hero-clean{min-height:190px;border-radius:26px;box-shadow:0 24px 46px rgba(15,23,42,.14)}
  .vx-mobile-overlay span{max-width:100%}
  .vx-tabs{
    margin-bottom:16px;
    border-radius:18px;
    background:rgba(255,255,255,.94);
    box-shadow:0 12px 26px rgba(15,23,42,.08);
  }
  .vx-panel{
    border-radius:26px;
    padding:16px;
    background:#fff;
  }
  .vx-inp{min-height:52px;font-size:16px}
}

/* Clinic weekly hours manager */
.clinic-hours-grid{
  display:grid;
  gap:12px;
}
.clinic-hours-row{
  display:grid;
  grid-template-columns:minmax(140px,.9fr) auto minmax(220px,1fr);
  gap:14px;
  align-items:center;
  padding:14px 16px;
  border-radius:18px;
  background:linear-gradient(180deg,#FFFFFF,#F8FBFF);
  border:1px solid rgba(148,163,184,.16);
}
.clinic-hours-row.is-closed{
  background:linear-gradient(180deg,#FAFBFC,#F4F6F8);
  opacity:.92;
}
.clinic-hours-day strong{
  display:block;
  font-size:14px;
  font-weight:800;
  color:var(--ink);
  margin-bottom:3px;
}
.clinic-hours-day span{
  display:block;
  font-size:12px;
  color:var(--ink4);
}
.clinic-hours-switch{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  font-weight:700;
  color:var(--ink3);
}
.clinic-hours-switch input{
  width:18px;
  height:18px;
  accent-color:var(--blue);
}
.clinic-hours-times{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:10px;
  align-items:center;
}
.clinic-hours-times input{
  width:100%;
  min-height:44px;
  padding:0 12px;
  border:1.5px solid #D9E3F1;
  border-radius:14px;
  background:#fff;
  color:var(--ink);
  font:inherit;
}
.clinic-hours-times span{
  font-size:12px;
  font-weight:700;
  color:var(--ink4);
}
.clinic-hours-loading{
  padding:18px;
  text-align:center;
  color:var(--ink4);
  font-size:13px;
  border-radius:18px;
  background:#F8FBFF;
  border:1px dashed rgba(148,163,184,.28);
}
@media (max-width: 820px){
  .clinic-hours-row{
    grid-template-columns:1fr;
    gap:10px;
  }
}

.clinic-ex-grid{
  display:grid;
  grid-template-columns:1.2fr auto 1fr 1fr;
  gap:12px;
  align-items:end;
}
.clinic-ex-toggle{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:46px;
  padding:0 2px 10px;
  font-size:12px;
  font-weight:700;
  color:var(--ink3);
}
.clinic-ex-toggle input{
  width:18px;
  height:18px;
  accent-color:var(--blue);
}
.clinic-ex-list{
  display:grid;
  gap:10px;
  margin-top:16px;
}
.clinic-ex-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.18);
  background:linear-gradient(180deg,#FFFFFF,#F8FBFF);
}
.clinic-ex-item strong{
  display:block;
  font-size:14px;
  font-weight:800;
  color:var(--ink);
  margin-bottom:4px;
}
.clinic-ex-item span{
  display:block;
  font-size:12px;
  color:var(--ink4);
}

.ow-family-card{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at top right, rgba(17,106,210,.09), transparent 26%),
    linear-gradient(180deg,#FFFFFF 0%,#F8FBFF 100%);
}
.ow-family-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);
  gap:18px;
  align-items:start;
}
.ow-family-intro{
  display:grid;
  gap:6px;
  margin-bottom:16px;
}
.ow-family-intro strong{
  display:block;
  font-size:19px;
  line-height:1.1;
  font-weight:900;
  color:var(--ink);
}
.ow-family-intro span{
  display:block;
  font-size:13px;
  line-height:1.7;
  color:var(--ink4);
  max-width:56ch;
}
.ow-family-form{
  display:grid;
  gap:14px;
  padding:18px;
  border-radius:24px;
  background:linear-gradient(180deg,#FFFFFF,#F7FBFF);
  border:1px solid rgba(217,227,241,.95);
  box-shadow:0 16px 32px rgba(15,23,42,.05);
}
.ow-family-form .ds-btn-pri{
  width:100%;
  justify-content:center;
  min-height:48px;
}
.ow-family-divider{
  height:1px;
  margin:16px 0;
  background:linear-gradient(90deg, transparent, rgba(148,163,184,.24), transparent);
}
.ow-family-code-box{
  display:grid;
  gap:6px;
  padding:14px 16px;
  border-radius:18px;
  background:
    radial-gradient(circle at top right, rgba(17,106,210,.08), transparent 24%),
    linear-gradient(180deg,#F8FBFF,#FFFFFF);
  border:1px solid rgba(17,106,210,.12);
}
.ow-family-code-box span{
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--blue);
}
.ow-family-code-box strong{
  display:block;
  font-size:26px;
  line-height:1;
  font-weight:900;
  letter-spacing:.12em;
  color:var(--ink);
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}
.ow-family-code-box small{
  display:block;
  font-size:12px;
  line-height:1.5;
  color:var(--ink4);
}
.ow-family-list-card{
  display:grid;
  gap:14px;
  min-height:100%;
  padding:18px;
  border-radius:24px;
  background:
    radial-gradient(circle at top right, rgba(30,173,190,.08), transparent 24%),
    linear-gradient(180deg,#FFFFFF,#F9FCFF);
  border:1px solid rgba(217,227,241,.95);
  box-shadow:0 16px 32px rgba(15,23,42,.05);
}
.ow-family-list-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.ow-family-list-head strong{
  font-size:15px;
  font-weight:900;
  color:var(--ink);
}
.ow-family-list{
  display:grid;
  gap:10px;
}
.ow-family-invites{
  display:grid;
  gap:10px;
  margin-top:12px;
}
.ow-family-invite-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border-radius:18px;
  background:linear-gradient(180deg,#FFFFFF,#F8FBFF);
  border:1px solid rgba(226,232,240,.95);
}
.ow-family-invite-item strong{
  display:block;
  font-size:18px;
  line-height:1;
  font-weight:900;
  letter-spacing:.08em;
  color:var(--ink);
  margin-bottom:6px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}
.ow-family-invite-item span{
  display:block;
  font-size:12px;
  line-height:1.5;
  color:var(--ink4);
}
.ow-family-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border-radius:18px;
  background:#fff;
  border:1px solid rgba(226,232,240,.95);
  box-shadow:0 10px 24px rgba(15,23,42,.04);
}
.ow-family-item strong{
  display:block;
  font-size:14px;
  line-height:1.15;
  font-weight:800;
  color:var(--ink);
  margin-bottom:4px;
}
.ow-family-item span{
  display:block;
  font-size:12px;
  line-height:1.5;
  color:var(--ink4);
  overflow-wrap:anywhere;
}
.ow-family-claim{
  display:grid;
  gap:8px;
  margin-top:4px;
  padding-top:8px;
}
.ow-family-claim strong{
  display:block;
  font-size:16px;
  font-weight:900;
  color:var(--ink);
}
.ow-family-claim span{
  display:block;
  font-size:12px;
  line-height:1.6;
  color:var(--ink4);
}
.ow-family-claim-form{
  display:grid;
  gap:10px;
}
.ow-family-code-input{
  text-transform:uppercase;
  text-align:center;
  letter-spacing:.18em;
  font-weight:900;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}
.vpc-access-badge{
  position:absolute;
  left:16px;
  top:58px;
  right:auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:34px;
  padding:8px 12px;
  border-radius:999px;
  max-width:calc(100% - 96px);
  font-size:11px;
  font-weight:900;
  letter-spacing:.04em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 14px 24px rgba(2,6,23,.12);
}
.vpc-access-badge.owner{
  color:#fff;
  background:rgba(15,23,42,.22);
  border:1px solid rgba(255,255,255,.18);
}
.vpc-access-badge.shared{
  color:#0B3B68;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.72);
}

.ow-booking-headline{
  display:grid;
  gap:6px;
  margin-bottom:14px;
}
.ow-booking-headline strong{
  display:block;
  font-size:17px;
  line-height:1.1;
  font-weight:900;
  color:var(--ink);
}
.ow-booking-headline span{
  display:block;
  font-size:12px;
  line-height:1.6;
  color:var(--ink4);
}
.ow-book-summary-card{
  padding:14px 16px;
  border-radius:20px;
  border:1px solid rgba(17,106,210,.10);
  background:linear-gradient(180deg,#F9FCFF,#F3F8FF);
  box-shadow:0 12px 28px rgba(15,23,42,.05);
}
.ow-book-summary-kicker{
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--blue);
  margin-bottom:8px;
}
.ow-book-summary-title{
  font-size:18px;
  line-height:1.1;
  font-weight:900;
  color:var(--ink);
  margin-bottom:4px;
}
.ow-book-summary-meta{
  font-size:12px;
  line-height:1.6;
  color:var(--ink4);
}
.ow-book-summary-list{
  display:grid;
  gap:10px;
}
.ow-book-summary-list div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(148,163,184,.16);
}
.ow-book-summary-list div:last-child{
  padding-bottom:0;
  border-bottom:none;
}
.ow-book-summary-list span{
  font-size:12px;
  color:var(--ink4);
}
.ow-book-summary-list strong{
  text-align:right;
  font-size:12px;
  font-weight:800;
  color:var(--ink);
}
.ow-reason-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.ow-reason-chip{
  border:none;
  cursor:pointer;
  padding:10px 12px;
  border-radius:999px;
  background:#EEF5FD;
  color:var(--blue);
  font-size:12px;
  font-weight:800;
  transition:all .18s ease;
}
.ow-reason-chip:hover,
.ow-reason-chip.active{
  background:linear-gradient(135deg,#116AD2,#1EADBE);
  color:#fff;
  box-shadow:0 12px 20px rgba(17,106,210,.16);
}
.ow-booking-empty{
  display:grid;
  justify-items:center;
  gap:8px;
  padding:22px 16px;
  text-align:center;
  color:var(--ink4);
  font-size:13px;
  border:1px dashed rgba(148,163,184,.26);
  border-radius:18px;
  background:#FAFCFF;
}
.ow-booking-empty i{
  font-size:24px;
  opacity:.45;
}
.ow-booking-empty strong{
  color:var(--ink);
  font-size:15px;
  font-weight:800;
}
.ow-booking-empty span{
  max-width:340px;
  line-height:1.6;
}
.ow-success-card{
  display:grid;
  gap:14px;
  text-align:center;
}
.ow-success-icon{
  width:72px;
  height:72px;
  border-radius:24px;
  margin:0 auto;
  display:grid;
  place-items:center;
  font-size:28px;
  color:#fff;
  background:linear-gradient(135deg,#116AD2,#1EADBE);
  box-shadow:0 20px 40px rgba(17,106,210,.20);
}
.ow-success-card strong{
  display:block;
  font-size:22px;
  line-height:1.05;
  font-weight:900;
  color:var(--ink);
}
.ow-success-card p{
  font-size:13px;
  line-height:1.65;
  color:var(--ink4);
}

@media (max-width: 980px){
  .ow-family-grid{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .vpc-cover{height:122px;padding:14px}
  .ow-family-form,
  .ow-family-list-card{
    padding:16px;
    border-radius:22px;
  }
  .ow-family-item{
    align-items:flex-start;
    flex-direction:column;
  }
  .ow-family-invite-item{
    align-items:flex-start;
    flex-direction:column;
  }
  .ow-family-item .ds-btn-sm{
    width:100%;
    justify-content:center;
  }
  .ow-family-invite-item .ds-btn-sm{
    width:100%;
    justify-content:center;
  }
  .vpc-access-badge{
    left:12px;
    top:52px;
    max-width:calc(100% - 88px);
  }
}
.ow-success-list{
  display:grid;
  gap:10px;
  text-align:left;
  padding:16px;
  border-radius:20px;
  background:#F8FBFF;
  border:1px solid rgba(17,106,210,.08);
}
.ow-success-list div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.ow-success-list span{
  font-size:12px;
  color:var(--ink4);
}
.ow-success-list strong{
  font-size:12px;
  text-align:right;
}

.clin-cover-premium{
  min-height:280px;
  border-radius:28px;
  box-shadow:0 28px 70px rgba(15,23,42,.16);
}
.clin-cover-premium .clin-cover-overlay{
  background:linear-gradient(180deg, rgba(7,18,37,.14) 0%, rgba(7,18,37,.42) 45%, rgba(7,18,37,.78) 100%);
}
.clin-cover-copy{
  display:grid;
  gap:8px;
  max-width:560px;
}
.clin-kicker{
  display:inline-flex;
  width:max-content;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.clin-cover-sub{
  color:rgba(255,255,255,.82);
  font-size:13px;
  line-height:1.7;
}
.clin-cover-actions{
  margin-left:auto;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.clin-cover-actions .ds-btn-ghost{
  background:rgba(255,255,255,.10);
  color:#fff;
  border-color:rgba(255,255,255,.22);
}
.clin-spotlight-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin:-30px 0 18px;
  position:relative;
  z-index:3;
}
.clin-spotlight-card{
  padding:16px 18px;
  border-radius:22px;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(17,106,210,.08);
  box-shadow:0 18px 40px rgba(15,23,42,.08);
  backdrop-filter:blur(12px);
}
.clin-spotlight-card span{
  display:block;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--blue);
  margin-bottom:6px;
}
.clin-spotlight-card strong{
  display:block;
  font-size:18px;
  line-height:1.1;
  font-weight:900;
  color:var(--ink);
}
.clin-lux-card{
  border-radius:22px;
  box-shadow:0 20px 42px rgba(15,23,42,.06);
}
.clin-service-cloud{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.clin-service-pill{
  display:inline-flex;
  align-items:center;
  padding:9px 12px;
  border-radius:999px;
  background:#EEF5FD;
  color:var(--blue);
  font-size:12px;
  font-weight:800;
}
.clin-team-list{
  display:grid;
  gap:10px;
}
.clin-team-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 0;
  border-bottom:1px solid var(--line-l);
}
.clin-team-item:last-child{
  padding-bottom:0;
  border-bottom:none;
}
.clin-cta-card{
  border-radius:24px;
  background:
    radial-gradient(circle at top right, rgba(30,173,190,.08), transparent 26%),
    linear-gradient(180deg,#FFFFFF,#F6FBFF);
  box-shadow:0 22px 44px rgba(15,23,42,.08);
}
.clin-cta-card h3{
  font-size:22px;
  line-height:1.08;
  font-weight:900;
  color:var(--ink);
  margin-bottom:8px;
}
.clin-cta-card p{
  font-size:13px;
  line-height:1.7;
  color:var(--ink4);
  margin-bottom:14px;
}

/* ===== Auth luxury pass v2 ===== */
body.auth-body{
  background:
    radial-gradient(circle at top left, rgba(30,173,190,.18), transparent 22%),
    radial-gradient(circle at bottom right, rgba(17,106,210,.20), transparent 26%),
    linear-gradient(135deg, #071327 0%, #0A1C3D 48%, #0D4F95 100%);
}
.vx-auth{
  grid-template-columns:minmax(0,1.08fr) minmax(440px,.92fr);
}
.vx-left{
  padding:64px 58px;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.08), transparent 18%),
    radial-gradient(circle at bottom left, rgba(30,173,190,.10), transparent 24%),
    linear-gradient(160deg, #071327 0%, #0B2148 56%, #0E5EA7 100%);
}
.vx-content{max-width:590px}
.vx-logo{margin-bottom:22px}
.vx-kicker{margin-bottom:18px}
.vx-headline{
  font-size:58px;
  line-height:.96;
  margin-bottom:18px;
}
.vx-sub{
  max-width:540px;
  margin-bottom:30px;
  color:rgba(255,255,255,.80);
  font-size:15px;
  line-height:1.8;
}
.vx-hero-shell{
  display:grid;
  gap:16px;
}
.vx-hero-card{
  position:relative;
  overflow:hidden;
  padding:26px;
  border-radius:32px;
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.16), transparent 22%),
    linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  box-shadow:0 30px 64px rgba(2,6,23,.32);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.vx-hero-card::after{
  content:"";
  position:absolute;
  right:-56px;
  bottom:-56px;
  width:180px;
  height:180px;
  border-radius:50%;
  background:rgba(255,255,255,.06);
}
.vx-hero-card-top{
  position:relative;
  z-index:1;
  display:grid;
  gap:16px;
  margin-bottom:14px;
}
.vx-hero-card-top strong{
  display:block;
  max-width:360px;
  color:#fff;
  font-size:34px;
  line-height:1.02;
  font-weight:900;
  letter-spacing:-.04em;
}
.vx-hero-card p{
  position:relative;
  z-index:1;
  max-width:460px;
  color:rgba(255,255,255,.80);
  font-size:14px;
  line-height:1.8;
}
.vx-hero-points{
  position:relative;
  z-index:1;
  display:grid;
  gap:10px;
  margin-top:18px;
}
.vx-hero-points span{
  display:flex;
  align-items:center;
  gap:10px;
  width:max-content;
  max-width:100%;
  padding:12px 16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.10);
  color:#fff;
  font-size:13px;
  font-weight:700;
}
.vx-hero-mini-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.vx-hero-mini{
  padding:18px 20px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.08);
  box-shadow:0 18px 40px rgba(2,6,23,.22);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.vx-hero-mini strong{
  display:block;
  color:#fff;
  font-size:18px;
  line-height:1.1;
  font-weight:800;
  margin-bottom:8px;
}
.vx-hero-mini span{
  display:block;
  color:rgba(255,255,255,.72);
  font-size:12px;
  line-height:1.6;
}
.vx-signature-grid,
.vx-proof,
.vx-feats{
  display:none;
}
.vx-right{
  padding:40px 36px;
  background:
    radial-gradient(circle at top right, rgba(17,106,210,.10), transparent 32%),
    linear-gradient(180deg, rgba(247,251,255,.98) 0%, #FFFFFF 100%);
}
.vx-form-box{
  max-width:540px;
  padding:36px;
  border-radius:38px;
  background:rgba(255,255,255,.90);
  border:1px solid rgba(17,106,210,.09);
  box-shadow:0 36px 90px rgba(15,23,42,.12);
}
.vx-form-logo{margin-bottom:20px}
.vx-form-logo-t{
  font-size:17px;
  letter-spacing:.28em;
}
.vx-form-intro{
  gap:8px;
  margin-bottom:20px;
}
.vx-form-intro strong{font-size:30px}
.vx-form-intro span{
  font-size:13px;
  line-height:1.7;
}
.vx-tabs{
  padding:7px;
  background:#EEF5FD;
  border-radius:22px;
  margin-bottom:20px;
}
.vx-tab{
  padding:14px 12px;
  border-radius:16px;
  font-size:13px;
  font-weight:800;
}
.vx-panel{
  padding:22px;
  border-radius:30px;
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(250,252,255,.92));
  border:1px solid rgba(17,106,210,.08);
  box-shadow:0 18px 38px rgba(15,23,42,.07);
}
.vx-panel-head{
  gap:6px;
  margin-bottom:16px;
}
.vx-panel-head strong{font-size:19px}
.vx-panel-head span{font-size:12px}
.vx-lbl{
  margin-bottom:7px;
  font-size:11px;
  font-weight:800;
  color:#64748B;
}
.vx-inp{
  min-height:56px;
  border-radius:18px;
  background:linear-gradient(180deg,#FCFDFE,#F5F9FD);
}
.vx-inp:focus{
  box-shadow:0 0 0 4px rgba(17,106,210,.10);
}
.vx-btn{
  min-height:56px;
  border-radius:18px;
  font-size:14px;
  font-weight:800;
}
.vx-clinic-cta{
  border-radius:24px;
  padding:18px;
}
.vx-mobile-hero-clean{
  min-height:208px;
  border-radius:30px;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.14), transparent 22%),
    linear-gradient(135deg,#081A38 0%, #116AD2 54%, #1EADBE 100%);
}
.vx-mobile-overlay strong{font-size:24px}
.vx-mobile-overlay span{max-width:84%}
@media (max-width: 1180px){
  .vx-auth{
    grid-template-columns:minmax(0,1fr) minmax(420px,.95fr);
  }
  .vx-headline{font-size:50px}
}
@media (max-width: 980px){
  .vx-auth{grid-template-columns:1fr}
  .vx-left{display:none}
  .vx-right{
    padding:22px 14px;
    align-items:flex-start;
  }
  .vx-form-box{
    max-width:100%;
    padding:24px 18px 26px;
    border-radius:30px;
  }
  .vx-form-intro strong{font-size:24px}
}
@media (max-width: 560px){
  body.auth-body{
    background:
      linear-gradient(180deg, #EAF3FF 0%, #F7FBFF 24%, #FFFFFF 60%);
  }
  .vx-right{
    padding:0;
    background:transparent;
  }
  .vx-form-box{
    min-height:100dvh;
    padding:18px 14px 28px;
    border:none;
    border-radius:0;
    box-shadow:none;
    background:transparent;
    backdrop-filter:none;
  }
  .vx-form-box::before{display:none}
  .vx-mobile-pets{
    display:block;
    margin-bottom:16px;
  }
  .vx-form-intro{
    padding:0 4px;
    margin-bottom:16px;
  }
  .vx-form-intro strong{font-size:22px}
  .vx-tabs{
    margin-bottom:16px;
    background:rgba(255,255,255,.96);
    box-shadow:0 14px 30px rgba(15,23,42,.08);
  }
  .vx-panel{
    padding:16px;
    border-radius:26px;
    background:#fff;
  }
  .vx-mobile-hero-clean{
    min-height:190px;
    box-shadow:0 26px 46px rgba(15,23,42,.14);
  }
  .vx-mobile-overlay strong{font-size:22px}
}

@media (max-width: 920px){
  .clinic-ex-grid{
    grid-template-columns:1fr 1fr;
  }
}
@media (max-width: 640px){
  .clinic-ex-grid{
    grid-template-columns:1fr;
  }
  .clinic-ex-item{
    align-items:flex-start;
    flex-direction:column;
  }
}
@media (max-width: 980px){
  .clin-cover-actions{
    margin-left:0;
  }
  .clin-spotlight-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    margin-top:12px;
  }
}
@media (max-width: 640px){
  .clin-cover-premium{
    min-height:240px;
    border-radius:22px;
  }
  .clin-cover-content{
    align-items:flex-end;
    flex-wrap:wrap;
  }
  .clin-name{
    font-size:26px;
  }
  .clin-spotlight-grid{
    grid-template-columns:1fr;
  }
}

/* ===== Final mobile app fit pass ===== */
@media (max-width: 640px){
  .ds{
    padding:0 12px 112px !important;
  }
  body.has-mobile-nav .ds-tabs,
  body.has-mobile-nav .ow-sticky-tabs{
    display:none !important;
  }
  body.has-mobile-nav .notif-fab{
    display:none !important;
  }
  body.has-mobile-nav .ds-top-premium{
    position:relative !important;
    top:auto !important;
    z-index:auto !important;
    margin-bottom:12px !important;
    padding:8px 0 4px !important;
    background:transparent !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    box-shadow:none !important;
  }
  body.has-mobile-nav .ow-hero,
  body.has-mobile-nav .ds-stats-lux{
    display:none !important;
  }
  body.has-mobile-nav .ds-top{
    padding:2px 0 0 !important;
  }
  body.has-mobile-nav .ds-top{
    flex-direction:column !important;
    align-items:stretch !important;
    gap:10px !important;
  }
  body.has-mobile-nav .ds-top-l,
  body.has-mobile-nav .ds-top-r{
    width:100% !important;
  }
  body.has-mobile-nav .ds-top-r{
    justify-content:space-between !important;
    gap:10px !important;
  }
  body.has-mobile-nav .ow-hero{
    padding:16px !important;
    border-radius:22px !important;
    gap:14px !important;
    margin-bottom:14px !important;
  }
  body.has-mobile-nav .ow-hero h1{
    font-size:26px !important;
  }
  body.has-mobile-nav .ow-hero p{
    font-size:13px !important;
    line-height:1.55 !important;
  }
  body.has-mobile-nav .ow-hero-pills{
    gap:8px !important;
  }
  body.has-mobile-nav .ow-hero-pills span{
    width:100% !important;
    justify-content:flex-start !important;
  }
  body.has-mobile-nav .ds-stats-lux{
    gap:10px !important;
    margin-bottom:14px !important;
  }
  body.has-mobile-nav .ds-stat{
    min-height:84px !important;
    padding:14px 16px !important;
    border-radius:18px !important;
  }
  body.has-mobile-nav .ds-stat-n{
    font-size:18px !important;
  }
  body.has-mobile-nav .ds-stat-l{
    font-size:11px !important;
  }
  .ds-card,
  .ow-lux-card,
  .vpc-lux,
  .chat-main,
  .chat-sidebar{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    border-radius:22px !important;
  }
  .ds-card{
    padding:16px !important;
  }
  .ds-pets{
    grid-template-columns:1fr !important;
    gap:14px !important;
    justify-items:stretch !important;
    align-items:stretch !important;
  }
  .ds-pets .vpc-lux{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
  }
  .vpc-cover{
    height:118px !important;
    padding:12px !important;
  }
  .vpc-cover-badge{
    max-width:calc(100% - 116px) !important;
    font-size:11px !important;
    padding:8px 10px !important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .vpc-card-tools{
    right:10px !important;
    top:10px !important;
    gap:6px !important;
  }
  .vpc-icon-btn{
    width:34px !important;
    height:34px !important;
    border-radius:11px !important;
    font-size:13px !important;
  }
  .vpc-access-badge{
    left:12px !important;
    top:48px !important;
    max-width:calc(100% - 104px) !important;
    min-height:30px !important;
    padding:6px 10px !important;
    font-size:10px !important;
  }
  .vpc-body{
    padding:0 12px 12px !important;
    gap:14px !important;
  }
  .vpc-head{
    grid-template-columns:68px minmax(0,1fr) !important;
    column-gap:12px !important;
    margin-top:-14px !important;
    margin-bottom:14px !important;
    align-items:end !important;
  }
  .vpc-av{
    width:68px !important;
    height:68px !important;
    border-radius:20px !important;
  }
  .vpc-main{
    padding-top:14px !important;
    min-width:0 !important;
  }
  .vpc-name{
    font-size:20px !important;
    line-height:1.12 !important;
    margin:0 0 4px !important;
  }
  .vpc-meta{
    font-size:12px !important;
    line-height:1.45 !important;
  }
  .vpc-facts{
    grid-template-columns:1fr !important;
    gap:8px !important;
    margin-bottom:14px !important;
  }
  .vpc-fact{
    padding:12px !important;
    border-radius:15px !important;
  }
  .vpc-fact strong{
    font-size:14px !important;
    white-space:normal !important;
  }
  .pet-mini-timeline{
    padding:12px !important;
    gap:8px !important;
    border-radius:18px !important;
  }
  .pet-mini-timeline-head{
    align-items:flex-start !important;
    flex-direction:column !important;
    gap:6px !important;
  }
  .pet-mini-link{
    padding:0 !important;
  }
  .vpc-acts{
    grid-template-columns:1fr !important;
    gap:8px !important;
  }
  .vpc-b{
    min-height:44px !important;
    padding:10px 12px !important;
    font-size:13px !important;
    border-radius:12px !important;
  }
  .ds-stats-lux,
  .ow-lux-grid,
  .ow-lux-grid-secondary,
  .clin-spotlight-grid,
  .appt-grid,
  .ds-prof-grid{
    grid-template-columns:1fr !important;
  }
  .ds-tabs{
    margin-bottom:16px !important;
    padding:6px !important;
    border-radius:18px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scrollbar-width:none;
    scroll-snap-type:x proximity;
  }
  .ds-tabs::-webkit-scrollbar{
    display:none;
  }
  .ds-tab{
    flex:0 0 auto !important;
    min-width:max-content !important;
    scroll-snap-align:start;
  }
  .mobile-nav{
    display:block !important;
    padding:8px 8px calc(8px + env(safe-area-inset-bottom)) !important;
    background:rgba(255,255,255,.96) !important;
    border-top:1px solid rgba(148,163,184,.14) !important;
    box-shadow:0 -10px 24px rgba(15,23,42,.08) !important;
  }
  .mobile-nav-inner{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:6px !important;
    overflow:visible !important;
    padding:0 !important;
    scrollbar-width:none;
  }
  .mobile-nav-inner::-webkit-scrollbar{
    display:none;
  }
  .mob-nav-btn{
    min-width:0 !important;
    min-height:56px !important;
    padding:8px 4px !important;
    border-radius:14px !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  .mob-nav-btn span:last-child{
    font-size:10px !important;
    line-height:1.1 !important;
    white-space:normal !important;
  }
  .mob-nav-ic-wrap .ic,
  .mob-nav-btn .ic{
    width:28px !important;
    height:28px !important;
    border-radius:10px !important;
  }
  .mob-nav-btn i{
    font-size:15px !important;
  }
  .mobile-more-sheet[hidden]{
    display:none !important;
  }
  .mobile-more-sheet{
    position:fixed;
    inset:0;
    z-index:10020;
  }
  .mobile-more-backdrop{
    position:absolute;
    inset:0;
    border:none;
    background:rgba(15,23,42,.28);
  }
  .mobile-more-card{
    position:absolute;
    left:12px;
    right:12px;
    bottom:88px;
    padding:16px;
    border-radius:24px;
    background:rgba(255,255,255,.98);
    box-shadow:0 24px 60px rgba(15,23,42,.18);
    border:1px solid rgba(226,232,240,.95);
  }
  .mobile-more-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
  }
  .mobile-more-head strong{
    font-size:18px;
    font-weight:900;
    color:var(--ink);
  }
  .mobile-more-close{
    width:36px;
    height:36px;
    border:none;
    border-radius:12px;
    background:#F1F5F9;
    color:var(--ink3);
    font:inherit;
  }
  .mobile-more-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .mobile-more-item{
    position:relative;
    display:grid;
    justify-items:start;
    gap:8px;
    min-height:88px;
    padding:14px;
    border:none;
    border-radius:18px;
    background:linear-gradient(180deg,#F8FBFF,#FFFFFF);
    border:1px solid rgba(226,232,240,.95);
    color:var(--ink);
    font:inherit;
    text-align:left;
  }
  .mobile-more-item .ic{
    width:34px;
    height:34px;
    border-radius:12px;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,#EFF6FF,#DBEAFE);
    color:var(--blue);
  }
  .mobile-more-item span:last-of-type{
    font-size:13px;
    font-weight:800;
    line-height:1.2;
  }
  .mobile-more-item em{
    position:absolute;
    top:10px;
    right:10px;
    min-width:20px;
    height:20px;
    padding:0 6px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#DC2626;
    color:#fff;
    font-style:normal;
    font-size:11px;
    font-weight:900;
  }
  .ow-family-grid,
  .clinic-ex-grid,
  .chat-wrap{
    grid-template-columns:1fr !important;
  }
  .ow-family-form,
  .ow-family-list-card{
    padding:14px !important;
  }
  .ow-book-summary-list div,
  .ow-success-list div{
    align-items:flex-start !important;
    flex-direction:column !important;
  }
  .vx-form-box{
    min-height:auto !important;
    padding:14px 14px 24px !important;
  }
  .vx-form-intro{
    margin-bottom:12px !important;
  }
  .vx-form-intro strong{
    font-size:20px !important;
    line-height:1.05 !important;
  }
  .vx-form-intro span{
    font-size:13px !important;
    line-height:1.55 !important;
  }
  .vx-mobile-pets{
    display:none !important;
  }
  .vx-mobile-stage-clean{
    min-height:0 !important;
  }
  .vx-mobile-hero-clean{
    min-height:0 !important;
    box-shadow:none !important;
  }
  .vx-mobile-overlay strong{
    font-size:18px !important;
    line-height:1.05 !important;
  }
  .vx-mobile-overlay span{
    font-size:12px !important;
    line-height:1.5 !important;
    max-width:240px !important;
  }
  .vx-mobile-floating,
  .vx-float-stat{
    display:none !important;
  }
  .vx-tabs{
    padding:5px !important;
    border-radius:18px !important;
    margin-bottom:14px !important;
  }
  .vx-tab{
    min-height:48px !important;
    padding:10px 8px !important;
    font-size:13px !important;
  }
  .vx-panel{
    padding:16px !important;
    border-radius:22px !important;
  }
}

/* ===== Mobile cleanup override ===== */
@media (max-width: 640px){
  body.has-mobile-nav .ds{
    padding:calc(env(safe-area-inset-top) + 12px) 12px 126px !important;
  }
  body.has-mobile-nav .ow-mobile-head{
    display:grid !important;
    gap:12px !important;
    margin:0 0 14px !important;
  }
  body.has-mobile-nav .ow-mobile-head-main{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
    padding:14px !important;
    border-radius:24px !important;
    background:linear-gradient(135deg,#0F2A57 0%, #116AD2 54%, #1EADBE 100%) !important;
    box-shadow:0 22px 40px rgba(15,23,42,.16) !important;
  }
  body.has-mobile-nav .ow-mobile-brand{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    min-width:0 !important;
  }
  body.has-mobile-nav .ow-mobile-brand-logo{
    width:44px !important;
    height:44px !important;
    border-radius:16px !important;
    display:grid !important;
    place-items:center !important;
    color:#fff !important;
    background:rgba(255,255,255,.14) !important;
    border:1px solid rgba(255,255,255,.18) !important;
    font-size:18px !important;
    flex:0 0 44px !important;
  }
  body.has-mobile-nav .ow-mobile-brand-kicker{
    display:block !important;
    font-size:11px !important;
    font-weight:900 !important;
    letter-spacing:.18em !important;
    color:rgba(255,255,255,.72) !important;
    text-transform:uppercase !important;
    margin-bottom:2px !important;
  }
  body.has-mobile-nav .ow-mobile-brand strong{
    display:block !important;
    font-size:19px !important;
    line-height:1.04 !important;
    color:#fff !important;
    letter-spacing:-.03em !important;
  }
  body.has-mobile-nav .ow-mobile-profile-btn{
    border:none !important;
    background:rgba(255,255,255,.14) !important;
    border-radius:18px !important;
    padding:8px 10px !important;
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    color:#fff !important;
    min-width:0 !important;
  }
  body.has-mobile-nav .ow-mobile-profile-av{
    width:38px !important;
    height:38px !important;
    border-radius:14px !important;
    overflow:hidden !important;
    display:grid !important;
    place-items:center !important;
    background:rgba(255,255,255,.2) !important;
    color:#fff !important;
    font-weight:800 !important;
    flex:0 0 38px !important;
  }
  body.has-mobile-nav .ow-mobile-profile-copy{
    display:grid !important;
    gap:2px !important;
    text-align:left !important;
    min-width:0 !important;
  }
  body.has-mobile-nav .ow-mobile-profile-copy strong{
    font-size:12px !important;
    font-weight:800 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    max-width:82px !important;
  }
  body.has-mobile-nav .ow-mobile-profile-copy em{
    font-style:normal !important;
    font-size:10px !important;
    color:rgba(255,255,255,.72) !important;
  }
  body.has-mobile-nav .ow-mobile-summary{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:10px !important;
  }
  body.has-mobile-nav .ow-mobile-chip{
    border:none !important;
    border-radius:18px !important;
    padding:12px 10px !important;
    display:grid !important;
    justify-items:start !important;
    gap:8px !important;
    background:linear-gradient(180deg,#FFFFFF,#F8FBFF) !important;
    border:1px solid rgba(226,232,240,.96) !important;
    box-shadow:0 14px 28px rgba(15,23,42,.05) !important;
    color:var(--ink) !important;
    text-align:left !important;
  }
  body.has-mobile-nav .ow-mobile-chip i{
    width:30px !important;
    height:30px !important;
    border-radius:11px !important;
    display:grid !important;
    place-items:center !important;
    background:#E8F1FF !important;
    color:var(--blue) !important;
    font-size:14px !important;
  }
  body.has-mobile-nav .ow-mobile-chip span{
    font-size:12px !important;
    line-height:1.2 !important;
    font-weight:800 !important;
  }
  body.has-mobile-nav .ds-tabs,
  body.has-mobile-nav .ow-sticky-tabs,
  body.has-mobile-nav .notif-fab,
  body.has-mobile-nav .vx-mobile-pets{
    display:none !important;
  }
  body.has-mobile-nav .ow-hero,
  body.has-mobile-nav .ds-stats-lux{
    display:none !important;
  }
  body.has-mobile-nav .ds-top-premium{
    display:none !important;
  }
  body.has-mobile-nav .mobile-nav{
    display:block !important;
    left:12px !important;
    right:12px !important;
    bottom:10px !important;
    width:auto !important;
    padding:10px 10px calc(12px + env(safe-area-inset-bottom)) !important;
    background:rgba(255,255,255,.94) !important;
    border:1px solid rgba(226,232,240,.96) !important;
    border-radius:26px !important;
    box-shadow:0 20px 40px rgba(15,23,42,.12) !important;
    backdrop-filter:blur(22px) !important;
    -webkit-backdrop-filter:blur(22px) !important;
  }
  body.has-mobile-nav .mobile-nav-inner{
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:2px !important;
    overflow:visible !important;
    padding:0 !important;
    align-items:end !important;
  }
  body.has-mobile-nav .mob-nav-btn{
    min-height:66px !important;
    padding:5px 1px 4px !important;
    border-radius:14px !important;
    display:grid !important;
    justify-items:center !important;
    align-content:center !important;
    gap:5px !important;
    color:#667085 !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  body.has-mobile-nav .mob-nav-btn.active{
    background:transparent !important;
    color:#116AD2 !important;
    box-shadow:none !important;
  }
  body.has-mobile-nav .mob-nav-btn .ic,
  body.has-mobile-nav .mob-nav-ic-wrap .ic{
    width:32px !important;
    height:32px !important;
    border-radius:11px !important;
    background:#F8FAFC !important;
    color:#116AD2 !important;
    box-shadow:inset 0 0 0 1px rgba(148,163,184,.12) !important;
    transition:all .18s ease !important;
  }
  body.has-mobile-nav .mob-nav-btn.active .ic,
  body.has-mobile-nav .mob-nav-btn.active .mob-nav-ic-wrap .ic{
    background:#116AD2 !important;
    color:#fff !important;
    box-shadow:0 10px 18px rgba(17,106,210,.18) !important;
  }
  body.has-mobile-nav .mob-nav-btn span:last-child{
    display:block !important;
    min-height:18px !important;
    font-size:9px !important;
    font-weight:800 !important;
    line-height:1.1 !important;
    white-space:normal !important;
    letter-spacing:0 !important;
    text-align:center !important;
    max-width:100% !important;
  }
  body.has-mobile-nav .mob-badge{
    top:-4px !important;
    right:-8px !important;
    min-width:16px !important;
    height:16px !important;
    font-size:9px !important;
    border:2px solid #fff !important;
  }
  body.has-mobile-nav .mobile-more-sheet[hidden]{
    display:none !important;
  }
  body.has-mobile-nav .mobile-more-sheet{
    position:fixed !important;
    inset:0 !important;
    z-index:10020 !important;
  }
  body.has-mobile-nav .mobile-more-backdrop{
    position:absolute !important;
    inset:0 !important;
    border:none !important;
    background:rgba(15,23,42,.3) !important;
  }
  body.has-mobile-nav .mobile-more-card{
    position:absolute !important;
    left:12px !important;
    right:12px !important;
    bottom:88px !important;
    padding:16px !important;
    border-radius:24px !important;
    background:rgba(255,255,255,.99) !important;
    border:1px solid rgba(226,232,240,.96) !important;
    box-shadow:0 24px 60px rgba(15,23,42,.18) !important;
  }
  body.has-mobile-nav .mobile-more-head{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    margin-bottom:12px !important;
  }
  body.has-mobile-nav .mobile-more-head strong{
    font-size:18px !important;
    font-weight:900 !important;
    color:var(--ink) !important;
  }
  body.has-mobile-nav .mobile-more-close{
    width:36px !important;
    height:36px !important;
    border:none !important;
    border-radius:12px !important;
    background:#F1F5F9 !important;
    color:var(--ink3) !important;
    font:inherit !important;
  }
  body.has-mobile-nav .mobile-more-grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }
  body.has-mobile-nav .mobile-more-item{
    position:relative !important;
    display:grid !important;
    justify-items:start !important;
    gap:8px !important;
    min-height:88px !important;
    padding:14px !important;
    border:none !important;
    border-radius:18px !important;
    background:linear-gradient(180deg,#F8FBFF,#FFFFFF) !important;
    border:1px solid rgba(226,232,240,.95) !important;
    color:var(--ink) !important;
    text-align:left !important;
    font:inherit !important;
  }
  body.has-mobile-nav .mobile-more-item .ic{
    width:34px !important;
    height:34px !important;
    border-radius:12px !important;
    display:grid !important;
    place-items:center !important;
    background:linear-gradient(135deg,#EFF6FF,#DBEAFE) !important;
    color:var(--blue) !important;
  }
  body.has-mobile-nav .mobile-more-item span:last-of-type{
    font-size:13px !important;
    font-weight:800 !important;
    line-height:1.2 !important;
  }
  body.has-mobile-nav .mobile-more-item em{
    position:absolute !important;
    top:10px !important;
    right:10px !important;
    min-width:20px !important;
    height:20px !important;
    padding:0 6px !important;
    border-radius:999px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:#DC2626 !important;
    color:#fff !important;
    font-style:normal !important;
    font-size:11px !important;
    font-weight:900 !important;
  }
  body.has-mobile-nav .ds-panel{
    scroll-margin-top:12px !important;
  }
  body.has-mobile-nav .ow-overview-shell,
  body.has-mobile-nav .ow-lux-card,
  body.has-mobile-nav .ds-card,
  body.has-mobile-nav .vpc-lux,
  body.has-mobile-nav .ow-family-card,
  body.has-mobile-nav .ow-book-shell,
  body.has-mobile-nav .chat-main,
  body.has-mobile-nav .chat-sidebar{
    border-radius:22px !important;
    box-shadow:0 16px 34px rgba(15,23,42,.06) !important;
  }
  body.has-mobile-nav .ow-overview-shell{
    padding:0 !important;
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
  }
  body.has-mobile-nav .ow-overview-head{
    margin-bottom:12px !important;
    padding:0 2px !important;
  }
  body.has-mobile-nav .ow-overview-head h2,
  body.has-mobile-nav .ds-ptitle{
    font-size:24px !important;
    line-height:1.05 !important;
  }
  body.has-mobile-nav .ow-overview-head p{
    font-size:13px !important;
    line-height:1.55 !important;
  }
  body.has-mobile-nav .ow-lux-grid,
  body.has-mobile-nav .ow-lux-grid-secondary,
  body.has-mobile-nav .ds-pets,
  body.has-mobile-nav .appt-grid,
  body.has-mobile-nav .clinic-ex-grid,
  body.has-mobile-nav .ow-family-grid{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
  body.has-mobile-nav .ow-lux-card,
  body.has-mobile-nav .ds-card{
    padding:16px !important;
  }
  body.has-mobile-nav .ow-agenda-item,
  body.has-mobile-nav .ow-timeline-item{
    grid-template-columns:42px minmax(0,1fr) auto !important;
    gap:10px !important;
    padding:12px !important;
  }
  body.has-mobile-nav .vpc-lux{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
  }
  body.has-mobile-nav .vpc-cover{
    height:108px !important;
    padding:12px !important;
  }
  body.has-mobile-nav .vpc-card-tools{
    top:10px !important;
    right:10px !important;
    gap:6px !important;
  }
  body.has-mobile-nav .vpc-access-badge{
    position:static !important;
    max-width:none !important;
    margin-top:8px !important;
  }
  body.has-mobile-nav .vpc-head{
    display:grid !important;
    grid-template-columns:64px minmax(0,1fr) !important;
    gap:12px !important;
    margin-top:-10px !important;
    margin-bottom:14px !important;
    align-items:end !important;
  }
  body.has-mobile-nav .vpc-main{
    min-width:0 !important;
    padding-top:10px !important;
  }
  body.has-mobile-nav .vpc-name{
    font-size:18px !important;
  }
  body.has-mobile-nav .vpc-meta{
    font-size:12px !important;
  }
  body.has-mobile-nav .vpc-facts,
  body.has-mobile-nav .vpc-acts{
    grid-template-columns:1fr !important;
    gap:8px !important;
  }
  body.has-mobile-nav .pet-mini-timeline{
    padding:12px !important;
  }
  body.has-mobile-nav .pet-mini-timeline-head{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    flex-direction:row !important;
  }
  body.has-mobile-nav .pet-mini-link{
    font-size:12px !important;
  }
  body.has-mobile-nav .ow-book-shell .week-head{
    gap:10px !important;
  }
  body.has-mobile-nav .ow-book-shell .wk-nav{
    min-width:118px !important;
    padding:12px 10px !important;
  }
  body.has-mobile-nav .ow-book-shell .days{
    gap:8px !important;
    padding-bottom:4px !important;
  }
  body.has-mobile-nav .ow-book-shell .dchip{
    min-width:64px !important;
    padding:10px 8px !important;
    border-radius:16px !important;
  }
  body.auth-body .vx-right{
    padding:0 !important;
    align-items:flex-start !important;
  }
  body.auth-body .vx-form-box{
    min-height:100dvh !important;
    padding:18px 14px 24px !important;
    border:none !important;
    border-radius:0 !important;
    box-shadow:none !important;
    background:transparent !important;
    backdrop-filter:none !important;
  }
  body.auth-body .vx-form-logo{
    margin-bottom:12px !important;
    padding:0 2px !important;
  }
  body.auth-body .vx-form-intro{
    margin-bottom:12px !important;
    padding:0 2px !important;
  }
  body.auth-body .vx-form-intro strong{
    font-size:22px !important;
    line-height:1.04 !important;
  }
  body.auth-body .vx-form-intro span{
    font-size:14px !important;
    line-height:1.55 !important;
  }
  body.auth-body .vx-tabs{
    margin-bottom:14px !important;
    padding:5px !important;
    border-radius:18px !important;
    box-shadow:0 10px 20px rgba(15,23,42,.05) !important;
  }
  body.auth-body .vx-panel{
    padding:16px !important;
    border-radius:24px !important;
    box-shadow:0 18px 40px rgba(15,23,42,.08) !important;
  }
  body.auth-body .vx-panel-head strong{
    font-size:18px !important;
  }
}