@font-face{font-family:"IBM Plex Sans Thai";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/ibm-plex-sans-thai/regular.ttf") format("truetype")}
@font-face{font-family:"IBM Plex Sans Thai";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/ibm-plex-sans-thai/medium.ttf") format("truetype")}
@font-face{font-family:"IBM Plex Sans Thai";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/ibm-plex-sans-thai/semibold.ttf") format("truetype")}
@font-face{font-family:"IBM Plex Sans Thai";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/ibm-plex-sans-thai/bold.ttf") format("truetype")}

/* Site-wide glass-style facelift. Purely additive/override layer loaded after web.css -
   does not remove or rename any existing class (rowtheme0/1, searchrow0/1, subrow0/1,
   editcaptstyle, etc. stay exactly as-is for admin/data-table pages not yet redesigned). */
:root{
  --tp-navy:#1f2d3d;
  --tp-gold:#b78f3f;
  --tp-glass-bg:rgba(255,255,255,0.6);
  --tp-glass-border:rgba(183,143,63,0.45);
  --tp-font-ui:"IBM Plex Sans Thai","Noto Sans Thai","Leelawadee UI",Tahoma,sans-serif;
}
html,body{
  background: linear-gradient(135deg,#e9edf2 0%,#cfd9e6 45%,#e9d9bf 100%) !important;
  background-attachment: fixed !important;
}
body{
  font-family:var(--tp-font-ui);
  font-weight:400;
  font-synthesis:none;
  text-rendering:optimizeLegibility;
}
button,
input,
select,
textarea,
.pedlink,
.greycaption,
.greylink{
  font-family:var(--tp-font-ui)!important;
}
button,
input[type="button"],
input[type="submit"],
.tp-dog-tile-links .pedlink,
.tp-viewall-toolbar-paging a{
  font-weight:600!important;
  letter-spacing:0!important;
}
.tp-main h1,
.tp-main h2,
.tp-main h3,
.tp-dog-tile-name,
.tp-breed-discovery-card span{
  font-family:var(--tp-font-ui)!important;
  font-weight:700;
}
@media (max-width:1220px){
  body{ overflow-x:auto; }
}

/* Page shell - replaces the old fixed 3-column (170/857/170) table layout */
.tp-page{
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}
.tp-page *{ box-sizing: border-box; }

/* Header banner strip */
.tp-glass-header{
  background: rgba(255,255,255,0.55) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--tp-glass-border);
  border-radius: 0 0 14px 14px;
  margin-top: 10px;
}
.tp-notify{
  font-family: "Times New Roman",serif;
  color:#fff;
  padding: 8px 14px;
}
.tp-notify table{ width:100% !important; }
.tp-notify-edit{ color:#fff !important; white-space:nowrap; }

.tp-stickywrap{
  position: sticky;
  top: 0;
  z-index: 500;
  background: linear-gradient(135deg,#e9edf2 0%,#cfd9e6 45%,#e9d9bf 100%);
  padding-top: 8px;
  margin: 0 -16px;
  padding-left: 16px;
  padding-right: 16px;
}

.tp-topbar{
  display:flex;
  justify-content:flex-end;
  padding: 6px 4px 6px;
}

.tp-nav{
  padding: 0 4px 16px;
}
/* The nav bar markup is still a legacy fixed-px image-sliced table (topnav_left/right.gif
   end caps) - force it fluid and hide the now-redundant end-cap images since ul.topnav
   already has its own rounded glass background. */
.tp-nav table{ width:100% !important; }
.tp-nav table td[style*="width"]{ width:auto !important; }
.tp-nav table img{ display:none; }

.tp-main{
  padding: 0 2px 30px;
  min-height: 300px;
}

/* Top nav */
ul.topnav{
  background: rgba(31,45,61,0.75) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(31,45,61,0.25);
  width: 100% !important;
}
ul.topnav::after{ content:""; display:table; clear:both; }
ul.topnav li a{
  border-radius: 6px;
}
ul.topnav li a:hover{
  background: rgba(183,143,63,0.35) !important;
  border-radius: 6px;
}
ul.topnav li ul.subnav{
  background: rgba(40,40,40,0.92) !important;
  backdrop-filter: blur(8px);
  border-radius: 0 0 8px 8px;
  border: 1px solid var(--tp-glass-border) !important;
}

/* Login bar / logged-in bar glass pill */
.tp-authbar{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background: var(--tp-glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--tp-glass-border);
  border-radius: 999px;
  padding: 6px 14px;
}
.tp-authbar input.loginbox{
  border: 1px solid var(--tp-glass-border) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.8) !important;
  padding: 2px 10px !important;
  height:22px !important;
}
.tp-authbar input[type=button]{
  border: 1px solid var(--tp-gold) !important;
  border-radius: 999px !important;
  background: rgba(183,143,63,0.15) !important;
  color: var(--tp-navy) !important;
  padding: 2px 14px !important;
  cursor:pointer;
}
.tp-authbar input[type=button]:hover{
  background: rgba(183,143,63,0.35) !important;
}

/* Generic glass content card, used to wrap page bodies (homepage, howuse, aboutus, etc.) */
.tp-glass-card{
  background: var(--tp-glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--tp-glass-border);
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(31,45,61,0.15);
  padding: 18px;
}

/* Footer */
.tp-glass-footer{
  background: rgba(255,255,255,0.5) !important;
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--tp-glass-border);
  border-radius: 14px 14px 0 0;
  padding: 14px;
  text-align: center;
  margin-top: 10px;
}

/* Dog result tiles (viewall.php, search grids) */
.tp-dog-tile{
  background: rgba(255,255,255,0.7) !important;
  border: 1px solid var(--tp-glass-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 3px 10px rgba(31,45,61,0.1);
  transition: transform .15s ease, box-shadow .15s ease;
}
.tp-dog-tile:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(31,45,61,0.18);
}
.tp-dog-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 14px;
}
.tp-dog-tile{
  padding: 10px;
  text-align: center;
}
.tp-dog-tile-img{
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 6px;
}
.tp-dog-tile-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}
.tp-dog-tile-name{
  font-weight: bold;
  color: var(--tp-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tp-dog-tile-links{
  font-size: 0.8em;
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap:nowrap;
  white-space:nowrap;
}
.tp-dog-tile-links .pedlink{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:52px;
  min-height:30px;
  padding:4px 8px !important;
  box-sizing:border-box;
  white-space:nowrap !important;
}

/* Compact visual breed filter above the registry list */
.tp-breed-discovery{
  margin: 0 0 18px;
  padding: 15px;
  border: 1px solid rgba(119,143,178,.22);
  border-radius: 18px;
  background:
    radial-gradient(circle at 96% 8%, rgba(217,181,109,.2), transparent 30%),
    linear-gradient(135deg, rgba(238,248,255,.82), rgba(249,246,255,.78));
  box-shadow: 0 10px 26px rgba(44,61,89,.09);
}
.tp-breed-discovery-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px;
}
.tp-breed-discovery-head span{
  display:block;
  margin-bottom:2px;
  color:#607393;
  font-size:9px;
  font-weight:800;
  letter-spacing:.16em;
}
.tp-breed-discovery-head h2{
  margin:0;
  color:var(--tp-navy);
  font-family:"Cormorant Garamond","Playfair Display",Georgia,serif;
  font-size:22px;
  line-height:1.1;
}
.tp-breed-discovery-head button{
  flex:0 0 auto;
  border:1px solid rgba(92,116,151,.25);
  border-radius:999px;
  padding:7px 12px;
  color:#415574;
  background:rgba(255,255,255,.75);
  cursor:pointer;
}
.tp-breed-discovery-head button:hover{
  background:#fff;
}
.tp-breed-discovery-track{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.tp-breed-discovery-card{
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  grid-template-areas:"image name" "image cue";
  column-gap:10px;
  align-items:center;
  min-width:0;
  padding:7px;
  border:1px solid rgba(103,127,161,.2);
  border-radius:13px;
  color:var(--tp-navy) !important;
  background:rgba(255,255,255,.82) !important;
  box-shadow:0 5px 14px rgba(35,53,82,.07);
  text-align:left;
  cursor:pointer;
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.tp-breed-species-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
}
.tp-breed-species-tab{
  border:1px solid rgba(92,116,151,.25);
  border-radius:999px;
  padding:7px 16px;
  color:#415574;
  background:rgba(255,255,255,.7);
  cursor:pointer;
  font-weight:600;
}
.tp-breed-species-tab:hover{
  background:#fff;
}
.tp-breed-species-tab.active{
  background:var(--tp-navy,#1c3a63);
  color:#fff;
  border-color:transparent;
}
.tp-breed-discovery-track.tp-breed-species-panel{
  display:none;
}
.tp-breed-discovery-track.tp-breed-species-panel.active{
  display:grid;
}
.tp-breed-discovery-card:hover,
.tp-breed-discovery-card:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(83,112,158,.48);
  background:#fff !important;
  box-shadow:0 9px 20px rgba(35,53,82,.14);
}
.tp-breed-discovery-card img{
  grid-area:image;
  width:64px;
  height:54px;
  border-radius:9px;
  object-fit:cover;
  background:#e9eef6;
}
.tp-breed-discovery-card span{
  grid-area:name;
  align-self:end;
  overflow:hidden;
  color:#233653 !important;
  font-size:13px;
  font-weight:800;
  line-height:1.15;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.tp-breed-discovery-card small{
  grid-area:cue;
  align-self:start;
  margin-top:3px;
  color:#71809a !important;
  font-size:9px;
}
.tp-main .tp-breed-discovery .tp-breed-discovery-card{
  color:var(--tp-navy) !important;
  background:rgba(255,255,255,.86) !important;
}
.tp-main .tp-breed-discovery .tp-breed-discovery-card:hover,
.tp-main .tp-breed-discovery .tp-breed-discovery-card:focus-visible{
  background:#fff !important;
}
.tp-viewall-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:0 0 14px;
}
.tp-viewall-toolbar-search{
  flex:1 1 360px;
  min-width:0;
}
.tp-viewall-toolbar-search table,
.tp-viewall-toolbar-search tbody,
.tp-viewall-toolbar-search tr,
.tp-viewall-toolbar-search td{
  display:block;
  width:100% !important;
}
.tp-viewall-toolbar-search td{
  display:flex;
  align-items:center;
  gap:7px;
}
.tp-viewall-toolbar-search #petezysearchkeyword{
  flex:1 1 auto;
  width:auto !important;
  min-width:120px;
}
.tp-viewall-toolbar-paging{
  flex:0 1 760px;
  min-width:0;
}
.tp-viewall-toolbar-paging .tp-compact-pager{
  margin:0;
}
@media(max-width:900px){
  .tp-viewall-toolbar{
    align-items:stretch;
    flex-direction:column;
  }
  .tp-viewall-toolbar-search,
  .tp-viewall-toolbar-paging{
    flex-basis:auto;
    width:100%;
  }
}
@media(max-width:900px){
  .tp-breed-discovery-track{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:520px){
  .tp-breed-discovery{ padding:12px; }
  .tp-breed-discovery-head{ align-items:center; }
  .tp-breed-discovery-head h2{ font-size:19px; }
  .tp-breed-discovery-track{
    display:flex;
    gap:9px;
    margin-right:-12px;
    padding-right:12px;
    overflow-x:auto;
    scroll-snap-type:x proximity;
  }
  .tp-breed-discovery-card{
    flex:0 0 220px;
    scroll-snap-align:start;
  }
}

/* Homepage sections */
.tp-hero{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin: 16px 0;
}
.tp-hero h1{
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--tp-navy);
  margin: 0 0 10px;
}
.tp-hero-search{
  display: flex;
  gap: 8px;
  margin-top: 14px;
  max-width: 420px;
}
.tp-hero-search input[type=text]{
  flex: 1;
  border: 1px solid var(--tp-glass-border);
  border-radius: 999px;
  padding: 8px 16px;
  background: rgba(255,255,255,0.85);
}
.tp-hero-search button{
  border: 1px solid var(--tp-gold);
  border-radius: 999px;
  background: rgba(183,143,63,0.15);
  color: var(--tp-navy);
  padding: 8px 20px;
  cursor: pointer;
}
.tp-hero-search button:hover{ background: rgba(183,143,63,0.32); }

.tp-stats{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 20px 0;
}
.tp-stat-card{
  background: var(--tp-glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--tp-glass-border);
  border-radius: 14px;
  padding: 16px;
  text-align: center;
}
.tp-stat-num{ font-size: 1.8em; font-weight: bold; color: var(--tp-navy); }
.tp-stat-label{ font-size: 0.85em; color: #5a6672; }

.tp-features h2, .tp-breeds h2, .tp-dogs-showcase h2, .tp-learnmore h2{
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--tp-navy);
  text-align: center;
}
.tp-feature-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 16px 0;
}
.tp-feature-card{
  background: var(--tp-glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--tp-glass-border);
  border-radius: 14px;
  padding: 18px;
}
.tp-feature-icon{ font-size: 1.8em; margin-bottom: 6px; }
.tp-feature-card h3{ color: var(--tp-navy); margin: 4px 0; }
.tp-feature-card p{ color: #5a6672; font-size: 0.9em; }

.tp-breed-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 16px 0;
}
.tp-breed-chip{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--tp-glass-border);
  border-radius: 999px;
  padding: 6px 16px 6px 7px;
  font-size: 0.9em;
}
.tp-breed-name{ color: var(--tp-navy); font-weight:bold; }
.tp-breed-count{ display:none; }
.tp-breed-rank{
  display:inline-grid;
  place-items:center;
  width:27px;
  height:27px;
  flex:0 0 27px;
  border-radius:50%;
  color:#fff;
  background:linear-gradient(145deg,#7183a5,#465875);
  font-weight:800;
  line-height:1;
  box-shadow:0 5px 12px rgba(48,62,87,.18);
}
.tp-breed-rank-1{ background:linear-gradient(145deg,#ffd86a,#d99a19); color:#654100; }
.tp-breed-rank-2{ background:linear-gradient(145deg,#edf2fa,#9aa8bd); color:#36445a; }
.tp-breed-rank-3{ background:linear-gradient(145deg,#e5ad77,#a96835); color:#fff8ed; }

.tp-legacy-pager{ display:none!important; }
.tp-compact-pager{
  display:grid;
  grid-template-columns:1fr auto auto 1fr;
  align-items:center;
  gap:12px;
  width:min(760px,100%);
  margin:18px auto;
  padding:9px 12px;
  border:1px solid rgba(255,255,255,.82);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(255,255,255,.86),rgba(235,242,255,.69));
  box-shadow:0 12px 30px rgba(45,65,96,.11),inset 0 1px 0 #fff;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.tp-server-pager{
  grid-template-columns:1fr auto 1fr;
}
.tp-pager-side{
  display:flex;
  align-items:center;
  gap:7px;
}
.tp-pager-side-start{justify-content:flex-end}
.tp-pager-side-end{justify-content:flex-start}
.tp-pager-side-start .tp-pager-button:first-child span::before{content:"\219E ";font-size:15px}
.tp-pager-side-start .tp-pager-button:last-child span::before{content:"\2039 ";font-size:17px}
.tp-pager-side-end .tp-pager-button:first-child span::after{content:" \203A";font-size:17px}
.tp-pager-side-end .tp-pager-button:last-child span::after{content:" \21A0";font-size:15px}
.tp-pager-button,
.tp-pager-jump{
  font-family:inherit;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.tp-pager-button{
  min-height:36px;
  padding:0 12px;
  border:1px solid rgba(81,112,162,.22);
  border-radius:11px;
  background:rgba(255,255,255,.76);
  color:#304665;
  font-weight:700;
  cursor:pointer;
}
.tp-pager-button:hover:not(:disabled){
  border-color:rgba(48,91,153,.5);
  background:linear-gradient(145deg,#fff,#f1f6ff);
  box-shadow:0 7px 15px rgba(48,77,120,.13);
  transform:translateY(-1px);
}
.tp-pager-button:disabled{
  opacity:.38;
  cursor:default;
}
.tp-pager-status{
  display:grid;
  grid-template-columns:auto auto;
  align-items:baseline;
  column-gap:5px;
  min-width:84px;
  padding:2px 11px;
  border-right:1px solid rgba(102,126,164,.17);
  color:#354966;
  white-space:nowrap;
}
.tp-pager-status small{
  grid-column:1/-1;
  color:#7b8799;
  font-size:9px;
  font-weight:600;
  letter-spacing:.04em;
}
.tp-pager-status strong{color:#172b49;font-size:20px;line-height:1}
.tp-pager-status span{color:#738096;font-size:11px}
.tp-pager-jump-label{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:#5a6980;
  font-size:12px;
  white-space:nowrap;
}
.tp-pager-jump{
  width:54px;
  height:36px;
  box-sizing:border-box;
  border:1px solid rgba(73,104,151,.3);
  border-radius:9px;
  background:rgba(255,255,255,.92);
  color:#20324c;
  text-align:center;
  font-weight:700;
}
.tp-pager-jump:focus{
  border-color:#6387bf;
  outline:3px solid rgba(99,135,191,.15);
}

@media (max-width:768px){
  .tp-stats{ grid-template-columns: repeat(2, 1fr); }
  .tp-hero{ text-align:center; justify-content:center; }
  .tp-hero-search{ margin-left:auto; margin-right:auto; }
  .tp-compact-pager{
    grid-template-columns:1fr auto 1fr;
    gap:7px;
    padding:9px;
  }
  .tp-pager-status{
    grid-column:1/-1;
    grid-row:1;
    justify-content:center;
    min-width:0;
    padding:0 0 7px;
    border-right:0;
    border-bottom:1px solid rgba(102,126,164,.15);
    text-align:center;
  }
  .tp-pager-side-start{grid-column:1;grid-row:2}
  .tp-pager-jump-label{grid-column:2;grid-row:2}
  .tp-pager-side-end{grid-column:3;grid-row:2}
  .tp-pager-button{min-height:34px;padding:0 8px;font-size:10px}
}
@media(max-width:430px){
  .tp-pager-button span{font-size:0}
  .tp-pager-button span::before,
  .tp-pager-button span::after{font-size:18px!important}
  .tp-pager-side{gap:5px}
  .tp-pager-jump-label{font-size:0;gap:0}
  .tp-pager-jump{width:52px;font-size:13px}
}

/* Generic form inputs/buttons used across search/edit/signup/login forms */
.tp-glass-card input[type=text],
.tp-glass-card input[type=password],
.tp-glass-card input[type=email],
.tp-glass-card textarea,
.tp-glass-card select{
  border: 1px solid var(--tp-glass-border) !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,0.75) !important;
  padding: 4px 8px !important;
}
.tp-glass-card input[type=submit],
.tp-glass-card input[type=button],
.tp-glass-card button{
  border: 1px solid var(--tp-gold) !important;
  border-radius: 999px !important;
  background: rgba(183,143,63,0.15) !important;
  color: var(--tp-navy) !important;
  cursor:pointer;
}
.tp-glass-card input[type=submit]:hover,
.tp-glass-card input[type=button]:hover,
.tp-glass-card button:hover{
  background: rgba(183,143,63,0.32) !important;
}

/* Onboarding / how-to-use step images */
.tp-glass-card img[src*="/images/step/"]{
  border-radius: 10px;
  border: 1px solid var(--tp-glass-border);
  box-shadow: 0 4px 14px rgba(31,45,61,0.12);
  margin: 6px 0 4px;
  max-width: 100%;
  height: auto;
}
.tp-glass-card .homedisplay strong{
  color: var(--tp-navy);
}

@media (max-width:768px){
  .tp-page{ padding: 0 8px; }
  .tp-notify{ padding: 6px 8px; font-size: 0.85em; }
  .tp-topbar{ justify-content:center; }
  ul.topnav{ font-size: 0.85em; }
  .tp-glass-card{ border-radius: 12px; padding: 12px; }
  .tp-glass-card table[width]{ width:100% !important; }
  .tp-glass-card td[style*="width:500px"], .tp-glass-card td img[width]{ max-width:100%; height:auto; }
}

@media print{
  html,body{ background:#fff !important; }
  ul.topnav, .tp-authbar, .tp-glass-header{ display:none !important; }
}

/* Glass theme v2: one visual system for the original PHP application.
   These rules deliberately leave all legacy URLs, names and form actions intact. */
:root{
  --tp-ink:#132238;
  --tp-ink-soft:#506078;
  --tp-cyan:#70d9ec;
  --tp-violet:#8d7cf6;
  --tp-surface:rgba(255,255,255,.62);
  --tp-surface-strong:rgba(255,255,255,.82);
  --tp-line:rgba(255,255,255,.74);
  --tp-shadow:0 22px 55px rgba(37,55,83,.16);
}
html{ min-height:100%; }
body{
  color:var(--tp-ink);
  background:
    radial-gradient(circle at 8% 12%,rgba(112,217,236,.46),transparent 26rem),
    radial-gradient(circle at 92% 18%,rgba(141,124,246,.34),transparent 29rem),
    radial-gradient(circle at 70% 94%,rgba(244,183,98,.32),transparent 30rem),
    linear-gradient(145deg,#edf7fb 0%,#e9e9fb 47%,#fff5e9 100%) !important;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.32;
  background-image:
    linear-gradient(rgba(255,255,255,.34) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.34) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,black,transparent 82%);
}
a{ color:#2f5c92; }
.tp-page{
  width:calc(100% - 20px);
  max-width:1440px;
  padding:18px 10px 0;
}
.tp-glass-header{
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:14px 18px;
  border:1px solid var(--tp-line);
  border-radius:26px;
  background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(255,255,255,.38)) !important;
  box-shadow:var(--tp-shadow);
}
.tp-notify{
  flex:1;
  min-width:0;
  color:var(--tp-ink);
  border:1px solid rgba(255,255,255,.68);
  border-radius:18px;
  background:rgba(255,255,255,.34);
}
.tp-stickywrap{
  top:8px;
  margin:12px 0 18px;
  padding:8px;
  border:1px solid var(--tp-line);
  border-radius:22px;
  background:rgba(235,244,251,.67);
  box-shadow:0 12px 35px rgba(36,54,80,.12);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
}
.tp-topbar{ padding:0 4px 7px; }
.tp-nav{ padding:0; }
.tp-nav table,.tp-nav tbody,.tp-nav tr,.tp-nav td{
  display:block;
  width:100% !important;
  height:auto !important;
}
ul.topnav{
  float:none;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:4px;
  height:auto !important;
  min-height:48px;
  padding:5px !important;
  border:1px solid rgba(255,255,255,.22);
  background:linear-gradient(135deg,rgba(23,39,62,.93),rgba(48,58,101,.88)) !important;
}
ul.topnav li{ float:none; padding:0; }
ul.topnav li a{
  float:none;
  min-height:38px;
  display:flex;
  align-items:center;
  padding:8px 13px !important;
  font-family:var(--tp-font-ui)!important;
  font-size:14px !important;
  border:1px solid transparent;
}
ul.topnav li a:hover{
  margin:0;
  border-color:rgba(255,255,255,.22);
  background:rgba(255,255,255,.13) !important;
}
ul.topnav li ul.subnav{
  top:43px;
  left:0;
  padding:7px;
  border-radius:14px !important;
  box-shadow:0 18px 38px rgba(14,23,38,.28);
}
ul.topnav li ul.subnav li{ border:0; }
ul.topnav li ul.subnav li a{
  width:100% !important;
  padding:9px 12px !important;
  border-radius:9px;
}
.tp-authbar{
  max-width:100%;
  min-height:38px;
  border-color:var(--tp-line);
  box-shadow:0 8px 20px rgba(42,60,88,.08);
}
.tp-main{ min-height:56vh; padding:0 0 34px; }
.tp-main > table,
.tp-main > form > table,
.tp-main > div:not(.tp-glass-card):not(.tp-stats):not(.tp-feature-grid):not(.tp-breed-grid){
  max-width:100%;
}
.tp-glass-card,
.tp-feature-card,
.tp-stat-card,
.tp-breed-chip,
.tp-dog-tile{
  background:linear-gradient(145deg,rgba(255,255,255,.76),rgba(255,255,255,.43)) !important;
  border:1px solid var(--tp-line) !important;
  box-shadow:var(--tp-shadow);
  backdrop-filter:blur(18px) saturate(145%);
  -webkit-backdrop-filter:blur(18px) saturate(145%);
}
.tp-glass-card{ border-radius:24px; padding:clamp(16px,3vw,30px); }
.tp-hero{
  min-height:250px;
  position:relative;
  overflow:hidden;
  align-items:flex-end;
}
.tp-hero::after{
  content:"";
  position:absolute;
  width:240px;
  height:240px;
  border-radius:50%;
  right:-60px;
  top:-90px;
  background:linear-gradient(145deg,rgba(112,217,236,.32),rgba(141,124,246,.24));
  border:1px solid rgba(255,255,255,.55);
}
.tp-hero-text{ position:relative; z-index:1; max-width:680px; }
.tp-hero h1{ font-size:clamp(28px,4vw,48px); line-height:1.05; }
.tp-hero p{ color:var(--tp-ink-soft); font-size:15px; line-height:1.75; }
.tp-hero-search input[type=text]{
  min-height:44px;
  box-shadow:inset 0 1px 3px rgba(29,46,72,.08);
}
.tp-hero-search button{ min-height:44px; font-weight:600; }
.tp-pedigree-showcase{
  position:relative;
  z-index:2;
  flex:1 1 440px;
  min-width:0;
  padding:13px;
  border:1px solid rgba(255,255,255,.82);
  border-radius:19px;
  background:rgba(255,255,255,.5);
  box-shadow:0 16px 36px rgba(35,54,83,.12);
  backdrop-filter:blur(16px) saturate(145%);
  -webkit-backdrop-filter:blur(16px) saturate(145%);
}
.tp-showcase-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin:0 3px 10px;
}
.tp-showcase-heading span{
  color:var(--tp-ink);
  font:700 11px/1 var(--tp-font-ui);
  letter-spacing:1.6px;
}
.tp-showcase-heading small{
  color:var(--tp-ink-soft);
  font-size:9px;
}
.tp-showcase-viewport{
  overflow:hidden;
  border-radius:13px;
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.tp-showcase-track{
  display:flex;
  width:max-content;
  gap:9px;
  padding:2px 12px 8px;
  animation:tpShowcaseScroll 46s linear infinite;
}
.tp-showcase-viewport:hover .tp-showcase-track,
.tp-showcase-viewport:focus-within .tp-showcase-track{
  animation-play-state:paused;
}
.tp-showcase-card{
  width:210px;
  min-height:76px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px;
  color:var(--tp-ink);
  text-decoration:none;
  border:1px solid rgba(255,255,255,.86);
  border-radius:13px;
  background:rgba(255,255,255,.72);
  box-shadow:0 7px 17px rgba(31,47,71,.09);
  transition:transform .18s ease,border-color .18s ease;
}
.tp-showcase-card:hover{
  transform:translateY(-2px);
  border-color:rgba(112,217,236,.72);
}
.tp-showcase-photo{
  width:58px;
  height:58px;
  flex:0 0 58px;
  overflow:hidden;
  border-radius:10px;
  background:#edf1f4;
}
.tp-showcase-photo img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.tp-showcase-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.tp-showcase-copy strong{
  overflow:hidden;
  color:var(--tp-ink);
  font-family:"Cormorant Garamond","Playfair Display",Georgia,serif;
  font-size:15px;
  line-height:1.05;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.tp-showcase-copy small{
  overflow:hidden;
  color:var(--tp-ink-soft);
  font-size:9px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.tp-showcase-copy em{
  color:#5d6e9f;
  font-size:8px;
  font-style:normal;
  font-weight:700;
  letter-spacing:.5px;
}
.tp-showcase-all{
  display:flex;
  justify-content:flex-end;
  gap:6px;
  margin:4px 4px 0;
  color:#425b83;
  font-size:10px;
  font-weight:700;
  text-decoration:none;
}
@keyframes tpShowcaseScroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(calc(-50% - 4.5px)); }
}
.tp-feature-card,.tp-stat-card{
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.tp-feature-card:hover,.tp-stat-card:hover{
  transform:translateY(-4px);
  border-color:rgba(112,217,236,.7) !important;
  box-shadow:0 25px 58px rgba(43,61,91,.2);
}
.tp-feature-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:linear-gradient(145deg,rgba(112,217,236,.34),rgba(141,124,246,.24));
}
.tp-glass-footer{
  border:1px solid var(--tp-line);
  border-bottom:0;
  border-radius:24px 24px 0 0;
  padding:22px;
  background:linear-gradient(145deg,rgba(255,255,255,.74),rgba(255,255,255,.36)) !important;
  box-shadow:0 -12px 38px rgba(42,60,88,.1);
}

/* Bring untouched legacy list, admin and form screens into the same theme. */
.tp-main table{ border-collapse:separate; border-spacing:0; }
.tp-main table[bgcolor],
.tp-main td[bgcolor],
.tp-main tr[bgcolor]{ background-color:transparent !important; }
.tp-main .rowtheme0,.tp-main .rowtheme1,
.tp-main .searchrow0,.tp-main .searchrow1,
.tp-main .subrow0,.tp-main .subrow1{
  background:rgba(255,255,255,.56) !important;
  border-color:rgba(255,255,255,.7) !important;
}
.tp-main input[type=text],
.tp-main input[type=password],
.tp-main input[type=email],
.tp-main select,
.tp-main textarea{
  max-width:100%;
  min-height:36px;
  color:var(--tp-ink);
  border:1px solid rgba(110,133,162,.28) !important;
  border-radius:10px !important;
  background:rgba(255,255,255,.76) !important;
  box-shadow:inset 0 1px 2px rgba(30,48,70,.06);
  padding:7px 10px !important;
  outline:none;
}
.tp-main input:focus,.tp-main select:focus,.tp-main textarea:focus{
  border-color:rgba(85,154,207,.65) !important;
  box-shadow:0 0 0 3px rgba(112,217,236,.16);
}
.tp-main input[type=button],
.tp-main input[type=submit],
.tp-main button{
  min-height:36px;
  border:1px solid rgba(255,255,255,.58) !important;
  border-radius:11px !important;
  background:linear-gradient(145deg,#5a83af,#5e69a5) !important;
  color:#fff !important;
  padding:7px 14px !important;
  box-shadow:0 7px 16px rgba(60,80,126,.2);
  cursor:pointer;
}
.tp-main img{ max-width:100%; height:auto; }

/* Modal/lightbox pages keep their original table markup. */
body > table[width="100%"]:first-of-type{
  width:min(1100px,calc(100% - 20px)) !important;
  margin:10px auto 0;
}
body > table[align="center"],
body > table[width="1024"],
body > table[width="1100"]{
  width:min(1100px,calc(100% - 20px)) !important;
  margin:10px auto !important;
  padding:10px;
  border:1px solid var(--tp-line);
  border-radius:20px;
  background:linear-gradient(145deg,rgba(255,255,255,.78),rgba(255,255,255,.47));
  box-shadow:var(--tp-shadow);
  backdrop-filter:blur(18px) saturate(145%);
  -webkit-backdrop-filter:blur(18px) saturate(145%);
}
body > table input[type=text],
body > table input[type=password],
body > table input[type=email],
body > table select,
body > table textarea{
  max-width:100%;
  min-height:34px;
  border:1px solid rgba(110,133,162,.28) !important;
  border-radius:10px !important;
  background:rgba(255,255,255,.8) !important;
  padding:6px 9px !important;
}
body > table input[type=button],
body > table input[type=submit],
body > table button{
  min-height:35px;
  border:1px solid rgba(255,255,255,.58) !important;
  border-radius:11px !important;
  background:linear-gradient(145deg,#5a83af,#5e69a5) !important;
  color:#fff !important;
  padding:7px 14px !important;
  cursor:pointer;
}

/* ---------------------------------------------------------------------
   Member pedigree manager
   The source page is Windows-874 legacy markup, so this layer modernizes
   layout without converting or rewriting its text bytes.
   --------------------------------------------------------------------- */
.tp-main table.tp-glass-card:has(.tp-dog-tile){
  display:block;
  width:min(1180px,100%)!important;
  margin:16px auto!important;
  padding:clamp(14px,2.5vw,28px)!important;
  overflow:visible;
}
.tp-main table.tp-glass-card:has(.tp-dog-tile)>tbody{
  display:block;
  width:100%;
}
.tp-main table.tp-glass-card:has(.tp-dog-tile)>tbody>tr{
  display:block;
  width:100%;
  height:auto!important;
}
.tp-main table.tp-glass-card:has(.tp-dog-tile)>tbody>tr>td{
  display:block;
  width:100%!important;
  white-space:normal!important;
}
.tp-main table.tp-glass-card:has(.tp-dog-tile) td:has(>img[src*="manage-your-dog"]){
  position:relative;
  min-height:118px;
  margin-bottom:14px;
  padding:24px clamp(18px,4vw,42px);
  border:1px solid rgba(137,170,220,.45);
  border-radius:20px;
  overflow:hidden;
  background:
    radial-gradient(circle at 88% 25%,rgba(139,180,255,.3),transparent 30%),
    linear-gradient(130deg,rgba(255,255,255,.94),rgba(224,238,255,.72));
}
.tp-main table.tp-glass-card:has(.tp-dog-tile) td:has(>img[src*="manage-your-dog"])>img{
  display:none!important;
}
.tp-main table.tp-glass-card:has(.tp-dog-tile) td:has(>img[src*="manage-your-dog"])::before{
  content:"My Pedigree Records";
  display:block;
  color:#182a45;
  font:700 clamp(24px,3vw,38px)/1.15 Georgia,serif;
}
.tp-main table.tp-glass-card:has(.tp-dog-tile) td:has(>img[src*="manage-your-dog"])::after{
  content:"Manage animal profiles, photos, ownership details and certified pedigree records.";
  display:block;
  max-width:650px;
  margin-top:10px;
  color:#5d6d83;
  font-size:13px;
  line-height:1.55;
}
.tp-main table.tp-glass-card:has(.tp-dog-tile) a[href*="createObject"]{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  margin:4px 0 16px!important;
  padding:0 17px;
  border:1px solid rgba(58,95,155,.42);
  border-radius:12px;
  background:linear-gradient(135deg,#254d85,#5478ae);
  color:#fff!important;
  box-shadow:0 8px 20px rgba(34,69,118,.2);
  text-decoration:none!important;
}
.tp-main table.tp-glass-card:has(.tp-dog-tile) table[style*="alldog.jpg"]{
  width:100%!important;
  height:auto!important;
  margin:0 0 18px;
  padding:10px;
  border:1px solid rgba(177,195,220,.55);
  border-radius:14px;
  background:rgba(248,251,255,.82)!important;
}
.tp-main table.tp-glass-card:has(.tp-dog-tile) table[style*="alldog.jpg"] td:first-child{
  display:none!important;
}
.tp-main table.tp-glass-card:has(.tp-dog-tile) table:has(.tp-dog-tile){
  display:block;
  width:100%!important;
}
.tp-main table.tp-glass-card:has(.tp-dog-tile) table:has(.tp-dog-tile)>tbody{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:16px;
  width:100%;
}
.tp-main table.tp-glass-card:has(.tp-dog-tile) table:has(.tp-dog-tile)>tbody>tr{
  display:contents;
}
.tp-main table.tp-glass-card:has(.tp-dog-tile) table:has(.tp-dog-tile)>tbody>tr>td{
  display:block;
  width:auto!important;
  min-width:0;
  padding:0!important;
  white-space:normal!important;
}
.tp-main table.tp-glass-card:has(.tp-dog-tile) table:has(.tp-dog-tile)>tbody>tr>td[colspan]{
  display:none!important;
}
.tp-main .tp-dog-tile{
  width:100%!important;
  height:100%;
  padding:10px!important;
  border:1px solid rgba(163,183,211,.55)!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.86)!important;
  box-shadow:0 8px 22px rgba(35,60,95,.09)!important;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.tp-main .tp-dog-tile:hover{
  transform:translateY(-3px);
  border-color:rgba(72,118,184,.58)!important;
  box-shadow:0 14px 30px rgba(35,60,95,.16)!important;
}
.tp-main .tp-dog-tile td{
  display:block;
  width:100%!important;
  height:auto!important;
  white-space:normal!important;
}
.tp-main .tp-dog-tile img{
  display:block;
  width:100%!important;
  height:180px!important;
  border-radius:12px;
  object-fit:cover!important;
  background:#edf2f8;
}
.tp-main .tp-dog-tile .greycaption{
  width:100%!important;
  height:auto!important;
  min-height:38px;
  padding:9px 4px 3px;
  overflow:visible!important;
  color:#233751;
  font-size:13px;
  font-weight:700;
  line-height:1.35;
  white-space:normal;
}
.tp-main .tp-dog-tile .pedlink{
  display:inline-flex;
  margin:0 2px 7px;
  padding:5px 8px;
  border-radius:8px;
  background:#eef4fc;
  color:#315b91!important;
  font-size:10px!important;
  text-decoration:none!important;
}
.tp-main .tp-dog-tile .pedlink:hover{
  background:#315b91;
  color:#fff!important;
}
@media(max-width:640px){
  .tp-main table.tp-glass-card:has(.tp-dog-tile){
    margin:8px auto!important;
    padding:10px!important;
    border-radius:16px!important;
  }
  .tp-main table.tp-glass-card:has(.tp-dog-tile) table:has(.tp-dog-tile)>tbody{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
  }
  .tp-main .tp-dog-tile{padding:7px!important;border-radius:12px!important}
  .tp-main .tp-dog-tile img{height:135px!important}
  .tp-main table.tp-glass-card:has(.tp-dog-tile) td:has(>img[src*="manage-your-dog"]){
    min-height:100px;
    padding:18px;
    border-radius:14px;
  }
}

/* Typography finishing layer: consistent Thai rhythm across controls and cards. */
ul.topnav li a,
.tp-authbar,
.tp-viewall-toolbar,
.tp-breed-discovery,
.tp-dog-tile{
  font-family:var(--tp-font-ui)!important;
}
ul.topnav li a{
  font-weight:600!important;
  line-height:1.35!important;
}
.tp-viewall-title,
.tp-breed-discovery h2,
.tp-dog-tile-name{
  line-height:1.35!important;
  letter-spacing:-.012em!important;
}
.tp-main .tp-viewall .tp-dog-tile-links .pedlink{
  min-height:42px;
  padding:10px 12px!important;
  font-size:13px;
  font-weight:600!important;
  line-height:1.35;
}
.tp-pager-button,
.tp-viewall-toolbar input[type="button"],
.tp-viewall-toolbar button,
.tp-breed-discovery button{
  font-family:var(--tp-font-ui)!important;
  font-weight:600!important;
  line-height:1.35!important;
}
.tp-authbar input[type="button"]{
  font-family:var(--tp-font-ui)!important;
  font-weight:700!important;
  letter-spacing:.02em;
}
.tp-dog-meta-chip,
.tp-dog-tile-facts small,
.tp-dog-tile-facts strong{
  font-family:var(--tp-font-ui)!important;
  line-height:1.4!important;
}

/* In-page animal detail viewer */
.tp-detail-modal{
  position:fixed;
  inset:0;
  z-index:10050;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  box-sizing:border-box;
  background:rgba(14,25,43,.64);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
}
.tp-detail-modal.is-open{display:flex}
.tp-detail-modal-panel{
  position:relative;
  width:min(560px,94vw);
  height:min(680px,90vh);
  overflow:hidden;
  border:0;
  border-radius:20px;
  background:transparent;
  box-shadow:0 30px 80px rgba(7,17,32,.35);
}
.tp-detail-modal-pedigree{
  position:absolute;
  top:12px;
  left:12px;
  z-index:3;
  padding:9px 14px;
  border:1px solid rgba(255,255,255,.82);
  border-radius:99px;
  background:rgba(255,255,255,.92);
  color:#315a98;
  font-size:12px;
  font-weight:800;
  text-decoration:none;
  box-shadow:0 8px 20px rgba(26,43,70,.15);
}
.tp-detail-modal-frame{
  display:block;
  width:100%;
  height:100%;
  border:0;
  border-radius:20px;
  background:transparent;
  opacity:0;
}
.tp-detail-modal-frame.is-ready{opacity:1}
.tp-dog-tile-action{cursor:pointer}
.tp-dog-tile-action:focus-visible{outline:3px solid rgba(75,119,191,.42);outline-offset:3px}
.tp-detail-modal-close{
  position:absolute;
  top:12px;
  right:12px;
  z-index:2;
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  padding:0;
  border:1px solid rgba(48,66,94,.13);
  border-radius:50%;
  background:rgba(255,255,255,.94);
  color:#20324d;
  font:700 24px/1 Arial,sans-serif;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(26,43,70,.18);
}
.tp-detail-modal-close:hover{
  background:#fff;
  transform:translateY(-1px);
}
body.tp-modal-open{overflow:hidden}

/* Member profile: contain the legacy table form in a readable card. */
.tp-main:has(#buttonchangeprofile){
  width:min(760px,calc(100% - 32px));
  margin:28px auto;
}
.tp-main table.tp-glass-card:has(#buttonchangeprofile){
  width:min(620px,100%)!important;
  margin:0 auto;
  padding:24px 30px 28px;
  border:1px solid rgba(98,123,158,.18);
  border-radius:24px;
  background:rgba(255,255,255,.84);
  box-shadow:0 22px 55px rgba(31,48,76,.13);
}
.tp-main table.tp-glass-card:has(#buttonchangeprofile) td{
  vertical-align:middle;
}
.tp-main table.tp-glass-card:has(#buttonchangeprofile) .greycaption{
  padding-right:16px;
  color:#34445b;
  font:700 14px/1.4 var(--tp-font-ui);
  white-space:nowrap;
}
.tp-main table.tp-glass-card:has(#buttonchangeprofile) .inputgrey{
  width:100%!important;
  min-width:280px;
  box-sizing:border-box;
  padding:11px 13px;
  border:1px solid #ccd7e7;
  border-radius:12px;
  background:#fff;
  color:#1f2d42;
  font:500 15px/1.3 var(--tp-font-ui);
  box-shadow:0 4px 12px rgba(40,62,91,.06);
}
.tp-main table.tp-glass-card:has(#buttonchangeprofile) .inputgrey:disabled{
  background:#eef3f9;
  color:#637289;
}
#buttonchangeprofile{
  min-width:180px;
  padding:12px 20px!important;
  border:0;
  border-radius:12px;
  background:linear-gradient(135deg,#4d7cc3,#6f73bd);
  color:#fff!important;
  font:700 14px/1 var(--tp-font-ui)!important;
  cursor:pointer;
  box-shadow:0 10px 22px rgba(66,91,157,.24);
}
#buttonchangeprofile:hover{transform:translateY(-1px);filter:brightness(1.04)}

@media(max-width:640px){
  .tp-detail-modal{padding:8px}
  .tp-detail-modal-panel{
    width:100%;
    height:min(680px,94vh);
    border-radius:16px;
  }
  .tp-detail-modal-close{
    top:8px;
    right:8px;
  }
  .tp-detail-modal-pedigree{top:8px;left:8px;padding:8px 10px}
  .tp-main:has(#buttonchangeprofile){width:calc(100% - 16px);margin:14px auto}
  .tp-main table.tp-glass-card:has(#buttonchangeprofile){padding:18px 12px}
  .tp-main table.tp-glass-card:has(#buttonchangeprofile) .inputgrey{min-width:0}
}

@media (max-width:820px){
  .tp-page{ padding:8px 8px 0; }
  .tp-glass-header{ min-height:70px; padding:10px; border-radius:19px; }
  .tp-notify{ font-size:.85em; }
  .tp-stickywrap{ position:relative; top:auto; margin:8px 0 14px; }
  .tp-topbar{ justify-content:stretch; }
  .tp-authbar{ width:100%; justify-content:center; flex-wrap:wrap; border-radius:16px; }
  ul.topnav{ align-items:stretch; }
  ul.topnav li{ flex:1 1 calc(50% - 4px); }
  ul.topnav li a{ justify-content:center; text-align:center; }
  ul.topnav li ul.subnav{
    position:relative;
    top:0;
    width:100% !important;
  }
  .tp-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .tp-stat-card{ padding:12px 6px; }
  .tp-stat-num{ font-size:1.35em; }
  .tp-hero{ min-height:220px; }
  .tp-hero-search{ flex-direction:column; }
  .tp-pedigree-showcase{ flex-basis:100%; width:100%; }
  .tp-showcase-card{ width:190px; }
  .tp-main{ overflow-x:auto; }
}
@media (max-width:460px){
  ul.topnav li{ flex-basis:100%; }
  .tp-stats{ grid-template-columns:1fr 1fr; }
}
@media (prefers-reduced-motion:reduce){
  *{ scroll-behavior:auto !important; transition:none !important; animation:none !important; }
  .tp-showcase-track{ animation:none !important; }
}

/* Header composition v3
   Account and navigation stay at the top; announcements sit below them. */
.tp-page{
  display:flex;
  flex-direction:column;
  padding-top:0;
}
.tp-stickywrap{
  order:1;
  top:0;
  display:grid;
  grid-template-columns:minmax(250px,1fr) auto;
  grid-template-areas:
    "brand account"
    "nav nav";
  gap:7px 16px;
  margin-top:0;
  padding:14px;
  overflow:visible;
  border-radius:0 0 26px 26px;
  border-top:0;
  background:
    linear-gradient(135deg,rgba(255,255,255,.82),rgba(239,247,252,.64)) !important;
  box-shadow:0 18px 45px rgba(25,45,72,.14);
}
.tp-stickywrap::before{
  content:"THAILAND PEDIGREE";
  grid-area:brand;
  align-self:center;
  display:flex;
  align-items:center;
  min-height:46px;
  padding-left:56px;
  color:var(--tp-ink);
  font-family:"Cormorant Garamond","Playfair Display",Georgia,serif;
  font-size:clamp(22px,2.25vw,32px);
  font-weight:700;
  line-height:1;
  letter-spacing:2.2px;
  background:
    linear-gradient(145deg,rgba(112,217,236,.92),rgba(141,124,246,.82))
    left center/43px 43px no-repeat;
  border-radius:13px;
  text-shadow:0 1px 0 rgba(255,255,255,.8);
}
.tp-stickywrap::after{
  content:"DIGITAL PEDIGREE REGISTRY";
  position:absolute;
  left:72px;
  top:49px;
  color:var(--tp-ink-soft);
  font:600 10px/1 var(--tp-font-ui);
  letter-spacing:2.3px;
  pointer-events:none;
}
@media(min-width:821px) and (max-width:1100px){
  .tp-page{ padding-left:14px; padding-right:14px; }
  .tp-stickywrap{
    grid-template-columns:minmax(220px,.8fr) minmax(460px,1.2fr);
    gap:9px 12px;
    padding:12px;
  }
  .tp-stickywrap::before{
    padding-left:56px;
    font-size:25px;
    letter-spacing:1.4px;
    background-size:46px 46px;
  }
  .tp-stickywrap::after{
    left:74px;
    top:50px;
    font-size:9px;
    letter-spacing:1.8px;
  }
  .tp-authbar{ padding-left:9px; }
  .tp-authbar input.loginbox{ width:105px !important; }
  ul.topnav li a{ padding-left:12px !important; padding-right:12px !important; }
}
.tp-topbar{
  grid-area:account;
  align-self:center;
  padding:0;
}
.tp-authbar{
  min-height:48px;
  padding:7px 8px 7px 12px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:16px;
  background:linear-gradient(135deg,rgba(27,46,73,.94),rgba(65,67,112,.9));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 12px 28px rgba(29,43,71,.2);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.tp-authbar::before{
  content:"MEMBER\A ACCESS";
  white-space:pre;
  width:62px;
  padding-left:24px;
  color:rgba(255,255,255,.78);
  font:700 8px/1.35 var(--tp-font-ui);
  letter-spacing:1px;
  background:
    radial-gradient(circle at 8px 8px,rgba(112,217,236,.95) 0 4px,transparent 5px),
    radial-gradient(circle at 8px 20px,rgba(112,217,236,.48) 0 8px,transparent 9px);
}
.tp-authbar > table{
  border-collapse:separate;
  border-spacing:6px 0;
}
.tp-authbar > table > tbody > tr > td:first-child{
  padding-right:0;
}
.tp-authbar > table > tbody > tr > td:first-child > input,
.tp-authbar #tempipass input{
  font-family:var(--tp-font-ui)!important;
  font-size:12px !important;
}
.tp-authbar input.loginbox{
  width:126px !important;
  height:36px !important;
  border:1px solid rgba(255,255,255,.25) !important;
  border-radius:11px !important;
  background:rgba(255,255,255,.94) !important;
  color:var(--tp-ink) !important;
  padding:7px 11px !important;
  box-shadow:inset 0 1px 2px rgba(34,51,78,.06);
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.tp-authbar input.loginbox:focus{
  border-color:rgba(81,142,195,.6) !important;
  background:#fff !important;
  box-shadow:0 0 0 3px rgba(112,217,236,.17);
  outline:none;
}
.tp-authbar input[type=button]{
  min-width:68px;
  min-height:36px;
  border:0 !important;
  border-radius:11px !important;
  background:linear-gradient(135deg,#62c7da,#8174dc) !important;
  color:#fff !important;
  font-size:11px;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
  box-shadow:0 8px 18px rgba(20,31,57,.28);
  transition:transform .16s ease,box-shadow .16s ease;
}
.tp-authbar input[type=button]:hover{
  transform:translateY(-1px);
  background:linear-gradient(135deg,#55b9cd,#7064cd) !important;
  box-shadow:0 10px 22px rgba(55,72,121,.3);
}
.tp-authbar a.greylink{
  display:inline-block;
  margin-top:5px;
  color:rgba(255,255,255,.78) !important;
  font-size:10px !important;
  line-height:1.2;
  text-decoration:none;
}
.tp-authbar a.greylink:hover{
  color:#fff !important;
  text-decoration:underline;
}
.tp-authbar table table img{
  width:22px;
  height:22px;
  padding:3px;
  border-radius:8px;
  background:rgba(112,217,236,.16);
}
.tp-authbar table table .greylink{
  color:#fff !important;
  font-weight:700;
}
.tp-nav{
  grid-area:nav;
  position:relative;
}
ul.topnav{
  min-height:44px;
  padding:4px !important;
  border:1px solid rgba(35,54,82,.1);
  border-radius:16px;
  background:rgba(26,43,68,.82) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 12px 25px rgba(23,39,63,.16);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
}
ul.topnav li ul.subnav{
  background:rgba(25,37,55,.94) !important;
  backdrop-filter:blur(20px) saturate(135%);
  -webkit-backdrop-filter:blur(20px) saturate(135%);
}
ul.topnav li.tp-menu-open > a{
  color:#fff !important;
  border-color:rgba(255,255,255,.18);
  background:linear-gradient(135deg,rgba(112,217,236,.2),rgba(141,124,246,.2)) !important;
}
ul.topnav li a{
  min-height:34px;
  padding:7px 15px !important;
  color:rgba(255,255,255,.88) !important;
  font-size:13px !important;
  font-weight:600 !important;
  letter-spacing:.15px;
}
ul.topnav li a:hover{
  color:#fff !important;
  border-color:rgba(255,255,255,.18);
  background:linear-gradient(135deg,rgba(112,217,236,.2),rgba(141,124,246,.2)) !important;
}
.tp-glass-header{
  order:2;
  display:none;
  min-height:auto;
  margin:0 10px 18px;
  padding:8px 12px;
  border-radius:0 0 18px 18px;
  border-top:0;
  background:rgba(255,255,255,.44) !important;
  box-shadow:0 10px 28px rgba(40,57,83,.09);
}
.tp-notify{
  min-height:34px;
  display:flex;
  align-items:center;
  padding:6px 12px;
  border:0;
  border-radius:11px;
  background:transparent;
  color:var(--tp-ink-soft);
}
.tp-notify::before{
  content:"";
  width:8px;
  height:8px;
  flex:0 0 8px;
  margin-right:10px;
  border-radius:50%;
  background:#55b9c9;
  box-shadow:0 0 0 5px rgba(85,185,201,.12);
}
.tp-main{ order:3; }
.tp-glass-footer{ order:4; }

@media(max-width:820px){
  .tp-page{ padding-top:0; }
  .tp-stickywrap{
    grid-template-columns:1fr;
    grid-template-areas:
      "brand"
      "account"
      "nav";
    gap:8px;
    padding:10px;
    border-radius:0 0 20px 20px;
  }
  .tp-stickywrap::before{
    min-height:46px;
    padding-left:56px;
    font-size:23px;
    background-size:44px 44px;
  }
  .tp-stickywrap::after{
    left:72px;
    top:49px;
    font-size:8px;
  }
  .tp-topbar{ width:100%; }
  .tp-authbar{ width:100%; }
  .tp-authbar::before{ flex:0 0 62px; }
  .tp-glass-header{ margin:0 5px 12px; }
}
@media(max-width:520px){
  .tp-page{ padding-left:5px; padding-right:5px; }
  .tp-stickywrap{ padding:8px; }
  .tp-stickywrap::before{ font-size:19px; letter-spacing:1.2px; }
  .tp-stickywrap::after{ top:46px; letter-spacing:1.2px; }
  .tp-authbar input.loginbox{ width:calc(50% - 34px) !important; min-width:86px; }
  .tp-authbar::before{ display:none; }
  .tp-glass-header{ margin-left:2px; margin-right:2px; }
}

/* Header lock: compact Cobulo-style accent and a separate subtitle baseline. */
.tp-stickywrap::before{
  justify-content:flex-start;
  padding-left:30px;
  padding-bottom:11px;
  background-size:10px 43px;
  background-position:left center;
  border-radius:4px;
}
.tp-stickywrap::after{
  left:44px;
  top:52px;
  line-height:1.15;
}
@media(min-width:821px){
  .tp-stickywrap::before{
    max-width:620px;
    margin-left:clamp(8px,2.2vw,32px);
  }
  .tp-stickywrap::after{
    left:calc(clamp(8px,2.2vw,32px) + 44px);
  }
}
@media(max-width:820px){
  .tp-stickywrap::before{
    padding-left:28px;
    padding-bottom:10px;
    background-size:9px 40px;
  }
  .tp-stickywrap::after{
    left:42px;
    top:49px;
  }
}
@media(max-width:520px){
  .tp-stickywrap::before{
    padding-left:24px;
    background-size:8px 36px;
  }
  .tp-stickywrap::after{
    left:36px;
    top:46px;
  }
}

/* Homepage desktop composition: real animal records live in the right sidebar. */
.tp-home-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  grid-template-areas:
    "hero animals"
    "stats animals"
    "features animals"
    "breeds animals"
    "learn animals";
  align-items:start;
  gap:18px 22px;
}
.tp-home-grid > .tp-hero{ grid-area:hero; margin:0; }
.tp-home-grid > .tp-stats{ grid-area:stats; margin:0; }
.tp-home-grid > .tp-features{ grid-area:features; }
.tp-home-grid > .tp-breeds{ grid-area:breeds; }
.tp-home-grid > .tp-dogs-showcase{
  grid-area:animals;
  position:sticky;
  top:146px;
  max-height:calc(100vh - 166px);
  margin:0;
  padding:15px 12px 12px;
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(82,111,151,.4) transparent;
}
.tp-home-grid > .tp-learnmore{ grid-area:learn; }
.tp-home-grid > .tp-dogs-showcase h2{
  position:sticky;
  top:-15px;
  z-index:4;
  margin:-15px -12px 12px;
  padding:17px 15px 12px;
  text-align:left;
  font-family:"Cormorant Garamond","Playfair Display",Georgia,serif;
  font-size:23px;
  background:rgba(247,250,253,.88);
  border-bottom:1px solid rgba(102,125,154,.14);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.tp-home-grid > .tp-dogs-showcase .tp-dog-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:9px;
}
.tp-home-grid > .tp-dogs-showcase .tp-dog-tile{
  display:grid;
  grid-template-columns:68px minmax(0,1fr);
  grid-template-areas:
    "photo name"
    "photo links";
  gap:4px 9px;
  min-width:0;
  padding:7px;
  border-radius:12px !important;
  text-align:left;
  box-shadow:0 7px 18px rgba(32,49,74,.08);
}
.tp-home-grid > .tp-dogs-showcase .tp-dog-tile-img{
  grid-area:photo;
  width:68px;
  height:68px;
  margin:0;
  border-radius:9px;
}
.tp-home-grid > .tp-dogs-showcase .tp-dog-tile-name{
  grid-area:name;
  align-self:end;
  color:var(--tp-ink);
  font-family:"Cormorant Garamond","Playfair Display",Georgia,serif;
  font-size:15px;
  font-weight:700;
}
.tp-home-grid > .tp-dogs-showcase .tp-dog-tile-links{
  grid-area:links;
  align-self:start;
  justify-content:flex-start;
  gap:6px;
  font-size:9px;
}
.tp-home-grid > .tp-dogs-showcase > div:last-of-type{
  position:sticky;
  bottom:-12px;
  margin:12px -12px -12px !important;
  padding:11px 12px;
  background:rgba(247,250,253,.9);
  border-top:1px solid rgba(102,125,154,.14);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
@media(max-width:1100px){
  .tp-home-grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "hero"
      "stats"
      "features"
      "breeds"
      "animals"
      "learn";
  }
  .tp-home-grid > .tp-dogs-showcase{
    position:relative;
    top:auto;
    max-height:none;
    overflow:visible;
  }
  .tp-home-grid > .tp-dogs-showcase h2,
  .tp-home-grid > .tp-dogs-showcase > div:last-of-type{
    position:relative;
    top:auto;
    bottom:auto;
  }
  .tp-home-grid > .tp-dogs-showcase .tp-dog-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media(max-width:720px){
  .tp-home-grid > .tp-dogs-showcase .tp-dog-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:460px){
  .tp-home-grid > .tp-dogs-showcase .tp-dog-grid{ grid-template-columns:1fr; }
}

/* View-all registry: large, useful photographs instead of thumbnail-sized cards. */
.tp-main .tp-viewall .tp-dog-grid{
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:20px;
}
.tp-main .tp-viewall .tp-dog-tile{
  position:relative;
  overflow:hidden;
  padding:0 0 14px!important;
  border:1px solid rgba(91,119,158,.18)!important;
  border-radius:22px!important;
  background:linear-gradient(155deg,#fff,rgba(241,247,255,.94))!important;
  box-shadow:0 18px 40px rgba(46,66,100,.16),inset 0 1px 0 #fff;
  text-align:left;
}
.tp-main .tp-viewall .tp-dog-tile-img{
  position:relative;
  width:100%;
  height:260px;
  aspect-ratio:auto;
  margin-bottom:0;
  border-radius:21px 21px 0 0;
  background:linear-gradient(145deg,#edf3fb,#e1e8f3);
  box-shadow:inset 0 0 0 1px rgba(50,72,106,.08);
}
.tp-main .tp-viewall .tp-dog-tile-img img{
  display:block;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  transition:transform .3s ease,filter .3s ease;
}
.tp-main .tp-viewall .tp-dog-tile:hover .tp-dog-tile-img img{
  transform:scale(1.025);
  filter:saturate(1.06);
}
.tp-main .tp-viewall .tp-dog-tile-name{
  min-height:24px;
  margin:15px 16px 7px;
  color:#172b49;
  font-size:19px;
  font-weight:800;
  line-height:24px;
  letter-spacing:.01em;
  text-align:left;
}
.tp-main .tp-viewall .tp-dog-tile-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  min-height:27px;
  padding:0 16px 11px;
}
.tp-main .tp-viewall .tp-dog-meta-chip{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:5px 9px;
  border:1px solid rgba(75,104,146,.13);
  border-radius:99px;
  background:#edf3fb;
  color:#50627c;
  font-size:11px;
  font-weight:700;
  line-height:1.2;
}
.tp-dog-mixedbadge{
  display:inline-block;
  margin-left:5px;
  padding:1px 7px;
  border-radius:99px;
  background:#5c768f;
  color:#fff;
  font-size:9px;
  font-weight:700;
  vertical-align:middle;
  cursor:help;
}
.tp-main .tp-viewall .tp-dog-meta-sex--male{
  border-color:#b9d8ff;
  background:#e3f1ff;
  color:#2869ad;
}
.tp-main .tp-viewall .tp-dog-meta-sex--female{
  border-color:#f0c4d7;
  background:#fce8f1;
  color:#a74170;
}
.tp-main .tp-viewall .tp-dog-tile-facts{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin:0 14px 13px;
  overflow:hidden;
  border:1px solid rgba(74,101,140,.11);
  border-radius:13px;
  background:rgba(238,244,252,.75);
}
.tp-main .tp-viewall .tp-dog-tile-facts:empty{display:none}
.tp-main .tp-viewall .tp-dog-tile-facts>span{
  min-width:0;
  padding:9px 10px;
}
.tp-main .tp-viewall .tp-dog-tile-facts>span+span{border-left:1px solid rgba(74,101,140,.11)}
.tp-main .tp-viewall .tp-dog-tile-facts small,
.tp-main .tp-viewall .tp-dog-tile-facts strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.tp-main .tp-viewall .tp-dog-tile-facts small{
  margin-bottom:3px;
  color:#78879b;
  font-size:10px;
}
.tp-main .tp-viewall .tp-dog-tile-facts strong{
  color:#263b58;
  font-size:12px;
}
.tp-main .tp-viewall .tp-dog-tile-links{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  width:100%;
  padding:0 14px;
  box-sizing:border-box;
  font-size:12px;
}
.tp-main .tp-viewall .tp-dog-tile-links .pedlink{
  width:100%;
  min-width:0;
  min-height:38px;
  padding:8px 10px!important;
  border:1px solid rgba(70,101,151,.19);
  border-radius:11px;
  background:rgba(235,242,253,.88);
  color:#395d94!important;
  font-weight:700;
  line-height:1;
  text-align:center;
  text-decoration:none!important;
  box-shadow:none;
}
.tp-main .tp-viewall .tp-dog-tile-links .pedlink:first-child{
  border-color:#5278b5;
  background:linear-gradient(145deg,#678bc6,#4d6fa8);
  color:#fff!important;
  box-shadow:0 7px 15px rgba(57,88,139,.2);
}
.tp-main .tp-viewall .tp-dog-tile-links .pedlink:hover{
  border-color:#5278b5;
  transform:translateY(-1px);
}
@media(max-width:640px){
  .tp-main .tp-viewall .tp-dog-grid{
    grid-template-columns:1fr;
    gap:14px;
  }
  .tp-main .tp-viewall .tp-dog-tile-img{
    height:260px;
  }
  .tp-main .tp-viewall .tp-dog-tile-name{
    font-size:18px;
  }
}

.tp-main .tp-viewall .tp-dog-tile-links .pedlink{
  min-height:42px;
  padding:10px 12px!important;
  font-family:var(--tp-font-ui)!important;
  font-size:13px;
  font-weight:600!important;
  line-height:1.35;
}
.tp-main .tp-viewall .tp-dog-tile-name,
.tp-main .tp-viewall .tp-dog-meta-chip,
.tp-main .tp-viewall .tp-dog-tile-facts small,
.tp-main .tp-viewall .tp-dog-tile-facts strong{
  font-family:var(--tp-font-ui)!important;
}