.this-pc-view {
    padding: var(--space-lg);
    overflow-y: scroll;
    height: 100%;
    width: 100%;
    background-color: var(--background);
}

.this-pc-header {
    margin-bottom: var(--space-xl);
}

.this-pc-header h2 {
    margin: 0 0 var(--space-xs) 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

.system-info {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.this-pc-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: var(--space-md);
    color: var(--text-secondary);
}

.pc-section {
    margin-bottom: var(--space-xl);
}

.pc-section h3 {
    margin: 0 0 var(--space-md) 0;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--border);
}

.folders-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-md);
}

.folder-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.folder-item:hover {
    background-color: var(--surface-hover);
    border-color: var(--accent);
}

.folder-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--accent-surface);
    border-radius: var(--radius-md);
    color: var(--accent);
}

.folder-icon .icon {
    width: 24px;
    height: 24px;
}

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

.folder-name {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.folder-path {
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drives-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--space-md);
}

.drive-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.drive-item:hover {
    background-color: var(--surface-hover);
    border-color: var(--accent);
}

.drive-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--background-tertiary);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
}

.drive-icon .icon {
    width: 24px;
    height: 24px;
}

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

.drive-name {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.drive-path {
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
    margin-bottom: var(--space-sm);
}

.drive-storage {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.storage-info {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.storage-bar {
    width: 100%;
    height: 6px;
    background-color: var(--background-tertiary);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.storage-used {
    height: 100%;
    background-color: var(--accent);
    transition: width var(--transition-normal);
}

.drive-actions {
    display: flex;
    gap: var(--space-xs);
}

.eject-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-tertiary);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.eject-button:hover {
    background-color: var(--surface-hover);
    color: var(--text-primary);
}

.system-details {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--border);
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: var(--font-weight-medium);
}

.detail-value {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

/* Icons */
.icon-desktop {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2z'/%3E%3Cpath d='M21 12H3'/%3E%3Cpath d='M7 8v8'/%3E%3Cpath d='M17 8v8'/%3E%3C/svg%3E");
}

.icon-documents {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3Cpolyline points='10 9 9 9 8 9'/%3E%3C/svg%3E");
}

.icon-downloads {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
}

.icon-pictures {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpolyline points='21 15 16 10 5 21'/%3E%3C/svg%3E");
}

.icon-music {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E");
}

.icon-videos {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='23 7 16 12 23 17 23 7'/%3E%3Crect x='1' y='5' width='15' height='14' rx='2' ry='2'/%3E%3C/svg%3E");
}

.icon-drive {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='22' y1='12' x2='2' y2='12'/%3E%3Cpath d='M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3Cline x1='6' y1='16' x2='6.01' y2='16'/%3E%3Cline x1='10' y1='16' x2='10.01' y2='16'/%3E%3C/svg%3E");
}

.icon-usb {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='7' r='1'/%3E%3Ccircle cx='4' cy='20' r='1'/%3E%3Cpath d='M4.7 19.3 19 5'/%3E%3Cpath d='M21 3 3 21'/%3E%3Cpath d='M12.26 21.74a2 2 0 0 1-3.16-0.87L4.3 5.63a2 2 0 0 1 .87-3.16l.93.93'/%3E%3Cpath d='M19.8 2.8 7.1 15.5'/%3E%3C/svg%3E");
}

.icon-eject {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12V7a5 5 0 0 1 10 0v5'/%3E%3Cpath d='M4 15h16l-2 6H6l-2-6Z'/%3E%3C/svg%3E");
}

/* Responsive */
@media (max-width: 768px) {
    .this-pc-view {
        padding: var(--space-md);
    }

    .folders-grid,
    .drives-grid {
        grid-template-columns: 1fr;
    }

    .folder-item,
    .drive-item {
        flex-direction: column;
        text-align: center;
    }

    .folder-details,
    .drive-details {
        text-align: center;
    }

    .storage-info {
        text-align: center;
    }
}