/* ============================================================
   Aqua Guide — main.css
   Compiled from: assets/scss/main.scss
   Run: sass assets/scss/main.scss assets/css/main.css --style=compressed
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;900&family=Inter:wght@400;500;600&display=swap');

/* Global: ensure [hidden] attribute always hides elements even when
   a class rule sets display:flex or display:grid */
[hidden] { display: none !important; }

:root {
  --ag-primary:   #0077be;
  --ag-secondary: #20b2aa;
  --ag-accent:    #ff7f50;
  --ag-dark:      #001f3f;
  --ag-light:     #f8fbff;
  --ag-radius:    12px;
  --ag-transition: 0.25s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family:      'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size:        1rem;
  line-height:      1.6;
  color:            #334e68;
  background-color: #f8fbff;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: #0077be; text-decoration: none; transition: color .15s ease; }
a:hover { color: #005c94; }
ul, ol { list-style: none; }
button { background: none; border: none; cursor: pointer; }

/* ── Container ── */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.container--wide   { max-width: 1440px; margin: 0 auto; padding: 0 1.5rem; }
.container--narrow { max-width: 720px;  margin: 0 auto; padding: 0 1.5rem; }

/* ── Section ── */
.ag-section       { padding: 5rem 0; }
.ag-section--sm   { padding: 3rem 0; }
.ag-section--lg   { padding: 6rem 0; }
.ag-section--dark { background: #001f3f; color: #f8fbff; }
.ag-section--ocean { background: linear-gradient(135deg, #001f3f 0%, #0077be 60%, #20b2aa 100%); color: #fff; }

/* ── Typography ── */
.ag-h1 { font-family: 'Barlow Condensed', sans-serif; font-size: 4.5rem; font-weight: 900; line-height: 1.2; letter-spacing: -0.02em; }
.ag-h2 { font-family: 'Barlow Condensed', sans-serif; font-size: 3rem;   font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.ag-h3 { font-family: 'Barlow Condensed', sans-serif; font-size: 2.25rem;font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.ag-lead  { font-size: 1.25rem; line-height: 1.8; color: #627d98; }
.ag-label { font-family: 'Barlow Condensed', sans-serif; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #20b2aa; }

/* ── Buttons ── */
.ag-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .75rem 1.5rem; border-radius: 9999px;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: .875rem;
  letter-spacing: .04em; text-transform: uppercase; cursor: pointer;
  border: 2px solid transparent; transition: all .25s ease; text-decoration: none;
  white-space: nowrap;
}
.ag-btn--primary   { background: #0077be; color: #fff; border-color: #0077be; }
.ag-btn--primary:hover { background: #005c94; border-color: #005c94; color: #fff; transform: translateY(-2px); box-shadow: 0 0 24px rgba(0,119,190,.30); }
.ag-btn--secondary { background: #20b2aa; color: #fff; border-color: #20b2aa; }
.ag-btn--accent    { background: #ff7f50; color: #fff; border-color: #ff7f50; }
.ag-btn--outline   { background: transparent; color: #0077be; border-color: #0077be; }
.ag-btn--outline:hover { background: #0077be; color: #fff; }
.ag-btn--ghost     { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.ag-btn--ghost:hover { background: rgba(255,255,255,.15); border-color: #fff; }
.ag-btn--sm { padding: .5rem 1rem; font-size: .75rem; }
.ag-btn--lg { padding: 1rem 2rem; font-size: 1.125rem; }

/* ── Cards ── */
.ag-card {
  background: rgba(255,255,255,.80);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0,119,190,.25);
  box-shadow: 0 4px 16px rgba(0,31,63,.12);
  border-radius: 12px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.ag-card:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(0,31,63,.20); }
.ag-card__image { aspect-ratio: 4/3; overflow: hidden; }
.ag-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.ag-card:hover .ag-card__image img { transform: scale(1.05); }
.ag-card__body    { padding: 1.5rem; }
.ag-card__title   { font-family: 'Barlow Condensed', sans-serif; font-size: 1.25rem; font-weight: 700; color: #001f3f; margin-bottom: .75rem; }
.ag-card__excerpt { color: #627d98; font-size: .875rem; margin-bottom: 1rem; }
.ag-card__meta    { display: flex; align-items: center; justify-content: space-between; padding-top: 1rem; border-top: 1px solid rgba(0,119,190,.1); font-size: .75rem; color: #9fb3c8; }
.ag-card--dark    { background: rgba(0,31,63,.70); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-color: rgba(0,119,190,.20); color: #f8fbff; }
.ag-card--dark .ag-card__title { color: #fff; }

/* ── Hero ── */
.ag-hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(160deg, #001f3f 0%, #0077be 60%, #20b2aa 100%); }
.ag-hero__overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,31,63,.20) 0%, rgba(0,31,63,.50) 100%); z-index: 1; }
.ag-hero__tank { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.ag-hero__tank::before, .ag-hero__tank::after { content: ''; position: absolute; border-radius: 50%; background: rgba(32,178,170,.12); animation: ag-bubble 8s ease-in-out infinite; }
.ag-hero__tank::before { width: 600px; height: 600px; bottom: -200px; left: -100px; }
.ag-hero__tank::after  { width: 400px; height: 400px; bottom: -100px; right: -80px; animation-delay: 3s; }
.ag-hero__content  { position: relative; z-index: 2; text-align: center; color: #fff; padding: 4rem 1.5rem; max-width: 800px; }
.ag-hero__eyebrow  { display: block; margin-bottom: 1rem; font-family: 'Barlow Condensed', sans-serif; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.ag-hero__title    { font-family: 'Barlow Condensed', sans-serif; font-size: 4.5rem; font-weight: 900; line-height: 1.1; letter-spacing: -0.02em; color: #fff; margin-bottom: 1.5rem; text-shadow: 0 2px 20px rgba(0,31,63,.4); }
.ag-hero__subtitle { font-size: 1.25rem; line-height: 1.8; color: rgba(255,255,255,.85); margin-bottom: 2.5rem; max-width: 600px; margin-left: auto; margin-right: auto; }
.ag-hero__cta { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; }

@keyframes ag-bubble {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-30px) scale(1.05); }
}

/* ── Badges ── */
.ag-badge { display: inline-flex; align-items: center; gap: .25rem; padding: .25rem .75rem; border-radius: 9999px; font-size: .75rem; font-weight: 600; letter-spacing: .04em; }
.ag-badge--beginner     { background: rgba(40,167,69,.12);  color: #1e8c39; }
.ag-badge--intermediate { background: rgba(255,193,7,.15);  color: #a17800; }
.ag-badge--expert       { background: rgba(220,53,69,.12);  color: #dc3545; }
.ag-badge--freshwater   { background: rgba(0,119,190,.12);  color: #0077be; }
.ag-badge--saltwater    { background: rgba(0,31,63,.12);    color: #001f3f; }
.ag-badge--brackish     { background: rgba(32,178,170,.12); color: #178f89; }

/* ── Navigation ── */
.ag-nav__link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: #0077be; transition: width .25s ease; }
.ag-nav__link:hover, .ag-nav__link.current-menu-item { color: #0077be; }
.ag-nav__link:hover::after, .ag-nav__link.current-menu-item::after { width: 100%; }
.ag-nav__actions { display: flex; align-items: center; gap: .75rem; }

/* ── Filter bar ── */
.ag-filter-bar { background: rgba(255,255,255,.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(0,119,190,.25); box-shadow: 0 4px 16px rgba(0,31,63,.12); border-radius: 12px; padding: 1.25rem 1.5rem; margin-bottom: 2rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.ag-filter-bar__search { flex: 1; min-width: 220px; position: relative; }
.ag-filter-bar__search input { width: 100%; padding: .75rem 1rem .75rem 2.5rem; border: 1px solid #d9e2ec; border-radius: 9999px; font-size: .875rem; color: #001f3f; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.ag-filter-bar__search input:focus { outline: none; border-color: #0077be; box-shadow: 0 0 0 3px rgba(0,119,190,.15); }
.ag-filter-bar__filters { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.ag-filter-bar select { padding: .5rem 1rem; border: 1px solid #d9e2ec; border-radius: 9999px; font-size: .875rem; color: #001f3f; background: #fff; cursor: pointer; transition: border-color .15s ease; }

/* ── Database grid ── */
.ag-db-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; width: 100%; }

/* ── Section header ── */
.ag-section-header { text-align: center; margin-bottom: 3rem; }
.ag-section-header__label    { margin-bottom: .75rem; }
.ag-section-header__title    { font-family: 'Barlow Condensed', sans-serif; font-size: 3rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: #001f3f; margin-bottom: 1rem; }
.ag-section-header__subtitle { font-size: 1.25rem; line-height: 1.8; color: #627d98; max-width: 600px; margin: 0 auto; }

/* ── Notices ── */
.ag-notice { padding: 1rem 1.25rem; border-radius: 8px; border-left: 4px solid #20b2aa; background: rgba(32,178,170,.08); font-size: .875rem; }
.ag-notice--error   { border-color: #dc3545; background: rgba(220,53,69,.08); }
.ag-notice--success { border-color: #28a745; background: rgba(40,167,69,.08); }
.ag-notice--warning { border-color: #ffc107; background: rgba(255,193,7,.08); }

/* ── Footer ── */
.ag-footer { background: #001f3f; color: rgba(255,255,255,.7); padding: 5rem 0 2rem; }
.ag-footer__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 3rem; margin-bottom: 3rem; }
.ag-footer__logo    { font-family: 'Barlow Condensed', sans-serif; font-size: 1.5rem; font-weight: 700; color: #fff; margin-bottom: 1rem; }
.ag-footer__logo span { color: #20b2aa; }
.ag-footer__heading { font-family: 'Barlow Condensed', sans-serif; font-size: .75rem; font-weight: 700; color: #fff; margin-bottom: 1rem; letter-spacing: .05em; text-transform: uppercase; }
.ag-footer__links   { display: flex; flex-direction: column; gap: .5rem; }
.ag-footer__links a { font-size: .875rem; color: rgba(255,255,255,.6); transition: color .15s ease; }
.ag-footer__links a:hover { color: #20b2aa; }
.ag-footer__bottom  { border-top: 1px solid rgba(255,255,255,.1); padding-top: 1.5rem; display: flex; align-items: center; justify-content: space-between; font-size: .75rem; color: rgba(255,255,255,.4); }

/* ── Skeleton loading ── */
.ag-skeleton { background: linear-gradient(90deg, #f0f4f8 25%, #d9e2ec 50%, #f0f4f8 75%); background-size: 200% 100%; border-radius: 8px; animation: ag-skeleton-loading 1.5s ease-in-out infinite; }
@keyframes ag-skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── Dashboard ── */
.ag-dashboard { display: grid; grid-template-columns: 260px 1fr; min-height: calc(100vh - 72px); }
.ag-dashboard__sidebar { background: rgba(0,119,190,.03); border-right: 1px solid rgba(0,119,190,.1); padding: 1.5rem; }
.ag-dashboard__main    { padding: 2rem; }
.ag-dashboard__nav-item { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border-radius: 8px; font-size: .875rem; font-weight: 500; color: #627d98; cursor: pointer; transition: all .15s ease; }
.ag-dashboard__nav-item:hover, .ag-dashboard__nav-item.is-active { background: rgba(0,119,190,.08); color: #0077be; }

/* ── Utilities ── */
.ag-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.ag-text-center   { text-align: center; }
.ag-text-primary  { color: #0077be; }
.ag-text-secondary { color: #20b2aa; }
.ag-text-accent   { color: #ff7f50; }
.ag-text-muted    { color: #9fb3c8; }
.ag-mt-auto       { margin-top: auto; }
.ag-ml-auto       { margin-left: auto; }

/* ── bbPress overrides ── */
.bbpress #bbpress-forums { font-family: 'Inter', sans-serif; }
.bbpress #bbpress-forums .bbp-forum-title a, .bbpress #bbpress-forums .bbp-topic-title a { color: #001f3f; font-weight: 600; }
.bbpress #bbpress-forums .bbp-forum-title a:hover, .bbpress #bbpress-forums .bbp-topic-title a:hover { color: #0077be; }
.bbpress #bbpress-forums .bbp-submit-wrapper .button { display: inline-flex; align-items: center; padding: .75rem 1.5rem; border-radius: 9999px; background: #0077be; color: #fff; font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: .875rem; letter-spacing: .04em; text-transform: uppercase; border: none; cursor: pointer; transition: background .25s ease; }
.bbpress #bbpress-forums .bbp-submit-wrapper .button:hover { background: #005c94; }

/* ── WooCommerce overrides ── */
.woocommerce .price { color: #0077be; font-weight: 700; }
.woocommerce .button { display: inline-flex; align-items: center; padding: .75rem 1.5rem; border-radius: 9999px; background: #0077be; color: #fff; font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: .875rem; letter-spacing: .04em; text-transform: uppercase; border: 2px solid #0077be; cursor: pointer; transition: all .25s ease; }
.woocommerce .button:hover { background: #005c94; color: #fff; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .ag-nav__menu { display: none; }
  .ag-dashboard { grid-template-columns: 1fr; }
  .ag-dashboard__sidebar { display: none; }
}
@media (max-width: 768px) {
  .ag-hero__title  { font-size: 3rem; }
  .ag-section      { padding: 3rem 0; }
  .ag-footer__bottom { flex-direction: column; gap: .75rem; text-align: center; }
}
@media (max-width: 640px) {
  .ag-hero__title    { font-size: 2.25rem; }
  .container         { padding: 0 .75rem; }
  .ag-db-grid        { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}


/* ============================================================
   FISH FACT CARDS — v1.0.2
   ============================================================ */

.ag-fact-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0,119,190,.12);
  box-shadow: 0 2px 12px rgba(0,31,63,.08);
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.ag-fact-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 36px rgba(0,31,63,.14);
}

/* Media */
.ag-fact-card__media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: #e8f4fd; }
.ag-fact-card__img-link { display: block; width: 100%; height: 100%; }
.ag-fact-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.ag-fact-card:hover .ag-fact-card__img { transform: scale(1.05); }
.ag-fact-card__img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 3rem; background: linear-gradient(135deg, #e8f4fd, #d0eaf8); }
.ag-fact-card__badges { position: absolute; bottom: .6rem; left: .6rem; display: flex; gap: .35rem; flex-wrap: wrap; }

/* Header */
.ag-fact-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; padding: 1rem 1rem .5rem; }
.ag-fact-card__name { font-family: 'Barlow Condensed', sans-serif; font-size: 1.2rem; font-weight: 700; line-height: 1.2; color: #001f3f; margin: 0; }
.ag-fact-card__name a { color: inherit; text-decoration: none; }
.ag-fact-card__name a:hover { color: #0077be; }
.ag-fact-card__scientific { font-size: .72rem; color: #9fb3c8; font-style: italic; margin: .2rem 0 0; }

/* Difficulty pips */
.ag-fact-card__difficulty { display: flex; gap: 3px; align-items: center; flex-shrink: 0; margin-top: 2px; }
.ag-fact-card__difficulty-pip { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid #d9e2ec; }
.ag-fact-card__difficulty-pip--on.ag-fact-card__difficulty-pip--beginner     { background: #28a745; border-color: #28a745; }
.ag-fact-card__difficulty-pip--on.ag-fact-card__difficulty-pip--intermediate { background: #ffc107; border-color: #ffc107; }
.ag-fact-card__difficulty-pip--on.ag-fact-card__difficulty-pip--expert       { background: #dc3545; border-color: #dc3545; }

/* Fact grid */
.ag-fact-card__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: .25rem 1rem .75rem;
  flex: 1;
}
.ag-fact-card__fact {
  display: flex;
  flex-direction: column;
  padding: .5rem .5rem .5rem 0;
  border-bottom: 1px solid rgba(0,119,190,.06);
}
.ag-fact-card__fact:nth-last-child(-n+2) { border-bottom: none; }
.ag-fact-card__fact-icon { color: #9fb3c8; margin-bottom: .2rem; }
.ag-fact-card__fact dt { font-size: .65rem; color: #9fb3c8; text-transform: uppercase; letter-spacing: .05em; line-height: 1; }
.ag-fact-card__fact dd { font-size: .85rem; font-weight: 600; color: #001f3f; margin: .15rem 0 0; }

/* Param bar */
.ag-fact-card__params { padding: 0 1rem .75rem; }
.ag-param-bar { display: flex; align-items: center; gap: .5rem; }
.ag-param-bar__label { font-size: .65rem; color: #9fb3c8; white-space: nowrap; }
.ag-param-bar__track { flex: 1; height: 5px; background: #e8f4fd; border-radius: 99px; position: relative; overflow: hidden; }
.ag-param-bar__fill { position: absolute; top: 0; bottom: 0; background: linear-gradient(90deg, #20b2aa, #0077be); border-radius: 99px; }
.ag-param-bar__value { font-size: .65rem; color: #627d98; white-space: nowrap; }

/* Footer */
.ag-fact-card__footer { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; border-top: 1px solid rgba(0,119,190,.08); background: rgba(0,119,190,.02); }
.ag-fact-card__footer-actions { display: flex; align-items: center; gap: .5rem; }
.ag-fact-card__wishlist { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid #d9e2ec; background: #fff; cursor: pointer; color: #9fb3c8; transition: all .2s ease; }
.ag-fact-card__wishlist:hover { border-color: #dc3545; color: #dc3545; background: rgba(220,53,69,.05); }
.ag-fact-card__wishlist.is-added { border-color: #dc3545; color: #dc3545; background: rgba(220,53,69,.08); }
.ag-fact-card__wishlist.is-added svg { fill: #dc3545; }

/* ============================================================
   ARCHIVE HERO
   ============================================================ */

.ag-archive-hero { background: linear-gradient(135deg, #001f3f 0%, #003d6b 100%); color: #fff; padding: 3rem 0 2.5rem; margin-bottom: 2rem; }
.ag-archive-hero__title { font-family: 'Barlow Condensed', sans-serif; font-size: 3rem; font-weight: 900; color: #fff; margin: .5rem 0 .5rem; }
.ag-archive-hero__count { font-size: .9rem; color: rgba(255,255,255,.6); }
.ag-archive-hero__count span { font-weight: 700; color: #20b2aa; }

/* ============================================================
   FILTER SYSTEM — v1.0.2
   ============================================================ */

.ag-filter-system { background: #fff; border: 1px solid rgba(0,119,190,.12); border-radius: 16px; margin-bottom: 2rem; overflow: hidden; box-shadow: 0 2px 12px rgba(0,31,63,.06); }

/* Search row */
.ag-filter-system__search-row { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.25rem; flex-wrap: wrap; }
.ag-filter-system__search { flex: 1; min-width: 200px; display: flex; align-items: center; gap: .6rem; background: #f8fbff; border: 1.5px solid #d9e2ec; border-radius: 10px; padding: .6rem 1rem; transition: border-color .15s; }
.ag-filter-system__search:focus-within { border-color: #0077be; background: #fff; }
.ag-filter-system__search svg { color: #9fb3c8; flex-shrink: 0; }
.ag-filter-system__search input { flex: 1; border: none; background: none; font-size: .9rem; color: #001f3f; outline: none; }
.ag-filter-system__search input::placeholder { color: #9fb3c8; }
.ag-filter-system__clear-search { border: none; background: none; cursor: pointer; color: #9fb3c8; display: flex; align-items: center; justify-content: center; padding: 2px; border-radius: 50%; transition: color .15s; }
.ag-filter-system__clear-search:hover { color: #dc3545; }

.ag-filter-system__sort select { padding: .6rem 1rem; border: 1.5px solid #d9e2ec; border-radius: 10px; font-size: .875rem; color: #334e68; background: #fff; cursor: pointer; outline: none; }
.ag-filter-system__sort select:focus { border-color: #0077be; }

.ag-filter-system__toggle-btn { display: flex; align-items: center; gap: .4rem; padding: .6rem 1rem; border: 1.5px solid #d9e2ec; border-radius: 10px; font-size: .875rem; font-weight: 500; color: #334e68; background: #fff; cursor: pointer; white-space: nowrap; transition: all .15s; }
.ag-filter-system__toggle-btn:hover,
.ag-filter-system__toggle-btn[aria-expanded="true"] { border-color: #0077be; color: #0077be; }
.ag-filter-system__toggle-btn.has-filters { border-color: #0077be; background: rgba(0,119,190,.05); color: #0077be; }
.ag-filter-system__active-count { background: #0077be; color: #fff; border-radius: 99px; font-size: .65rem; font-weight: 700; padding: .1rem .4rem; min-width: 18px; text-align: center; }

/* Filter panel */
.ag-filter-system__panel { border-top: 1px solid rgba(0,119,190,.08); padding: 1.25rem; display: none; }
.ag-filter-system__panel.is-open { display: block; }

/* Always show on desktop */
@media (min-width: 1025px) { .ag-filter-system__panel { display: block !important; } .ag-filter-system__toggle-btn { display: none; } }

.ag-filter-system__groups { display: flex; flex-direction: column; gap: 1.25rem; }
.ag-filter-group__label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #9fb3c8; margin: 0 0 .5rem; display: flex; align-items: center; gap: .4rem; }
.ag-filter-group__pills { display: flex; flex-wrap: wrap; gap: .4rem; }

.ag-filter-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .8rem; border-radius: 99px; border: 1.5px solid #d9e2ec; background: #fff; font-size: .8rem; font-weight: 500; color: #627d98; cursor: pointer; transition: all .15s ease; white-space: nowrap; }
.ag-filter-pill:hover { border-color: #0077be; color: #0077be; background: rgba(0,119,190,.04); }
.ag-filter-pill.is-active { border-color: #0077be; background: #0077be; color: #fff; }
.ag-filter-pill.is-active:hover { background: #005c94; }
.ag-filter-pill__count { opacity: .6; font-size: .7rem; }
.ag-filter-pill.is-active .ag-filter-pill__count { opacity: .8; }

/* Active filters bar */
.ag-filter-system__active { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(0,119,190,.08); }
.ag-filter-system__active-label { font-size: .75rem; color: #9fb3c8; white-space: nowrap; }
.ag-filter-system__active-tags { display: flex; gap: .4rem; flex-wrap: wrap; }
.ag-active-tag { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; background: rgba(0,119,190,.08); border: 1px solid rgba(0,119,190,.2); border-radius: 99px; font-size: .78rem; color: #0077be; }
.ag-active-tag button { border: none; background: none; cursor: pointer; color: #0077be; font-size: .9rem; line-height: 1; padding: 0; display: flex; align-items: center; }
.ag-active-tag button:hover { color: #dc3545; }
.ag-filter-system__clear-all { font-size: .78rem; color: #9fb3c8; background: none; border: none; cursor: pointer; text-decoration: underline; margin-left: auto; white-space: nowrap; }
.ag-filter-system__clear-all:hover { color: #dc3545; }

/* No results */
.ag-no-results { grid-column: 1/-1; text-align: center; padding: 4rem 2rem; }
.ag-no-results__icon { font-size: 3rem; margin-bottom: 1rem; }
.ag-no-results h3 { font-family: 'Barlow Condensed', sans-serif; font-size: 1.5rem; color: #001f3f; margin-bottom: .5rem; }
.ag-no-results p { color: #9fb3c8; font-size: .9rem; }

/* Skeleton card */
.ag-skeleton-card { border-radius: 16px; overflow: hidden; border: 1px solid rgba(0,119,190,.08); }

/* Pagination */
.ag-pagination { display: flex; justify-content: center; align-items: center; gap: .4rem; margin-top: 2.5rem; flex-wrap: wrap; }
.ag-page-btn { min-width: 36px; height: 36px; padding: 0 .6rem; border-radius: 8px; border: 1.5px solid #d9e2ec; background: #fff; font-size: .875rem; color: #334e68; cursor: pointer; transition: all .15s; font-weight: 500; }
.ag-page-btn:hover:not(:disabled) { border-color: #0077be; color: #0077be; }
.ag-page-btn.is-active { background: #0077be; border-color: #0077be; color: #fff; }
.ag-page-btn--nav { color: #627d98; }
.ag-page-btn:disabled { opacity: .4; cursor: not-allowed; }
.ag-page-ellipsis { color: #9fb3c8; padding: 0 .25rem; font-size: .875rem; }
.ag-pagination .page-numbers { min-width: 36px; height: 36px; padding: 0 .6rem; border-radius: 8px; border: 1.5px solid #d9e2ec; background: #fff; font-size: .875rem; color: #334e68; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: all .15s; }
.ag-pagination .page-numbers:hover { border-color: #0077be; color: #0077be; }
.ag-pagination .page-numbers.current { background: #0077be; border-color: #0077be; color: #fff; }

/* ============================================================
   MARKETPLACE PAGE — v1.0.2
   ============================================================ */

/* Hero */
.ag-marketplace-hero { background: linear-gradient(135deg, #001f3f 0%, #0077be 70%, #20b2aa 100%); padding: 4rem 0 3rem; color: #fff; }
.ag-marketplace-hero .container { display: grid; grid-template-columns: 1fr auto; gap: 3rem; align-items: center; }
.ag-marketplace-hero__title { font-family: 'Barlow Condensed', sans-serif; font-size: 3.5rem; font-weight: 900; color: #fff; margin: .5rem 0 .75rem; line-height: 1.1; }
.ag-marketplace-hero__sub { color: rgba(255,255,255,.75); font-size: 1.05rem; max-width: 500px; }
.ag-marketplace-hero__stats { display: flex; flex-direction: column; gap: 1.25rem; background: rgba(255,255,255,.1); border-radius: 16px; padding: 1.5rem 2rem; backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.15); }
.ag-marketplace-hero__stat { text-align: center; }
.ag-marketplace-hero__stat strong { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 2rem; font-weight: 900; color: #fff; }
.ag-marketplace-hero__stat span { font-size: .75rem; color: rgba(255,255,255,.65); }
@media (max-width: 768px) { .ag-marketplace-hero .container { grid-template-columns: 1fr; } .ag-marketplace-hero__stats { flex-direction: row; } }

/* Trust bar */
.ag-trust-bar { display: flex; gap: 0; border: 1px solid rgba(0,119,190,.1); border-radius: 12px; overflow: hidden; margin-bottom: 2rem; background: #fff; }
.ag-trust-bar__item { flex: 1; display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .875rem .5rem; font-size: .8rem; color: #334e68; font-weight: 500; border-right: 1px solid rgba(0,119,190,.08); }
.ag-trust-bar__item:last-child { border-right: none; }
@media (max-width: 640px) { .ag-trust-bar { flex-wrap: wrap; } .ag-trust-bar__item { flex: 1 1 50%; border-bottom: 1px solid rgba(0,119,190,.08); } }

/* Layout */
.ag-marketplace-layout { display: grid; grid-template-columns: 260px 1fr; gap: 2rem; align-items: start; }
@media (max-width: 900px) { .ag-marketplace-layout { grid-template-columns: 1fr; } .ag-marketplace-sidebar { order: 2; } }

/* Sidebar */
.ag-marketplace-sidebar { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 1rem; }
.ag-sidebar-widget { background: #fff; border: 1px solid rgba(0,119,190,.1); border-radius: 12px; padding: 1.25rem; }
.ag-sidebar-widget__title { font-family: 'Barlow Condensed', sans-serif; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #9fb3c8; margin: 0 0 .875rem; }
.ag-sidebar-search input { width: 100%; padding: .6rem .875rem; border: 1.5px solid #d9e2ec; border-radius: 8px; font-size: .875rem; color: #001f3f; outline: none; }
.ag-sidebar-search input:focus { border-color: #0077be; }
.ag-sidebar-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .25rem; }
.ag-sidebar-checklist__item { display: flex; align-items: center; justify-content: space-between; padding: .45rem .6rem; border-radius: 8px; font-size: .85rem; color: #334e68; cursor: pointer; transition: background .15s; }
.ag-sidebar-checklist__item:hover { background: rgba(0,119,190,.05); }
.ag-sidebar-checklist__item.is-active { background: rgba(0,119,190,.08); color: #0077be; font-weight: 600; }
.ag-sidebar-checklist__item input { position: absolute; opacity: 0; pointer-events: none; }
.ag-sidebar-checklist__item span { font-size: .75rem; color: #9fb3c8; }
.ag-sidebar-select { width: 100%; padding: .6rem .875rem; border: 1.5px solid #d9e2ec; border-radius: 8px; font-size: .875rem; color: #001f3f; background: #fff; cursor: pointer; outline: none; }
.ag-sidebar-select:focus { border-color: #0077be; }

.ag-sidebar-sell-cta { background: linear-gradient(135deg, #001f3f, #003d6b); border-radius: 12px; padding: 1.5rem; text-align: center; color: #fff; }
.ag-sidebar-sell-cta__icon { font-size: 2rem; margin-bottom: .75rem; }
.ag-sidebar-sell-cta h3 { font-family: 'Barlow Condensed', sans-serif; font-size: 1.25rem; font-weight: 700; color: #fff; margin: 0 0 .5rem; }
.ag-sidebar-sell-cta p { font-size: .8rem; color: rgba(255,255,255,.7); margin: 0 0 1rem; line-height: 1.5; }

/* Toolbar */
.ag-marketplace-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.ag-marketplace-toolbar__count { font-size: .875rem; color: #9fb3c8; }
.ag-marketplace-toolbar__count strong { color: #334e68; }

/* Product grid */
.ag-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; }

/* Product card */
.ag-product-card { background: #fff; border-radius: 14px; border: 1px solid rgba(0,119,190,.1); overflow: hidden; display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease; }
.ag-product-card:hover { transform: translateY(-4px); box-shadow: 0 10px 32px rgba(0,31,63,.12); }
.ag-product-card__image { position: relative; aspect-ratio: 4/3; overflow: hidden; background: #f0f7ff; }
.ag-product-card__image a { display: block; width: 100%; height: 100%; }
.ag-product-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.ag-product-card:hover .ag-product-card__image img { transform: scale(1.04); }
.ag-product-card__no-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 3rem; }
.ag-product-card__type-badge { position: absolute; top: .6rem; left: .6rem; background: rgba(0,31,63,.75); color: #fff; font-size: .65rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: .2rem .6rem; border-radius: 6px; backdrop-filter: blur(4px); }
.ag-product-card__sold-badge { position: absolute; top: .6rem; right: .6rem; background: #dc3545; color: #fff; font-size: .65rem; font-weight: 700; padding: .2rem .6rem; border-radius: 6px; }
.ag-product-card__info { flex: 1; padding: .875rem; display: flex; flex-direction: column; gap: .35rem; }
.ag-product-card__seller { display: flex; align-items: center; gap: .4rem; font-size: .72rem; color: #9fb3c8; }
.ag-product-card__seller-avatar { border-radius: 50%; width: 20px; height: 20px; flex-shrink: 0; }
.ag-product-card__seller a { color: #627d98; text-decoration: none; }
.ag-product-card__seller a:hover { color: #0077be; }
.ag-product-card__title { font-family: 'Barlow Condensed', sans-serif; font-size: 1.05rem; font-weight: 700; color: #001f3f; line-height: 1.25; }
.ag-product-card__title a { color: inherit; text-decoration: none; }
.ag-product-card__title a:hover { color: #0077be; }
.ag-product-card__linked { display: flex; align-items: center; gap: .3rem; font-size: .72rem; color: #20b2aa; }
.ag-product-card__linked a { color: inherit; text-decoration: none; }
.ag-product-card__linked a:hover { text-decoration: underline; }
.ag-product-card__excerpt { font-size: .8rem; color: #627d98; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ag-product-card__footer { display: flex; align-items: center; justify-content: space-between; padding: .75rem .875rem; border-top: 1px solid rgba(0,119,190,.06); background: rgba(0,119,190,.02); }
.ag-product-card__price { font-family: 'Barlow Condensed', sans-serif; font-size: 1.25rem; font-weight: 700; color: #0077be; }
.ag-product-card__price .woocommerce-Price-currencySymbol { font-size: .9rem; }


/* ============================================================
   FISH CARD — IMAGE FIRST + WIGGLE HOVER  v1.0.3
   ============================================================ */

/* Fish swim/wiggle keyframe */
@keyframes ag-fish-wiggle {
  0%   { transform: rotate(0deg) scaleX(1); }
  15%  { transform: rotate(-3deg) scaleX(1.04); }
  30%  { transform: rotate(3deg) scaleX(0.97); }
  45%  { transform: rotate(-2deg) scaleX(1.02); }
  60%  { transform: rotate(2deg) scaleX(0.99); }
  75%  { transform: rotate(-1deg) scaleX(1.01); }
  100% { transform: rotate(0deg) scaleX(1); }
}

@keyframes ag-fish-card-overlay-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ag-toast-in {
  0%   { opacity: 0; transform: translateY(8px) scale(.95); }
  15%  { opacity: 1; transform: translateY(0) scale(1); }
  75%  { opacity: 1; }
  100% { opacity: 0; }
}

.ag-fish-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  cursor: pointer;
  background: #001a33;
  box-shadow: 0 4px 16px rgba(0,31,63,.15);
  transition: box-shadow .3s ease, transform .3s ease;
}
.ag-fish-card:hover {
  box-shadow: 0 12px 40px rgba(0,31,63,.25);
  transform: translateY(-4px);
}

/* Image */
.ag-fish-card__image-link { display: block; width: 100%; height: 100%; position: absolute; inset: 0; }
.ag-fish-card__img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease;
  transform-origin: center center;
}
.ag-fish-card:hover .ag-fish-card__img {
  animation: ag-fish-wiggle .7s ease-in-out;
  transform: scale(1.06);
}

.ag-fish-card__placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 4rem;
  background: linear-gradient(135deg, #001a33, #003366);
}

/* Overlay */
.ag-fish-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,15,30,.96) 0%,
    rgba(0,25,50,.85) 50%,
    rgba(0,0,0,.1) 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: .875rem;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.ag-fish-card:hover .ag-fish-card__overlay,
.ag-fish-card:focus-within .ag-fish-card__overlay {
  opacity: 1;
  pointer-events: auto;
  animation: ag-fish-card-overlay-in .3s ease forwards;
}

.ag-fish-card__overlay-top { display: flex; gap: .35rem; flex-wrap: wrap; }
.ag-fish-card__care-badge { font-size: .62rem !important; padding: .15rem .5rem !important; }

.ag-fish-card__overlay-body { display: flex; flex-direction: column; gap: .5rem; }

.ag-fish-card__name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.15rem; font-weight: 700;
  color: #fff; line-height: 1.2; margin: 0;
}
.ag-fish-card__scientific {
  font-size: .7rem; color: rgba(255,255,255,.55);
  font-style: italic; margin: 0;
}

/* Mini stats row */
.ag-fish-card__mini-stats {
  display: flex; flex-wrap: wrap; gap: .3rem;
}
.ag-fish-card__stat {
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 6px;
  padding: .2rem .5rem;
  font-size: .68rem;
  color: rgba(255,255,255,.9);
  white-space: nowrap;
}

/* Actions row */
.ag-fish-card__actions {
  display: flex; align-items: center; gap: .4rem; margin-top: .25rem;
}
.ag-fish-card__actions .ag-btn { flex: 1; font-size: .72rem; padding: .4rem .75rem; }

.ag-fish-card__action-btn {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: rgba(255,255,255,.8);
  transition: all .2s ease; flex-shrink: 0;
}
.ag-fish-card__action-btn:hover { border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.2); color: #fff; }

/* Save button */
.ag-fish-card__save-btn.is-saved,
.ag-fish-card__save-btn.is-saved svg { color: #ff6b8a; fill: #ff6b8a; }
.ag-fish-card__save-btn.is-saved { border-color: rgba(255,107,138,.5); background: rgba(255,107,138,.15); }

/* Tank button */
.ag-fish-card__tank-btn.is-added { color: #20b2aa; border-color: rgba(32,178,170,.5); background: rgba(32,178,170,.15); }

/* Toast */
.ag-fish-card__toast {
  position: absolute; bottom: .75rem; left: 50%; transform: translateX(-50%);
  background: rgba(0,31,63,.9); color: #fff;
  font-size: .75rem; font-weight: 500;
  padding: .4rem .9rem; border-radius: 99px;
  white-space: nowrap; pointer-events: none;
  opacity: 0; z-index: 10;
}
.ag-fish-card__toast.is-showing {
  animation: ag-toast-in 2.5s ease forwards;
}

/* ============================================================
   AUTH PAGES  v1.0.3
   ============================================================ */

/* Full-page override — hides theme header/footer on auth pages */
.ag-auth-page { min-height: 100vh; }
.ag-auth-page ~ footer,
body:has(.ag-auth-page) .ag-header,
body:has(.ag-auth-page) .ag-footer { display: none; }

.ag-auth {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}
@media (max-width: 768px) { .ag-auth { grid-template-columns: 1fr; } }

/* Brand panel */
.ag-auth__panel--brand {
  background: linear-gradient(160deg, #001f3f 0%, #003d6b 50%, #0077be 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 3rem 2.5rem;
  position: relative; overflow: hidden;
}
.ag-auth__panel--brand::before {
  content: '';
  position: absolute; bottom: -100px; right: -100px;
  width: 400px; height: 400px; border-radius: 50%;
  background: rgba(32,178,170,.12);
}
.ag-auth__panel--brand::after {
  content: '';
  position: absolute; top: -60px; left: -60px;
  width: 250px; height: 250px; border-radius: 50%;
  background: rgba(0,119,190,.15);
}
@media (max-width: 768px) { .ag-auth__panel--brand { display: none; } }

.ag-auth__brand-inner { position: relative; z-index: 1; max-width: 360px; }

.ag-auth__logo {
  display: flex; align-items: center; gap: .75rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.75rem; color: #fff;
  text-decoration: none; margin-bottom: 3rem;
}
.ag-auth__logo strong { font-weight: 900; color: #20b2aa; }

.ag-auth__brand-copy h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 2.25rem; font-weight: 900;
  color: #fff; line-height: 1.15; margin: 0 0 1rem;
}
.ag-auth__brand-copy p { color: rgba(255,255,255,.65); font-size: .9rem; line-height: 1.65; margin: 0 0 2rem; }

.ag-auth__features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .75rem; }
.ag-auth__features li {
  display: flex; align-items: center; gap: .75rem;
  color: rgba(255,255,255,.8); font-size: .875rem;
}
.ag-auth__features li span { font-size: 1.1rem; width: 1.5rem; text-align: center; }

/* Form panel */
.ag-auth__panel--form {
  display: flex; align-items: center; justify-content: center;
  padding: 2.5rem 2rem; background: #fff; overflow-y: auto;
}
.ag-auth__form-wrap { width: 100%; max-width: 400px; }

.ag-auth__logo--mobile {
  display: none;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.4rem; color: #001f3f;
  text-decoration: none; margin-bottom: 2rem;
}
.ag-auth__logo--mobile strong { color: #0077be; }
@media (max-width: 768px) { .ag-auth__logo--mobile { display: flex; } }

.ag-auth__title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 2rem; font-weight: 900; color: #001f3f;
  margin: 0 0 .35rem; line-height: 1.1;
}
.ag-auth__subtitle { color: #627d98; font-size: .9rem; margin: 0 0 1.75rem; }

/* Notices */
.ag-auth__notice { padding: .875rem 1rem; border-radius: 10px; font-size: .875rem; margin-bottom: 1.25rem; }
.ag-auth__notice--success { background: rgba(40,167,69,.08); border: 1px solid rgba(40,167,69,.25); color: #1e7e34; }
.ag-auth__notice--error   { background: rgba(220,53,69,.08); border: 1px solid rgba(220,53,69,.25); color: #b21f2d; }

/* Form */
.ag-auth__form { display: flex; flex-direction: column; gap: 1rem; }
.ag-auth__field { display: flex; flex-direction: column; gap: .4rem; }
.ag-auth__field label {
  font-size: .8rem; font-weight: 600; color: #334e68;
  display: flex; align-items: center; justify-content: space-between;
}
.ag-auth__field-link { font-weight: 400; color: #0077be; text-decoration: none; font-size: .78rem; }
.ag-auth__field-link:hover { text-decoration: underline; }

.ag-auth__input-wrap {
  display: flex; align-items: center; gap: .65rem;
  border: 1.5px solid #d9e2ec; border-radius: 10px;
  padding: .7rem 1rem; background: #f8fbff;
  transition: border-color .15s, box-shadow .15s;
}
.ag-auth__input-wrap:focus-within {
  border-color: #0077be;
  box-shadow: 0 0 0 3px rgba(0,119,190,.12);
  background: #fff;
}
.ag-auth__input-wrap svg { color: #9fb3c8; flex-shrink: 0; }
.ag-auth__input-wrap input {
  flex: 1; border: none; background: none;
  font-size: .9rem; color: #001f3f; outline: none;
}
.ag-auth__input-wrap input::placeholder { color: #b0c4d8; }

.ag-auth__pw-toggle {
  border: none; background: none; cursor: pointer;
  color: #9fb3c8; display: flex; padding: 0;
  transition: color .15s;
}
.ag-auth__pw-toggle:hover { color: #334e68; }

/* Password strength */
.ag-auth__pw-strength { display: flex; align-items: center; gap: .75rem; margin-top: .35rem; }
.ag-auth__pw-bar { flex: 1; height: 4px; background: #e8f0f7; border-radius: 99px; overflow: hidden; }
.ag-auth__pw-bar span { display: block; height: 100%; width: 0; border-radius: 99px; transition: width .3s, background .3s; }
#ag-pw-label { font-size: .72rem; font-weight: 600; min-width: 40px; }

/* Remember */
.ag-auth__remember { display: flex; align-items: center; gap: .5rem; cursor: pointer; font-size: .85rem; color: #334e68; }
.ag-auth__remember input { width: 16px; height: 16px; accent-color: #0077be; cursor: pointer; }

/* Error/success inline */
.ag-auth__error {
  background: rgba(220,53,69,.08); border: 1px solid rgba(220,53,69,.2);
  color: #b21f2d; border-radius: 8px; padding: .75rem 1rem;
  font-size: .85rem;
}
.ag-auth__success {
  background: rgba(40,167,69,.08); border: 1px solid rgba(40,167,69,.2);
  color: #1e7e34; border-radius: 8px; padding: .75rem 1rem;
  font-size: .85rem;
}

/* Submit button */
.ag-auth__submit {
  width: 100%; justify-content: center;
  padding: .875rem; font-size: .95rem;
  margin-top: .25rem;
}
.ag-auth__btn-loading { display: flex; align-items: center; gap: .5rem; }

/* Spinner */
.ag-spinner {
  animation: ag-spin 1s linear infinite;
}
@keyframes ag-spin { to { transform: rotate(360deg); } }

/* Divider */
.ag-auth__divider {
  text-align: center; position: relative; color: #d9e2ec; font-size: .8rem;
}
.ag-auth__divider::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: #e8f0f7;
}
.ag-auth__divider span {
  position: relative; background: #fff;
  padding: 0 .75rem; color: #9fb3c8;
}

.ag-auth__switch { text-align: center; font-size: .85rem; color: #627d98; margin: 0; }
.ag-auth__switch a { color: #0077be; font-weight: 600; text-decoration: none; }
.ag-auth__switch a:hover { text-decoration: underline; }

/* Account type cards */
.ag-auth__account-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.ag-auth__type-card {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: .875rem .5rem; border: 1.5px solid #d9e2ec;
  border-radius: 10px; cursor: pointer; text-align: center;
  transition: all .2s ease;
}
.ag-auth__type-card input { position: absolute; opacity: 0; pointer-events: none; }
.ag-auth__type-card.is-selected { border-color: #0077be; background: rgba(0,119,190,.05); }
.ag-auth__type-card:hover { border-color: #9fb3c8; }
.ag-auth__type-icon { font-size: 1.5rem; }
.ag-auth__type-card strong { font-size: .8rem; color: #001f3f; font-weight: 700; }
.ag-auth__type-card em { font-size: .7rem; color: #9fb3c8; font-style: normal; line-height: 1.3; }
.ag-auth__type-card.is-selected strong { color: #0077be; }


/* ============================================================
   GUIDES ARCHIVE  v1.0.4
   ============================================================ */

.ag-archive-hero--guides {
  background:linear-gradient(135deg,#001f3f 0%,#003d6b 60%,#0b6623 100%);
  padding:3rem 0 2.5rem;
}
.ag-archive-hero--fish {
  background:linear-gradient(135deg,#001f3f 0%,#003d6b 50%,#0077be 100%);
  padding:3rem 0 2.5rem;
}
.ag-archive-hero__sub { color:rgba(255,255,255,.65); font-size:.95rem; margin:.5rem 0 0; }

/* Level tabs */
.ag-level-tabs {
  display:flex; gap:.75rem; flex-wrap:wrap;
  padding:1.75rem 0 1.25rem;
  border-bottom:1px solid rgba(0,119,190,.1);
  margin-bottom:1.75rem;
}
.ag-level-tab {
  display:flex; align-items:center; gap:.6rem;
  padding:.75rem 1.25rem; border-radius:12px;
  border:2px solid transparent;
  background:#f8fbff; color:#627d98;
  text-decoration:none; font-size:.875rem; font-weight:500;
  transition:all .2s ease;
}
.ag-level-tab:hover { border-color:#d9e2ec; color:#334e68; }
.ag-level-tab__icon { font-size:1.15rem; }
.ag-level-tab__label { font-weight:600; }
.ag-level-tab__count { background:#e8f0f7; color:#9fb3c8; border-radius:99px; font-size:.72rem; padding:.15rem .5rem; margin-left:.1rem; }
.ag-level-tab.is-active { background:#fff; border-color:#0077be; color:#0077be; box-shadow:0 2px 12px rgba(0,119,190,.12); }
.ag-level-tab.is-active .ag-level-tab__count { background:rgba(0,119,190,.12); color:#0077be; }
.ag-level-tab--beginner.is-active     { border-color:#28a745; color:#28a745; }
.ag-level-tab--intermediate.is-active { border-color:#ffc107; color:#b38600; }
.ag-level-tab--advanced.is-active     { border-color:#dc3545; color:#dc3545; }

/* Level hero band */
.ag-level-hero {
  display:flex; align-items:center; gap:1.25rem;
  padding:1.25rem 1.5rem; border-radius:14px;
  margin-bottom:1.5rem;
}
.ag-level-hero--beginner     { background:rgba(40,167,69,.07);  border:1px solid rgba(40,167,69,.2); }
.ag-level-hero--intermediate { background:rgba(255,193,7,.07);  border:1px solid rgba(255,193,7,.25); }
.ag-level-hero--advanced     { background:rgba(220,53,69,.07);  border:1px solid rgba(220,53,69,.2); }
.ag-level-hero__icon { font-size:2.25rem; flex-shrink:0; }
.ag-level-hero__title { font-family:'Barlow Condensed',sans-serif; font-size:1.5rem; font-weight:700; color:#001f3f; margin:0 0 .2rem; }
.ag-level-hero__desc  { font-size:.875rem; color:#627d98; margin:0; }

/* Guides toolbar */
.ag-guides-toolbar {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; margin-bottom:2rem;
}
.ag-guides-toolbar__topics { display:flex; flex-wrap:wrap; gap:.4rem; flex:1; }
.ag-guides-toolbar__right  { display:flex; align-items:center; gap:.5rem; flex-shrink:0; }
.ag-guides-toolbar__search {
  display:flex; align-items:center; gap:.5rem;
  background:#f8fbff; border:1.5px solid #d9e2ec; border-radius:10px;
  padding:.5rem .875rem; transition:border-color .15s;
}
.ag-guides-toolbar__search:focus-within { border-color:#0077be; background:#fff; }
.ag-guides-toolbar__search svg { color:#9fb3c8; flex-shrink:0; }
.ag-guides-toolbar__search input { border:none; background:none; font-size:.875rem; color:#001f3f; outline:none; width:180px; }
.ag-guides-toolbar__sort { padding:.5rem .875rem; border:1.5px solid #d9e2ec; border-radius:10px; font-size:.875rem; color:#334e68; background:#fff; cursor:pointer; outline:none; }
.ag-guides-toolbar__sort:focus { border-color:#0077be; }

/* Guide card grid */
.ag-guide-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.5rem; }

/* Guide card */
.ag-guide-card {
  background:#fff; border-radius:16px; overflow:hidden;
  border:1px solid rgba(0,119,190,.1);
  box-shadow:0 2px 10px rgba(0,31,63,.06);
  display:flex; flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}
.ag-guide-card:hover { transform:translateY(-4px); box-shadow:0 10px 32px rgba(0,31,63,.12); }
.ag-guide-card--beginner     { border-top:3px solid #28a745; }
.ag-guide-card--intermediate { border-top:3px solid #ffc107; }
.ag-guide-card--advanced     { border-top:3px solid #dc3545; }

.ag-guide-card__image { aspect-ratio:16/9; overflow:hidden; }
.ag-guide-card__image img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.ag-guide-card:hover .ag-guide-card__image img { transform:scale(1.04); }

.ag-guide-card__body { padding:1.25rem; flex:1; display:flex; flex-direction:column; gap:.6rem; }
.ag-guide-card__meta { display:flex; align-items:center; gap:.5rem; }
.ag-guide-card__read-time { font-size:.72rem; color:#9fb3c8; }
.ag-guide-card__title { font-family:'Barlow Condensed',sans-serif; font-size:1.2rem; font-weight:700; color:#001f3f; line-height:1.25; margin:0; }
.ag-guide-card__title a { color:inherit; text-decoration:none; }
.ag-guide-card__title a:hover { color:#0077be; }
.ag-guide-card__excerpt { font-size:.85rem; color:#627d98; line-height:1.55; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; flex:1; }
.ag-guide-card__topics { display:flex; gap:.3rem; flex-wrap:wrap; }
.ag-guide-card__topic { font-size:.7rem; background:#f0f4f8; color:#627d98; padding:.15rem .5rem; border-radius:6px; }
.ag-guide-card__cta { font-size:.8rem; font-weight:600; color:#0077be; text-decoration:none; margin-top:auto; display:inline-flex; align-items:center; gap:.25rem; }
.ag-guide-card__cta:hover { text-decoration:underline; }

/* ============================================================
   FISH ARCHIVE LAYOUT  v1.0.4
   ============================================================ */

/* Water type tabs */
.ag-water-tabs {
  display:flex; gap:0; overflow-x:auto; scrollbar-width:none;
  border-bottom:2px solid rgba(0,119,190,.1);
  margin:1.5rem 0 2rem; padding-bottom:0;
}
.ag-water-tabs::-webkit-scrollbar { display:none; }

.ag-water-tab {
  display:flex; align-items:center; gap:.5rem;
  padding:.875rem 1.25rem; white-space:nowrap;
  border-bottom:2px solid transparent; margin-bottom:-2px;
  font-size:.875rem; font-weight:500; color:#627d98;
  text-decoration:none; transition:color .15s, border-color .15s;
  flex-shrink:0;
}
.ag-water-tab:hover { color:#0077be; }
.ag-water-tab.is-active { color:#0077be; border-bottom-color:#0077be; }
.ag-water-tab--saltwater.is-active  { color:#001f3f; border-color:#001f3f; }
.ag-water-tab--brackish.is-active   { color:#20b2aa; border-color:#20b2aa; }
.ag-water-tab__count { font-size:.72rem; background:rgba(0,119,190,.08); color:#9fb3c8; border-radius:99px; padding:.15rem .45rem; }
.ag-water-tab.is-active .ag-water-tab__count { background:rgba(0,119,190,.12); color:#0077be; }

/* Fish layout */
.ag-fish-layout { display:grid; grid-template-columns:240px 1fr; gap:2rem; align-items:start; }
@media (max-width:900px) { .ag-fish-layout { grid-template-columns:1fr; } }

/* Fish sidebar */
.ag-fish-sidebar {
  position:sticky; top:88px;
  background:#fff; border:1px solid rgba(0,119,190,.1);
  border-radius:14px; overflow:hidden;
}
@media (max-width:900px) {
  .ag-fish-sidebar { position:fixed; top:0; left:0; bottom:0; width:100vw; z-index:250; border-radius:0; transform:translateX(-110%); transition:transform .3s ease; box-shadow:4px 0 20px rgba(0,31,63,.15); }
  .ag-fish-sidebar.is-open { transform:translateX(0); }
}

.ag-fish-sidebar__header { display:flex; align-items:center; justify-content:space-between; padding:.875rem 1rem; border-bottom:1px solid rgba(0,119,190,.08); }
.ag-fish-sidebar__header h3 { font-family:'Barlow Condensed',sans-serif; font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#9fb3c8; margin:0; }
.ag-fish-sidebar__clear { font-size:.75rem; color:#9fb3c8; background:none; border:none; cursor:pointer; text-decoration:underline; }
.ag-fish-sidebar__clear:hover { color:#dc3545; }

/* Sidebar accordion groups */
.ag-sidebar-filter-group { border-bottom:1px solid rgba(0,119,190,.06); }
.ag-sidebar-filter-group__toggle {
  display:flex; align-items:center; justify-content:space-between; width:100%;
  padding:.75rem 1rem; font-size:.85rem; font-weight:600; color:#334e68;
  background:none; border:none; cursor:pointer; text-align:left; gap:.5rem;
}
.ag-sidebar-filter-group__toggle svg { transition:transform .2s ease; flex-shrink:0; color:#9fb3c8; }
.ag-sidebar-filter-group__toggle[aria-expanded="true"] svg { transform:rotate(180deg); }
.ag-sidebar-filter-group__body { padding:.25rem .75rem .75rem; display:flex; flex-direction:column; gap:.2rem; }

/* Sidebar checkboxes */
.ag-sidebar-filter-check {
  display:flex; align-items:center; gap:.6rem;
  padding:.45rem .25rem; border-radius:8px; cursor:pointer;
  transition:background .15s;
}
.ag-sidebar-filter-check:hover { background:rgba(0,119,190,.05); }
.ag-sidebar-filter-check input { position:absolute; opacity:0; pointer-events:none; }
.ag-sidebar-filter-check__box {
  width:16px; height:16px; border-radius:4px; flex-shrink:0;
  border:1.5px solid #d9e2ec; background:#fff;
  transition:all .15s ease; display:flex; align-items:center; justify-content:center;
}
.ag-sidebar-filter-check.is-checked .ag-sidebar-filter-check__box {
  background:#0077be; border-color:#0077be;
}
.ag-sidebar-filter-check.is-checked .ag-sidebar-filter-check__box::after {
  content:''; display:block; width:8px; height:5px;
  border-left:2px solid #fff; border-bottom:2px solid #fff;
  transform:rotate(-45deg) translateY(-1px);
}
.ag-sidebar-filter-check__count { font-size:.72rem; color:#9fb3c8; margin-left:auto; }

/* Fish toolbar */
.ag-fish-toolbar { display:flex; align-items:center; gap:.75rem; margin-bottom:1rem; flex-wrap:wrap; }
.ag-fish-toolbar__search {
  flex:1; min-width:180px; display:flex; align-items:center; gap:.5rem;
  background:#f8fbff; border:1.5px solid #d9e2ec; border-radius:10px;
  padding:.55rem .875rem; transition:border-color .15s;
}
.ag-fish-toolbar__search:focus-within { border-color:#0077be; background:#fff; }
.ag-fish-toolbar__search svg { color:#9fb3c8; flex-shrink:0; }
.ag-fish-toolbar__search input { flex:1; border:none; background:none; font-size:.875rem; color:#001f3f; outline:none; }
.ag-fish-toolbar__search button { border:none; background:none; cursor:pointer; color:#9fb3c8; display:flex; padding:0; }
.ag-fish-toolbar__search button:hover { color:#dc3545; }

.ag-fish-toolbar__right { display:flex; align-items:center; gap:.5rem; }
.ag-fish-toolbar__filter-btn {
  display:none; align-items:center; gap:.4rem;
  padding:.55rem .875rem; border:1.5px solid #d9e2ec; border-radius:10px;
  font-size:.875rem; font-weight:500; color:#334e68; background:#fff; cursor:pointer;
}
.ag-fish-toolbar__filter-btn.has-filters { border-color:#0077be; color:#0077be; }
.ag-fish-toolbar__filter-count { background:#0077be; color:#fff; border-radius:99px; font-size:.65rem; font-weight:700; padding:.1rem .4rem; }
@media (max-width:900px) { .ag-fish-toolbar__filter-btn { display:flex; } }

.ag-fish-toolbar__sort { padding:.55rem .875rem; border:1.5px solid #d9e2ec; border-radius:10px; font-size:.875rem; color:#334e68; background:#fff; cursor:pointer; outline:none; }
.ag-fish-toolbar__sort:focus { border-color:#0077be; }

/* Active filter tags */
.ag-active-filter-tags { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1rem; }


/* ============================================================
   FRONT-END ACCOUNT AREA  v1.0.5
   ============================================================ */

.ag-account {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 0;
  min-height: calc(100vh - 72px);
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem 4rem;
}
@media (max-width: 900px) {
  .ag-account { grid-template-columns: 1fr; }
}

/* ── Sidebar ── */
.ag-account__sidebar {
  padding: 2rem 1.5rem 2rem 0;
  border-right: 1px solid rgba(0,119,190,.1);
  position: sticky; top: 80px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 1rem;
}
@media (max-width: 900px) {
  .ag-account__sidebar { position: static; border-right: none; border-bottom: 1px solid rgba(0,119,190,.1); padding: 1.25rem 0; max-height: none; flex-direction: row; flex-wrap: wrap; gap: .5rem; }
}

.ag-account__user-card {
  display: flex; align-items: center; gap: .875rem;
  padding: .875rem 1rem;
  background: linear-gradient(135deg, rgba(0,119,190,.06), rgba(32,178,170,.04));
  border-radius: 12px; border: 1px solid rgba(0,119,190,.1);
  margin-bottom: .5rem;
}
.ag-account__avatar { border-radius: 50%; width: 52px; height: 52px; flex-shrink: 0; }
.ag-account__user-info strong { display: block; font-size: .9rem; font-weight: 700; color: #001f3f; line-height: 1.2; }
.ag-account__user-info span  { font-size: .72rem; color: #9fb3c8; }
@media (max-width: 900px) { .ag-account__user-card { display: none; } }

.ag-account__nav { display: flex; flex-direction: column; gap: .125rem; }
@media (max-width: 900px) { .ag-account__nav { flex-direction: row; flex-wrap: wrap; } }

.ag-account__nav-link {
  display: flex; align-items: center; gap: .75rem;
  padding: .625rem .875rem; border-radius: 10px;
  font-size: .875rem; font-weight: 500; color: #627d98;
  text-decoration: none; transition: all .15s ease;
}
.ag-account__nav-link svg { flex-shrink: 0; }
.ag-account__nav-link:hover { background: rgba(0,119,190,.06); color: #0077be; }
.ag-account__nav-link.is-active { background: rgba(0,119,190,.1); color: #0077be; font-weight: 600; }
.ag-account__nav-link--logout { color: #dc3545; margin-top: .5rem; }
.ag-account__nav-link--logout:hover { background: rgba(220,53,69,.06); color: #dc3545; }
@media (max-width: 900px) {
  .ag-account__nav-link { padding: .5rem .75rem; font-size: .8rem; }
  .ag-account__nav-link svg { display: none; }
  .ag-account__nav-link--logout { display: none; }
}

.ag-account__upgrade {
  background: linear-gradient(135deg, #001f3f, #003d6b);
  border-radius: 12px; padding: 1.25rem; text-align: center; color: #fff;
  font-size: .8rem; display: flex; flex-direction: column; gap: .4rem; align-items: center;
}
.ag-account__upgrade p:first-child { font-size: 1.75rem; margin: 0; }
.ag-account__upgrade strong { color: #fff; font-size: .9rem; }
.ag-account__upgrade p:last-of-type { color: rgba(255,255,255,.65); line-height: 1.4; }
@media (max-width: 900px) { .ag-account__upgrade { display: none; } }

/* ── Main ── */
.ag-account__main { padding: 2rem 0 2rem 2rem; }
@media (max-width: 900px) { .ag-account__main { padding: 1.5rem 0; } }

.ag-account__header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.75rem; flex-wrap: wrap; gap: .75rem;
}
.ag-account__header h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 2rem; font-weight: 900; color: #001f3f; margin: 0;
}
.ag-account__header p { color: #9fb3c8; font-size: .875rem; margin: 0; }

/* Stats row */
.ag-account__stats {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem; margin-bottom: 2rem;
}
.ag-account__stat {
  background: #fff; border: 1px solid rgba(0,119,190,.1); border-radius: 12px;
  padding: 1.25rem; text-align: center; display: flex; flex-direction: column; gap: .4rem;
}
.ag-account__stat-icon { font-size: 1.5rem; }
.ag-account__stat strong { font-family: 'Barlow Condensed', sans-serif; font-size: 2rem; font-weight: 900; color: #0077be; line-height: 1; }
.ag-account__stat span  { font-size: .75rem; color: #9fb3c8; }

/* Section */
.ag-account__section { margin-bottom: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(0,119,190,.08); }
.ag-account__section:last-child { border-bottom: none; }
.ag-account__section--danger { border-top: 1px solid rgba(220,53,69,.15); padding-top: 2rem; margin-top: 1rem; }
.ag-account__section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.ag-account__section-title { font-family: 'Barlow Condensed', sans-serif; font-size: 1.25rem; font-weight: 700; color: #001f3f; margin: 0 0 1.25rem; }
.ag-account__section-title--danger { color: #dc3545; }
.ag-account__section-link { font-size: .8rem; color: #0077be; text-decoration: none; }
.ag-account__section-link:hover { text-decoration: underline; }

/* Quick actions grid */
.ag-account__quick-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .875rem; }
.ag-account__action-card {
  display: flex; flex-direction: column; gap: .3rem; align-items: flex-start;
  padding: 1.25rem; background: #fff;
  border: 1px solid rgba(0,119,190,.1); border-radius: 14px;
  text-decoration: none; transition: all .2s ease;
}
.ag-account__action-card > span:first-child { font-size: 1.75rem; }
.ag-account__action-card strong { font-size: .9rem; font-weight: 700; color: #001f3f; }
.ag-account__action-card em { font-size: .75rem; color: #9fb3c8; font-style: normal; }
.ag-account__action-card:hover { border-color: #0077be; box-shadow: 0 4px 16px rgba(0,119,190,.1); transform: translateY(-2px); }
.ag-account__action-card--cta { background: linear-gradient(135deg, rgba(255,127,80,.08), rgba(255,127,80,.03)); border-color: rgba(255,127,80,.3); }
.ag-account__action-card--cta:hover { border-color: #ff7f50; }

/* Mini fish grid */
.ag-account__mini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: .875rem; }
.ag-account__mini-card {
  display: flex; flex-direction: column; gap: .5rem; align-items: center;
  padding: .75rem .5rem; background: #f8fbff;
  border: 1px solid rgba(0,119,190,.08); border-radius: 10px;
  text-decoration: none; text-align: center; transition: all .15s;
}
.ag-account__mini-card:hover { border-color: #0077be; background: #fff; }
.ag-account__mini-img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.ag-account__mini-card > span { font-size: .72rem; font-weight: 500; color: #334e68; line-height: 1.25; }

/* Tank cards */
.ag-account__tanks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.25rem; }
.ag-tank-card {
  background: #fff; border: 1px solid rgba(0,119,190,.1); border-radius: 14px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: all .2s ease;
}
.ag-tank-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,31,63,.1); }
.ag-tank-card__preview {
  height: 120px; background: linear-gradient(135deg, #001a33, #003366);
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 4px; padding: .5rem; overflow: hidden;
}
.ag-tank-card__preview img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; border: 2px solid rgba(255,255,255,.3); }
.ag-tank-card__empty-icon { font-size: 2.5rem; opacity: .4; }
.ag-tank-card__body { padding: 1rem; flex: 1; }
.ag-tank-card__body h3 { font-family: 'Barlow Condensed', sans-serif; font-size: 1.1rem; font-weight: 700; color: #001f3f; margin: 0 0 .25rem; }
.ag-tank-card__body p { font-size: .8rem; color: #9fb3c8; margin: 0; }
.ag-tank-card__actions { padding: .75rem 1rem; border-top: 1px solid rgba(0,119,190,.06); }
.ag-tank-card--new {
  border-style: dashed; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .5rem;
  min-height: 180px; text-decoration: none; color: #9fb3c8;
  font-size: .875rem; font-weight: 500;
  transition: all .2s;
}
.ag-tank-card--new:hover { border-color: #0077be; color: #0077be; background: rgba(0,119,190,.03); }
.ag-tank-card--new > span:first-child { font-size: 1.75rem; }

/* Account form */
.ag-account-form { background: #fff; border: 1px solid rgba(0,119,190,.1); border-radius: 14px; padding: 1.75rem; max-width: 620px; }
.ag-account-form__avatar-row { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(0,119,190,.06); }
.ag-account-form__avatar { border-radius: 50%; width: 80px; height: 80px; }
.ag-account-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.25rem; }
@media (max-width: 600px) { .ag-account-form__grid { grid-template-columns: 1fr; } }
.ag-account-form__field { display: flex; flex-direction: column; gap: .4rem; }
.ag-account-form__field--full { grid-column: 1 / -1; }
.ag-account-form__field label { font-size: .8rem; font-weight: 600; color: #334e68; }
.ag-account-form__field input,
.ag-account-form__field textarea {
  padding: .65rem .875rem; border: 1.5px solid #d9e2ec;
  border-radius: 10px; font-size: .9rem; color: #001f3f;
  background: #f8fbff; outline: none; font-family: inherit;
  transition: border-color .15s;
}
.ag-account-form__field input:focus,
.ag-account-form__field textarea:focus { border-color: #0077be; background: #fff; }
.ag-account-form__field textarea { resize: vertical; min-height: 100px; }
.ag-account-form__notice { padding: .875rem 1rem; border-radius: 8px; font-size: .875rem; margin-bottom: 1rem; }
.ag-account-form__notice.ag-notice--success { background: rgba(40,167,69,.08); border: 1px solid rgba(40,167,69,.25); color: #1e7e34; }
.ag-account-form__notice.ag-notice--error   { background: rgba(220,53,69,.08); border: 1px solid rgba(220,53,69,.25); color: #b21f2d; }

/* Listings table */
.ag-listings-table { background: #fff; border: 1px solid rgba(0,119,190,.1); border-radius: 14px; overflow: hidden; }
.ag-listings-table__head {
  display: grid; grid-template-columns: 1fr 120px 100px 180px;
  padding: .75rem 1.25rem; background: rgba(0,119,190,.04);
  border-bottom: 1px solid rgba(0,119,190,.08);
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: #9fb3c8;
}
.ag-listings-table__row {
  display: grid; grid-template-columns: 1fr 120px 100px 180px;
  padding: 1rem 1.25rem; border-bottom: 1px solid rgba(0,119,190,.06);
  align-items: center; transition: background .15s;
}
.ag-listings-table__row:last-child { border-bottom: none; }
.ag-listings-table__row:hover { background: rgba(0,119,190,.02); }
.ag-listings-table__product { display: flex; align-items: center; gap: .875rem; }
.ag-listings-table__thumb { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.ag-listings-table__product strong { display: block; font-size: .875rem; font-weight: 600; color: #001f3f; }
.ag-listings-table__product em { font-size: .72rem; color: #9fb3c8; font-style: normal; }
.ag-listings-table__price { font-family: 'Barlow Condensed', sans-serif; font-size: 1rem; font-weight: 700; color: #0077be; }
.ag-listings-table__status { display: inline-block; padding: .2rem .6rem; border-radius: 6px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; }
.ag-listings-table__status--publish { background: rgba(40,167,69,.12); color: #1e7e34; }
.ag-listings-table__status--draft   { background: rgba(255,193,7,.12);  color: #a17800; }
.ag-listings-table__status--pending { background: rgba(0,119,190,.12);  color: #0077be; }
.ag-listings-table__actions { display: flex; gap: .4rem; flex-wrap: wrap; }
@media (max-width: 768px) {
  .ag-listings-table__head { display: none; }
  .ag-listings-table__row { grid-template-columns: 1fr; gap: .75rem; }
  .ag-listings-table__actions { flex-wrap: wrap; }
}


/* ============================================================
   FISH CARD — FLIP + WIGGLE  v1.0.6
   ============================================================ */

/* Remove old card styles, replace with flip card */
.ag-fish-card {
  position: relative;
  aspect-ratio: 3 / 4;
  perspective: 800px;
  cursor: pointer;
  border-radius: 16px;
}

.ag-fish-card__inner {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.4,0,.2,1);
  border-radius: 16px;
}

/* Flip on hover (desktop) and touch (.is-flipped class for mobile) */
.ag-fish-card:hover .ag-fish-card__inner,
.ag-fish-card.is-flipped .ag-fish-card__inner {
  transform: rotateY(180deg);
}

/* After flip completes → trigger wiggle on the image */
.ag-fish-card:hover .ag-fish-card__img,
.ag-fish-card.is-flipped .ag-fish-card__img {
  animation: ag-fish-wiggle .65s ease-in-out .4s 1;
}

.ag-fish-card__front,
.ag-fish-card__back {
  position: absolute; inset: 0;
  border-radius: 16px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Front: full-bleed image */
.ag-fish-card__front {
  background: #001a33;
  box-shadow: 0 4px 16px rgba(0,31,63,.15);
}
.ag-fish-card__image-link { display:block; width:100%; height:100%; }
.ag-fish-card__img {
  width:100%; height:100%; object-fit:cover;
  transform-origin: center center;
}
.ag-fish-card__placeholder {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-size:4rem;
  background:linear-gradient(135deg,#001a33,#003366);
}
.ag-fish-card__front-label {
  position:absolute; bottom:0; left:0; right:0;
  padding:.875rem .875rem .75rem;
  background:linear-gradient(to top,rgba(0,15,30,.9) 0%,transparent 100%);
  color:#fff;
}
.ag-fish-card__front-label h3 { font-family:'Barlow Condensed',sans-serif; font-size:1.1rem; font-weight:700; margin:0 0 .2rem; line-height:1.2; }
.ag-fish-card__front-badges { display:flex; gap:.3rem; flex-wrap:wrap; }
.ag-fish-card__front-badges .ag-badge { font-size:.6rem; padding:.1rem .45rem; }

/* Back: info panel */
.ag-fish-card__back {
  transform: rotateY(180deg);
  background: linear-gradient(160deg, #001f3f 0%, #003d6b 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  box-shadow: 0 8px 32px rgba(0,31,63,.25);
}
.ag-fish-card__back-top {
  display:flex; align-items:flex-start; justify-content:space-between; gap:.5rem; margin-bottom:.75rem;
}
.ag-fish-card__back-name { font-family:'Barlow Condensed',sans-serif; font-size:1.15rem; font-weight:700; color:#fff; margin:0; line-height:1.2; }
.ag-fish-card__back-sci  { font-size:.68rem; color:rgba(255,255,255,.5); font-style:italic; margin:.15rem 0 0; }
.ag-fish-card__back-badges { display:flex; flex-direction:column; gap:.25rem; align-items:flex-end; flex-shrink:0; }

.ag-fish-card__back-stats {
  display:grid; grid-template-columns:1fr 1fr; gap:.35rem; flex:1;
}
.ag-fish-card__back-stat {
  background:rgba(255,255,255,.07); border-radius:8px;
  padding:.45rem .6rem; display:flex; flex-direction:column; gap:.1rem;
}
.ag-fish-card__back-stat dt { font-size:.6rem; color:rgba(255,255,255,.5); text-transform:uppercase; letter-spacing:.05em; }
.ag-fish-card__back-stat dd { font-size:.82rem; font-weight:600; color:#fff; margin:0; }

.ag-fish-card__back-actions {
  display:flex; gap:.4rem; margin-top:.75rem;
}
.ag-fish-card__back-actions .ag-btn { flex:1; font-size:.72rem; padding:.4rem .5rem; }

.ag-fish-card__back-action-btns {
  display:flex; gap:.35rem;
}
.ag-fish-card__action-btn {
  width:30px; height:30px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:rgba(255,255,255,.7);
  transition:all .2s; flex-shrink:0;
}
.ag-fish-card__action-btn:hover { border-color:rgba(255,255,255,.5); color:#fff; }
.ag-fish-card__save-btn.is-saved { color:#ff6b8a; border-color:rgba(255,107,138,.5); background:rgba(255,107,138,.15); }
.ag-fish-card__save-btn.is-saved svg { fill:#ff6b8a; }
.ag-fish-card__tank-btn.is-added { color:#20b2aa; border-color:rgba(32,178,170,.5); }

/* Toast */
.ag-fish-card__toast {
  position:absolute; top:.75rem; left:50%; transform:translateX(-50%);
  background:rgba(0,31,63,.9); color:#fff; font-size:.72rem; font-weight:500;
  padding:.3rem .8rem; border-radius:99px; white-space:nowrap;
  pointer-events:none; opacity:0; z-index:10;
}
.ag-fish-card__toast.is-showing { animation:ag-toast-in 2.5s ease forwards; }

/* ============================================================
   HOMEPAGE STATS  v1.0.6
   ============================================================ */

.ag-stats-strip {
  position: relative;
  overflow: hidden;
}
.ag-stats-strip::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #001f3f 0%, #003d6b 50%, #0077be 100%);
}

.ag-stats-inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1200px; margin: 0 auto; padding: 0 1.5rem;
}
@media (max-width:768px) { .ag-stats-inner { grid-template-columns: repeat(2,1fr); } }
@media (max-width:480px) { .ag-stats-inner { grid-template-columns: 1fr; } }

.ag-stat-block {
  padding: 2.5rem 1.5rem;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,.1);
  position: relative;
}
.ag-stat-block:last-child { border-right: none; }
@media (max-width:768px) {
  .ag-stat-block:nth-child(2) { border-right: none; }
  .ag-stat-block:nth-child(1),
  .ag-stat-block:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,.1); }
}

.ag-stat-block__icon { font-size: 2rem; display:block; margin-bottom:.5rem; }
.ag-stat-block__number {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 3rem; font-weight: 900;
  color: #fff; line-height: 1;
  display: block; margin-bottom: .3rem;
  /* Count-up animation target */
  transition: none;
}
.ag-stat-block__label {
  font-size: .8rem; color: rgba(255,255,255,.6);
  text-transform: uppercase; letter-spacing: .1em;
  display: block;
}
.ag-stat-block__sub {
  font-size: .72rem; color: rgba(255,255,255,.35);
  display: block; margin-top: .2rem;
}

/* ============================================================
   SINGLE SPECIES PAGE  v1.0.6
   ============================================================ */

.ag-species-page { }

/* Hero */
.ag-species-hero {
  position: relative; min-height: 420px;
  display: flex; align-items: flex-end;
  overflow: hidden;
}
.ag-species-hero__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: blur(2px) brightness(.45);
  transform: scale(1.05);
}
.ag-species-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,10,20,.96) 0%, rgba(0,20,40,.7) 50%, rgba(0,30,60,.3) 100%);
}
.ag-species-hero__content { position:relative; z-index:1; width:100%; padding:2rem 0 2.5rem; }

.ag-species-hero__breadcrumb {
  display:flex; align-items:center; gap:.5rem;
  font-size:.75rem; color:rgba(255,255,255,.45);
  margin-bottom:1.5rem; flex-wrap:wrap;
}
.ag-species-hero__breadcrumb a { color:rgba(255,255,255,.55); text-decoration:none; }
.ag-species-hero__breadcrumb a:hover { color:#fff; }
.ag-species-hero__breadcrumb span:not(:last-child) { color:rgba(255,255,255,.25); }

.ag-species-hero__body { display:grid; grid-template-columns:1fr auto; gap:2rem; align-items:end; }
@media (max-width:768px) { .ag-species-hero__body { grid-template-columns:1fr; } }

.ag-species-hero__badges { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:.75rem; }
.ag-species-hero__name {
  font-family:'Barlow Condensed',sans-serif; font-size:3.5rem; font-weight:900;
  color:#fff; line-height:1; margin:0 0 .35rem;
}
@media (max-width:640px) { .ag-species-hero__name { font-size:2.5rem; } }
.ag-species-hero__scientific { font-style:italic; color:rgba(255,255,255,.5); font-size:1rem; margin:0 0 1.5rem; }

/* Quick stats strip in hero */
.ag-species-hero__quick-stats {
  display:flex; gap:.5rem; flex-wrap:wrap;
}
.ag-species-hero__qs {
  background:rgba(255,255,255,.1); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.15); border-radius:10px;
  padding:.5rem .875rem; display:flex; flex-direction:column; align-items:center; gap:.1rem;
  min-width:72px; text-align:center;
}
.ag-species-hero__qs-icon { font-size:1rem; }
.ag-species-hero__qs-val  { font-family:'Barlow Condensed',sans-serif; font-size:1rem; font-weight:700; color:#fff; line-height:1; }
.ag-species-hero__qs-label { font-size:.6rem; color:rgba(255,255,255,.5); text-transform:uppercase; letter-spacing:.05em; }

/* Hero right col */
.ag-species-hero__actions-col { display:flex; flex-direction:column; gap:.75rem; align-items:flex-end; }
@media (max-width:768px) { .ag-species-hero__actions-col { flex-direction:row; flex-wrap:wrap; align-items:flex-start; } }
.ag-species-hero__thumb { border-radius:16px; overflow:hidden; width:200px; box-shadow:0 8px 32px rgba(0,0,0,.4); }
.ag-species-hero__thumb img { width:100%; height:auto; display:block; }
.ag-species-hero__ctas { display:flex; flex-direction:column; gap:.5rem; }
@media (max-width:768px) { .ag-species-hero__ctas { flex-direction:row; flex-wrap:wrap; } .ag-species-hero__thumb { display:none; } }

/* Layout */
.ag-species-layout { display:grid; grid-template-columns:1fr 300px; gap:2.5rem; padding-top:2.5rem; padding-bottom:4rem; align-items:start; }
@media (max-width:900px) { .ag-species-layout { grid-template-columns:1fr; } }

/* Sections */
.ag-species-section { margin-bottom:2.5rem; padding-bottom:2.5rem; border-bottom:1px solid rgba(0,119,190,.08); }
.ag-species-section:last-child { border-bottom:none; }
.ag-species-section__title { font-family:'Barlow Condensed',sans-serif; font-size:1.35rem; font-weight:700; color:#001f3f; margin:0 0 1.25rem; }
.ag-species-prose { font-size:.9375rem; line-height:1.75; color:#334e68; }
.ag-species-prose p { margin-bottom:1rem; }

/* Parameter panels */
.ag-param-panels { display:flex; flex-direction:column; gap:1rem; margin-bottom:1.25rem; }
.ag-param-panel { background:#f8fbff; border:1px solid rgba(0,119,190,.1); border-radius:12px; padding:1rem 1.25rem; }
.ag-param-panel__head { display:flex; align-items:center; gap:.75rem; margin-bottom:.75rem; }
.ag-param-panel__icon { font-size:1.25rem; }
.ag-param-panel__label { font-size:.8rem; color:#9fb3c8; text-transform:uppercase; letter-spacing:.06em; flex:1; }
.ag-param-panel__value { font-family:'Barlow Condensed',sans-serif; font-size:1.125rem; font-weight:700; color:#001f3f; }
.ag-param-track { }
.ag-param-track__scale { display:flex; justify-content:space-between; font-size:.65rem; color:#b0c4d8; margin-bottom:.35rem; }
.ag-param-track__bar { height:10px; background:#e0eaf4; border-radius:99px; position:relative; overflow:hidden; }
.ag-param-track__bar--ph { background:linear-gradient(to right,#ff6b6b,#ffd93d,#6bcb77,#4d96ff,#9b59b6); }
.ag-param-track__fill { position:absolute; top:0; bottom:0; border-radius:99px; }
.ag-param-track__fill--temp { background:linear-gradient(90deg,#4d96ff,#ff9f43); }

.ag-param-chips { display:flex; flex-wrap:wrap; gap:.75rem; }
.ag-param-chip { background:#fff; border:1px solid rgba(0,119,190,.1); border-radius:10px; padding:.625rem 1rem; display:flex; flex-direction:column; gap:.15rem; align-items:center; text-align:center; min-width:80px; }
.ag-param-chip span { font-size:1.1rem; }
.ag-param-chip em { font-size:.65rem; color:#9fb3c8; font-style:normal; text-transform:uppercase; letter-spacing:.05em; }
.ag-param-chip strong { font-size:.85rem; font-weight:600; color:#001f3f; }

/* Behaviour grid */
.ag-behaviour-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:.875rem; }
.ag-behaviour-card { background:#f8fbff; border:1px solid rgba(0,119,190,.08); border-radius:12px; padding:1rem; display:flex; flex-direction:column; align-items:center; gap:.35rem; text-align:center; }
.ag-behaviour-card__icon { font-size:1.5rem; }
.ag-behaviour-card__label { font-size:.68rem; color:#9fb3c8; text-transform:uppercase; letter-spacing:.06em; }
.ag-behaviour-card__val { font-size:.85rem; font-weight:700; color:#001f3f; }

/* Compat blocks */
.ag-compat-block { padding:1rem 1.25rem; border-radius:12px; }
.ag-compat-block--good { background:rgba(40,167,69,.06); border:1px solid rgba(40,167,69,.2); }
.ag-compat-block--bad  { background:rgba(220,53,69,.06); border:1px solid rgba(220,53,69,.2); }
.ag-compat-block h3 { font-family:'Barlow Condensed',sans-serif; font-size:1rem; font-weight:700; margin:0 0 .75rem; color:#001f3f; }
.ag-compat-tags { display:flex; flex-wrap:wrap; gap:.4rem; }
.ag-compat-tag { padding:.25rem .75rem; border-radius:99px; font-size:.78rem; font-weight:500; }
.ag-compat-tag--good { background:rgba(40,167,69,.1);  color:#1e7e34; border:1px solid rgba(40,167,69,.25); }
.ag-compat-tag--bad  { background:rgba(220,53,69,.1);  color:#b21f2d; border:1px solid rgba(220,53,69,.25); }

/* Video */
.ag-species-video { position:relative; aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:#000; }
.ag-species-video iframe { position:absolute; inset:0; width:100%; height:100%; border:none; }

/* Sidebar widgets */
.ag-species-sidebar { display:flex; flex-direction:column; gap:1.25rem; position:sticky; top:88px; }
.ag-species-widget { background:#fff; border:1px solid rgba(0,119,190,.1); border-radius:14px; padding:1.25rem; }
.ag-species-widget--cta {
  background:linear-gradient(135deg,#001f3f,#003d6b);
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:.35rem;
  text-decoration:none; padding:1.5rem; color:#fff;
  transition:transform .2s;
}
.ag-species-widget--cta:hover { transform:translateY(-2px); }
.ag-species-widget--cta span { font-size:2rem; }
.ag-species-widget--cta strong { font-size:1rem; font-weight:700; color:#fff; }
.ag-species-widget--cta em { font-size:.78rem; color:rgba(255,255,255,.6); font-style:normal; }
.ag-species-widget__title { font-family:'Barlow Condensed',sans-serif; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#9fb3c8; margin:0 0 1rem; }

/* Difficulty meter */
.ag-difficulty-meter { display:flex; gap:4px; margin-bottom:.5rem; }
.ag-difficulty-meter__pip { flex:1; height:8px; border-radius:99px; }
.ag-difficulty-meter__pip--off  { background:#e8f0f7; }
.ag-difficulty-meter__pip--easy { background:#28a745; }
.ag-difficulty-meter__pip--medium { background:#ffc107; }
.ag-difficulty-meter__pip--hard { background:#dc3545; }
.ag-difficulty-meter__label { font-size:.8rem; color:#334e68; display:flex; justify-content:space-between; }
.ag-difficulty-meter__label span { color:#9fb3c8; font-size:.72rem; }

/* Spec list */
.ag-spec-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:0; }
.ag-spec-row { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.55rem 0; border-bottom:1px solid rgba(0,119,190,.06); }
.ag-spec-row:last-child { border-bottom:none; }
.ag-spec-row dt { display:flex; align-items:center; gap:.4rem; font-size:.8rem; color:#9fb3c8; flex-shrink:0; }
.ag-spec-row dt span { font-size:.9rem; }
.ag-spec-row dd { font-size:.82rem; font-weight:600; color:#334e68; text-align:right; margin:0; }

/* Product in sidebar */
.ag-species-product { display:flex; align-items:center; gap:.75rem; margin-top:.75rem; padding:.75rem; background:#f8fbff; border-radius:10px; }
.ag-species-product div { flex:1; }
.ag-species-product strong { display:block; font-size:.8rem; font-weight:600; color:#001f3f; }
.ag-species-product span { font-size:.8rem; color:#0077be; font-weight:700; }

/* Related */
.ag-related-section { background:#f8fbff; padding:3rem 0; }
.ag-related-section__title { font-family:'Barlow Condensed',sans-serif; font-size:2rem; font-weight:700; color:#001f3f; margin:0 0 1.5rem; }

/* ── Orders list ── */
.ag-orders-list { display:flex; flex-direction:column; gap:1rem; }
.ag-order-card { background:#fff; border:1px solid rgba(0,119,190,.1); border-radius:14px; overflow:hidden; }
.ag-order-card__head { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:1rem; padding:1rem 1.25rem; border-bottom:1px solid rgba(0,119,190,.06); flex-wrap:wrap; }
.ag-order-card__id strong { display:block; font-size:.9rem; font-weight:700; color:#001f3f; }
.ag-order-card__date { font-size:.75rem; color:#9fb3c8; }
.ag-order-card__status { display:inline-block; padding:.25rem .75rem; border-radius:6px; font-size:.72rem; font-weight:700; letter-spacing:.04em; }
.ag-order-card__status--processing { background:rgba(0,119,190,.1); color:#0077be; }
.ag-order-card__status--completed  { background:rgba(40,167,69,.1); color:#1e7e34; }
.ag-order-card__status--on-hold    { background:rgba(255,193,7,.1); color:#a17800; }
.ag-order-card__status--cancelled  { background:rgba(220,53,69,.1); color:#dc3545; }
.ag-order-card__status--pending    { background:rgba(156,110,255,.1); color:#6f42c1; }
.ag-order-card__total { font-family:'Barlow Condensed',sans-serif; font-size:1.25rem; font-weight:700; color:#0077be; }
.ag-order-card__items { display:flex; flex-wrap:wrap; gap:.75rem; padding:1rem 1.25rem; }
.ag-order-card__item { display:flex; align-items:center; gap:.625rem; }
.ag-order-card__item strong { font-size:.8rem; font-weight:600; color:#334e68; }
.ag-order-card__item span  { font-size:.75rem; color:#9fb3c8; }
.ag-order-card__more { font-size:.75rem; color:#9fb3c8; align-self:center; }
.ag-order-card__foot { display:flex; gap:.5rem; padding:.875rem 1.25rem; border-top:1px solid rgba(0,119,190,.06); background:rgba(0,119,190,.02); flex-wrap:wrap; }

/* ── Listing form ── */
.ag-listing-form-grid { display:grid; grid-template-columns:1fr 280px; gap:2rem; align-items:start; }
@media (max-width:768px) { .ag-listing-form-grid { grid-template-columns:1fr; } }
.ag-listing-form__main { display:flex; flex-direction:column; gap:1rem; }
.ag-listing-form__row3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1rem; }
@media (max-width:640px) { .ag-listing-form__row3 { grid-template-columns:1fr; } }
.ag-listing-form__publish-box { background:#fff; border:1px solid rgba(0,119,190,.1); border-radius:12px; padding:1.25rem; display:flex; flex-direction:column; gap:.75rem; }
.ag-listing-form__publish-box h3 { font-family:'Barlow Condensed',sans-serif; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#9fb3c8; margin:0; }
.ag-listing-form__tips { background:#f8fbff; border:1px solid rgba(0,119,190,.08); border-radius:12px; padding:1.25rem; margin-top:1rem; }
.ag-listing-form__tips h4 { font-size:.85rem; font-weight:700; color:#001f3f; margin:0 0 .75rem; }
.ag-listing-form__tips ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.4rem; }
.ag-listing-form__tips li { font-size:.8rem; color:#627d98; }
.ag-listing-form__tips li::before { content:'→ '; color:#0077be; }

.ag-listing-upload {
  border:2px dashed #d9e2ec; border-radius:12px; padding:2rem;
  text-align:center; cursor:pointer; transition:all .2s;
  display:flex; flex-direction:column; align-items:center; gap:.5rem; color:#9fb3c8;
}
.ag-listing-upload:hover, .ag-listing-upload.is-over { border-color:#0077be; background:rgba(0,119,190,.04); color:#0077be; }
.ag-listing-upload span { font-size:2rem; }
.ag-listing-upload strong { font-size:.9rem; color:#334e68; }
.ag-listing-upload em { font-size:.78rem; }
.ag-listing-upload input[type="file"] { display:none; }
.ag-listing-previews { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.75rem; }
.ag-listing-preview { position:relative; width:80px; height:80px; border-radius:8px; overflow:hidden; }
.ag-listing-preview img { width:100%; height:100%; object-fit:cover; }
.ag-listing-preview__remove { position:absolute; top:2px; right:2px; width:18px; height:18px; border-radius:50%; background:rgba(220,53,69,.9); color:#fff; border:none; cursor:pointer; font-size:.7rem; display:flex; align-items:center; justify-content:center; }


/* ============================================================
   SELLER SHOP PROFILE  v1.0.8
   ============================================================ */

.ag-shop { background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 4px 24px rgba(0,31,63,.08); }

/* Cover */
.ag-shop__cover {
  position:relative; height:260px; overflow:hidden;
  background:linear-gradient(135deg,#001f3f 0%,#003d6b 50%,#0077be 100%);
}
@media(max-width:640px){ .ag-shop__cover { height:160px; } }
.ag-shop__cover-img { width:100%; height:100%; object-fit:cover; display:block; }
.ag-shop__cover-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:4rem; opacity:.3; }
.ag-shop__cover-upload-btn {
  position:absolute; bottom:.875rem; right:.875rem;
  background:rgba(0,0,0,.55); backdrop-filter:blur(4px);
  color:#fff; border:1px solid rgba(255,255,255,.25); border-radius:8px;
  padding:.4rem .875rem; font-size:.78rem; font-weight:500; cursor:pointer;
  transition:background .15s;
}
.ag-shop__cover-upload-btn:hover { background:rgba(0,0,0,.75); }

/* Identity */
.ag-shop__identity {
  display:flex; align-items:flex-end; gap:1.25rem;
  padding:0 2rem 1.5rem; margin-top:-48px; flex-wrap:wrap;
}
@media(max-width:640px){ .ag-shop__identity { padding:0 1rem 1rem; margin-top:-36px; } }

.ag-shop__avatar-wrap { position:relative; flex-shrink:0; }
.ag-shop__avatar {
  width:96px; height:96px; border-radius:50%;
  border:4px solid #fff; box-shadow:0 4px 16px rgba(0,31,63,.15);
  object-fit:cover; display:block;
}
@media(max-width:640px){ .ag-shop__avatar { width:72px; height:72px; } }
.ag-shop__avatar-edit {
  position:absolute; bottom:0; right:0;
  width:28px; height:28px; border-radius:50%;
  background:#0077be; color:#fff; border:2px solid #fff;
  display:flex; align-items:center; justify-content:center;
  font-size:.8rem; cursor:pointer; transition:background .15s;
}
.ag-shop__avatar-edit:hover { background:#005c94; }

.ag-shop__identity-info { flex:1; padding-top:1.25rem; min-width:0; }
.ag-shop__name-row { display:flex; align-items:center; gap:.625rem; flex-wrap:wrap; margin-bottom:.3rem; }
.ag-shop__name { font-family:'Barlow Condensed',sans-serif; font-size:2rem; font-weight:900; color:#001f3f; margin:0; line-height:1.1; }
@media(max-width:640px){ .ag-shop__name { font-size:1.5rem; } }
.ag-shop__pro-badge {
  background:linear-gradient(135deg,#f6c90e,#f09d00); color:#5c3d00;
  font-size:.65rem; font-weight:700; padding:.15rem .5rem; border-radius:6px;
  letter-spacing:.04em;
}
.ag-shop__tagline { color:#627d98; font-size:.9rem; margin:.2rem 0 .5rem; }
.ag-shop__meta-row { display:flex; flex-wrap:wrap; gap:.625rem 1rem; font-size:.78rem; color:#9fb3c8; }
.ag-shop__meta-row a { color:#0077be; text-decoration:none; }
.ag-shop__meta-row a:hover { text-decoration:underline; }

.ag-shop__identity-actions { margin-left:auto; padding-top:1.5rem; flex-shrink:0; }
@media(max-width:640px){ .ag-shop__identity-actions { margin-left:0; padding-top:0; } }

/* Stats bar */
.ag-shop__stats {
  display:flex; gap:0; border-top:1px solid rgba(0,119,190,.08);
  border-bottom:1px solid rgba(0,119,190,.08);
  padding:.875rem 2rem;
}
@media(max-width:640px){ .ag-shop__stats { padding:.75rem 1rem; } }
.ag-shop__stat {
  display:flex; align-items:center; gap:.5rem;
  padding-right:1.5rem; margin-right:1.5rem;
  border-right:1px solid rgba(0,119,190,.08);
  font-size:.85rem;
}
.ag-shop__stat:last-child { border-right:none; padding-right:0; margin-right:0; }
.ag-shop__stat span { font-size:1.1rem; }
.ag-shop__stat strong { font-family:'Barlow Condensed',sans-serif; font-size:1.35rem; font-weight:700; color:#001f3f; }
.ag-shop__stat em { font-size:.72rem; color:#9fb3c8; font-style:normal; }

/* Tabs */
.ag-shop__tabs {
  display:flex; gap:0; border-bottom:2px solid rgba(0,119,190,.08);
  padding:0 2rem;
}
@media(max-width:640px){ .ag-shop__tabs { padding:0 1rem; } }
.ag-shop__tab {
  padding:.875rem 1.25rem; font-size:.875rem; font-weight:500; color:#627d98;
  text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-2px;
  transition:color .15s, border-color .15s; white-space:nowrap;
}
.ag-shop__tab:hover { color:#0077be; }
.ag-shop__tab.is-active { color:#0077be; border-bottom-color:#0077be; font-weight:600; }
.ag-shop__tab-count { font-size:.72rem; color:#9fb3c8; margin-left:.3rem; }

/* Body */
.ag-shop__body { padding:2rem; }
@media(max-width:640px){ .ag-shop__body { padding:1.25rem; } }

/* About tab */
.ag-shop__bio { font-size:.9375rem; line-height:1.75; color:#334e68; margin-bottom:1.5rem; }
.ag-shop__about-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:.875rem; }
.ag-about-card { background:#f8fbff; border:1px solid rgba(0,119,190,.08); border-radius:12px; padding:1rem; display:flex; flex-direction:column; gap:.3rem; }
.ag-about-card span { font-size:1.25rem; }
.ag-about-card strong { font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:#9fb3c8; }
.ag-about-card em { font-size:.875rem; color:#334e68; font-style:normal; }
.ag-about-card a { color:#0077be; text-decoration:none; }

/* Gallery */
.ag-shop__gallery-section { }
.ag-shop__gallery-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; flex-wrap:wrap; gap:.75rem; }
.ag-shop__gallery-count { font-size:.85rem; color:#334e68; font-weight:500; }
.ag-shop__upgrade-link { font-size:.78rem; color:#f09d00; margin-left:.75rem; text-decoration:none; font-weight:600; }
.ag-shop__upgrade-link:hover { text-decoration:underline; }

.ag-shop__gallery {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:.875rem;
}
.ag-shop__gallery-item {
  position:relative; aspect-ratio:1; border-radius:12px; overflow:hidden;
  cursor:pointer; background:#f0f4f8;
}
.ag-shop__gallery-img { width:100%; height:100%; object-fit:cover; transition:transform .3s ease; display:block; }
.ag-shop__gallery-item:hover .ag-shop__gallery-img { transform:scale(1.06); }
.ag-shop__gallery-delete {
  position:absolute; top:6px; right:6px;
  width:24px; height:24px; border-radius:50%;
  background:rgba(220,53,69,.85); color:#fff; border:none; cursor:pointer;
  font-size:.875rem; display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .2s;
}
.ag-shop__gallery-item:hover .ag-shop__gallery-delete { opacity:1; }

/* Gallery manager (edit mode) */
.ag-gallery-manager { display:flex; flex-wrap:wrap; gap:.75rem; }
.ag-gallery-manager__item { position:relative; width:90px; height:90px; border-radius:10px; overflow:hidden; }
.ag-gallery-manager__item img { width:100%; height:100%; object-fit:cover; }
.ag-gallery-manager__delete {
  position:absolute; top:-4px; right:-4px; width:20px; height:20px; border-radius:50%;
  background:#dc3545; color:#fff; border:2px solid #fff; cursor:pointer;
  font-size:.8rem; display:flex; align-items:center; justify-content:center; line-height:1;
}
.ag-gallery-manager__add {
  width:90px; height:90px; border:2px dashed #d9e2ec; border-radius:10px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.3rem; color:#9fb3c8; cursor:pointer; transition:all .15s; font-size:.7rem;
}
.ag-gallery-manager__add:hover { border-color:#0077be; color:#0077be; }
.ag-gallery-manager__add span { font-size:1.5rem; }
.ag-gallery-manager__limit { width:90px; height:90px; border:2px dashed #f0d080; border-radius:10px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem; color:#a17800; font-size:.65rem; text-align:center; padding:.5rem; }

/* Lightbox */
.ag-lightbox {
  position:fixed; inset:0; background:rgba(0,0,0,.95); z-index:9999;
  display:flex; align-items:center; justify-content:center;
}
.ag-lightbox__img-wrap { max-width:90vw; max-height:90vh; }
.ag-lightbox__img { max-width:100%; max-height:90vh; object-fit:contain; border-radius:8px; display:block; }
.ag-lightbox__close { position:absolute; top:1rem; right:1rem; background:rgba(255,255,255,.15); border:none; color:#fff; font-size:1.5rem; width:44px; height:44px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.ag-lightbox__prev, .ag-lightbox__next { position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.1); border:none; color:#fff; font-size:2rem; width:52px; height:52px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s; }
.ag-lightbox__prev { left:1rem; }
.ag-lightbox__next { right:1rem; }
.ag-lightbox__prev:hover, .ag-lightbox__next:hover { background:rgba(255,255,255,.25); }

/* Plan badge */
.ag-shop-plan-badge { padding:.875rem 1.25rem; border-radius:10px; font-size:.85rem; font-weight:500; margin-bottom:1.5rem; }
.ag-shop-plan-badge--free { background:rgba(0,119,190,.06); border:1px solid rgba(0,119,190,.15); color:#334e68; }
.ag-shop-plan-badge--pro  { background:linear-gradient(135deg,rgba(246,201,14,.08),rgba(240,157,0,.06)); border:1px solid rgba(246,201,14,.4); color:#5c3d00; }
.ag-shop-plan-badge a { color:#0077be; font-weight:600; text-decoration:none; margin-left:.5rem; }


/* ============================================================
   BASKET PAGE  v1.0.8
   ============================================================ */
.ag-basket-page { padding:2.5rem 0 4rem; }
.ag-basket-header { display:flex; align-items:center; gap:1rem; margin-bottom:2rem; }
.ag-basket-header h1 { font-family:'Barlow Condensed',sans-serif; font-size:2.5rem; font-weight:900; color:#001f3f; margin:0; }
.ag-basket-header__count { font-size:.9rem; color:#9fb3c8; background:#f0f4f8; border-radius:99px; padding:.25rem .875rem; }
.ag-basket-layout { display:grid; grid-template-columns:1fr 320px; gap:2rem; align-items:start; }
@media(max-width:900px){ .ag-basket-layout { grid-template-columns:1fr; } }

/* Items */
.ag-basket-items { display:flex; flex-direction:column; gap:1.5rem; }
.ag-basket-item { display:grid; grid-template-columns:100px 1fr auto; gap:1.25rem; background:#fff; border:1px solid rgba(0,119,190,.1); border-radius:14px; padding:1.25rem; align-items:start; }
@media(max-width:640px){ .ag-basket-item { grid-template-columns:80px 1fr; } }
.ag-basket-item__image { border-radius:10px; overflow:hidden; aspect-ratio:1; }
.ag-basket-item__image img { width:100%; height:100%; object-fit:cover; }
.ag-basket-item__meta { display:flex; align-items:center; gap:.5rem; margin-bottom:.4rem; }
.ag-basket-item__type { background:rgba(0,119,190,.08); color:#0077be; font-size:.7rem; font-weight:700; padding:.15rem .5rem; border-radius:6px; letter-spacing:.04em; }
.ag-basket-item__seller { font-size:.75rem; color:#9fb3c8; }
.ag-basket-item__name { font-family:'Barlow Condensed',sans-serif; font-size:1.2rem; font-weight:700; color:#001f3f; margin:0 0 .35rem; }
.ag-basket-item__name a { color:inherit; text-decoration:none; }
.ag-basket-item__name a:hover { color:#0077be; }
.ag-basket-item__desc { font-size:.82rem; color:#627d98; line-height:1.5; margin:0 0 .875rem; }
.ag-basket-item__linked { display:flex; align-items:center; gap:.875rem; background:#f8fbff; border:1px solid rgba(0,119,190,.1); border-radius:10px; padding:.75rem; margin-top:.5rem; }
.ag-basket-item__linked img { width:52px; height:52px; object-fit:cover; border-radius:8px; flex-shrink:0; }
.ag-basket-item__linked p { font-size:.8rem; font-weight:600; color:#001f3f; margin:0 0 .35rem; }
.ag-basket-item__linked a { color:#0077be; text-decoration:none; }
.ag-basket-item__linked-stats { display:flex; flex-wrap:wrap; gap:.3rem; }
.ag-basket-item__stat { font-size:.72rem; color:#627d98; }
.ag-basket-item__controls { display:flex; flex-direction:column; align-items:flex-end; gap:.75rem; }
.ag-basket-item__unit-price { font-size:.82rem; color:#9fb3c8; }
.ag-basket-qty { display:flex; align-items:center; gap:0; border:1.5px solid #d9e2ec; border-radius:8px; overflow:hidden; }
.ag-basket-qty__btn { width:32px; height:32px; border:none; background:#f8fbff; font-size:1rem; cursor:pointer; color:#334e68; transition:background .15s; }
.ag-basket-qty__btn:hover { background:#e8f0f7; }
.ag-basket-qty__input { width:42px; height:32px; border:none; border-left:1.5px solid #d9e2ec; border-right:1.5px solid #d9e2ec; text-align:center; font-size:.875rem; font-weight:600; color:#001f3f; -moz-appearance:textfield; }
.ag-basket-qty__input::-webkit-outer-spin-button,.ag-basket-qty__input::-webkit-inner-spin-button { -webkit-appearance:none; }
.ag-basket-item__line-total { font-family:'Barlow Condensed',sans-serif; font-size:1.25rem; font-weight:700; color:#0077be; }
.ag-basket-item__remove { border:none; background:none; cursor:pointer; color:#d9e2ec; transition:color .15s; padding:.25rem; }
.ag-basket-item__remove:hover { color:#dc3545; }

/* Similar items */
.ag-basket-similar { background:#f8fbff; border-radius:12px; padding:1.25rem; margin-top:.75rem; }
.ag-basket-similar__title { font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#9fb3c8; margin:0 0 .875rem; }
.ag-basket-similar__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; }
.ag-basket-similar__card { display:flex; flex-direction:column; gap:.5rem; text-decoration:none; background:#fff; border:1px solid rgba(0,119,190,.08); border-radius:10px; overflow:hidden; transition:all .15s; }
.ag-basket-similar__card:hover { border-color:#0077be; transform:translateY(-2px); }
.ag-basket-similar__img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.ag-basket-similar__info { padding:.5rem .625rem; }
.ag-basket-similar__info strong { display:block; font-size:.78rem; font-weight:600; color:#001f3f; line-height:1.25; }
.ag-basket-similar__info span { font-size:.75rem; color:#0077be; font-weight:700; }

/* Summary */
.ag-basket-actions { display:flex; align-items:center; justify-content:space-between; padding-top:1rem; gap:.75rem; flex-wrap:wrap; }
.ag-basket-summary__inner { background:#fff; border:1px solid rgba(0,119,190,.1); border-radius:14px; padding:1.5rem; position:sticky; top:88px; }
.ag-basket-summary__title { font-family:'Barlow Condensed',sans-serif; font-size:1.25rem; font-weight:700; color:#001f3f; margin:0 0 1.25rem; }
.ag-basket-summary__lines { display:flex; flex-direction:column; gap:.625rem; margin-bottom:1rem; padding-bottom:1rem; border-bottom:1px solid rgba(0,119,190,.08); }
.ag-basket-summary__line { display:flex; justify-content:space-between; font-size:.875rem; color:#334e68; }
.ag-basket-summary__total { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.25rem; font-weight:700; color:#001f3f; font-size:1.05rem; }
#ag-total { font-family:'Barlow Condensed',sans-serif; font-size:1.5rem; color:#0077be; }
.ag-basket-coupon { display:flex; gap:.5rem; margin-bottom:.5rem; }
.ag-basket-coupon input { flex:1; padding:.6rem .875rem; border:1.5px solid #d9e2ec; border-radius:8px; font-size:.875rem; outline:none; }
.ag-basket-coupon input:focus { border-color:#0077be; }
.ag-basket-trust { display:flex; justify-content:space-around; margin-top:1.25rem; padding-top:1rem; border-top:1px solid rgba(0,119,190,.06); font-size:.72rem; color:#9fb3c8; }

/* Name lock */
.ag-name-lock-badge { background:rgba(220,53,69,.1); color:#dc3545; font-size:.7rem; padding:.15rem .5rem; border-radius:6px; font-weight:600; margin-left:.5rem; }
.ag-name-lock-msg { font-size:.78rem; color:#627d98; margin-top:.35rem; }

/* ============================================================
   TOOLS PAGE  v1.0.8
   ============================================================ */
.ag-tools-hero { background:linear-gradient(135deg,#001f3f 0%,#003d6b 60%,#0077be 100%); padding:3.5rem 0 3rem; color:#fff; }
.ag-tools-hero__title { font-family:'Barlow Condensed',sans-serif; font-size:3.5rem; font-weight:900; color:#fff; margin:.5rem 0 .75rem; line-height:1.1; }
.ag-tools-hero__sub { color:rgba(255,255,255,.65); font-size:1rem; }
.ag-tools-page { padding:2.5rem 0 4rem; }

.ag-tools-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.25rem; margin-bottom:3rem; }
.ag-tool-card { background:#fff; border:1px solid rgba(0,119,190,.1); border-radius:16px; padding:1.5rem; display:flex; gap:1.25rem; align-items:flex-start; transition:all .2s; }
.ag-tool-card:hover { border-color:#0077be; box-shadow:0 6px 24px rgba(0,119,190,.1); transform:translateY(-2px); }
.ag-tool-card__icon-wrap { width:52px; height:52px; border-radius:14px; background:linear-gradient(135deg,rgba(0,119,190,.08),rgba(32,178,170,.06)); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ag-tool-card__icon { font-size:1.75rem; }
.ag-tool-card__head { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.4rem; flex-wrap:wrap; }
.ag-tool-card__title { font-family:'Barlow Condensed',sans-serif; font-size:1.15rem; font-weight:700; color:#001f3f; margin:0; }
.ag-tool-card__badge { font-size:.65rem; font-weight:700; padding:.15rem .5rem; border-radius:6px; letter-spacing:.04em; white-space:nowrap; }
.ag-tool-card__desc { font-size:.82rem; color:#627d98; line-height:1.55; margin:0 0 .875rem; }

.ag-tool-panel { background:#fff; border:1px solid rgba(0,119,190,.1); border-radius:16px; overflow:hidden; margin-bottom:2rem; }
.ag-tool-panel__header { background:linear-gradient(135deg,rgba(0,119,190,.05),rgba(32,178,170,.03)); border-bottom:1px solid rgba(0,119,190,.1); padding:1.5rem; }
.ag-tool-panel__header h2 { font-family:'Barlow Condensed',sans-serif; font-size:1.5rem; font-weight:700; color:#001f3f; margin:0 0 .25rem; }
.ag-tool-panel__header p { font-size:.875rem; color:#627d98; margin:0; }
.ag-tool-panel__body { padding:1.75rem; }

.ag-calc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1rem; margin-bottom:1.5rem; }
.ag-calc-field { display:flex; flex-direction:column; gap:.4rem; }
.ag-calc-field label { font-size:.8rem; font-weight:600; color:#334e68; }
.ag-calc-input-wrap { display:flex; align-items:center; border:1.5px solid #d9e2ec; border-radius:10px; overflow:hidden; }
.ag-calc-input-wrap input { flex:1; padding:.65rem .875rem; border:none; font-size:.9rem; color:#001f3f; outline:none; }
.ag-calc-input-wrap span { padding:0 .875rem; font-size:.8rem; color:#9fb3c8; background:#f8fbff; border-left:1.5px solid #d9e2ec; height:100%; display:flex; align-items:center; white-space:nowrap; }
.ag-calc-field select { padding:.65rem .875rem; border:1.5px solid #d9e2ec; border-radius:10px; font-size:.875rem; color:#334e68; background:#fff; outline:none; }
.ag-calc-field select:focus,.ag-calc-input-wrap:focus-within { border-color:#0077be; }

.ag-tool-result { margin-top:1.5rem; padding:1.5rem; background:linear-gradient(135deg,rgba(0,119,190,.06),rgba(32,178,170,.04)); border:1px solid rgba(0,119,190,.15); border-radius:12px; text-align:center; }
.ag-tool-result__number { font-family:'Barlow Condensed',sans-serif; font-size:3.5rem; font-weight:900; color:#0077be; line-height:1; }
.ag-tool-result__label { font-size:.85rem; color:#627d98; margin:.3rem 0 .75rem; }
.ag-tool-result__note { font-size:.82rem; color:#334e68; }

.ag-wq-results { display:flex; flex-direction:column; gap:.75rem; margin-top:1.5rem; }
.ag-wq-check { display:flex; align-items:flex-start; gap:.875rem; background:#f8fbff; border:1px solid rgba(0,119,190,.08); border-radius:12px; padding:1rem; }
.ag-wq-check__icon { font-size:1.25rem; flex-shrink:0; }
.ag-wq-check strong { display:block; font-size:.85rem; font-weight:700; color:#001f3f; margin-bottom:.2rem; }
.ag-wq-check p { font-size:.82rem; color:#627d98; margin:0; line-height:1.5; }

.ag-fish-id-upload { position:relative; border:2px dashed #d9e2ec; border-radius:14px; padding:2.5rem 1.5rem; text-align:center; cursor:pointer; transition:all .2s; display:flex; flex-direction:column; align-items:center; gap:.5rem; color:#9fb3c8; }
.ag-fish-id-upload:hover { border-color:#0077be; background:rgba(0,119,190,.03); color:#0077be; }
.ag-fish-id-upload__icon { font-size:2.5rem; }
.ag-fish-id-upload strong { font-size:.9rem; color:#334e68; }
.ag-fish-id-upload em { font-size:.78rem; }

.ag-fish-id-result { margin-top:1.25rem; background:#f8fbff; border:1px solid rgba(0,119,190,.1); border-radius:12px; padding:1.5rem; }
.ag-fish-id-result__header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:.875rem; }
.ag-fish-id-result__header h3 { font-family:'Barlow Condensed',sans-serif; font-size:1.5rem; font-weight:700; color:#001f3f; margin:0 0 .2rem; }
.ag-fish-id-result__header em { font-style:italic; font-size:.875rem; color:#9fb3c8; display:block; }
.ag-fish-id-result__confidence { font-size:.7rem; font-weight:700; padding:.2rem .6rem; border-radius:6px; white-space:nowrap; flex-shrink:0; }
.ag-fish-id-result__desc { font-size:.875rem; color:#334e68; line-height:1.6; margin-bottom:1rem; }
.ag-fish-id-result__stats { display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:.5rem; }


/* ============================================================
   TANK BUILDER — CONSOLIDATED  v1.0.9
   ============================================================ */

.ag-tb-page { min-height:100vh; }

.ag-tb-header { display:flex; align-items:center; justify-content:space-between; padding:1.5rem 2rem; background:#fff; border-bottom:1px solid rgba(0,119,190,.1); flex-wrap:wrap; gap:.75rem; }
.ag-tb-header__title { font-family:'Barlow Condensed',sans-serif; font-size:2rem; font-weight:900; color:#001f3f; margin:0; }
.ag-tb-header__sub { color:#9fb3c8; font-size:.85rem; margin:.1rem 0 0; }
.ag-tb-header__editing { font-size:.85rem; background:rgba(0,119,190,.08); border:1px solid rgba(0,119,190,.15); padding:.4rem .875rem; border-radius:8px; color:#0077be; }

/* Three-column layout */
.ag-tb-layout { display:grid; grid-template-columns:260px 1fr 280px; height:calc(100vh - 72px - 70px); overflow:hidden; }
@media(max-width:1100px){ .ag-tb-layout { grid-template-columns:220px 1fr 240px; } }
@media(max-width:900px){  .ag-tb-layout { grid-template-columns:1fr; height:auto; overflow:visible; } }

/* ── Picker (left) ── */
.ag-tb-picker { border-right:1px solid rgba(0,119,190,.1); display:flex; flex-direction:column; overflow:hidden; background:#fff; }
.ag-tb-picker__tabs { display:flex; border-bottom:1px solid rgba(0,119,190,.08); flex-shrink:0; }
.ag-tb-picker__tab { flex:1; padding:.625rem; font-size:.8rem; font-weight:600; color:#9fb3c8; background:none; border:none; cursor:pointer; border-bottom:2px solid transparent; transition:all .15s; }
.ag-tb-picker__tab.is-active { color:#0077be; border-bottom-color:#0077be; }
.ag-tb-picker__tab-count { font-size:.65rem; background:#e8f0f7; border-radius:99px; padding:.1rem .35rem; margin-left:.3rem; color:#9fb3c8; }
.ag-tb-picker__panel { display:none; flex-direction:column; flex:1; overflow:hidden; }
.ag-tb-picker__panel.is-active { display:flex; }
.ag-tb-picker__search-wrap { display:flex; align-items:center; gap:.5rem; margin:.625rem .625rem .3rem; padding:.5rem .75rem; background:#f8fbff; border:1.5px solid #e8f0f7; border-radius:10px; flex-shrink:0; }
.ag-tb-picker__search-wrap:focus-within { border-color:#0077be; }
.ag-tb-search { border:none; background:none; font-size:.8rem; color:#001f3f; outline:none; flex:1; }
.ag-tb-picker__filters { display:flex; gap:.4rem; padding:0 .625rem .5rem; flex-shrink:0; }
.ag-tb-filter-select { flex:1; padding:.35rem .5rem; border:1.5px solid #e8f0f7; border-radius:8px; font-size:.72rem; color:#334e68; background:#fff; outline:none; }

.ag-tb-list { list-style:none; padding:.25rem .625rem .625rem; margin:0; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:.25rem; }
.ag-tb-item { display:flex; align-items:center; gap:.5rem; padding:.5rem .625rem; border-radius:8px; cursor:grab; transition:background .15s; border:1px solid transparent; }
.ag-tb-item:hover { background:#f8fbff; border-color:rgba(0,119,190,.1); }
.ag-tb-item[style*="display:none"] { display:none !important; }
.ag-tb-item__img { width:32px; height:32px; object-fit:cover; border-radius:6px; flex-shrink:0; }
.ag-tb-item__icon { font-size:1.25rem; flex-shrink:0; width:32px; text-align:center; }
.ag-tb-item__info { flex:1; min-width:0; }
.ag-tb-item__info strong { display:block; font-size:.78rem; font-weight:600; color:#001f3f; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ag-tb-item__info em { font-size:.68rem; color:#9fb3c8; font-style:italic; }
.ag-tb-item__add { width:22px; height:22px; border-radius:50%; border:1.5px solid #0077be; background:none; color:#0077be; font-size:.875rem; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .15s; }
.ag-tb-item__add:hover { background:#0077be; color:#fff; }

/* ── Centre (canvas) ── */
.ag-tb-centre { display:flex; flex-direction:column; overflow:hidden; }

.ag-tb-toolbar { display:flex; align-items:center; gap:.875rem; padding:.75rem 1rem; background:#fff; border-bottom:1px solid rgba(0,119,190,.08); flex-shrink:0; flex-wrap:wrap; }
.ag-tb-toolbar__name { border:1.5px solid #e8f0f7; border-radius:8px; padding:.45rem .75rem; font-size:.85rem; color:#001f3f; outline:none; width:160px; }
.ag-tb-toolbar__name:focus { border-color:#0077be; }
.ag-tb-toolbar__vol-label, .ag-tb-toolbar__dim-label { display:flex; align-items:center; gap:.35rem; font-size:.75rem; color:#9fb3c8; white-space:nowrap; }
.ag-tb-toolbar__vol, .ag-tb-toolbar__dim { width:62px; padding:.4rem .5rem; border:1.5px solid #e8f0f7; border-radius:8px; font-size:.82rem; text-align:center; outline:none; color:#001f3f; }
.ag-tb-toolbar__vol:focus, .ag-tb-toolbar__dim:focus { border-color:#0077be; }
.ag-tb-toolbar__actions { margin-left:auto; display:flex; gap:.5rem; }

/* Tank canvas */
.ag-tb-canvas { flex:1; position:relative; overflow:hidden; min-height:400px; }
.ag-tb-canvas__bg { position:absolute; inset:0; }
.ag-tb-canvas__water { position:absolute; inset:0 0 20% 0; background:linear-gradient(180deg,#0a4a6e 0%,#0d6a9a 30%,#0d89c4 70%,#1bacd8 100%); }
.ag-tb-canvas__substrate { position:absolute; bottom:0; left:0; right:0; height:20%; background:linear-gradient(180deg,#8b6914 0%,#6b5010 60%,#4a380b 100%); border-radius:0 0 2px 2px; }
.ag-tb-canvas__bubbles { position:absolute; inset:0; pointer-events:none; }
@keyframes ag-bubble-rise { 0%{transform:translateY(0) scale(1);opacity:.6} 100%{transform:translateY(-100%) scale(.5);opacity:0} }
.ag-tb-bubble { position:absolute; bottom:20%; width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.3); animation:ag-bubble-rise 4s ease-in infinite; }
.ag-tb-bubble:nth-child(1){left:15%;animation-delay:0s;}
.ag-tb-bubble:nth-child(2){left:40%;animation-delay:1.2s;width:4px;height:4px;}
.ag-tb-bubble:nth-child(3){left:65%;animation-delay:2.5s;width:5px;height:5px;}
.ag-tb-bubble:nth-child(4){left:85%;animation-delay:.8s;}

.ag-tb-canvas__drop-hint { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.75rem; color:rgba(255,255,255,.4); font-size:.9rem; pointer-events:none; z-index:1; }
.ag-tb-canvas__drop-hint span { font-size:2.5rem; }

.ag-tb-canvas__items { position:absolute; inset:0; z-index:2; }
.ag-tb-canvas-item { position:absolute; transform:translate(-50%,-50%); cursor:move; text-align:center; user-select:none; }
.ag-tb-canvas-item img { width:48px; height:48px; object-fit:contain; filter:drop-shadow(0 2px 8px rgba(0,0,0,.4)); transition:transform .2s; border-radius:50%; border:2px solid rgba(255,255,255,.6); }
.ag-tb-canvas-item:hover img { transform:scale(1.15); }
.ag-tb-canvas-item__icon { font-size:2rem; display:block; filter:drop-shadow(0 2px 8px rgba(0,0,0,.5)); }
.ag-tb-canvas-item__label { display:block; font-size:.62rem; font-weight:600; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.8); margin-top:.2rem; white-space:nowrap; max-width:80px; overflow:hidden; text-overflow:ellipsis; }
.ag-tb-canvas-item__remove { position:absolute; top:-8px; right:-8px; width:18px; height:18px; border-radius:50%; background:rgba(220,53,69,.9); color:#fff; border:1.5px solid #fff; cursor:pointer; font-size:.7rem; display:none; align-items:center; justify-content:center; line-height:1; }
.ag-tb-canvas-item:hover .ag-tb-canvas-item__remove { display:flex; }

.ag-tb-save-notice { padding:.625rem 1rem; font-size:.82rem; font-weight:500; text-align:center; margin:.5rem 1rem; border-radius:8px; }
.ag-tb-save-notice--ok  { background:rgba(40,167,69,.1); color:#1e7e34; border:1px solid rgba(40,167,69,.25); }
.ag-tb-save-notice--err { background:rgba(220,53,69,.1); color:#b21f2d; border:1px solid rgba(220,53,69,.25); }

/* ── Right panel ── */
.ag-tb-panel { border-left:1px solid rgba(0,119,190,.1); background:#fff; overflow-y:auto; display:flex; flex-direction:column; gap:0; }
.ag-tb-panel__section { padding:1rem 1.125rem; border-bottom:1px solid rgba(0,119,190,.06); }
.ag-tb-panel__title { font-family:'Barlow Condensed',sans-serif; font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#9fb3c8; margin:0 0 .75rem; display:flex; align-items:center; gap:.5rem; }
.ag-tb-panel__empty { font-size:.8rem; color:#d9e2ec; text-align:center; padding:.5rem 0; margin:0; }

/* Stocking meter */
.ag-tb-stock-meter { margin-bottom:.875rem; }
.ag-tb-stock-bar { height:8px; background:#e8f0f7; border-radius:99px; overflow:hidden; margin-bottom:.35rem; }
.ag-tb-stock-bar__fill { height:100%; border-radius:99px; transition:width .4s ease, background .4s; }
.ag-tb-stock-bar__fill--low  { background:#28a745; }
.ag-tb-stock-bar__fill--mid  { background:#ffc107; }
.ag-tb-stock-bar__fill--high { background:#dc3545; }
.ag-tb-stock-labels { display:flex; justify-content:space-between; font-size:.72rem; color:#9fb3c8; }

/* Roster */
.ag-tb-roster { display:flex; flex-direction:column; gap:.25rem; }
.ag-tb-roster-row { display:flex; align-items:center; gap:.5rem; font-size:.78rem; }
.ag-tb-roster-row__icon { font-size:.9rem; }
.ag-tb-roster-row__name { flex:1; color:#334e68; }
.ag-tb-roster-row__count { font-weight:700; color:#0077be; font-size:.72rem; }

/* Param rows */
.ag-tb-param-row { display:flex; align-items:flex-start; gap:.625rem; padding:.4rem 0; border-bottom:1px solid rgba(0,119,190,.05); font-size:.78rem; }
.ag-tb-param-row:last-child { border-bottom:none; }
.ag-tb-param-icon { font-size:.9rem; flex-shrink:0; margin-top:.1rem; }
.ag-tb-param-row strong { display:block; font-weight:600; color:#001f3f; margin-bottom:.1rem; }
.ag-tb-param-row span { color:#627d98; }

/* Compatibility warnings */
.ag-tb-compat-badge { font-size:.62rem; font-weight:700; padding:.1rem .45rem; border-radius:5px; letter-spacing:.04em; margin-left:auto; }
.ag-tb-compat-badge--ok      { background:rgba(40,167,69,.1);  color:#1e7e34; }
.ag-tb-compat-badge--warning { background:rgba(255,193,7,.12); color:#a17800; }
.ag-tb-compat-badge--error   { background:rgba(220,53,69,.1);  color:#b21f2d; }

.ag-tb-warn { display:flex; align-items:flex-start; gap:.5rem; font-size:.78rem; color:#334e68; background:#f8fbff; border-radius:8px; padding:.5rem .625rem; margin-bottom:.35rem; line-height:1.4; }
.ag-tb-warn--error   { background:rgba(220,53,69,.06); border:1px solid rgba(220,53,69,.15); }
.ag-tb-warn--warning { background:rgba(255,193,7,.06); border:1px solid rgba(255,193,7,.2); }
.ag-tb-warn span:first-child { flex-shrink:0; font-size:.875rem; }

/* ============================================================
   EQUIPMENT SINGLE PAGE SPEC GRID  v1.0.9
   ============================================================ */
.ag-eq-page { }
.ag-eq-hero { position:relative; min-height:380px; display:flex; align-items:flex-end; overflow:hidden; }
.ag-eq-hero__bg { position:absolute; inset:0; background-size:cover; background-position:center; filter:blur(2px) brightness(.4); transform:scale(1.05); }
.ag-eq-hero__overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,10,20,.97) 0%,rgba(0,20,40,.7) 50%,rgba(0,50,90,.3) 100%); }
.ag-eq-hero__content { position:relative; z-index:1; width:100%; padding:2rem 0 2.5rem; }
.ag-eq-hero__body { display:grid; grid-template-columns:1fr auto; gap:2rem; align-items:end; }
.ag-eq-hero__badges { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:.75rem; }

.ag-eq-spec-grid { display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid rgba(0,119,190,.1); border-radius:12px; overflow:hidden; }
@media(max-width:640px){ .ag-eq-spec-grid { grid-template-columns:1fr; } }
.ag-eq-spec-row { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.625rem 1rem; border-bottom:1px solid rgba(0,119,190,.06); }
.ag-eq-spec-row:nth-child(odd)  { background:#f8fbff; }
.ag-eq-spec-row:nth-child(even) { background:#fff; }
.ag-eq-spec-row:nth-last-child(-n+2) { border-bottom:none; }
.ag-eq-spec-row dt { display:flex; align-items:center; gap:.4rem; font-size:.8rem; color:#627d98; }
.ag-eq-spec-row dt span { font-size:.9rem; }
.ag-eq-spec-row dd { font-size:.82rem; font-weight:600; color:#001f3f; text-align:right; margin:0; }


/* ============================================================
   SINGLE GUIDE PAGE  v1.0.10
   ============================================================ */

.ag-guide-single { }

/* Guide hero */
.ag-guide-hero { position:relative; min-height:420px; display:flex; align-items:flex-end; overflow:hidden; }
.ag-guide-hero__bg { position:absolute; inset:0; background-size:cover; background-position:center top; filter:brightness(.45); transform:scale(1.04); }
.ag-guide-hero__overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,10,20,.97) 0%,rgba(0,20,50,.7) 55%,rgba(0,50,100,.2) 100%); }
.ag-guide-hero__overlay--solid { background:linear-gradient(160deg,#001f3f,#003d6b); }
.ag-guide-hero__content { position:relative; z-index:1; width:100%; padding:2rem 0 2.5rem; }
.ag-guide-hero__breadcrumb { display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; font-size:.72rem; color:rgba(255,255,255,.45); margin-bottom:1.25rem; }
.ag-guide-hero__breadcrumb a { color:rgba(255,255,255,.55); text-decoration:none; }
.ag-guide-hero__breadcrumb a:hover { color:#fff; }
.ag-guide-hero__badges { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; }
.ag-guide-hero__level-badge { padding:.3rem .875rem; border-radius:99px; font-size:.78rem; font-weight:700; border:1px solid; letter-spacing:.04em; }
.ag-guide-hero__topic-badge { background:rgba(255,255,255,.12); color:rgba(255,255,255,.75); padding:.2rem .65rem; border-radius:6px; font-size:.72rem; border:1px solid rgba(255,255,255,.15); }
.ag-guide-hero__title { font-family:'Barlow Condensed',sans-serif; font-size:3rem; font-weight:900; color:#fff; line-height:1.1; margin:0 0 .75rem; }
@media(max-width:640px) { .ag-guide-hero__title { font-size:2rem; } }
.ag-guide-hero__excerpt { font-size:1rem; color:rgba(255,255,255,.65); margin:0 0 1rem; line-height:1.6; max-width:640px; }
.ag-guide-hero__meta { display:flex; flex-wrap:wrap; gap:1rem; font-size:.78rem; color:rgba(255,255,255,.45); }

/* Layout */
.ag-guide-layout { display:grid; grid-template-columns:1fr 280px; gap:3rem; padding-top:2.5rem; padding-bottom:4rem; align-items:start; }
@media(max-width:900px) { .ag-guide-layout { grid-template-columns:1fr; } }

/* Article */
.ag-guide-article { min-width:0; }
.ag-guide-content { font-size:1.0625rem; line-height:1.8; color:#334e68; }
.ag-guide-content h2 { font-family:'Barlow Condensed',sans-serif; font-size:1.6rem; font-weight:700; color:#001f3f; margin:2.25rem 0 1rem; padding-top:.25rem; }
.ag-guide-content h3 { font-family:'Barlow Condensed',sans-serif; font-size:1.2rem; font-weight:700; color:#001f3f; margin:1.75rem 0 .75rem; }
.ag-guide-content p  { margin-bottom:1.25rem; }
.ag-guide-content ul,.ag-guide-content ol { padding-left:1.5rem; margin-bottom:1.25rem; }
.ag-guide-content li { margin-bottom:.4rem; }
.ag-guide-content img { max-width:100%; border-radius:12px; margin:1.5rem 0; }
.ag-guide-content blockquote { border-left:3px solid #0077be; padding:.75rem 1.25rem; margin:1.5rem 0; background:rgba(0,119,190,.05); border-radius:0 10px 10px 0; font-style:italic; color:#627d98; }
.ag-guide-content code { background:#f0f4f8; padding:.15rem .4rem; border-radius:4px; font-family:monospace; font-size:.88em; }
.ag-guide-content table { width:100%; border-collapse:collapse; margin:1.5rem 0; font-size:.875rem; }
.ag-guide-content th { background:#f8fbff; padding:.75rem 1rem; text-align:left; font-weight:700; color:#334e68; border-bottom:2px solid #d9e2ec; }
.ag-guide-content td { padding:.65rem 1rem; border-bottom:1px solid rgba(0,119,190,.08); }

/* Article footer */
.ag-guide-article__tags { display:flex; flex-wrap:wrap; gap:.4rem; margin:2rem 0 1.5rem; padding-top:1.5rem; border-top:1px solid rgba(0,119,190,.08); }
.ag-guide-article__tag { background:#f0f4f8; color:#627d98; padding:.3rem .875rem; border-radius:99px; font-size:.78rem; text-decoration:none; transition:all .15s; }
.ag-guide-article__tag:hover { background:#0077be; color:#fff; }

.ag-guide-author { display:flex; align-items:center; gap:1rem; background:#f8fbff; border:1px solid rgba(0,119,190,.1); border-radius:14px; padding:1.25rem; margin-top:1.5rem; }
.ag-guide-author__avatar { border-radius:50%; width:60px; height:60px; flex-shrink:0; }
.ag-guide-author__name { display:block; font-weight:700; color:#001f3f; margin-bottom:.25rem; }
.ag-guide-author__bio { font-size:.82rem; color:#627d98; margin:0; line-height:1.5; }

/* Guide sidebar */
.ag-guide-sidebar { display:flex; flex-direction:column; gap:1.25rem; position:sticky; top:80px; }
.ag-guide-sidebar-widget { background:#fff; border:1px solid rgba(0,119,190,.1); border-radius:14px; padding:1.25rem; }
.ag-guide-sidebar-widget__title { font-family:'Barlow Condensed',sans-serif; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#9fb3c8; margin:0 0 .875rem; }
.ag-guide-sidebar-widget__level { display:flex; align-items:center; gap:.875rem; }
.ag-guide-sidebar-widget__level strong { display:block; font-size:.95rem; font-weight:700; color:#001f3f; margin-bottom:.15rem; }
.ag-guide-sidebar-widget__level p { font-size:.78rem; color:#9fb3c8; margin:0; }

/* ToC */
.ag-guide-toc { display:flex; flex-direction:column; gap:.2rem; }
.ag-guide-toc__link { font-size:.82rem; color:#627d98; text-decoration:none; padding:.35rem .75rem; border-radius:8px; border-left:2px solid transparent; transition:all .15s; }
.ag-guide-toc__link:hover { background:rgba(0,119,190,.06); color:#0077be; }
.ag-guide-toc__link.is-active { border-left-color:#0077be; color:#0077be; background:rgba(0,119,190,.05); }
.ag-guide-toc__link--h3 { padding-left:1.5rem; font-size:.78rem; }

/* Share buttons */
.ag-guide-share { display:flex; flex-wrap:wrap; gap:.4rem; }
.ag-guide-share__btn { padding:.45rem .875rem; border-radius:8px; font-size:.78rem; font-weight:600; cursor:pointer; border:none; text-decoration:none; transition:all .15s; display:inline-block; }
.ag-guide-share__btn--twitter { background:#000; color:#fff; }
.ag-guide-share__btn--fb      { background:#1877f2; color:#fff; }
.ag-guide-share__btn--copy    { background:#f0f4f8; color:#334e68; }
.ag-guide-share__btn:hover    { opacity:.85; }

/* Related guides */
.ag-guide-related { display:flex; flex-direction:column; gap:.625rem; }
.ag-guide-related__item { display:flex; align-items:center; gap:.75rem; text-decoration:none; padding:.5rem; border-radius:10px; transition:background .15s; }
.ag-guide-related__item:hover { background:#f8fbff; }
.ag-guide-related__img { width:52px; height:52px; object-fit:cover; border-radius:8px; flex-shrink:0; }
.ag-guide-related__no-img { width:52px; height:52px; background:#f0f4f8; border-radius:8px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:1.25rem; }
.ag-guide-related__level { display:block; font-size:.68rem; color:#9fb3c8; margin-bottom:.1rem; }
.ag-guide-related__item strong { display:block; font-size:.82rem; font-weight:600; color:#001f3f; line-height:1.25; }


/* ============================================================
   FOOTER  v1.1.0
   ============================================================ */
.ag-footer { background:linear-gradient(180deg,#001427 0%,#000d1a 100%); color:rgba(255,255,255,.7); }
.ag-footer__inner { max-width:1200px; margin:0 auto; padding:3.5rem 1.5rem 0; }
.ag-footer__grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,.07); }
@media(max-width:900px){ .ag-footer__grid { grid-template-columns:1fr 1fr; gap:2rem; } }
@media(max-width:600px){ .ag-footer__grid { grid-template-columns:1fr; } }

.ag-footer__logo { display:flex; align-items:center; gap:.625rem; font-family:'Barlow Condensed',sans-serif; font-size:1.5rem; color:#fff; text-decoration:none; margin-bottom:.875rem; }
.ag-footer__logo strong,.ag-footer__logo span strong { color:#20b2aa; }
.ag-footer__logo .custom-logo { max-height:36px; width:auto; filter:brightness(0) invert(1); }
.ag-footer__tagline { font-size:.82rem; line-height:1.65; color:rgba(255,255,255,.45); margin:0 0 1.25rem; max-width:280px; }
.ag-footer__social { display:flex; gap:.625rem; }
.ag-footer__social-link { width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.5); transition:all .2s; text-decoration:none; }
.ag-footer__social-link:hover { background:rgba(255,255,255,.15); color:#fff; }

.ag-footer__heading { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.3); margin:0 0 1rem; }
.ag-footer__links { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.5rem; }
.ag-footer__links a { font-size:.85rem; color:rgba(255,255,255,.5); text-decoration:none; transition:color .15s; }
.ag-footer__links a:hover { color:#fff; }

.ag-footer__bottom { display:flex; align-items:center; justify-content:space-between; padding:1.25rem 0; gap:1rem; flex-wrap:wrap; }
.ag-footer__copy { font-size:.78rem; color:rgba(255,255,255,.3); margin:0; }
.ag-footer__legal-nav { display:flex; gap:1.5rem; }
.ag-footer__legal-nav li { list-style:none; }
.ag-footer__legal-nav a, .ag-footer__legal-nav li a { font-size:.78rem; color:rgba(255,255,255,.3); text-decoration:none; transition:color .15s; }
.ag-footer__legal-nav a:hover, .ag-footer__legal-nav li a:hover { color:#fff; }

/* ============================================================
   SEARCH RESULTS  v1.1.0
   ============================================================ */
.ag-search-result { display:flex; gap:1.25rem; background:#fff; border:1px solid rgba(0,119,190,.1); border-radius:14px; padding:1.25rem; align-items:flex-start; transition:box-shadow .2s; }
.ag-search-result:hover { box-shadow:0 4px 20px rgba(0,31,63,.08); }
.ag-search-result__image { width:80px; height:80px; flex-shrink:0; border-radius:10px; overflow:hidden; }
.ag-search-result__image img { width:100%; height:100%; object-fit:cover; }
.ag-search-result__icon { width:80px; height:80px; flex-shrink:0; border-radius:10px; background:#f0f4f8; display:flex; align-items:center; justify-content:center; font-size:2rem; }
.ag-search-result__type { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#9fb3c8; margin-bottom:.3rem; }
.ag-search-result__title { font-family:'Barlow Condensed',sans-serif; font-size:1.2rem; font-weight:700; color:#001f3f; margin:0 0 .35rem; }
.ag-search-result__title a { color:inherit; text-decoration:none; }
.ag-search-result__title a:hover { color:#0077be; }
.ag-search-result__excerpt { font-size:.85rem; color:#627d98; line-height:1.55; margin:0; }

/* 404 search */
.ag-404-search { display:flex; gap:.5rem; }
.ag-404-search input { flex:1; padding:.75rem 1rem; border:1.5px solid #d9e2ec; border-radius:10px; font-size:.9rem; outline:none; }
.ag-404-search input:focus { border-color:#0077be; }

/* ============================================================
   SELLERS DIRECTORY  v1.1.0
   ============================================================ */
.ag-sellers-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.5rem; }
.ag-seller-card { background:#fff; border:1px solid rgba(0,119,190,.1); border-radius:16px; overflow:hidden; text-decoration:none; display:flex; flex-direction:column; transition:all .2s; }
.ag-seller-card:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,31,63,.1); border-color:#0077be; }
.ag-seller-card__cover { height:90px; overflow:hidden; background:linear-gradient(135deg,#001f3f,#0077be); flex-shrink:0; }
.ag-seller-card__cover img { width:100%; height:100%; object-fit:cover; }
.ag-seller-card__cover-placeholder { width:100%; height:100%; background:linear-gradient(135deg,#001f3f,#003d6b); }
.ag-seller-card__avatar-wrap { position:relative; margin:-28px 0 0 1rem; display:flex; align-items:flex-end; gap:.5rem; }
.ag-seller-card__avatar { width:56px; height:56px; border-radius:50%; border:3px solid #fff; object-fit:cover; box-shadow:0 2px 8px rgba(0,31,63,.15); flex-shrink:0; }
.ag-seller-card__pro-badge { font-size:.62rem; font-weight:700; background:linear-gradient(135deg,#f6c90e,#f09d00); color:#5c3d00; border-radius:6px; padding:.1rem .4rem; margin-bottom:.25rem; }
.ag-seller-card__body { padding:.875rem 1rem 1.25rem; flex:1; }
.ag-seller-card__name-row { display:flex; align-items:center; gap:.5rem; margin-bottom:.2rem; }
.ag-seller-card__name-row strong { font-family:'Barlow Condensed',sans-serif; font-size:1.1rem; font-weight:700; color:#001f3f; }
.ag-seller-card__tagline { font-size:.78rem; color:#627d98; margin:.2rem 0 .5rem; line-height:1.4; }
.ag-seller-card__meta { display:flex; flex-wrap:wrap; gap:.35rem .875rem; font-size:.72rem; color:#9fb3c8; margin-bottom:.3rem; }
.ag-seller-card__spec { font-size:.75rem; color:#627d98; margin:.3rem 0 0; }

/* ============================================================
   PRODUCT CARDS (marketplace / shop)  v1.1.0
   ============================================================ */
.ag-product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1.25rem; }
.ag-product-card { background:#fff; border:1px solid rgba(0,119,190,.1); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; transition:all .2s; }
.ag-product-card:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,31,63,.1); }
.ag-product-card__image { position:relative; aspect-ratio:4/3; overflow:hidden; background:#f0f4f8; }
.ag-product-card__image img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.ag-product-card:hover .ag-product-card__image img { transform:scale(1.05); }
.ag-product-card__no-img { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:2.5rem; color:#d9e2ec; }
.ag-product-card__type-badge { position:absolute; top:.5rem; left:.5rem; background:rgba(0,31,63,.75); color:#fff; font-size:.65rem; font-weight:700; padding:.2rem .5rem; border-radius:6px; }
.ag-product-card__sold-badge { position:absolute; top:.5rem; right:.5rem; background:rgba(220,53,69,.85); color:#fff; font-size:.65rem; font-weight:700; padding:.2rem .5rem; border-radius:6px; }
.ag-product-card__linked { font-size:.72rem; color:#9fb3c8; margin:0 0 .3rem; }
.ag-product-card__linked a { color:#0077be; text-decoration:none; }
.ag-product-card__info { padding:.875rem; flex:1; }
.ag-product-card__title { font-family:'Barlow Condensed',sans-serif; font-size:1.05rem; font-weight:700; margin:0 0 .3rem; line-height:1.2; }
.ag-product-card__title a { color:#001f3f; text-decoration:none; }
.ag-product-card__title a:hover { color:#0077be; }
.ag-product-card__excerpt { font-size:.78rem; color:#9fb3c8; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ag-product-card__footer { padding:.75rem .875rem; border-top:1px solid rgba(0,119,190,.06); display:flex; align-items:center; justify-content:space-between; }
.ag-product-card__price { font-family:'Barlow Condensed',sans-serif; font-size:1.2rem; font-weight:700; color:#0077be; }


/* ============================================================
   HEADER & NAV — Definitive v1.1.1
   Single source of truth. No duplicate blocks above this.
   ============================================================ */

/* Skip link */
.ag-skip-link { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.ag-skip-link:focus { position:fixed; top:1rem; left:1rem; width:auto; height:auto; padding:.75rem 1.5rem; background:#0077be; color:#fff; border-radius:8px; z-index:9999; font-weight:600; }

/* Sticky header shell */
.ag-header { position:sticky; top:0; z-index:200; }

/* Nav bar */
.ag-nav {
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0,119,190,.12);
    transition: box-shadow .25s ease;
}
.ag-nav.is-scrolled { box-shadow: 0 4px 24px rgba(0,31,63,.12); }

/* Inner row */
.ag-nav__inner {
    display: flex;
    align-items: center;
    height: 72px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    gap: 0;
}

/* ── Logo ──────────────────────────────────────────────────────────────────── */
.ag-nav__logo {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: #001f3f;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    margin-right: 2rem;
    line-height: 1;
}
/* SVG mark */
.ag-nav__logo-mark { display: flex; align-items: center; flex-shrink: 0; }
.ag-nav__logo-mark svg { display: block; }
/* Text lockup */
.ag-nav__logo-text { display: flex; align-items: baseline; line-height: 1; }
.ag-nav__logo-aqua  { font-weight: 700; color: #001f3f; }
.ag-nav__logo-guide { font-weight: 900; color: #0077be; }

/* Custom logo image (uploaded via Customizer) */
.ag-nav__logo .custom-logo-link { display: flex; align-items: center; }
.ag-nav__logo .custom-logo { max-height: 44px; width: auto; display: block; }
/* When custom logo is used, hide the SVG + text */
.ag-nav__logo:has(.custom-logo) .ag-nav__logo-mark,
.ag-nav__logo:has(.custom-logo) .ag-nav__logo-text { display: none; }

/* Responsive logo sizing */
@media (max-width: 1024px) {
    .ag-nav__logo .custom-logo { max-height: 34px; }
}

/* ── Desktop menu ──────────────────────────────────────────────────────────── */
.ag-nav__menu {
    display: flex;
    align-items: stretch;
    list-style: none;
    padding: 0; margin: 0;
    flex: 1;
    gap: 0;
}
.ag-nav__item { position: static; display: flex; align-items: stretch; }

/* Menu links and toggle buttons */
.ag-nav__link {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: 0 .875rem;
    height: 72px;
    font-size: .875rem;
    font-weight: 500;
    color: #334e68;
    background: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: color .15s, background .15s;
    position: relative;
}
.ag-nav__link::after {
    content: '';
    position: absolute;
    bottom: 0; left: .875rem; right: .875rem;
    height: 2px;
    background: #0077be;
    transform: scaleX(0);
    transition: transform .2s ease;
    border-radius: 2px 2px 0 0;
}
.ag-nav__link:hover,
.ag-nav__link.is-active,
.current-menu-item > .ag-nav__link { color: #0077be; }
.ag-nav__link:hover::after,
.ag-nav__link.is-active::after,
.current-menu-item > .ag-nav__link::after { transform: scaleX(1); }

.ag-nav__chevron { transition: transform .25s ease; flex-shrink: 0; }
.ag-nav__link--has-dropdown[aria-expanded="true"] .ag-nav__chevron { transform: rotate(180deg); }

/* ── Dropdown sub-menu ─────────────────────────────────────────────────────── */
.ag-nav__item--has-dropdown { position: relative; }

.ag-dropdown {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    min-width: 220px;
    background: #fff;
    border: 1px solid rgba(0,119,190,.12);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,31,63,.14);
    z-index: 198;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-6px);
    transition: opacity .2s, transform .2s, visibility .2s;
}
.ag-nav__item--has-dropdown:hover .ag-dropdown,
.ag-dropdown.is-open {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
.ag-dropdown__list { list-style: none; padding: .4rem; margin: 0; }
.ag-dropdown__item { }
.ag-dropdown__link {
    display: flex; flex-direction: column; gap: .1rem;
    padding: .55rem .875rem; border-radius: 8px;
    font-size: .875rem; color: #334e68; text-decoration: none;
    transition: background .15s, color .15s;
}
.ag-dropdown__link:hover { background: rgba(0,119,190,.06); color: #0077be; }
.ag-dropdown__link em { font-size: .72rem; color: #9fb3c8; font-style: normal; }

/* ── Header actions ────────────────────────────────────────────────────────── */
.ag-nav__actions { display: flex; align-items: center; gap: .625rem; margin-left: auto; flex-shrink: 0; }
.ag-nav__cta-desktop { }

/* Icon buttons (search, avatar) */
.ag-nav__icon-btn {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    border: none; background: none; cursor: pointer;
    color: #627d98;
    transition: background .15s, color .15s;
}
.ag-nav__icon-btn:hover { background: rgba(0,119,190,.08); color: #0077be; }
.ag-nav__icon-btn--avatar { padding: 0; border: 2px solid rgba(0,119,190,.15); }
.ag-nav__avatar-img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; display: block; }

/* Burger */
.ag-nav__burger {
    display: none;
    flex-direction: column; justify-content: center;
    gap: 5px; width: 36px; height: 36px;
    border: none; background: none; cursor: pointer; padding: 4px;
}
.ag-burger__line {
    display: block; width: 100%; height: 2px;
    background: #334e68; border-radius: 2px;
    transition: all .25s ease;
}

/* ── Search bar (slides under nav) ────────────────────────────────────────── */
.ag-nav__search-bar {
    background: #fff;
    border-top: 1px solid rgba(0,119,190,.08);
    border-bottom: 1px solid rgba(0,119,190,.1);
}
.ag-nav__search-form {
    display: flex; align-items: center; gap: .75rem;
    max-width: 1200px; margin: 0 auto; padding: .75rem 1.5rem;
}
.ag-nav__search-form svg { color: #9fb3c8; flex-shrink: 0; }
.ag-nav__search-form input {
    flex: 1; border: none; background: none;
    font-size: 1rem; color: #001f3f; outline: none;
    min-width: 0;
}
.ag-nav__search-form input::placeholder { color: #b0c4d8; }

@media (max-width: 1024px) {
    .ag-nav__search-bar { padding: 0; }
    .ag-nav__search-form {
        padding: .625rem 1rem;
        gap: .5rem;
        width: 100%;
        box-sizing: border-box;
    }
    .ag-nav__search-form .ag-btn { flex-shrink: 0; white-space: nowrap; }
}

/* ── Mobile drawer ─────────────────────────────────────────────────────────── */
.ag-mobile-drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 100vw;
    background: #fff;
    z-index: 300;
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    box-shadow: -4px 0 24px rgba(0,31,63,.15);
}
.ag-mobile-drawer[aria-hidden="false"] { transform: translateX(0); }

.ag-mobile-drawer__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 1.25rem;
    height: 72px;
    border-bottom: 1px solid rgba(0,119,190,.08);
    flex-shrink: 0;
}
.ag-mobile-drawer__close {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    border: none; background: rgba(0,0,0,.04); cursor: pointer;
    color: #334e68;
}

.ag-mobile-drawer__body { flex: 1; overflow-y: auto; padding: .5rem 0; }
.ag-mobile-drawer__footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid rgba(0,119,190,.08);
    display: flex; flex-direction: column; gap: .625rem;
    flex-shrink: 0;
}

/* Mobile nav list */
.ag-mobile-nav { list-style: none; padding: 0; margin: 0; }
.ag-mobile-nav__item { border-bottom: 1px solid rgba(0,119,190,.05); }
.ag-mobile-nav__link {
    display: flex; align-items: center;
    padding: .9375rem 1.25rem;
    font-size: .9375rem; font-weight: 500; color: #001f3f;
    text-decoration: none; transition: color .15s, background .15s;
}
.ag-mobile-nav__link:hover, .ag-mobile-nav__link.is-current { color: #0077be; background: rgba(0,119,190,.03); }
.ag-mobile-nav__toggle {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    padding: .9375rem 1.25rem;
    font-size: .9375rem; font-weight: 500; color: #001f3f;
    background: none; border: none; cursor: pointer; text-align: left;
}
.ag-mobile-nav__toggle svg { transition: transform .25s ease; color: #9fb3c8; flex-shrink: 0; }
.ag-mobile-nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.ag-mobile-nav__sub { list-style: none; padding: 0; margin: 0; display: none; background: rgba(0,119,190,.02); }
.ag-mobile-nav__sub.is-open { display: block; }
.ag-mobile-nav__sub-link {
    display: block; padding: .7rem 1.25rem .7rem 2rem;
    font-size: .875rem; color: #627d98; text-decoration: none; transition: color .15s;
}
.ag-mobile-nav__sub-link:hover { color: #0077be; }

/* Overlay */
.ag-overlay {
    position: fixed; inset: 0; background: rgba(0,15,30,.5);
    z-index: 299; opacity: 0; visibility: hidden;
    transition: opacity .3s, visibility .3s;
}
.ag-overlay.is-visible { opacity: 1; visibility: visible; }

/* ── Responsive breakpoints ────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .ag-nav__menu,
    .ag-nav__cta-desktop { display: none; }
    .ag-nav__burger { display: flex; }
    .ag-nav__inner { justify-content: space-between; }
    .ag-nav__logo { margin-right: 0; }
    .ag-nav__actions { gap: .5rem; }
}
@media (min-width: 1025px) {
    .ag-nav__burger { display: none; }
    .ag-mobile-drawer { display: none !important; }
    .ag-overlay { display: none !important; }
}

/* Auth page: hide header/footer */
body:has(.ag-auth-page) .ag-header,
body:has(.ag-auth-page) .ag-footer { display: none; }


/* ============================================================
   MY TANKS — edit/delete  v1.1.1
   ============================================================ */
.ag-tanks-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1.25rem; }

.ag-tank-card__title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:.5rem; margin-bottom:.4rem; }
.ag-tank-card__title { font-family:'Barlow Condensed',sans-serif; font-size:1.15rem; font-weight:700; color:#001f3f; margin:0; }
.ag-tank-card__stats { display:flex; flex-wrap:wrap; gap:.35rem .875rem; font-size:.78rem; color:#9fb3c8; }
.ag-tank-card__date  { font-size:.72rem; color:#d9e2ec; margin:.35rem 0 0; }

/* 3-dot menu */
.ag-tank-card__menu { position:relative; flex-shrink:0; }
.ag-tank-card__menu-btn {
    display:flex; align-items:center; justify-content:center;
    width:28px; height:28px; border-radius:50%;
    border:none; background:none; cursor:pointer; color:#9fb3c8;
    transition:background .15s, color .15s;
}
.ag-tank-card__menu-btn:hover { background:rgba(0,119,190,.08); color:#334e68; }
.ag-tank-card__dropdown {
    position:absolute; right:0; top:calc(100% + 4px);
    background:#fff; border:1px solid rgba(0,119,190,.12);
    border-radius:10px; box-shadow:0 8px 24px rgba(0,31,63,.12);
    min-width:160px; z-index:50; overflow:hidden;
}
.ag-tank-card__dropdown-item {
    display:flex; align-items:center; gap:.6rem;
    width:100%; padding:.625rem .875rem;
    font-size:.85rem; color:#334e68;
    background:none; border:none; cursor:pointer;
    text-decoration:none; transition:background .15s;
    text-align:left;
}
.ag-tank-card__dropdown-item:hover { background:rgba(0,119,190,.06); color:#0077be; }
.ag-tank-card__dropdown-item--delete:hover { background:rgba(220,53,69,.06); color:#dc3545; }

/* Preview hover hint */
.ag-tank-card__preview { cursor:pointer; }
.ag-tank-card__overlay-hint {
    position:absolute; inset:0; background:rgba(0,10,20,.55);
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:.85rem; font-weight:600; letter-spacing:.03em;
    opacity:0; transition:opacity .2s;
    border-radius:inherit;
}
.ag-tank-card__preview:hover .ag-tank-card__overlay-hint { opacity:1; }
.ag-tank-card__preview { position:relative; }


/* ============================================================
   FAQ PAGE  v1.1.1
   ============================================================ */
.ag-faq-hero { background:linear-gradient(135deg,#001f3f 0%,#003d6b 60%,#20b2aa 100%); padding:4rem 0 3rem; color:#fff; }
.ag-faq-hero__title { font-family:'Barlow Condensed',sans-serif; font-size:3.5rem; font-weight:900; color:#fff; margin:.5rem 0 .75rem; }
.ag-faq-hero__sub { color:rgba(255,255,255,.65); font-size:1rem; margin:0 0 1.75rem; }
.ag-faq-search-wrap { display:flex; align-items:center; gap:.75rem; background:rgba(255,255,255,.15); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.25); border-radius:12px; padding:.75rem 1.25rem; max-width:480px; }
.ag-faq-search-wrap svg { color:rgba(255,255,255,.6); flex-shrink:0; }
#ag-faq-search { border:none; background:none; color:#fff; font-size:1rem; outline:none; flex:1; }
#ag-faq-search::placeholder { color:rgba(255,255,255,.5); }

.ag-faq-page { padding:2.5rem 0 5rem; }

.ag-faq-tabs { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2.5rem; }
.ag-faq-tab { padding:.55rem 1.125rem; border-radius:99px; font-size:.82rem; font-weight:500; border:1.5px solid #d9e2ec; background:#fff; color:#627d98; cursor:pointer; transition:all .15s; }
.ag-faq-tab:hover { border-color:#0077be; color:#0077be; }
.ag-faq-tab.is-active { background:#0077be; border-color:#0077be; color:#fff; }

.ag-faq-group__title { font-family:'Barlow Condensed',sans-serif; font-size:1.5rem; font-weight:700; color:#001f3f; margin:2rem 0 1rem; padding-bottom:.625rem; border-bottom:2px solid rgba(0,119,190,.1); }

.ag-faq-item { border:1px solid rgba(0,119,190,.1); border-radius:12px; margin-bottom:.625rem; overflow:hidden; background:#fff; transition:box-shadow .2s; }
.ag-faq-item:has([aria-expanded="true"]) { box-shadow:0 4px 16px rgba(0,119,190,.1); border-color:rgba(0,119,190,.25); }
.ag-faq-item__question { display:flex; align-items:center; justify-content:space-between; width:100%; gap:1rem; padding:1.125rem 1.25rem; font-size:.9375rem; font-weight:600; color:#001f3f; background:none; border:none; cursor:pointer; text-align:left; transition:background .15s; }
.ag-faq-item__question:hover { background:#f8fbff; }
.ag-faq-item__chevron { flex-shrink:0; transition:transform .25s ease; color:#9fb3c8; }
.ag-faq-item__question[aria-expanded="true"] .ag-faq-item__chevron { transform:rotate(180deg); color:#0077be; }
.ag-faq-item__answer { padding:0 1.25rem 1.25rem; }
.ag-faq-item__answer p { font-size:.9rem; line-height:1.75; color:#334e68; margin:0; }
.ag-faq-item__answer a { color:#0077be; text-decoration:underline; }
.ag-faq-item__answer a:hover { color:#005c94; }

.ag-faq-cta { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; background:linear-gradient(135deg,#001f3f,#003d6b); border-radius:16px; padding:2rem 2.5rem; margin-top:3rem; flex-wrap:wrap; }
.ag-faq-cta h3 { font-family:'Barlow Condensed',sans-serif; font-size:1.75rem; font-weight:700; color:#fff; margin:0 0 .3rem; }
.ag-faq-cta p { color:rgba(255,255,255,.6); font-size:.9rem; margin:0; }
.ag-faq-cta__btns { display:flex; gap:.75rem; flex-wrap:wrap; }

/* ============================================================
   HOMEPAGE FISH SECTIONS  v1.1.1
   ============================================================ */
.ag-fish-showcase__head { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; margin-bottom:1.75rem; flex-wrap:wrap; }
.ag-fish-showcase__title { font-family:'Barlow Condensed',sans-serif; font-size:2rem; font-weight:700; color:#001f3f; margin:0 0 .3rem; }
.ag-fish-showcase__sub { color:#627d98; font-size:.875rem; margin:0; }
.ag-db-grid--5col { grid-template-columns:repeat(5,1fr) !important; }
@media(max-width:1024px){ .ag-db-grid--5col { grid-template-columns:repeat(4,1fr) !important; } }
@media(max-width:768px) { .ag-db-grid--5col { grid-template-columns:repeat(2,1fr) !important; } }
@media(max-width:480px) { .ag-db-grid--5col { grid-template-columns:repeat(2,1fr) !important; } }

/* ── Tools strip ── */
.ag-tools-strip { display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; }
@media(max-width:900px){ .ag-tools-strip { grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ .ag-tools-strip { grid-template-columns:1fr; } }
.ag-tool-strip-card { background:#fff; border:1px solid rgba(0,119,190,.1); border-radius:14px; padding:1.5rem 1.25rem; text-align:center; display:flex; flex-direction:column; align-items:center; gap:.625rem; transition:all .2s; }
.ag-tool-strip-card:hover { border-color:#0077be; transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,119,190,.1); }
.ag-tool-strip-card__icon { font-size:2rem; }
.ag-tool-strip-card__title { font-family:'Barlow Condensed',sans-serif; font-size:1rem; font-weight:700; color:#001f3f; margin:0; }
.ag-tool-strip-card__desc { font-size:.78rem; color:#9fb3c8; line-height:1.5; margin:0; flex:1; }

/* ── Guide cards on homepage ── */
.ag-home-guides { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
@media(max-width:768px){ .ag-home-guides { grid-template-columns:1fr; } }
.ag-home-guides__col { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:1.25rem; display:flex; flex-direction:column; gap:.625rem; }
.ag-home-guide-card { display:flex; align-items:center; gap:.75rem; padding:.625rem; border-radius:10px; background:rgba(255,255,255,.06); text-decoration:none; transition:background .15s; }
.ag-home-guide-card:hover { background:rgba(255,255,255,.12); }
.ag-home-guide-card__img { width:52px; height:52px; object-fit:cover; border-radius:8px; flex-shrink:0; }
.ag-home-guide-card__title { font-size:.82rem; font-weight:600; color:#fff; line-height:1.3; }
.ag-home-guide-card__time { font-size:.72rem; color:rgba(255,255,255,.4); margin:.15rem 0 0; }
.ag-home-guide-all { font-size:.8rem; font-weight:600; text-decoration:none; margin-top:.5rem; display:inline-block; }
.ag-home-guide-all:hover { text-decoration:underline; }

/* ── Diseases single page ── */
.ag-disease-badge { display:inline-flex; align-items:center; gap:.35rem; padding:.3rem .875rem; border-radius:99px; font-size:.78rem; font-weight:600; }
.ag-disease-badge--Bacterial  { background:rgba(220,53,69,.1);  color:#dc3545; border:1px solid rgba(220,53,69,.25); }
.ag-disease-badge--Parasitic  { background:rgba(255,193,7,.1);  color:#a17800; border:1px solid rgba(255,193,7,.25); }
.ag-disease-badge--Fungal     { background:rgba(108,117,125,.1);color:#495057; border:1px solid rgba(108,117,125,.25); }
.ag-disease-badge--Viral      { background:rgba(111,66,193,.1); color:#6f42c1; border:1px solid rgba(111,66,193,.25); }
.ag-disease-badge--Environmental { background:rgba(32,178,170,.1);color:#178f89; border:1px solid rgba(32,178,170,.25); }

/* ============================================================
   CATEGORY HERO PANELS
   ============================================================ */
.ag-cat-panels {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    min-height: 420px;
}
.ag-cat-panel {
    position: relative;
    display: flex;
    align-items: flex-end;
    text-decoration: none;
    overflow: hidden;
    background: #001f3f;
    background-size: cover;
    background-position: center;
    transition: flex .4s cubic-bezier(.4,0,.2,1);
    min-height: 400px;
}
.ag-cat-panel:hover { flex: 1.5; }
.ag-cat-panel__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.2) 55%, transparent 100%);
    transition: background .35s;
}
.ag-cat-panel:hover .ag-cat-panel__overlay {
    background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.1) 100%);
}
.ag-cat-panel__inner {
    position: relative;
    z-index: 1;
    padding: 2rem 1.5rem;
    width: 100%;
}
.ag-cat-panel__emoji {
    display: block;
    font-size: 2.2rem;
    margin-bottom: .6rem;
    transition: transform .3s;
}
.ag-cat-panel:hover .ag-cat-panel__emoji { transform: scale(1.15); }
.ag-cat-panel__label {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255,255,255,.6);
    margin-bottom: .35rem;
}
.ag-cat-panel__title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.65rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 .5rem;
    line-height: 1.15;
    text-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.ag-cat-panel__text {
    font-size: .82rem;
    color: rgba(255,255,255,.75);
    margin: 0 0 1rem;
    line-height: 1.5;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .35s ease, opacity .35s ease;
}
.ag-cat-panel:hover .ag-cat-panel__text {
    max-height: 80px;
    opacity: 1;
}
.ag-cat-panel__cta {
    display: inline-flex;
    align-items: center;
    font-size: .82rem;
    font-weight: 700;
    color: #fff;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 999px;
    padding: .38rem 1rem;
    backdrop-filter: blur(4px);
    transition: background .2s, border-color .2s;
    white-space: nowrap;
}
.ag-cat-panel:hover .ag-cat-panel__cta {
    background: rgba(255,255,255,.28);
    border-color: rgba(255,255,255,.55);
}

/* Tablet: 2×2 grid */
@media (max-width: 900px) {
    .ag-cat-panels {
        grid-template-columns: repeat(2, 1fr);
        min-height: 0;
    }
    .ag-cat-panel {
        min-height: 260px;
        transition: none;
    }
    .ag-cat-panel:hover { flex: 1; }
    .ag-cat-panel__text { max-height: 60px; opacity: 1; }
}

/* Mobile: stacked */
@media (max-width: 540px) {
    .ag-cat-panels { grid-template-columns: 1fr; }
    .ag-cat-panel { min-height: 200px; }
    .ag-cat-panel__title { font-size: 1.35rem; }
    .ag-cat-panel__text { max-height: none; opacity: 1; }
}


/* ============================================================
   TOP PICKS / MARKETPLACE SECTION
   ============================================================ */
.ag-top-picks {
    padding: 3.5rem 0 4rem;
    background: #f8fbff;
}
.ag-top-picks__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.ag-top-picks__title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: #001f3f;
    margin: .25rem 0 .35rem;
    line-height: 1.1;
}
.ag-top-picks__sub { color: #627d98; font-size: .9rem; margin: 0; }
.ag-top-picks__head-actions { display: flex; gap: .75rem; flex-shrink: 0; }
.ag-top-picks__footer { text-align: center; margin-top: 2.5rem; }

/* Filter tabs */
.ag-top-picks__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: 1.5rem;
}
.ag-picks-tab {
    padding: .35rem .9rem;
    font-size: .8rem;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid rgba(0,119,190,.2);
    background: #fff;
    color: #334e68;
    cursor: pointer;
    transition: all .2s;
}
.ag-picks-tab:hover { border-color: #0077be; color: #0077be; }
.ag-picks-tab.is-active { background: #0077be; color: #fff; border-color: #0077be; }

/* Grid */
.ag-picks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.25rem;
}

/* Pick card */
.ag-pick-card {
    background: #fff;
    border: 1px solid rgba(0,119,190,.1);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .2s, box-shadow .2s;
}
.ag-pick-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0,31,63,.12);
}
.ag-pick-card__img-wrap {
    position: relative;
    aspect-ratio: 4/3;
    background: #e8f4ff;
    overflow: hidden;
}
.ag-pick-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ag-pick-card__no-img {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem; color: #aac8e0;
}
.ag-pick-card__sold {
    position: absolute; top: .5rem; left: .5rem;
    background: rgba(220,53,69,.85); color: #fff;
    font-size: .65rem; font-weight: 700; padding: .15rem .5rem;
    border-radius: 4px; text-transform: uppercase; letter-spacing: .04em;
}
.ag-pick-card__type {
    position: absolute; top: .5rem; right: 2.6rem;
    background: rgba(0,31,63,.75); color: #fff;
    font-size: .65rem; font-weight: 700; padding: .15rem .5rem;
    border-radius: 4px; backdrop-filter: blur(4px);
}
.ag-pick-card__actions {
    position: absolute; top: .5rem; right: .5rem;
    display: flex; flex-direction: column; gap: .35rem;
    opacity: 0; transition: opacity .2s;
}
.ag-pick-card:hover .ag-pick-card__actions { opacity: 1; }
.ag-pick-action {
    width: 30px; height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.9);
    color: #334e68;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .15s, color .15s;
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.ag-pick-action:hover { background: #fff; }
.ag-pick-save.is-saved { color: #e53e3e; }
.ag-pick-save:hover { color: #e53e3e; }
.ag-pick-compare.is-comparing { color: #0077be; background: #e8f4ff; }
.ag-pick-compare:hover { color: #0077be; }
.ag-pick-action:disabled { opacity: .35; cursor: not-allowed; }

.ag-pick-card__body { padding: .85rem 1rem 1rem; flex: 1; display: flex; flex-direction: column; }
.ag-pick-card__seller { font-size: .72rem; color: #627d98; margin: 0 0 .25rem; }
.ag-pick-card__title {
    font-size: .92rem; font-weight: 600; color: #001f3f;
    margin: 0 0 auto; line-height: 1.3;
}
.ag-pick-card__title a { color: inherit; text-decoration: none; }
.ag-pick-card__title a:hover { color: #0077be; }
.ag-pick-card__footer {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: .75rem; flex-wrap: wrap; gap: .4rem;
}
.ag-pick-card__price { font-weight: 700; color: #0077be; font-size: .95rem; }
.ag-pick-card__oos { font-size: .75rem; color: #9ba3af; }

@media (max-width: 640px) {
    .ag-picks-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
    .ag-pick-card__actions { opacity: 1; }
    .ag-top-picks__head-actions { display: none; }
}
@media (max-width: 400px) {
    .ag-picks-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   COMPARE TRAY
   ============================================================ */
.ag-compare-tray {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 300;
    background: #001f3f;
    border-top: 2px solid #0077be;
    box-shadow: 0 -4px 24px rgba(0,31,63,.3);
    padding: .75rem 1.5rem;
    animation: slideUp .25s ease;
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: none; } }
.ag-compare-tray__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.ag-compare-tray__label {
    color: rgba(255,255,255,.7);
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
}
.ag-compare-tray__items { display: flex; gap: .75rem; flex: 1; flex-wrap: wrap; }
.ag-compare-tray__item {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 8px;
    padding: .35rem .75rem .35rem .5rem;
    font-size: .8rem;
    color: #e8f4ff;
}
.ag-compare-tray__item img,
.ag-compare-tray__no-img {
    width: 30px; height: 30px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}
.ag-compare-tray__item-title {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ag-compare-tray__remove {
    background: none; border: none;
    color: rgba(255,255,255,.5);
    cursor: pointer; font-size: 1rem; line-height: 1;
    padding: 0; margin-left: .25rem;
    transition: color .15s;
}
.ag-compare-tray__remove:hover { color: #fff; }
.ag-compare-tray__actions { display: flex; gap: .5rem; flex-shrink: 0; }


/* ============================================================
   COMPARE MODAL
   ============================================================ */
.ag-compare-modal {
    position: fixed; inset: 0;
    z-index: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.ag-compare-modal__bd {
    position: absolute; inset: 0;
    background: rgba(0,15,30,.8);
    backdrop-filter: blur(6px);
}
.ag-compare-modal__box {
    position: relative;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0,31,63,.25);
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}
.ag-compare-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(0,119,190,.12);
}
.ag-compare-modal__head h2 {
    font-size: 1.05rem; font-weight: 800; color: #001f3f; margin: 0;
}
.ag-compare-modal__close {
    background: none; border: none;
    font-size: 1.5rem; color: #627d98;
    cursor: pointer; line-height: 1;
    transition: color .15s;
}
.ag-compare-modal__close:hover { color: #001f3f; }
.ag-compare-modal__body { padding: 1.5rem; }
.ag-compare-cols {
    display: grid;
    gap: 1.25rem;
}
.ag-compare-col { }
.ag-compare-col__img {
    aspect-ratio: 4/3;
    background: #e8f4ff;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: .75rem;
}
.ag-compare-col__img img { width: 100%; height: 100%; object-fit: cover; }
.ag-compare-col__no-img {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem; color: #aac8e0;
}
.ag-compare-col__title {
    font-size: .95rem; font-weight: 700; color: #001f3f; margin: 0 0 .4rem;
    line-height: 1.3;
}
.ag-compare-col__title a { color: inherit; text-decoration: none; }
.ag-compare-col__title a:hover { color: #0077be; }
.ag-compare-col__price { font-size: 1rem; font-weight: 700; color: #0077be; }

@media (max-width: 600px) {
    .ag-compare-tray__item-title { max-width: 80px; }
    .ag-compare-tray__label { display: none; }
}


/* ============================================================
   NAV IMPROVEMENTS — Complete Aquatics inspired
   - Darker, richer bar with full-width mega dropdown
   - Accent underline on hover/active
   - Category icon pills in mega menu
   ============================================================ */

/* Override the light nav to a deep ocean theme */
.ag-nav {
    background: #001f3f !important;
    border-bottom: 1px solid rgba(0,119,190,.25) !important;
}
.ag-nav.is-scrolled {
    box-shadow: 0 4px 24px rgba(0,0,0,.35) !important;
}

/* Logo text colours on dark bg */
.ag-nav__logo-aqua  { color: #e0f0ff !important; }
.ag-nav__logo-guide { color: #00b4d8 !important; }

/* Nav links */
.ag-nav__link {
    color: rgba(255,255,255,.78) !important;
    font-weight: 600 !important;
    font-size: .84rem !important;
    letter-spacing: .01em;
}
.ag-nav__link::after { background: #00b4d8 !important; }
.ag-nav__link:hover,
.ag-nav__link.is-active,
.current-menu-item > .ag-nav__link { color: #00b4d8 !important; }

/* Nav icons */
.ag-nav__icon-btn { color: rgba(255,255,255,.7) !important; }
.ag-nav__icon-btn:hover { color: #fff !important; }

/* Desktop dropdown — full-width mega style */
.ag-dropdown {
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 520px;
    background: #001529 !important;
    border: 1px solid rgba(0,180,216,.18) !important;
    box-shadow: 0 16px 48px rgba(0,0,0,.5) !important;
    padding: 1rem !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(150px,1fr));
}
.ag-nav__item--has-dropdown:hover .ag-dropdown,
.ag-nav__link--has-dropdown[aria-expanded="true"] + .ag-dropdown {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.ag-dropdown__list { display: contents; }
.ag-dropdown__item { list-style: none; }
.ag-dropdown__link {
    display: flex !important;
    flex-direction: column;
    gap: .2rem;
    padding: .75rem 1rem !important;
    border-radius: 8px;
    color: rgba(224,244,255,.8) !important;
    font-size: .83rem !important;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s, color .15s;
    line-height: 1.3;
}
.ag-dropdown__link:hover {
    background: rgba(0,180,216,.12);
    color: #00b4d8 !important;
}
.ag-dropdown__link em {
    font-style: normal;
    font-size: .72rem;
    color: rgba(224,244,255,.45);
    display: block;
}

/* Search bar on dark nav */
.ag-nav__search-bar {
    background: #001529 !important;
    border-top: 1px solid rgba(0,180,216,.15) !important;
}
.ag-nav__search-form input {
    background: rgba(255,255,255,.07) !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    color: #e0f4ff !important;
}
.ag-nav__search-form input::placeholder { color: rgba(255,255,255,.35) !important; }
.ag-nav__search-form svg { color: rgba(255,255,255,.4) !important; }

/* Mobile drawer — keep dark */
.ag-mobile-drawer {
    background: #001529 !important;
}
.ag-mobile-nav__link,
.ag-mobile-nav__toggle { color: rgba(255,255,255,.85) !important; }
.ag-mobile-nav__link:hover,
.ag-mobile-nav__toggle:hover { color: #00b4d8 !important; }
.ag-mobile-nav__sub-link { color: rgba(255,255,255,.6) !important; }
.ag-mobile-nav__sub-link:hover { color: #00b4d8 !important; }
.ag-mobile-drawer__header { border-bottom: 1px solid rgba(255,255,255,.08) !important; }
.ag-mobile-drawer__close { color: rgba(255,255,255,.6) !important; }

/* Ensure auth page doesn't override new nav colour */
body:has(.ag-auth-page) .ag-header .ag-nav { background: #001f3f !important; }


/* ============================================================
   HUB HERO (Fish / Plants / Equipment)
   ============================================================ */
.ag-hub-hero {
    padding: 3rem 0 2.5rem;
    position: relative;
    overflow: hidden;
}
.ag-hub-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='1' fill='rgba(255,255,255,.06)'/%3E%3C/svg%3E");
}
.ag-hub-hero .container { position: relative; z-index: 1; }
.ag-hub-hero__label {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(255,255,255,.55);
    margin-bottom: .5rem;
}
.ag-hub-hero__title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 900;
    color: #fff;
    margin: 0 0 .5rem;
    line-height: 1.1;
    text-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.ag-hub-hero__sub {
    color: rgba(255,255,255,.7);
    font-size: 1rem;
    margin: 0 0 1.5rem;
}
.ag-hub-hero__search {
    position: relative;
    max-width: 480px;
    display: flex;
    align-items: center;
}
.ag-hub-hero__search > svg {
    position: absolute;
    left: 14px;
    color: rgba(255,255,255,.5);
    pointer-events: none;
    flex-shrink: 0;
}
.ag-hub-hero__search-input {
    width: 100%;
    padding: .75rem 2.5rem .75rem 2.8rem;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 999px;
    color: #fff;
    font-size: .95rem;
    outline: none;
    transition: background .2s, border-color .2s;
    backdrop-filter: blur(8px);
}
.ag-hub-hero__search-input::placeholder { color: rgba(255,255,255,.45); }
.ag-hub-hero__search-input:focus {
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.5);
}
.ag-hub-hero__search > button[hidden] { display: none; }
.ag-hub-hero__search > button {
    position: absolute; right: 12px;
    background: none; border: none;
    color: rgba(255,255,255,.6); cursor: pointer;
    font-size: 1.1rem; line-height: 1;
}

/* ── Hub tab bar ─────────────────────────────────────────────────────────────── */
.ag-hub-tabs-bar {
    background: rgba(0,15,30,.95);
    border-bottom: 1px solid rgba(255,255,255,.07);
    position: sticky;
    top: 72px;
    z-index: 100;
    backdrop-filter: blur(12px);
}
.ag-hub-tabs {
    display: flex;
    align-items: center;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 .25rem;
}
.ag-hub-tabs::-webkit-scrollbar { display: none; }
.ag-hub-tab {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .85rem 1rem;
    font-size: .82rem;
    font-weight: 600;
    color: rgba(255,255,255,.55);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
    position: relative;
}
.ag-hub-tab:hover { color: rgba(255,255,255,.9); }
.ag-hub-tab.is-active {
    color: #fff;
    border-bottom-color: var(--hub-accent, #00b4d8);
}
.ag-hub-tab__count {
    background: rgba(255,255,255,.12);
    border-radius: 999px;
    padding: .1rem .45rem;
    font-size: .68rem;
    font-weight: 700;
}
.ag-hub-tab.is-active .ag-hub-tab__count {
    background: var(--hub-accent, #00b4d8);
    color: #001f3f;
}

/* ── Hub layout (sidebar + main) ─────────────────────────────────────────────── */
.ag-hub-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 2rem;
    padding-top: 2rem;
    padding-bottom: 4rem;
    align-items: start;
}

/* ── Hub sidebar ─────────────────────────────────────────────────────────────── */
.ag-hub-sidebar {
    position: sticky;
    top: calc(72px + 44px + 1rem); /* header + tab bar + gap */
    background: #fff;
    border: 1px solid rgba(0,119,190,.1);
    border-radius: 12px;
    overflow: hidden;
}
.ag-hub-sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .85rem 1rem;
    border-bottom: 1px solid rgba(0,119,190,.08);
    background: #f8fbff;
}
.ag-hub-sidebar__header h3 {
    font-size: .85rem;
    font-weight: 700;
    color: #001f3f;
    margin: 0;
}
.ag-hub-sidebar__clear {
    background: none;
    border: none;
    font-size: .72rem;
    color: #0077be;
    cursor: pointer;
    font-weight: 600;
    padding: 0;
    transition: color .15s;
}
.ag-hub-sidebar__clear:hover { color: #e53e3e; }

.ag-hub-filter-group {
    border-bottom: 1px solid rgba(0,119,190,.08);
}
.ag-hub-filter-group:last-child { border-bottom: none; }

.ag-hub-filter-group__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1rem;
    background: none;
    border: none;
    font-size: .82rem;
    font-weight: 600;
    color: #334e68;
    cursor: pointer;
    text-align: left;
    transition: background .15s;
}
.ag-hub-filter-group__toggle:hover { background: #f0f4f8; }
.ag-hub-chevron { margin-left: auto; transition: transform .2s; flex-shrink: 0; }

.ag-hub-filter-group__body { padding: .25rem .75rem .75rem; }

.ag-hub-check {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .25rem;
    cursor: pointer;
    border-radius: 6px;
    transition: background .12s;
}
.ag-hub-check:hover { background: #f0f4f8; }
.ag-hub-check.is-checked { background: #e8f4ff; }
.ag-hub-check__box {
    width: 16px; height: 16px;
    border-radius: 4px;
    border: 2px solid #c0d4e8;
    flex-shrink: 0;
    background: #fff;
    position: relative;
    transition: border-color .15s, background .15s;
}
.ag-hub-check.is-checked .ag-hub-check__box {
    background: #0077be;
    border-color: #0077be;
}
.ag-hub-check.is-checked .ag-hub-check__box::after {
    content: '';
    position: absolute;
    left: 3px; top: 1px;
    width: 6px; height: 9px;
    border: 2px solid #fff;
    border-top: none; border-left: none;
    transform: rotate(45deg);
}
.ag-hub-check input { position: absolute; opacity: 0; pointer-events: none; }
.ag-hub-check__label { flex: 1; font-size: .83rem; color: #334e68; }
.ag-hub-check__count { font-size: .72rem; color: #9fb3c8; font-weight: 600; }

/* ── Hub toolbar ─────────────────────────────────────────────────────────────── */
.ag-hub-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.25rem;
    padding: .75rem 0;
    border-bottom: 1px solid rgba(0,119,190,.1);
}
.ag-hub-toolbar__left { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.ag-hub-toolbar__count { font-size: .85rem; color: #627d98; }
.ag-hub-toolbar__count strong { color: #001f3f; }
.ag-hub-toolbar__right { display: flex; align-items: center; gap: .6rem; }
.ag-hub-toolbar__filter-btn {
    display: none; /* hidden on desktop — shown on mobile */
    align-items: center;
    gap: .4rem;
    padding: .4rem .85rem;
    border: 1px solid rgba(0,119,190,.25);
    border-radius: 8px;
    background: #fff;
    color: #334e68;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s;
}
.ag-hub-toolbar__filter-btn.has-filters { border-color: #0077be; color: #0077be; }
.ag-hub-toolbar__filter-count {
    background: #0077be; color: #fff;
    border-radius: 999px; font-size: .65rem; font-weight: 700;
    padding: .1rem .4rem; min-width: 18px; text-align: center;
}
.ag-hub-toolbar__sort {
    padding: .4rem .7rem;
    border: 1px solid rgba(0,119,190,.2);
    border-radius: 8px;
    background: #fff;
    color: #334e68;
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
}

/* ── Skeleton grid ───────────────────────────────────────────────────────────── */
.ag-hub-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1.25rem;
}

/* ── Active filter tags ──────────────────────────────────────────────────────── */
.ag-active-filter-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.ag-active-tag {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .65rem;
    background: #e8f4ff;
    border: 1px solid rgba(0,119,190,.2);
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    color: #0077be;
}
.ag-active-tag button {
    background: none; border: none;
    color: #0077be; cursor: pointer;
    font-size: .85rem; line-height: 1; padding: 0;
    opacity: .7; transition: opacity .15s;
}
.ag-active-tag button:hover { opacity: 1; }

/* ── Responsive hub ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .ag-hub-layout { grid-template-columns: 1fr; }
    .ag-hub-toolbar__filter-btn { display: inline-flex; }

    .ag-hub-sidebar {
        position: fixed;
        inset: 0;
        z-index: 500;
        border-radius: 0;
        transform: translateX(-100%);
        transition: transform .3s ease;
        overflow-y: auto;
        width: 100vw;
        max-width: 100vw;
        top: 0;
    }
    .ag-hub-sidebar.is-open { transform: translateX(0); }
}

@media (max-width: 540px) {
    .ag-hub-hero__title { font-size: 1.8rem; }
    .ag-hub-tabs-bar { top: 60px; }
    .ag-hub-layout { padding-top: 1.25rem; }
}

/* ============================================================
   Aqua Guide — Dashboard v2.0 (membership-aware)
   ============================================================ */

.ag-dashboard {
    padding: 0;
}
.ag-dashboard__inner {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: calc(100vh - var(--ag-header-h, 68px));
}
.ag-dashboard__sidebar {
    background: var(--ag-surface, #f4faff);
    border-right: 1px solid var(--ag-border, #d0e4f0);
    padding: 1.5rem 1rem;
    position: sticky;
    top: var(--ag-header-h, 68px);
    height: calc(100vh - var(--ag-header-h, 68px));
    overflow-y: auto;
}
.ag-dashboard__user-card {
    display: flex;
    align-items: center;
    gap: .875rem;
    padding-bottom: 1.25rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--ag-border, #d0e4f0);
}
.ag-dashboard__avatar {
    border-radius: 50%;
    width: 48px !important;
    height: 48px !important;
}
.ag-dashboard__user-info strong { display: block; font-size: .95rem; }
.ag-dashboard__user-info .ag-badge {
    font-size: .7rem;
    padding: 2px 8px;
    border-radius: 99px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.ag-badge--basic    { background: #e0e0e0; color: #555; }
.ag-badge--pro      { background: #cce5ff; color: #004c9e; }
.ag-badge--business { background: #d4edda; color: #155724; }

.ag-dashboard__nav { display: flex; flex-direction: column; gap: 2px; }
.ag-dashboard__nav-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .875rem;
    border-radius: 8px;
    color: var(--ag-text, #2d4a6b);
    text-decoration: none;
    font-size: .875rem;
    font-weight: 500;
    transition: background .15s, color .15s;
}
.ag-dashboard__nav-item:hover { background: rgba(0,119,190,.08); color: var(--ag-primary, #0077be); }
.ag-dashboard__nav-item.is-active { background: var(--ag-primary, #0077be); color: #fff; }
.ag-dashboard__nav-item--logout { margin-top: .75rem; color: #9fb3c8; }
.ag-dashboard__nav-item--logout:hover { background: rgba(231,76,60,.08); color: #e74c3c; }

.ag-dashboard__content {
    padding: 2rem 2.5rem;
}
.ag-dashboard__content h1 {
    font-size: 1.6rem;
    margin: 0 0 1.5rem;
    color: var(--ag-heading, #001f3f);
}

.ag-dashboard__stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}
.ag-dashboard__stat-card {
    background: #fff;
    border: 1px solid var(--ag-border, #d0e4f0);
    border-radius: 12px;
    padding: 1.25rem;
    text-align: center;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    transition: box-shadow .2s, transform .2s;
}
.ag-dashboard__stat-card:hover { box-shadow: 0 4px 16px rgba(0,119,190,.12); transform: translateY(-2px); }
.ag-dashboard__stat-icon { font-size: 1.75rem; }
.ag-dashboard__stat-card strong { font-size: 1.5rem; color: var(--ag-primary,#0077be); font-weight: 700; }
.ag-dashboard__stat-card span   { font-size: .8rem; color: #667; }

/* Modal overlay */
.ag-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ag-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,31,63,.55);
    backdrop-filter: blur(2px);
}
.ag-modal__box {
    position: relative;
    background: #fff;
    border-radius: 16px;
    padding: 2rem;
    max-width: 440px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0,31,63,.25);
    animation: ag-modal-in .25s cubic-bezier(.34,1.56,.64,1);
}
@keyframes ag-modal-in {
    from { opacity:0; transform: scale(.92) translateY(12px); }
    to   { opacity:1; transform: scale(1) translateY(0); }
}

/* Responsive dashboard */
@media (max-width: 768px) {
    .ag-dashboard__inner {
        grid-template-columns: 1fr;
    }
    .ag-dashboard__sidebar {
        position: static;
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--ag-border,#d0e4f0);
    }
    .ag-dashboard__nav {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .ag-dashboard__content {
        padding: 1.25rem 1rem;
    }
}
/* ── End dashboard v2 ── */

/* ══════════════════════════════════════════════════════════════════════════
   NATIVE RANGE MAP — Species pages
   ══════════════════════════════════════════════════════════════════════════ */

.ag-range-origin-text {
    font-size: .9rem;
    color: var(--ag-grey-600, #627d98);
    margin-bottom: 1rem;
}
.ag-range-origin-text strong {
    color: var(--ag-dark, #001f3f);
}

.ag-range-map-wrap {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    border: 1.5px solid rgba(0,119,190,.18);
    box-shadow: 0 4px 18px rgba(0,31,63,.1);
    margin-bottom: .75rem;
}

.ag-range-map {
    width: 100%;
    height: 340px;
    background: #e8f4fd;
    display: block;
}
@media (max-width: 600px) {
    .ag-range-map { height: 240px; }
}

/* iNaturalist-style legend bar below the map */
.ag-range-map__legend {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .9rem;
    background: rgba(0,31,63,.94);
    color: rgba(255,255,255,.7);
    font-size: .72rem;
    font-family: 'Inter', sans-serif;
    flex-wrap: wrap;
}
.ag-range-map__legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #0077be;
    opacity: .85;
    flex-shrink: 0;
}
.ag-range-map__inat-link {
    margin-left: auto;
    color: var(--ag-secondary, #20b2aa);
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
    transition: color .15s;
}
.ag-range-map__inat-link:hover { color: #fff; }

.ag-range-attribution {
    font-size: .68rem;
    color: var(--ag-grey-400, #9fb3c8);
    line-height: 1.5;
    margin-top: .25rem;
}

/* Leaflet override: keep controls inside the radius */
.ag-range-map-wrap .leaflet-control-zoom {
    border-radius: 8px;
    border: 1px solid rgba(0,119,190,.2);
    box-shadow: 0 2px 8px rgba(0,31,63,.15);
}
.ag-range-map-wrap .leaflet-control-attribution {
    font-size: .58rem;
    background: rgba(255,255,255,.7);
}

/* ══════════════════════════════════════════════════════════════════════════
   PLANNER EXPENSES VIEW
   ══════════════════════════════════════════════════════════════════════════ */

/* View tab button for Expenses — inherits .ag-planner-view-btn styles from planner-logs.css */

/* Expenses layout */
.agp2-expenses-wrap {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Sub-tab strip (Expenses | Inventory) */
.agp2-exp-tabs {
    display: flex;
    background: var(--ag-grey-100, #f0f4f8);
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
}
.agp2-exp-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .55rem 1rem;
    border-radius: 9px;
    border: none;
    background: transparent;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ag-grey-600, #627d98);
    cursor: pointer;
    transition: all .2s;
}
.agp2-exp-tab.is-active {
    background: #fff;
    color: var(--ag-primary, #0077be);
    box-shadow: 0 2px 8px rgba(0,31,63,.1);
}

/* Search bar */
.agp2-exp-search-wrap {
    position: relative;
}
.agp2-exp-search-wrap input {
    width: 100%;
    padding: .7rem 1rem .7rem 2.4rem;
    border: 1.5px solid var(--ag-grey-200, #d9e2ec);
    border-radius: 12px;
    font-size: .875rem;
    background: var(--ag-grey-100, #f0f4f8);
    outline: none;
    transition: border-color .15s, background .15s;
}
.agp2-exp-search-wrap input:focus {
    border-color: var(--ag-primary, #0077be);
    background: #fff;
}
.agp2-exp-search-icon {
    position: absolute;
    left: .8rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ag-grey-400, #9fb3c8);
    font-size: .9rem;
    pointer-events: none;
}

/* Overview card */
.agp2-exp-overview {
    background: var(--ag-grey-100, #f0f4f8);
    border: 1px solid var(--ag-grey-200, #d9e2ec);
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
}
.agp2-exp-overview__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: .5rem;
}
.agp2-exp-overview__title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .95rem;
    font-weight: 700;
    color: var(--ag-dark, #001f3f);
    display: flex;
    align-items: center;
    gap: .5rem;
}
.agp2-period-btn {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .85rem;
    border-radius: 999px;
    background: var(--ag-dark, #001f3f);
    color: rgba(255,255,255,.8);
    border: none;
    font-size: .72rem;
    font-weight: 600;
    font-family: 'Barlow Condensed', sans-serif;
    cursor: pointer;
    transition: background .15s;
}
.agp2-period-btn:hover { background: #0b2a50; }
.agp2-exp-amounts {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
}
.agp2-exp-current-period {
    font-size: .72rem;
    color: var(--ag-grey-600, #627d98);
    margin-bottom: .2rem;
}
.agp2-exp-current-val {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--ag-primary, #0077be);
    line-height: 1;
}
.agp2-exp-lifetime {
    text-align: right;
}
.agp2-exp-lifetime-label {
    font-size: .7rem;
    font-weight: 700;
    color: var(--ag-grey-600, #627d98);
    font-family: 'Barlow Condensed', sans-serif;
    letter-spacing: .05em;
}
.agp2-exp-lifetime-val {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ag-dark, #001f3f);
}

/* Category filter pill */
.agp2-cat-filter-wrap {
    display: flex;
    gap: .5rem;
    align-items: center;
}
.agp2-cat-filter-btn {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem 1.1rem;
    border-radius: 999px;
    background: var(--ag-dark, #001f3f);
    color: rgba(255,255,255,.8);
    border: none;
    font-size: .8rem;
    font-weight: 600;
    font-family: 'Barlow Condensed', sans-serif;
    letter-spacing: .05em;
    cursor: pointer;
    transition: background .15s;
}
.agp2-cat-filter-btn:hover { background: #0b2a50; }

/* Empty state */
.agp2-exp-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--ag-grey-400, #9fb3c8);
    font-size: .9rem;
}
.agp2-exp-empty svg { display: block; margin: 0 auto 1rem; opacity: .25; }

/* Expense list */
.agp2-exp-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.agp2-exp-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .8rem 1rem;
    background: var(--ag-grey-100, #f0f4f8);
    border: 1.5px solid var(--ag-grey-200, #d9e2ec);
    border-radius: 12px;
    transition: border-color .15s;
}
.agp2-exp-item:hover { border-color: rgba(0,119,190,.3); }
.agp2-exp-item__icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    background: var(--ag-grey-200, #d9e2ec);
}
.agp2-exp-item__info { flex: 1; min-width: 0; }
.agp2-exp-item__name {
    font-weight: 600;
    font-size: .875rem;
    color: var(--ag-dark, #001f3f);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.agp2-exp-item__meta {
    font-size: .72rem;
    color: var(--ag-grey-600, #627d98);
    margin-top: 2px;
}
.agp2-exp-item__amount {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: .95rem;
    color: var(--ag-dark, #001f3f);
    flex-shrink: 0;
}
.agp2-exp-item__del {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1.5px solid rgba(220,53,69,.2);
    background: rgba(220,53,69,.05);
    color: var(--ag-danger, #dc3545);
    font-size: .65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .15s;
    flex-shrink: 0;
}
.agp2-exp-item__del:hover { background: rgba(220,53,69,.15); }

/* Inventory items */
.agp2-inv-list { display: flex; flex-direction: column; gap: 8px; }
.agp2-inv-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .8rem 1rem;
    background: var(--ag-grey-100, #f0f4f8);
    border: 1.5px solid var(--ag-grey-200, #d9e2ec);
    border-radius: 12px;
    transition: border-color .15s;
}
.agp2-inv-item:hover { border-color: rgba(0,119,190,.3); }
.agp2-inv-item__photo {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--ag-grey-200, #d9e2ec);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    overflow: hidden;
}
.agp2-inv-item__photo img { width: 100%; height: 100%; object-fit: cover; }
.agp2-inv-item__info { flex: 1; min-width: 0; }
.agp2-inv-item__name {
    font-weight: 600;
    font-size: .875rem;
    color: var(--ag-dark, #001f3f);
}
.agp2-inv-item__meta {
    font-size: .72rem;
    color: var(--ag-grey-600, #627d98);
    margin-top: 2px;
}
.agp2-inv-item__qty {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: .85rem;
    color: var(--ag-primary, #0077be);
    flex-shrink: 0;
}
.agp2-inv-low-stock { color: var(--ag-danger, #dc3545) !important; }

/* Low stock badge */
.agp2-inv-badge {
    font-size: .62rem;
    font-weight: 700;
    padding: .1rem .5rem;
    border-radius: 999px;
    font-family: 'Barlow Condensed', sans-serif;
    letter-spacing: .05em;
}
.agp2-inv-badge--low   { background: rgba(255,193,7,.15);  color: #9a6f00; }
.agp2-inv-badge--exp   { background: rgba(220,53,69,.1);   color: var(--ag-danger, #dc3545); }
.agp2-inv-badge--ok    { background: rgba(40,167,69,.1);   color: #1e7e34; }

/* Add Expense Modal extras */
.agp2-exp-cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: .5rem;
}
.agp2-exp-cat-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: .65rem .4rem;
    border-radius: 10px;
    border: 1.5px solid var(--ag-grey-200, #d9e2ec);
    background: var(--ag-grey-100, #f0f4f8);
    cursor: pointer;
    font-size: .65rem;
    font-weight: 600;
    font-family: 'Barlow Condensed', sans-serif;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ag-grey-600, #627d98);
    transition: all .15s;
}
.agp2-exp-cat-chip:hover   { border-color: var(--ag-primary, #0077be); color: var(--ag-primary, #0077be); }
.agp2-exp-cat-chip.is-active { border-color: var(--ag-primary, #0077be); background: rgba(0,119,190,.08); color: var(--ag-primary, #0077be); }
.agp2-exp-cat-chip .cat-icon { font-size: 1.3rem; }

/* Add Inventory Modal — photo upload zone */
.agp2-inv-photo-zone {
    width: 100%;
    aspect-ratio: 2/1;
    border: 2px dashed var(--ag-grey-200, #d9e2ec);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    color: var(--ag-grey-400, #9fb3c8);
    cursor: pointer;
    transition: border-color .15s, background .15s;
    position: relative;
    overflow: hidden;
    margin-bottom: 1rem;
}
.agp2-inv-photo-zone:hover { border-color: var(--ag-primary, #0077be); background: rgba(0,119,190,.03); }
.agp2-inv-photo-zone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.agp2-inv-photo-zone .zone-icon { font-size: 2rem; }
.agp2-inv-photo-zone .zone-label { font-size: .8rem; font-weight: 600; }

.agp2-exp-chart-wrap {
    background: var(--ag-grey-100, #f0f4f8);
    border-radius: 10px;
    padding: .9rem 1rem;
    border: 1px solid var(--ag-grey-200, #d9e2ec);
}
.agp2-exp-chart-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ag-grey-600, #627d98);
    margin-bottom: .75rem;
}
.agp2-exp-chart-bars {
    display: flex;
    gap: 4px;
    align-items: flex-end;  /* bars grow upward from a shared baseline */
    height: 52px;           /* fixed height so % children resolve correctly */
}
.agp2-exp-chart-bar-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    height: 100%;
    justify-content: flex-end;
}
.agp2-exp-chart-bar {
    width: 100%;
    background: var(--ag-primary, #0077be);
    border-radius: 3px 3px 0 0;
    opacity: .65;
    /* min-height ensures a visible sliver even when value is 0 */
    min-height: 3px;
    transition: opacity .15s;
}
.agp2-exp-chart-bar:hover   { opacity: 1; }
.agp2-exp-chart-bar--current { opacity: 1; background: var(--ag-secondary, #20b2aa); }
.agp2-exp-chart-month {
    font-size: .58rem;
    color: var(--ag-grey-400, #9fb3c8);
    font-family: 'Barlow Condensed', sans-serif;
    letter-spacing: .04em;
    text-align: center;
    white-space: nowrap;
    line-height: 1;
}

/* ── Form section label (used in inventory modal) ────────────────────────── */
.ag-form-section-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ag-grey-400, #9fb3c8);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 1.1rem 0 .5rem;
}
.ag-form-section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--ag-grey-200, #d9e2ec);
}