:root {
    --mono-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    --mono-topbar-height: 50px;
    --mono-sidebar-width: 220px;
    --mono-sidebar-width-collapsed: 50px;

    --mono-radius-sm: 4px;
    --mono-radius-md: 4px;

    --mono-bg-page: #f5f6f8;
    --mono-bg-surface: #ffffff;
    --mono-bg-soft: #fff0f6;
    --mono-bg-soft-hover: #ffe3ee;
    --mono-text: #000000;
    --mono-text-muted: #868e96;
    --mono-border: #ced4da;
    --mono-border-soft: #ced4da;
    --mono-accent: #ff4798;
    --mono-accent-hover: #f73588;
    --mono-on-accent: #ffffff;
}

.mono-ui {
    font-family: var(--mono-font-family);
    background: var(--mono-bg-page);
    color: var(--mono-text);
}

.mono-ui.dds-dark-theme,
.mono-ui.mono-dark {
    --mono-bg-page: #0f1115;
    --mono-bg-surface: #1a1b1e;
    --mono-bg-soft: rgba(230, 73, 128, 0.15);
    --mono-bg-soft-hover: rgba(230, 73, 128, 0.2);
    --mono-text: #c9c9c9;
    --mono-text-muted: #909296;
    --mono-border: #5c5f66;
    --mono-border-soft: #5c5f66;
    --mono-accent: #f783ac;
    --mono-accent-hover: #ffadd0;
    --mono-on-accent: #ffffff;
}

.mono-app-topbar {
    height: var(--mono-topbar-height);
    background: var(--mono-bg-surface);
    border-bottom: 1px solid var(--mono-border-soft);
}

.mono-app-topbar-brand {
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    color: var(--mono-text);
}

.mono-app-topbar-links {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mono-app-topbar-link {
    border-radius: var(--mono-radius-sm);
    font-size: 12px;
    font-weight: 600;
    height: 30px;
    line-height: 1;
    padding: 0 14px;
}

.mono-app-topbar-link.btn.btn-light {
    background: var(--mono-bg-soft);
    color: var(--mono-accent);
    border-color: transparent;
}

.mono-app-topbar-link.btn.btn-light:hover {
    background: var(--mono-bg-soft-hover);
    color: var(--mono-accent-hover);
    border-color: transparent;
}

.mono-app-topbar-link.is-active,
.mono-app-topbar-link.btn.is-active {
    background: var(--mono-accent);
    border-color: var(--mono-accent);
    color: var(--mono-on-accent);
}

.mono-app-search {
    width: 260px;
    font-size: 12px;
    height: 30px;
    border-radius: var(--mono-radius-sm);
    color: var(--mono-text);
    background: var(--mono-bg-surface);
    border-color: var(--mono-border);
}

.mono-app-search::placeholder {
    color: var(--mono-text-muted);
}

.mono-app-sidebar {
    width: var(--mono-sidebar-width);
    background: var(--mono-bg-surface);
    border-right: 1px solid var(--mono-border-soft);
}

.mono-ui.dds-sidebar-collapsed .mono-app-sidebar,
.mono-ui.mono-sidebar-collapsed .mono-app-sidebar {
    width: var(--mono-sidebar-width-collapsed);
}

.mono-app-btn {
    border-radius: var(--mono-radius-md);
    font-size: 14px;
}

.mono-app-nav-btn {
    border: 1px solid transparent;
    background: var(--mono-bg-surface);
    color: var(--mono-text);
    min-height: 36px;
    line-height: 1.2;
    display: flex;
    align-items: center;
    transition: background-color 120ms ease, color 120ms ease;
}

.mono-app-nav-btn:hover {
    background: #f8f9fa;
    border-color: var(--mono-border-soft);
}

.mono-ui.dds-dark-theme .mono-app-nav-btn:hover,
.mono-ui.mono-dark .mono-app-nav-btn:hover {
    background: #1b2230;
}

.mono-app-nav-btn.is-active {
    background: var(--mono-bg-soft);
    border-color: transparent;
    color: var(--mono-accent);
}

.mono-app-nav-btn i {
    width: 18px;
    min-width: 18px;
    text-align: center;
}