:root {
    --app-bg: #09101d;
    --app-surface: #111b2d;
    --app-surface-2: #17243a;
    --app-border: rgba(148, 163, 184, 0.18);
    --app-text: #e5edf8;
    --app-muted: #93a4bd;
    --app-primary: #5b8cff;
    --app-primary-strong: #3972ff;
    --app-success: #31c48d;
}

html {
    min-height: 100%;
    background: var(--app-bg);
}

body {
    min-height: 100vh;
    color: var(--app-text);
    background:
        radial-gradient(circle at 12% 8%, rgba(57, 114, 255, 0.17), transparent 32rem),
        radial-gradient(circle at 90% 10%, rgba(139, 92, 246, 0.11), transparent 28rem),
        var(--app-bg);
}

a {
    color: #8db0ff;
}

a:hover {
    color: #b7ccff;
}

.app-navbar {
    background: rgba(9, 16, 29, 0.88);
    border-bottom: 1px solid var(--app-border);
    backdrop-filter: blur(14px);
}

.brand-mark {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    color: #fff;
    font-weight: 800;
    background: linear-gradient(135deg, var(--app-primary), #8b5cf6);
    border-radius: 0.7rem;
    box-shadow: 0 0 0 4px rgba(91, 140, 255, 0.12);
}

.eyebrow {
    color: #8db0ff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.text-app-muted {
    color: var(--app-muted) !important;
}

.hero-panel,
.project-card,
.login-card,
.empty-state,
.form-panel {
    background: linear-gradient(180deg, rgba(23, 36, 58, 0.94), rgba(17, 27, 45, 0.96));
    border: 1px solid var(--app-border);
    box-shadow: 0 1.4rem 4rem rgba(0, 0, 0, 0.2);
}

.hero-panel {
    border-radius: 1.5rem;
}

.form-panel {
    border-radius: 1.2rem;
}

.btn-app-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--app-primary-strong);
    --bs-btn-border-color: var(--app-primary-strong);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #2f65e7;
    --bs-btn-hover-border-color: #2f65e7;
    --bs-btn-focus-shadow-rgb: 91, 140, 255;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #2858ca;
    --bs-btn-active-border-color: #2858ca;
}

.btn-app-surface {
    --bs-btn-color: #dce7f7;
    --bs-btn-bg: #1b2b45;
    --bs-btn-border-color: rgba(148, 163, 184, 0.27);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #263b5e;
    --bs-btn-hover-border-color: rgba(91, 140, 255, 0.55);
    --bs-btn-focus-shadow-rgb: 91, 140, 255;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #2c456e;
    --bs-btn-active-border-color: rgba(91, 140, 255, 0.65);
}

.search-control,
.form-control,
.form-select {
    color: var(--app-text);
    background-color: rgba(8, 15, 27, 0.72);
    border-color: rgba(148, 163, 184, 0.27);
}

.search-control:focus,
.form-control:focus,
.form-select:focus {
    color: var(--app-text);
    background-color: rgba(8, 15, 27, 0.9);
    border-color: var(--app-primary);
    box-shadow: 0 0 0 0.25rem rgba(91, 140, 255, 0.18);
}

.form-control::placeholder {
    color: #71829b;
}

.form-label {
    color: #dce6f4;
    font-weight: 650;
}

.form-text {
    color: var(--app-muted);
}

.form-control[type="password"] {
    letter-spacing: 0.04em;
}

.filter-chip {
    color: #bdc9dc;
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid var(--app-border);
    border-radius: 999px;
    text-decoration: none;
}

.filter-chip:hover,
.filter-chip.active {
    color: #fff;
    background: rgba(91, 140, 255, 0.2);
    border-color: rgba(91, 140, 255, 0.65);
}

.project-card {
    height: 100%;
    overflow: hidden;
    border-radius: 1.25rem;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.organization-card {
    padding-bottom: 1.25rem !important;
}

.project-card:hover {
    transform: translateY(-3px);
    border-color: rgba(91, 140, 255, 0.48);
    box-shadow: 0 1.7rem 4rem rgba(0, 0, 0, 0.28);
}

.min-w-0 {
    min-width: 0;
}

.card-actions {
    align-items: center;
}

.settings-button {
    display: grid;
    width: 2.55rem;
    height: 2.4rem;
    padding: 0;
    place-items: center;
    color: #cad6e8;
    font-size: 1.2rem;
    line-height: 1;
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid var(--app-border);
}

.settings-button:hover,
.settings-button:focus,
.settings-button.show {
    color: #fff;
    background: #263b5e;
    border-color: rgba(91, 140, 255, 0.55);
}

.dropdown-menu {
    --bs-dropdown-color: var(--app-text);
    --bs-dropdown-bg: #17243a;
    --bs-dropdown-border-color: rgba(148, 163, 184, 0.25);
    --bs-dropdown-divider-bg: rgba(148, 163, 184, 0.18);
    --bs-dropdown-link-color: #dbe6f6;
    --bs-dropdown-link-hover-color: #fff;
    --bs-dropdown-link-hover-bg: rgba(91, 140, 255, 0.16);
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: rgba(91, 140, 255, 0.25);
    box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, 0.32);
}

.dropdown-item.text-danger {
    color: #ff9aa5 !important;
}

.environment-badge {
    color: #dce7ff;
    background: rgba(91, 140, 255, 0.14);
    border: 1px solid rgba(91, 140, 255, 0.3);
}

.tag-badge {
    border: 1px solid transparent;
    font-weight: 650;
}

.tag-blue {
    color: #a9c4ff;
    background: rgba(59, 130, 246, 0.14);
    border-color: rgba(59, 130, 246, 0.25);
}

.tag-violet {
    color: #c7b5ff;
    background: rgba(139, 92, 246, 0.14);
    border-color: rgba(139, 92, 246, 0.25);
}

.tag-green {
    color: #91e6c1;
    background: rgba(16, 185, 129, 0.13);
    border-color: rgba(16, 185, 129, 0.24);
}

.tag-amber {
    color: #f9d58b;
    background: rgba(245, 158, 11, 0.13);
    border-color: rgba(245, 158, 11, 0.24);
}

.tag-cyan {
    color: #8de4ef;
    background: rgba(6, 182, 212, 0.13);
    border-color: rgba(6, 182, 212, 0.24);
}

.tag-option {
    padding: 0.55rem 0.85rem;
    color: #bdc9dc;
    cursor: pointer;
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid var(--app-border);
    border-radius: 999px;
    transition: color 140ms ease, background 140ms ease, border-color 140ms ease;
}

.tag-option:hover {
    color: #fff;
    border-color: rgba(91, 140, 255, 0.45);
}

.btn-check:checked + .tag-option {
    color: #fff;
    background: rgba(91, 140, 255, 0.24);
    border-color: rgba(91, 140, 255, 0.72);
    box-shadow: 0 0 0 3px rgba(91, 140, 255, 0.1);
}

.detail-grid {
    display: grid;
    gap: 0.7rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.detail-item {
    min-width: 0;
    padding: 0.8rem;
    background: rgba(8, 15, 27, 0.45);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 0.85rem;
}

.grid-column-full {
    grid-column: 1 / -1;
}

.detail-label {
    display: block;
    margin-bottom: 0.2rem;
    color: var(--app-muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.detail-value {
    display: block;
    overflow: hidden;
    color: #f2f6fc;
    font-size: 0.9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.copy-value-row {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.6rem;
}

.copy-value-row .detail-value {
    flex: 1;
}

.copy-text-button {
    padding: 0;
    color: #8fb0ee;
    font-size: 0.72rem;
    font-weight: 700;
    background: transparent;
    border: 0;
}

.copy-text-button:hover,
.copy-text-button:focus {
    color: #c7d8ff;
}

.server-panel {
    height: 100%;
    background:
        linear-gradient(180deg, rgba(12, 22, 38, 0.72), rgba(8, 15, 27, 0.58));
    border: 1px solid rgba(148, 163, 184, 0.17);
    border-radius: 1.1rem;
}

.server-location {
    color: #9fb0c8;
    font-size: 0.9rem;
}

.server-service-count {
    padding: 0.38rem 0.65rem;
    color: #aebed5;
    font-size: 0.72rem;
    font-weight: 700;
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 999px;
}

.server-empty-state {
    padding: 1rem;
    background: rgba(8, 15, 27, 0.38);
    border: 1px dashed rgba(148, 163, 184, 0.22);
    border-radius: 1rem;
}

.access-panel {
    background: rgba(91, 140, 255, 0.07);
    border: 1px solid rgba(91, 140, 255, 0.17);
    border-radius: 0.9rem;
}

.service-panel {
    background: rgba(8, 15, 27, 0.48);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 1rem;
}

.server-editor {
    background: linear-gradient(180deg, rgba(13, 23, 40, 0.82), rgba(8, 15, 27, 0.68));
    border: 1px solid rgba(91, 140, 255, 0.2);
    border-radius: 1.1rem;
}

.service-editor {
    background: rgba(18, 31, 51, 0.74);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 1rem;
}

.nested-fieldset {
    min-width: 0;
    padding: 1rem;
    background: rgba(8, 15, 27, 0.35);
    border: 1px solid rgba(148, 163, 184, 0.13);
    border-radius: 0.95rem;
}

.nested-fieldset legend {
    float: none;
    width: auto;
    padding: 0 0.35rem;
    color: #dce7f7;
}

.service-type-badge {
    display: inline-flex;
    padding: 0.28rem 0.55rem;
    align-items: center;
    color: #cbd8ea;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    background: rgba(148, 163, 184, 0.1);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 999px;
}

.service-type-web {
    color: #9bdcf5;
    background: rgba(6, 182, 212, 0.11);
    border-color: rgba(6, 182, 212, 0.25);
}

.service-type-database {
    color: #c8b7ff;
    background: rgba(139, 92, 246, 0.12);
    border-color: rgba(139, 92, 246, 0.25);
}

.service-type-other {
    color: #f2ca88;
    background: rgba(245, 158, 11, 0.11);
    border-color: rgba(245, 158, 11, 0.24);
}

.service-type-ssh {
    color: #9ce2c7;
    background: rgba(16, 185, 129, 0.11);
    border-color: rgba(16, 185, 129, 0.24);
}

.service-notes {
    color: #b8c6d9;
    font-size: 0.88rem;
    line-height: 1.55;
}

.secret-control {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.84rem;
}

.btn-icon {
    min-width: 2.65rem;
    color: #d7e2f3;
    background: #1e2e49;
    border-color: rgba(148, 163, 184, 0.24);
}

.btn-icon:hover,
.btn-icon:focus {
    color: #fff;
    background: #294064;
    border-color: rgba(91, 140, 255, 0.55);
}

.accordion-item,
.accordion-button,
.accordion-button:not(.collapsed) {
    color: var(--app-text);
    background: transparent;
    border-color: var(--app-border);
    box-shadow: none;
}

.accordion-button::after {
    filter: invert(1) grayscale(1);
}

.back-link {
    color: #9ab7f8;
    font-weight: 650;
    text-decoration: none;
}

.back-link:hover {
    color: #c4d5ff;
}

.sticky-save-bar {
    position: sticky;
    z-index: 20;
    bottom: 0.75rem;
    padding: 0.85rem;
    background: rgba(9, 16, 29, 0.9);
    border: 1px solid var(--app-border);
    border-radius: 1rem;
    box-shadow: 0 0.9rem 2.5rem rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(14px);
}

.tag-manager-list {
    display: grid;
    gap: 0;
}

.tag-manager-row {
    padding: 0.9rem 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.13);
}

.tag-manager-row:first-child {
    padding-top: 0;
}

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

.alert {
    border-color: rgba(255, 255, 255, 0.12);
}

.alert-success {
    color: #b9f3d9;
    background: rgba(16, 185, 129, 0.15);
}

.alert-danger {
    color: #ffc2c8;
    background: rgba(220, 53, 69, 0.17);
}

.alert-info {
    color: #c9dcff;
    background: rgba(59, 130, 246, 0.16);
}

.btn-close {
    filter: invert(1) grayscale(1);
}

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

.login-card {
    width: min(100%, 30rem);
    border-radius: 1.5rem;
}

.login-aside {
    min-height: 100vh;
    background:
        linear-gradient(145deg, rgba(57, 114, 255, 0.23), rgba(139, 92, 246, 0.13)),
        #0d1728;
    border-right: 1px solid var(--app-border);
}

.login-aside-content {
    max-width: 39rem;
}

.security-list li {
    margin-bottom: 0.9rem;
    color: #c3d0e2;
}

.security-dot {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    margin-right: 0.65rem;
    background: var(--app-success);
    border-radius: 999px;
    box-shadow: 0 0 0 5px rgba(49, 196, 141, 0.1);
}

.footer-note {
    color: #74859d;
}

@media (max-width: 767.98px) {
    .detail-grid {
        grid-template-columns: 1fr;
    }

    .hero-panel {
        border-radius: 1.1rem;
    }

    .project-card:hover {
        transform: none;
    }

    .card-actions {
        width: 100%;
    }

    .card-actions > .btn {
        flex: 1;
    }

    .sticky-save-bar {
        bottom: 0;
        margin-right: -0.5rem;
        margin-left: -0.5rem;
        border-radius: 0.9rem 0.9rem 0 0;
    }

    .nested-fieldset {
        padding: 0.8rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}