/* header.css — верхнее меню-заголовок, дропдауны, HUD (статус/справка) */
#topbar{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;gap:14px;
        padding:9px 16px;user-select:none;
        background:linear-gradient(180deg,rgba(10,10,18,.94),rgba(7,7,13,.78));
        border-bottom:1px solid #26263a;
        box-shadow:0 8px 30px rgba(0,0,0,.45);
        backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#brand{display:flex;align-items:baseline;gap:10px;min-width:0}
#brand h1{font-size:14px;margin:0;font-weight:700;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
        background:linear-gradient(90deg,#ffd95a,#5ff3ff);-webkit-background-clip:text;background-clip:text;color:transparent}
#brand .tagline{font-size:10px;color:#9aa4d8;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;opacity:.8}

#menu{margin-left:auto;display:flex;align-items:center;gap:6px}
.mi{position:relative}
.mBtn{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:9px;cursor:pointer;
      border:1px solid transparent;background:rgba(255,255,255,.03);color:#a8aed0;font-size:12px;
      white-space:nowrap;transition:.15s}
.mBtn:hover{background:rgba(95,243,255,.06);border-color:rgba(95,243,255,.25);color:#cfd8f0}
.mBtn.on{color:#f4f7ff;border-color:#5ff3ff;box-shadow:0 0 10px rgba(64,232,255,.22)}
.mBtn.act{border-color:#4a4225;background:linear-gradient(90deg,rgba(255,200,97,.10),rgba(255,200,97,.03));color:#ffd95a}
.mBtn.act:hover{border-color:#ffc861;color:#fff6c8}

/* дропдауны: закрываются только по клику вне */
.drop{position:absolute;top:calc(100% + 8px);right:0;min-width:236px;padding:6px;display:none;z-index:30;
      background:linear-gradient(180deg,rgba(13,13,22,.95),rgba(7,7,13,.95));
      border:1px solid #2e2e44;border-radius:12px;
      box-shadow:0 14px 44px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05);
      backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.mi.open .drop{display:block}
.drop button{display:flex;align-items:center;gap:8px;position:relative;width:100%;margin:2px 0;padding:6px 44px 6px 9px;
      border-radius:8px;border:1px solid transparent;background:rgba(255,255,255,.02);color:#a8aed0;cursor:pointer;
      font-size:12px;text-align:left;transition:.15s}
.drop button:hover{background:rgba(95,243,255,.06);border-color:rgba(95,243,255,.22);color:#cfd8f0}
.drop button>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drop button.on{color:#f4f7ff}
.drop button::after{content:'';position:absolute;right:9px;top:50%;transform:translateY(-50%);
      width:28px;height:15px;border-radius:999px;background:#3a3a52;border:1px solid #4a4a66;transition:.2s}
.drop button::before{content:'';position:absolute;right:11px;top:50%;transform:translateY(-50%);
      width:9px;height:9px;border-radius:50%;background:#9aa4d8;transition:.2s;z-index:1}
.drop button.on::after{background:linear-gradient(90deg,#2a6d8a,#40e8ff);border-color:#5ff3ff;box-shadow:0 0 10px rgba(64,232,255,.45)}
.drop button.on::before{right:25px;background:#e9fbff;box-shadow:0 0 6px rgba(255,255,255,.7)}

/* HUD: статус и справка по клику — внизу слева */
#hud{position:fixed;left:14px;bottom:14px;z-index:10;max-width:360px;pointer-events:none}
#status{font-size:11px;color:#9aa4d8;line-height:1.4;text-shadow:0 1px 3px #000}
#info{font-size:11px;color:#e8e8f2;margin-top:6px;padding-top:6px;border-top:1px solid #2a2a38;min-height:1em;text-shadow:0 1px 3px #000}
#info b{font-size:13px}