/* Muster Us — shared v2 chrome (Starter reskin).
   Extends the feed template language (muster-us-feed-v2.css); do not restyle
   the same components twice — page stylesheets build on these tokens.
   Palette (exact): teal #0F766E · light teal #2EC4B6 · gold #D4AF37 ·
   bg #E8F7F6 · dark #0B1220 · surface #FFFFFF · text #1F2937 · muted #6B7280 */
:root{
  --teal:#0F766E; --teal-light:#2EC4B6; --gold:#D4AF37;
  --bg:#E8F7F6; --dark:#0B1220; --surface:#FFFFFF; --text:#1F2937; --muted:#6B7280;
  --line:rgba(31,41,55,.09); --radius:16px;
  --shadow:0 1px 2px rgba(31,41,55,.05),0 4px 14px rgba(31,41,55,.06);
}

/* ---------- shared topbar (myarea/v2_header.php) ---------- */
.mu-topbar{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line);}
.mu-topbar-inner{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:8px 16px;}
.mu-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;flex:none;}
.mu-brand:hover{text-decoration:none;}
.mu-brand img{width:42px;height:42px;object-fit:contain;display:block;}
.mu-brand-name{font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:19px;letter-spacing:.4px;color:var(--dark);line-height:1.15;white-space:nowrap;}
.mu-brand-name .gold{color:var(--gold);}
.mu-brand-tag{display:block;font-family:'Inter',system-ui,sans-serif;font-size:8.5px;letter-spacing:2.4px;color:var(--teal);font-weight:700;margin-top:2px;}
.mu-search{flex:1;max-width:320px;position:relative;display:flex;align-items:center;}
.mu-search-icon{position:absolute;left:12px;width:16px;height:16px;color:var(--muted);pointer-events:none;flex:none;}
.mu-search input{width:100%;padding:9px 14px 9px 36px;border:1px solid var(--line);border-radius:10px;background:var(--bg);font-family:inherit;font-size:13.5px;color:var(--text);}
.mu-search input::placeholder{color:var(--muted);}
.mu-search input:focus{outline:none;border-color:var(--brand, #0F766E);box-shadow:0 0 0 2px rgba(15,118,110,.15);}
.mu-nav{display:flex;align-items:center;gap:2px;margin-left:auto;}
.mu-nav a{display:flex;align-items:center;gap:7px;padding:9px 11px;border-radius:11px;color:var(--text);font-weight:600;font-size:13.5px;text-decoration:none;white-space:nowrap;}
.mu-nav a svg{width:20px;height:20px;flex:none;}
.mu-nav a:hover{background:var(--bg);text-decoration:none;}
.mu-nav a.active{color:var(--teal);background:var(--bg);box-shadow:inset 0 -3px 0 var(--gold);}
.mu-avatar-link{padding:4px !important;}
.mu-avatar-link .avatar{width:34px;height:34px;font-size:13px;}
.mu-avatar-link img.avatar-photo{width:34px;height:34px;border-radius:50%;object-fit:cover;display:block;}

/* avatar base — shared so every v2 page renders avatars with or without feed css */
.avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:#fff;font-weight:700;flex:none;}
.a-teal{background:var(--teal);} .a-light{background:var(--teal-light);}
.a-gold{background:var(--gold);} .a-slate{background:#64748B;}
.avatar-photo{display:block;object-fit:cover;}

/* ---------- shared buttons ---------- */
.mu-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:12px;font-weight:600;font-size:14px;border:1px solid transparent;cursor:pointer;text-decoration:none;font-family:inherit;line-height:1.2;}
.mu-btn:hover{text-decoration:none;filter:brightness(.97);}
.mu-btn-primary{background:var(--teal);color:#fff;}
.mu-btn-gold{background:var(--gold);color:var(--dark);}
.mu-btn-outline{background:#fff;border-color:var(--teal);color:var(--teal);}
.mu-btn-sm{padding:7px 13px;font-size:13px;border-radius:10px;}

/* ---------- shared surfaces ---------- */
.mu-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);}
.mu-section-title{font-family:'Playfair Display',Georgia,serif;font-size:22px;color:var(--dark);margin:0 0 12px;}
.mu-page{min-height:100vh;background:var(--bg);}
.mu-muted{color:var(--muted);}
.mu-gold-text{color:var(--gold);}

/* ---------- shared footer ---------- */
.mu-footer{margin-top:40px;border-top:1px solid var(--line);background:#fff;}
.mu-footer-inner{max-width:1240px;margin:0 auto;padding:22px 16px;display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;font-size:13px;color:var(--muted);}
.mu-footer-inner a{color:var(--teal);font-weight:600;}
.mu-footer .mu-119{margin-left:auto;font-weight:700;letter-spacing:2px;color:var(--gold);font-size:11px;}

/* ---------- responsive ---------- */
@media (max-width:760px){
  .mu-search{display:none;}
  .mu-brand-tag{display:none;}
  .mu-brand img{width:34px;height:34px;}
  .mu-brand{gap:8px;min-width:0;}
  .mu-brand-name{font-size:15px;}
  .mu-topbar-inner{flex-wrap:wrap;gap:8px;padding:8px 12px;}
  .mu-streak{margin-left:auto;flex:none;font-size:13px;}
  .mu-bell{flex:none;width:38px;height:38px;margin-left:auto;}
  .mu-nav{order:3;width:100%;overflow-x:auto;margin-left:0;padding-bottom:2px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .mu-nav::-webkit-scrollbar{display:none;}
  .mu-nav a{flex:none;padding:8px 10px;}
  .mu-nav a .mu-nav-label{display:none;}
}
/* Very small screens: keep the brand row on one line, no clipping. */
@media (max-width:400px){
  .mu-brand-name{font-size:14px;}
  .mu-topbar-inner{gap:6px;padding:8px 10px;}
}

/* Wave 3 — notifications bell (topbar). */
.mu-bell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;color:var(--text);text-decoration:none;flex:none;}
.mu-bell svg{width:22px;height:22px;}
.mu-bell:hover{background:var(--bg);}
.mu-bell-badge{position:absolute;top:1px;right:0;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#EF4444;color:#fff;font:700 11px/18px 'Inter',system-ui,sans-serif;text-align:center;box-sizing:border-box;}

/* ---------- Mobile hardening (20250925d) ---------- */
html, body { overflow-x: clip; }
.layout > * { min-width: 0; }

/* ---------- Muster Us ad slots (Starter ad system) ---------- */
.mu-ad-slot{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;margin:0 0 16px;}
.mu-ad-slot a{display:block;}
.mu-ad-slot img{display:block;width:100%;height:auto;}
.mu-ad-label{position:absolute;top:8px;left:8px;background:rgba(11,18,32,.78);color:#fff;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:4px 8px;border-radius:6px;text-decoration:none;cursor:pointer;display:inline-block;}.mu-ad-label:hover{background:rgba(15,118,110,.92);}
.mu-ad-feed_sidebar,.mu-ad-profile_side{max-width:320px;}
@media (max-width:760px){.mu-ad-feed_sidebar,.mu-ad-profile_side{max-width:none;}}

/* Gamification — Starter dopamine trio (badges / streak / quest). */
.mu-streak{display:inline-flex;align-items:center;gap:4px;font-weight:700;color:#D4AF37;font-size:15px;margin-right:10px;white-space:nowrap}
.mu-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);background:#0B1220;border:2px solid #D4AF37;color:#E5E7EB;border-radius:14px;padding:14px 20px;display:flex;gap:12px;align-items:center;z-index:9999;opacity:0;pointer-events:none;transition:opacity .35s ease,transform .35s ease;box-shadow:0 8px 30px rgba(0,0,0,.45);max-width:min(92vw,430px)}
.mu-toast.show{opacity:1;transform:translate(-50%,0)}
.mu-toast-emoji{font-size:30px;line-height:1}
.mu-toast small{color:#94A3B8}
.mu-badges{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.mu-badge{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px;border-radius:12px;border:1px solid rgba(212,175,55,.45);background:rgba(212,175,55,.08);text-align:center}
.mu-badge.locked{opacity:.38;filter:grayscale(1);border-color:rgba(148,163,184,.35);background:transparent}
.mu-badge-emoji{font-size:26px;line-height:1.2}
.mu-badge-img{width:44px;height:44px;object-fit:contain;display:block}
.mu-toast-img{width:34px;height:34px;object-fit:contain;flex:none}
.mu-badge-name{font-size:11px;font-weight:600;color:#1F2937;line-height:1.25}
.mu-quest-steps{list-style:none;margin-top:10px;padding:0}
.mu-quest-steps li{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid rgba(31,41,55,.08);font-size:14px}
.mu-quest-steps li:last-child{border-bottom:0}
.mu-quest-check{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;border:2px solid #0F766E;color:#0F766E;flex:0 0 auto}
.mu-quest-steps li.done .mu-quest-check{background:#0F766E;color:#fff}
.mu-quest-steps li.done{color:#6B7280;text-decoration:line-through}

/* Ownership credit */
.side-foot .built-by{font-size:11px;color:#6B7280;letter-spacing:.4px}
/* ---------- Mobile bottom tab bar (PWA, Sep 26 2026) ---------- */
.mu-bottomnav { display: none; }

@media (max-width: 760px) {
  /* Thumb-friendly nav moves to the bottom; the top icon strip is hidden. */
  .mu-topbar .mu-nav { display: none; }
  .mu-bottomnav {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: #fff;
    border-top: 1px solid var(--line, rgba(31, 41, 55, .09));
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 18px rgba(11, 18, 32, .08);
  }
  .mu-bottomnav a {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 8px 2px; min-height: 58px;
    color: #6B7280; font-size: 10.5px; font-weight: 600; line-height: 1.2;
    text-decoration: none; border-radius: 10px; white-space: nowrap;
  }
  .mu-bottomnav a svg { width: 24px; height: 24px; flex: none; }
  .mu-bottomnav a:hover { text-decoration: none; }
  .mu-bottomnav a.active { color: #0F766E; }
  /* Keep page content (and the install banner offset) clear of the bar. */
  body.mu-has-bottomnav { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
}

/* Avatar dropdown (Sign out moved under profile, Sep 29 2026) */
.mu-avatar-wrap{position:relative;display:inline-flex;align-items:center;}
.mu-avatar-wrap .mu-avatar-link{cursor:pointer;background:none;border:none;padding:0;}
.mu-avatar-menu{display:none;position:absolute;top:calc(100% + 8px);right:0;min-width:150px;background:var(--surface, #fff);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:200;overflow:hidden;}
.mu-avatar-wrap.open .mu-avatar-menu{display:block;}
.mu-avatar-menu a{display:block;padding:10px 16px;font-size:14px;color:var(--text);text-decoration:none;white-space:nowrap;}
.mu-avatar-menu a:hover{background:var(--bg);}
.mu-avatar-menu a + a{border-top:1px solid var(--line);}