.menu-btn { display:none; }
.sheet { position:fixed; inset:0; z-index:120; }
.sheet[hidden] { display:none; }
.sheet-bg { position:absolute; inset:0; background:rgba(0,0,0,.55); }
.sheet-panel { position:absolute; top:0; right:0; bottom:0; width:min(340px,88vw); overflow:auto; background:#12181f; color:#e8eef8; padding:18px 14px 28px; box-shadow:-16px 0 40px rgba(0,0,0,.45); }
.sheet-x { position:absolute; top:10px; right:12px; width:36px; height:36px; border:0; background:transparent; color:#fff; font-size:28px; line-height:1; }
.sheet-me { margin:8px 0 16px; padding-right:36px; }
.sheet-me span { display:block; color:#9ec9ff; font-weight:700; }
.sheet-me b { color:#f5d76e; font-size:18px; }
.sheet-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.sheet-grid a { min-width:0; height:74px; border-radius:12px; background:#1b232e; color:#dbe4f0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; font-size:11px; font-weight:700; }
.sheet-grid svg { width:22px; height:22px; color:#5eead4; }
.sheet-list { margin-top:14px; }
.sheet-list a { display:flex; align-items:center; height:46px; border-bottom:1px solid rgba(255,255,255,.06); color:#e8eef8; font-weight:650; }
.sheet-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:16px; }
.sheet-actions a, .sheet-actions button { height:42px; border-radius:8px; border:0; display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; }
.sheet-actions .out { background:#2a3341; }
.sheet-actions .go { background:#16a34a; }
body:not(.member-in) .only-member { display:none !important; }
body.member-in .only-guest { display:none !important; }
body.sheet-open { overflow:hidden; }
form.auth { position: relative; }
form.auth > .login-err {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    margin: 0;
    z-index: 40;
    color: #fecaca;
    font-size: 12px;
    font-style: italic;
    white-space: nowrap;
}
form.auth input[name="username"],
form.auth input[name="password"] {
    height: 38px;
    width: 160px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 10px;
    background: rgba(7,12,24,.55);
    color: #fff;
    padding: 0 12px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
form.auth input::placeholder { color: #9fb0c7; }
form.auth input:focus {
    outline: none;
    border-color: #2dd4bf;
    box-shadow: 0 0 0 3px rgba(45,212,191,.2);
}
form.auth .btn {
    height: 38px;
    padding: 0 16px;
    border-radius: 10px;
    font-weight: 800;
    box-shadow: 0 6px 14px rgba(0,0,0,.28);
}
form.auth .red { background: linear-gradient(180deg, #fb7185, #be123c); }
form.auth .teal { background: linear-gradient(180deg, #2dd4bf, #0f766e); }
@media (max-width:980px) {
    .topbar .topbar-row { width:100%; height:64px; padding:0 8px 0 10px; gap:8px; justify-content:flex-start; }
    .topbar .brand { margin:0; }
    .topbar .brand img { height:48px; width:auto; max-width:62vw; object-fit:contain; object-position:left center; }
    .topbar .burger, .topbar .drawer, .topbar form.auth, .topbar form.auth.member-in { display:none !important; }
    .menu-btn { margin-left:auto; width:44px; height:44px; padding:12px 10px; border:0; background:transparent; display:flex; flex-direction:column; justify-content:center; gap:5px; }
    .menu-btn span { display:block; height:2px; border-radius:2px; background:#fff; }
}