* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #0f172a;
    color: #e2e8f0;
}
a { color: #60a5fa; }

.login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
.login form {
    background: #1e293b;
    padding: 2rem;
    border-radius: 12px;
    width: 100%;
    max-width: 360px;
    box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.login h1 { margin: 0 0 1.5rem; font-size: 1.3rem; }

input, select, textarea {
    width: 100%;
    padding: .55rem .75rem;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 8px;
    color: #e2e8f0;
    font: inherit;
    margin-bottom: .75rem;
}
input:focus, select:focus { outline: 2px solid #60a5fa; }

button {
    background: #2563eb;
    color: white;
    border: 0;
    padding: .55rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    font: inherit;
}
button:hover { background: #1d4ed8; }
button.danger { background: #dc2626; }
button.danger:hover { background: #b91c1c; }
button.ghost   { background: transparent; border: 1px solid #334155; }
button.ghost:hover { background: #1e293b; }
button:disabled, button.ghost:disabled { opacity: .4; cursor: not-allowed; }
button:disabled:hover { background: transparent; }

.app { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }

.sidebar {
    background: #020617;
    padding: 1.25rem 1rem;
    border-right: 1px solid #1e293b;
}
.sidebar h2 { margin: 0 0 1.5rem; font-size: 1rem; opacity: .7; letter-spacing: .1em; }
.sidebar nav button {
    background: transparent;
    color: #cbd5e1;
    text-align: left;
    width: 100%;
    padding: .6rem .75rem;
    margin-bottom: .25rem;
}
.sidebar nav button.active { background: #1e293b; color: #fff; }
.sidebar .whoami {
    margin-top: 2rem;
    padding: .75rem;
    background: #1e293b;
    border-radius: 8px;
    font-size: .85rem;
}
.sidebar .whoami b { display: block; margin-bottom: .25rem; }

.main { padding: 2rem; overflow: auto; }
.main h1 { margin: 0 0 1.5rem; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.card {
    background: #1e293b;
    border-radius: 10px;
    padding: 1.25rem;
    border: 1px solid #334155;
}
.card .label { opacity: .6; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.card .value { font-size: 1.75rem; font-weight: 600; margin-top: .25rem; }

.panel {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 10px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}
.panel h2 { margin: 0 0 1rem; font-size: 1rem; }

table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { padding: .5rem .75rem; text-align: left; border-bottom: 1px solid #334155; }
th { opacity: .7; font-weight: 500; font-size: .8rem; text-transform: uppercase; }
tr:hover td { background: #0f172a; }
.status-2xx { color: #86efac; }
.status-4xx { color: #fca5a5; }
.status-5xx { color: #f87171; font-weight: 600; }

.row-actions { display: flex; gap: .5rem; }
.row-actions button { padding: .25rem .5rem; font-size: .8rem; }

.modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.6);
    display: flex; align-items: center; justify-content: center;
    z-index: 10;
}
.modal {
    background: #1e293b;
    padding: 1.5rem;
    border-radius: 12px;
    width: 100%;
    max-width: 420px;
}
.modal h2 { margin: 0 0 1rem; font-size: 1rem; }

.token-chip {
    font-family: ui-monospace, monospace;
    font-size: .75rem;
    background: #0f172a;
    padding: .1rem .4rem;
    border-radius: 4px;
    border: 1px solid #334155;
}

.error { color: #fca5a5; margin-top: .5rem; }

canvas { max-width: 100%; }