#app-topbar {
position: relative;
display: flex;
align-items: center;
gap: 12px;
min-height: 44px;
padding: 0 12px;
background: linear-gradient(180deg, #1f2228, #181b21);
border-bottom: 1px solid #2c3038;
z-index: 20;
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
#app-topbar [data-group="tools"] { --topbar-group-color: #5b9bd5; }
#app-topbar [data-group="wiki"] { --topbar-group-color: #d9a441; }
#app-topbar a.topbar-link[data-group], #app-topbar .topbar-group-toggle {
box-shadow: inset 0 -2px 0 0 var(--topbar-group-color);
}
#app-topbar a.topbar-link[data-group].on, #app-topbar .topbar-group-toggle.on {
box-shadow: inset 0 -2px 0 0 var(--topbar-group-color), 0 0 0 1px #3a3e46 inset;
}
#app-topbar .brand {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 700;
font-size: 14px;
color: #f4ecd8;
letter-spacing: 0.4px;
text-decoration: none;
padding-right: 12px;
border-right: 1px solid #2c3038;
white-space: nowrap;
}
#app-topbar .brand img { width: 26px; height: 26px; }
#app-topbar .topbar-nav { display: flex; gap: 3px; }
#app-topbar .topbar-link {
display: inline-flex;
align-items: center;
gap: 6px;
color: #c4c0b3;
font-size: 12px;
text-decoration: none;
white-space: nowrap;
padding: 4px 10px;
border: 1px solid transparent;
border-radius: 5px;
transition: background 0.15s, color 0.15s;
}
#app-topbar .topbar-link svg { width: 14px; height: 14px; flex: none; }
#app-topbar .topbar-link:hover { background: #3a3e46; color: #f4ecd8; }
#app-topbar .topbar-link.unavailable {
opacity: .45;
cursor: default;
}
#app-topbar .topbar-link.unavailable:hover { background: none; color: #9ca3af; }
#app-topbar .topbar-link.on {
background: #2a2e36;
color: #f4ecd8;
border-color: #3a3e46;
}
#app-topbar .topbar-group { position: relative; }
#app-topbar .topbar-group-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
color: #c4c0b3;
font: inherit;
font-size: 12px;
background: none;
cursor: pointer;
white-space: nowrap;
padding: 4px 8px 4px 10px;
border: 1px solid transparent;
border-radius: 5px;
transition: background 0.15s, color 0.15s;
}
#app-topbar .topbar-group-toggle svg { width: 14px; height: 14px; flex: none; }
#app-topbar .topbar-group-toggle:hover { background: #3a3e46; color: #f4ecd8; }
#app-topbar .topbar-group-toggle.on { background: #2a2e36; color: #f4ecd8; border-color: #3a3e46; }
#app-topbar .topbar-chevron { transition: transform 0.15s; }
#app-topbar .topbar-group.open .topbar-chevron { transform: rotate(180deg); }
#app-topbar .topbar-dropdown {
display: none;
position: absolute;
top: calc(100% + 6px);
left: 0;
z-index: 30;
background: #22252c;
border: 1px solid #3a3e46;
border-radius: 8px;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
padding: 6px;
grid-template-columns: repeat(2, minmax(140px, 1fr));
gap: 2px;
}
#app-topbar .topbar-group.open .topbar-dropdown { display: grid; }
#app-topbar .topbar-dropdown .topbar-link { padding: 7px 10px; }
#app-topbar .topbar-toggle {
display: none;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
color: #c4c0b3;
background: none;
border: 1px solid transparent;
border-radius: 6px;
cursor: pointer;
flex: none;
}
#app-topbar .topbar-toggle:hover,
#app-topbar .topbar-toggle[aria-expanded="true"] { background: #3a3e46; color: #f4ecd8; }
#app-topbar .topbar-collapsible { display: contents; }
#app-topbar .lang {
margin-left: auto;
background: #3a3e46;
color: #e8e6e0;
border: 1px solid #4a4e56;
border-radius: 6px;
padding: 4px 8px;
font-size: 12px;
font-family: inherit;
cursor: pointer;
}
#app-topbar .lang:focus { outline: none; border-color: #e0573e; }
#app-topbar .topbar-legal {
color: #7f8c8d;
font-size: 11px;
text-decoration: none;
white-space: nowrap;
}
#app-topbar .topbar-legal:hover { color: #c4c0b3; text-decoration: underline; }
#app-topbar .topbar-changelog {
display: inline-flex;
align-items: center;
gap: 5px;
}
#app-topbar .topbar-pastille {
background: #c0392b;
color: #fff;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1;
padding: 2px 4px;
border-radius: 3px;
}
#app-topbar .topbar-toggle { position: relative; }
#app-topbar .topbar-toggle-dot { display: none; }
#app-topbar .topbar-donate {
background: #c0392b;
color: #fff;
font-size: 12px;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
padding: 5px 12px;
border-radius: 20px;
border: 1px solid #e0573e;
transition: background 0.15s;
}
#app-topbar .topbar-donate:hover { background: #e0573e; }
@media (max-width: 640px) {
#app-topbar .topbar-legal { display: none; }
}
@media (max-width: 560px) {
#app-topbar .brand span { display: none; }
#app-topbar .brand { padding-right: 8px; }
}
@media (max-width: 860px) {
#app-topbar .topbar-toggle { display: inline-flex; }
#app-topbar .topbar-toggle-dot {
display: block;
position: absolute;
top: 3px;
right: 3px;
width: 7px;
height: 7px;
border-radius: 50%;
background: #c0392b;
border: 1px solid #23272e;
}
#app-topbar .topbar-collapsible {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
align-items: stretch;
background: #1b1e24;
border-bottom: 1px solid #2c3038;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
max-height: calc(100vh - 44px);
overflow-y: auto;
padding: 6px 0 10px;
z-index: 25;
}
#app-topbar .topbar-collapsible.open { display: flex; }
#app-topbar .topbar-nav {
flex-direction: column;
align-items: stretch;
gap: 1px;
padding: 2px 10px;
}
#app-topbar .topbar-link,
#app-topbar .topbar-group-toggle {
width: 100%;
box-sizing: border-box;
min-height: 44px;
padding: 10px 12px;
font-size: 14px;
border-radius: 8px;
}
#app-topbar a.topbar-link[data-group],
#app-topbar .topbar-group-toggle {
box-shadow: inset 3px 0 0 0 var(--topbar-group-color);
}
#app-topbar .topbar-group { position: static; }
#app-topbar .topbar-dropdown {
display: block !important;
position: static;
background: none;
border: none;
box-shadow: none;
padding: 0 0 0 14px;
}
#app-topbar .topbar-dropdown .topbar-link { padding: 10px 12px; }
#app-topbar .topbar-group-toggle { cursor: default; }
#app-topbar .topbar-chevron { display: none; }
#app-topbar .lang {
margin: 6px 12px 0;
width: calc(100% - 24px);
padding: 10px 12px;
font-size: 14px;
}
#app-topbar .topbar-legal {
display: block;
margin: 10px 12px 0;
font-size: 12px;
}
}
#app-topbar .topbar-search {
position: relative;
margin-left: auto;
display: flex;
align-items: center;
color: #9ca3af;
}
#app-topbar .topbar-search + .lang { margin-left: 8px; }
#app-topbar .topbar-search svg { position: absolute; left: 8px; pointer-events: none; }
#app-topbar .topbar-search input {
width: 170px;
box-sizing: border-box;
background: #2c3038;
color: #e8e6e0;
border: 1px solid #4a4e56;
border-radius: 6px;
padding: 4px 8px 4px 28px;
font-size: 12px;
font-family: inherit;
transition: width .15s ease;
}
#app-topbar .topbar-search input:focus { outline: none; border-color: #e0573e; width: 230px; }
#app-topbar .topbar-search-results {
position: absolute;
top: calc(100% + 6px);
right: 0;
width: 340px;
max-width: calc(100vw - 24px);
max-height: 70vh;
overflow-y: auto;
background: #1b1e24;
border: 1px solid #3a3e46;
border-radius: 8px;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
padding: 4px;
z-index: 40;
}
#app-topbar .topbar-search-item {
display: block;
padding: 7px 10px;
border-radius: 6px;
text-decoration: none;
color: #e8e6e0;
}
#app-topbar .topbar-search-item:hover,
#app-topbar .topbar-search-item.active { background: #2c3038; }
#app-topbar .topbar-search-name { display: block; font-size: 13px; font-weight: 600; color: #f4ecd8; }
#app-topbar .topbar-search-desc { display: block; font-size: 11.5px; line-height: 1.35; color: #9ca3af; margin-top: 2px; }
#app-topbar .topbar-search-none { padding: 8px 10px; font-size: 12px; color: #9ca3af; font-style: italic; }
@media (max-width: 860px) {
#app-topbar .topbar-search { order: -1; margin: 4px 12px 8px; }
#app-topbar .topbar-search + .lang { margin: 6px 12px 0; }
#app-topbar .topbar-search input,
#app-topbar .topbar-search input:focus { width: 100%; padding: 10px 12px 10px 30px; font-size: 14px; }
#app-topbar .topbar-search { flex-wrap: wrap; }
#app-topbar .topbar-search svg { top: 13px; }
#app-topbar .topbar-search-results { position: static; width: 100%; max-width: none; margin-top: 6px; box-shadow: none; }
}
@media (min-width: 861px) and (max-width: 1180px) {
#app-topbar .topbar-search input { width: 120px; }
#app-topbar .topbar-search input:focus { width: 200px; }
}