/* Chronos Admin (private Chronos tooling, not an Epic service), styled after the 2017 Epic Games Launcher (top bar, tabs,
   status boxes, its web pages' fields and buttons) and the Fortnite 1.7.2 social menu (panel layout, icons, NotoSans).
   Colours are taken from both; see docs/AdminPanel.md section 6. */

@font-face {
    font-family: 'BrutalType';
    src: url('/fonts/BrutalType-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'BrutalType';
    src: url('/fonts/BrutalType-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'BrutalType';
    src: url('/fonts/BrutalType-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'NotoSans';
    src: url('/fonts/NotoSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'NotoSans';
    src: url('/fonts/NotoSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
}

:root {
    /* Launcher */
    --page: #171717;
    --bar: #1e1e1e;
    --bar-box: #2a2a2a;
    --modal: #1f2022;
    --field: #111213;
    --field-line: #333233;
    --status-box: #1e262c;
    --status-label: #8fa0ad;
    --green: #95c990;
    --green-hover: #aae0a4;
    --online: #39e630;
    --red: #c70018;
    --red-text: #ff5a5f;
    /* Panels: the social menu's layout on the launcher's modal colour (pure black was too dark) */
    --panel: #1f2022;
    --panel-dark: #18191b;
    --row-line: #2a2b2e;
    --row-hover: #26272a;
    --line: #2e2f32;
    --line-strong: #3a3a3a;
    --away: #e5b94e;
    --offline: #8f2410;
    /* Text */
    --text: #f2f2f2;
    --soft: #c8c8c8;
    --muted: #8c8c8c;
    --dim: #5e5e5e;
    --display: 'BrutalType', 'Segoe UI', system-ui, sans-serif;
    --body: 'NotoSans', 'Noto Sans', 'Segoe UI', system-ui, sans-serif;
    --mono: ui-monospace, 'Cascadia Mono', Consolas, Menlo, monospace;
    color-scheme: dark;
}

* {
    box-sizing: border-box;
}

/* The page colour sits on the root, so the sign-in backdrop (z-index -1) shows above it and under the content */
html {
    background: var(--page);
}

html, body {
    margin: 0;
    min-height: 100%;
    color: var(--soft);
    font: 14px/1.45 var(--body);
}

a {
    color: var(--green);
}

[hidden] {
    display: none !important;
}

.muted {
    color: var(--muted);
}

.mono {
    font-family: var(--mono);
    font-size: 12px;
}

/* Icons: the white textures, tinted with the text colour */
.mask {
    display: inline-block;
    flex: none;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}

.dot {
    display: inline-block;
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--online);
}

.dot.away {
    background: var(--away);
}

.dot.offline {
    background: var(--offline);
}

/* --- Sign-in backdrop: the launcher's background page (art under a 70% black overlay) --- */

.backdrop {
    display: none;
}

body.signed-out .backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: -1;
    background: #000 url('/img/login_bg.jpg') center / cover no-repeat;
}

body.signed-out .backdrop::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
}

/* --- Top bar (launcher) --- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: stretch;
    gap: 28px;
    min-height: 56px;
    padding: 0 16px;
    background: var(--bar);
    border-bottom: 1px solid #111;
    font-family: var(--display);
}

body.signed-out .topbar {
    background: rgba(30, 30, 30, 0.85);
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
}

/* Our badge (icon.svg): the social menu's glyph style, not an Epic logo */
.brand img {
    display: block;
}

.brand-name {
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.brand-tag {
    color: var(--dim);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tabs {
    display: flex;
    align-items: stretch;
    gap: 4px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

/* The launcher's product tabs: normal case; the open one is lighter with a green top edge */
.tabs a {
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-top: 3px solid transparent;
    color: #9a9a9a;
    font-weight: 400;
    font-size: 15px;
    letter-spacing: 0.01em;
    text-decoration: none;
    white-space: nowrap;
}

.tabs a:hover {
    color: #e6e6e6;
}

.tabs a.active {
    color: #fff;
    background: var(--bar-box);
    border-top-color: var(--green);
}

.who {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.user {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    color: var(--soft);
    background: none;
    border: 0;
    font: 500 13px var(--display);
    letter-spacing: 0.02em;
    cursor: pointer;
}

.user:hover {
    color: #fff;
}

.user .dot {
    width: 11px;
    height: 11px;
    background: #3fc33f;
}

.user .mask.drop {
    width: 11px;
    height: 11px;
    color: #c8c8c8;
    --icon: url('/img/ComboDropdown.png');
}

.icon-box {
    display: flex;
    align-items: center;
    gap: 6px;
}

.icon-box a {
    display: flex;
    padding: 6px;
    color: #c8c8c8;
}

.icon-box a:hover {
    color: #fff;
}

.icon-box .mask.friends {
    width: 26px;
    height: 18px;
    --icon: url('/img/socialWidget_ico.png');
}

.icon-box .mask.gear {
    width: 18px;
    height: 18px;
    --icon: url('/img/Gear.png');
}

/* The user menu: the social menu's presence drop-down */
.menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 20;
    min-width: 240px;
    background: var(--panel);
    border: 1px solid var(--line);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    font-family: var(--body);
}

.menu-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 2px solid var(--line);
    color: var(--text);
    font-size: 16px;
}

.menu-status .state {
    color: var(--muted);
}

.menu button {
    display: block;
    width: 100%;
    padding: 11px 16px;
    color: var(--soft);
    background: none;
    border: 0;
    text-align: left;
    font: 15px var(--body);
    cursor: pointer;
}

.menu button:hover {
    background: var(--row-hover);
    color: #fff;
}

/* --- Page --- */

.main {
    max-width: 1280px;
    margin: 0 auto;
    padding: 28px 24px 48px;
}

.page-head {
    margin-bottom: 22px;
}

/* The launcher's product title ("FORTNITE"), its text and "SERVERS: ONLINE" */
.page-head h1 {
    margin: 0;
    color: #fff;
    font: 700 32px/1.2 var(--display);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.page-head p {
    max-width: 720px;
    margin: 10px 0 0;
    color: #d0d0d0;
    font: 400 15px/1.5 var(--display);
    letter-spacing: 0.01em;
}

.status-line {
    margin-top: 14px;
    color: #e6e6e6;
    font: 700 14px var(--display);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.status-line .online {
    color: var(--online);
}

.status-line .offline {
    color: var(--red-text);
}

.status-line .paused {
    color: var(--away);
}

/* Status boxes: the launcher's "Waiting In Line" box */
.stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.stat {
    padding: 16px 18px;
    background: var(--status-box);
}

.stat .label {
    color: var(--status-label);
    font: 500 11px var(--display);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.stat .value {
    margin-top: 6px;
    color: var(--text);
    font: 500 22px/1.2 var(--display);
    font-variant-numeric: tabular-nums;
}

.stat .sub {
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
    overflow-wrap: anywhere;
}

.meter {
    height: 4px;
    margin-top: 10px;
    background: rgba(255, 255, 255, 0.08);
}

.meter > div {
    height: 100%;
    width: 0;
    background: var(--green);
}

.meter.high > div {
    background: var(--away);
}

/* Panels: the social menu */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

.panel {
    margin-bottom: 14px;
    background: var(--panel);
}

.grid .panel {
    margin-bottom: 0;
}

/* Grids whose panels share the whole width (no empty columns) */
.grid.fill {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 10px 18px;
    border-bottom: 2px solid var(--line);
}

.panel-head img {
    width: 26px;
    height: 26px;
    opacity: 0.75;
}

.panel-head h2 {
    flex: 1;
    margin: 0;
    color: #a0a0a0;
    font: 400 17px var(--body);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.panel-body {
    padding: 16px 18px;
}

.panel-body.flush {
    padding: 0;
}

.tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.kv {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 18px;
    margin: 0;
}

.kv dt {
    color: var(--muted);
}

.kv dd {
    margin: 0;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

/* Rows: the social menu's friends list */
.rows {
    list-style: none;
    margin: 0;
    padding: 0;
}

.row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--row-line);
}

.row:last-child {
    border-bottom: 0;
}

.row:hover {
    background: var(--row-hover);
}

.row .avatar {
    width: 38px;
    height: 38px;
    opacity: 0.9;
}

.row .who-text {
    flex: 1;
    min-width: 0;
}

.row .name {
    color: var(--text);
    font-size: 16px;
}

.row .name .you {
    color: var(--muted);
    font-size: 13px;
}

.row .detail {
    color: var(--muted);
    font-size: 12.5px;
}

.row .controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.row .controls input {
    height: 30px;
    width: 180px;
    font-size: 13px;
}

.row.muted {
    color: var(--muted);
}

/* Roles: the launcher's presence colours */
.role-badge {
    padding: 3px 10px;
    border: 1px solid var(--line-strong);
    border-radius: 2px;
    color: var(--soft);
    font: 500 12px var(--display);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.role-badge.owner {
    color: var(--green);
    border-color: var(--green);
}

.role-badge.admin {
    color: #8fc3ff;
    border-color: #4a6f99;
}

.role-badge.tester {
    color: var(--away);
    border-color: #7a6431;
}

.detail {
    font: 12.5px var(--body);
    letter-spacing: 0;
    text-transform: none;
}

/* Owners without two-factor, or a tab older than the build: a notice under the top bar on every page */
.notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 16px;
    color: #ffe2a8;
    background: rgba(229, 185, 78, 0.14);
    border-bottom: 1px solid rgba(229, 185, 78, 0.35);
}

.qr-box {
    align-self: flex-start;
    padding: 10px;
    background: #fff;
    border-radius: 2px;
}

.qr-box .qr {
    display: block;
    width: 200px;
    height: 200px;
    image-rendering: pixelated;
}

.key {
    padding: 8px 12px;
    color: var(--text);
    background: var(--field);
    border: 1px solid var(--field-line);
    border-radius: 3px;
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: none;
    user-select: all;
}

.codes {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 6px 28px;
    margin: 0;
    padding: 12px 16px;
    list-style: none;
    background: var(--field);
    border: 1px solid var(--field-line);
    font: 16px var(--mono);
    color: var(--text);
}

textarea {
    padding: 10px 14px;
    color: #f8f8f8;
    background: var(--field);
    border: 1px solid var(--field-line);
    border-radius: 3px;
    font: 15px var(--body);
    letter-spacing: 0;
    text-transform: none;
    resize: vertical;
    outline: none;
}

textarea:focus {
    border-color: var(--green);
}

/* The owner's message on the join screen */
.message {
    margin: 0;
    padding: 10px 14px;
    color: var(--text);
    background: var(--panel);
    border-left: 3px solid var(--status-label);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.message-from {
    margin-bottom: 4px;
    color: var(--status-label);
    font: 500 11px var(--display);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.invite-result {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.invite-link {
    display: flex;
    gap: 8px;
}

.invite-link input {
    flex: 1;
    min-width: 0;
    font-family: var(--mono);
    font-size: 12px;
}

/* Fields: the launcher's web pages */
.stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--muted);
    font: 500 11px var(--display);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

label.inline {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font: 13px var(--body);
    letter-spacing: 0;
    text-transform: none;
}

input, select, button {
    font: inherit;
}

input[type="text"], input[type="password"], input[type="number"], select {
    height: 46px;
    padding: 0 14px;
    color: #f8f8f8;
    background: var(--field);
    border: 1px solid var(--field-line);
    border-radius: 3px;
    font: 15px var(--body);
    letter-spacing: 0;
    text-transform: none;
    outline: none;
    transition: border-color 0.2s;
}

select {
    height: 38px;
    font-size: 13px;
}

input:focus, select:focus {
    border-color: var(--green);
}

/* Search fields: the social menu's "Add a friend" box */
.search {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    min-width: 220px;
    padding: 0 4px;
    border-bottom: 2px solid var(--line);
    letter-spacing: 0;
    text-transform: none;
}

.search img {
    width: 20px;
    height: 20px;
    opacity: 0.85;
}

.search input {
    flex: 1;
    min-width: 0;
    height: 36px;
    color: #fff;
    background: none;
    border: 0;
    outline: none;
    font: 15px var(--body);
}

.search:focus-within {
    border-bottom-color: #555;
}

/* Buttons: the launcher's EcosystemStyle brushes. primary_btn is a filled block with 2px corners (the green Launch
   button: white BrutalType, normal case; pressed is the tint at 81%, like split_btn_right); secondary_btn is a 2px
   outline that fills on hover. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 20px;
    color: #e6e6e6;
    background: transparent;
    border: 2px solid #5a5a5a;
    border-radius: 2px;
    font: 500 15px var(--display);
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.btn:hover:not(:disabled) {
    color: #fff;
    background: #5a5a5a;
}

.btn.green {
    min-height: 52px;
    color: #fff;
    background: var(--green);
    border-color: var(--green);
    font-size: 20px;
}

.btn.green:hover:not(:disabled) {
    background: var(--green-hover);
    border-color: var(--green-hover);
}

.btn.green:active:not(:disabled) {
    background: #79a375;
    border-color: #79a375;
}

.btn.danger {
    color: #ff8a8f;
    border-color: #8a1c22;
}

.btn.danger:hover:not(:disabled) {
    color: #fff;
    background: var(--red);
    border-color: var(--red);
}

.btn.small {
    min-height: 30px;
    padding: 0 12px;
    font-size: 13px;
}

.btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.btn:focus-visible, .tabs a:focus-visible, .user:focus-visible, .icon-box a:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

.note {
    padding: 10px 14px;
    color: var(--soft);
    background: var(--status-box);
    border-left: 3px solid var(--green);
}

.error {
    padding: 10px 14px;
    color: #ffd7d9;
    background: rgba(199, 0, 24, 0.18);
    border-left: 3px solid var(--red);
}

.banner {
    margin-bottom: 14px;
    padding: 10px 14px;
    color: #ffe2a8;
    background: rgba(229, 185, 78, 0.12);
    border-left: 3px solid var(--away);
}

/* --- Sign-in: the launcher's web modal --- */

.signin {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 140px);
}

.modal {
    width: 100%;
    max-width: 440px;
    background: var(--modal);
    box-shadow: 0 0 3px 0 #000, 0 20px 60px rgba(0, 0, 0, 0.5);
}

.modal-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 26px 34px 0;
}

.modal-head img {
    width: 34px;
    height: 34px;
    opacity: 0.85;
}

.modal-head h1 {
    margin: 0;
    color: #fff;
    font: 400 22px var(--display);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.modal-body {
    padding: 22px 34px 30px;
}

.modal-foot {
    padding: 12px 34px;
    border-top: 1px solid var(--field-line);
    color: var(--dim);
    font: 11px var(--display);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Dialogs: the sign-in modal over the dimmed page */
.dialog-layer {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: rgba(0, 0, 0, 0.65);
}

.modal.dialog {
    max-width: 560px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
}

.modal.dialog .modal-head h1 {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.dialog-close {
    align-self: flex-start;
    width: 32px;
    height: 32px;
    padding: 0;
    color: var(--muted);
    background: none;
    border: 0;
    font: 26px/1 var(--body);
    cursor: pointer;
}

.dialog-close:hover {
    color: var(--text);
}

.dialog-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 20px;
}

.dialog-label {
    color: var(--muted);
    font: 500 11px var(--display);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.dialog-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
}

/* --- Log and tables --- */

.log {
    height: 420px;
    background: var(--panel-dark);
    overflow: auto;
    padding: 10px 18px;
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.55;
}

.log-line {
    color: #c8c8c8;
    white-space: pre-wrap;
    word-break: break-word;
}

.log-line .t {
    color: #5e5e5e;
}

.log-line.WARN .lv {
    color: var(--away);
}

.log-line.ERROR .lv {
    color: var(--red-text);
}

.table-wrap {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 9px 18px;
    text-align: left;
    vertical-align: top;
}

th {
    color: var(--muted);
    border-bottom: 2px solid var(--line);
    font: 500 11px var(--display);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

td {
    color: var(--soft);
    border-bottom: 1px solid var(--row-line);
}

tr:hover td {
    background: var(--row-hover);
}

/* Matchmaking (A2): buckets as social-menu section bars, states as role-badge outlines */
.mm-bucket {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding: 9px 18px;
    background: var(--panel-dark);
    border-bottom: 1px solid var(--row-line);
}

.mm-bucket .title {
    color: var(--text);
    font: 500 13px var(--display);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mm-bucket .count {
    flex: 1;
    color: var(--muted);
    font-size: 12.5px;
}

.mm-check, .mm-check-space {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 0;
}

.mm-check {
    accent-color: var(--green);
    cursor: pointer;
}

.mm-state {
    padding: 3px 10px;
    border: 1px solid var(--line-strong);
    border-radius: 2px;
    color: var(--soft);
    font: 500 11px var(--display);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.mm-state.waiting, .mm-state.free {
    color: var(--green);
    border-color: #4c6b49;
}

.mm-state.held, .mm-state.assigned, .mm-state.busy {
    color: #8fc3ff;
    border-color: #4a6f99;
}

.mm-state.paused, .mm-state.connecting, .mm-state.done {
    color: var(--away);
    border-color: #7a6431;
}

.mm-state.ingame {
    color: var(--online);
    border-color: #2f7a2a;
}

.mm-start {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 14px;
    padding: 14px 18px;
    background: var(--panel-dark);
    border-top: 2px solid var(--line);
}

.mm-start label {
    flex: 1 1 200px;
}

.mm-start .detail {
    flex-basis: 100%;
}

.mm-tag {
    margin-left: 8px;
    padding: 1px 6px;
    color: var(--away);
    border: 1px solid #7a6431;
    border-radius: 2px;
    font: 500 10px var(--display);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    vertical-align: 2px;
}

td .mm-tag {
    margin-left: 0;
}

.mm-tag.bad {
    color: var(--red-text);
    border-color: #7a2a2f;
}

/* Profiles (A4) */
.subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 18px;
}

.subtabs:empty {
    display: none;
}

.subtab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    color: var(--soft);
    background: var(--bar-box);
    border: 1px solid transparent;
    border-radius: 2px;
    font: 13px var(--mono);
    cursor: pointer;
}

.subtab:hover {
    color: var(--text);
}

.subtab.active {
    color: var(--text);
    border-color: var(--green);
}

.subtab.new {
    color: var(--dim);
    font-style: italic;
}

.subtab .count {
    padding: 0 6px;
    color: var(--muted);
    background: var(--panel-dark);
    border-radius: 2px;
    font-size: 11px;
}

.banner.info {
    color: var(--status-label);
    background: var(--status-box);
    border-left-color: var(--status-label);
}

.profile-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin: 0 0 14px;
}

.profile-head .tools {
    margin-left: auto;
}

input.qty {
    width: 120px;
    height: 30px;
    font-size: 13px;
}

.json-edit {
    min-height: 280px;
    font: 12px/1.5 var(--mono);
}

.stats-kv dd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Storage (A6) */
a.btn {
    text-decoration: none;
}

.modal-head h1.keep-case {
    text-transform: none;
}

.code {
    max-height: 60vh;
    margin: 12px 0 0;
    padding: 12px 14px;
    overflow: auto;
    color: var(--soft);
    background: var(--panel-dark);
    font: 12px/1.5 var(--mono);
    white-space: pre;
    tab-size: 4;
}

.code.desc {
    max-height: 30vh;
    white-space: pre-wrap;
}

.code.diff .add {
    color: #8fd18a;
}

.code.diff .del {
    color: var(--red-text);
}

.code.diff .hunk {
    color: #8fc3ff;
}

.code.diff .file {
    color: var(--text);
    font-weight: 700;
}

.crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    margin: 0 0 12px;
}

.crumb {
    padding: 4px 6px;
    color: var(--soft);
    background: none;
    border: 0;
    border-radius: 2px;
    font: 13px var(--mono);
    cursor: pointer;
}

.crumb:hover {
    color: var(--text);
    background: var(--bar-box);
}

tr.clickable {
    cursor: pointer;
}

.folder {
    color: var(--away);
}

.pad {
    margin: 0;
    padding: 12px 18px 0;
}

.cloud-user + .cloud-user {
    border-top: 2px solid var(--line);
}

.row.current .name {
    color: var(--green);
}

/* Accounts (A3) */
.row.clickable {
    cursor: pointer;
}

.rows.compact .row {
    padding: 6px 0;
}

.rows.compact .row:hover {
    background: none;
}

.inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.inline-form input {
    flex: 1 1 200px;
    min-width: 0;
}

.modal.dialog.wide {
    max-width: 760px;
}

.dialog-actions.left {
    justify-content: flex-start;
    margin-top: 10px;
}

/* Two fields side by side in a dialog form */
.field-row {
    display: flex;
    gap: 12px;
}

.field-row label {
    flex: 1;
    min-width: 0;
}

.field-row label.narrow {
    flex: 0 0 110px;
}

.chips, .teams {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 5px 0 3px;
}

.chip {
    padding: 2px 8px;
    color: var(--soft);
    background: var(--bar-box);
    border-radius: 2px;
    font-size: 12.5px;
}

.chip.on {
    color: var(--green);
}

/* "Coming soon": the launcher's queue box */
.queue {
    max-width: 560px;
    padding: 22px 26px;
    background: var(--status-box);
}

.queue h2 {
    margin: 0;
    color: #fff;
    font: 500 20px var(--display);
}

.queue .eta {
    margin-top: 4px;
    color: var(--status-label);
    font-size: 13px;
}

.queue ul {
    margin: 14px 0 0;
    padding-left: 18px;
    color: var(--soft);
}

.queue li + li {
    margin-top: 4px;
}

/* --- Toast: the social menu's notification --- */

.toast {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: min(440px, calc(100vw - 32px));
    padding: 12px 16px;
    color: var(--text);
    background: var(--panel);
    border: 1px solid var(--line);
    border-left: 3px solid var(--green);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

.toast img {
    width: 20px;
    height: 20px;
}

.toast.bad {
    border-left-color: var(--red);
}

/* --- Narrow screens --- */

/* The full bar needs about 1250px with the tag and 1050px without it */
@media (max-width: 1279px) {
    .brand-tag {
        display: none;
    }
}

/* Too narrow for the tabs beside the brand: the tabs get a row of their own */
@media (max-width: 1080px) {
    .topbar {
        flex-wrap: wrap;
        gap: 0 12px;
        padding: 0 12px;
    }

    .brand {
        min-height: 50px;
    }

    .tabs {
        order: 3;
        width: calc(100% + 24px);
        margin: 0 -12px;
        padding: 0 4px;
        border-top: 1px solid #111;
    }

    .tabs a {
        min-height: 44px;
        padding: 0 10px;
    }
}

@media (max-width: 720px) {
    .icon-box {
        display: none;
    }

    .main {
        padding: 20px 16px 40px;
    }

    .page-head h1 {
        font-size: 24px;
    }

    .modal-head, .modal-body, .modal-foot {
        padding-left: 20px;
        padding-right: 20px;
    }

    .log {
        height: 320px;
    }

    .grid {
        grid-template-columns: 1fr;
    }
}