:root {
    --bg:#f5f7fa;
    --surface:#fff;
    --ink:#1b263b;
    --muted:#67758b;
    --border:#e3e8ef;
    --accent:#4459c7;
    --accent-light:#edf0ff;
    --danger:#b52e40;
    --shadow:0 2px 8px #14213d05;
    font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color:var(--ink);
    font-size:14px;
    line-height:1.55;
}

* {
    box-sizing:border-box;
}

body {
    margin:0;
    background:var(--bg);
}

a {
    color:inherit;
    text-decoration:none;
}

button,input,select,textarea {
    font:inherit;
}

button,a,input,select,textarea {
    outline-offset:4px;
}

button {
    cursor:pointer;
}

button:disabled {
    opacity:.55;
    cursor:default;
}

[hidden] {
    display:none!important;
}

h1,h2,h3,p {
    margin:0;
}

h1 {
    font-size:28px;
    letter-spacing:-.8px;
    font-weight:650;
    margin:4px 0;
}

h2 {
    font-size:17px;
    font-weight:650;
}

h3 {
    font-size:15px;
    font-weight:600;
}

p {
    color:var(--muted);
}

code,pre {
    font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
    font-size:12px;
    overflow-wrap:anywhere;
}

small {
    color:var(--muted);
    font-size:12px;
}

.sidebar {
    width:235px;
    position:fixed;
    inset:0 auto 0 0;
    background:var(--surface);
    border-right:1px solid var(--border);
    padding:30px 20px;
    display:flex;
    flex-direction:column;
}

.brand {
    display:flex;
    gap:11px;
    align-items:center;
    font-size:16px;
    font-weight:700;
    letter-spacing:-.4px;
}

.brand small {
    display:block;
    font-size:11px;
    font-weight:500;
    letter-spacing:.6px;
    margin-top:1px;
}

.brand-symbol {
    display:grid;
    place-items:center;
    background:var(--accent);
    color:white;
    border-radius:10px;
    width:36px;
    height:36px;
    font-size:24px;
    flex-shrink:0;
}

.sidebar nav {
    margin-top:38px;
    display:grid;
    gap:6px;
}

.nav-item {
    padding:11px 14px;
    display:flex;
    align-items:center;
    gap:12px;
    border-radius:8px;
    color:var(--muted);
    font-weight:550;
}

.nav-item>span {
    width:20px;
    font-size:20px;
}

.nav-item:hover {
    background:var(--bg);
}

.nav-item.active {
    background:var(--accent-light);
    color:var(--accent);
}

.sidebar-footer {
    margin-top:auto;
    font-size:12px;
    color:var(--muted);
}

.sidebar-footer small {
    display:block;
    font-size:10px;
    margin-top:8px;
}

.dot {
    display:inline-block;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#98a2b3;
    margin-right:6px;
}

.workspace {
    margin-left:235px;
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

.topbar {
    height:76px;
    border-bottom:1px solid var(--border);
    background:white;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 38px;
    font-weight:500;
}

.account-menu {
    position:relative;
    font-size:12px;
}

.account-menu summary {
    display:flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
    list-style:none;
}

.avatar {
    background:#eef1f6;
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    border-radius:50%;
    font-weight:650;
}

.account-menu>div {
    position:absolute;
    right:0;
    top:40px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:10px;
    padding:8px;
    min-width:190px;
    box-shadow:0 8px 28px #1b263b15;
    z-index:10;
}

.account-menu a,.account-menu button {
    display:block;
    width:100%;
    padding:9px;
    text-align:left;
    border:0;
    background:none;
    border-radius:5px;
}

.account-menu a:hover,.account-menu button:hover {
    background:var(--bg);
}

.main {
    padding:36px 38px;
    max-width:1520px;
    width:100%;
    margin:0 auto;
    flex:1;
}

.page-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:28px;
}

.eyebrow {
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:1.3px;
    font-weight:650;
    color:var(--accent);
}

.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:9px 16px;
    border:1px solid #d8dfeb;
    background:white;
    border-radius:7px;
    font-weight:550;
    white-space:nowrap;
    color:var(--ink);
    transition:background .12s;
}

.button:hover {
    background:#f4f6fa;
}

.button.primary {
    color:white;
    background:var(--accent);
    border-color:var(--accent);
}

.button.primary:hover {
    background:#3549b5;
}

.button.danger {
    color:var(--danger);
    border-color:#f0cad1;
    background:#fff9fa;
}

.button.danger:hover {
    background:#fdecef;
}

.button.small {
    padding:5px 10px;
    font-size:12px;
}

.full {
    width:100%;
}

.text-link {
    white-space:nowrap;
    color:var(--accent);
    font-size:13px;
    font-weight:550;
    background:none;
    border:0;
    padding:0;
}

.text-link:hover {
    text-decoration:underline;
}

.metrics {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
    margin-bottom:22px;
}

.metric {
    background:white;
    border:1px solid var(--border);
    border-radius:10px;
    padding:21px 23px;
    box-shadow:var(--shadow);
}

.metric>span {
    display:block;
    font-size:12px;
    color:var(--muted);
    font-weight:500;
}

.metric strong {
    display:block;
    font-size:29px;
    font-weight:650;
    line-height:1.3;
    margin:9px 0 7px;
}

.metric strong.unavailable {
    font-size:18px;
    line-height:2.1;
    color:#68768c;
    font-weight:550;
}

.metric small {
    font-size:11px;
}

.panel {
    background:white;
    border:1px solid var(--border);
    border-radius:11px;
    margin-bottom:22px;
    padding:24px;
    box-shadow:var(--shadow);
}

.panel h2 {
    margin-bottom:15px;
}

.panel-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    margin-bottom:20px;
}

.panel-heading h2 {
    margin-bottom:0;
}

.count {
    display:inline-flex;
    margin-left:6px;
    font-size:11px;
    background:var(--bg);
    padding:2px 7px;
    border-radius:5px;
    color:var(--muted);
}

.notice {
    border:1px solid #dce3f5;
    background:#f0f3fc;
    color:#536484;
    border-radius:8px;
    padding:14px 18px;
    margin-bottom:22px;
    font-size:13px;
}

.notice strong {
    font-weight:650;
}

.notice.success {
    background:#eef8f3;
    border-color:#d5eade;
    color:#2b7051;
}

.notice.error {
    background:#fff3f4;
    border-color:#f2d4d9;
    color:#a12b3c;
}

.notice ul {
    padding-left:18px;
    margin:7px 0 0;
}

.table-panel {
    padding:0;
}

.table-panel .panel-heading {
    padding:22px 24px 0;
}

.filters {
    display:flex;
    gap:10px;
}

.filters input {
    width:255px;
}

.filters select {
    width:145px;
}

.table-scroll {
    overflow:auto;
    position:relative;
    max-width:100%;
}

table {
    width:100%;
    min-width:960px;
    border-collapse:collapse;
    text-align:left;
}

th {
    padding:12px 22px;
    background:#fafbfc;
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.7px;
    font-weight:600;
    color:var(--muted);
    white-space:nowrap;
}

td {
    padding:18px 22px;
    border-bottom:1px solid var(--border);
    font-size:12px;
}

tbody tr:last-child td {
    border-bottom:0;
}

tbody tr:hover {
    background:#fcfcff;
}

.app-name {
    font-size:14px;
    font-weight:600;
    display:block;
    min-width:115px;
}

.table-description {
    display:block;
    max-width:210px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    margin-top:3px;
}

.badge {
    display:inline-block;
    padding:3px 9px;
    border-radius:5px;
    font-size:11px;
    font-weight:550;
    white-space:nowrap;
}

.badge.enabled {
    color:#34765b;
    background:#edf7f1;
}

.badge.disabled {
    background:#f0f2f5;
    color:#737f90;
}

.badge.pending {
    background:#f0f2f5;
    color:#737f90;
}

.muted {
    color:var(--muted);
}

.empty-state {
    text-align:center;
    padding:58px 25px;
}

.empty-state p {
    max-width:540px;
    margin:9px auto 20px;
}

.empty-icon {
    width:48px;
    height:48px;
    background:var(--accent-light);
    color:var(--accent);
    display:grid;
    place-items:center;
    border-radius:12px;
    margin:0 auto 16px;
    font-size:25px;
}

.empty-state h2 {
    margin:0;
}

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

.activity-row strong {
    font-size:13px;
    font-weight:550;
}

.activity-row small {
    display:block;
    margin-top:3px;
}

.activity-row time {
    font-size:11px;
    color:var(--muted);
}

.footer {
    padding:18px 38px;
    color:var(--muted);
    font-size:11px;
    display:flex;
    justify-content:space-between;
    border-top:1px solid var(--border);
}

label {
    display:block;
    font-weight:550;
    font-size:12px;
    margin:18px 0 7px;
}

input:not([type=checkbox]):not([type=hidden]),select,textarea {
    display:block;
    width:100%;
    padding:10px 12px;
    border:1px solid #d6deea;
    background:#fff;
    color:var(--ink);
    border-radius:7px;
    min-width:0;
}

input:focus,select:focus,textarea:focus {
    border-color:var(--accent);
    outline:2px solid #4459c720;
}

textarea {
    resize:vertical;
}

.required {
    color:var(--accent);
}

.field-help {
    font-size:11px;
    margin:7px 0 0;
    color:var(--muted);
}

.label-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.label-row .text-link {
    font-size:11px;
    margin-top:10px;
}

.check {
    display:flex;
    gap:9px;
    align-items:center;
    margin:23px 0;
}

.check input {
    accent-color:var(--accent);
    width:16px;
    height:16px;
}

.form-actions {
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:25px;
}

.narrow {
    max-width:760px;
}

.narrow .notice {
    margin-top:24px;
}

.login-page {
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:25px;
}

.login-card {
    background:white;
    border:1px solid var(--border);
    border-radius:14px;
    padding:38px;
    width:100%;
    max-width:410px;
    box-shadow:0 12px 45px #1b263b09;
}

.login-card .brand {
    margin-bottom:32px;
}

.login-card button {
    margin-top:25px;
}

.login-card .notice {
    margin-top:20px;
    margin-bottom:10px;
}

.tabs {
    display:flex;
    gap:4px;
    overflow:auto;
    border-bottom:1px solid var(--border);
    margin-bottom:24px;
}

.tabs button,.tabs a {
    padding:12px 17px;
    background:none;
    border:0;
    white-space:nowrap;
    border-bottom:2px solid transparent;
    color:var(--muted);
    font-size:13px;
}

.tabs .active {
    border-bottom-color:var(--accent);
    color:var(--accent);
    font-weight:600;
}

.details-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px 35px;
    margin:22px 0 0;
}

dt {
    color:var(--muted);
    font-size:11px;
    margin-bottom:6px;
}

dd {
    margin:0;
    font-size:13px;
}

.origin {
    display:block;
    margin-bottom:4px;
}

.action-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    border-top:1px solid var(--border);
    padding:22px 0;
}

.action-row:first-child {
    border-top:0;
    padding-top:0;
}

.action-row p {
    font-size:12px;
    margin-top:5px;
}

.action-row h2 {
    margin-bottom:0;
}

.credential-list>div {
    padding:16px 0;
    border-bottom:1px solid var(--border);
}

.credential-list>div:last-child {
    border:0;
}

.credential-list dd {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
}

.credential-list code {
    margin-right:auto;
}

.credential-list dt {
    font-weight:550;
}

pre {
    background:#f6f8fc;
    border:1px solid var(--border);
    padding:20px;
    line-height:1.9;
    border-radius:7px;
    white-space:pre-wrap;
    word-break:break-word;
    user-select:all;
}

.modal {
    background:white;
    border:1px solid var(--border);
    border-radius:12px;
    width:calc(100% - 40px);
    max-width:500px;
    padding:28px;
    color:var(--ink);
    box-shadow:0 20px 80px #1b263b30;
}

.modal h2 {
    margin-bottom:12px;
}

.modal p {
    font-size:13px;
}

.modal::backdrop {
    background:#111b3a66;
}

.modal-backdrop {
    position:fixed;
    inset:0;
    z-index:30;
    background:#111b3a66;
    display:grid;
    place-items:center;
    padding:20px;
}

.modal-backdrop .modal {
    width:100%;
    max-height:90vh;
    overflow:auto;
}

.activity-filters {
    display:grid;
    grid-template-columns:1.3fr 1.3fr 1fr 1fr;
    gap:15px;
    padding:5px 24px 23px;
}

.pagination {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:17px 22px;
    border-top:1px solid var(--border);
    font-size:11px;
    color:var(--muted);
}

.pagination>div {
    display:flex;
    align-items:center;
    gap:14px;
}

.pagination button {
    border:1px solid var(--border);
    background:#fff;
    padding:5px 10px;
    border-radius:5px;
    font-size:12px;
}

.loading {
    font-size:12px;
    padding:8px 22px;
    color:var(--accent);
}

.copy-status:not(:empty) {
    position:fixed;
    bottom:25px;
    right:25px;
    background:var(--ink);
    color:white;
    border-radius:8px;
    padding:12px 20px;
    z-index:50;
}

fieldset {
    border:1px solid var(--border);
    border-radius:8px;
    padding:10px 18px 20px;
    margin:25px 0;
}

legend {
    font-weight:600;
    font-size:13px;
    padding:0 8px;
}

.sr-only,.skip-link:not(:focus) {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

.skip-link:focus {
    position:fixed;
    left:10px;
    top:10px;
    z-index:100;
    padding:10px;
    background:white;
    color:var(--accent);
}

@media(min-width:1550px) {
    .metrics {
        grid-template-columns:repeat(6,minmax(0,1fr));
    }
    .metric {
        padding:20px 17px;
    }
    .metric strong.unavailable {
        font-size:16px;
    }
}

@media(max-width:1100px) {
    .sidebar {
        width:200px;
        padding:25px 14px;
    }
    .workspace {
        margin-left:200px;
    }
    .main {
        padding:28px 24px;
    }
    .topbar {
        padding:0 24px;
    }
    .panel-heading {
        align-items:flex-start;
        flex-direction:column;
    }
    .filters {
        width:100%;
    }
    .filters input {
        flex:1;
    }
    .activity-filters {
        grid-template-columns:1fr 1fr;
    }
    .metric {
        padding:18px;
    }
    .page-heading {
        align-items:flex-start;
    }
}

@media(max-width:760px) {
    .sidebar {
        position:static;
        width:100%;
        padding:15px 18px;
        border-right:0;
        border-bottom:1px solid var(--border);
    }
    .sidebar nav {
        margin-top:18px;
        display:grid;
        grid-template-columns:repeat(4,1fr);
        gap:4px;
    }
    .nav-item {
        padding:8px 5px;
        justify-content:center;
        font-size:11px;
        gap:5px;
    }
    .nav-item>span {
        font-size:16px;
        width:auto;
    }
    .sidebar-footer {
        display:none;
    }
    .workspace {
        margin-left:0;
    }
    .topbar {
        height:60px;
        padding:0 18px;
        font-size:12px;
    }
    .account-menu summary {
        gap:6px;
        font-size:10px;
    }
    .main {
        padding:24px 18px;
    }
    .page-heading {
        flex-wrap:wrap;
        margin-bottom:22px;
        gap:15px;
    }
    h1 {
        font-size:25px;
    }
    .page-heading p {
        font-size:12px;
    }
    .metrics {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
    }
    .metric {
        padding:15px;
    }
    .metric strong {
        font-size:25px;
    }
    .metric strong.unavailable {
        font-size:15px;
        line-height:1.6;
        padding:6px 0;
    }
    .metric small {
        font-size:10px;
    }
    .metric>span {
        font-size:11px;
    }
    .panel {
        padding:20px;
    }
    .table-panel {
        padding:0;
    }
    .table-panel .panel-heading {
        padding:18px 18px 0;
    }
    .filters {
        flex-wrap:wrap;
    }
    .filters input {
        width:100%;
        flex-basis:100%;
    }
    .filters select {
        width:100%;
    }
    .details-grid {
        grid-template-columns:1fr;
        gap:20px;
    }
    .action-row {
        align-items:flex-start;
        flex-wrap:wrap;
        gap:12px;
    }
    .tabs button,.tabs a {
        padding:10px 12px;
        font-size:12px;
    }
    .footer {
        padding:18px;
        font-size:10px;
        gap:20px;
    }
    .activity-filters {
        padding:4px 18px 20px;
        gap:10px;
    }
    .activity-row {
        gap:20px;
    }
    .activity-row time {
        white-space:nowrap;
    }
    .pagination {
        flex-wrap:wrap;
        justify-content:center;
    }
    .login-card {
        padding:30px;
    }
    .modal {
        padding:23px;
    }
    .form-actions {
        flex-wrap:wrap;
    }
    .notice {
        font-size:12px;
    }
    td,th {
        padding-left:18px;
        padding-right:18px;
    }
}

@media(prefers-reduced-motion:reduce) {
    * {
        transition:none!important;
    }
}