:root {
    --ui-bg: #061014;
    --ui-panel: rgba(10, 21, 27, 0.78);
    --ui-panel-solid: rgba(245, 250, 252, 0.96);
    --ui-ink: #ecf7f8;
    --ui-dark-ink: #132026;
    --ui-muted: #9db4bd;
    --ui-muted-dark: #5c6d75;
    --ui-border: rgba(145, 239, 255, 0.22);
    --ui-line: rgba(23, 47, 58, 0.12);
    --ui-cyan: #48d9ff;
    --ui-mint: #39f0b1;
    --ui-amber: #ffb443;
    --ui-red: #ff6874;
    --ui-radius: 8px;
    --ui-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
    --ui-glow: 0 0 34px rgba(72, 217, 255, 0.20);
}

html {
    background: #061014;
}

* {
    letter-spacing: 0 !important;
}

body {
    color: var(--ui-ink);
    background:
        radial-gradient(circle at 82% 12%, rgba(255, 180, 67, 0.18), transparent 27%),
        radial-gradient(circle at 22% 4%, rgba(57, 240, 177, 0.18), transparent 31%),
        linear-gradient(180deg, rgba(4, 11, 15, 0.42), rgba(4, 11, 15, 0.93) 48%, #061014 100%),
        url("./assets/ops-command-hero.png") center top / cover fixed,
        #061014 !important;
    font-family: "Avenir Next", "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif !important;
}

body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

body::before {
    background-image:
        linear-gradient(rgba(145, 239, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(145, 239, 255, 0.04) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: linear-gradient(to bottom, black 0, rgba(0,0,0,.78) 44%, transparent 88%);
}

body::after {
    background:
        linear-gradient(90deg, rgba(6, 16, 20, 0.72), transparent 24%, transparent 70%, rgba(6, 16, 20, 0.7)),
        linear-gradient(180deg, transparent 0, rgba(6, 16, 20, 0.82) 72%);
}

.app-header,
.panels-container {
    position: relative;
    z-index: 1;
}

.app-header {
    min-height: 72px;
    padding: 12px 18px !important;
    background:
        linear-gradient(90deg, rgba(4, 11, 15, 0.88), rgba(10, 27, 34, 0.72)),
        url("./assets/energy-mesh-panel.png") center / cover !important;
    border-bottom: 1px solid rgba(145, 239, 255, 0.24);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.36) !important;
    backdrop-filter: blur(18px);
    gap: 18px;
}

.app-header::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ui-cyan), var(--ui-mint), var(--ui-amber), transparent);
    opacity: .86;
}

.app-title {
    position: relative;
    min-width: 220px;
    color: #f7fbff !important;
    font-size: 0 !important;
    font-weight: 800 !important;
}

.app-title::before {
    content: "";
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: inline-grid;
    place-items: center;
    background:
        linear-gradient(135deg, rgba(72, 217, 255, .96), rgba(57, 240, 177, .96) 58%, rgba(255, 180, 67, .92));
    box-shadow:
        0 0 0 1px rgba(255,255,255,.28) inset,
        0 14px 32px rgba(72, 217, 255, .24);
}

.app-title::after {
    content: "综合运维工具箱";
    display: inline-block;
    margin-left: 12px;
    font-size: 19px;
    line-height: 38px;
    vertical-align: top;
    text-shadow: 0 0 22px rgba(72,217,255,.25);
}

.main-tabs {
    flex: 1;
    justify-content: flex-end;
    overflow-x: auto;
    gap: 6px !important;
    padding: 5px !important;
    border: 1px solid rgba(145, 239, 255, 0.16);
    border-radius: 8px !important;
    background: rgba(255,255,255,.055) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.08) inset;
    backdrop-filter: blur(16px);
}

.main-tab-btn {
    height: 38px;
    white-space: nowrap;
    padding: 0 13px !important;
    border: 1px solid transparent !important;
    border-radius: 7px !important;
    color: rgba(236,247,248,.72) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

.main-tab-btn::before {
    display: inline-block;
    margin-right: 7px;
    color: var(--ui-cyan);
}

#btn-nfc::before { content: "ID"; }
#btn-wind::before { content: "KW"; }
#btn-data::before { content: "XL"; }
#btn-doc::before { content: "DOC"; }
#btn-analysis::before { content: "AVG"; }

.main-tab-btn:hover {
    color: #fff !important;
    border-color: rgba(145,239,255,.2) !important;
    background: rgba(255,255,255,.10) !important;
}

.main-tab-btn.active {
    color: #041016 !important;
    border-color: rgba(255,255,255,.36) !important;
    background: linear-gradient(135deg, #effcff, #8df8df 62%, #ffd084) !important;
    box-shadow: 0 14px 30px rgba(57, 240, 177, .22);
}

.panels-container {
    padding: 18px;
}

.panels-container::before {
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(7, 17, 22, 0.30), rgba(7, 17, 22, 0.82)),
        url("./assets/energy-mesh-panel.png") center / cover;
    border: 1px solid rgba(145, 239, 255, .13);
    box-shadow: var(--ui-shadow);
    opacity: .78;
}

.tool-panel {
    position: relative;
    z-index: 1;
}

.tool-panel.active {
    height: 100%;
    border: 1px solid rgba(145, 239, 255, .18);
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.035)),
        rgba(7, 17, 22, .76);
    box-shadow: var(--ui-shadow), var(--ui-glow);
    backdrop-filter: blur(14px);
}

.simple-container {
    position: relative;
    max-width: 1120px !important;
    margin: 18px auto !important;
    padding: 210px 26px 26px !important;
    overflow: hidden;
    border: 1px solid rgba(145,239,255,.22);
    border-radius: 10px !important;
    background:
        linear-gradient(180deg, rgba(9, 21, 27, .82), rgba(9, 21, 27, .70)) !important;
    box-shadow: var(--ui-shadow) !important;
    color: var(--ui-ink);
}

.simple-container::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 176px;
    background:
        linear-gradient(90deg, rgba(6,16,20,.82), rgba(6,16,20,.24), rgba(6,16,20,.72)),
        url("./assets/ops-command-hero.png") center 42% / cover;
    border-bottom: 1px solid rgba(145,239,255,.20);
}

.simple-container::after {
    content: "";
    position: absolute;
    left: 26px;
    right: 26px;
    top: 154px;
    height: 1px;
    background: linear-gradient(90deg, var(--ui-cyan), var(--ui-mint), transparent);
    opacity: .9;
}

.simple-container h2 {
    position: absolute;
    top: 96px;
    left: 28px;
    right: 28px;
    margin: 0 !important;
    color: #f4fbff !important;
    text-align: left !important;
    font-size: 25px;
    font-weight: 820;
    text-shadow: 0 0 24px rgba(72,217,255,.28);
}

.input-row {
    align-items: flex-end !important;
    gap: 10px !important;
    padding: 13px !important;
    border-color: rgba(145,239,255,.16) !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,.075) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.08) inset;
}

.input-group label {
    color: rgba(236,247,248,.68) !important;
    font-weight: 700;
}

.separator {
    color: rgba(145,239,255,.48) !important;
}

input[type="text"],
.wind-input,
.wind-output,
.result-box,
select {
    border: 1px solid rgba(145,239,255,.20) !important;
    border-radius: 8px !important;
    background: rgba(245,250,252,.96) !important;
    color: var(--ui-dark-ink) !important;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

input[type="text"]:focus,
.wind-input:focus,
.wind-output:focus,
.result-box:focus,
select:focus {
    border-color: rgba(72,217,255,.84) !important;
    box-shadow: 0 0 0 4px rgba(72,217,255,.16), 0 0 24px rgba(72,217,255,.12);
    background: #fff !important;
}

.wind-input,
.wind-output {
    line-height: 1.66 !important;
}

.result-box {
    background: rgba(3, 10, 14, .92) !important;
    color: #aaf9dc !important;
    border-color: rgba(72,217,255,.24) !important;
    line-height: 1.58;
}

.output-area {
    border-top-color: rgba(145,239,255,.18) !important;
}

.output-area div,
.simple-container > div {
    color: rgba(236,247,248,.82);
}

.btn,
.data-action-btn {
    border-radius: 8px !important;
    font-weight: 760 !important;
    box-shadow: none;
}

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

.btn-add,
.btn-process,
#data-upload-btn {
    background: linear-gradient(135deg, var(--ui-cyan), var(--ui-mint)) !important;
    color: #031016 !important;
    box-shadow: 0 15px 34px rgba(57,240,177,.18);
}

.btn-copy,
#data-download-btn {
    background: linear-gradient(135deg, #101f27, #1b333d) !important;
    color: #f4fbff !important;
    border: 1px solid rgba(145,239,255,.18) !important;
}

.btn-delete,
.btn-doc-copy {
    background: rgba(255,104,116,.13) !important;
    color: #ffd7db !important;
    border: 1px solid rgba(255,104,116,.20) !important;
}

.helper-badge {
    background: rgba(57,240,177,.14) !important;
    color: #b8ffe8 !important;
    border: 1px solid rgba(57,240,177,.25);
    border-radius: 999px !important;
    font-weight: 800;
}

.data-sidebar,
.doc-sidebar {
    background:
        linear-gradient(180deg, rgba(5, 14, 18, .86), rgba(9, 22, 28, .92)),
        url("./assets/energy-mesh-panel.png") center / cover !important;
    color: #edf6f9 !important;
    border-right: 1px solid rgba(145,239,255,.18) !important;
}

.doc-sidebar {
    padding: 18px !important;
}

.data-sidebar-header {
    background: rgba(0,0,0,.24) !important;
    border-bottom: 1px solid rgba(145,239,255,.14) !important;
}

.data-sidebar-header h3,
.doc-sidebar h3 {
    color: #f7fbff !important;
    font-size: 16px;
    font-weight: 820;
}

.data-farm-item {
    border-bottom-color: rgba(255,255,255,.08) !important;
    color: rgba(237,246,249,.80);
}

.data-farm-item:hover,
.a4-summary:hover {
    background-color: rgba(255,255,255,.10) !important;
}

.data-farm-item.active {
    background: linear-gradient(90deg, rgba(72,217,255,.23), rgba(57,240,177,.10)) !important;
    color: #fff !important;
    border-left-color: var(--ui-mint) !important;
}

.data-badge {
    border-radius: 999px !important;
    background: rgba(72,217,255,.16) !important;
    color: #dffcff !important;
}

.data-main-area,
.doc-main-area {
    background:
        linear-gradient(180deg, rgba(235,247,250,.92), rgba(225,236,240,.88));
}

.data-section,
.doc-editor-container {
    border: 1px solid rgba(22, 52, 64, .13) !important;
    border-radius: 8px !important;
    background: var(--ui-panel-solid) !important;
    box-shadow: 0 18px 42px rgba(7, 22, 29, .12) !important;
}

.data-section-title {
    border-left-color: var(--ui-mint) !important;
    color: var(--ui-dark-ink) !important;
    font-size: 17px !important;
    font-weight: 820;
}

.doc-header {
    border-bottom-color: rgba(22, 52, 64, .13) !important;
}

.doc-header h2,
.data-empty-state h2 {
    color: var(--ui-dark-ink) !important;
}

.data-summary-table,
.data-excel-table,
#a4-data-table {
    border-collapse: separate !important;
    border-spacing: 0;
    color: var(--ui-dark-ink);
}

.data-summary-table th,
.data-excel-table th,
.data-excel-table tr:first-child,
#a4-data-table th {
    background: #e7f2f4 !important;
    color: #314750 !important;
}

.data-summary-table td,
.data-summary-table th,
.data-excel-table td,
.data-excel-table th,
#a4-data-table td,
#a4-data-table th {
    border-color: rgba(22, 52, 64, .11) !important;
}

.data-summary-table tr.highlight-row {
    background: rgba(255,180,67,.16) !important;
}

.data-summary-table tr.highlight-row td {
    color: #8b5606 !important;
}

.data-cell-modified {
    background: rgba(57,240,177,.16) !important;
    color: #076d55 !important;
    border-color: rgba(57,240,177,.62) !important;
}

.data-empty-state {
    margin-top: 70px !important;
    color: var(--ui-muted-dark) !important;
}

.doc-drop-zone {
    border-radius: 8px !important;
    border-color: rgba(145,239,255,.36) !important;
    background: rgba(255,255,255,.08) !important;
    color: rgba(237,246,249,.86) !important;
}

.doc-drop-zone:hover,
.doc-drop-zone.dragover {
    border-color: var(--ui-mint) !important;
    background: rgba(57,240,177,.13) !important;
}

#a4-drop-zone {
    color: var(--ui-dark-ink) !important;
    background:
        linear-gradient(90deg, rgba(255,255,255,.90), rgba(245,250,252,.84)),
        url("./assets/energy-mesh-panel.png") center / cover !important;
    border-color: rgba(22, 52, 64, .14) !important;
}

.doc-file-item {
    color: rgba(237,246,249,.80) !important;
    border-radius: 7px !important;
}

.doc-file-item:hover {
    background-color: rgba(255,255,255,.10) !important;
}

.doc-file-item.active {
    background: linear-gradient(90deg, rgba(72,217,255,.24), rgba(57,240,177,.16)) !important;
    color: #fff !important;
}

.doc-editor-content {
    color: var(--ui-dark-ink) !important;
}

.a4-summary {
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(145,239,255,.13);
    border-radius: 7px !important;
}

.a4-turbine-btn {
    color: rgba(237,246,249,.74) !important;
    border-radius: 6px;
}

.a4-turbine-btn:hover,
.a4-turbine-btn.active {
    background: rgba(57,240,177,.20) !important;
    color: #fff !important;
}

.a4-compare-col {
    background: linear-gradient(135deg, #12313b, #087f69) !important;
    color: #fff !important;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(145,239,255,.30);
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: 999px;
}

@media (max-width: 900px) {
    body {
        overflow: auto !important;
        min-height: 100vh;
        background-attachment: scroll !important;
    }

    .app-header {
        align-items: stretch !important;
        flex-direction: column;
        min-height: 0;
    }

    .app-title {
        min-width: 0;
    }

    .main-tabs {
        justify-content: flex-start;
        width: 100%;
    }

    .panels-container {
        min-height: calc(100vh - 132px);
        padding: 10px;
    }

    .panels-container::before {
        inset: 10px;
    }

    .tool-panel.flex-panel.active {
        flex-direction: column;
        overflow: auto !important;
    }

    .data-sidebar,
    .doc-sidebar {
        width: 100% !important;
        max-height: 280px;
        border-right: none !important;
        border-bottom: 1px solid rgba(145,239,255,.18);
    }

    .data-main-area,
    .doc-main-area {
        padding: 14px !important;
    }

    .simple-container {
        margin: 10px auto !important;
        padding: 190px 16px 16px !important;
    }

    .simple-container::before {
        height: 158px;
    }

    .simple-container h2 {
        top: 84px;
        left: 18px;
        right: 18px;
        font-size: 22px;
    }

    .input-row {
        align-items: stretch !important;
        flex-direction: column;
    }

    .separator {
        display: none;
    }
}