.app-main h3,
.app-main .display-4 {
    font-weight: 650;
    letter-spacing: -0.03em;
    color: #f3f6f9;
}

.app-shell .card {
    background: #161d27;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 12px 28px rgba(0, 0, 0, 0.28);
    color: #d5dee7;
}

.app-shell .card-header {
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.app-shell .card-body {
    color: #d5dee7;
}

.app-shell .card.border-secondary,
.app-shell .card.border-primary {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.app-shell .form-control,
.app-shell .form-select,
.app-shell select.form-control,
.app-shell textarea.form-control {
    background: #0f141c;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #e8eef4;
    box-shadow: none;
}

.app-shell .form-control:focus,
.app-shell .form-select:focus,
.app-shell select.form-control:focus {
    background: #121923;
    border-color: rgba(125, 211, 252, 0.55);
    color: #fff;
    box-shadow: 0 0 0 3px rgba(125, 211, 252, 0.12);
}

.app-shell input[readonly],
.app-shell input[disabled],
.app-shell select[disabled],
.app-shell textarea[readonly] {
    background: #141b24 !important;
    color: #b7c4d0 !important;
    border-color: rgba(255, 255, 255, 0.08);
    opacity: 1;
}

.app-shell .form-control::placeholder {
    color: #7b8b99;
}

.app-shell .form-floating > .form-control::placeholder,
.app-shell .form-floating > .form-control:focus::placeholder {
    color: transparent !important;
}

.app-shell .btn {
    border-radius: 10px;
}

.app-shell .btn-secondary {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
    color: #e8eef4;
}

.app-shell .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.app-shell .btn-outline-primary,
.app-shell .btn-outline-secondary {
    border-radius: 10px;
}

.app-shell .nav-tabs {
    border-bottom: 0;
    gap: 0.3rem;
    margin-bottom: 1rem;
}

.app-shell .nav-tabs .nav-item {
    margin: 0;
}

.app-shell .nav-tabs .nav-link {
    border: 0;
    border-radius: 10px;
    color: #93a4b4;
    background: transparent;
    padding: 0.45rem 0.85rem;
}

.app-shell .nav-tabs .nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

.app-shell .nav-tabs .nav-link.active {
    color: #fff;
    background: rgba(125, 211, 252, 0.14);
}

#deviceControlsWrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
    margin: 0 0 0.7rem;
    padding: 0.35rem 0.65rem;
    border-radius: 12px;
    background: #161d27;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 8px 18px rgba(0, 0, 0, 0.18);
}

.device-controls-field,
.device-controls-actions,
.device-controls-page {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
}

.device-controls-field > span,
.device-controls-page > span {
    color: #8b9bab;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

#deviceControlsWrapper .form-control {
    height: 1.8rem;
    min-height: 1.8rem;
    width: 8.75rem;
    padding: 0.1rem 0.45rem;
    font-size: 0.8rem;
    line-height: 1.2;
    border-radius: 8px;
}

#deviceControlsWrapper .device-controls-search .form-control {
    width: 12.5rem;
}

#deviceControlsWrapper .device-controls-page .form-control,
#deviceControlsWrapper #currentPageInput {
    width: 3.4rem;
    text-align: center;
}

#deviceControlsWrapper .device-controls-page select.form-control {
    width: 4.25rem;
    text-align: left;
}

#deviceControlsWrapper .btn-sm {
    height: 1.8rem;
    min-height: 1.8rem;
    padding: 0 0.55rem;
    font-size: 0.75rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

#deviceControlsWrapper .device-controls-icon {
    width: 1.8rem;
    padding: 0;
    justify-content: center;
}

.device-controls-check {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    color: #d5dee7;
    font-size: 0.8rem;
    white-space: nowrap;
    cursor: pointer;
}

.device-controls-check input {
    width: 0.9rem;
    height: 0.9rem;
    margin: 0;
    accent-color: #7dd3fc;
}

.device-controls-page {
    margin-left: auto;
}

@media (max-width: 900px) {
    .device-controls-page {
        margin-left: 0;
    }
}

#deviceListDiv {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    gap: 0.9rem;
    overflow: visible;
    padding: 0 !important;
    margin-bottom: 5rem !important;
}

.device-card .device-power-icon {
    width: 13px;
    height: 13px;
}

.device-card:hover {
    border-color: rgba(125, 211, 252, 0.45);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 0 0 1px rgba(125, 211, 252, 0.28),
        0 14px 30px rgba(0, 0, 0, 0.32);
}

.app-shell .dropdown-menu {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: #161d27;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
    padding: 0.35rem;
}

.app-shell .dropdown-menu.show {
    animation: menu-in 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

.app-shell .dropdown-item {
    border-radius: 8px;
    color: #d5dee7;
}

.app-shell .dropdown-item:hover {
    background: rgba(125, 211, 252, 0.12);
    color: #fff;
}

@keyframes menu-in {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

#alertsButton {
    border-radius: 12px !important;
}

#alertsFrame {
    background: #161d27 !important;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: -18px 0 40px rgba(0, 0, 0, 0.35);
}

.chat-card {
    border-radius: 16px !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    background: #161d27 !important;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

.chat-header {
    background: #1c2532 !important;
}

.scripts-tree-view {
    background: #161d27;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px !important;
}

.jumbotron {
    background: #161d27;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 18px 40px rgba(0, 0, 0, 0.28);
}

.terminal-frame {
    left: 278px;
    right: 12px;
    bottom: 12px;
}

.terminal-header .terminal-button {
    border-radius: 12px 12px 0 0;
}

.terminal-body {
    border-radius: 0 12px 12px 12px !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    background: #10151c !important;
}

.cmd-layer {
    position: fixed;
    inset: 0;
    z-index: 80;
    pointer-events: none;
}

.cmd-window {
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 720px;
    height: 420px;
    min-width: 360px;
    min-height: 240px;
    overflow: hidden;
    resize: both;
    border-radius: 14px;
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.55);
}

.file-window { background:#0b1220; min-width:540px; min-height:360px; }
.file-window .cmd-titlebar .oi-folder { color:#60a5fa; font-size:.85rem; }
.file-window-toolbar { display:flex; align-items:center; gap:.5rem; padding:.65rem; border-bottom:1px solid rgba(148,163,184,.14); background:#111b2a; }
.file-window-toolbar > button { flex:0 0 auto; width:36px; height:36px; border:1px solid rgba(148,163,184,.16); border-radius:9px; background:rgba(148,163,184,.08); color:#cbd5e1; }
.file-window-toolbar svg,.file-browser-actions svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.file-window-toolbar .file-toolbar-action { width:auto; padding:0 .7rem; display:inline-flex; align-items:center; gap:.4rem; color:#bfdbfe; font-size:.76rem; font-weight:650; }
.file-window-toolbar > button:hover:not(:disabled) { background:rgba(96,165,250,.14); color:#dbeafe; }
.file-window-toolbar > button:disabled { opacity:.35; }
.file-window-toolbar .file-browser-upload { min-height:36px; padding:.42rem .7rem; font-size:.78rem; }
.file-window-content { position:relative; flex:1 1 auto; min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; background:linear-gradient(145deg,rgba(15,23,42,.96),rgba(17,24,39,.9)); }
.file-window-content .file-browser-empty { min-height:100%; }
@media (max-width:650px) { .file-window{min-width:320px}.file-window-toolbar .file-browser-upload{font-size:0;width:38px;padding:0}.file-window-toolbar .file-browser-upload .oi{font-size:.9rem}.file-window .file-browser-row{grid-template-columns:minmax(0,1fr) 80px 48px} }

.cmd-titlebar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    padding: 0.55rem 0.55rem 0.55rem 0.8rem;
    background: #1b232c;
    cursor: grab;
    user-select: none;
    touch-action: none;
}

.cmd-titlebar:active {
    cursor: grabbing;
}

.cmd-titlebar .oi-terminal {
    color: #7dd3fc;
    font-size: 0.78rem;
}

.cmd-title {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #e8eef4;
    font-size: 0.86rem;
    font-weight: 600;
}

.cmd-shell-switch {
    display: inline-flex;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    cursor: default;
}

.cmd-shell-btn {
    border: 0;
    background: transparent;
    color: #8fa0b0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.18rem 0.55rem;
    cursor: pointer;
}

.cmd-shell-btn.active {
    background: #2563eb;
    color: #fff;
}

.cmd-meta {
    flex-shrink: 0;
    color: #8092a3;
    font-size: 0.72rem;
    font-weight: 500;
}

.cmd-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.7rem;
    height: 1.7rem;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: #c5d0da;
    cursor: pointer;
}

.cmd-close:hover {
    background: rgba(220, 53, 69, 0.24);
    color: #fff;
}

.cmd-screen {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    background: #000;
}

.cmd-output {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: 0.35rem 0.5rem;
    overflow: auto;
    background: #000 !important;
    color: #c0c0c0 !important;
    font-family: Consolas, "Lucida Console", "Courier New", monospace;
    font-size: 0.92rem;
    line-height: 1.2;
    white-space: pre-wrap;
    word-break: break-word;
    cursor: text;
}

.cmd-caret {
    display: inline;
    color: #c0c0c0;
    font-weight: 700;
}

.cmd-hidden {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    border: 0;
    padding: 0;
    margin: 0;
}

.details-name-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.9rem;
}

.app-shell a.details-name-card,
.app-shell a.details-name-card:visited {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    width: 15.5rem;
    max-width: 100%;
    margin: 0;
    padding: 0.85rem 0.95rem;
    text-decoration: none !important;
    color: #f3f6f9 !important;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.app-shell a.details-name-card:hover,
.app-shell a.details-name-card:focus {
    color: #fff !important;
    text-decoration: none !important;
    transform: translateY(-3px);
    border-color: rgba(125, 211, 252, 0.45);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 0 0 1px rgba(125, 211, 252, 0.28),
        0 14px 30px rgba(0, 0, 0, 0.32);
}

.details-status {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
}

.details-power {
    display: block;
    width: 13px;
    height: 13px;
}

.details-name-card.online .details-status,
.details-sheet.online .details-status {
    background: rgba(25, 135, 84, 0.2);
    box-shadow: 0 0 0 1px rgba(57, 197, 122, 0.28);
}

.details-name-card.online .details-power,
.details-sheet.online .details-power,
.details-sheet.online .details-state {
    color: #3dd68c;
}

.details-name-card.offline .details-status,
.details-sheet.offline .details-status {
    background: rgba(220, 53, 69, 0.16);
    box-shadow: 0 0 0 1px rgba(241, 174, 181, 0.22);
}

.details-name-card.offline .details-power,
.details-sheet.offline .details-power,
.details-sheet.offline .details-state {
    color: #f0a3ab;
}

.details-name-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.98rem;
    font-weight: 650;
    letter-spacing: -0.03em;
}

.details-count {
    margin-left: auto;
    color: #8b9bab;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.details-empty {
    padding: 1.1rem 1rem;
    color: #93a4b4;
}

.details-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.75rem;
}

.details-back {
    color: #7dd3fc !important;
    text-decoration: none !important;
    font-size: 0.8rem;
    font-weight: 600;
}

.details-back:hover {
    color: #fff !important;
}

.details-switcher {
    max-width: 16rem;
    height: 1.8rem;
    min-height: 1.8rem;
    padding: 0.1rem 0.45rem;
    font-size: 0.8rem;
    border-radius: 8px;
}

.details-sheet {
    padding: 0.95rem 1.1rem 0.35rem;
    margin-bottom: 1rem;
}

.details-sheet-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 0.9rem;
    padding-bottom: 0.95rem;
    margin-bottom: 0.15rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.details-sheet-id {
    min-width: 0;
    flex: 1;
}

.details-sheet-name {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 650;
    letter-spacing: -0.03em;
    color: #f3f6f9;
}

.details-sheet-sub {
    display: flex;
    align-items: center;
    margin-top: 0.15rem;
    font-size: 0.74rem;
    color: #8092a3;
}

.details-dot {
    margin: 0 0.35rem;
    opacity: 0.6;
}

.details-sheet-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-left: auto;
}

.details-chip,
.details-action {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.42rem 0.7rem;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: #e8eef4;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.2;
}

.details-action {
    cursor: pointer;
}

.details-action:hover {
    background: rgba(125, 211, 252, 0.16);
    color: #fff;
}

.details-chip .oi,
.details-action .oi {
    font-size: 0.72rem;
    opacity: 0.75;
}

.details-note {
    margin: 0.85rem 0 0.4rem;
    color: #93a4b4;
    font-size: 0.86rem;
}

.details-spec-row {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: 0.85rem 1.2rem;
    padding: 0.95rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.details-spec-row:last-child {
    border-bottom: 0;
}

.details-spec-label {
    padding-top: 0.2rem;
    color: #8b9bab;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.details-spec-name {
    color: #f3f6f9;
    font-size: 0.98rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    line-height: 1.35;
}

.details-spec-meta {
    margin-top: 0.18rem;
    color: #8092a3;
    font-size: 0.78rem;
}

.details-meter {
    max-width: 16rem;
    margin-top: 0.65rem;
}

.details-meter-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.28rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8b9bab;
}

.details-meter-track {
    height: 0.42rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
}

.details-meter-fill {
    height: 100%;
    border-radius: inherit;
}

.details-meter-fill.ok {
    background: linear-gradient(90deg, #38bdf8, #7dd3fc);
}

.details-meter-fill.warm {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.details-meter-fill.hot {
    background: linear-gradient(90deg, #ef4444, #fb7185);
}

.details-part-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.85rem;
    align-items: baseline;
    margin-top: 0.55rem;
    padding: 0.5rem 0.65rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    color: #c5d0db;
    font-size: 0.78rem;
}

.details-part-row strong {
    color: #f3f6f9;
    font-weight: 650;
}

.details-part-no {
    color: #8b9bab;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.7rem;
}

.details-drive {
    margin-top: 0.7rem;
    padding: 0.6rem 0.7rem 0.7rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
}

.details-drive-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    color: #8b9bab;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.details-drive-top strong {
    color: #f3f6f9;
    font-size: 0.88rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    text-transform: none;
}

.details-drive .details-spec-meta {
    margin-top: 0.15rem;
}

.details-drive .details-meter {
    max-width: none;
    margin-top: 0.45rem;
}

.details-link {
    margin-top: 0.55rem;
    padding: 0;
    border: 0;
    background: none;
    color: #7dd3fc;
    font-size: 0.75rem;
    cursor: pointer;
}

.details-panel {
    padding: 0.95rem 1rem 1rem;
    margin-bottom: 0.85rem;
}

.app-shell .device-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1rem;
}

.app-shell .device-field-wide,
.app-shell .device-form-actions {
    grid-column: 1 / -1;
}

.app-shell .device-field label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8b9bab;
}

.app-shell .device-notes {
    min-height: 8rem;
    resize: vertical;
}

.app-shell .device-form-actions {
    display: flex;
    justify-content: flex-end;
}

.details-log-actions {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

.details-log {
    white-space: pre-wrap;
    color: #c5d0db;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.78rem;
}

.details-history {
    width: 100%;
    border-collapse: collapse;
    color: #d5dee7;
}

.details-history th {
    text-align: left;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8b9bab;
    padding: 0.45rem 0.55rem 0.55rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.details-history td {
    padding: 0.65rem 0.55rem 0.65rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.82rem;
    vertical-align: top;
}

@media (max-width: 800px) {
    .details-spec-row,
    .app-shell .device-form {
        grid-template-columns: 1fr;
    }

    .details-count,
    .details-sheet-actions {
        margin-left: 0;
    }
}
.file-browser-page { max-width: 1180px; margin: 0 auto; padding: 1rem 1.2rem 2rem; color: var(--bs-body-color); }
.file-browser-header { display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; margin-bottom:1rem; }
.file-browser-header h2 { margin:.25rem 0 0; font-size:1.55rem; font-weight:700; }
.file-browser-status { display:inline-flex; margin-top:.35rem; padding:.2rem .55rem; border-radius:999px; font-size:.72rem; font-weight:700; background:rgba(148,163,184,.14); color:#94a3b8; }
.file-browser-status.online { color:#34d399; background:rgba(52,211,153,.12); }
.file-browser-tools { display:flex; gap:.55rem; align-items:center; }
.file-browser-upload,.file-browser-icon-button { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; min-height:40px; padding:.58rem .85rem; border:1px solid rgba(148,163,184,.22); border-radius:10px; background:rgba(30,41,59,.72); color:#e5e7eb; cursor:pointer; font-weight:650; }
.file-browser-upload:hover,.file-browser-icon-button:hover { border-color:rgba(56,189,248,.55); background:rgba(30,41,59,.95); }
.file-browser-upload input { display:none; }
.file-browser-upload.disabled { opacity:.45; pointer-events:none; }
.file-browser-icon-button { width:40px; padding:0; }
.file-browser-shell { position:relative; overflow:hidden; min-height:420px; border:1px solid rgba(148,163,184,.18); border-radius:16px; background:linear-gradient(145deg,rgba(15,23,42,.91),rgba(17,24,39,.84)); box-shadow:0 18px 45px rgba(2,6,23,.22); }
.file-browser-pathbar { display:flex; gap:.55rem; align-items:center; padding:.72rem; border-bottom:1px solid rgba(148,163,184,.14); background:rgba(15,23,42,.5); }
.file-browser-pathbar button { width:36px; height:36px; border:0; border-radius:9px; background:rgba(148,163,184,.1); color:#cbd5e1; }
.file-browser-pathbar button:disabled { opacity:.35; }
.file-browser-breadcrumb { display:flex; align-items:center; gap:.55rem; flex:1; min-width:0; padding:.55rem .7rem; border:1px solid rgba(148,163,184,.14); border-radius:9px; background:rgba(2,6,23,.28); color:#dbeafe; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.82rem; }
.file-browser-table { transition:opacity .15s ease; }
.file-browser-table[aria-busy="true"] { opacity:.55; pointer-events:none; }
.file-browser-row { display:grid; grid-template-columns:minmax(240px,1fr) 190px 90px 120px; align-items:center; min-height:52px; padding:0 .8rem; border-bottom:1px solid rgba(148,163,184,.09); }
.file-browser-row:not(.file-browser-columns):hover { background:rgba(56,189,248,.055); }
.file-browser-row:not(.file-browser-columns) { cursor:default; user-select:none; }
.file-browser-row.selected { background:rgba(59,130,246,.16); box-shadow:inset 3px 0 #60a5fa; }
.file-browser-row.selected:hover { background:rgba(59,130,246,.2); }
.file-browser-columns { min-height:38px; color:#7f8ea3; font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.file-browser-name { display:flex; align-items:center; gap:.7rem; min-width:0; border:0; background:transparent; color:#e5e7eb; text-align:left; }
.file-entry-icon { flex:0 0 auto; width:19px; height:19px; fill:rgba(148,163,184,.1); stroke:#94a3b8; stroke-width:1.6; stroke-linejoin:round; }
.file-entry-icon.folder { fill:rgba(96,165,250,.16); stroke:#60a5fa; }
.file-browser-name span:last-child { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.file-browser-modified,.file-browser-size { color:#94a3b8; font-size:.79rem; }
.file-browser-actions { text-align:right; }
.file-browser-actions button { display:inline-flex; align-items:center; gap:.35rem; padding:.42rem .6rem; border:1px solid transparent; border-radius:8px; background:transparent; color:#8ecbff; font-size:.75rem; }
.file-browser-actions button:hover { border-color:rgba(96,165,250,.25); background:rgba(96,165,250,.1); }
.file-browser-empty { display:flex; min-height:330px; align-items:center; justify-content:center; flex-direction:column; gap:.8rem; color:#94a3b8; }
.file-browser-empty .oi { font-size:1.8rem; color:#64748b; }
.file-browser-empty.error { color:#fca5a5; }
.file-browser-empty button { border:1px solid rgba(248,113,113,.3); border-radius:8px; padding:.4rem .7rem; background:rgba(248,113,113,.08); color:#fecaca; }
.file-browser-working { position:absolute; right:1rem; bottom:1rem; display:flex; align-items:center; gap:.55rem; padding:.55rem .75rem; border:1px solid rgba(56,189,248,.22); border-radius:10px; background:rgba(15,23,42,.94); color:#bae6fd; box-shadow:0 8px 25px rgba(2,6,23,.3); font-size:.78rem; }
.file-download-frame { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; border:0; }
.file-download-panel { position:sticky; left:100%; bottom:1rem; width:min(390px,calc(100% - 2rem)); margin:1rem; margin-left:auto; padding:.8rem .9rem; border:1px solid rgba(56,189,248,.25); border-radius:12px; background:rgba(10,19,33,.97); box-shadow:0 14px 36px rgba(2,6,23,.42); color:#dbeafe; z-index:3; }
.file-download-heading { display:flex; align-items:center; gap:.7rem; min-width:0; }
.file-download-heading > div { display:flex; flex-direction:column; min-width:0; flex:1; }
.file-download-heading strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.82rem; font-weight:650; }
.file-download-heading span { color:#8fa5bb; font-size:.7rem; margin-top:.1rem; }
.file-download-check { display:inline-flex; align-items:center; justify-content:center; width:19px; height:19px; border-radius:50%; background:rgba(52,211,153,.16); color:#34d399!important; font-size:.72rem!important; font-weight:800; }
.file-download-track { height:5px; margin-top:.65rem; overflow:hidden; border-radius:999px; background:rgba(148,163,184,.14); }
.file-download-fill { height:100%; min-width:2%; border-radius:inherit; background:linear-gradient(90deg,#2563eb,#38bdf8); transition:width .22s ease; }
.file-download-fill.indeterminate { animation:file-download-indeterminate 1.1s ease-in-out infinite; }
@keyframes file-download-indeterminate { 0%{transform:translateX(-115%)} 55%{transform:translateX(105%)} 100%{transform:translateX(285%)} }
.file-download-panel.error { border-color:rgba(248,113,113,.3); }
.file-download-panel.error .file-download-fill { background:#ef4444; }
.file-browser-spinner { width:15px; height:15px; border:2px solid rgba(125,211,252,.25); border-top-color:#38bdf8; border-radius:50%; animation:file-browser-spin .7s linear infinite; }
@keyframes file-browser-spin { to { transform:rotate(360deg); } }
@media (max-width:760px) { .file-browser-header{align-items:flex-start;flex-direction:column}.file-browser-row{grid-template-columns:minmax(0,1fr) 80px 50px}.file-browser-modified,.file-browser-columns span:nth-child(2){display:none}.file-browser-actions button span:last-child{display:none}.file-browser-row{padding:0 .55rem}.file-browser-page{padding:.65rem}.file-browser-shell{border-radius:12px} }