:root{
    --topbar-h: 72px;                /* enough space for two lines */
    --container-w: 1200px;
            /* Tailwind red-600 vibe */
  }
  
  /* give page content room under the fixed header */
  body.has-topbar { padding-top: var(--topbar-h); }
  
  .mm-topbar.is-fixed{
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 1100;
    background: white;         /* stays transparent */
    backdrop-filter: none;            /* keep it clean like screenshot */
    border-bottom: 1px solid rgba(239, 68, 68, 0.08); /* faint pink line */
  }
  
  .mm-topbar-inner{
    width: min(var(--container-w), 100% - 32px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto; /* brand left, empty slot right */
    grid-template-rows: auto auto;   /* brand row then back row */
    align-items: center;
    padding: 10px 0 8px;
  }
  
  /* Brand (top-left) */
  .mm-brand{
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    display: inline-flex; align-items: center; gap: 10px;
    text-decoration: none;
  }
  .mm-brand img{ display:block; border-radius: 6px; }
  .mm-brand-text{
    font-weight: 700;
    letter-spacing: .2px;
    color:#dc2626;
    font-size:22px;
  }
  
  /* optional right slot (kept for future) */
  .mm-topbar-slot{
    grid-column: 2 / 3; grid-row: 1 / 2;
  }
  
  /* Back link (second line, left-aligned) */
  .mm-back{
    grid-column: 1 / 3;              /* span whole width under brand */
    grid-row: 2 / 3;
    display: inline-flex; align-items: center; gap: 8px;
    width: max-content;
    margin-left: 36px;                /* small indent to align under logo */
    color: #334155;                   /* slate-700-ish like screenshot */
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    padding: 4px 6px;
    border-radius: 8px;
  }
  .mm-back:hover{ background: rgba(15,23,42,0.05); }
  
  @media (prefers-color-scheme: dark){
    .mm-brand-text{ color: #f87171; } /* softer red on dark */
    .mm-back{ color: #cbd5e1; }
    .mm-back:hover{ background: rgba(255,255,255,0.08); }
    .mm-topbar.is-fixed{ border-bottom-color: rgba(248,113,113,0.12); }
  }
  
  /* Small screens: tighten spacing */
  @media (max-width: 480px){
    :root { --topbar-h: 68px; }
    .mm-topbar-inner{ padding: 8px 0 6px; }
    .mm-back{ margin-left: 32px; font-size: 13px; }
  }