:root {
    --platform-navy: #0f1f33;
    --platform-blue: #1f6feb;
    --platform-teal: #0e9384;
    --platform-muted: #64748b;
    --platform-border: #dbe3ec;
    --platform-bg: #f4f7fb;
}

body {
    background: var(--platform-bg);
}

.platform-topbar {
    gap: 24px;
}

.brand-copy {
    display: grid;
    gap: 2px;
}

.brand-copy small {
    color: #94a3b8;
    font-size: 0.72rem;
}

.platform-nav {
    display: flex;
    flex: 1;
    gap: 8px;
}

.platform-nav a {
    border-radius: 10px;
    color: #dbeafe;
    font-weight: 700;
    padding: 9px 12px;
    text-decoration: none;
}

.platform-nav a:hover {
    background: rgba(255, 255, 255, 0.1);
}

.platform-shell {
    width: min(1220px, calc(100% - 32px));
}

.platform-hero,
.page-heading {
    align-items: flex-start;
    display: flex;
    gap: 24px;
    justify-content: space-between;
    margin-bottom: 24px;
}

.platform-hero {
    background:
        linear-gradient(
            135deg,
            var(--platform-navy),
            #173a62
        );
    border-radius: 20px;
    color: #ffffff;
    padding: 32px;
}

.platform-hero h1 {
    color: #ffffff;
}

.platform-hero .summary {
    color: #cbd5e1;
    max-width: 760px;
}

.section-heading,
.card-heading {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.section-heading {
    margin: 32px 0 16px;
}

.tool-grid {
    display: grid;
    gap: 16px;
    grid-template-columns:
        repeat(auto-fit, minmax(280px, 1fr));
    margin-bottom: 28px;
}

.tool-card {
    background: #ffffff;
    border: 1px solid var(--platform-border);
    border-radius: 16px;
    color: inherit;
    display: grid;
    gap: 14px;
    grid-template-columns: auto 1fr auto;
    padding: 20px;
    text-decoration: none;
}

.tool-card-muted {
    opacity: 0.7;
}

.tool-icon {
    align-items: center;
    background: #e6f6f3;
    border-radius: 12px;
    color: #08766c;
    display: flex;
    font-weight: 900;
    height: 46px;
    justify-content: center;
    width: 46px;
}

.tool-content {
    display: grid;
    gap: 6px;
}

.tool-category,
.tool-status {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.tool-category {
    color: var(--platform-teal);
}

.tool-status {
    background: #ecfdf3;
    border-radius: 999px;
    color: #067647;
    padding: 5px 8px;
}

.dashboard-columns {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 22px;
}

.compact-list {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.compact-list > a,
.compact-list > div {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    color: inherit;
    display: flex;
    justify-content: space-between;
    padding: 13px;
    text-decoration: none;
}

.empty-state {
    color: var(--platform-muted);
    padding: 28px;
    text-align: center;
}

.breadcrumbs {
    color: var(--platform-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.breadcrumbs a,
.card-heading a,
.data-table a {
    color: var(--platform-blue);
    font-weight: 700;
    text-decoration: none;
}

.platform-form,
.form-group {
    display: grid;
    gap: 12px;
}

.platform-form {
    gap: 24px;
}

.text-input,
.text-area,
.file-input {
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font: inherit;
    padding: 12px;
    width: 100%;
}

.text-area {
    min-height: 260px;
}

.choice-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, 1fr);
}

.choice-card {
    background: #f8fafc;
    border: 1px solid #dbe3ec;
    border-radius: 10px;
    padding: 13px;
}

.field-help {
    color: var(--platform-muted);
    font-size: 0.82rem;
}

.field-error {
    color: #b42318;
    font-size: 0.84rem;
    font-weight: 700;
}

.upload-panel,
.notice-card {
    border-radius: 14px;
    padding: 18px;
}

.upload-panel {
    border: 1px dashed #94a3b8;
}

.notice-card {
    background: #effcf9;
    border: 1px solid #9fe2d7;
    margin-top: 16px;
}

.form-actions {
    display: flex;
    gap: 10px;
}

.table-wrap {
    overflow-x: auto;
}

.data-table {
    border-collapse: collapse;
    width: 100%;
}

.data-table th,
.data-table td {
    border-bottom: 1px solid #e2e8f0;
    padding: 13px;
    text-align: left;
}

.number-grid {
    display: grid;
    gap: 10px;
    grid-template-columns:
        repeat(auto-fill, minmax(130px, 1fr));
    margin-top: 18px;
}

.number-chip {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    display: flex;
    gap: 10px;
    padding: 10px;
}

.hash-value {
    font-family: monospace;
    font-size: 0.72rem;
    overflow-wrap: anywhere;
}

.metric-text {
    font-size: 1rem !important;
    text-transform: capitalize;
}

.platform-footer {
    color: var(--platform-muted);
    display: flex;
    font-size: 0.76rem;
    gap: 18px;
    justify-content: center;
    padding: 20px;
}

@media (max-width: 860px) {
    .platform-topbar,
    .platform-hero,
    .page-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-columns,
    .choice-grid {
        grid-template-columns: 1fr;
    }
}
.choice-grid-two{grid-template-columns:repeat(2,minmax(0,1fr))}.control-actions form{margin:0}.button-danger{background:#b42318;border-color:#b42318;color:#fff}.status-badge{background:#eef2f7;border-radius:999px;color:#475569;display:inline-flex;font-size:.72rem;font-weight:800;padding:5px 8px;text-transform:uppercase}.status-running,.status-success,.status-completed{background:#ecfdf3;color:#067647}.status-error,.status-failed,.status-completed_with_errors{background:#fef3f2;color:#b42318}.status-paused,.status-pending{background:#fffaeb;color:#b54708}.status-cancelled,.status-skipped{background:#f2f4f7;color:#475467}.artifact-links{display:flex;flex-wrap:wrap;gap:8px}.artifact-links a{color:var(--platform-blue);font-size:.82rem;font-weight:700}.event-list{display:grid;gap:12px;margin-top:18px}.event-list article{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:14px}.event-list article>div{align-items:center;display:flex;gap:10px}.event-list p{margin:8px 0}.event-list small{color:var(--platform-muted)}code{overflow-wrap:anywhere}@media(max-width:860px){.choice-grid-two{grid-template-columns:1fr}}