:root {
    --app-bg: #080b12;
    --app-panel: #111722;
    --app-panel-2: #151d2b;
    --app-panel-3: #0c111b;
    --app-line: #253044;
    --app-text: #f7f8fb;
    --app-muted: #8f9bb0;
    --app-red: #ff3d5a;
    --app-red-dark: #dc2745;
    --app-blue: #6c8cff;
    --app-green: #36d399;
    --app-sidebar-width: 276px;
    --app-shadow: 0 22px 60px rgba(0, 0, 0, .24);
}

* { box-sizing: border-box; }

body.app-authenticated {
    min-height: 100vh;
    margin: 0;
    color: var(--app-text);
    background: radial-gradient(circle at 94% 0, rgba(255, 61, 90, .08), transparent 28%), var(--app-bg);
    font: 15px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.app-shell { min-height: 100vh; }

.app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1040;
    display: flex;
    width: var(--app-sidebar-width);
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid var(--app-line);
    background: rgba(13, 18, 28, .98);
    box-shadow: 16px 0 50px rgba(0, 0, 0, .12);
}

.app-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 20px 18px;
    color: var(--app-text);
    text-decoration: none;
}
.app-brand:hover { color: var(--app-text); }
.app-brand-mark {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(135deg, var(--app-red), #ff7043);
    box-shadow: 0 10px 28px rgba(255, 61, 90, .24);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: -.04em;
}
.app-brand-copy { display: grid; line-height: 1.18; }
.app-brand-copy strong { font-size: 18px; letter-spacing: -.03em; }
.app-brand-copy small { margin-top: 3px; color: var(--app-muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }

.app-module-card {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 8px;
    align-items: center;
    gap: 10px;
    margin: 0 16px 18px;
    padding: 12px;
    border: 1px solid rgba(108, 140, 255, .24);
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(108, 140, 255, .12), rgba(21, 29, 43, .85));
}
.app-module-card > span:nth-child(2) { display: grid; min-width: 0; }
.app-module-card small { color: var(--app-muted); font-size: 9px; letter-spacing: .09em; text-transform: uppercase; }
.app-module-card strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.app-module-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: #c7d0ff; background: rgba(108, 140, 255, .13); }
.app-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--app-green); box-shadow: 0 0 0 4px rgba(54, 211, 153, .11); }

.app-navigation {
    display: block;
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 16px 22px;
    scrollbar-color: #303a4c transparent;
    scrollbar-width: thin;
}
.app-nav-label { display: block; margin: 22px 10px 8px; color: #667287; font-size: 9px; font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }
.app-nav-link,
.app-nav-group > summary {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 43px;
    margin: 3px 0;
    padding: 8px 10px;
    border-radius: 10px;
    color: var(--app-muted);
    font-size: 13px;
    font-weight: 680;
    text-decoration: none;
    transition: background .16s ease, color .16s ease, transform .16s ease;
}
.app-nav-link:hover,
.app-nav-link.active,
.app-nav-group > summary:hover,
.app-nav-group > summary.active { color: var(--app-text); background: var(--app-panel-2); }
.app-nav-link.active,
.app-nav-group > summary.active { box-shadow: inset 3px 0 var(--app-red); }
.app-nav-link:hover { transform: translateX(2px); }
.app-nav-symbol {
    display: grid;
    width: 27px;
    height: 27px;
    place-items: center;
    border: 1px solid rgba(143, 155, 176, .13);
    border-radius: 8px;
    color: #aeb8cb;
    background: rgba(255, 255, 255, .025);
    font-size: 11px;
    font-weight: 900;
}
.app-nav-link.active .app-nav-symbol,
.app-nav-group > summary.active .app-nav-symbol { color: #fff; border-color: rgba(255, 61, 90, .28); background: rgba(255, 61, 90, .1); }
.app-social-symbol { color: #ff8ca0; }
.app-nav-badge { padding: 3px 7px; border-radius: 999px; color: #bac5ff; background: rgba(108, 140, 255, .13); font-size: 9px; font-weight: 800; }
.app-nav-group { margin: 0; }
.app-nav-group > summary { cursor: pointer; list-style: none; }
.app-nav-group > summary::-webkit-details-marker { display: none; }
.app-chevron { color: #5f6b7f; transition: transform .18s ease; }
.app-nav-group[open] .app-chevron { transform: rotate(180deg); }
.app-nav-children { display: grid; gap: 2px; margin: 2px 0 7px 45px; padding-left: 11px; border-left: 1px solid var(--app-line); }
.app-nav-children a { padding: 7px 9px; border-radius: 8px; color: #778398; font-size: 11px; font-weight: 650; text-decoration: none; }
.app-nav-children a:hover,
.app-nav-children a.active { color: var(--app-text); background: rgba(255, 255, 255, .035); }
.app-nav-children a.active { color: #ff9aac; }

.app-sidebar-footer { padding: 15px 16px 18px; border-top: 1px solid var(--app-line); background: rgba(9, 13, 21, .72); }
.app-language-switch { display: flex; gap: 4px; margin-bottom: 12px; }
.app-language-switch a { padding: 4px 8px; border-radius: 6px; color: #647086; font-size: 9px; font-weight: 850; text-decoration: none; }
.app-language-switch a.active { color: var(--app-text); background: #202a3b; }
.app-profile-link { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 10px; color: var(--app-text); text-decoration: none; }
.app-profile-link:hover { color: var(--app-text); }
.app-profile-link > span:last-child { display: grid; min-width: 0; }
.app-profile-link strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.app-profile-link small { color: var(--app-muted); font-size: 10px; }
.app-user-avatar { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 10px; color: #d2d9ff; background: #222c3e; font-size: 12px; font-weight: 850; }
.app-logout { display: flex; width: 100%; justify-content: space-between; margin-top: 10px; padding: 7px 0 0; border: 0; color: #717e93; background: transparent; font-size: 11px; cursor: pointer; }
.app-logout:hover { color: #ff9aac; }

.app-workspace { min-height: 100vh; margin-left: var(--app-sidebar-width); }
.app-topbar { position: sticky; top: 0; z-index: 1020; display: flex; min-height: 74px; align-items: center; justify-content: space-between; gap: 24px; padding: 12px clamp(22px, 4vw, 58px); border-bottom: 1px solid rgba(37, 48, 68, .72); background: rgba(8, 11, 18, .82); backdrop-filter: blur(18px); }
.app-topbar-main { display: flex; align-items: center; gap: 13px; }
.app-topbar-main > div { display: grid; }
.app-topbar-main strong { max-width: 620px; overflow: hidden; color: var(--app-text); font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.app-eyebrow { color: var(--app-red); font-size: 8px; font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }
.app-topbar-account { display: flex; align-items: center; gap: 9px; color: var(--app-text); text-decoration: none; }
.app-topbar-account:hover { color: var(--app-text); }
.app-topbar-account > span:last-child { display: grid; max-width: 250px; }
.app-topbar-account strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.app-topbar-account small { color: var(--app-muted); font-size: 9px; }
.app-menu-button { display: none; width: 40px; height: 40px; place-content: center; gap: 4px; padding: 9px; border: 1px solid var(--app-line); border-radius: 10px; background: var(--app-panel); }
.app-menu-button span:not(.visually-hidden) { display: block; width: 18px; height: 2px; border-radius: 2px; background: #bec7d8; }
.app-sidebar-backdrop { display: none; }
.app-content { width: 100%; max-width: 1680px; margin: 0 auto; padding: 16px clamp(12px, 2.8vw, 42px) 72px; }

/* Bestehende Bootstrap-Oberfläche in das gemeinsame App-Design integrieren. */
.app-authenticated .container { max-width: 1480px; }
.app-authenticated .card,
.app-authenticated .modal-content,
.app-authenticated .list-group-item { color: var(--app-text); border: 1px solid var(--app-line) !important; background: linear-gradient(145deg, rgba(21, 29, 43, .98), rgba(14, 20, 30, .98)); box-shadow: var(--app-shadow); }
.app-authenticated .card { border-radius: 17px; }
.app-authenticated .card-header,
.app-authenticated .card-footer { border-color: var(--app-line); background: rgba(12, 17, 27, .55); }
.app-authenticated .bg-white { background: var(--app-panel) !important; }
.app-authenticated .bg-light { color: var(--app-text) !important; border-color: var(--app-line) !important; background: var(--app-panel-3) !important; }
.app-authenticated .text-dark { color: var(--app-text) !important; }
.app-authenticated .text-muted,
.app-authenticated .form-text { color: var(--app-muted) !important; }
.app-authenticated .border,
.app-authenticated .border-top,
.app-authenticated .border-bottom { border-color: var(--app-line) !important; }
.app-authenticated hr { border-color: var(--app-line); opacity: 1; }

.app-authenticated .table { --bs-table-bg: transparent; --bs-table-color: var(--app-text); --bs-table-border-color: var(--app-line); --bs-table-striped-bg: rgba(255, 255, 255, .025); --bs-table-striped-color: var(--app-text); --bs-table-hover-bg: rgba(108, 140, 255, .07); --bs-table-hover-color: var(--app-text); color: var(--app-text); }
.app-authenticated .table > :not(caption) > * > * { padding-top: .85rem; padding-bottom: .85rem; border-color: var(--app-line); }
.app-authenticated .table td,
.app-authenticated .table th { vertical-align: top; }
.app-authenticated .table thead th { color: var(--app-muted); font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }

.app-authenticated .form-control,
.app-authenticated .form-select,
.app-authenticated .input-group-text,
.app-authenticated textarea { color: var(--app-text); border-color: var(--app-line); border-radius: 10px; background-color: var(--app-panel-3); }
.app-authenticated .form-control:focus,
.app-authenticated .form-select:focus,
.app-authenticated textarea:focus { color: var(--app-text); border-color: var(--app-blue); background-color: var(--app-panel-3); box-shadow: 0 0 0 .2rem rgba(108, 140, 255, .13); }
.app-authenticated .form-control::placeholder,
.app-authenticated textarea::placeholder { color: #606c80; }
.app-authenticated .form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2398a4b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
.app-authenticated .form-check-input { border-color: #46536a; background-color: var(--app-panel-3); }
.app-authenticated .form-check-input:checked { border-color: var(--app-red); background-color: var(--app-red); }

.app-authenticated .btn { border-radius: 10px; font-weight: 700; }
.app-authenticated .btn-primary { border-color: transparent; background: linear-gradient(135deg, var(--app-red), var(--app-red-dark)); box-shadow: 0 9px 24px rgba(255, 61, 90, .16); }
.app-authenticated .btn-primary:hover,
.app-authenticated .btn-primary:focus { border-color: transparent; background: linear-gradient(135deg, #ff526c, #e52d4d); }
.app-authenticated .btn-outline-primary { color: #aebcff; border-color: rgba(108, 140, 255, .55); }
.app-authenticated .btn-outline-primary:hover { color: #fff; border-color: var(--app-blue); background: var(--app-blue); }
.app-authenticated .btn-outline-secondary { color: #b4bfd1; border-color: #46536a; }
.app-authenticated .btn-outline-secondary:hover { color: #fff; border-color: #5a6880; background: #303b4e; }
.app-authenticated .btn-light { color: var(--app-text); border-color: var(--app-line); background: #202a3b; }

.app-authenticated a { color: #9baeff; }
.app-authenticated a:hover { color: #c1cbff; }
.app-authenticated .alert { border-radius: 11px; }
.app-authenticated .alert-success { color: #9ef0d0; border-color: rgba(54, 211, 153, .3); background: rgba(54, 211, 153, .1); }
.app-authenticated .alert-danger { color: #ff9aac; border-color: rgba(255, 61, 90, .3); background: rgba(255, 61, 90, .1); }
.app-authenticated .alert-info { color: #c1ccff; border-color: rgba(108, 140, 255, .3); background: rgba(108, 140, 255, .1); }
.app-authenticated .dropdown-menu { color: var(--app-text); border-color: var(--app-line); background: #141c29; box-shadow: var(--app-shadow); }
.app-authenticated .dropdown-item { color: #b8c2d3; }
.app-authenticated .dropdown-item:hover,
.app-authenticated .dropdown-item:focus { color: #fff; background: #202a3b; }
.app-authenticated .pagination { --bs-pagination-bg: var(--app-panel); --bs-pagination-color: #b8c4ff; --bs-pagination-border-color: var(--app-line); --bs-pagination-hover-bg: #202a3b; --bs-pagination-hover-color: #fff; --bs-pagination-hover-border-color: #39465c; --bs-pagination-active-bg: var(--app-red); --bs-pagination-active-border-color: var(--app-red); --bs-pagination-disabled-bg: #111722; --bs-pagination-disabled-border-color: var(--app-line); }
.app-authenticated code,
.app-authenticated pre { color: #bec8ff; }

.app-guest { min-height: 100vh; background: #f4f6fa; }
.app-guest-content { max-width: 1200px; margin: 0 auto; padding: 0 12px 10px; }

@media (max-width: 1200px) {
    :root { --app-sidebar-width: 258px; }
    .app-content { padding-left: 10px; padding-right: 10px; }
}

@media (max-width: 960px) {
    .app-sidebar { width: min(310px, 88vw); transform: translateX(-105%); transition: transform .22s ease; }
    .sidebar-open .app-sidebar { transform: translateX(0); }
    .app-sidebar-backdrop { position: fixed; inset: 0; z-index: 1035; display: block; visibility: hidden; border: 0; background: rgba(0, 0, 0, .58); opacity: 0; transition: opacity .2s ease, visibility .2s ease; }
    .sidebar-open .app-sidebar-backdrop { visibility: visible; opacity: 1; }
    .app-workspace { margin-left: 0; }
    .app-menu-button { display: grid; }
    .app-topbar { padding: 11px 18px; }
    .app-topbar-account > span:last-child { display: none; }
    .app-content { padding-top: 8px; }
}

@media (max-width: 560px) {
    .app-topbar { min-height: 66px; padding: 9px 12px; }
    .app-topbar-main strong { max-width: 210px; font-size: 14px; }
    .app-topbar-account { display: none; }
    .app-content { padding-right: 2px; padding-left: 2px; }
    .app-authenticated .container { padding-right: 12px; padding-left: 12px; }
    .app-authenticated .card-body { padding: 1rem; }
}

/* AI-Trackr Markenfarbwelt */
:root {
    --app-bg: #07111f;
    --app-panel: #111827;
    --app-panel-2: #18243a;
    --app-panel-3: #0b1627;
    --app-line: #263755;
    --app-text: #f8fbff;
    --app-muted: #93a0bb;
    --app-red: #0d6efd;
    --app-red-dark: #0a58ca;
    --app-blue: #4dabf7;
    --app-shadow: 0 22px 60px rgba(0, 7, 20, .3);
}

body.app-authenticated,
body.app-guest {
    background: radial-gradient(circle at 90% 0, rgba(13, 110, 253, .14), transparent 34%), radial-gradient(circle at 15% 96%, rgba(77, 171, 247, .06), transparent 30%), var(--app-bg);
}

.app-sidebar { border-right-color: #1e304d; background: rgba(7, 17, 31, .98); }
.app-brand-mark { background: linear-gradient(135deg, #0d6efd, #4dabf7); box-shadow: 0 10px 28px rgba(13, 110, 253, .3); }
.app-module-card { border-color: rgba(77, 171, 247, .3); background: linear-gradient(135deg, rgba(13, 110, 253, .14), rgba(24, 36, 58, .88)); }
.app-module-icon { color: #dbe7ff; background: rgba(77, 171, 247, .14); }
.app-nav-link:hover,
.app-nav-link.active,
.app-nav-group > summary:hover,
.app-nav-group > summary.active { background: #14233a; }
.app-nav-link.active .app-nav-symbol,
.app-nav-group > summary.active .app-nav-symbol { border-color: rgba(77, 171, 247, .4); background: rgba(13, 110, 253, .16); }
.app-social-symbol { color: #4dabf7; }
.app-nav-badge { color: #dbe7ff; background: rgba(77, 171, 247, .14); }
.app-nav-children a.active { color: #9dc2ff; }
.app-sidebar-footer { background: rgba(6, 14, 27, .78); }
.app-language-switch a.active { background: #1a2b45; }
.app-user-avatar { color: #dbe7ff; background: #1d3353; }
.app-topbar { border-bottom-color: rgba(38, 55, 85, .78); background: rgba(7, 17, 31, .84); }

.app-authenticated .card,
.app-authenticated .modal-content,
.app-authenticated .list-group-item { background: linear-gradient(145deg, rgba(24, 36, 58, .98), rgba(12, 24, 42, .98)); }
.app-authenticated .card-header,
.app-authenticated .card-footer { background: rgba(9, 22, 39, .62); }
.app-authenticated .table { --bs-table-hover-bg: rgba(77, 171, 247, .08); }
.app-authenticated .form-control:focus,
.app-authenticated .form-select:focus,
.app-authenticated textarea:focus { box-shadow: 0 0 0 .2rem rgba(77, 171, 247, .16); }
.app-authenticated .btn-primary { background: linear-gradient(135deg, #0d6efd, #0a58ca); box-shadow: 0 9px 24px rgba(13, 110, 253, .22); }
.app-authenticated .btn-primary:hover,
.app-authenticated .btn-primary:focus { background: linear-gradient(135deg, #2684ff, #0b63dc); }
.app-authenticated .btn-outline-primary { color: #9dc2ff; border-color: rgba(77, 171, 247, .58); }
.app-authenticated a { color: #9dc2ff; }
.app-authenticated a:hover { color: #dbe7ff; }
.app-authenticated .alert-info { color: #dbe7ff; border-color: rgba(77, 171, 247, .34); background: rgba(13, 110, 253, .12); }
.app-authenticated .dropdown-menu { background: #101d31; }
.app-authenticated .dropdown-item:hover,
.app-authenticated .dropdown-item:focus { background: #1a2b45; }
.app-authenticated .pagination { --bs-pagination-color: #9dc2ff; --bs-pagination-hover-bg: #1a2b45; --bs-pagination-hover-border-color: #3a577c; --bs-pagination-disabled-bg: #111827; }
.app-authenticated code,
.app-authenticated pre { color: #9dc2ff; }

body.app-guest { color-scheme: dark; color: var(--app-text); }
.app-guest .card { color: var(--app-text); border: 1px solid var(--app-line) !important; border-radius: 17px; background: linear-gradient(145deg, rgba(24, 36, 58, .98), rgba(12, 24, 42, .98)); box-shadow: var(--app-shadow) !important; }
.app-guest .text-muted,
.app-guest .form-text { color: var(--app-muted) !important; }
.app-guest .form-control,
.app-guest .form-select { color: var(--app-text); border-color: var(--app-line); background: var(--app-panel-3); }
.app-guest .form-control:focus,
.app-guest .form-select:focus { color: var(--app-text); border-color: var(--app-blue); background: var(--app-panel-3); box-shadow: 0 0 0 .2rem rgba(77, 171, 247, .16); }
.app-guest .btn-primary { border-color: transparent; background: linear-gradient(135deg, #0d6efd, #0a58ca); box-shadow: 0 9px 24px rgba(13, 110, 253, .22); }
.app-guest .btn-primary:hover,
.app-guest .btn-primary:focus { border-color: transparent; background: linear-gradient(135deg, #2684ff, #0b63dc); }
.app-guest a { color: #9dc2ff; }
.app-guest a:hover { color: #dbe7ff; }