/*
 * Guardian UI 2026
 * Shared visual system for BY Guardian Cloud.
 * Pure CSS, offline-safe, responsive, motion-aware.
 */

:root {
  --g-bg: #070b12;
  --g-bg-soft: #0d131d;
  --g-surface: rgba(18, 25, 37, 0.82);
  --g-surface-solid: #111925;
  --g-surface-raised: rgba(26, 35, 50, 0.9);
  --g-text: #f6f7fb;
  --g-muted: #9aa7b8;
  --g-faint: #677487;
  --g-line: rgba(255, 255, 255, 0.1);
  --g-line-strong: rgba(255, 255, 255, 0.18);
  --g-accent: #ff7043;
  --g-accent-rgb: 255, 112, 67;
  --g-accent-2: #4fd1c5;
  --g-accent-2-rgb: 79, 209, 197;
  --g-success: #31c48d;
  --g-warning: #f4b740;
  --g-danger: #ef6258;
  --g-font-sans: "Noto Sans SC", "Source Han Sans CN", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
  --g-font-display: "Noto Sans SC", "Source Han Sans CN", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
  --g-font-rounded: "Arial Rounded MT Bold", "Noto Sans SC", "PingFang SC", "Microsoft YaHei UI", sans-serif;
  --g-font-numeric: "DIN Alternate", "Bahnschrift", "Avenir Next", "Segoe UI", sans-serif;
  --g-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.08);
  --g-shadow: 0 18px 60px rgba(0, 0, 0, 0.2);
  --g-radius-sm: 10px;
  --g-radius: 18px;
  --g-radius-lg: 28px;
  --g-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html.guardian-light,
html.guardian-pet,
html.guardian-person,
html.guardian-item,
html.guardian-social {
  --g-bg: #f3f1ec;
  --g-bg-soft: #eae7df;
  --g-surface: rgba(255, 255, 255, 0.78);
  --g-surface-solid: #ffffff;
  --g-surface-raised: rgba(255, 255, 255, 0.94);
  --g-text: #18201f;
  --g-muted: #64706d;
  --g-faint: #8c9693;
  --g-line: rgba(24, 32, 31, 0.1);
  --g-line-strong: rgba(24, 32, 31, 0.18);
  --g-shadow-sm: 0 1px 2px rgba(38, 38, 28, 0.04), 0 10px 30px rgba(38, 38, 28, 0.06);
  --g-shadow: 0 22px 70px rgba(38, 38, 28, 0.1);
}

html.guardian-pet {
  --g-bg: #f5f0e7;
  --g-bg-soft: #ebe1d4;
  --g-text: #2a211c;
  --g-muted: #74665c;
  --g-accent: #c75b32;
  --g-accent-rgb: 199, 91, 50;
  --g-accent-2: #ca8a35;
  --g-accent-2-rgb: 202, 138, 53;
}

html.guardian-person {
  --g-bg: #eef2f1;
  --g-bg-soft: #dfe8e6;
  --g-text: #172624;
  --g-muted: #5e706d;
  --g-accent: #176b70;
  --g-accent-rgb: 23, 107, 112;
  --g-accent-2: #d27751;
  --g-accent-2-rgb: 210, 119, 81;
}

html.guardian-item {
  --g-bg: #edf2ee;
  --g-bg-soft: #dce8df;
  --g-text: #17251f;
  --g-muted: #607069;
  --g-accent: #247158;
  --g-accent-rgb: 36, 113, 88;
  --g-accent-2: #d39a45;
  --g-accent-2-rgb: 211, 154, 69;
}

html.guardian-social {
  --g-bg: #f5f2ed;
  --g-bg-soft: #ebe5dc;
  --g-text: #2a2420;
  --g-muted: #746a63;
  --g-accent: #c85842;
  --g-accent-rgb: 200, 88, 66;
  --g-accent-2: #247b78;
  --g-accent-2-rgb: 36, 123, 120;
}

html.guardian-ui {
  color-scheme: dark;
  scroll-padding-top: 84px;
  background: var(--g-bg);
}

html.guardian-light,
html.guardian-pet,
html.guardian-person,
html.guardian-item,
html.guardian-social {
  color-scheme: light;
}

.guardian-ui body {
  position: relative;
  background: var(--g-bg) !important;
  color: var(--g-text);
  font-family: var(--g-font-sans) !important;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  isolation: isolate;
}

.guardian-ui body::before,
.guardian-ui body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

.guardian-ui body::before {
  background:
    radial-gradient(70rem 45rem at var(--g-pointer-x, 12%) var(--g-pointer-y, 8%), rgba(var(--g-accent-rgb), 0.14), transparent 58%),
    radial-gradient(55rem 40rem at 88% 18%, rgba(var(--g-accent-2-rgb), 0.1), transparent 62%),
    radial-gradient(40rem 30rem at 50% 100%, rgba(var(--g-accent-rgb), 0.07), transparent 68%),
    var(--g-bg);
}

.guardian-ui body::after {
  z-index: -1;
  opacity: 0.42;
  background-image:
    linear-gradient(var(--g-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--g-line) 1px, transparent 1px),
    radial-gradient(circle at center, rgba(var(--g-accent-rgb), 0.22) 0 1px, transparent 1.5px);
  background-size: 72px 72px, 72px 72px, 18px 18px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 76%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 76%);
}

.guardian-ui ::selection {
  color: #fff;
  background: rgba(var(--g-accent-rgb), 0.82);
}

.guardian-ui :where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid rgba(var(--g-accent-rgb), 0.32) !important;
  outline-offset: 3px;
}

.guardian-ui :where(img, video, canvas, iframe) {
  max-width: 100%;
}

.guardian-ui :where(.top-nav, .nav, .topbar, .top-bar, .topbar, .header, .site-header) {
  border-color: var(--g-line) !important;
  background: color-mix(in srgb, var(--g-bg) 76%, transparent) !important;
  -webkit-backdrop-filter: blur(20px) saturate(135%);
  backdrop-filter: blur(20px) saturate(135%);
  box-shadow: 0 1px 0 var(--g-line);
}

.guardian-ui .guardian-nav-scrolled {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1), 0 1px 0 var(--g-line) !important;
}

.guardian-ui :where(.card, .section-card, .action-card, .stat-card, .device-card, .info-card, .login-card, .profile-card, .stats-card, .expand-card, .control-panel, .modal-content, .publish-sheet, .popup-box, .moment-card, .tut-card, .biz-card, [data-guardian-card]) {
  position: relative;
  overflow: hidden;
  color: var(--g-text);
  border: 1px solid var(--g-line) !important;
  background: var(--g-surface) !important;
  box-shadow: var(--g-shadow-sm) !important;
  -webkit-backdrop-filter: blur(18px) saturate(115%);
  backdrop-filter: blur(18px) saturate(115%);
}

.guardian-ui :where(.section-card, .action-card, .stat-card, .device-card, .login-card, .profile-card, .stats-card, .expand-card, .control-panel, .tut-card) {
  border-radius: var(--g-radius) !important;
}

.guardian-ui .guardian-spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(340px circle at var(--gx, 50%) var(--gy, 50%), rgba(var(--g-accent-rgb), .18), transparent 58%);
  transition: opacity .35s ease;
}

.guardian-ui .guardian-spotlight > * {
  position: relative;
  z-index: 1;
}

.guardian-ui .guardian-spotlight:hover::before { opacity: 1; }

.guardian-ui :where(h1, h2, h3, h4, .title, .card-title, .section-title, .pet-name, .device-name, .nickname, .name) {
  color: var(--g-text);
  font-family: var(--g-font-display);
  font-weight: 720;
  letter-spacing: -0.035em;
  line-height: 1.22;
  text-wrap: balance;
}

.guardian-ui :where(.logo-brand, .nav-brand, .logo-text) {
  font-family: var(--g-font-rounded) !important;
  letter-spacing: -0.025em;
}

.guardian-ui :where(.section-label, .hero-badge, .pet-code-label, .device-id, .time, .count, .stat-num, .value, .battery-text) {
  font-family: var(--g-font-numeric);
  font-variant-numeric: tabular-nums;
}

.guardian-ui :where(p, .desc, .sub, .tip, .hint, .section-sub, .text-muted, .card-desc, .hero-sub) {
  color: var(--g-muted);
}

.guardian-ui :where(.btn, .btn-primary, .btn-secondary, .btn-ghost, button, .submit-btn, .login-btn, .copy-btn, .open-btn, .nav-cta, .card-cta, .back-home, [role="button"]) {
  position: relative;
  overflow: hidden;
  min-height: 40px;
  border-radius: var(--g-radius-sm) !important;
  border-color: var(--g-line) !important;
  font-family: var(--g-font-rounded) !important;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: .015em;
  white-space: nowrap;
  touch-action: manipulation;
  transition: transform .28s var(--g-ease), box-shadow .28s var(--g-ease), background-color .2s ease, border-color .2s ease, color .2s ease !important;
}

.guardian-ui :where(.btn-lg, .submit-btn, .login-btn) {
  min-height: 48px;
  padding: 0 24px !important;
  font-size: 15px;
}

.guardian-ui :where(.btn-sm, .mini-btn, .btn-xs) {
  min-height: 34px;
  padding: 0 13px !important;
  font-size: 12px;
}

.guardian-ui :where(button, .btn, .nav-cta, .card-cta) .guardian-svg-icon {
  width: 1.05em;
  height: 1.05em;
  stroke-width: 2;
}

.guardian-ui :where(button, .btn, .submit-btn, .login-btn):disabled {
  cursor: not-allowed;
  opacity: .52;
  filter: saturate(.35);
  transform: none !important;
  box-shadow: none !important;
}

.guardian-ui :where(.btn-primary, .submit-btn, .login-btn, .nav-cta, .card-cta, .btn-save) {
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: linear-gradient(135deg, var(--g-accent), color-mix(in srgb, var(--g-accent) 74%, #111 26%)) !important;
  box-shadow: 0 10px 28px rgba(var(--g-accent-rgb), .22) !important;
}

.guardian-ui :where(.btn-secondary, .btn-ghost, .btn-out, .topbar a, .header-btn, .nav-cat) {
  color: var(--g-text) !important;
  border: 1px solid var(--g-line) !important;
  background: var(--g-surface) !important;
  box-shadow: none !important;
}

.guardian-ui :where(.btn, button, a).guardian-pressed,
.guardian-ui :where(.btn, button, .submit-btn, .login-btn, .nav-cta, .card-cta):active {
  transform: translateY(1px) scale(.975) !important;
}

.guardian-ripple {
  position: absolute !important;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  pointer-events: none;
  z-index: 8 !important;
  background: rgba(255,255,255,.46);
  transform: translate(-50%, -50%) scale(0);
  animation: guardian-ripple .62s ease-out forwards;
}
.guardian-ripple-host {
  position: relative !important;
  overflow: hidden !important;
}

@keyframes guardian-ripple {
  to { transform: translate(-50%, -50%) scale(18); opacity: 0; }
}

.guardian-ui :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select, .input, .login-input, .mini-input, .mini-select) {
  color: var(--g-text) !important;
  border: 1px solid var(--g-line-strong) !important;
  border-radius: var(--g-radius-sm) !important;
  background: color-mix(in srgb, var(--g-surface-solid) 78%, transparent) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease !important;
}

.guardian-ui :where(input, textarea, select)::placeholder {
  color: var(--g-faint) !important;
  opacity: 1;
}

.guardian-ui :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select):focus {
  border-color: rgba(var(--g-accent-rgb), .72) !important;
  box-shadow: 0 0 0 4px rgba(var(--g-accent-rgb), .11) !important;
  outline: none !important;
}

.guardian-ui :where(.tag, .badge, .pill, .chip, .gender-badge, .pet-code-label, .hero-badge) {
  color: var(--g-accent) !important;
  border: 1px solid rgba(var(--g-accent-rgb), .22) !important;
  background: rgba(var(--g-accent-rgb), .09) !important;
  border-radius: 999px !important;
}

.guardian-ui :where(.section-icon, .action-card .icon, .action-icon, .card-icon, .item-icon, .type-icon, .logo-icon, .sos-i) {
  color: var(--g-accent) !important;
  background: rgba(var(--g-accent-rgb), .1) !important;
  border: 1px solid rgba(var(--g-accent-rgb), .14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

.guardian-ui .guardian-svg-icon {
  display: inline-block;
  width: 1.18em;
  height: 1.18em;
  flex: 0 0 auto;
  vertical-align: -0.18em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.guardian-ui :where(.section-icon, .action-card .icon, .action-icon, .card-icon, .item-icon, .type-icon, .logo-icon) .guardian-svg-icon {
  width: 1.15em;
  height: 1.15em;
}

.guardian-ui :where(.divider, hr, .section-header, .card-header, .setting-row, .info-line, .device-item) {
  border-color: var(--g-line) !important;
}

.guardian-ui :where(.modal-overlay, .popup-mask, .announcement-modal, .img-lightbox, .video-modal) {
  background: rgba(4, 7, 12, .72) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.guardian-ui :where(.modal, .modal-content, .popup-box, .announcement-content, .login-card) {
  border: 1px solid var(--g-line) !important;
  background: var(--g-surface-raised) !important;
  box-shadow: var(--g-shadow) !important;
}

.guardian-ui :where(.empty-state, .empty) {
  color: var(--g-muted) !important;
  border-color: var(--g-line) !important;
  background: rgba(var(--g-accent-rgb), .035) !important;
}

/* Main landing page */
.guardian-home .bg-anim { opacity: .22 !important; }
.guardian-home .bg-anim::before,
.guardian-home .bg-anim::after,
.guardian-home .bg-pulse { filter: blur(150px) !important; }
.guardian-home .nav { padding: 12px 0 !important; }
.guardian-home .hero { min-height: min(920px, 100svh); }
.guardian-home .hero h1 {
  font-family: var(--g-font-display) !important;
  font-weight: 820 !important;
  color: var(--g-text) !important;
  background: linear-gradient(115deg, #fff 20%, #ffd0bd 56%, #7ee1d8 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-wrap: balance;
}
.guardian-home .hero h1 .grad {
  background: linear-gradient(112deg, #ff8a5c 0%, #ffb08d 44%, #65d8cd 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.guardian-home .logo-brand stop:first-child { stop-color: var(--g-accent) !important; }
.guardian-home .logo-brand stop:last-child { stop-color: var(--g-accent-2) !important; }
.guardian-home .hero-badge { backdrop-filter: blur(18px); }
.guardian-home .cards { gap: 16px !important; }
.guardian-home .card {
  border-radius: var(--g-radius-lg) !important;
  transform-style: preserve-3d;
}
.guardian-home .card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09);
}
.guardian-home :where(.section-label, .tut-step) { color: var(--g-accent) !important; }
.guardian-home .section-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.guardian-home :where(.btn-primary, .btn-ghost, .nav-cta) {
  min-height: 48px;
  padding-inline: 22px !important;
}
.guardian-home :where(.media-box, .gallery-item, .video-thumb) {
  border-color: var(--g-line) !important;
  background: var(--g-surface) !important;
  box-shadow: var(--g-shadow-sm) !important;
}

/* Three guardian portals */
.guardian-portal body { min-height: 100svh; }
.guardian-portal .top-nav { padding: 10px 18px !important; }
.guardian-portal .main {
  width: min(100%, 1040px) !important;
  max-width: 1040px !important;
  padding: clamp(18px, 3vw, 34px) 16px 56px !important;
}
.guardian-portal .hero {
  padding: clamp(28px, 5vw, 58px) 20px 26px !important;
}
.guardian-portal .hero .logo {
  width: 72px;
  height: 72px;
  margin-inline: auto;
  display: grid !important;
  place-items: center;
  color: var(--g-accent);
  font-size: 38px !important;
  border-radius: 24px;
  border: 1px solid rgba(var(--g-accent-rgb), .18);
  background: linear-gradient(145deg, rgba(var(--g-accent-rgb), .14), rgba(var(--g-accent-2-rgb), .08));
  animation: guardian-float 5s ease-in-out infinite !important;
  box-shadow: 0 18px 50px rgba(var(--g-accent-rgb), .12);
}
.guardian-portal .hero h1 { font-size: clamp(28px, 4vw, 46px) !important; }
.guardian-portal .action-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
.guardian-portal .action-card {
  min-height: 180px;
  padding: 22px 18px !important;
  border-radius: var(--g-radius) !important;
  text-align: left !important;
}
.guardian-portal .action-card .icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  font-size: 24px !important;
}
.guardian-portal .action-card :where(.title, h3) {
  display: block;
  margin-bottom: 7px;
  font-size: 16px !important;
  line-height: 1.3;
}
.guardian-portal .action-card :where(.desc, p) {
  display: block;
  font-size: 12px !important;
  line-height: 1.65;
}
.guardian-portal .hero p { line-height: 1.75; }
.guardian-portal .cross-nav {
  border: 1px solid var(--g-line) !important;
  background: var(--g-surface) !important;
  box-shadow: var(--g-shadow-sm);
  border-radius: var(--g-radius) !important;
}
.guardian-portal :where(.cross-nav-item, .device-list, .bottom-actions) { border-color: var(--g-line) !important; }

@keyframes guardian-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-7px) rotate(2deg); }
}

/* Forms and owner/device surfaces */
.guardian-form .hero {
  border: 1px solid rgba(var(--g-accent-rgb), .16) !important;
  background: linear-gradient(145deg, rgba(var(--g-accent-rgb), .14), rgba(var(--g-accent-2-rgb), .07)) !important;
  box-shadow: var(--g-shadow-sm);
}
.guardian-form .hero h1,
.guardian-form .hero p { color: var(--g-text) !important; }
.guardian-form .file-upload {
  border-color: var(--g-line-strong) !important;
  background: rgba(var(--g-accent-rgb), .035) !important;
}
.guardian-form .file-upload:hover { background: rgba(var(--g-accent-rgb), .08) !important; }

.guardian-owner :where(.main, .container) { position: relative; z-index: 1; }
.guardian-owner :where(.map-section, .video-container, .signature-box) {
  border-color: var(--g-line) !important;
  background: var(--g-surface) !important;
}

/* Admin keeps its dense information architecture */
.guardian-admin body { background: var(--g-bg) !important; }
.guardian-admin .sidebar {
  border-right: 1px solid var(--g-line) !important;
  background: color-mix(in srgb, var(--g-bg) 92%, #000 8%) !important;
}
.guardian-admin :where(.topbar, .content, .main) { background-color: transparent !important; }
.guardian-admin .nav-item {
  color: var(--g-muted) !important;
  border-radius: 10px !important;
}
.guardian-admin .nav-item.active {
  color: var(--g-text) !important;
  background: rgba(var(--g-accent-rgb), .12) !important;
  box-shadow: inset 3px 0 0 var(--g-accent);
}
.guardian-admin :where(.stats-grid, .control-grid) { gap: 12px !important; }
.guardian-admin :where(table, th, td) { border-color: var(--g-line) !important; }
.guardian-admin th { color: var(--g-muted) !important; background: rgba(var(--g-accent-rgb), .04) !important; }

/* Map pages: visual polish without touching map interaction layers */
.guardian-map .map-toolbar,
.guardian-map :where(.toolbar, .topbar) {
  border: 1px solid var(--g-line) !important;
  background: var(--g-surface-raised) !important;
  box-shadow: var(--g-shadow-sm) !important;
}
.guardian-map :where(#map, .map, .viewer-map-container) { background: var(--g-bg-soft) !important; }

/* Social */
.guardian-social body { background: var(--g-bg) !important; }
.guardian-social :where(.top-bar, .tabs, .tab-row, .bottom-nav) {
  border-color: var(--g-line) !important;
  background: color-mix(in srgb, var(--g-bg) 84%, transparent) !important;
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
}
.guardian-social .moment-card { border-radius: 18px !important; }
.guardian-social :where(.nick, .nickname, .mc-nick) {
  font-family: var(--g-font-display);
  font-weight: 680;
  letter-spacing: -.02em;
}
.guardian-social :where(.pill, .tab, .tab-btn, .bottom-nav, .tag) {
  font-family: var(--g-font-rounded) !important;
  letter-spacing: 0;
}
.guardian-social :where(.active, .tab.active, .tab-btn.active, .nav-item.active) { color: var(--g-accent) !important; }
.guardian-social .fab {
  background: var(--g-accent) !important;
  box-shadow: 0 14px 34px rgba(var(--g-accent-rgb), .28) !important;
}
.guardian-social :where(.ava, .avatar, .avatar-box, .mc-avatar) {
  border: 2px solid var(--g-surface-solid) !important;
  box-shadow: 0 0 0 1px var(--g-line);
}
.guardian-social .scroll-notice,
.guardian-social .banner { border-color: var(--g-line) !important; }
.guardian-social .banner-item {
  color: #fff !important;
  background: linear-gradient(120deg, #2d5550 0%, #6f4b40 100%) !important;
}

/* Motion */
.guardian-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .72s var(--g-ease), transform .72s var(--g-ease);
}
.guardian-reveal.guardian-visible {
  opacity: 1;
  transform: translateY(0);
}
.guardian-tilt {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .38s var(--g-ease), box-shadow .3s ease !important;
}
.guardian-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999999;
  width: 220px;
  height: 220px;
  pointer-events: none;
  border-radius: 50%;
  opacity: .55;
  transform: translate3d(calc(var(--guardian-cursor-x, -300px) - 50%), calc(var(--guardian-cursor-y, -300px) - 50%), 0);
  background: radial-gradient(circle, rgba(var(--g-accent-rgb), .11), transparent 68%);
  mix-blend-mode: screen;
  transition: opacity .3s ease;
}
.guardian-light .guardian-cursor,
.guardian-pet .guardian-cursor,
.guardian-person .guardian-cursor,
.guardian-item .guardian-cursor,
.guardian-social .guardian-cursor { mix-blend-mode: multiply; opacity: .34; }

@media (hover: hover) and (pointer: fine) {
  .guardian-ui :where(.btn, button, .submit-btn, .login-btn, .nav-cta, .card-cta):hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(var(--g-accent-rgb), .18) !important;
  }
  .guardian-ui :where(.action-card, .card, .tut-card, .device-card, .stat-card):hover {
    border-color: rgba(var(--g-accent-rgb), .28) !important;
    box-shadow: var(--g-shadow) !important;
  }
}

@media (max-width: 820px) {
  .guardian-home .nav-links { display: none !important; }
  .guardian-home .hero { min-height: auto; padding-top: 150px !important; }
  .guardian-home .hero h1 { letter-spacing: -1.5px !important; }
  .guardian-portal .action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .guardian-portal .action-card { min-height: 160px; }
  .guardian-admin .layout { min-height: 100svh; }
}

@media (max-width: 520px) {
  .guardian-ui body::after { background-size: 48px 48px, 48px 48px, 16px 16px; opacity: .28; }
  .guardian-ui :where(.card, .section-card, .profile-card, .stats-card, .login-card) { border-radius: 15px !important; }
  .guardian-portal .main { padding-inline: 12px !important; }
  .guardian-portal .hero { padding-top: 24px !important; }
  .guardian-portal .action-grid { gap: 10px !important; }
  .guardian-portal .action-card { min-height: 146px; padding: 17px 14px !important; }
  .guardian-portal .action-card .icon { margin-bottom: 14px; }
  .guardian-form .form-row { flex-direction: column !important; gap: 12px !important; }
  .guardian-social .card { margin-inline: 9px !important; }
}

@media (max-width: 370px) {
  .guardian-portal .action-grid { grid-template-columns: 1fr !important; }
  .guardian-portal .action-card { min-height: 124px; }
}

@media (prefers-reduced-motion: reduce) {
  .guardian-ui *,
  .guardian-ui *::before,
  .guardian-ui *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .guardian-reveal { opacity: 1 !important; transform: none !important; }
  .guardian-cursor { display: none !important; }
}

@media (hover: none), (pointer: coarse) {
  .guardian-cursor { display: none !important; }
  .guardian-tilt { transform: none !important; }
  .guardian-ui .guardian-spotlight::before { display: none; }
}

@supports not (background: color-mix(in srgb, white, black)) {
  .guardian-ui :where(.top-nav, .nav, .topbar, .top-bar) { background: var(--g-surface-raised) !important; }
  .guardian-ui :where(input, textarea, select) { background: var(--g-surface-solid) !important; }
}

/* Portal composition v3: editorial hierarchy instead of repeated template cards */
.guardian-portal .main {
  overflow-x: clip;
  width: min(100%, 980px) !important;
  max-width: 980px !important;
  padding-top: clamp(20px, 4vw, 44px) !important;
}

.guardian-portal .hero {
  position: relative;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  align-items: center;
  column-gap: clamp(22px, 4vw, 48px);
  width: min(100%, 820px);
  min-height: 220px;
  padding: clamp(26px, 5vw, 52px) clamp(8px, 3vw, 30px) 32px !important;
  text-align: left !important;
  isolation: isolate;
}

.guardian-portal .hero::before {
  content: "";
  position: absolute;
  right: 2%;
  top: 9%;
  z-index: -1;
  width: clamp(130px, 23vw, 220px);
  aspect-ratio: 1;
  opacity: .38;
  border: 1px solid rgba(var(--g-accent-rgb), .22);
  border-radius: 61% 39% 56% 44% / 43% 57% 43% 57%;
  background: repeating-radial-gradient(circle at 65% 35%, rgba(var(--g-accent-rgb), .23) 0 1px, transparent 1.5px 9px);
  transform: rotate(12deg);
}

.guardian-portal .hero::after {
  content: "";
  position: absolute;
  left: 132px;
  bottom: 16px;
  width: clamp(64px, 11vw, 112px);
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--g-accent), var(--g-accent-2));
  transform: rotate(-2deg);
}

.guardian-portal .hero .logo {
  grid-column: 1;
  grid-row: 1 / 4;
  width: 96px;
  height: 96px;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 38% 62% 57% 43% / 44% 39% 61% 56% !important;
  color: #fff !important;
  background: linear-gradient(145deg, var(--g-accent), color-mix(in srgb, var(--g-accent) 68%, #17211f 32%)) !important;
  box-shadow: 18px 20px 0 rgba(var(--g-accent-2-rgb), .11) !important;
  animation: guardian-portal-mark 8s ease-in-out infinite !important;
}

.guardian-portal .hero .logo .guardian-svg-icon {
  width: 43px;
  height: 43px;
  stroke-width: 1.55;
}

.guardian-portal .hero :where(.paw-row, .shield-row, .tag-row) {
  grid-column: 2;
  grid-row: 1;
  margin: 0 0 8px !important;
  color: var(--g-accent) !important;
  font-family: var(--g-font-numeric);
  font-size: 0 !important;
  font-weight: 700;
  letter-spacing: .18em !important;
  line-height: 1;
  text-transform: uppercase;
  animation: none !important;
}

.guardian-pet.guardian-portal .hero .paw-row::before { content: "COMPANION · FIND · HOME"; }
.guardian-person.guardian-portal .hero .shield-row::before { content: "FAMILY · SAFETY · CARE"; }
.guardian-item.guardian-portal .hero .tag-row::before { content: "BELONGINGS · TRACE · RETURN"; }

.guardian-portal .hero :where(.paw-row, .shield-row, .tag-row)::before { font-size: 11px; }
.guardian-portal .hero h1 {
  grid-column: 2;
  grid-row: 2;
  margin: 0 0 10px !important;
  max-width: 620px;
  font-size: clamp(32px, 5.8vw, 58px) !important;
  font-weight: 820 !important;
  letter-spacing: -.055em !important;
  line-height: 1.02 !important;
  text-align: left;
  text-shadow: none !important;
}

.guardian-portal .hero .welcome {
  grid-column: 2;
  grid-row: 3;
  max-width: 580px;
  color: var(--g-muted) !important;
  font-size: clamp(13px, 1.8vw, 15px) !important;
  line-height: 1.65 !important;
}

.guardian-portal .hero .heart {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-inline: 4px;
  border-radius: 50%;
  font-size: 0;
  vertical-align: .15em;
  background: var(--g-accent-2);
  animation: guardian-heart-dot 1.8s ease-in-out infinite !important;
}

.guardian-portal .action-grid {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  grid-auto-flow: dense;
  grid-auto-rows: minmax(108px, auto);
  gap: 12px !important;
  margin: 10px 0 38px !important;
}

.guardian-portal .action-card {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: 15px;
  min-width: 0;
  min-height: 108px;
  padding: 19px 20px !important;
  text-align: left !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.guardian-portal .action-card:nth-child(1) {
  grid-column: span 6;
  grid-row: span 2;
  grid-template-columns: 66px minmax(0, 1fr);
  min-height: 228px;
  padding: 30px !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 34px 12px 34px 12px !important;
  background:
    radial-gradient(circle at 92% 16%, rgba(255,255,255,.20) 0 1px, transparent 1.5px 8px),
    linear-gradient(138deg, var(--g-accent), color-mix(in srgb, var(--g-accent) 66%, #13201d 34%)) !important;
  box-shadow: 0 22px 50px rgba(var(--g-accent-rgb), .19) !important;
}

.guardian-portal .action-card:nth-child(2) {
  grid-column: span 6;
  border-radius: 14px 34px 14px 34px !important;
  background: color-mix(in srgb, var(--g-accent-2) 11%, var(--g-bg) 89%) !important;
  border-color: rgba(var(--g-accent-2-rgb), .24) !important;
}

.guardian-portal .action-card:nth-child(3) {
  grid-column: span 3;
  grid-template-columns: 42px minmax(0, 1fr);
  border-radius: 30px 10px 22px 10px !important;
  background: transparent !important;
  border-style: dashed !important;
  border-color: rgba(var(--g-accent-rgb), .26) !important;
}

.guardian-portal .action-card:nth-child(4) {
  grid-column: span 3;
  grid-template-columns: 42px minmax(0, 1fr);
  border-radius: 10px 28px 10px 22px !important;
  background: color-mix(in srgb, var(--g-text) 5%, var(--g-bg) 95%) !important;
}

.guardian-portal .action-card::after {
  content: "↗";
  position: absolute;
  right: 15px;
  top: 12px;
  z-index: 2;
  color: var(--g-faint);
  font-family: var(--g-font-numeric);
  font-size: 14px;
  transition: transform .28s var(--g-ease), color .2s ease;
}

.guardian-portal .action-card.primary::after { color: rgba(255,255,255,.72); }
.guardian-portal .action-card:hover::after { color: var(--g-accent); transform: translate(2px, -2px); }
.guardian-portal .action-card.primary:hover::after { color: #fff; }

.guardian-portal .action-card .icon {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
  width: 48px;
  height: 48px;
  margin: 0 !important;
  border: 0;
  border-radius: 50% !important;
  color: var(--g-accent) !important;
  background: rgba(var(--g-accent-rgb), .09) !important;
  box-shadow: none;
}

.guardian-portal .action-card:nth-child(1) .icon {
  width: 64px;
  height: 64px;
  color: #fff !important;
  background: rgba(255,255,255,.13) !important;
}

.guardian-portal .action-card:nth-child(n+3) .icon { width: 40px; height: 40px; }
.guardian-portal .action-card .icon .guardian-svg-icon { width: 22px; height: 22px; }
.guardian-portal .action-card:nth-child(1) .icon .guardian-svg-icon { width: 29px; height: 29px; }

.guardian-portal .action-card :where(.title, h3) {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  margin: 0 22px 4px 0 !important;
  font-size: clamp(15px, 1.8vw, 18px) !important;
  letter-spacing: -.025em;
}

.guardian-portal .action-card :where(.desc, p) {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.55;
}

.guardian-portal .action-card:nth-child(1) :where(.title, h3) {
  color: #fff !important;
  font-size: clamp(22px, 3vw, 30px) !important;
}
.guardian-portal .action-card:nth-child(1) :where(.desc, p) { color: rgba(255,255,255,.73) !important; }

.guardian-portal .cross-nav {
  overflow: hidden;
  margin: 0 !important;
  padding: 23px 0 22px !important;
  border: 0 !important;
  border-top: 1px solid var(--g-line) !important;
  border-bottom: 1px solid var(--g-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.guardian-portal .cross-nav-title,
.guardian-portal .device-status-title {
  color: var(--g-text) !important;
  font-family: var(--g-font-rounded);
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .08em;
}

.guardian-portal .cross-nav-title .guardian-svg-icon,
.guardian-portal .device-status-title .guardian-svg-icon {
  color: var(--g-accent);
  width: 16px;
  height: 16px;
}

.guardian-portal .cross-nav-items { gap: 6px !important; padding-bottom: 0; }
.guardian-portal .cross-nav-item {
  min-height: 38px;
  padding: 8px 12px !important;
  color: var(--g-muted) !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  box-shadow: none !important;
}
.guardian-portal .cross-nav-item .emoji {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  font-size: 15px !important;
}
.guardian-portal .cross-nav-item.active {
  color: #fff !important;
  background: var(--g-accent) !important;
}

.guardian-portal .device-status {
  position: relative;
  margin: 0 !important;
  padding: 26px 0 10px !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.guardian-portal .device-status-title { margin-bottom: 14px !important; }
.guardian-portal .device-status-title .count {
  color: var(--g-accent) !important;
  border: 1px solid rgba(var(--g-accent-rgb), .20);
  border-radius: 6px !important;
  background: rgba(var(--g-accent-rgb), .07) !important;
}
.guardian-portal .device-list { gap: 7px !important; }
.guardian-portal .device-item,
.guardian-portal .empty-state {
  border: 1px solid var(--g-line);
  border-left: 3px solid var(--g-accent);
  border-radius: 5px 18px 18px 5px !important;
  background: color-mix(in srgb, var(--g-surface-solid) 58%, transparent) !important;
}
.guardian-portal .empty-state {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 17px 18px !important;
  text-align: left !important;
}
.guardian-portal .empty-state .icon {
  display: grid !important;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: 0 !important;
  color: var(--g-accent);
  font-size: 19px !important;
  opacity: 1 !important;
}

.guardian-portal .bottom-actions { margin: 24px 0 8px !important; text-align: left !important; }
.guardian-portal .back-home {
  padding: 8px 0 !important;
  color: var(--g-muted) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.guardian-portal .deco-tags {
  justify-content: flex-start !important;
  margin: 20px 0 0 !important;
  color: var(--g-faint);
  font-size: 0 !important;
  opacity: .72 !important;
}
.guardian-portal .deco-tags::before {
  content: "BY GUARDIAN CLOUD  /  SAFE CONNECTION";
  font-family: var(--g-font-numeric);
  font-size: 9px;
  letter-spacing: .16em;
}

@keyframes guardian-portal-mark {
  0%, 100% { border-radius: 38% 62% 57% 43% / 44% 39% 61% 56%; transform: translateY(0) rotate(-2deg); }
  50% { border-radius: 57% 43% 39% 61% / 61% 48% 52% 39%; transform: translateY(-5px) rotate(2deg); }
}
@keyframes guardian-heart-dot { 0%, 100% { transform: scale(.75); opacity: .55; } 50% { transform: scale(1.15); opacity: 1; } }

@media (max-width: 820px) {
  .guardian-portal .action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .guardian-portal .action-card:nth-child(1) { grid-column: span 2; grid-row: auto; min-height: 150px; }
  .guardian-portal .action-card:nth-child(2),
  .guardian-portal .action-card:nth-child(3) { grid-column: span 1; min-height: 140px; }
  .guardian-portal .action-card:nth-child(4) { grid-column: span 2; min-height: 104px; }
}

@media (max-width: 520px) {
  .guardian-portal .main { padding: 12px 12px 42px !important; }
  .guardian-portal .hero {
    grid-template-columns: 74px minmax(0, 1fr);
    column-gap: 15px;
    min-height: 178px;
    padding: 26px 4px 30px !important;
  }
  .guardian-portal .hero::before { right: -26px; top: 10px; width: 132px; opacity: .25; }
  .guardian-portal .hero::after { left: 94px; bottom: 16px; width: 58px; }
  .guardian-portal .hero .logo { width: 70px; height: 76px; box-shadow: 9px 11px 0 rgba(var(--g-accent-2-rgb), .11) !important; }
  .guardian-portal .hero .logo .guardian-svg-icon { width: 31px; height: 31px; }
  .guardian-portal .hero :where(.paw-row, .shield-row, .tag-row)::before { font-size: 8px; letter-spacing: .12em; }
  .guardian-portal .hero h1 { font-size: clamp(27px, 9vw, 38px) !important; letter-spacing: -.05em !important; }
  .guardian-portal .hero .welcome { font-size: 12px !important; line-height: 1.55 !important; }

  .guardian-portal .action-grid { gap: 8px !important; margin-bottom: 30px !important; }
  .guardian-portal .action-card { padding: 16px 14px !important; }
  .guardian-portal .action-card:nth-child(1) {
    grid-template-columns: 52px minmax(0, 1fr);
    min-height: 126px;
    padding: 20px !important;
    border-radius: 26px 10px 26px 10px !important;
  }
  .guardian-portal .action-card:nth-child(1) .icon { width: 50px; height: 50px; }
  .guardian-portal .action-card:nth-child(1) .icon .guardian-svg-icon { width: 24px; height: 24px; }
  .guardian-portal .action-card:nth-child(2),
  .guardian-portal .action-card:nth-child(3) {
    grid-template-columns: 1fr;
    grid-template-rows: 40px auto auto;
    align-content: start;
    min-height: 148px;
  }
  .guardian-portal .action-card:nth-child(2) .icon,
  .guardian-portal .action-card:nth-child(3) .icon { grid-column: 1; grid-row: 1; align-self: start; width: 36px; height: 36px; }
  .guardian-portal .action-card:nth-child(2) :where(.title, h3),
  .guardian-portal .action-card:nth-child(3) :where(.title, h3) { grid-column: 1; grid-row: 2; margin-top: 7px !important; }
  .guardian-portal .action-card:nth-child(2) :where(.desc, p),
  .guardian-portal .action-card:nth-child(3) :where(.desc, p) { grid-column: 1; grid-row: 3; }
  .guardian-portal .action-card:nth-child(4) { min-height: 98px; }
  .guardian-portal .action-card :where(.title, h3) { font-size: 14px !important; }
  .guardian-portal .action-card:nth-child(1) :where(.title, h3) { font-size: 21px !important; }
  .guardian-portal .action-card :where(.desc, p) { font-size: 11px !important; }
  .guardian-portal .cross-nav-items { margin-inline: 0; padding-inline: 0; }
}

@media (max-width: 330px) {
  .guardian-portal .top-nav { padding-inline: 10px !important; }
  .guardian-portal .nav-brand { font-size: 14px; }
  .guardian-portal .nav-cats { gap: 3px; }
  .guardian-portal .nav-cat { width: 30px; height: 30px; }
  .guardian-portal .hero { grid-template-columns: 62px minmax(0, 1fr); column-gap: 12px; }
  .guardian-portal .hero .logo { width: 60px; height: 66px; }
  .guardian-portal .hero h1 { font-size: 26px !important; }
  .guardian-portal .hero :where(.paw-row, .shield-row, .tag-row)::before { font-size: 7px; }
  .guardian-portal .action-card:nth-child(1) { padding: 17px !important; }
  .guardian-portal .action-card:nth-child(2),
  .guardian-portal .action-card:nth-child(3) { padding: 14px 11px !important; }
}

/* 2026-08-24d — editorial rhythm, contrast fixes and cross-site navigator */
:root {
  --g-font-display: "STSong", "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", "SimSun", serif;
}

.guardian-ui :where(h1, .hero h1, .section-title, .profile-card .name) {
  font-family: var(--g-font-display) !important;
  font-weight: 650;
}

/* Owner cards contain white text in the original templates; keep a genuinely dark canvas. */
.guardian-owner .profile-card,
.guardian-owner .profile-card.card-dog,
.guardian-owner .profile-card.card-cat,
.guardian-owner .profile-card.card-other {
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background:
    radial-gradient(100% 130% at 95% 5%, rgba(var(--g-accent-2-rgb),.42), transparent 55%),
    linear-gradient(145deg, #183c3a 0%, #112724 48%, #0e1e1c 100%) !important;
  box-shadow: 0 24px 58px rgba(14,36,33,.24) !important;
}
.guardian-pet.guardian-owner .profile-card { background: radial-gradient(100% 130% at 95% 5%, rgba(202,138,53,.40), transparent 55%),linear-gradient(145deg,#533323,#35231b 48%,#211712 100%) !important; }
.guardian-item.guardian-owner .profile-card { background: radial-gradient(100% 130% at 95% 5%, rgba(211,154,69,.35), transparent 55%),linear-gradient(145deg,#21483a,#183128 48%,#10231d 100%) !important; }
.guardian-owner .profile-card :where(.card-title,.name,.device-id,.pet-code,.signature,.pet-features,.contact-item,.status-item) { color: rgba(255,255,255,.94) !important; }
.guardian-owner .profile-card :where(.header-btn,.edit-btn) { color:#fff !important; background:rgba(255,255,255,.13) !important; border-color:rgba(255,255,255,.17) !important; }
.guardian-owner .login-card { color:var(--g-text) !important; background:rgba(255,255,255,.88) !important; }
.guardian-owner .login-card :where(h1,h2,.title) { color:var(--g-text) !important; }
.guardian-owner .login-card :where(.sub,.tip,p) { color:#596862 !important; }

/* Uneven editorial layout: related surfaces do not all look like the same white rectangle. */
.guardian-form .section-card:nth-of-type(odd) { border-radius: 28px 9px 28px 9px !important; }
.guardian-form .section-card:nth-of-type(even) { border-radius: 9px 28px 9px 28px !important; margin-left:clamp(0px,2vw,14px); }
.guardian-owner :where(.stats-card,.expand-card,.control-panel):nth-of-type(3n+1) { border-radius:24px 8px 24px 8px !important; }
.guardian-owner :where(.stats-card,.expand-card,.control-panel):nth-of-type(3n+2) { border-radius:8px 24px 8px 24px !important; }
.guardian-social .moment-card:nth-child(3n+1) { border-radius:24px 9px 20px 9px !important; }
.guardian-social .moment-card:nth-child(3n+2) { border-radius:9px 22px 9px 22px !important; }
.guardian-social .guest-login-fab { width:auto !important; min-width:92px; height:42px !important; padding:0 16px; border-radius:999px !important; font-size:13px !important; }
.guardian-social .sos-thin { color:#7d3329 !important; border-left:3px solid var(--g-accent) !important; background:rgba(var(--g-accent-rgb),.08) !important; box-shadow:none !important; }
.guardian-social .scroll-notice { color:#5e554f !important; background:transparent !important; border-bottom:1px solid var(--g-line) !important; }
.guardian-social .banner-item { filter:saturate(.58) contrast(.98); border-radius:26px 9px 26px 9px !important; }
.guardian-social :where(.merge-bar,.tab-row) :where(.pill,.tab,.tab-btn) { color:#5e5a56 !important; border-color:var(--g-line) !important; background:rgba(255,255,255,.48) !important; box-shadow:none !important; }
.guardian-social :where(.merge-bar,.tab-row) :where(.pill.active,.tab.active,.tab-btn.active) { color:#fff !important; background:var(--g-accent) !important; }
.guardian-social .moment-card { border-color:rgba(42,36,32,.11) !important; background:rgba(255,255,255,.83) !important; box-shadow:0 10px 32px rgba(58,43,36,.075) !important; }

.guardian-quicknav {
  position:fixed; left:max(14px,env(safe-area-inset-left)); right:auto; bottom:max(18px,env(safe-area-inset-bottom)); z-index:99990;
  display:flex; flex-direction:column; align-items:flex-start; gap:9px; font-family:var(--g-font-sans);
  pointer-events:none;
}
.guardian-quicknav-toggle,
.guardian-quicknav-panel { pointer-events:auto; }
.guardian-quicknav-social { left:max(12px,env(safe-area-inset-left)); right:auto; bottom:max(82px,calc(env(safe-area-inset-bottom) + 72px)); align-items:flex-start; }
.guardian-quicknav-toggle { display:flex;align-items:center;gap:9px;min-height:44px!important;padding:0 15px!important;color:var(--g-text)!important;border:1px solid color-mix(in srgb,var(--g-line-strong) 70%,transparent)!important;border-radius:999px!important;background:color-mix(in srgb,var(--g-surface-raised) 82%,transparent)!important;box-shadow:0 12px 32px rgba(20,28,26,.14)!important;backdrop-filter:blur(18px) saturate(135%);cursor:pointer }
.guardian-quicknav-dots{display:flex;gap:3px}.guardian-quicknav-dots i{display:block;width:4px;height:4px;border-radius:50%;background:var(--g-accent);transition:.25s var(--g-ease)}.guardian-quicknav.open .guardian-quicknav-dots i:nth-child(1){transform:translateX(7px)}.guardian-quicknav.open .guardian-quicknav-dots i:nth-child(3){transform:translateX(-7px)}
.guardian-quicknav-label{font-size:12px;font-weight:700;letter-spacing:.04em}
.guardian-quicknav-panel { width:220px;padding:9px;border:1px solid var(--g-line);border-radius:24px 8px 24px 8px;background:color-mix(in srgb,var(--g-surface-raised) 91%,transparent);box-shadow:0 26px 70px rgba(15,25,22,.2);backdrop-filter:blur(24px) saturate(140%);opacity:0;visibility:hidden;transform:translateY(10px) scale(.96);transform-origin:bottom left;transition:.25s var(--g-ease) }
.guardian-quicknav-social .guardian-quicknav-panel{transform-origin:bottom left}
.guardian-quicknav.open .guardian-quicknav-panel{opacity:1;visibility:visible;transform:none}
.guardian-quicknav-head{padding:11px 11px 13px;border-bottom:1px solid var(--g-line);margin-bottom:4px}.guardian-quicknav-head b{display:block;color:var(--g-text);font-family:var(--g-font-display);font-size:17px}.guardian-quicknav-head span{display:block;margin-top:2px;color:var(--g-muted);font-size:10px}
.guardian-quicknav-panel a{display:grid;grid-template-columns:24px 1fr 16px;align-items:center;gap:8px;min-height:41px;padding:7px 9px;color:var(--g-muted);text-decoration:none;border-radius:10px;transition:.18s ease}.guardian-quicknav-panel a:hover,.guardian-quicknav-panel a[aria-current="page"]{color:var(--g-text);background:rgba(var(--g-accent-rgb),.09)}.guardian-quicknav-panel a .guardian-svg-icon{color:var(--g-accent);width:17px;height:17px}.guardian-quicknav-panel a span{font-size:12px;font-weight:650}.guardian-quicknav-panel a em{font-style:normal;color:var(--g-faint);font-size:12px}
.guardian-quicknav-body{padding:8px 14px 16px}
.guardian-quicknav-panel a.gqn-row,.guardian-quicknav-panel button.gqn-row{display:grid;grid-template-columns:24px 1fr 16px;align-items:center;gap:8px;width:100%;min-height:41px;padding:7px 9px;border:0;background:transparent;color:var(--g-muted);text-decoration:none;border-radius:10px;cursor:pointer;font-family:inherit;text-align:left;font-size:12px;font-weight:650;transition:.18s ease}
.guardian-quicknav-panel a.gqn-row:hover,.guardian-quicknav-panel button.gqn-row:hover,.guardian-quicknav-panel a.gqn-row[aria-current="page"]{color:var(--g-text);background:rgba(var(--g-accent-rgb),.09)}
.guardian-quicknav-panel .gqn-row .guardian-svg-icon{color:var(--g-accent);width:17px;height:17px}
.guardian-quicknav-panel .gqn-row span{font-size:12px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.guardian-quicknav-panel .gqn-row em{font-style:normal;color:var(--g-faint);font-size:13px}
.guardian-quicknav-body .gqn-row + .gqn-row{margin-top:4px}
.gqn-hr{height:1px;background:rgba(var(--g-accent-rgb),.09);margin:6px 9px 8px}
.gqn-back{display:flex;align-items:center;gap:4px;width:100%;padding:8px 9px;border:0;background:transparent;color:var(--g-accent);font-size:12.5px;font-weight:700;cursor:pointer;border-radius:10px;font-family:inherit;text-align:left;transition:.15s ease}.gqn-back:hover{background:rgba(var(--g-accent-rgb),.08)}
@keyframes gqnSlideFwd{from{transform:translateX(36px);opacity:0}to{transform:none;opacity:1}}
@keyframes gqnSlideBack{from{transform:translateX(-36px);opacity:0}to{transform:none;opacity:1}}
.guardian-quicknav-body.gqn-fwd{animation:gqnSlideFwd .22s var(--g-ease)}
.guardian-quicknav-body.gqn-bwd{animation:gqnSlideBack .22s var(--g-ease)}
@media (prefers-reduced-motion:reduce){.guardian-quicknav-body.gqn-fwd,.guardian-quicknav-body.gqn-bwd{animation:none}}

@media(max-width:520px){.guardian-quicknav{left:max(10px,env(safe-area-inset-left));right:auto;bottom:max(12px,env(safe-area-inset-bottom))}.guardian-quicknav-social{left:max(9px,env(safe-area-inset-left));right:auto;bottom:max(76px,calc(env(safe-area-inset-bottom) + 68px))}.guardian-quicknav-label{display:none}.guardian-quicknav-toggle{width:43px;min-width:43px!important;height:43px;padding:0!important;justify-content:center}.guardian-quicknav-panel{width:min(220px,calc(100vw - 24px))}.guardian-form .section-card:nth-of-type(even){margin-left:0}}
@media(prefers-reduced-motion:reduce){.guardian-quicknav *{transition:none!important}.guardian-portal .hero .logo{animation:none!important}}