body {
    margin: 0;
    height: 100vh;
    display: flex;
    background: #0f172a;
    color: #e5e7eb;
    font-family: system-ui, sans-serif;
}

.sidebar {
    width: 320px;
    background: #020617;
    padding: 15px;
    overflow-y: auto;
    border-right: 2px solid #1e293b;
}

.sidebar h2 {
    margin: 0 0 10px;
}

#search {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: none;
    border-radius: 6px;
    background: #1e293b;
    color: #e5e7eb;
}

.item {
    padding: 10px;
    margin-bottom: 8px;
    border-radius: 8px;
    background: #1e293b;
    cursor: pointer;
    transition: background .2s;
}

.item:hover {
    background: #334155;
}

.item.active {
    background: #2563eb;
}

.viewer {
    flex: 1;
    background: #020617;
}

iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: white;
}