/* 网络主机信息管理系统 - 科技风主题 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&family=Space+Grotesk:wght@400;500;700&display=swap');

:root {
    --bg-a: #eff5ff;
    --bg-b: #dff2ff;
    --bg-c: #f8fcff;
    --text: #112242;
    --muted: #4a628f;
    --line: rgba(16, 44, 92, 0.14);
    --surface: rgba(255, 255, 255, 0.78);
    --surface-strong: rgba(255, 255, 255, 0.92);
    --primary: #1b75ff;
    --primary-2: #00b9ff;
    --success: #17b890;
    --danger: #e54867;
    --shadow: 0 14px 34px rgba(13, 43, 94, 0.12);
    --shadow-soft: 0 8px 24px rgba(18, 39, 85, 0.08);
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    font-family: 'Space Grotesk', 'Noto Sans SC', 'Segoe UI', sans-serif;
    background:
        radial-gradient(circle at 10% 10%, rgba(49, 165, 255, 0.22), transparent 35%),
        radial-gradient(circle at 90% 15%, rgba(74, 226, 255, 0.24), transparent 38%),
        linear-gradient(135deg, var(--bg-a) 0%, var(--bg-b) 48%, var(--bg-c) 100%);
}

body::before {
    content: '';
    position: fixed;
    top: -140px;
    right: -110px;
    width: 360px;
    height: 360px;
    pointer-events: none;
    background: radial-gradient(circle, rgba(0, 172, 255, 0.18), rgba(0, 172, 255, 0));
}

body::after {
    content: '';
    position: fixed;
    bottom: -160px;
    left: -120px;
    width: 400px;
    height: 400px;
    pointer-events: none;
    background: radial-gradient(circle, rgba(27, 117, 255, 0.14), rgba(27, 117, 255, 0));
}

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

a:hover {
    color: #0f58c4;
}

.container,
.container-fluid {
    position: relative;
    z-index: 1;
}

.navbar.navbar-dark {
    border-bottom: 1px solid rgba(132, 199, 255, 0.3);
    background: linear-gradient(110deg, rgba(13, 37, 84, 0.94), rgba(11, 55, 112, 0.92)) !important;
    box-shadow: 0 12px 26px rgba(9, 30, 75, 0.24);
    backdrop-filter: blur(8px);
}

.navbar-brand {
    font-weight: 700;
    letter-spacing: 0.02em;
}

.navbar-dark .navbar-text {
    color: rgba(225, 240, 255, 0.92) !important;
}

.navbar-dark .nav-link {
    color: rgba(233, 244, 255, 0.9);
}

.navbar-dark .nav-link:hover,
.navbar-dark .nav-link:focus {
    color: #ffffff;
}

.card {
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: var(--shadow);
    backdrop-filter: blur(10px);
}

.card.shadow {
    border: 1px solid var(--line);
}

.card-header {
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(240, 249, 255, 0.72));
    font-weight: 600;
}

.table-responsive {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface-strong);
    box-shadow: var(--shadow-soft);
}

.table {
    margin-bottom: 0;
    --bs-table-bg: transparent;
}

.table > :not(caption) > * > * {
    border-color: var(--line);
    color: var(--text);
    vertical-align: middle;
}

.table-dark {
    --bs-table-bg: #11254a;
    --bs-table-color: #edf6ff;
}

#hostTable tbody tr:hover > * {
    background: rgba(27, 117, 255, 0.08);
}

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

.form-label {
    color: #26426f;
    font-weight: 500;
}

.form-control,
.form-select {
    border: 1px solid rgba(40, 87, 150, 0.24);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--text);
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(27, 117, 255, 0.5);
    box-shadow: 0 0 0 0.22rem rgba(27, 117, 255, 0.17);
}

.btn {
    border-radius: 10px;
    font-weight: 600;
    border-width: 1px;
    transition: all 0.22s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary {
    border: none;
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    box-shadow: 0 8px 18px rgba(19, 110, 221, 0.26);
}

.btn-success {
    border: none;
    background: linear-gradient(135deg, #1fbf94, var(--success));
}

.btn-danger {
    border: none;
    background: linear-gradient(135deg, #ff6b7f, var(--danger));
}

.btn-info {
    border: none;
    color: #fff;
    background: linear-gradient(135deg, #1d8aff, #00c6ff);
}

.btn-secondary,
.btn-outline-secondary {
    border-color: rgba(45, 82, 135, 0.35);
}

.btn-link {
    color: var(--primary);
}

.alert {
    border: 1px solid var(--line);
    border-radius: 12px;
}

.modal-content {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(250, 254, 255, 0.94);
    box-shadow: var(--shadow);
    backdrop-filter: blur(10px);
}

.modal-header,
.modal-footer {
    border-color: var(--line);
}

#hostTable td.editable {
    cursor: text;
    min-width: 80px;
}

#hostTable td.editable:hover {
    background-color: rgba(24, 137, 224, 0.09);
}

#hostTable td.editing {
    padding: 0;
}

#hostTable td.editing input {
    width: 100%;
    min-width: 60px;
    border: none;
    padding: 0.35rem 0.5rem;
    font-size: inherit;
    outline: 2px solid var(--primary);
    border-radius: 4px;
}

.modal-body .row .col-md-6 {
    margin-bottom: 0.5rem;
}

.app-center {
    display: flex;
    align-items: center;
    min-height: 100vh;
}
.app-page {
    min-height: 100vh;
}

.app-center .card-title {
    font-weight: 700;
    letter-spacing: 0.03em;
}

.api-key-block {
    border: 1px solid rgba(138, 198, 255, 0.35);
    background: linear-gradient(120deg, #0f274d, #0c3b71);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

@media (max-width: 768px) {
    body::before,
    body::after {
        opacity: 0.6;
        transform: scale(0.85);
    }

    .card {
        border-radius: 14px;
    }

    .table-responsive {
        border-radius: 14px;
    }
}