/* ============ TOKENS ============ */
:root{
  --paper:#F5F3EF;
  --paper-dim:#EFEAE3;
  --paper-strong:#E8E1D7;
  --ink:#16242A;
  --ink-soft:#4E5E62;
  --petrol:#173E49;
  --petrol-deep:#0E2D36;
  --petrol-soft:#EAF1F2;
  --coral:#E8684D;
  --coral-deep:#D85B42;
  --mustard:#D8A32B;
  --sage:#5D8073;
  --line:#D9D4CB;
  --white:#FFFFFF;

  --display:'Fraunces', serif;
  --body:'Inter', sans-serif;
  --mono:'JetBrains Mono', monospace;

  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;
  --radius-btn:10px;

  --shadow-card: 0 20px 44px -18px rgba(14,45,54,0.28);
  --shadow-soft: 0 10px 22px -14px rgba(17,35,39,0.22);

  --ease: cubic-bezier(.22,.75,.28,1);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--body);
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
ul{list-style:none;}
input,select,textarea{font-family:inherit;}

.wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
@media (max-width:640px){.wrap{padding:0 20px;}}

::selection{background:var(--coral);color:var(--white);}
:focus-visible{outline:3px solid rgba(232,104,77,0.45);outline-offset:3px;border-radius:4px;}

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

/* ============ REVEAL ON SCROLL ============ */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1);}
.reveal.is-visible{opacity:1; transform:translateY(0);}
.reveal-stagger > *{opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1);}
.reveal-stagger.is-visible > *{opacity:1; transform:translateY(0);}
.reveal-stagger.is-visible > *:nth-child(1){transition-delay:.05s;}
.reveal-stagger.is-visible > *:nth-child(2){transition-delay:.15s;}
.reveal-stagger.is-visible > *:nth-child(3){transition-delay:.25s;}
.reveal-stagger.is-visible > *:nth-child(4){transition-delay:.35s;}

/* ============ NAV ============ */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(245,243,239,0.86);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(17,35,39,0.08);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:13px 0; gap:18px;}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:600; font-size:1.12rem; color:var(--petrol-deep); letter-spacing:-0.02em;}
@media (max-width:640px){.brand{font-size:0.95rem; gap:8px;}}
.brand .tag-dot{width:10px;height:10px;border-radius:50%;background:var(--coral); box-shadow:0 0 0 4px rgba(232,104,77,0.12); animation:pulse-dot 2.6s ease-in-out infinite;}
@keyframes pulse-dot{0%,100%{box-shadow:0 0 0 4px rgba(232,104,77,0.12);} 50%{box-shadow:0 0 0 8px rgba(232,104,77,0.06);}}
.nav-links{display:flex; gap:32px; align-items:center;}
.nav-links a{font-size:0.88rem; font-weight:500; color:var(--ink-soft); transition:color .2s; position:relative; padding-bottom:2px;}
.nav-links a::after{content:""; position:absolute; left:0; bottom:0; width:0; height:1.5px; background:var(--coral); transition:width .25s var(--ease);}
.nav-links a:hover{color:var(--petrol-deep);}
.nav-links a:hover::after{width:100%;}
.nav-actions{display:flex; align-items:center; gap:12px;}
.nav-cta{background:var(--petrol-deep); color:var(--white); padding:10px 20px; border-radius:var(--radius-btn); font-weight:600; font-size:0.86rem; transition:transform .18s ease, box-shadow .18s ease, background .18s; box-shadow:0 14px 24px -16px rgba(14,45,54,0.8); position:relative; overflow:hidden;}
.nav-cta:hover{background:var(--coral-deep); transform:translateY(-1px); box-shadow:0 18px 34px -18px rgba(216,91,66,0.8);}
.nav-user{display:flex; align-items:center; gap:14px;}
.dashboard-share-btn{width:34px; height:34px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:50%; color:var(--petrol-deep); background:var(--white);}
.dashboard-share-btn svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.dashboard-user-name{display:flex; align-items:center; gap:7px; color:var(--petrol-deep); font-size:.84rem;}
.dashboard-user-name svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.install-app-btn{display:inline-flex; align-items:center; gap:6px; padding:8px 10px; border:1px solid var(--line); border-radius:9px; background:var(--white); color:var(--petrol-deep); font-size:.7rem; font-weight:700;}
.install-app-btn:hover{border-color:var(--petrol); background:var(--petrol-soft);}
.install-app-btn svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.dashboard-brand-short{display:none;}
.nav-avatar{width:36px;height:36px;border-radius:50%;background:var(--petrol); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.85rem; box-shadow:0 12px 24px -18px rgba(14,45,54,0.8);}
.nav-toggle{display:none; width:42px; height:42px; border-radius:12px; background:var(--white); border:1px solid var(--line); padding:10px 9px; align-items:center; justify-content:center; gap:4px; flex-direction:column;}
.nav-toggle span{display:block; width:18px; height:2px; background:var(--ink); border-radius:2px; transition:all .25s ease;}
.mobile-menu{display:none; border-top:1px solid rgba(17,35,39,0.08); background:rgba(255,255,255,0.8);}
.mobile-menu.is-open{display:block;}
.mobile-menu-inner{display:flex; flex-direction:column; gap:14px; padding:18px 20px 22px;}
.mobile-menu-inner a{font-size:0.94rem; color:var(--ink-soft); font-weight:600; padding:8px 0; border-bottom:1px solid rgba(17,35,39,0.06);}
.nav-cta-mobile{width:100%; justify-content:center; margin-top:4px; display:inline-flex;}

@media (max-width:860px){
  .nav-links{display:none;}
  .nav-cta{display:none;}
  .nav-toggle{display:flex;}
}

/* ============ HERO ============ */
.hero{position:relative; padding:44px 0 36px; overflow:hidden;}
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(120deg, rgba(17,35,39,0.03) 0%, rgba(17,35,39,0) 30%, rgba(232,104,77,0.04) 100%),
    linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 100%);
  pointer-events:none;
}
.hero::after{
  content:""; position:absolute; inset:12% 8% auto auto; width:420px; height:420px; border-radius:50%; border:1px solid rgba(14,45,54,0.10); box-shadow:0 0 0 24px rgba(14,45,54,0.02), 0 0 0 54px rgba(14,45,54,0.012); pointer-events:none;}
.hero-grid{position:relative; display:grid; grid-template-columns:1.08fr 0.92fr; gap:56px; align-items:center;}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr; gap:64px;}}

.hero-copy{position:relative; z-index:1;}
.hero-title-wrap{position:relative; display:inline-block; padding:12px 0 4px; margin-top:0;}
.hero-collage{position:absolute; inset:-46px -20px 10px -24px; z-index:0; pointer-events:none; filter:saturate(1.05) contrast(1.05);}
.hero-collage::before{content:""; position:absolute; inset:18% 10% 10% 8%; background:linear-gradient(135deg, rgba(232,104,77,0.18), rgba(23,62,73,0.18), rgba(93,128,115,0.14)); border-radius:28px; transform:rotate(-5deg);}
.collage-photo{position:absolute; overflow:hidden; border-radius:24px; border:2px solid rgba(255,255,255,0.35); box-shadow:0 20px 40px -22px rgba(14,45,54,0.55);}
.collage-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.photo-a{width:180px; height:180px; right:4%; top:0; transform:rotate(11deg);}
.photo-b{width:150px; height:150px; left:20%; bottom:14%; transform:rotate(-9deg);}
.photo-c{width:220px; height:160px; right:18%; bottom:-10px; transform:rotate(4deg);}

.eyebrow{display:none;}

h1.hero-title{position:relative; z-index:2; font-family:var(--display); font-weight:600; font-size:clamp(2.15rem, 4vw, 3.35rem); line-height:1.06; letter-spacing:-0.02em; color:var(--petrol-deep); margin-bottom:16px; max-width:560px; text-shadow:0 10px 32px rgba(255,255,255,0.3);}
h1.hero-title span{display:inline-block; font-weight:700; color:var(--coral-deep); letter-spacing:-0.045em;}
.hero-sub{font-size:1.02rem; line-height:1.55; color:var(--ink-soft); max-width:490px; margin-bottom:22px; position:relative; z-index:2;}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:24px; position:relative; z-index:2;}
.btn-primary{background:var(--coral); color:var(--white); padding:13px 24px; border-radius:var(--radius-btn); font-weight:700; font-size:0.92rem; display:inline-flex; align-items:center; gap:9px; box-shadow:0 12px 22px -14px rgba(216,91,66,0.9); transition:transform .18s var(--ease), box-shadow .18s ease, background .18s;}
@media (max-width:640px){.btn-primary{padding:12px 20px; font-size:0.88rem;}}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 16px 28px -14px rgba(216,91,66,0.95); background:var(--coral-deep);}
.btn-primary svg{transition:transform .25s var(--ease);}
.btn-primary:hover svg{transform:translateX(3px);}
.dash-add-button{gap:8px;}
.dash-add-button > span{font-size:1.2rem; line-height:0; font-weight:500;}
.btn-secondary{border:1.5px solid var(--line); color:var(--petrol-deep); padding:12px 22px; border-radius:var(--radius-btn); font-weight:600; font-size:0.92rem; background:var(--white); transition:border-color .18s, transform .18s, box-shadow .18s;}
.btn-secondary:hover{border-color:var(--petrol); transform:translateY(-2px); box-shadow:0 12px 26px -22px rgba(17,35,39,0.45);}
.btn-ghost{color:var(--petrol-deep); font-weight:600; font-size:0.9rem; padding:10px 16px; border-radius:100px; transition:background .18s;}
.btn-ghost:hover{background:var(--paper-dim);}
.btn-danger{background:#fff; color:var(--coral-deep); border:1.5px solid rgba(228,79,64,0.4); padding:10px 18px; border-radius:100px; font-weight:600; font-size:0.86rem; transition:all .18s;}
.btn-danger:hover{background:var(--coral-deep); color:#fff; border-color:var(--coral-deep);}
.btn-block{width:100%; text-align:center;}

.hero-stats{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; max-width:560px; position:relative; z-index:2;}
.stat{background:rgba(255,255,255,0.78); border:1px solid rgba(17,35,39,0.08); border-radius:var(--radius-sm); padding:12px 14px; box-shadow:0 12px 20px -18px rgba(17,35,39,0.4); display:flex; flex-direction:column; gap:4px; min-height:72px; justify-content:center;}
.stat-number{display:block; font-family:var(--display); font-size:clamp(1.4rem, 2vw, 1.85rem); color:var(--petrol-deep); font-weight:600; letter-spacing:-0.03em;}
.stat-label{font-size:0.8rem; color:var(--ink-soft); line-height:1.35;}

@media (max-width:640px){
  .hero{padding:28px 0 20px;}
  .hero-grid{gap:26px;}
  .hero-collage{inset:-18px -14px 10px -14px; opacity:0.85;}
  .photo-a{width:68px; height:68px; right:4%; top:0;}
  .photo-b{width:60px; height:60px; left:14%; bottom:20%;}
  .photo-c{width:98px; height:70px; right:20%; bottom:0;}
  .hero-title-wrap{padding-top:2px;}
  h1.hero-title{font-size:1.8rem; margin-bottom:10px;}
  .hero-sub{font-size:0.92rem; margin-bottom:16px;}
  .hero-stats{grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; max-width:100%;}
  .stat{padding:8px 6px; min-height:56px; border-radius:9px;}
  .stat-number{font-size:0.95rem;}
  .stat-label{font-size:0.58rem;}
  .hero-actions{flex-direction:column; align-items:stretch; margin-bottom:16px;}
  .btn-primary, .btn-secondary{justify-content:center; width:100%; padding:12px 20px;}
  .card-stage{padding:8px;}
}

/* ---- Signature: flip card ---- */
.card-stage{perspective:1600px; display:flex; justify-content:center; align-items:center; padding:20px; position:relative;}
@media (max-width:640px){.card-stage{padding:12px;}}
.card-stage::before,
.card-stage::after{
  content:""; position:absolute; border:1px solid rgba(14,45,54,0.12); border-radius:50%; pointer-events:none;
}
.card-stage::before{width:440px; height:440px; right:-70px; top:-30px; opacity:0.5; animation:none;}
@media (max-width:640px){.card-stage::before{width:280px; height:280px; right:-80px; top:-60px; opacity:0.4;}}
.card-stage::after{width:300px; height:300px; left:-20px; bottom:-30px; opacity:0.3; animation:none;}
@media (max-width:640px){.card-stage::after{width:200px; height:200px; left:-50px; bottom:-50px; opacity:0.25;}}
@keyframes orbit{0%{transform:rotate(0deg) scale(1);} 50%{transform:rotate(180deg) scale(1.04);} 100%{transform:rotate(360deg) scale(1);}}
.id-card{width:100%; max-width:360px; aspect-ratio:1.586/1; position:relative; transform-style:preserve-3d; transition:transform .8s cubic-bezier(0.22, 1, 0.36, 1); will-change:transform;}
@media (max-width:640px){.id-card{max-width:100%; margin:0 auto;}}
.id-card.flipped{transform:rotateY(180deg);}

.id-face{position:absolute; inset:0; border-radius:22px; backface-visibility:hidden; -webkit-backface-visibility:hidden; box-shadow:var(--shadow-card); overflow:hidden; display:flex; flex-direction:column; border:1px solid rgba(255,255,255,0.18); transition:transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease;}
@media (max-width:640px){.id-face{border-radius:16px;}}
.id-front{background:#0A0A0B; color:var(--white); padding:24px 26px; border:1px solid rgba(255,255,255,0.06);}
@media (max-width:640px){.id-front{padding:16px 18px;}}
.id-back{background:var(--white); transform:rotateY(180deg); padding:24px 26px; border:1px solid var(--line);}
@media (max-width:640px){.id-back{padding:16px 18px;}}
.id-front::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0) 45%); pointer-events:none;}
.id-front::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg, transparent, rgba(216,163,43,0.55), transparent);}
.id-top-row{display:flex; justify-content:space-between; align-items:flex-start; position:relative; z-index:1;}
.id-brand{font-family:var(--mono); font-size:0.66rem; letter-spacing:0.08em; text-transform:uppercase; opacity:0.85;}
.id-brand b{display:block; font-family:var(--display); font-size:1.02rem; font-weight:600; letter-spacing:0; margin-top:2px;}
.id-chip{width:34px; height:26px; border-radius:5px; background:linear-gradient(135deg,#f1c75f,#d89e15); box-shadow:inset 0 0 0 1px rgba(0,0,0,0.15);}

.id-mid{display:flex; gap:16px; align-items:center; margin-top:20px; position:relative; z-index:1;}
@media (max-width:640px){.id-mid{gap:10px; margin-top:14px;}}
.id-photo{width:72px; height:72px; border-radius:14px; overflow:hidden; flex-shrink:0; border:2px solid rgba(255,255,255,0.5); background:linear-gradient(135deg,#e0a35f,#c97e4a);}
@media (max-width:640px){.id-photo{width:50px; height:50px; border-radius:10px;}}
.id-photo img{width:100%; height:100%; object-fit:cover;}
.id-photo{position:relative;}
.photo-expand-btn{position:absolute; right:4px; bottom:4px; width:22px; height:22px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(10,10,11,.82); color:var(--white); animation:photo-pulse 1.8s ease-in-out infinite;}
.photo-expand-btn svg{width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.photo-expand-btn:focus-visible{outline:2px solid var(--white); outline-offset:2px;}
@keyframes photo-pulse{0%,100%{box-shadow:0 0 0 0 rgba(216,163,43,0.55);} 50%{box-shadow:0 0 0 5px rgba(216,163,43,0.12);}}
.id-mid > div:last-child{min-width:0;}
.id-name{font-family:var(--display); font-size:1.3rem; font-weight:600;}
@media (max-width:640px){.id-name{font-size:1rem;}}
.id-breed{font-size:0.8rem; opacity:0.85; margin-top:2px;}
@media (max-width:640px){.id-breed{font-size:0.7rem; margin-top:1px;}}
.id-tags{display:flex; gap:6px; margin-top:8px; flex-wrap:wrap;}
@media (max-width:640px){.id-tags{gap:4px; margin-top:6px;}}
.id-tag{font-family:var(--mono); font-size:0.62rem; background:rgba(255,255,255,0.15); padding:3px 9px; border-radius:100px; letter-spacing:0.03em;}
@media (max-width:640px){.id-tag{font-size:0.52rem; padding:2px 7px;}}

.id-bottom{margin-top:auto; position:relative; z-index:1;}
.id-code{font-family:var(--mono); font-size:0.92rem; letter-spacing:0.1em;}
@media (max-width:640px){.id-code{font-size:0.75rem;}}
.id-code span{opacity:0.6; font-size:0.62rem; letter-spacing:0.06em; display:block; margin-bottom:3px;}
@media (max-width:640px){.id-code span{font-size:0.5rem; margin-bottom:2px;}}

.id-back-top{display:flex; justify-content:space-between; align-items:flex-start;}
@media (max-width:640px){.id-back-top{gap:8px;}}
.id-qr{width:76px; height:76px; border-radius:8px; flex-shrink:0; object-fit:contain; background:#fff;}
@media (max-width:640px){.id-qr{width:54px; height:54px;}}
.id-owner-label{font-family:var(--mono); font-size:0.6rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-soft); margin-bottom:3px;}
@media (max-width:640px){.id-owner-label{font-size:0.5rem; margin-bottom:2px;}}
.id-owner-name{font-weight:700; font-size:0.95rem; color:var(--ink);}
@media (max-width:640px){.id-owner-name{font-size:0.85rem;}}
.id-back-top > div{min-width:0;}
.id-back-rows{margin-top:16px; display:flex; flex-direction:column; gap:10px;}
@media (max-width:640px){.id-back-rows{margin-top:12px; gap:8px;}}
.id-back-row{display:flex; justify-content:space-between; border-bottom:1px dashed var(--line); padding-bottom:8px;}
@media (max-width:640px){.id-back-row{padding-bottom:6px;}}
.id-back-row span:first-child{font-size:0.72rem; color:var(--ink-soft);}
@media (max-width:640px){.id-back-row span:first-child{font-size:0.62rem;}}
.id-back-row span:last-child{font-size:0.78rem; font-weight:600; color:var(--ink); font-family:var(--mono);}
@media (max-width:640px){.id-back-row span:last-child{font-size:0.68rem;}}
.id-back-footer{margin-top:auto; font-size:0.62rem; color:var(--ink-soft); text-align:center; line-height:1.4;}
@media (max-width:640px){.id-back-footer{font-size:0.54rem; line-height:1.3;}}
.public-owner-note{margin-top:16px; padding:16px 18px; background:var(--white); border:1px solid var(--line); border-left:3px solid var(--coral); border-radius:14px; box-shadow:var(--shadow-soft);}
.public-owner-note-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px;}
.public-owner-note-label{font-family:var(--mono); color:var(--coral-deep); font-size:0.68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;}
.public-owner-note-time{color:var(--ink-soft); font-family:var(--mono); font-size:0.68rem; white-space:nowrap;}
.public-owner-note p{color:var(--ink); font-size:0.9rem; line-height:1.55; overflow-wrap:anywhere;}
.public-owner-note-empty{text-align:center; border-left-color:var(--line); padding:11px 14px;}
@media (max-width:640px){
  .public-owner-note{margin-top:12px; padding:13px 14px; border-radius:12px;}
  .public-owner-note-head{display:block; margin-bottom:6px;}
  .public-owner-note-label,.public-owner-note-time{font-size:0.6rem;}
  .public-owner-note-time{display:block; margin-top:4px; white-space:normal;}
  .public-owner-note p{font-size:0.82rem; line-height:1.45;}
}

.card-flip-btn{display:inline-flex; align-items:center; gap:8px; margin-top:18px; padding:10px 20px; border-radius:100px; border:1.5px solid var(--line); background:var(--white); color:var(--petrol-deep); font-size:0.84rem; font-weight:600; transition:border-color .18s, transform .18s, background .18s;}
.card-flip-btn:hover{border-color:var(--petrol); transform:translateY(-1px); background:var(--paper-dim);}
.card-flip-btn svg{transition:transform .4s var(--ease);}
.card-flip-btn.is-flipped svg{transform:rotateY(180deg);}
@media (max-width:640px){
  .id-owner-name{max-width:155px; overflow-wrap:anywhere;}
  .id-back-row{gap:10px; align-items:flex-start;}
  .id-back-row span:first-child{flex:1; min-width:0;}
  .id-back-row span:last-child{max-width:52%; text-align:right; overflow-wrap:anywhere;}
  .card-flip-btn{margin-top:12px; padding:8px 16px; font-size:0.76rem; gap:6px;}
}

@media (max-width:640px){
  .id-name{font-size:0.92rem;}
  .id-breed{font-size:0.66rem;}
  .id-code{font-size:0.68rem;}
  .id-code span{font-size:0.46rem;}
  .btn-primary, .btn-secondary{padding:10px 16px; font-size:0.82rem;}
  .reveal-phone{font-size:1rem;}
  .public-contact-box h3{font-size:0.95rem;}
  .public-contact-box p{font-size:0.78rem;}
}

/* ============ TRUST STRIP ============ */
.trust-strip{border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:16px 0; background:var(--white);}
.trust-row{display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; align-items:center;}
.trust-item{display:flex; align-items:center; gap:10px; font-size:0.86rem; color:var(--ink-soft); font-weight:500;}
.trust-item svg{flex-shrink:0; color:var(--sage);}

/* ============ SECTION SHARED ============ */
section{padding:56px 0;}
.section-head{max-width:640px; margin-bottom:32px;}
@media (max-width:640px){
  section{padding:36px 0;}
  .section-head{margin-bottom:22px;}
}
.section-eyebrow{font-family:var(--mono); font-size:0.76rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--coral-deep); margin-bottom:14px; display:block; font-weight:600;}
.section-title{font-family:var(--display); font-weight:600; font-size:clamp(1.5rem, 2.7vw, 2.15rem); color:var(--petrol-deep); line-height:1.15; letter-spacing:-0.01em;}
.section-desc{margin-top:10px; font-size:0.96rem; color:var(--ink-soft); line-height:1.6;}

.legal-page{padding-bottom:56px;}
.legal-updated{font-family:var(--mono); font-size:0.72rem; color:var(--coral-deep); margin-bottom:30px;}
.legal-page h2{font-family:var(--display); color:var(--petrol-deep); font-size:1.3rem; line-height:1.2; margin:32px 0 12px;}
.legal-page h3{font-family:var(--body); color:var(--petrol-deep); font-size:0.92rem; margin:22px 0 9px;}
.legal-page p,.legal-page li{color:var(--ink-soft); line-height:1.7; font-size:0.94rem;}
.legal-page p{margin-bottom:16px;}
.legal-page ul,.legal-page ol{padding-left:24px; margin:0 0 18px;}
.legal-page li{padding-left:5px; margin-bottom:9px;}
.legal-page strong{color:var(--ink);}
@media (max-width:640px){
  .legal-page{padding-top:34px !important; padding-bottom:34px;}
  .legal-page h1{font-size:1.65rem !important; line-height:1.15;}
  .legal-page h2{font-size:1.12rem; margin-top:26px;}
  .legal-page h3{font-size:0.86rem; margin-top:18px;}
  .legal-page p,.legal-page li{font-size:0.88rem; line-height:1.6;}
}

/* ============ GALERÍA DE MASCOTAS (fotos genéricas) ============ */
.gallery-strip{display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin-top:22px;}
@media (max-width:860px){.gallery-strip{grid-template-columns:repeat(3,1fr);}}
.gallery-item{border-radius:16px; overflow:hidden; aspect-ratio:1/1; position:relative; box-shadow:var(--shadow-soft); transition:transform .35s ease;}
.gallery-item img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.gallery-item:hover{transform:translateY(-6px);}
.gallery-item:hover img{transform:scale(1.08);}
.gallery-item:nth-child(2n){margin-top:14px;}

/* ============ COMO FUNCIONA: trazado tipo ruta de mapa ============ */
.route-map{position:relative; padding-left:6px;}
.route-track{position:absolute; left:23px; top:6px; bottom:6px; width:2px; z-index:0;}
.route-track::before{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(var(--line) 60%, transparent 0%);
  background-size:2px 10px; background-repeat:repeat-y;
}
.route-track::after{
  content:""; position:absolute; left:0; top:0; width:100%; height:var(--route-progress, 0%);
  background-image:linear-gradient(var(--coral) 60%, transparent 0%);
  background-size:2px 10px; background-repeat:repeat-y;
  transition:height .25s linear;
}
.route-stop{position:relative; z-index:1; display:grid; grid-template-columns:48px 1fr; gap:20px; padding:0 0 40px 0; opacity:0.45; filter:grayscale(0.4); transition:opacity .5s var(--ease), filter .5s var(--ease);}
.route-stop:last-child{padding-bottom:4px;}
.route-stop.is-active{opacity:1; filter:grayscale(0);}
.route-pin{width:48px; height:48px; border-radius:50%; background:var(--white); border:2px solid var(--line); display:flex; align-items:center; justify-content:center; flex-shrink:0; position:relative; transition:border-color .4s var(--ease), background .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);}
.route-pin span{font-family:var(--mono); font-weight:700; font-size:0.92rem; color:var(--ink-soft); transition:color .4s var(--ease);}
.route-stop.is-active .route-pin{background:var(--petrol-deep); border-color:var(--petrol-deep); transform:scale(1.08); box-shadow:0 0 0 6px rgba(23,62,73,0.1);}
.route-stop.is-active .route-pin span{color:var(--white);}
.route-stop.is-active .route-pin::after{
  content:""; position:absolute; inset:-2px; border-radius:50%; border:2px solid var(--coral); opacity:0; animation:pin-ring 1.4s var(--ease) 1;
}
@keyframes pin-ring{0%{transform:scale(0.85); opacity:0.9;} 100%{transform:scale(1.5); opacity:0;}}
.route-content{padding-top:6px;}
.route-eta{font-family:var(--mono); font-size:0.66rem; text-transform:uppercase; letter-spacing:0.07em; color:var(--coral-deep); font-weight:700; margin-bottom:4px; display:block;}
.route-stop h3{font-family:var(--display); font-size:1.08rem; font-weight:600; color:var(--petrol-deep); margin-bottom:5px;}
.route-stop p{font-size:0.88rem; color:var(--ink-soft); line-height:1.55; max-width:480px;}
.route-flag{display:inline-flex; align-items:center; gap:6px; margin-top:10px; font-family:var(--mono); font-size:0.7rem; font-weight:700; color:var(--sage); text-transform:uppercase; letter-spacing:0.04em;}

@media (max-width:640px){
  .route-track{left:17px;}
  .route-stop{grid-template-columns:36px 1fr; gap:14px; padding-bottom:26px;}
  .route-pin{width:36px; height:36px;}
  .route-pin span{font-size:0.76rem;}
  .route-stop h3{font-size:0.98rem;}
  .route-stop p{font-size:0.82rem;}
}

/* ============ TESTIMONIOS ============ */
.testimonial-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
@media (max-width:860px){.testimonial-grid{grid-template-columns:1fr; gap:12px;}}
@media (max-width:640px){.testimonial-grid{gap:10px;}}
.testimonial-card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md); padding:20px; display:flex; flex-direction:column; gap:12px; transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;}
@media (max-width:640px){.testimonial-card{padding:16px; gap:10px; border-radius:12px;}}
.testimonial-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-soft); border-color:rgba(23,62,73,0.25);}
.testimonial-stars{color:var(--mustard); font-size:0.9rem; letter-spacing:2px;}
@media (max-width:640px){.testimonial-stars{font-size:0.85rem; letter-spacing:1.5px;}}
.testimonial-text{font-size:0.88rem; color:var(--ink-soft); line-height:1.55; font-style:normal;}
@media (max-width:640px){.testimonial-text{font-size:0.82rem; line-height:1.5;}}
.testimonial-person{display:flex; align-items:center; gap:12px; margin-top:auto;}
.testimonial-avatar{width:42px;height:42px;border-radius:50%; overflow:hidden; flex-shrink:0;}
@media (max-width:640px){.testimonial-avatar{width:36px;height:36px;}}
.testimonial-avatar img{width:100%;height:100%;object-fit:cover;}
.testimonial-name{font-weight:700; font-size:0.86rem; color:var(--ink);}
@media (max-width:640px){.testimonial-name{font-size:0.8rem;}}
.testimonial-pet{font-size:0.76rem; color:var(--ink-soft);}
@media (max-width:640px){.testimonial-pet{font-size:0.7rem;}}

/* ============ FEATURES / DATABASE ============ */
.features-section{background:var(--petrol-deep); border-radius:24px; margin:0 20px; color:var(--white); position:relative; overflow:hidden;}
.features-section::before{content:""; position:absolute; inset:0; background:radial-gradient(500px 300px at 90% 10%, rgba(255,107,91,0.18), transparent 60%);}
.features-section .wrap{position:relative;}
.features-section .section-title{color:var(--white);}
.features-section .section-desc{color:rgba(255,255,255,0.72);}
.features-section .section-eyebrow{color:var(--mustard);}
@media (max-width:860px){.features-section{margin:0 12px;}
.features-section .wrap{padding:24px 20px;}}
@media (max-width:640px){.features-section{margin:0 8px; border-radius:18px;}
.features-section .wrap{padding:20px 16px;}}

.feature-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:rgba(255,255,255,0.12); border-radius:20px; overflow:hidden; margin-top:20px;}
@media (max-width:860px){.feature-grid{grid-template-columns:1fr;}}
@media (max-width:640px){.feature-grid{gap:0; margin-top:14px; border-radius:16px;}}
.feature-item{background:var(--petrol-deep); padding:22px 22px; transition:background .25s, transform .25s var(--ease);}
@media (max-width:860px){.feature-item{padding:18px 18px;}}
@media (max-width:640px){.feature-item{padding:14px 14px;}}
.feature-item:hover{transform:translateY(-2px);}
.feature-item:hover{background:#123f4d;}
.feature-icon{width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center; margin-bottom:18px; color:var(--mustard);}
@media (max-width:640px){.feature-icon{width:38px; height:38px; margin-bottom:12px;}}
.feature-item h4{font-family:var(--display); font-weight:600; font-size:1.08rem; margin-bottom:8px;}
@media (max-width:640px){.feature-item h4{font-size:0.95rem; margin-bottom:6px;}}
.feature-item p{font-size:0.88rem; color:rgba(255,255,255,0.65); line-height:1.6;}
@media (max-width:640px){.feature-item p{font-size:0.8rem; line-height:1.5;}}

/* ============ PRICING / CARDS PHYSICAL ============ */
.pricing-wrap{display:grid; grid-template-columns:1.1fr 0.9fr; gap:32px; align-items:center;}
@media (max-width:900px){.pricing-wrap{grid-template-columns:1fr; gap:26px;}}
@media (max-width:640px){.pricing-wrap{gap:18px;}}
.duo-illustration{background:var(--paper-dim); border-radius:var(--radius-lg); padding:30px; display:flex; flex-direction:column; gap:14px; align-items:center; justify-content:center; border:1px solid var(--line);}
@media (max-width:640px){.duo-illustration{padding:20px; gap:12px; border-radius:16px;}}
.mini-card{width:220px; aspect-ratio:1.586/1; border-radius:14px; box-shadow:var(--shadow-soft); display:flex; flex-direction:column; justify-content:space-between; padding:14px 16px; position:relative; transition:transform .3s ease;}
@media (max-width:640px){.mini-card{width:180px; padding:12px 14px;}}
.mini-card.owner{background:linear-gradient(150deg,var(--coral),var(--coral-deep)); color:white; transform:rotate(-4deg) translateX(10px);}
.mini-card.pet{background:linear-gradient(150deg,var(--petrol),var(--petrol-deep)); color:white; transform:rotate(3deg) translateX(-10px); margin-top:-30px;}
@media (max-width:640px){.mini-card.owner{transform:rotate(-3deg) translateX(6px);}
.mini-card.pet{transform:rotate(2deg) translateX(-6px); margin-top:-20px;}}
.duo-illustration:hover .mini-card.owner{transform:rotate(-2deg) translateX(6px) translateY(-4px);}
.duo-illustration:hover .mini-card.pet{transform:rotate(1deg) translateX(-6px) translateY(-4px);}
.mini-card .mc-top{font-family:var(--mono); font-size:0.6rem; text-transform:uppercase; letter-spacing:0.05em; opacity:0.8;}
.mini-card .mc-name{font-family:var(--display); font-weight:600; font-size:1rem;}

.pricing-list{display:flex; flex-direction:column; gap:10px;}
@media (max-width:640px){.pricing-list{gap:8px;}}
.price-row{display:flex; align-items:center; gap:14px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-sm); padding:13px 16px; transition:transform .2s var(--ease), border-color .2s;}
@media (max-width:640px){.price-row{padding:11px 14px; gap:12px;}}
.price-row:hover{transform:translateX(3px); border-color:rgba(23,62,73,0.3);}
.price-row .pr-icon{width:36px; height:36px; border-radius:10px; background:rgba(107,155,124,0.15); color:var(--sage); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
@media (max-width:640px){.price-row .pr-icon{width:32px; height:32px;}}
.price-row b{display:block; font-size:0.95rem; color:var(--ink);}
@media (max-width:640px){.price-row b{font-size:0.88rem;}}
.price-row span{font-size:0.83rem; color:var(--ink-soft);}
@media (max-width:640px){.price-row span{font-size:0.76rem;}}

/* ============ CTA BAND ============ */
.cta-band{text-align:center; padding:52px 0; position:relative;}
@media (max-width:860px){.cta-band{padding:40px 0;}}
@media (max-width:640px){.cta-band{padding:32px 0;}}
.cta-band::before{content:""; position:absolute; left:50%; top:50%; width:520px; height:520px; transform:translate(-50%,-50%); background:radial-gradient(circle, rgba(232,104,77,0.08), transparent 70%); pointer-events:none; animation:cta-pulse 5s ease-in-out infinite;}
@media (max-width:640px){.cta-band::before{width:320px; height:320px;}}
@keyframes cta-pulse{0%,100%{opacity:0.6; transform:translate(-50%,-50%) scale(1);} 50%{opacity:1; transform:translate(-50%,-50%) scale(1.06);}}
.cta-band > *{position:relative; z-index:1;}
.cta-band h2{font-family:var(--display); font-weight:600; font-size:clamp(1.5rem,3vw,2.2rem); color:var(--petrol-deep); margin-bottom:12px; letter-spacing:-0.01em;}
@media (max-width:640px){.cta-band h2{margin-bottom:10px;}}
.cta-band p{color:var(--ink-soft); max-width:480px; margin:0 auto 22px; font-size:0.94rem;}
@media (max-width:640px){.cta-band p{font-size:0.88rem; margin-bottom:18px;}}

/* ============ FOOTER ============ */
footer{background:var(--petrol-deep); color:rgba(255,255,255,0.7); padding:36px 0 20px;}
@media (max-width:640px){footer{padding:28px 0 16px;}}
.footer-top{display:flex; justify-content:space-between; flex-wrap:wrap; gap:28px; padding-bottom:24px; border-bottom:1px solid rgba(255,255,255,0.12);}
@media (max-width:640px){.footer-top{gap:16px; padding-bottom:16px;}}
.footer-brand{font-family:var(--display); color:var(--white); font-size:1.2rem; font-weight:600; display:flex; align-items:center; gap:10px;}
@media (max-width:640px){.footer-brand{font-size:1rem;}}
.footer-brand .tag-dot{width:9px;height:9px;border-radius:50%;background:var(--coral);}
.footer-cols{display:flex; gap:60px; flex-wrap:wrap;}
@media (max-width:640px){.footer-cols{gap:28px;}}
.footer-col h5{font-family:var(--mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em; color:rgba(255,255,255,0.45); margin-bottom:14px;}
.footer-col a{display:block; font-size:0.88rem; margin-bottom:10px; color:rgba(255,255,255,0.75); transition:color .2s;}
@media (max-width:640px){.footer-col a{font-size:0.82rem; margin-bottom:8px;}}
.footer-col a:hover{color:var(--mustard);}
.footer-bottom{padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:0.78rem; color:rgba(255,255,255,0.45);}
@media (max-width:640px){.footer-bottom{padding-top:16px; gap:8px; font-size:0.72rem;}}

/* ============ ALERTAS / FLASH ============ */
.alert{padding:14px 18px; border-radius:12px; font-size:0.88rem; margin-bottom:20px; display:flex; align-items:center; gap:10px; animation:slideDown .35s ease;}
@keyframes slideDown{from{opacity:0; transform:translateY(-10px);} to{opacity:1; transform:translateY(0);}}
.alert-success{background:rgba(107,155,124,0.14); color:#3f6b4c; border:1px solid rgba(107,155,124,0.35);}
.alert-error{background:rgba(228,79,64,0.1); color:var(--coral-deep); border:1px solid rgba(228,79,64,0.3);}

/* ============ MODAL / REGISTRO ============ */
.modal-overlay{position:fixed; inset:0; background:rgba(14,50,61,0.55); backdrop-filter:blur(6px); display:none; align-items:flex-start; justify-content:center; z-index:1000; padding:40px 20px; overflow-y:auto;}
.modal-overlay.open{display:flex;}
.modal{background:var(--paper); border-radius:24px; max-width:620px; width:100%; box-shadow:0 40px 80px -20px rgba(0,0,0,0.4); position:relative; animation:modalIn .35s cubic-bezier(.2,.8,.2,1); margin-top:20px;}
@keyframes modalIn{from{opacity:0; transform:translateY(24px) scale(0.98);} to{opacity:1; transform:translateY(0) scale(1);}}
.modal-head{padding:30px 34px 22px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:flex-start;}
.modal-head h3{font-family:var(--display); font-size:1.55rem; font-weight:600; color:var(--petrol-deep);}
.modal-head p{font-size:0.88rem; color:var(--ink-soft); margin-top:6px;}
.modal-close{width:34px; height:34px; border-radius:50%; background:var(--paper-dim); display:flex; align-items:center; justify-content:center; color:var(--ink-soft); font-size:1.1rem; flex-shrink:0; transition:background .2s;}
.modal-close:hover{background:var(--line);}
.modal-body{padding:28px 34px 34px;}

.auth-tabs{display:flex; gap:6px; background:var(--paper-dim); padding:5px; border-radius:12px; margin-bottom:26px;}
.auth-tab{flex:1; text-align:center; padding:10px; border-radius:9px; font-size:0.88rem; font-weight:600; color:var(--ink-soft); transition:all .2s;}
.auth-tab.active{background:var(--white); color:var(--petrol-deep); box-shadow:0 2px 6px rgba(0,0,0,0.06);}
.form-panel{display:none;}
.form-panel.active{display:block;}

.field-group{margin-bottom:18px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media (max-width:520px){.field-row{grid-template-columns:1fr;}}
label{display:block; font-size:0.8rem; font-weight:600; color:var(--ink); margin-bottom:7px;}
label .opt{font-weight:400; color:var(--ink-soft); font-size:0.76rem;}
.input, select.input, textarea.input{width:100%; padding:13px 15px; border:1.5px solid var(--line); border-radius:11px; font-size:0.92rem; background:var(--white); color:var(--ink); transition:border-color .18s, box-shadow .18s;}
.input:focus{border-color:var(--petrol); box-shadow:0 0 0 4px rgba(27,75,90,0.1); outline:none;}
.input::placeholder{color:#B7B2A5;}

.section-divider{display:flex; align-items:center; gap:14px; margin:28px 0 18px;}
.section-divider span{font-family:var(--mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-soft); white-space:nowrap;}
.section-divider::before, .section-divider::after{content:""; flex:1; height:1px; background:var(--line);}

.photo-upload{border:1.5px dashed var(--line); border-radius:14px; padding:20px; display:flex; align-items:center; gap:16px; cursor:pointer; transition:border-color .2s, background .2s;}
.photo-upload:hover{border-color:var(--petrol); background:rgba(27,75,90,0.03);}
.photo-preview{width:56px; height:56px; border-radius:12px; background:var(--paper-dim); display:flex; align-items:center; justify-content:center; color:var(--ink-soft); flex-shrink:0; overflow:hidden; border:1px solid var(--line);}
.photo-preview img{width:100%; height:100%; object-fit:cover;}
.photo-upload-text b{display:block; font-size:0.88rem; color:var(--ink);}
.photo-upload-text span{font-size:0.78rem; color:var(--ink-soft);}

.checkbox-row{display:flex; align-items:flex-start; gap:11px; margin-top:22px;}
.checkbox-row input[type="checkbox"]{width:19px; height:19px; margin-top:2px; accent-color:var(--coral); flex-shrink:0; cursor:pointer;}
.checkbox-row label{font-size:0.82rem; color:var(--ink-soft); font-weight:400; line-height:1.5; margin-bottom:0;}
.checkbox-row a{color:var(--petrol); font-weight:600; text-decoration:underline; text-underline-offset:2px;}
.remember-row{display:flex; align-items:center; gap:8px; margin:4px 0 0; color:var(--ink-soft); font-size:.78rem; font-weight:500; cursor:pointer;}
.remember-row input{width:16px; height:16px; margin:0; accent-color:var(--coral); cursor:pointer;}

.btn-submit{width:100%; background:var(--coral); color:var(--white); padding:14px; border-radius:var(--radius-btn); font-weight:700; font-size:0.94rem; margin-top:20px; transition:background .2s, transform .18s;}
.btn-submit:hover{background:var(--coral-deep); transform:translateY(-1px);}
.btn-submit:disabled{opacity:0.5; cursor:not-allowed; transform:none;}
.form-note{font-size:0.76rem; color:var(--ink-soft); text-align:center; margin-top:14px; line-height:1.5;}

select.input{appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%234A5D61' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 15px center; padding-right:38px;}

.pill-group{display:flex; gap:10px;}
.pill{flex:1; text-align:center; padding:12px; border:1.5px solid var(--line); border-radius:11px; font-size:0.86rem; font-weight:600; color:var(--ink-soft); cursor:pointer; transition:all .18s; position:relative;}
.pill input{position:absolute; opacity:0; pointer-events:none;}
.pill.selected{border-color:var(--petrol); background:rgba(27,75,90,0.06); color:var(--petrol-deep);}

@media (max-width:640px){.modal-head, .modal-body{padding-left:22px; padding-right:22px;}}

/* ============ DASHBOARD (usuario) ============ */
.dash-shell{display:grid; grid-template-columns:260px 1fr; min-height:calc(100vh - 74px);}
.mobile-bottom-nav{display:none;}
.dash-sidebar{background:var(--white); border-right:1px solid var(--line); padding:32px 22px;}
.dash-nav{display:flex; flex-direction:column;}
.dash-menu-toggle{display:none;}
.dash-mobile-logout{display:none !important;}
.dash-sidebar a{display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:12px; font-size:0.9rem; font-weight:600; color:var(--ink-soft); margin-bottom:6px; transition:all .18s; white-space:nowrap;}
.dash-sidebar a svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0;}
.dash-sidebar a:hover{background:var(--paper-dim); color:var(--petrol-deep);}
.dash-sidebar a.active{background:var(--petrol-deep); color:#fff;}
.dash-main{position:relative; isolation:isolate; padding:40px 36px; background:var(--paper-dim); overflow:hidden;}
.dash-main::before,.admin-main::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.12; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240' fill='none'%3E%3Cg stroke='%23173e49' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' opacity='.32'%3E%3Cpath d='M35 83c-7-10-6-22 2-29l7 10 10-6 7 10c8 12 5 25-6 33-10 6-22 3-27-7-2-4-2-7 0-11Z'/%3E%3Cpath d='M43 100c-1 13 1 24 7 34m7-32c4 10 6 20 4 31m-18-23c-9 3-16 9-21 17m34-13c9 2 16 7 22 14'/%3E%3Cpath d='M174 42c8-8 17-10 25-5l-4 10 8 5c7 6 8 15 3 23-7 10-20 12-30 5-9-7-10-20-5-29l3-4Z'/%3E%3Cpath d='M175 72c-5 10-6 20-3 31m12-29c3 10 4 20 1 30m-12-20c-10 0-18 4-25 10m36-7c9 2 16 7 21 14'/%3E%3C/g%3E%3C/svg%3E"); background-size:240px 240px;}
.dash-main{min-width:0;}
.dash-head{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:16px; margin-bottom:32px;}
.dash-title{font-family:var(--display); font-size:1.8rem; font-weight:600; color:var(--petrol-deep);}
.dash-sub{color:var(--ink-soft); font-size:0.92rem; margin-top:4px;}

.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:18px; margin-bottom:34px;}
.stat-box{background:var(--white); border:1px solid var(--line); border-radius:16px; padding:22px;}
.stat-box b{display:block; font-family:var(--display); font-size:1.9rem; color:var(--petrol-deep);}
.stat-box span{font-size:0.82rem; color:var(--ink-soft);}

.pet-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:22px;}
.pet-card{background:var(--white); border:1px solid var(--line); border-radius:18px; overflow:hidden; transition:transform .2s, box-shadow .2s;}
.pet-card-pending{border:2px dashed var(--coral);}
.pet-card-affiliated{border:2px solid var(--sage);}
.pet-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-soft);}
.pet-card-photo{width:100%; aspect-ratio:16/9; overflow:hidden; background:var(--paper-dim); position:relative;}
.pet-card-photo img{width:100%; height:100%; object-fit:cover;}
.pet-card-badge{position:absolute; top:12px; right:12px; font-family:var(--mono); font-size:0.62rem; padding:4px 10px; border-radius:100px; text-transform:uppercase; letter-spacing:.04em; font-weight:700;}
.pet-card-badge.activo{background:rgba(107,155,124,0.9); color:#fff;}
.pet-card-badge.baja{background:rgba(228,79,64,0.9); color:#fff;}
.pet-card-body{padding:18px 20px;}
.pet-card-name{font-family:var(--display); font-size:1.15rem; font-weight:600; color:var(--petrol-deep);}
.pet-card-meta{font-size:0.82rem; color:var(--ink-soft); margin-top:2px;}
.pet-card-code{font-family:var(--mono); font-size:0.72rem; color:var(--ink-soft); margin-top:10px; background:var(--paper-dim); padding:6px 10px; border-radius:8px; display:inline-block;}
.pet-card-actions{display:flex; gap:8px; margin-top:16px; flex-wrap:wrap;}
.pet-card-actions a, .pet-card-actions button{font-size:0.8rem; font-weight:600; padding:8px 12px; border-radius:9px; background:var(--paper-dim); color:var(--petrol-deep); transition:background .18s;}
.pet-card-actions a:hover, .pet-card-actions button:hover{background:var(--line);}
.pet-affiliate-notice{margin-top:14px; padding:9px 10px; border-left:3px solid var(--coral); color:var(--coral-deep); font-size:0.74rem; line-height:1.45; background:rgba(232,104,77,0.06);}
.pet-affiliate-notice[hidden]{display:none;}
.pet-affiliation-status{display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:13px; min-height:23px; color:var(--coral-deep); font-size:0.74rem;}
.pet-affiliation-status small{width:100%; color:var(--ink-soft); font-size:0.67rem;}
.affiliate-timer{font-family:var(--mono); font-size:0.78rem; color:var(--coral-deep);}
.affiliate-expired{font-weight:700; color:var(--coral-deep);}
.pet-card-affiliated .pet-affiliation-status{color:#3f6b4c;}
.affiliate-check{width:21px; height:21px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:var(--sage); color:var(--white); font-weight:800;}
.pet-affiliate-button{width:100%; margin-top:12px; padding:10px 14px; border-radius:var(--radius-btn); background:var(--petrol-deep); color:var(--white); font-size:0.82rem; font-weight:700; transition:background .18s, transform .18s;}
.pet-affiliate-button:hover{background:var(--coral-deep); transform:translateY(-1px);}

.empty-state{background:var(--white); border:2px dashed var(--line); border-radius:20px; padding:60px 30px; text-align:center;}
.empty-state h3{font-family:var(--display); font-size:1.3rem; color:var(--petrol-deep); margin-bottom:10px;}
.empty-state p{color:var(--ink-soft); font-size:0.92rem; margin-bottom:22px;}

.panel{background:var(--white); border:1px solid var(--line); border-radius:18px; padding:30px; max-width:720px;}
.install-help{position:fixed; inset:0; z-index:1400; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(14,45,54,.58); backdrop-filter:blur(6px);}
.install-help.is-open{display:flex;}
.install-help-panel{position:relative; width:min(360px,100%); padding:28px 24px 24px; border-radius:18px; background:var(--white); text-align:center; box-shadow:0 30px 70px -24px rgba(0,0,0,.45);}
.install-help-close{position:absolute; top:12px; right:12px; width:30px; height:30px; border-radius:50%; background:var(--paper-dim); color:var(--ink-soft); font-size:1.3rem; line-height:1;}
.install-help-icon{width:44px; height:44px; display:flex; align-items:center; justify-content:center; margin:0 auto 12px; border-radius:12px; background:var(--petrol-soft); color:var(--petrol-deep);}
.install-help-icon svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.install-help-panel h2{font-family:var(--display); color:var(--petrol-deep); font-size:1.3rem; margin-bottom:8px;}.install-help-panel p{color:var(--ink-soft); font-size:.84rem; line-height:1.5;}

.dashboard-insights{display:grid; grid-template-columns:1.05fr .95fr; gap:18px; margin:0 0 32px;}
.dashboard-summary{margin-top:28px;}
.insight-panel{min-width:0; padding:22px; border:1px solid var(--line); border-radius:16px; background:var(--white); box-shadow:var(--shadow-soft);}
.insight-heading{display:flex; align-items:center; gap:11px; margin-bottom:12px;}
.insight-icon{width:36px; height:36px; display:flex; align-items:center; justify-content:center; flex-shrink:0; border-radius:10px; background:var(--petrol-soft); color:var(--petrol-deep);}
.insight-icon.warm{background:rgba(216,163,43,.14); color:#8b691b;}
.insight-icon svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.insight-kicker{display:block; color:var(--coral-deep); font-family:var(--mono); font-size:.62rem; text-transform:uppercase; letter-spacing:.06em;}
.insight-heading h2{margin-top:2px; color:var(--petrol-deep); font-family:var(--display); font-size:1.16rem;}
.insight-copy{max-width:500px; color:var(--ink-soft); font-size:.8rem; line-height:1.5;}
.trend-chart{display:grid; grid-template-columns:32px 1fr; grid-template-rows:100px auto; column-gap:10px; margin-top:16px;}
.trend-axis{display:flex; flex-direction:column; justify-content:space-between; color:var(--ink-soft); font-family:var(--mono); font-size:.58rem; text-align:right;}
.trend-bars{display:flex; align-items:flex-end; justify-content:space-around; gap:16px; padding:0 12px; border-bottom:1px solid var(--line); background:repeating-linear-gradient(to bottom, transparent 0, transparent 24px, rgba(217,212,203,.42) 25px);}
.trend-bars i{display:block; width:28px; min-height:12px; border-radius:7px 7px 0 0; background:linear-gradient(180deg,var(--coral),var(--coral-deep));}
.trend-bars i:nth-child(2){background:linear-gradient(180deg,var(--mustard),#a97812);}.trend-bars i:nth-child(3){background:linear-gradient(180deg,var(--sage),#3f6b4c);}
.trend-labels{grid-column:2; display:flex; justify-content:space-around; gap:8px; padding-top:7px; color:var(--ink-soft); font-size:.62rem; text-align:center;}
.insight-foot{display:flex; align-items:baseline; gap:7px; margin-top:14px; color:var(--ink-soft); font-size:.72rem;}.insight-foot strong{color:var(--coral-deep); font-family:var(--display); font-size:1.5rem;}
.recommendation-list{display:flex; flex-direction:column; gap:10px; margin-top:16px;}.recommendation-list > div{display:grid; grid-template-columns:28px 1fr; gap:10px; align-items:start; padding-top:10px; border-top:1px dashed var(--line);}.recommendation-list > div:first-child{padding-top:0; border-top:0;}.recommendation-list > div > span{color:var(--coral-deep); font-family:var(--mono); font-size:.7rem; font-weight:700;}.recommendation-list p{color:var(--ink); font-size:.78rem; line-height:1.35;}.recommendation-list b{display:block; margin-bottom:2px;}.recommendation-list small{display:block; color:var(--ink-soft); font-size:.72rem; line-height:1.4;}
.admin-kpi-row{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:16px;}.admin-kpi-row div{padding:10px; border-radius:10px; background:var(--paper-dim);}.admin-kpi-row strong{display:block; color:var(--petrol-deep); font-family:var(--display); font-size:1.35rem;}.admin-kpi-row span{display:block; color:var(--ink-soft); font-size:.64rem; line-height:1.3;}.admin-chart{margin-top:18px;}
.line-chart-wrap{margin-top:14px; padding:10px 8px 0; border:1px solid var(--line); border-radius:12px; background:linear-gradient(180deg,#fff,var(--paper-dim));}.line-chart{display:block; width:100%; height:auto;}.line-grid{fill:none; stroke:var(--line); stroke-width:1; stroke-dasharray:3 4;}.line-path{fill:none; stroke:var(--coral); stroke-width:3; stroke-linecap:round; stroke-linejoin:round;}.line-point{fill:var(--white); stroke:var(--coral); stroke-width:3;}.line-chart-labels{display:flex; justify-content:space-between; gap:6px; padding:6px 4px 8px; color:var(--ink-soft); font-size:.58rem;}.reference-note{margin-top:12px; padding:10px 12px; border-left:3px solid var(--mustard); color:var(--ink-soft); background:rgba(216,163,43,.08); font-size:.72rem; line-height:1.45;}.reference-note b{color:#76591a;}

@media (max-width:900px){
  .dash-shell{display:block;}
  .dash-sidebar{display:none;}
  .dash-main{padding:28px 20px;}
}
@media (max-width:640px){
  .dash-main{padding:22px 14px;}
  .dash-head{align-items:flex-start; gap:12px; margin-bottom:24px;}
  .dash-head .dash-add-button{width:100%; justify-content:center;}
  .dash-title{font-size:1.5rem; line-height:1.15;}
  .dash-sub{font-size:0.82rem; line-height:1.45;}
  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:24px;}
  .stat-box{padding:15px; border-radius:12px;}
  .stat-box b{font-size:1.55rem;}
  .pet-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px;}
  .pet-card{border-radius:13px;}
  .pet-card-photo{aspect-ratio:1/0.76;}
  .pet-card-badge{top:7px; right:7px; padding:3px 6px; font-size:.48rem;}
  .pet-card-body{padding:10px;}
  .pet-card-name{font-size:.92rem; line-height:1.15;}
  .pet-card-meta{font-size:.64rem; line-height:1.35; margin-top:4px;}
  .pet-card-code{max-width:100%; margin-top:7px; padding:4px 6px; font-size:.55rem; overflow:hidden; text-overflow:ellipsis;}
  .pet-card-actions{gap:4px; margin-top:10px;}
  .pet-card-actions a{font-size:.61rem; padding:5px 6px;}
  .pet-affiliation-status{gap:4px; margin-top:8px; min-height:18px; font-size:.6rem;}
  .pet-affiliation-status small{font-size:.55rem;}
  .affiliate-timer{font-size:.6rem;}
  .pet-affiliate-notice{margin-top:8px; padding:6px 7px; font-size:.58rem; line-height:1.35;}
  .pet-affiliate-button{margin-top:8px; padding:7px 8px; font-size:.64rem;}
  .panel{padding:20px 16px; border-radius:14px;}
  .field-row{grid-template-columns:1fr; gap:0;}
  .empty-state{padding:40px 18px; border-radius:16px;}
}

.payment-overlay{position:fixed; inset:0; z-index:1100; display:none; align-items:center; justify-content:center; padding:22px; background:rgba(14,45,54,0.58); backdrop-filter:blur(6px); overflow-y:auto;}
.payment-overlay.is-open{display:flex;}
.payment-panel{position:relative; width:min(760px, 100%); max-height:calc(100vh - 44px); overflow-y:auto; padding:32px; border-radius:20px; background:var(--paper); box-shadow:0 30px 70px -24px rgba(0,0,0,0.45);}
.payment-close{position:absolute; top:18px; right:18px; width:34px; height:34px; border-radius:50%; background:var(--paper-dim); color:var(--ink-soft); font-size:1.4rem; line-height:1;}
.payment-close:hover{background:var(--line);}
.payment-header{padding-right:42px; margin-bottom:24px;}
.payment-header .section-eyebrow{margin-bottom:8px;}
.payment-header h2{font-family:var(--display); color:var(--petrol-deep); font-size:1.75rem; margin-bottom:6px;}
.payment-header p{color:var(--ink-soft); font-size:0.88rem; line-height:1.5;}
.payment-layout{display:grid; grid-template-columns:220px 1fr; gap:28px; align-items:start;}
.payment-qr-block{padding:18px; border:1px solid var(--line); border-radius:14px; background:var(--white); text-align:center;}
.payment-qr{width:100%; max-width:180px; aspect-ratio:1; object-fit:contain; margin:0 auto 12px;}
.payment-qr-block p{color:var(--ink-soft); font-size:0.76rem; line-height:1.4; margin:0;}
.qr-instruction-row{display:flex; align-items:center; justify-content:center; gap:10px; width:100%; margin-top:4px;}
.qr-download-btn{display:inline-flex; align-items:center; justify-content:center; flex:0 0 32px; width:32px; height:32px; padding:0; border:1px solid rgba(23,62,73,.28); border-radius:9px; color:var(--petrol-deep); background:transparent; transition:background .18s, border-color .18s, transform .18s, box-shadow .18s;}
.qr-download-btn:hover{background:var(--petrol-soft); border-color:var(--petrol); transform:translateY(-1px); box-shadow:0 5px 12px -10px rgba(14,45,54,.7);}
.qr-download-btn svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.payment-form fieldset{border:0; padding:0; margin:0 0 20px;}
.payment-form legend{font-size:0.8rem; font-weight:700; color:var(--ink); margin-bottom:9px;}
.payment-plan{display:flex; align-items:flex-start; gap:10px; padding:12px; margin-bottom:9px; border:1.5px solid var(--line); border-radius:11px; background:var(--white); cursor:pointer; transition:border-color .18s, background .18s;}
.payment-plan:has(input:checked){border-color:var(--petrol); background:var(--petrol-soft);}
.payment-plan input{margin-top:3px; accent-color:var(--coral);}
.payment-plan span{display:flex; flex:1; justify-content:space-between; gap:10px; font-size:0.8rem; color:var(--petrol-deep);}
.payment-plan small{font-family:var(--mono); color:var(--coral-deep); font-weight:700; white-space:nowrap;}
.payment-warning{padding:12px; border:1px solid rgba(216,163,43,0.4); border-radius:10px; background:rgba(216,163,43,0.1); color:#76591a; font-size:0.76rem; line-height:1.5;}
.payment-note{color:var(--ink-soft); font-size:0.72rem; line-height:1.45; text-align:center; margin-top:10px;}
.payment-note.is-success{color:#3f6b4c;}
@media (max-width:640px){
  .pet-card-pending{border-radius:16px;}
  .payment-overlay{align-items:flex-start; padding:12px;}
  .payment-panel{max-height:calc(100vh - 24px); padding:24px 18px 20px; border-radius:16px;}
  .payment-header{margin-bottom:18px;}
  .payment-header h2{font-size:1.45rem;}
  .payment-layout{grid-template-columns:1fr; gap:18px;}
  .payment-qr-block{display:flex; flex-direction:column; align-items:center; gap:10px; padding:12px; text-align:center;}
  .payment-qr{width:108px; margin:0; flex-shrink:0;}
  .qr-instruction-row{align-items:center; gap:8px;}
  .qr-instruction-row p{flex:1; text-align:left;}
  .payment-plan span{display:block;}
  .payment-plan small{display:block; margin-top:4px;}
}

/* Card pública (card.php) */
.public-card-page{position:relative; isolation:isolate; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:40px 20px; overflow:hidden; background:linear-gradient(160deg, #f8f7f4 0%, var(--paper-dim) 100%);}
.public-card-page::before{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.2; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280' viewBox='0 0 280 280' fill='none'%3E%3Cg stroke='%23173e49' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' opacity='.22'%3E%3Cpath d='M43 95c-8-12-7-28 2-36l8 13 12-7 9 12c10 14 7 31-6 40-12 8-27 4-33-7-3-5-3-10-2-15Z'/%3E%3Cpath d='M54 115c-2 15-1 29 7 39m8-38c5 12 8 24 5 37m-22-30c-10 5-18 13-22 23m38-17c10 3 19 9 25 18'/%3E%3Cpath d='M188 53c9-10 20-12 29-7l-5 11 10 7c8 6 10 18 4 27-8 12-23 15-35 7-11-8-13-24-6-35l3-4Z'/%3E%3Cpath d='M188 88c-7 11-9 25-5 38m14-35c4 13 5 25 1 38m-14-25c-12 0-22 4-31 12m44-9c11 3 20 9 27 18'/%3E%3C/g%3E%3C/svg%3E"); background-size:280px 280px;}
@media (max-width:640px){.public-card-page{align-items:flex-start; padding:22px 12px 28px;}}
.public-card-wrap{max-width:460px; width:100%;}
 .public-card-wrap{position:relative; z-index:1;}
@media (max-width:640px){.public-card-wrap{max-width:100%;}}
.photo-touch-alert{display:flex; align-items:center; justify-content:center; gap:8px; margin:0 auto 12px; padding:8px 12px; border:1px solid rgba(216,163,43,.35); border-radius:100px; background:rgba(216,163,43,.1); color:#76591a; font-size:.72rem; line-height:1.3; text-align:center;}
.photo-touch-alert svg{width:16px; height:16px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; animation:photo-pulse 1.8s ease-in-out infinite;}
.photo-lightbox{position:fixed; inset:0; z-index:1300; display:none; align-items:center; justify-content:center; flex-direction:column; gap:14px; padding:54px 20px 24px; background:rgba(5,8,10,.9); backdrop-filter:blur(8px);}
.photo-lightbox.is-open{display:flex;}
.photo-lightbox img{display:block; width:auto; max-width:min(92vw,900px); max-height:78vh; object-fit:contain; border-radius:14px; box-shadow:0 24px 70px rgba(0,0,0,.45);}
.photo-lightbox p{margin:0; color:rgba(255,255,255,.72); font-size:.76rem; text-align:center;}
.photo-lightbox-close{position:absolute; top:18px; right:20px; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; font-size:1.6rem; line-height:1;}
.photo-lightbox-close:hover{background:rgba(255,255,255,.22);}
@media (max-width:640px){
  .photo-touch-alert{margin-bottom:10px; border-radius:12px; font-size:.68rem;}
  .photo-lightbox{padding:52px 12px 20px;}
  .photo-lightbox img{max-width:96vw; max-height:70vh; border-radius:10px;}
  .photo-lightbox-close{top:12px; right:12px;}
}
.public-contact-box{background:var(--white); border:1px solid var(--line); border-radius:18px; padding:26px; margin-top:26px; text-align:center;}
@media (max-width:640px){.public-contact-box{border-radius:14px; padding:18px 16px; margin-top:18px;}}
.public-contact-box h3{font-family:var(--display); color:var(--petrol-deep); font-size:1.2rem; margin-bottom:8px;}
@media (max-width:640px){.public-contact-box h3{font-size:1rem; margin-bottom:6px;}}
.public-contact-box p{color:var(--ink-soft); font-size:0.88rem; margin-bottom:18px;}
@media (max-width:640px){.public-contact-box p{font-size:0.82rem; margin-bottom:14px;}}
.reveal-phone{font-family:var(--mono); font-size:1.3rem; font-weight:700; color:var(--petrol-deep); margin:14px 0;}
@media (max-width:640px){.reveal-phone{font-size:1.1rem; margin:10px 0;}}

/* ============ FICHA PUBLICA ============ */
.public-header{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:22px;}
.public-header .brand{margin-bottom:0;}
.share-btn{position:relative; width:42px; height:42px; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--petrol-deep); background:var(--white); border:1.5px solid var(--line); border-radius:50%; transition:transform .18s, border-color .18s, background .18s;}
.share-btn:hover{transform:translateY(-1px); border-color:var(--petrol); background:var(--paper-dim);}
.share-btn:active{transform:scale(.95);}
.share-btn svg{width:18px; height:18px;}
.share-toast{position:absolute; top:calc(100% + 8px); right:0; z-index:20; padding:7px 11px; border-radius:8px; background:var(--petrol-deep); color:#fff; font-size:.68rem; font-weight:700; white-space:nowrap; opacity:0; pointer-events:none; transform:translateY(-4px); transition:opacity .2s, transform .2s;}
.share-toast.is-visible{opacity:1; transform:translateY(0);}
.protocol-box{margin-top:22px; padding:22px; border:1px solid var(--line); border-radius:16px; background:var(--white); box-shadow:var(--shadow-soft);}
.protocol-head{display:flex; align-items:center; gap:12px; margin-bottom:14px;}
.protocol-head .p-icon{width:36px; height:36px; display:flex; align-items:center; justify-content:center; flex-shrink:0; border-radius:10px; background:var(--petrol-deep); color:#fff;}
.protocol-head .p-icon svg{width:18px; height:18px;}
.protocol-head h3{font-family:var(--display); color:var(--petrol-deep); font-size:1.02rem;}
.protocol-row{display:grid; grid-template-columns:28px 1fr; gap:12px; padding:12px 0; border-top:1px dashed var(--line);}
.protocol-row:first-child{border-top:0; padding-top:0;}
.protocol-num{width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--paper-dim); color:var(--petrol-deep); font-family:var(--mono); font-size:.76rem; font-weight:700;}
.protocol-row b{display:block; margin-bottom:3px; color:var(--ink); font-size:.84rem;}
.protocol-row p{color:var(--ink-soft); font-size:.78rem; line-height:1.5;}
.register-cta{position:relative; display:flex; align-items:center; gap:16px; margin-top:18px; padding:24px; overflow:hidden; border-radius:18px; background:#0A0A0B;}
.register-cta::before{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(320px 180px at 90% 0%, rgba(216,163,43,.16), transparent 70%);}
.rc-icon{position:relative; z-index:1; width:46px; height:46px; display:flex; align-items:center; justify-content:center; flex-shrink:0; border-radius:12px; background:rgba(255,255,255,.08); color:var(--mustard);}
.rc-icon svg{width:21px; height:21px;}.rc-body{position:relative; z-index:1; flex:1;}.rc-body h3{margin-bottom:4px; color:#fff; font-family:var(--display); font-size:1rem;}.rc-body p{margin-bottom:14px; color:rgba(255,255,255,.64); font-size:.8rem; line-height:1.5;}.rc-body .btn-primary{padding:10px 18px; font-size:.82rem;}
.national-strip{display:flex; align-items:center; gap:12px; margin-top:16px; padding:14px 16px; border:1px solid rgba(23,62,73,.12); border-radius:14px; background:var(--petrol-soft);}
.ns-icon{width:36px; height:36px; display:flex; align-items:center; justify-content:center; flex-shrink:0; border-radius:10px; background:var(--white); color:var(--petrol-deep);}.ns-icon svg{width:17px; height:17px;}.ns-text b{display:block; color:var(--petrol-deep); font-size:.8rem;}.ns-text span{color:var(--ink-soft); font-size:.74rem; line-height:1.4;}
@media (max-width:640px){
  .public-header{margin-bottom:16px;}.share-btn{width:38px; height:38px;}.share-btn svg{width:16px; height:16px;}
  .protocol-box{margin-top:16px; padding:16px; border-radius:14px;}.protocol-head{gap:10px; margin-bottom:10px;}.protocol-head .p-icon{width:30px; height:30px;}.protocol-head .p-icon svg{width:15px; height:15px;}.protocol-head h3{font-size:.9rem;}.protocol-row{grid-template-columns:22px 1fr; gap:10px; padding:9px 0;}.protocol-num{width:22px; height:22px; font-size:.64rem;}.protocol-row b{font-size:.75rem;}.protocol-row p{font-size:.69rem; line-height:1.4;}
  .register-cta{flex-direction:column; align-items:flex-start; gap:10px; margin-top:14px; padding:16px; border-radius:14px;}.rc-icon{width:38px; height:38px;}.rc-icon svg{width:18px; height:18px;}.rc-body h3{font-size:.88rem;}.rc-body p{margin-bottom:10px; font-size:.72rem;}.rc-body .btn-primary{width:100%; justify-content:center; font-size:.78rem;}
  .national-strip{margin-top:12px; padding:11px 13px; gap:9px; border-radius:12px;}.ns-icon{width:30px; height:30px;}.ns-icon svg{width:14px; height:14px;}.ns-text b{font-size:.7rem;}.ns-text span{font-size:.64rem;}
}

/* ============ ADMIN ============ */
.admin-shell{display:grid; grid-template-columns:250px minmax(0,1fr); min-height:100vh;}
.admin-sidebar{background:var(--petrol-deep); color:#fff; padding:28px 20px;}
.admin-brand{font-family:var(--display); font-weight:600; font-size:1.15rem; margin-bottom:30px; display:flex; align-items:center; gap:10px;}
.admin-menu-toggle{display:none;}
.admin-nav{display:flex; flex-direction:column;}
.admin-sidebar a{display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:12px; font-size:0.9rem; font-weight:600; color:rgba(255,255,255,0.72); margin-bottom:4px; transition:all .18s;}
.admin-sidebar a svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0;}
.admin-sidebar a:hover{background:rgba(255,255,255,0.08); color:#fff;}
.admin-sidebar a.active{background:var(--coral); color:#fff;}
.admin-nav-divider{height:1px; background:rgba(255,255,255,0.12); margin:18px 12px 14px;}
.admin-main{position:relative; isolation:isolate; z-index:1; padding:40px 36px; background:var(--paper-dim); overflow:hidden;}
.admin-main{min-width:0;}

.table-wrap{background:var(--white); border:1px solid var(--line); border-radius:16px; overflow:hidden; overflow-x:auto;}
table{width:100%; border-collapse:collapse; min-width:640px;}
thead{background:var(--paper-dim);}
th{text-align:left; padding:14px 18px; font-size:0.74rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); font-weight:700;}
td{padding:14px 18px; font-size:0.88rem; border-top:1px solid var(--line); color:var(--ink);}
tr:hover td{background:rgba(27,75,90,0.03);}
.badge{font-size:0.7rem; font-weight:700; padding:4px 10px; border-radius:100px; text-transform:uppercase; letter-spacing:.03em;}
.badge-green{background:rgba(107,155,124,0.15); color:#3f6b4c;}
.badge-red{background:rgba(228,79,64,0.12); color:var(--coral-deep);}
.badge-gray{background:var(--paper-dim); color:var(--ink-soft);}

.search-bar{display:flex; gap:10px; margin-bottom:22px;}
.search-bar input{flex:1;}
@media (max-width:900px){
  .admin-shell{display:block;}
  .admin-sidebar{position:sticky; top:0; z-index:200; padding:14px 16px; box-shadow:0 8px 20px -18px rgba(0,0,0,.7);}
  .admin-brand{margin:0; font-size:1.05rem;}
  .admin-menu-toggle{display:flex; position:absolute; top:12px; right:16px; width:40px; height:40px; border:1px solid rgba(255,255,255,.2); border-radius:10px; align-items:center; justify-content:center; flex-direction:column; gap:4px;}
  .admin-menu-toggle span{width:17px; height:2px; border-radius:2px; background:#fff;}
  .admin-nav{display:none; padding-top:14px;}
  .admin-nav.is-open{display:flex;}
  .admin-nav-divider{margin:10px 12px;}
  .admin-sidebar a{padding:11px 12px; margin-bottom:3px;}
  .admin-main{padding:28px 20px;}
}
@media (max-width:640px){
  .admin-main{padding:22px 14px;}
  .nav-inner{padding:9px 0; min-height:56px;}
  .dashboard-brand{font-size:1.02rem; gap:8px;}
  .dashboard-brand-full{display:none;}
  .dashboard-brand-short{display:inline; font-family:var(--mono); letter-spacing:.04em;}
  .dashboard-user-name{display:flex; font-size:.72rem; max-width:110px;}.dashboard-user-name b{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}.dashboard-user-name svg{width:15px; height:15px;}
  .nav-user > .btn-ghost{display:none;}
  .install-app-btn{gap:5px; padding:7px 9px; border-radius:9px; font-size:.62rem; white-space:nowrap;}.install-app-btn span{display:inline;}.install-app-btn svg{width:15px; height:15px;}
  .dash-head{align-items:flex-start;}
  .dash-title{font-size:1.5rem;}
  .dash-sub{font-size:0.82rem; line-height:1.45;}
  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:24px;}
  .stat-box{padding:15px; border-radius:12px;}
  .stat-box b{font-size:1.55rem;}
  .search-bar{flex-direction:column; gap:8px; margin-bottom:16px;}
  .search-bar .btn-secondary{width:100%;}
  .table-wrap{border-radius:12px;}
  .dashboard-share-btn{display:none;}
  .mobile-bottom-nav{display:flex; position:fixed; left:10px; right:10px; bottom:10px; z-index:500; align-items:stretch; justify-content:space-around; gap:4px; padding:7px 6px; border:1px solid rgba(217,212,203,.9); border-radius:16px; background:rgba(255,255,255,.92); box-shadow:0 14px 34px -18px rgba(14,45,54,.45); backdrop-filter:blur(16px);}
  .mobile-bottom-nav a,.mobile-bottom-nav button{display:flex; flex:1; min-width:0; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:6px 3px; border:0; border-radius:10px; background:transparent; color:var(--ink-soft); font-family:var(--body); font-size:.58rem; font-weight:700;}
  .mobile-bottom-nav svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}.mobile-bottom-nav .active{color:var(--coral-deep); background:rgba(232,104,77,.1);}.mobile-bottom-nav a:active,.mobile-bottom-nav button:active{transform:scale(.96);}
  .admin-bottom-nav{background:rgba(14,45,54,.96); border-color:rgba(255,255,255,.14);}.admin-bottom-nav a{color:rgba(255,255,255,.68);}.admin-bottom-nav .active{background:rgba(232,104,77,.22); color:#fff;}
  .dash-main,.admin-main{padding-bottom:94px;}
  .dashboard-summary{margin-top:20px;}.dashboard-insights{grid-template-columns:1fr; gap:12px; margin-bottom:18px;}.insight-panel{padding:16px; border-radius:14px;}.insight-heading h2{font-size:1rem;}.insight-icon{width:32px; height:32px;}.line-chart-wrap{margin-top:10px; padding:7px 6px 0;}.line-chart-labels{font-size:.52rem;}.reference-note{font-size:.66rem; padding:9px 10px;}.recommendation-list{margin-top:12px; gap:8px;}.recommendation-list small{font-size:.66rem;}.admin-kpi-row strong{font-size:1.15rem;}.admin-kpi-row span{font-size:.58rem;}
}

/* Login pages (admin & user) */
.auth-page{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:30px; background:radial-gradient(600px 400px at 85% -10%, rgba(244,168,37,0.14), transparent 60%), var(--paper);}
.auth-box{max-width:420px; width:100%; background:var(--white); border:1px solid var(--line); border-radius:22px; padding:38px 34px; box-shadow:var(--shadow-soft);}
.auth-box .brand{justify-content:center; margin-bottom:24px;}
.auth-box h2{font-family:var(--display); font-size:1.5rem; text-align:center; color:var(--petrol-deep); margin-bottom:6px;}
.auth-box p.sub{text-align:center; color:var(--ink-soft); font-size:0.88rem; margin-bottom:26px;}