* { box-sizing: border-box; }

    :root{
      --bg:#0b0d10;
      --card:#12161b;
      --text:#eef2f7;
      --muted:#b6c0cc;
      --line:#233041;
      --accent:#7c5cff;
      --ok:#3ddc97;
      --warn:#ffd166;
      --danger:#ff5c7a;
      --shadow:0 10px 30px rgba(0,0,0,.35);
      --radius:18px;

      --violet-border: rgba(124,92,255,.32);
      --violet-glow: 0 0 0 1px rgba(124,92,255,.16), 0 10px 30px rgba(0,0,0,.35);

      /* nesting shades (kept neutral) */
      --nest-1: rgba(10,12,16,.45);
      --nest-2: rgba(10,12,16,.35);
      --nest-3: rgba(10,12,16,.25);
      --nest-rail: rgba(124,92,255,.22);

      /* scope tints (neutralized) */
      --scope-owner: rgba(12,14,18,.6);
      --scope-owner-rail: rgba(124,92,255,.22);
      --scope-owner-card: rgba(12,14,18,.6);
      --scope-owner-card-rail: rgba(124,92,255,.22);

      --scope-alt: rgba(12,14,18,.6);
      --scope-alt-rail: rgba(124,92,255,.22);

      --scope-vet: rgba(12,14,18,.6);
      --scope-micro: rgba(12,14,18,.6);

      --tone-main: rgba(12,14,18,.6);
      --tone-sub: rgba(12,14,18,.6);
    }

    body {
      margin: 0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background:
        radial-gradient(1200px 600px at 20% -10%, rgba(124,92,255,.25), transparent 60%),
        radial-gradient(900px 500px at 90% 10%, rgba(61,220,151,.18), transparent 55%),
        var(--bg);
      background-repeat: no-repeat;
      background-attachment: fixed;
      color: var(--text);
    }

    .wrap {
      max-width: 1100px;
      margin: 0 auto;
      padding: 22px;
    }

    body.admin-embed{
      background: transparent;
    }
    body.admin-embed #siteNav{
      display:none;
    }
    body.admin-embed .wrap{
      max-width:none;
      padding:16px;
    }
    body.admin-embed .badge.floating{
      position: sticky;
      top: 0;
      right: auto;
      bottom: auto;
      margin: 0 0 16px auto;
      padding: 0;
      border: none;
      background: transparent;
      backdrop-filter: none;
      box-shadow: none;
      justify-content: flex-end;
    }
    body.admin-embed .badge.floating .btn{
      min-width: 116px;
    }
    body.admin-embed.admin-section-page .wrap{
      padding: 0;
      max-width: none;
    }
    body.admin-embed.admin-section-page{
      overflow: hidden;
    }
    body.admin-basic-page .grid-top,
    body.admin-section-page .grid-top,
    body.admin-section-page .split{
      grid-template-columns: 1fr;
    }
    body.admin-section-page .wrap{
      max-width: 1180px;
    }
    body.admin-embed.admin-section-page #adminProfileCard,
    body.admin-embed.admin-section-page #adminHealthStack > .card,
    body.admin-embed.admin-section-page #adminLower > .card,
    body.admin-embed.admin-section-page #adminFeeding,
    body.admin-embed.admin-section-page #adminNotes,
    body.admin-embed.admin-section-page #adminDocuments{
      background: transparent;
      border: none;
      box-shadow: none;
      overflow: visible;
    }
    body.admin-embed.admin-section-page #adminProfileCard > h2,
    body.admin-embed.admin-section-page #adminHealthStack > .card > h2,
    body.admin-embed.admin-section-page #adminLower > .card > h2,
    body.admin-embed.admin-section-page #adminFeeding > h2,
    body.admin-embed.admin-section-page #adminNotes > h2,
    body.admin-embed.admin-section-page #adminDocuments > h2{
      display: none;
    }
    body.admin-embed.admin-section-page #adminProfileCard > .pad,
    body.admin-embed.admin-section-page #adminHealthStack > .card > .pad,
    body.admin-embed.admin-section-page #adminLower > .card > .pad,
    body.admin-embed.admin-section-page #adminFeeding > .pad,
    body.admin-embed.admin-section-page #adminNotes > .pad,
    body.admin-embed.admin-section-page #adminDocuments > .pad{
      padding: 0;
    }
    body.admin-embed.admin-section-page #adminOwnersSection,
    body.admin-embed.admin-section-page #adminAlternatesSection,
    body.admin-embed.admin-section-page #adminVetsSection{
      margin-top: 0;
      padding: 0;
      border: none;
      background: transparent;
    }
    body.admin-embed.admin-section-page #adminOwnersSection .small,
    body.admin-embed.admin-section-page #adminAlternatesSection .small,
    body.admin-embed.admin-section-page #adminVetsSection .small{
      display: none;
    }
    body.admin-embed.admin-section-page #adminOwnersSection .itemhead,
    body.admin-embed.admin-section-page #adminAlternatesSection .itemhead,
    body.admin-embed.admin-section-page #adminVetsSection .itemhead{
      justify-content: flex-end;
      margin-bottom: 12px;
    }
    body.admin-embed.admin-section-page .item,
    body.admin-embed.admin-section-page .scope-owner.item,
    body.admin-embed.admin-section-page .scope-alt.item,
    body.admin-embed.admin-section-page .scope-vet.item,
    body.admin-embed.admin-section-page .item.scope-person,
    body.admin-embed.admin-section-page .scope-person .item,
    body.admin-embed.admin-section-page .scope-person .item.scope-sub,
    body.admin-embed.admin-section-page .scope-micro .item,
    body.admin-embed.admin-section-page .item.tone-main,
    body.admin-embed.admin-section-page .item.tone-sub{
      background: var(--nest-1);
    }
    body.admin-embed.admin-section-page .item .item{
      background: var(--nest-2);
    }
    body.admin-embed.admin-section-page .item .item .item{
      background: var(--nest-3);
    }
    body.admin-embed.admin-section-page .person-chip,
    body.admin-embed.admin-section-page .person-chip.ok,
    body.admin-embed.admin-section-page .person-chip.warn,
    body.admin-embed.admin-section-page .person-chip.danger{
      background: rgba(10,12,16,.35);
    }

    .topbar{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
      justify-content:space-between;
      margin-bottom:14px;
    }

    .badge{
      display:flex;
      gap:10px;
      align-items:center;
      padding:10px 12px;
      border-radius:999px;
      border:1px solid var(--line);
      background: rgba(18,22,27,.65);
      backdrop-filter: blur(8px);
    }
    .pet-switcher{min-width:260px}
    .pet-switcher-inner{
      display:flex;
      align-items:center;
      gap:10px;
      width:100%;
    }
    .pet-switcher .select{
      flex:1 1 auto;
      background: rgba(10,12,16,.6);
      color: var(--text);
      border:1px solid var(--line);
      border-radius: 10px;
      padding:6px 28px 6px 10px;
      font-weight:600;
      font-size:13px;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23c9d3e3' d='M1 0l4 4 4-4 1 1-5 5L0 1z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 10px center;
    }
    .pet-switcher .select:focus{outline:none; border-color: rgba(124,92,255,.6)}
    .badge.center{ margin: 0 auto; }
    .badge.right{ margin-left: auto; }
    .badge.floating{
      position: fixed;
      right: 18px;
      bottom: 18px;
      z-index: 9999;
    }
    .badge.floating.logout-pill{
      top: 18px;
      bottom: auto;
    }
    .dot{
      width:10px;height:10px;border-radius:50%;
      background:var(--danger);
      box-shadow:0 0 0 4px rgba(255,92,122,.18);
      display:inline-block;
      text-decoration:none;
    }
    .dot.pulse{
      animation: dotPulse 2.4s ease-out infinite;
    }
    @keyframes dotPulse{
      0%{ opacity: 1; box-shadow:0 0 0 3px rgba(255,92,122,.18); }
      100%{ opacity: .1; box-shadow:0 0 0 6px rgba(255,92,122,0); }
    }

    .muted { color: var(--muted); font-size: 13px; }

    .btn {
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: rgba(12,14,18,.6);
      color: var(--text);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      line-height: 1;
      cursor: pointer;
      font-weight: 650;
      white-space: nowrap;
      text-decoration: none;
    }
    .btn:hover { border-color: var(--accent); }
    .btn.primary {
      border-color: var(--accent);
      background: rgba(124,92,255,.12);
    }
    .btn.remove { border-color: var(--danger); }
    .btn.remove:hover { border-color: var(--danger); }
    .btn.small{
      padding:6px 10px;
      font-size:12px;
    }
    .btn:disabled{
      opacity:.45;
      cursor: not-allowed;
    }
    .itemhead{align-items:center}
    .input-date,
    select.match-date{
      height: 40px;
    }
    .checkbox{
      display:inline-flex;
      align-items:center;
      gap:6px;
    }
    .checkbox input{
      margin:0;
      width:16px;
      height:16px;
      accent-color: var(--accent);
    }
    input:disabled{
      opacity:.6;
      background: rgba(12,14,18,.5);
      cursor: not-allowed;
    }
    .item.ok{ border-color: rgba(61,220,151,.55); }
    .item.warn{ border-color: rgba(255,209,102,.6); }
    .item.danger{ border-color: rgba(255,92,122,.65); }

    .grid-top{
      display:grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap:18px;
    }
    .stack{
      display:grid;
      gap:18px;
      align-content:start;
    }
    @media (max-width: 900px){
      .grid-top{ grid-template-columns: 1fr; }
    }

    .split{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:18px;
      margin-top:18px;
    }
    @media (max-width: 900px){
      .split{ grid-template-columns: 1fr; }
    }

    .card {
      background: linear-gradient(180deg, rgba(18,22,27,.92), rgba(15,19,24,.92));
      border: 1px solid var(--violet-border);
      border-radius: var(--radius);
      box-shadow: var(--violet-glow);
      overflow: hidden;
    }
    .weight-sparkline{
      display:block;
      width:100%;
      max-width:260px;
      height:48px;
      margin:6px 0 10px;
    }
    .weight-sparkline polyline{
      fill:none;
      stroke:#7a64ff;
      stroke-width:2.2;
      stroke-linecap:round;
      stroke-linejoin:round;
      opacity:.9;
    }
    .weight-sparkline circle{
      fill:#3ddc97;
      stroke:#0b0f14;
      stroke-width:2;
    }

    .card h2 {
      margin: 0;
      padding: 16px 18px;
      font-size: 15px;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--muted);
      border-bottom: 1px solid var(--line);
      background: rgba(0,0,0,.12);
    }

    .pad { padding: 18px; }

    label {
      display:block;
      margin: 10px 0 6px;
      color: var(--muted);
      font-size: 12px;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    input, textarea, select {
      width: 100%;
      max-width: 100%;
      padding: 10px;
      border-radius: 10px;
      border: 1px solid var(--line);
      background: #0f1318;
      color: var(--text);
      outline: none;
      min-width: 0;
    }
    select { height: 36px; }
    textarea { min-height: 90px; resize: vertical; }

    .grid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:12px;
      align-items:start;
    }
    .grid-4{
      display:grid;
      grid-template-columns: 150px 1fr auto auto;
      gap:12px;
      align-items:end;
    }
    .grid-addr{
      display:grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap:12px;
      align-items:end;
    }
    .grid-addr .full{
      grid-column: 1 / -1;
    }
    @media (max-width: 760px){
      .grid{ grid-template-columns: 1fr; }
      .grid-4{ grid-template-columns: 1fr; }
      .grid-addr{ grid-template-columns: 1fr; }
    }
    .select-sm{ max-width: 150px; }

    .bar {
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
      justify-content:flex-start;
      margin-top:12px;
    }
    .bar .push-right{ margin-left:auto; }

    /* ---------- Nested readability ---------- */

    .item {
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 12px;
      background: var(--nest-1);
      margin-top: 12px;
      position: relative;
    }
    .item.no-box{
      border: none;
      background: transparent;
      padding: 0;
      margin: 0;
      display: contents;
    }

    .item .item {
      background: var(--nest-2);
      border-color: rgba(35,48,65,.9);
      padding: 12px;
      margin-top: 10px;
    }

    .item .item .item {
      background: var(--nest-3);
      border-color: rgba(35,48,65,.85);
      padding: 12px;
      margin-top: 10px;
    }

    .item::before{ display:none; }

    .itemhead {
      display:flex;
      gap:10px;
      align-items:center;
      justify-content:space-between;
      flex-wrap: wrap;
      margin-bottom: 6px;
    }

    .small { font-size: 12px; color: var(--muted); }

    .divider { height:1px; background: var(--line); margin:14px 0; }

    .toast{
      position: fixed;
      right: 18px;
      bottom: 110px;
      padding: 10px 14px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: rgba(18,22,27,.9);
      color: var(--text);
      box-shadow: var(--shadow);
      opacity: 0;
      transform: translateY(-6px);
      pointer-events: none;
      transition: opacity .18s ease, transform .18s ease;
      z-index: 10020;
    }
    .toast.show{ opacity: 1; transform: translateY(0); }
    .toast.ok{ border-color: rgba(61,220,151,.6); }
    .toast.danger{ border-color: var(--danger); }

    .admin-modal{
      position: fixed;
      inset: 0;
      background: rgba(11,13,16,.96);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      padding: 20px;
    }
    .admin-modal.show{ display:flex; }
    .admin-modal-card{
      width: min(900px, 96vw);
      max-height: 92vh;
      overflow: hidden;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 18px;
      box-shadow: var(--shadow);
      display:flex;
      flex-direction:column;
    }
    .admin-modal-head{
      padding: 14px 18px;
      border-bottom: 1px solid var(--line);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .admin-modal-title{
      margin:0;
      font-size: 14px;
      letter-spacing:.08em;
      text-transform: uppercase;
      color: var(--muted);
    }
    .admin-modal-body{
      padding: 16px 18px;
      overflow:auto;
    }
    .admin-modal-foot{
      padding: 12px 18px;
      border-top: 1px solid var(--line);
      display:flex;
      gap:10px;
      justify-content:flex-end;
      flex-wrap:wrap;
    }
    .admin-modal-foot.split{
      justify-content:space-between;
      align-items:center;
    }
    .admin-modal-foot .foot-left{
      display:flex;
      align-items:center;
      gap:8px;
      flex:1 1 auto;
    }
    .admin-modal-foot .foot-right{
      display:flex;
      align-items:center;
      gap:10px;
      flex:0 0 auto;
    }
    #ownerModal .admin-modal-card,
    #altModal .admin-modal-card{
      width:min(1020px, 96vw);
    }
    .person-modal-form{
      display:grid;
      gap:14px;
    }
    .vet-modal-form{
      display:grid;
      gap:14px;
    }
    .person-modal-group{
      display:grid;
      gap:8px;
    }
    .person-modal-group-title{
      font-size:12px;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:var(--muted);
      font-weight:700;
    }
    .person-modal-grid{
      display:grid;
      gap:10px;
      align-items:end;
    }
    .person-modal-grid-1{
      grid-template-columns:1fr;
    }
    .vet-modal-top-row{
      grid-template-columns:minmax(0,1.35fr) minmax(120px,.8fr) minmax(0,1.2fr);
    }
    .person-modal-grid-2{
      grid-template-columns:1fr 1fr;
    }
    .person-modal-grid-3{
      grid-template-columns:1.3fr .8fr .7fr;
    }
    .person-modal-address-row{
      grid-template-columns:minmax(0,1.8fr) minmax(0,1.1fr) minmax(0,1.1fr) minmax(86px,.7fr) minmax(96px,.8fr);
    }
    .person-modal-grid-auto{
      grid-template-columns:minmax(0,1fr) auto;
    }
    .person-modal-repeat-list{
      display:grid;
      gap:4px;
    }
    .person-modal-repeat-row{
      display:grid;
      gap:10px;
      padding:4px 0;
      border-top:1px solid rgba(255,255,255,.08);
    }
    .person-modal-repeat-row:first-child{
      border-top:0;
      padding-top:0;
    }
    .person-modal-phone-row{
      grid-template-columns:minmax(120px,.75fr) minmax(0,1.5fr) auto auto;
      align-items:center;
    }
    .person-modal-email-row{
      grid-template-columns:minmax(120px,.75fr) minmax(0,1.5fr) auto;
      align-items:center;
    }
    .vet-modal-contact-row{
      grid-template-columns:minmax(108px,.72fr) minmax(146px,1.2fr) auto minmax(0,1.3fr);
      align-items:center;
    }
    .person-modal-add-btn{
      justify-self:flex-start;
      margin-top:4px;
    }
    .person-modal-checkbox{
      display:inline-flex;
      align-items:center;
      gap:8px;
      margin:0;
      min-height:36px;
      text-transform:none;
      letter-spacing:normal;
      font-size:12px;
      color:var(--text);
    }
    .person-modal-checkbox input{
      width:auto;
      margin:0;
      min-width:0;
      padding:0;
    }
    .person-modal-photo-actions{
      display:flex;
      align-items:flex-end;
      justify-content:flex-end;
    }
    .person-modal-photo-preview{
      margin-top:4px;
    }
    .person-modal-form label{
      margin:4px 0;
      font-size:11px;
    }
    .vet-modal-form label{
      margin:4px 0;
      font-size:11px;
    }
    .person-photo-inline{
      display:flex;
      align-items:center;
      gap:12px;
      flex-wrap:wrap;
    }
    .person-photo-inline img{
      width:84px;
      height:84px;
      object-fit:cover;
      border-radius:10px;
      border:1px solid var(--line);
      background:rgba(10,12,16,.35);
    }
    @media (max-width: 760px){
      .person-modal-grid-2,
      .person-modal-grid-3,
      .vet-modal-top-row,
      .person-modal-address-row,
      .person-modal-grid-auto{
        grid-template-columns:1fr;
      }
      .person-modal-phone-row{
        grid-template-columns:minmax(92px,.72fr) minmax(138px,1.45fr) auto auto;
      }
      .person-modal-email-row{
        grid-template-columns:minmax(92px,.72fr) minmax(168px,1.45fr) auto;
      }
      .person-modal-repeat-list{
        overflow-x:auto;
      }
      .vet-modal-contact-row{
        grid-template-columns:minmax(92px,.72fr) minmax(130px,1.1fr) auto minmax(168px,1.2fr);
      }
      .person-modal-photo-actions{
        justify-content:flex-start;
      }
    }

    .photo-grid{
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap:10px;
      margin-top:10px;
    }
    .photo-card{
      position:relative;
      border:1px solid var(--line);
      border-radius:12px;
      overflow:hidden;
      background: rgba(10,12,16,.45);
    }
    .photo-card.is-profile{
      border-color: rgba(157,124,255,.7);
      box-shadow: 0 0 0 1px rgba(157,124,255,.22) inset;
    }
    .photo-select-btn{
      position:absolute;
      top:8px;
      right:8px;
      width:28px;
      height:28px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.3);
      background: rgba(10,12,16,.72);
      color:#fff;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      z-index:2;
      transition: border-color .15s ease, background .15s ease, transform .05s ease;
    }
    .photo-select-btn span{
      font-size:15px;
      line-height:1;
      opacity:0;
    }
    .photo-select-btn:hover{
      border-color: rgba(157,124,255,.75);
      background: rgba(24,18,36,.82);
    }
    .photo-select-btn:active{
      transform: translateY(1px);
    }
    .photo-select-btn.is-active{
      border-color: rgba(157,124,255,.88);
      background: linear-gradient(180deg, rgba(157,124,255,.55), rgba(123,77,255,.42));
      box-shadow: 0 0 0 1px rgba(157,124,255,.2) inset;
    }
    .photo-select-btn.is-active span{
      opacity:1;
    }
    .photo-card img{
      width:100%;
      height:120px;
      object-fit: contain;
      display:block;
      background: #0a0c10;
    }
    .photo-card.small img{ height: 90px; }
    .photo-card .meta{
      padding:8px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:8px;
    }
    .person-chip{
      display:flex;
      align-items:center;
      gap:10px;
      padding:10px 12px;
      border-radius:14px;
      border:1px solid var(--line);
      background: rgba(10,12,16,.35);
      position: relative;
    }
    .person-chip.ok{
      border-color: rgba(61,220,151,.6);
      background: linear-gradient(180deg, rgba(61,220,151,.14), rgba(10,12,16,.35));
    }
    .person-chip.warn{
      border-color: rgba(255,209,102,.65);
      background: linear-gradient(180deg, rgba(255,209,102,.16), rgba(10,12,16,.35));
    }
    .person-chip.danger{
      border-color: rgba(255,92,122,.7);
      background: linear-gradient(180deg, rgba(255,92,122,.18), rgba(10,12,16,.35));
    }
    .person-chip .spacer{ flex:1; }
    .person-chip .actions{
      display:flex;
      gap:8px;
      align-items:center;
    }
    .avatar{
      width:36px;
      height:36px;
      border-radius:999px;
      border:1px solid var(--line);
      background: rgba(12,14,18,.6);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
      flex: 0 0 auto;
    }
    .avatar img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }
    .avatar svg{
      width:18px;
      height:18px;
      opacity:.9;
    }
    .avatar img.vet-logo{
      width:18px;
      height:18px;
      object-fit:contain;
      opacity:.9;
    }
    .avatar img.vax-logo{
      width:18px;
      height:18px;
      object-fit:contain;
      opacity:.9;
    }
    .avatar img.med-logo{
      width:18px;
      height:18px;
      object-fit:contain;
      opacity:.9;
    }
    .avatar img.allergy-logo{
      width:18px;
      height:18px;
      object-fit:contain;
      opacity:.9;
    }
    .person-name{
      font-weight:650;
      font-size:13px;
      color: var(--text);
      max-width:260px;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .person-sub{
      font-size:12px;
      color: var(--muted);
      margin-top:2px;
    }

    /* ---------- Scope tinting ---------- */
    .scope-owner.item { background: linear-gradient(180deg, var(--scope-owner), var(--nest-1)); }
    .scope-owner.item::before { background: var(--scope-owner-rail); }

    .scope-alt.item { background: linear-gradient(180deg, var(--scope-alt), var(--nest-1)); }
    .scope-alt.item::before { background: var(--scope-alt-rail); }

    .scope-vet.item {
      background: linear-gradient(180deg, var(--tone-main), var(--nest-1));
      border-color: rgba(57,255,195,.32);
    }

    .scope-micro .item { background: linear-gradient(180deg, var(--scope-micro), var(--nest-1)); }
    .scope-micro .item::before { background: rgba(255,92,122,.22); }

    .item.scope-person {
      background: linear-gradient(180deg, var(--scope-person-main), var(--nest-1));
      border-color: rgba(57,255,195,.32);
    }
    .item.scope-person::before { background: var(--scope-person-rail); }

    .scope-person .item {
      background: linear-gradient(180deg, var(--scope-person-main), var(--nest-1));
      border-color: rgba(57,255,195,.32);
    }
    .scope-person .item::before { background: var(--scope-person-rail); }
    .scope-person .item.scope-sub {
      background: linear-gradient(180deg, var(--scope-person-sub), var(--nest-2));
      border-color: rgba(56,196,255,.32);
    }
    .scope-person .item.scope-sub::before { background: var(--scope-person-sub-rail); }

    .scope-person.owner {
      --scope-person-main: var(--scope-owner-card);
      --scope-person-rail: var(--scope-owner-card-rail);
    }
    .scope-person.alt {
      --scope-person-main: var(--tone-main);
      --scope-person-rail: var(--scope-owner-card-rail);
    }

    .item.tone-main{
      background: linear-gradient(180deg, var(--tone-main), var(--nest-1));
      border-color: rgba(57,255,195,.32);
    }
    .item.tone-sub{
      background: linear-gradient(180deg, var(--tone-sub), var(--nest-2));
      border-color: rgba(56,196,255,.32);
    }
    .auth-overlay{
      position: fixed;
      inset: 0;
      background: rgba(8,10,14,.72);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 10000;
      padding: 24px;
    }
    .auth-card{
      width: min(420px, 100%);
      background: rgba(12,14,18,.95);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 18px;
      box-shadow: 0 20px 60px rgba(0,0,0,.45);
    }
    .auth-card h3{
      margin: 0 0 10px;
      font-size: 16px;
    }
    .auth-hint{
      margin: 0 0 12px;
      font-size: 13px;
    }
    .auth-totp{
      margin-top: 10px;
    }
    .auth-actions{
      display:flex;
      gap:10px;
      margin-top:12px;
      flex-wrap: wrap;
    }
    .auth-actions .btn{
      flex: 1 1 120px;
    }
    .auth-error{
      color: var(--danger);
      font-size: 12px;
      margin-top: 8px;
    }

/* Inline style extraction */
.inline-style-1{margin-top:10px}
.inline-style-2{font-weight:800}
.inline-style-3{margin-top:0}
.inline-style-4{margin:0}
.inline-style-5{margin:0; white-space:nowrap; margin-left:auto}
.inline-style-6{display:none; margin-top:14px}
.inline-style-7{grid-column:1/-1}
.inline-style-8{display:inline-flex; align-items:center; gap:8px}
.inline-style-9{margin-top:18px}
.inline-style-10{margin-bottom:12px; font-size:14px}
.inline-style-11{margin-top:8px}
.inline-style-12{display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap}
.inline-style-13{background:#fff; padding:8px; border-radius:12px}
.inline-style-14{display:block; width:260px; height:260px}
.inline-style-15{min-width:220px}
.inline-style-16{margin-top:6px; position:absolute; left:-10000px; opacity:0; pointer-events:none}

/* Inline style extraction (JS templates) */
.js-inline-style-2{color:rgba(238,242,247,.85)}
.js-inline-style-3{margin-top:8px}
.js-inline-style-4{min-width:0}
.js-inline-style-5{grid-column:1/-1}
.js-inline-style-6{margin-top:12px}
.js-inline-style-7{margin-top:10px}
.js-inline-style-8{font-weight:650}
.js-inline-style-9{word-break:break-word}
.js-inline-style-10{display:flex; gap:8px; align-items:center}
.js-inline-style-12{display:flex; gap:8px; flex-wrap:wrap}

.rot-0{transform:rotate(0deg);}
.rot-90{transform:rotate(90deg);}
.rot-180{transform:rotate(180deg);}
.rot-270{transform:rotate(270deg);}

.weight-trend-panel{
  margin:12px 0 14px;
  padding:14px 14px 10px;
  border:1px solid var(--stroke);
  border-radius:16px;
  background:var(--glass);
}
.weight-trend-panel.is-empty{
  padding-bottom:14px;
}
.weight-trend-summary{
  display:grid;
  gap:4px;
  margin-bottom:10px;
}
.weight-trend-summary > div:first-child{
  font-weight:700;
}
.weight-trend-empty{
  font-size:13px;
}
.weight-trend-chart{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
}
.weight-trend-svg{
  display:block;
  width:100%;
  min-width:620px;
  height:auto;
}
.weight-trend-grid{
  stroke: color-mix(in srgb, var(--stroke) 74%, transparent);
  stroke-width:1;
  stroke-dasharray:4 5;
}
.weight-trend-axis{
  stroke: color-mix(in srgb, var(--text) 20%, var(--stroke));
  stroke-width:1.5;
}
.weight-trend-axis-mark{
  stroke: color-mix(in srgb, var(--text) 28%, var(--stroke));
  stroke-width:1.25;
}
.weight-trend-line{
  fill:none;
  stroke: var(--accent);
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.weight-trend-point{
  fill: var(--accent);
  stroke: var(--bg);
  stroke-width:2;
}
.weight-trend-tick{
  fill: var(--muted);
  font-size: 12px;
}
.weight-trend-axis-title{
  fill: var(--text);
  font-size: 12px;
  font-weight: 650;
}

.pet-photo-editor-card{
  width: min(980px, 96vw);
}
.pet-photo-editor-grid{
  display:grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.pet-photo-editor-controls{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.pet-photo-editor-group{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.pet-photo-editor-source{
  word-break: break-word;
}
.pet-photo-editor-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.pet-photo-editor-row label{
  margin:0;
}
.pet-photo-editor-btns{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.pet-photo-editor-preview{
  display:flex;
  flex-direction:column;
  gap:8px;
}
#petPhotoEditorCanvas{
  width:100%;
  height:auto;
  aspect-ratio: 5 / 3;
  display:block;
  border-radius:14px;
  border:1px solid rgba(157,124,255,.24);
  background: rgba(8,10,14,.86);
  cursor: grab;
  touch-action: none;
}
#petPhotoEditorCanvas.is-dragging{
  cursor: grabbing;
}
@media (max-width: 900px){
  .pet-photo-editor-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px){
  body{
    background-attachment: scroll;
  }
  .wrap{
    padding: 14px;
  }
  .topbar{
    align-items: stretch;
  }
  .pet-switcher{
    min-width: 0;
    width: 100%;
  }
  .badge{
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .badge.floating{
    left: 12px;
    right: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 8px;
    border-radius: 14px;
    background: rgba(12,14,18,.92);
    box-shadow: 0 18px 34px rgba(0,0,0,.4);
  }
  .badge.floating .btn{
    width: 100%;
    min-height: 42px;
  }
  .grid-top,
  .split{
    gap: 14px;
  }
  .pad{
    padding: 14px;
  }
  .item{
    padding: 10px;
  }
  .person-chip{
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .person-chip .actions{
    width: 100%;
    justify-content: flex-start;
  }
  .admin-modal{
    padding: 0;
    align-items: flex-end;
  }
  .admin-modal-card{
    width: 100vw;
    max-height: min(92vh, 840px);
    border-radius: 18px 18px 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }
  .admin-modal-head{
    padding: 12px 14px;
  }
  .admin-modal-body{
    padding: 12px 14px;
  }
  .admin-modal-foot{
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .admin-modal-foot .btn{
    flex: 1 1 140px;
    min-height: 42px;
  }
  .admin-modal-foot.split .foot-left,
  .admin-modal-foot.split .foot-right{
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .admin-modal-foot.split .foot-right .btn{
    flex: 1 1 140px;
  }
  .pet-photo-editor-card{
    width: 100vw;
    max-height: 100vh;
    border-radius: 0;
  }
  .pet-photo-editor-grid{
    gap: 12px;
  }
  .weight-trend-svg{
    min-width: 0;
  }
}

@media (max-width: 640px){
  .wrap{
    padding: 10px;
  }
  .card h2{
    padding: 12px 14px;
  }
  .person-name{
    max-width: none;
  }
  .itemhead .btn{
    min-height: 38px;
  }
  .bar .btn{
    flex: 1 1 140px;
  }
  .grid-top,
  .split{
    gap: 10px;
  }
  .family-pet-row{
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .family-pet-actions{
    width: 100%;
  }
  .family-pet-actions .btn{
    flex: 1 1 120px;
  }
}

@media (max-width: 420px){
  .badge.floating{
    grid-template-columns: 1fr;
  }
  .badge.floating .btn{
    min-height: 44px;
  }
}