/* My FM közös fejléc (a főoldal és a tagi felület is ezt használja): ugyanaz a világos sáv, mint az admin felületen, "MY" + az FM World négyzet-emblémája,
   lekerekített fülek, jobbra a név és a Kilépés gomb; keskeny képernyőn hamburger-menü. Itt vannak a közös színek és a világos/sötét mód is. */
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:500 700;font-display:swap;src:url(fonts/sourceserif-normal-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:500 700;font-display:swap;src:url(fonts/sourceserif-normal-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:500 700;font-display:swap;src:url(fonts/sourceserif-italic-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:500 700;font-display:swap;src:url(fonts/sourceserif-italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Arculat (a Design terv.png alapján): meleg krém és arany, serif címek és idézetek (Source Serif 4, a saját tárhelyről), olvasható sans törzsszöveg. A szövegben használt arany (--gold-ink) sötétebb, hogy a kontraszt legalább 4,5:1 legyen. */
:root{--bg:#fbf7f0;--panel:#fffdf9;--panel-2:#f6efe3;--ink:#1c1712;--mute:#6a5f52;--line:#eadfce;--gold:#b07d2c;--gold-ink:#7f5517;--ok:#1d7a3e;--no:#b3261e;--r:18px;--shadow:0 10px 30px rgba(90,60,20,.09);
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#14110d;--panel:#1d1912;--panel-2:#272015;--ink:#f1e9d8;--mute:#aa9e89;--line:#38301f;--gold:#d3a95a;--gold-ink:#d3a95a;--ok:#5fcf86;--no:#ff7b72;--shadow:0 10px 30px rgba(0,0,0,.45)}}
:root[data-theme="dark"]{--bg:#14110d;--panel:#1d1912;--panel-2:#272015;--ink:#f1e9d8;--mute:#aa9e89;--line:#38301f;--gold:#d3a95a;--gold-ink:#d3a95a;--ok:#5fcf86;--no:#ff7b72;--shadow:0 10px 30px rgba(0,0,0,.45)}

.topbar{display:flex;align-items:center;gap:28px;padding:0 28px;height:64px;background:var(--panel);color:var(--ink);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40;font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.topbar *{box-sizing:border-box}
.brand{display:flex;align-items:center;text-decoration:none;color:var(--ink)}
.brand .logo{position:relative;display:block;height:42px;aspect-ratio:1385/532}
.brand .logo::before{content:"";position:absolute;inset:0;background:currentColor;-webkit-mask:url(logo-ink.png) center/100% 100% no-repeat;mask:url(logo-ink.png) center/100% 100% no-repeat}
.brand .logo::after{content:"";position:absolute;left:.3%;width:53.2%;top:91.9%;height:4.5%;background:linear-gradient(90deg,#e8b32c,#d6961a)}
.topbar-tabs{display:flex;gap:4px;flex:1;overflow-x:auto}
.topbar-tab{padding:8px 16px;border-radius:99px;text-decoration:none;color:var(--mute);font-weight:500;white-space:nowrap}
.topbar-tab:hover{color:var(--ink)}
.topbar-tab.is-active{background:var(--ink);color:var(--bg)}
.topbar-actions{display:flex;align-items:center;gap:12px;margin-left:auto;color:var(--mute)}
.topbar-actions .who{max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar-actions form{margin:0}
.topbar-btn{display:inline-block;background:var(--ink);color:var(--bg);border:0;border-radius:8px;padding:9px 18px;font:inherit;font-weight:600;text-decoration:none;cursor:pointer;white-space:nowrap}
.topbar-btn:hover{opacity:.88}
.topbar-btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.topbar-btn.ghost:hover{border-color:var(--ink)}

/* téma-váltó (lámpa): világít (arany izzó) = sötét mód */
.topbar-theme-toggle{display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--line);border-radius:8px;padding:6px 8px;cursor:pointer;line-height:1;color:var(--mute)}
.topbar-theme-toggle:hover{border-color:var(--ink);color:var(--ink)}
.topbar-theme-toggle:focus-visible,.topbar-menu-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.topbar-theme-toggle svg{width:20px;height:20px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
:root[data-theme="dark"] .topbar-theme-toggle{color:var(--gold)}
:root[data-theme="dark"] .topbar-theme-toggle .bulb-glass{fill:var(--gold)}
:root[data-theme="dark"] .topbar-theme-toggle svg{filter:drop-shadow(0 0 4px rgba(224,189,79,.5))}

/* hamburger: csak keskeny nézeten, a fülsáv helyett (checkbox + label, JavaScript nélkül) */
.topbar-menu{display:none}
.topbar-menu-input{position:absolute;opacity:0;pointer-events:none}
.topbar-menu-btn{display:flex;flex-direction:column;justify-content:center;gap:5px;width:28px;height:22px;cursor:pointer}
.topbar-menu-btn span{display:block;height:3px;border-radius:2px;background:var(--ink)}
.topbar-menu-panel{display:none;position:absolute;top:100%;right:12px;min-width:220px;max-width:calc(100vw - 24px);background:var(--panel);border:1px solid var(--line);border-top:0;border-radius:0 0 12px 12px;box-shadow:0 12px 36px rgba(0,0,0,.2);overflow:hidden;z-index:50}
.topbar-menu-input:checked ~ .topbar-menu-panel{display:block}
.topbar-menu-item{display:block;width:100%;text-align:left;padding:11px 16px;border:0;background:none;color:var(--ink);text-decoration:none;font:inherit;font-weight:500;cursor:pointer}
.topbar-menu-item:hover{background:var(--bg)}
.topbar-menu-item.is-active{background:var(--ink);color:var(--bg)}
.topbar-menu-panel form{margin:0}
.topbar-menu-sep{height:1px;background:var(--line);margin:4px 0}

@media (max-width:960px){
  .topbar{gap:12px;padding:0 16px}
  .topbar-tabs,.topbar-actions .who,.topbar-actions .topbar-btn{display:none}
  .topbar-menu{display:block;order:3;position:static}
  .topbar-actions{gap:10px}
  .brand .logo{height:36px}
}