:root{--bg:#0b1220;--card:#0f172a;--muted:#94a3b8;--text:#e5e7eb;--line:#1f2937;--accent:#2563eb}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,Segoe UI,Roboto,Arial}
.container{max-width:560px;margin:4rem auto;padding:1.25rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.25rem}
.label{display:block;margin:.5rem 0 .25rem;color:var(--muted);font-size:.9rem}
.input{width:100%;padding:.7rem .9rem;border:1px solid var(--line);border-radius:10px;background:#0b1220;color:var(--text)}
.btn{margin-top:1rem;width:100%;padding:.8rem 1rem;border:0;border-radius:12px;background:var(--accent);color:white;cursor:pointer}
.help{margin-top:.75rem;color:var(--muted);font-size:.85rem;text-align:center}
.app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 240px 1fr 320px;
    grid-template-rows: 60px 1fr 36px;
    grid-template-areas:
        "topbar topbar topbar"
        "sidebar main rightbar"
        "bottombar bottombar bottombar";
}

.topbar {
    grid-area: topbar;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.topbar-subtitle {
    margin-left: 16px;
    color: var(--muted);
    font-size: .9rem;
}

.topbar-right {
    display: flex;
    gap: 16px;
    align-items: center;
}

.sidebar {
    grid-area: sidebar;
    background: var(--card);
    border-right: 1px solid var(--line);
    padding: 16px;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sidebar-nav a {
    color: var(--text);
    text-decoration: none;
    padding: 10px 12px;
    border-radius: 10px;
}

.sidebar-nav a:hover {
    background: var(--line);
}

.app-main {
    grid-area: main;
    padding: 24px;
    overflow: auto;
}

.rightbar {
    grid-area: rightbar;
    background: var(--card);
    border-left: 1px solid var(--line);
    padding: 16px;
}

.rightbar-card {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 14px;
}

.bottombar {
    grid-area: bottombar;
    border-top: 1px solid var(--line);
    color: var(--muted);
    padding: 8px 24px;
    font-size: .85rem;
    display: flex;
    justify-content: space-between;
}
.app-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.app-table th,
.app-table td {
    border-bottom: 1px solid var(--line);
    padding: .75rem;
    text-align: left;
}

.app-table th {
    color: var(--muted);
    font-weight: 600;
}

.btn-small {
    padding: .45rem .75rem;
    border: 0;
    border-radius: 8px;
    background: var(--accent);
    color: white;
    cursor: pointer;
}
.btn-danger {
    background: #dc2626;
}
.checkbox-row {
    display: block;
    margin: .75rem 0;
    color: var(--text);
}

.checkbox-row input {
    margin-right: .5rem;
}