:root { color-scheme: light dark; --mm-green:#597751; --mm-deep:#24391E; --mm-cream:#F9F7F1; --mm-gold:#D0B276; }
html { height: 100%; background: linear-gradient(180deg, var(--mm-deep) 0%, var(--mm-green) 100%); background-repeat: no-repeat; }
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; background: linear-gradient(180deg, var(--mm-deep) 0%, var(--mm-green) 100%); background-repeat: no-repeat; background-attachment: fixed; min-height: 100vh; color: var(--mm-cream); display: flex; flex-direction: column; }
a { color: inherit; text-decoration: none; }

.topbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid rgba(208,178,118,0.35); position: sticky; top: 0; background: linear-gradient(180deg, rgba(36,57,30,0.92) 0%, rgba(36,57,30,0.75) 100%); backdrop-filter: blur(6px); z-index: 50; }
.brand { font-weight: 700; letter-spacing: 0.3px; display: flex; align-items: center; }
.brand img { width: 50px; height: 50px; object-fit: contain; display: block; transform: translateZ(0); will-change: auto; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.topbar nav a { padding: 6px 10px; border: 1px solid rgba(208,178,118,0.5); border-radius: 8px; background: rgba(89,119,81,0.12); }
.user-menu { position: relative; }
.user-trigger { background: rgba(89,119,81,0.25); border: 1px solid rgba(208,178,118,0.6); color: var(--mm-cream); padding: 8px 12px; border-radius: 10px; cursor: pointer; }
.user-trigger .badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 999px; background: #c0392b; color: #fff; font-size: 12px; line-height: 1; }
.indicator-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; margin-right: 10px; border-radius: 999px; background: #3b82f6; color: #fff; font-size: 12px; font-weight: 700; line-height: 1; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.indicator-badge[style*="display: none"], .indicator-badge[style*="display:none"] { display: none !important; }
.user-trigger .indicator-badge { margin-right: 8px; }
.dropdown { position: absolute; right: 0; top: calc(100% + 6px); min-width: 200px; background: rgba(36,57,30,0.98); border: 1px solid rgba(208,178,118,0.5); border-radius: 12px; padding: 8px; display: none; z-index: 100; box-shadow: 0 12px 24px rgba(0,0,0,0.45); }
.dropdown[hidden] { display: none !important; }
.user-menu.open .dropdown:not([hidden]) { display: block; }
.dropdown a { display: block; padding: 10px 12px; border-radius: 8px; }
.dropdown a:hover { background: rgba(89,119,81,0.25); }
.divider { height: 1px; background: rgba(208,178,118,0.35); margin: 6px 0; }

/* Hamburger & mobile sheet */
.hamburger-wrapper { position: relative; display: none; visibility: hidden; }
.hamburger { background: transparent; border: 0; padding: 6px; margin-right: 8px; }
.hamburger span { display: block; width: 22px; height: 2px; background: #fff; margin: 4px 0; border-radius: 2px; }
.mobile-badge { position: absolute; top: -4px; left: -8px; display: none; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #c0392b; color: #fff; font-size: 11px; font-weight: 700; line-height: 1; border: 2px solid var(--mm-deep); }
.mobile-overlay { position: fixed; inset: 0; background: rgba(36,57,30,0.85); z-index: 90; display: none; }
.mobile-overlay[hidden] { display: none !important; pointer-events: none; }
.mobile-overlay:not([hidden]) { display: grid; place-items: center; }
.mobile-overlay .sheet { width: min(92vw, 480px); background: rgba(36,57,30,0.98); border-radius: 16px; padding: 16px; border: 1px solid rgba(208,178,118,0.45); box-shadow: 0 12px 32px rgba(0,0,0,0.5); }
.sheet-header { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 12px; }
.sheet-title { font-weight: 700; }
.sheet-close { background: rgba(89,119,81,0.25); border: 1px solid rgba(208,178,118,0.6); color: var(--mm-cream); padding: 4px 10px; border-radius: 999px; cursor: pointer; }
.sheet-nav { display: grid; gap: 10px; padding: 8px 0 4px; }
.sheet-nav a { position: relative; display: block; padding: 12px 14px; background: rgba(89,119,81,0.25); border: 1px solid rgba(208,178,118,0.45); border-radius: 10px; text-align: center; }
.sheet-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px; border-radius: 999px; background: #c0392b; color: #fff; font-size: 12px; font-weight: 700; line-height: 1; }

@media (max-width: 640px) {
  .user-menu { display: none; }
  .hamburger-wrapper { display: block; visibility: visible; }
  .hamburger { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 32px; }
  .hamburger-icon rect { fill: #fff; }
  .mobile-indicators { display: flex !important; }
}

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; padding: 16px; }
.card { background: rgba(20,20,22,0.35); border: 1px solid rgba(208,178,118,0.35); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 10px 22px rgba(0,0,0,0.25); }
.avatar { padding-top: 100%; background-size: cover; background-position: center; }
.card.online { border: 5px solid #2FE631; }
.card.away { border: 5px solid #C8A800; }
.meta { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; font-size: 14px; }
.name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 70%; }
.distance { color: #d9decd; }
.empty { padding: 24px; text-align: center; color: #9aa0a6; }

/* Profile gallery styles (container for dropzone and images) */
.photos-box { background: rgba(36,57,30,0.35); border: 1px solid rgba(208,178,118,0.35); border-radius: 12px; padding: 12px; width: 100%; margin: 12px 0; }
.thumb-controls .label-text { font-size: 9px; line-height: 1; display: inline-block; }
.thumb-controls .trash { font-size: 12px; padding: 4px 6px; }

.auth { display: flex; flex-direction: column; min-height: 100vh; justify-content: center; padding-bottom: 60px; }
.auth-card { width: 100%; max-width: 380px; background: rgba(36,57,30,0.9); border: 1px solid rgba(208,178,118,0.45); border-radius: 14px; padding: 20px; box-shadow: 0 16px 28px rgba(0,0,0,0.4); }
.auth .auth-card { margin: 24px auto; }
.auth-card h1 { margin: 0 0 12px 0; font-size: 22px; text-align: center; }
.auth-card form { display: grid; gap: 10px; }
.auth-card label { display: grid; gap: 6px; font-size: 14px; }
.auth-card input { padding: 10px; border-radius: 10px; border: 1px solid rgba(208,178,118,0.45); background: rgba(15,15,16,0.5); color: var(--mm-cream); }
.auth-card button { padding: 10px 12px; border: 1px solid rgba(208,178,118,0.6); background: var(--mm-green); color: var(--mm-cream); border-radius: 10px; cursor: pointer; }
.login-logo img { display: block; margin: 6px auto 14px; width: auto; height: auto; object-fit: contain; }
.alert { background: rgba(42,19,19,0.9); color: #ffb3b3; border: 1px solid #5a1d1d; padding: 10px; border-radius: 10px; margin-bottom: 10px; }
.auth-card .switch { margin-top: 8px; font-size: 14px; color: #9aa0a6; }

@media (max-width: 480px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; padding: 12px; }
  .topbar { padding: 10px 12px; }
  .meta { font-size: 13px; }
  .auth-card { margin: 12px; padding: 16px; }
  .auth-card input, .auth-card button { font-size: 16px; }
}

.site-footer { margin-top: auto; padding: 16px; border-top: 1px solid rgba(208,178,118,0.35); background: rgba(36,57,30,0.6); }
.footer-inner { max-width: 1000px; margin: 0 auto; display: flex; align-items: center; gap: 10px; justify-content: center; color: var(--mm-cream); text-align: center; }
.footer-logo { display: none; }
/* Removed auth-only footer width constraint so footer matches other pages */
body.auth .site-footer { position: fixed; left: 0; right: 0; bottom: 0; }