:root {
    --paw-bg: #f8f3ec;
    --paw-surface: #fffaf5;
    --paw-card: #ffffff;
    --paw-border: #dfcab0;
    --paw-border-soft: #eadbc9;
    --paw-text: #2c1608;
    --paw-muted: #7b634f;
    --paw-brown: #4b260d;
    --paw-brown-dark: #2d1608;
    --paw-green: #0f6b3a;
    --paw-green-bg: #eaf5ec;
    --paw-red: #9c2f24;
    --paw-red-bg: #f9e7e3;
    --paw-yellow: #8a5a00;
    --paw-yellow-bg: #fff3d7;
    --paw-shadow: 0 18px 45px rgba(61, 35, 15, 0.08);
    --paw-radius-xl: 28px;
    --paw-radius-lg: 18px;
    --paw-radius-md: 12px;
    --paw-transition: 180ms ease;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background:
        radial-gradient(circle at top left, rgba(255,255,255,0.85), transparent 36%),
        linear-gradient(135deg, #fbf6ee 0%, #f5efe7 100%);
    color: var(--paw-text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

h1, h2, h3 {
    color: var(--paw-text);
    letter-spacing: -0.03em;
}

a {
    color: var(--paw-brown);
    font-weight: 700;
    text-underline-offset: 4px;
    transition: opacity var(--paw-transition), transform var(--paw-transition);
}

a:hover {
    opacity: 0.75;
}

button,
input[type="submit"],
.btn,
.button,
.action-btn {
    border: 0;
    border-radius: 999px;
    background: var(--paw-brown);
    color: #fff;
    padding: 10px 16px;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform var(--paw-transition), box-shadow var(--paw-transition), opacity var(--paw-transition);
}

button:hover,
input[type="submit"]:hover,
.btn:hover,
.button:hover,
.action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(75, 38, 13, 0.16);
    opacity: 0.95;
}

button:active,
input[type="submit"]:active,
.btn:active,
.button:active,
.action-btn:active {
    transform: translateY(0);
}

input,
select,
textarea {
    border: 1px solid var(--paw-border-soft);
    border-radius: 14px;
    padding: 11px 13px;
    background: #fff;
    color: var(--paw-text);
    outline: none;
    transition: border-color var(--paw-transition), box-shadow var(--paw-transition);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--paw-brown);
    box-shadow: 0 0 0 4px rgba(75, 38, 13, 0.08);
}

table {
    width: 100%;
    border-collapse: collapse;
}

th {
    color: var(--paw-brown);
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

td, th {
    padding: 16px;
    border-bottom: 1px solid var(--paw-border-soft);
    text-align: left;
}

tr {
    transition: background var(--paw-transition);
}

tbody tr:hover {
    background: rgba(75, 38, 13, 0.035);
}

.card,
.panel,
.section,
.admin-card,
.dashboard-card {
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--paw-border-soft);
    border-radius: var(--paw-radius-xl);
    box-shadow: var(--paw-shadow);
}

.badge,
.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 7px 13px;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.badge-active,
.status-active,
.active {
    background: var(--paw-green-bg);
    color: var(--paw-green);
}

.badge-disabled,
.status-disabled,
.disabled {
    background: var(--paw-red-bg);
    color: var(--paw-red);
}

.badge-available,
.status-available,
.available {
    background: var(--paw-yellow-bg);
    color: var(--paw-yellow);
}

.paw-fade-in {
    animation: pawFadeIn 420ms ease both;
}

.paw-slide-up {
    animation: pawSlideUp 460ms ease both;
}

@keyframes pawFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes pawSlideUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 900px) {
    body {
        font-size: 15px;
    }

    .card,
    .panel,
    .section,
    .admin-card,
    .dashboard-card {
        border-radius: 20px;
    }

    table {
        min-width: 760px;
    }

    .table-wrap,
    .table-responsive,
    .admin-table-wrap {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    td, th {
        padding: 13px 12px;
    }
}

@media (max-width: 640px) {
    h1 {
        font-size: 2rem;
    }

    button,
    input[type="submit"],
    .btn,
    .button,
    .action-btn {
        width: 100%;
    }

    input,
    select,
    textarea {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* Dashboard mobile pet cards */
.pets-cards-mobile {
    display: none;
}

.pet-mobile-card {
    background: rgba(255, 253, 250, 0.95);
    border: 1px solid var(--paw-border-soft);
    border-radius: 22px;
    padding: 18px;
    box-shadow: 0 12px 28px rgba(61, 35, 15, 0.07);
    animation: pawSlideUp 420ms ease both;
}

.pet-mobile-card + .pet-mobile-card {
    margin-top: 14px;
}

.pet-mobile-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.pet-mobile-label {
    margin: 0 0 4px;
    color: var(--paw-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.pet-mobile-head h3 {
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.1;
}

.pet-mobile-meta {
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
}

.pet-mobile-meta div {
    background: rgba(248, 243, 236, 0.72);
    border: 1px solid var(--paw-border-soft);
    border-radius: 16px;
    padding: 12px;
}

.pet-mobile-meta span {
    display: block;
    color: var(--paw-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.pet-mobile-meta strong {
    display: block;
    color: var(--paw-text);
    word-break: break-word;
}

.pet-mobile-actions {
    display: grid;
    gap: 10px;
}

.pet-action {
    border-radius: 999px;
    padding: 11px 14px;
    text-align: center;
    text-decoration: none;
    font-weight: 900;
    border: 1px solid var(--paw-brown);
}

.pet-action.primary {
    background: var(--paw-brown);
    color: #fff;
}

.pet-action.secondary {
    background: transparent;
    color: var(--paw-brown);
}

.status-missing {
    background: #f0ebe4;
    color: var(--paw-muted);
}

@media (max-width: 760px) {
    body {
        overflow-x: hidden;
    }

    .page {
        width: min(100% - 22px, 520px);
        padding-top: 18px;
    }

    .hero,
    .card {
        padding: 20px;
        border-radius: 22px;
    }

    .nav {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
    }

    .nav a {
        width: 100%;
        text-align: center;
        background: var(--paw-brown);
        color: #fff !important;
        border-radius: 999px;
        padding: 11px 14px;
    }

    .stats {
        gap: 10px;
    }

    .pets-table-desktop {
        display: none !important;
    }

    .pets-cards-mobile {
        display: block;
    }

    .profile-row strong {
        overflow-wrap: anywhere;
    }

    .button {
        width: 100%;
        text-align: center;
    }
}
/* Password eye button mobile fix */
.password-wrapper,
.password-field,
.password-input-wrapper,
.auth-password-field,
.input-password-wrap,
.field-password {
    position: relative;
}

.password-wrapper input,
.password-field input,
.password-input-wrapper input,
.auth-password-field input,
.input-password-wrap input,
.field-password input,
input[type="password"] {
    padding-right: 54px;
}

.password-wrapper button,
.password-field button,
.password-input-wrapper button,
.auth-password-field button,
.input-password-wrap button,
.field-password button,
.password-toggle,
.toggle-password,
.eye-toggle,
.password-eye {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: var(--paw-brown) !important;
    box-shadow: none !important;
    z-index: 3 !important;
}

.password-wrapper button:hover,
.password-field button:hover,
.password-input-wrapper button:hover,
.auth-password-field button:hover,
.input-password-wrap button:hover,
.field-password button:hover,
.password-toggle:hover,
.toggle-password:hover,
.eye-toggle:hover,
.password-eye:hover {
    transform: translateY(-50%) !important;
    box-shadow: none !important;
    opacity: 0.75;
}

@media (max-width: 640px) {
    .password-wrapper button,
    .password-field button,
    .password-input-wrapper button,
    .auth-password-field button,
    .input-password-wrap button,
    .field-password button,
    .password-toggle,
    .toggle-password,
    .eye-toggle,
    .password-eye {
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
    }
}

/* Hard fix: password eye button must not cover password input on mobile */
form div:has(> input):has(> button[type="button"]) {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    position: relative !important;
}

form div:has(> input):has(> button[type="button"]) > input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    padding-right: 14px !important;
}

form div:has(> input):has(> button[type="button"]) > button[type="button"] {
    position: static !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(75, 38, 13, 0.08) !important;
    color: var(--paw-brown) !important;
    box-shadow: none !important;
    transform: none !important;
    z-index: 1 !important;
}

form div:has(> input):has(> button[type="button"]) > button[type="button"]:hover {
    transform: none !important;
    box-shadow: none !important;
    opacity: 0.8;
}

@media (max-width: 640px) {
    form div:has(> input):has(> button[type="button"]) > button[type="button"] {
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
    }
}

/* Final fix: password eye button must never cover the input on mobile */
.input-wrap {
  position: relative !important;
}

#loginPwd,
#regPwd,
#regConfirm,
#resetPwd,
#resetConfirm {
  width: 100% !important;
  padding-left: 46px !important;
  padding-right: 58px !important;
}

.input-wrap > .input-icon {
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 18px !important;
  height: 18px !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.input-wrap > .eye-btn {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  color: inherit !important;
  border: 0 !important;
  box-shadow: none !important;
  z-index: 4 !important;
  flex: none !important;
}

.input-wrap > .eye-btn:hover {
  transform: translateY(-50%) !important;
  box-shadow: none !important;
  opacity: 0.7;
}

.input-wrap > .eye-btn .eye-icon {
  width: 18px !important;
  height: 18px !important;
  pointer-events: none !important;
}

.field-header .link-btn {
  width: auto !important;
}

@media (max-width: 640px) {
  .input-wrap > .eye-btn,
  button.eye-btn {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 0 !important;
    flex: none !important;
  }

  #loginPwd,
  #regPwd,
  #regConfirm,
  #resetPwd,
  #resetConfirm {
    padding-right: 58px !important;
  }
}

/* Dashboard responsive mobile cards */
@media (max-width: 760px) {
    body.dashboard-page {
        overflow-x: hidden;
    }

    body.dashboard-page .page {
        width: min(100% - 22px, 520px) !important;
        max-width: 520px !important;
        padding-top: 18px !important;
    }

    body.dashboard-page .hero,
    body.dashboard-page .card {
        padding: 20px !important;
        border-radius: 22px !important;
    }

    body.dashboard-page .hero {
        margin-bottom: 16px !important;
    }

    body.dashboard-page .nav {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    body.dashboard-page .nav a {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        border-radius: 999px !important;
        padding: 11px 14px !important;
        overflow-wrap: anywhere !important;
    }

    body.dashboard-page .stats {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    body.dashboard-page .profile-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 5px !important;
        padding: 13px 0 !important;
    }

    body.dashboard-page .profile-row strong,
    body.dashboard-page .profile-row span {
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    body.dashboard-page .table-wrap {
        width: 100% !important;
        overflow: visible !important;
    }

    body.dashboard-page .table-wrap table {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        border-collapse: separate !important;
    }

    body.dashboard-page .table-wrap thead {
        display: none !important;
    }

    body.dashboard-page .table-wrap tbody {
        display: grid !important;
        gap: 14px !important;
        width: 100% !important;
    }

    body.dashboard-page .table-wrap tr {
        display: block !important;
        width: 100% !important;
        padding: 16px !important;
        border: 1px solid var(--paw-border-soft) !important;
        border-radius: 20px !important;
        background: rgba(255, 253, 250, 0.96) !important;
        box-shadow: 0 12px 28px rgba(61, 35, 15, 0.07) !important;
        animation: pawSlideUp 420ms ease both;
    }

    body.dashboard-page .table-wrap td {
        display: grid !important;
        grid-template-columns: 90px 1fr !important;
        gap: 12px !important;
        align-items: center !important;
        width: 100% !important;
        border-bottom: 1px solid var(--paw-border-soft) !important;
        padding: 11px 0 !important;
        text-align: left !important;
        overflow-wrap: anywhere !important;
    }

    body.dashboard-page .table-wrap td:last-child {
        border-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    body.dashboard-page .table-wrap td::before {
        color: var(--paw-muted) !important;
        font-size: 0.72rem !important;
        font-weight: 900 !important;
        letter-spacing: 0.14em !important;
        text-transform: uppercase !important;
    }

    body.dashboard-page .table-wrap td:nth-child(1)::before {
        content: "Pet";
    }

    body.dashboard-page .table-wrap td:nth-child(2)::before {
        content: "Breed";
    }

    body.dashboard-page .table-wrap td:nth-child(3)::before {
        content: "QR";
    }

    body.dashboard-page .table-wrap td:nth-child(4)::before {
        content: "Status";
    }

    body.dashboard-page .table-wrap td:nth-child(5)::before {
        content: "Action";
    }

    body.dashboard-page .table-wrap td:nth-child(5) {
        display: block !important;
    }

    body.dashboard-page .table-wrap td:nth-child(5)::before {
        display: block !important;
        margin-bottom: 9px !important;
    }

    body.dashboard-page .actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 9px !important;
        width: 100% !important;
    }

    body.dashboard-page .actions a {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 999px !important;
        padding: 11px 14px !important;
        text-decoration: none !important;
        font-weight: 900 !important;
        background: var(--paw-brown) !important;
        color: #fff !important;
    }

    body.dashboard-page .button,
    body.dashboard-page button,
    body.dashboard-page input[type="submit"] {
        width: 100% !important;
    }
}

/* Admin responsive table cards */
@media (max-width: 760px) {
    body.admin-dashboard-page,
    body.admin-users-page,
    body.admin-pets-page,
    body.admin-qr-tags-page {
        overflow-x: hidden;
    }

    body.admin-dashboard-page .page,
    body.admin-users-page .page,
    body.admin-pets-page .page,
    body.admin-qr-tags-page .page {
        width: min(100% - 22px, 540px) !important;
        max-width: 540px !important;
        padding-top: 18px !important;
    }

    body.admin-dashboard-page .topbar,
    body.admin-users-page .topbar,
    body.admin-pets-page .topbar,
    body.admin-qr-tags-page .topbar {
        gap: 14px !important;
        margin-bottom: 18px !important;
    }

    body.admin-dashboard-page .brand,
    body.admin-users-page .brand,
    body.admin-pets-page .brand,
    body.admin-qr-tags-page .brand {
        font-size: 26px !important;
    }

    body.admin-dashboard-page .nav,
    body.admin-users-page .nav,
    body.admin-pets-page .nav,
    body.admin-qr-tags-page .nav {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 9px !important;
    }

    body.admin-dashboard-page .nav a,
    body.admin-users-page .nav a,
    body.admin-pets-page .nav a,
    body.admin-qr-tags-page .nav a {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 999px !important;
        padding: 11px 14px !important;
        background: var(--paw-brown, #5A3A14) !important;
        color: #fff !important;
        text-align: center !important;
    }

    body.admin-dashboard-page .hero,
    body.admin-dashboard-page .card,
    body.admin-users-page .hero,
    body.admin-users-page .card,
    body.admin-pets-page .hero,
    body.admin-pets-page .card,
    body.admin-qr-tags-page .hero,
    body.admin-qr-tags-page .card {
        padding: 20px !important;
        border-radius: 22px !important;
        margin-bottom: 16px !important;
    }

    body.admin-dashboard-page .stats {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    body.admin-dashboard-page .grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    body.admin-dashboard-page .table-wrap,
    body.admin-users-page .table-wrap,
    body.admin-pets-page .table-wrap,
    body.admin-qr-tags-page .table-wrap {
        width: 100% !important;
        overflow: visible !important;
    }

    body.admin-dashboard-page table,
    body.admin-users-page table,
    body.admin-pets-page table,
    body.admin-qr-tags-page table {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        border-collapse: separate !important;
    }

    body.admin-dashboard-page thead,
    body.admin-users-page thead,
    body.admin-pets-page thead,
    body.admin-qr-tags-page thead {
        display: none !important;
    }

    body.admin-dashboard-page tbody,
    body.admin-users-page tbody,
    body.admin-pets-page tbody,
    body.admin-qr-tags-page tbody {
        display: grid !important;
        gap: 14px !important;
        width: 100% !important;
    }

    body.admin-dashboard-page tr,
    body.admin-users-page tr,
    body.admin-pets-page tr,
    body.admin-qr-tags-page tr {
        display: block !important;
        width: 100% !important;
        padding: 16px !important;
        border: 1px solid var(--paw-border-soft, #E2D3BB) !important;
        border-radius: 20px !important;
        background: rgba(255, 253, 250, 0.96) !important;
        box-shadow: 0 12px 28px rgba(61, 35, 15, 0.07) !important;
        animation: pawSlideUp 420ms ease both;
    }

    body.admin-dashboard-page td,
    body.admin-users-page td,
    body.admin-pets-page td,
    body.admin-qr-tags-page td {
        display: grid !important;
        grid-template-columns: 96px 1fr !important;
        gap: 12px !important;
        align-items: start !important;
        width: 100% !important;
        border-bottom: 1px solid var(--paw-border-soft, #E2D3BB) !important;
        padding: 11px 0 !important;
        text-align: left !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    body.admin-dashboard-page td:last-child,
    body.admin-users-page td:last-child,
    body.admin-pets-page td:last-child,
    body.admin-qr-tags-page td:last-child {
        border-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    body.admin-dashboard-page td::before,
    body.admin-users-page td::before,
    body.admin-pets-page td::before,
    body.admin-qr-tags-page td::before {
        color: var(--paw-muted, #7B5A35) !important;
        font-size: 0.72rem !important;
        font-weight: 900 !important;
        letter-spacing: 0.12em !important;
        text-transform: uppercase !important;
        line-height: 1.35 !important;
    }

    /* Admin dashboard - Recent users */
    body.admin-dashboard-page .grid > .card:nth-child(1) td:nth-child(1)::before { content: "Email"; }
    body.admin-dashboard-page .grid > .card:nth-child(1) td:nth-child(2)::before { content: "Name"; }
    body.admin-dashboard-page .grid > .card:nth-child(1) td:nth-child(3)::before { content: "Role"; }
    body.admin-dashboard-page .grid > .card:nth-child(1) td:nth-child(4)::before { content: "Created"; }

    /* Admin dashboard - Recent pets */
    body.admin-dashboard-page .grid > .card:nth-child(2) td:nth-child(1)::before { content: "Pet"; }
    body.admin-dashboard-page .grid > .card:nth-child(2) td:nth-child(2)::before { content: "Owner"; }
    body.admin-dashboard-page .grid > .card:nth-child(2) td:nth-child(3)::before { content: "QR"; }
    body.admin-dashboard-page .grid > .card:nth-child(2) td:nth-child(4)::before { content: "Status"; }

    /* Admin users */
    body.admin-users-page td:nth-child(1)::before { content: "Email"; }
    body.admin-users-page td:nth-child(2)::before { content: "Name"; }
    body.admin-users-page td:nth-child(3)::before { content: "Phone"; }
    body.admin-users-page td:nth-child(4)::before { content: "WhatsApp"; }
    body.admin-users-page td:nth-child(5)::before { content: "Role"; }
    body.admin-users-page td:nth-child(6)::before { content: "Provider"; }
    body.admin-users-page td:nth-child(7)::before { content: "Verified"; }
    body.admin-users-page td:nth-child(8)::before { content: "Pets"; }
    body.admin-users-page td:nth-child(9)::before { content: "Created"; }

    /* Admin pets */
    body.admin-pets-page td:nth-child(1)::before { content: "Pet"; }
    body.admin-pets-page td:nth-child(2)::before { content: "Owner"; }
    body.admin-pets-page td:nth-child(3)::before { content: "QR"; }
    body.admin-pets-page td:nth-child(4)::before { content: "QR status"; }
    body.admin-pets-page td:nth-child(5)::before { content: "Pet status"; }
    body.admin-pets-page td:nth-child(6)::before { content: "Lost"; }
    body.admin-pets-page td:nth-child(7)::before { content: "Created"; }
    body.admin-pets-page td:nth-child(8)::before { content: "Deleted"; }
    body.admin-pets-page td:nth-child(9)::before { content: "Action"; }

    /* Admin QR tags */
    body.admin-qr-tags-page td:nth-child(1)::before { content: "Slug"; }
    body.admin-qr-tags-page td:nth-child(2)::before { content: "Status"; }
    body.admin-qr-tags-page td:nth-child(3)::before { content: "Linked pet"; }
    body.admin-qr-tags-page td:nth-child(4)::before { content: "Owner"; }
    body.admin-qr-tags-page td:nth-child(5)::before { content: "Created"; }
    body.admin-qr-tags-page td:nth-child(6)::before { content: "Activated"; }
    body.admin-qr-tags-page td:nth-child(7)::before { content: "QR / Actions"; }

    body.admin-qr-tags-page td:nth-child(7) {
        display: block !important;
    }

    body.admin-qr-tags-page td:nth-child(7)::before {
        display: block !important;
        margin-bottom: 10px !important;
    }

    body.admin-qr-tags-page .qr-preview-box {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    body.admin-qr-tags-page .qr-preview {
        width: 120px !important;
        height: 120px !important;
    }

    body.admin-qr-tags-page .qr-actions {
        width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: 1fr !important;
    }

    body.admin-qr-tags-page .action-btn,
    body.admin-qr-tags-page .danger-button,
    body.admin-qr-tags-page .restore-button,
    body.admin-pets-page .action {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        text-align: center !important;
    }
}

/* Admin search bars */
.admin-search-form {
    margin-bottom: 22px;
}

.admin-search-row {
    display: grid;
    grid-template-columns: auto minmax(240px, 1fr) auto auto;
    gap: 12px;
    align-items: center;
}

.admin-search-label {
    color: var(--paw-muted, #7B5A35);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.admin-search-row input[type="search"] {
    width: 100%;
    min-height: 46px;
    border-radius: 999px;
    padding: 12px 16px;
    background: rgba(255, 253, 250, 0.96);
}

.admin-search-row button,
.admin-search-clear {
    min-height: 46px;
    border-radius: 999px;
    padding: 12px 18px;
    font-weight: 900;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-search-clear {
    border: 1px solid var(--paw-border-soft, #E2D3BB);
    color: var(--paw-brown, #5A3A14);
    background: rgba(248, 243, 236, 0.78);
}

.admin-search-summary {
    margin: 12px 0 0;
    color: var(--paw-muted, #7B5A35);
    font-size: 0.92rem;
}

@media (max-width: 760px) {
    .admin-search-row {
        grid-template-columns: 1fr;
    }

    .admin-search-row button,
    .admin-search-clear {
        width: 100%;
    }
}

/* Admin desktop layout consistency */
@media (min-width: 761px) {
    body.admin-dashboard-page .page,
    body.admin-users-page .page,
    body.admin-pets-page .page,
    body.admin-qr-tags-page .page {
        width: min(100% - 96px, 1360px) !important;
        max-width: 1360px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-top: 34px !important;
        padding-bottom: 64px !important;
    }

    body.admin-dashboard-page .topbar,
    body.admin-users-page .topbar,
    body.admin-pets-page .topbar,
    body.admin-qr-tags-page .topbar {
        width: 100% !important;
        max-width: 1360px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 28px !important;
    }

    body.admin-dashboard-page .hero,
    body.admin-users-page .hero,
    body.admin-pets-page .hero,
    body.admin-qr-tags-page .hero,
    body.admin-dashboard-page .card,
    body.admin-users-page .card,
    body.admin-pets-page .card,
    body.admin-qr-tags-page .card {
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body.admin-dashboard-page .nav,
    body.admin-users-page .nav,
    body.admin-pets-page .nav,
    body.admin-qr-tags-page .nav {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 18px !important;
        flex-wrap: wrap !important;
    }

    body.admin-dashboard-page .nav a,
    body.admin-users-page .nav a,
    body.admin-pets-page .nav a,
    body.admin-qr-tags-page .nav a {
        white-space: nowrap !important;
    }
}

@media (min-width: 1400px) {
    body.admin-dashboard-page .page,
    body.admin-users-page .page,
    body.admin-pets-page .page,
    body.admin-qr-tags-page .page,
    body.admin-dashboard-page .topbar,
    body.admin-users-page .topbar,
    body.admin-pets-page .topbar,
    body.admin-qr-tags-page .topbar {
        max-width: 1440px !important;
    }
}

/* Admin logo */
.brand-logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.brand-logo-img {
    height: 46px;
    width: auto;
    max-width: 210px;
    display: block;
}

@media (max-width: 768px) {
    .brand-logo-img {
        height: 38px;
        max-width: 170px;
    }
}

/* =========================
   Responsive dashboard menu
   ========================= */

.paw-topbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(246, 242, 234, 0.94);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #e7d8c4;
    padding: 14px 0;
}

.paw-topbar__inner {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.paw-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.paw-brand__logo {
    height: 54px;
    width: auto;
    display: block;
}

.paw-main-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.paw-main-nav a {
    text-decoration: none;
    color: #4f2a12;
    font-weight: 700;
    font-size: 0.96rem;
    padding: 10px 14px;
    border-radius: 999px;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.paw-main-nav a:hover {
    background: #efe3d2;
    border-color: #dcc3a6;
}

.paw-main-nav a.is-active {
    background: #5a2f12;
    color: #fff;
    border-color: #5a2f12;
    box-shadow: 0 8px 18px rgba(90, 47, 18, 0.16);
}

.paw-main-nav__logout {
    background: #f6eee5;
    border: 1px solid #dcc3a6 !important;
}

.paw-menu-toggle {
    display: none;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    border: 1px solid #dcc3a6;
    background: #fffaf4;
    cursor: pointer;
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    transition: all 0.2s ease;
}

.paw-menu-toggle:hover {
    background: #f3e7d8;
}

.paw-menu-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: #4f2a12;
    border-radius: 999px;
    transition: all 0.2s ease;
}

/* mobile / tablet */
@media (max-width: 980px) {
    .paw-menu-toggle {
        display: inline-flex;
    }

    .paw-main-nav {
        position: absolute;
        top: calc(100% + 10px);
        right: 16px;
        left: 16px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 14px;
        background: #fffaf4;
        border: 1px solid #e2cfb5;
        border-radius: 22px;
        box-shadow: 0 18px 40px rgba(79, 42, 18, 0.14);
    }

    .paw-main-nav.is-open {
        display: flex;
    }

    .paw-main-nav a {
        width: 100%;
        text-align: left;
        padding: 12px 14px;
        border-radius: 14px;
    }

    .paw-brand__logo {
        height: 46px;
    }
}

@media (max-width: 640px) {
    .paw-topbar__inner {
        width: calc(100% - 20px);
    }

    .paw-brand__logo {
        height: 40px;
    }
}

/* =========================
   Pawline responsive dashboard menu
   ========================= */

.paw-topbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(247, 241, 232, 0.94);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #E2D3BB;
    padding: 14px 0;
}

.paw-topbar__inner {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.paw-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.paw-brand__logo {
    height: 54px;
    width: auto;
    display: block;
}

.paw-main-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.paw-main-nav a {
    text-decoration: none;
    color: #5A3A14;
    font-weight: 800;
    font-size: 14px;
    padding: 10px 14px;
    border-radius: 999px;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.paw-main-nav a:hover {
    background: #EFE3D0;
    border-color: #D9C4A8;
}

.paw-main-nav a.is-active {
    background: #5A3A14;
    color: #FFFDFC;
    border-color: #5A3A14;
    box-shadow: 0 8px 18px rgba(90, 58, 20, 0.16);
}

.paw-main-nav__logout {
    background: #FFFDFC;
    border: 1px solid #D9C4A8 !important;
}

.paw-menu-toggle {
    display: none;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    border: 1px solid #D9C4A8;
    background: #FFFDFC;
    cursor: pointer;
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
}

.paw-menu-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: #5A3A14;
    border-radius: 999px;
}

@media (max-width: 980px) {
    .paw-menu-toggle {
        display: inline-flex;
    }

    .paw-main-nav {
        position: absolute;
        top: calc(100% + 10px);
        right: 16px;
        left: 16px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 14px;
        background: #FFFDFC;
        border: 1px solid #E2D3BB;
        border-radius: 22px;
        box-shadow: 0 18px 40px rgba(61, 40, 23, 0.14);
    }

    .paw-main-nav.is-open {
        display: flex;
    }

    .paw-main-nav a {
        width: 100%;
        text-align: left;
        padding: 12px 14px;
        border-radius: 14px;
    }

    .paw-brand__logo {
        height: 46px;
    }
}

@media (max-width: 640px) {
    .paw-topbar__inner {
        width: calc(100% - 20px);
    }

    .paw-brand__logo {
        height: 40px;
    }
}


/* === Pawline dashboard nav final layout fix === */

/* Same page width for all dashboard/admin screens */
body:has(.paw-topbar) .page {
    width: min(1450px, calc(100% - 32px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Elegant full header block */
.paw-topbar {
    width: 100% !important;
    margin: 0 0 0 0 !important;
    padding: 20px 0 !important;
    background: #F7F1E8 !important;
    border-bottom: 1px solid #E2D3BB !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Header content */
.paw-topbar__inner {
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 0 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 32px !important;
}

/* Logo */
.paw-brand {
    flex: 0 0 auto !important;
}

.paw-brand__logo {
    height: 58px !important;
    max-width: 240px !important;
    width: auto !important;
    display: block !important;
}

/* Desktop menu */
.paw-main-nav {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
}

.paw-main-nav a {
    white-space: nowrap !important;
    text-decoration: none !important;
    color: #5A3A14 !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    padding: 11px 16px !important;
    border-radius: 999px !important;
    border: 1px solid transparent !important;
    line-height: 1 !important;
}

.paw-main-nav a:hover {
    background: #EFE3D0 !important;
    border-color: #D9C4A8 !important;
}

.paw-main-nav a.is-active {
    background: #5A3A14 !important;
    color: #FFFDFC !important;
    border-color: #5A3A14 !important;
    box-shadow: 0 8px 18px rgba(90, 58, 20, 0.16) !important;
}

.paw-main-nav__logout {
    background: #FFFDFC !important;
    border: 1px solid #D9C4A8 !important;
}

/* Hamburguer button hidden on desktop */
.paw-menu-toggle {
    display: none !important;
}

/* Tablet/mobile: use hamburger before menu gets crowded */
@media (max-width: 1180px) {
    .paw-topbar__inner {
        padding: 0 22px !important;
    }

    .paw-menu-toggle {
        display: inline-flex !important;
        width: 48px !important;
        height: 48px !important;
        border-radius: 14px !important;
        border: 1px solid #D9C4A8 !important;
        background: #FFFDFC !important;
        cursor: pointer !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 5px !important;
    }

    .paw-menu-toggle span {
        display: block !important;
        width: 22px !important;
        height: 2px !important;
        background: #5A3A14 !important;
        border-radius: 999px !important;
    }

    .paw-main-nav {
        position: absolute !important;
        top: calc(100% + 10px) !important;
        right: 16px !important;
        left: 16px !important;
        display: none !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        padding: 14px !important;
        background: #FFFDFC !important;
        border: 1px solid #E2D3BB !important;
        border-radius: 22px !important;
        box-shadow: 0 18px 40px rgba(61, 40, 23, 0.14) !important;
        z-index: 2000 !important;
    }

    .paw-main-nav.is-open {
        display: flex !important;
    }

    .paw-main-nav a {
        width: 100% !important;
        text-align: left !important;
        padding: 13px 15px !important;
        border-radius: 14px !important;
    }
}

@media (max-width: 640px) {
    body:has(.paw-topbar) .page {
        width: calc(100% - 20px) !important;
    }

    .paw-topbar__inner {
        padding: 0 14px !important;
    }

    .paw-brand__logo {
        height: 42px !important;
        max-width: 190px !important;
    }
}

/* === End Pawline dashboard nav final layout fix === */


/* === Fix logo clipping in dashboard nav === */

.paw-topbar {
    overflow: visible !important;
}

.paw-topbar__inner {
    overflow: visible !important;
}

/* Give the horizontal logo enough space */
.paw-brand {
    flex: 0 0 285px !important;
    width: 285px !important;
    max-width: 285px !important;
    overflow: visible !important;
}

.paw-brand__logo {
    height: auto !important;
    width: 240px !important;
    max-width: 240px !important;
    object-fit: contain !important;
    display: block !important;
}

/* Let the menu use the remaining space without pushing/cutting logo */
.paw-main-nav {
    min-width: 0 !important;
}

/* Medium screens */
@media (max-width: 1180px) {
    .paw-brand {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
    }

    .paw-brand__logo {
        width: 210px !important;
        max-width: 210px !important;
    }
}

/* Small screens */
@media (max-width: 640px) {
    .paw-brand__logo {
        width: 175px !important;
        max-width: 175px !important;
    }
}

/* === End fix logo clipping in dashboard nav === */


/* === Pawline premium navigation polish === */

/* Full-bleed elegant header, even if the include is inside .page */
.paw-topbar {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    margin-bottom: 28px !important;
    padding: 18px 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 3000 !important;
    overflow: visible !important;

    background:
        radial-gradient(circle at 12% 20%, rgba(255, 253, 252, 0.92), transparent 28%),
        linear-gradient(135deg, #FFFDFC 0%, #F7F1E8 48%, #EFE3D0 100%) !important;

    border-bottom: 1px solid rgba(90, 58, 20, 0.14) !important;
    box-shadow: 0 10px 30px rgba(61, 40, 23, 0.08) !important;
    backdrop-filter: blur(14px) !important;
    animation: pawNavDrop 0.45s ease both !important;
}

/* Centered content inside the full-width bar */
.paw-topbar__inner {
    width: min(1450px, calc(100% - 64px)) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    min-height: 74px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 36px !important;
    overflow: visible !important;
}

/* Brand */
.paw-brand {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
    transition: transform 0.25s ease, opacity 0.25s ease !important;
}

.paw-brand:hover {
    transform: translateY(-1px) scale(1.015) !important;
}

.paw-brand__logo {
    width: 245px !important;
    max-width: 245px !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
}

/* Desktop nav */
.paw-main-nav {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
}

.paw-main-nav a {
    position: relative !important;
    white-space: nowrap !important;
    text-decoration: none !important;

    color: #5A3A14 !important;
    font-weight: 900 !important;
    font-size: 14px !important;
    letter-spacing: -0.1px !important;

    padding: 12px 17px !important;
    border-radius: 999px !important;
    border: 1px solid transparent !important;

    line-height: 1 !important;
    transition:
        transform 0.22s ease,
        background 0.22s ease,
        color 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease !important;
}

.paw-main-nav a:hover {
    transform: translateY(-2px) !important;
    background: rgba(255, 253, 252, 0.74) !important;
    border-color: #D9C4A8 !important;
    box-shadow: 0 10px 22px rgba(61, 40, 23, 0.09) !important;
}

.paw-main-nav a.is-active {
    background: linear-gradient(135deg, #5A3A14, #3D2817) !important;
    color: #FFFDFC !important;
    border-color: #5A3A14 !important;
    box-shadow: 0 12px 26px rgba(90, 58, 20, 0.22) !important;
}

.paw-main-nav__logout {
    background: rgba(255, 253, 252, 0.82) !important;
    border: 1px solid #D9C4A8 !important;
}

/* Hamburger button */
.paw-menu-toggle {
    display: none !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 16px !important;
    border: 1px solid #D9C4A8 !important;
    background: rgba(255, 253, 252, 0.9) !important;
    cursor: pointer !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 5px !important;
    box-shadow: 0 10px 22px rgba(61, 40, 23, 0.08) !important;
    transition: transform 0.22s ease, background 0.22s ease !important;
}

.paw-menu-toggle:hover {
    transform: translateY(-2px) !important;
    background: #FFFDFC !important;
}

.paw-menu-toggle span {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    background: #5A3A14 !important;
    border-radius: 999px !important;
    transition: transform 0.22s ease, opacity 0.22s ease !important;
}

/* Animate hamburger to X */
.paw-menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
}

.paw-menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0 !important;
}

.paw-menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
}

/* Switch earlier to hamburger so it never looks crowded */
@media (max-width: 1220px) {
    .paw-menu-toggle {
        display: inline-flex !important;
    }

    .paw-main-nav {
        position: absolute !important;
        top: calc(100% + 12px) !important;
        right: 24px !important;
        left: 24px !important;

        display: none !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 8px !important;

        padding: 16px !important;
        background: rgba(255, 253, 252, 0.98) !important;
        border: 1px solid #E2D3BB !important;
        border-radius: 24px !important;
        box-shadow: 0 22px 50px rgba(61, 40, 23, 0.18) !important;
        z-index: 4000 !important;

        transform-origin: top center !important;
        animation: pawMenuOpen 0.24s ease both !important;
    }

    .paw-main-nav.is-open {
        display: flex !important;
    }

    .paw-main-nav a {
        width: 100% !important;
        text-align: left !important;
        padding: 14px 16px !important;
        border-radius: 16px !important;
        font-size: 15px !important;
    }

    .paw-topbar__inner {
        width: min(1450px, calc(100% - 36px)) !important;
        min-height: 64px !important;
    }

    .paw-brand__logo {
        width: 220px !important;
        max-width: 220px !important;
    }
}

@media (max-width: 640px) {
    .paw-topbar {
        padding: 14px 0 !important;
        margin-bottom: 20px !important;
    }

    .paw-topbar__inner {
        width: calc(100% - 24px) !important;
        gap: 12px !important;
    }

    .paw-brand__logo {
        width: 180px !important;
        max-width: 180px !important;
    }

    .paw-main-nav {
        left: 12px !important;
        right: 12px !important;
    }
}

/* Page content animation */
body:has(.paw-topbar) .hero,
body:has(.paw-topbar) .card {
    animation: pawFadeUp 0.48s ease both !important;
}

body:has(.paw-topbar) .card {
    animation-delay: 0.06s !important;
}

/* Keyframes */
@keyframes pawNavDrop {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pawMenuOpen {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes pawFadeUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
    .paw-topbar,
    body:has(.paw-topbar) .hero,
    body:has(.paw-topbar) .card,
    .paw-main-nav {
        animation: none !important;
    }

    .paw-main-nav a,
    .paw-brand,
    .paw-menu-toggle {
        transition: none !important;
    }
}

/* === End Pawline premium navigation polish === */



/* === QR Generator filters tab === */

.generator-filter-shell {
    margin: 22px 0 24px;
    border: 1px solid #E2D3BB;
    border-radius: 24px;
    background: linear-gradient(135deg, #FFFDFC 0%, #F7F1E8 100%);
    box-shadow: 0 14px 32px rgba(61, 40, 23, 0.08);
    overflow: hidden;
    animation: pawFadeUp 0.42s ease both;
}

.generator-filter-tab {
    list-style: none;
    cursor: pointer;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    color: #5A3A14;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-bottom: 1px solid #E2D3BB;
    background: rgba(239, 227, 208, 0.55);
}

.generator-filter-tab::-webkit-details-marker {
    display: none;
}

.generator-filter-tab span {
    font-size: 13px;
}

.generator-filter-tab small {
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0;
    color: #7B5A35;
    font-weight: 700;
}

.generator-filter-tab::after {
    content: "⌄";
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #FFFDFC;
    border: 1px solid #D9C4A8;
    color: #5A3A14;
    font-size: 18px;
    transition: transform 0.22s ease;
}

.generator-filter-shell[open] .generator-filter-tab::after {
    transform: rotate(180deg);
}

.generator-filter-content {
    padding: 22px;
    animation: pawFadeUp 0.32s ease both;
}

.generator-filter-content label {
    margin-top: 0;
}

.generator-filter-content input,
.generator-filter-content select {
    transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.generator-filter-content input:focus,
.generator-filter-content select:focus {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(90, 58, 20, 0.10);
}

/* === End QR Generator filters tab === */



/* === Admin list filters === */

.admin-filter-select {
    min-height: 46px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid #E2D3BB;
    background: #FFFDFC;
    color: #5A3A14;
    font-weight: 800;
    font-size: 13px;
    outline: none;
    min-width: 160px;
    box-shadow: 0 8px 20px rgba(61, 40, 23, 0.05);
    transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.admin-filter-select:focus,
.admin-filter-select:hover {
    border-color: #B99063;
    box-shadow: 0 10px 24px rgba(90, 58, 20, 0.10);
    transform: translateY(-1px);
}

.admin-search-row {
    gap: 10px;
}

@media (max-width: 900px) {
    .admin-filter-select {
        width: 100%;
        min-width: 100%;
    }
}

/* === End admin list filters === */


/* === Pawline global premium animations === */

:root {
    --paw-motion-fast: 0.18s;
    --paw-motion-normal: 0.28s;
    --paw-motion-slow: 0.48s;
    --paw-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Page entrance */
body {
    animation: pawPageFade 0.45s var(--paw-ease) both;
}

/* Main sections */
.hero,
.card,
.account-hero,
.admin-shortcuts,
.public-card,
.profile-card,
.form-card,
section[class*="card"],
div[class*="card"] {
    animation: pawFadeUp 0.52s var(--paw-ease) both;
}

/* Stagger common content */
.hero + .card,
.card + .card,
.account-grid,
.table-wrap,
.admin-search-form,
form {
    animation: pawFadeUp 0.58s var(--paw-ease) both;
    animation-delay: 0.05s;
}

/* Cards hover */
.card,
.hero,
.account-hero,
.admin-shortcuts,
.pet-mobile-card,
.qr-card,
.stat,
.security-item {
    transition:
        transform var(--paw-motion-normal) var(--paw-ease),
        box-shadow var(--paw-motion-normal) var(--paw-ease),
        border-color var(--paw-motion-normal) var(--paw-ease),
        background var(--paw-motion-normal) var(--paw-ease);
}

.card:hover,
.pet-mobile-card:hover,
.qr-card:hover,
.stat:hover,
.security-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 52px rgba(61, 40, 23, 0.13);
    border-color: rgba(185, 144, 99, 0.55);
}

/* Buttons and links */
button,
.button,
.pill-button,
.pet-action,
.pet-action-button,
.admin-search-clear,
a.action,
.actions a,
.paw-main-nav a,
.save-button,
.generate-button {
    transition:
        transform var(--paw-motion-fast) var(--paw-ease),
        box-shadow var(--paw-motion-fast) var(--paw-ease),
        background var(--paw-motion-fast) var(--paw-ease),
        color var(--paw-motion-fast) var(--paw-ease),
        border-color var(--paw-motion-fast) var(--paw-ease),
        opacity var(--paw-motion-fast) var(--paw-ease);
}

button:hover,
.button:hover,
.pill-button:hover,
.pet-action:hover,
.pet-action-button:hover,
.admin-search-clear:hover,
a.action:hover,
.actions a:hover,
.save-button:hover,
.generate-button:hover {
    transform: translateY(-2px);
}

button:active,
.button:active,
.pill-button:active,
.pet-action:active,
.pet-action-button:active,
.save-button:active,
.generate-button:active {
    transform: translateY(0) scale(0.98);
}

/* Inputs */
input,
select,
textarea {
    transition:
        transform var(--paw-motion-fast) var(--paw-ease),
        box-shadow var(--paw-motion-fast) var(--paw-ease),
        border-color var(--paw-motion-fast) var(--paw-ease),
        background var(--paw-motion-fast) var(--paw-ease);
}

input:focus,
select:focus,
textarea:focus {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(90, 58, 20, 0.10);
}

/* Tables */
tbody tr {
    animation: pawTableRow 0.42s var(--paw-ease) both;
    transition:
        background var(--paw-motion-fast) var(--paw-ease),
        transform var(--paw-motion-fast) var(--paw-ease);
}

tbody tr:hover {
    background: rgba(247, 241, 232, 0.62);
}

tbody tr:nth-child(1) { animation-delay: 0.02s; }
tbody tr:nth-child(2) { animation-delay: 0.04s; }
tbody tr:nth-child(3) { animation-delay: 0.06s; }
tbody tr:nth-child(4) { animation-delay: 0.08s; }
tbody tr:nth-child(5) { animation-delay: 0.10s; }
tbody tr:nth-child(6) { animation-delay: 0.12s; }
tbody tr:nth-child(7) { animation-delay: 0.14s; }
tbody tr:nth-child(8) { animation-delay: 0.16s; }

/* Badges / status pills */
.status,
.badge,
[class*="status"] {
    transition:
        transform var(--paw-motion-fast) var(--paw-ease),
        box-shadow var(--paw-motion-fast) var(--paw-ease);
}

.status:hover,
.badge:hover {
    transform: translateY(-1px) scale(1.02);
}

/* Messages */
.message,
.alert,
.success,
.error {
    animation: pawNoticeIn 0.42s var(--paw-ease) both;
}

/* Logo */
.paw-brand__logo,
.brand img,
.logo {
    transition:
        transform var(--paw-motion-normal) var(--paw-ease),
        opacity var(--paw-motion-normal) var(--paw-ease);
}

.paw-brand:hover .paw-brand__logo,
.brand:hover img,
.logo:hover {
    transform: translateY(-1px) scale(1.015);
}

/* Images */
img {
    transition:
        transform var(--paw-motion-normal) var(--paw-ease),
        opacity var(--paw-motion-normal) var(--paw-ease);
}

/* Elegant page rhythm */
main.page {
    animation: pawContentIn 0.5s var(--paw-ease) both;
}

/* Keyframes */
@keyframes pawPageFade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes pawContentIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pawFadeUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pawTableRow {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pawNoticeIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Mobile: keep it smooth but lighter */
@media (max-width: 768px) {
    .card:hover,
    .pet-mobile-card:hover,
    .qr-card:hover,
    .stat:hover,
    .security-item:hover {
        transform: none;
    }

    tbody tr {
        animation-delay: 0s !important;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }
}

/* === End Pawline global premium animations === */


/* === Login viewport cleanup final === */

@media (min-width: 901px) {
    html:has(body.auth-access-page),
    body.auth-access-page {
        height: 100%;
        min-height: 100%;
        overflow: hidden !important;
    }

    body.auth-access-page {
        margin: 0 !important;
        background: #EEF8F1 !important;
    }

    body.auth-access-page .wrapper {
        width: 100vw !important;
        height: 100vh !important;
        min-height: 100vh !important;
        display: grid !important;
        grid-template-columns: minmax(480px, 42vw) minmax(0, 1fr) !important;
        overflow: hidden !important;
        background: #EEF8F1 !important;
    }

    body.auth-access-page .panel-left {
        height: 100vh !important;
        overflow: hidden !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background:
            radial-gradient(circle at 20% 15%, rgba(255, 253, 252, 0.08), transparent 32%),
            linear-gradient(135deg, #6A431B 0%, #4F2F12 55%, #3D2817 100%) !important;
    }

    body.auth-access-page .panel-left__inner {
        width: min(520px, calc(100% - 88px)) !important;
        max-height: calc(100vh - 56px) !important;
        padding: 0 !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: clamp(20px, 3vh, 34px) !important;
    }

    body.auth-access-page .panel-left .brand {
        width: auto !important;
        max-width: 360px !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    body.auth-access-page .panel-left .brand__wordmark {
        width: clamp(240px, 23vw, 340px) !important;
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        opacity: 1 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.18)) !important;
    }

    body.auth-access-page .headline__title {
        font-size: clamp(52px, 5vw, 82px) !important;
        line-height: 0.92 !important;
        margin: 0 !important;
    }

    body.auth-access-page .panel-right {
        height: 100vh !important;
        overflow: visible !important;
        padding: 28px clamp(36px, 6vw, 96px) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background:
            radial-gradient(circle at 50% 42%, rgba(214, 237, 221, 0.55), transparent 38%),
            linear-gradient(135deg, #EEF8F1 0%, #F7F1E8 100%) !important;
    }

    body.auth-access-page .panel-right::before,
    body.auth-access-page .panel-right::after,
    body.auth-access-page .view::before,
    body.auth-access-page .view::after,
    body.auth-access-page .form-wrapper::before,
    body.auth-access-page .form-wrapper::after {
        display: none !important;
        content: none !important;
    }

    body.auth-access-page .view,
    body.auth-access-page .form-wrapper {
        width: min(520px, 100%) !important;
        max-width: 520px !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    body.auth-access-page .form-card {
        width: 100% !important;
        max-width: 520px !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 34px 38px !important;
        border-radius: 30px !important;
        background: rgba(255, 253, 252, 0.88) !important;
        border: 1px solid rgba(226, 211, 187, 0.95) !important;
        box-shadow: 0 26px 70px rgba(61, 40, 23, 0.16) !important;
        backdrop-filter: blur(14px) !important;
    }

    body.auth-access-page .mobile-logo {
        display: none !important;
    }

    body.auth-access-page .form-card__header h2 {
        font-size: 40px !important;
        line-height: 1 !important;
        margin-bottom: 8px !important;
    }

    body.auth-access-page .field,
    body.auth-access-page .field-group {
        margin-bottom: 15px !important;
    }

    body.auth-access-page input {
        min-height: 50px !important;
    }

    body.auth-access-page .primary-btn,
    body.auth-access-page .submit-btn,
    body.auth-access-page button[type="submit"] {
        min-height: 54px !important;
        margin-top: 12px !important;
    }

    body.auth-access-page .divider,
    body.auth-access-page .social-divider {
        margin: 18px 0 !important;
    }

    body.auth-access-page .social-grid,
    body.auth-access-page .social-buttons {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }

    body.auth-access-page .social-btn {
        min-height: 50px !important;
    }

    body.auth-access-page .social-btn-instagram,
    body.auth-access-page .instagram-soon,
    body.auth-access-page .soon-social {
        grid-column: 1 / -1 !important;
    }
}

@media (min-width: 901px) and (max-height: 820px) {
    body.auth-access-page .panel-left__inner {
        gap: 18px !important;
    }

    body.auth-access-page .headline__title {
        font-size: clamp(46px, 4.2vw, 68px) !important;
    }

    body.auth-access-page .stats {
        display: none !important;
    }

    body.auth-access-page .form-card {
        padding: 26px 34px !important;
        transform: scale(0.94) !important;
        transform-origin: center center !important;
    }

    body.auth-access-page .form-card__header h2 {
        font-size: 34px !important;
    }

    body.auth-access-page .field,
    body.auth-access-page .field-group {
        margin-bottom: 11px !important;
    }

    body.auth-access-page .divider,
    body.auth-access-page .social-divider {
        margin: 12px 0 !important;
    }
}

@media (max-width: 900px) {
    body.auth-access-page {
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
}

/* === End login viewport cleanup final === */


/* === Fix register view not cut on desktop === */

@media (min-width: 901px) {
    body.auth-access-page.auth-register,
    body.auth-access-page.auth-register-mode {
        overflow: hidden !important;
    }

    body.auth-access-page.auth-register .panel-right,
    body.auth-access-page.auth-register-mode .panel-right {
        align-items: flex-start !important;
        justify-content: center !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-top: 28px !important;
        padding-bottom: 28px !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body.auth-access-page.auth-register .view,
    body.auth-access-page.auth-register-mode .view,
    body.auth-access-page.auth-register .form-wrapper,
    body.auth-access-page.auth-register-mode .form-wrapper {
        max-height: none !important;
        min-height: auto !important;
        height: auto !important;
        overflow: visible !important;
    }

    body.auth-access-page.auth-register .form-card,
    body.auth-access-page.auth-register-mode .form-card {
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
        transform: none !important;
        margin: 0 auto !important;
        padding: 28px 38px !important;
    }

    body.auth-access-page.auth-register .form-card__header,
    body.auth-access-page.auth-register-mode .form-card__header {
        margin-bottom: 18px !important;
    }

    body.auth-access-page.auth-register .field,
    body.auth-access-page.auth-register-mode .field,
    body.auth-access-page.auth-register .field-group,
    body.auth-access-page.auth-register-mode .field-group {
        margin-bottom: 13px !important;
    }

    body.auth-access-page.auth-register input,
    body.auth-access-page.auth-register-mode input {
        min-height: 48px !important;
    }

    body.auth-access-page.auth-register button[type="submit"],
    body.auth-access-page.auth-register-mode button[type="submit"],
    body.auth-access-page.auth-register .primary-btn,
    body.auth-access-page.auth-register-mode .primary-btn,
    body.auth-access-page.auth-register .submit-btn,
    body.auth-access-page.auth-register-mode .submit-btn {
        min-height: 54px !important;
        margin-top: 12px !important;
        margin-bottom: 10px !important;
    }
}

/* En pantallas bajitas, el registro se compacta un poco más, pero nunca se corta */
@media (min-width: 901px) and (max-height: 820px) {
    body.auth-access-page.auth-register .panel-right,
    body.auth-access-page.auth-register-mode .panel-right {
        padding-top: 18px !important;
        padding-bottom: 18px !important;
    }

    body.auth-access-page.auth-register .form-card,
    body.auth-access-page.auth-register-mode .form-card {
        padding: 22px 34px !important;
    }

    body.auth-access-page.auth-register .form-card__header h2,
    body.auth-access-page.auth-register-mode .form-card__header h2 {
        font-size: 32px !important;
    }

    body.auth-access-page.auth-register .field,
    body.auth-access-page.auth-register-mode .field,
    body.auth-access-page.auth-register .field-group,
    body.auth-access-page.auth-register-mode .field-group {
        margin-bottom: 10px !important;
    }
}

/* === End fix register view not cut on desktop === */


/* === Pawline shared dashboard navigation system === */

:root {
    --paw-nav-height: 116px;
}

body:has(.paw-topbar) {
    padding-top: var(--paw-nav-height) !important;
}

.paw-topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;

    margin: 0 !important;
    padding: 18px 0 !important;

    background:
        linear-gradient(90deg, rgba(255, 253, 252, 0.98), rgba(247, 241, 232, 0.96)) !important;
    border-bottom: 1px solid #E2D3BB !important;
    box-shadow: 0 10px 30px rgba(61, 40, 23, 0.06) !important;
    backdrop-filter: blur(10px) !important;

    animation: pawNavEnter 0.42s ease both !important;
    transition:
        padding 0.24s ease,
        box-shadow 0.24s ease,
        background 0.24s ease,
        backdrop-filter 0.24s ease !important;
}

.paw-topbar.paw-topbar--scrolled {
    padding: 10px 0 !important;
    background: rgba(255, 253, 252, 0.94) !important;
    box-shadow: 0 18px 46px rgba(61, 40, 23, 0.13) !important;
    backdrop-filter: blur(16px) !important;
}

.paw-topbar__inner {
    width: min(1450px, calc(100% - 64px)) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    min-height: 74px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 36px !important;
}

.paw-brand {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
}

.paw-brand__logo {
    width: 240px !important;
    max-width: 240px !important;
    height: auto !important;
    display: block !important;
    transition: transform 0.24s ease, opacity 0.24s ease !important;
}

.paw-brand:hover .paw-brand__logo {
    transform: scale(1.025) !important;
}

.paw-main-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 18px !important;
    flex-wrap: nowrap !important;
}

.paw-main-nav a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #4B260D !important;
    text-decoration: none !important;
    font-weight: 900 !important;
    font-size: 15px !important;
    white-space: nowrap !important;

    border-radius: 999px !important;
    padding: 12px 18px !important;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        background 0.22s ease,
        color 0.22s ease,
        opacity 0.22s ease !important;
}

.paw-main-nav a:hover {
    transform: translateY(-2px) !important;
    opacity: 0.92 !important;
}

.paw-main-nav a.is-active,
.paw-main-nav a[aria-current="page"] {
    background: #5A3A14 !important;
    color: #FFFDFC !important;
    box-shadow: 0 14px 34px rgba(61, 40, 23, 0.20) !important;
}

.paw-main-nav__logout {
    background: #FFFDFC !important;
    color: #4B260D !important;
}

.paw-menu-toggle {
    display: none !important;
}

@keyframes pawNavEnter {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1180px) {
    :root {
        --paw-nav-height: 96px;
    }

    .paw-topbar__inner {
        width: calc(100% - 36px) !important;
        gap: 18px !important;
    }

    .paw-brand__logo {
        width: 205px !important;
        max-width: 205px !important;
    }

    .paw-menu-toggle {
        display: inline-flex !important;
        width: 48px !important;
        height: 48px !important;
        border-radius: 14px !important;
        border: 1px solid #D9C4A8 !important;
        background: #FFFDFC !important;
        cursor: pointer !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 5px !important;
        padding: 0 !important;
    }

    .paw-menu-toggle span {
        width: 22px !important;
        height: 2px !important;
        background: #4B260D !important;
        border-radius: 99px !important;
        display: block !important;
    }

    .paw-main-nav {
        position: absolute !important;
        top: calc(100% + 10px) !important;
        left: 18px !important;
        right: 18px !important;
        display: none !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 16px !important;
        border-radius: 22px !important;
        background: #FFFDFC !important;
        border: 1px solid #E2D3BB !important;
        box-shadow: 0 22px 60px rgba(61, 40, 23, 0.18) !important;
    }

    .paw-main-nav.is-open {
        display: grid !important;
        animation: pawNavEnter 0.25s ease both !important;
    }

    .paw-main-nav a {
        width: 100% !important;
    }
}

@media (max-width: 640px) {
    :root {
        --paw-nav-height: 86px;
    }

    .paw-topbar {
        padding: 12px 0 !important;
    }

    .paw-topbar__inner {
        width: calc(100% - 24px) !important;
    }

    .paw-brand__logo {
        width: 170px !important;
        max-width: 170px !important;
    }
}

/* === End Pawline shared dashboard navigation system === */


/* === Pawline fixed dashboard nav on scroll === */

:root {
    --paw-topbar-offset: 118px;
}

body:has(.paw-topbar) {
    padding-top: var(--paw-topbar-offset) !important;
}

.paw-topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    margin: 0 !important;

    animation: pawFixedNavEnter 0.42s ease both !important;

    transition:
        padding 0.24s ease,
        background 0.24s ease,
        box-shadow 0.24s ease,
        backdrop-filter 0.24s ease !important;
}

.paw-topbar.paw-topbar--scrolled {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    background: rgba(255, 253, 252, 0.94) !important;
    backdrop-filter: blur(16px) !important;
    box-shadow: 0 18px 46px rgba(61, 40, 23, 0.13) !important;
}

.paw-topbar__inner,
.paw-brand__logo,
.paw-main-nav,
.paw-main-nav a {
    transition:
        transform 0.22s ease,
        opacity 0.22s ease,
        box-shadow 0.22s ease,
        background 0.22s ease,
        color 0.22s ease !important;
}

.paw-main-nav a:hover {
    transform: translateY(-2px) !important;
}

.paw-main-nav a.is-active,
.paw-main-nav a[aria-current="page"] {
    box-shadow: 0 14px 34px rgba(61, 40, 23, 0.20) !important;
}

.paw-brand:hover .paw-brand__logo {
    transform: scale(1.025) !important;
}

@keyframes pawFixedNavEnter {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 980px) {
    :root {
        --paw-topbar-offset: 96px;
    }

    body:has(.paw-topbar) {
        padding-top: var(--paw-topbar-offset) !important;
    }
}

@media (max-width: 640px) {
    :root {
        --paw-topbar-offset: 86px;
    }
}

/* === End Pawline fixed dashboard nav on scroll === */



/* === Pawline nav soft gradient background === */
.paw-topbar {
    background:
        linear-gradient(
            90deg,
            rgba(255, 252, 247, 0.98) 0%,
            rgba(241, 231, 214, 0.98) 100%
        ) !important;
    overflow: visible !important;
}

.paw-topbar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.22) 0%,
            rgba(255, 255, 255, 0.08) 35%,
            rgba(120, 70, 20, 0.06) 100%
        );
    opacity: 1;
}

.paw-topbar__inner {
    position: relative !important;
    z-index: 1 !important;
}

.paw-topbar.paw-topbar--scrolled {
    background:
        linear-gradient(
            90deg,
            rgba(255, 251, 245, 0.94) 0%,
            rgba(237, 224, 204, 0.95) 100%
        ) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}
/* === End Pawline nav soft gradient background === */