/* ==========================================================
   SIDEBAR
========================================================== */
.side-bar {
    z-index: 0;
    display: flex;
    background-color: #f5f6fa;
}

@media (min-width: 50rem) {

    .side-bar {
        position: fixed;
        flex-flow: column nowrap;
        align-items: flex-end;
        width: 15.5rem;
        height: 100%;
        border-right: 1px solid #eeebee;
    }
}

@media (min-width: 66.5rem) {

    .side-bar {
        min-width: 16.5rem;
    }
}


/* ==========================================================
   MAIN CONTENT LAYOUT
========================================================== */

.main {
    margin-left: 264px !important;
    max-width: 100% !important;
}

.main-content-wrap {
    width: 95% !important;
    max-width: 1500px !important;
    margin: 0 auto;
}

.main-content {
    max-width: 100% !important;
}


/* ==========================================================
   SITE BRANDING
========================================================== */

.site-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.site-brand-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
}

.site-brand-title {
    font-size: 18px;
    font-weight: 700;
    color: #08154D;
    line-height: 1.2;
}


/* ==========================================================
   SITE TITLE
========================================================== */

.site-title {
    display: flex;
    flex-grow: 1;
    align-items: center;
    height: 100%;
    color: #27262b;
    outline-offset: -1px;
}

@media (min-width: 31.25rem) {

    .site-title {
        font-size: 1.5rem !important;
    }
}

@media (min-width: 50rem) {

    .site-title {
        padding: 0.5rem 2rem;
    }
}


/* ==========================================================
   SEARCH
========================================================== */

.search-input {
    position: absolute;
    width: 100%;
    height: 100%;
    color: #5c5962;
    border: 0;
    border-radius: 0;
}

@media (min-width: 50rem) {

    .search-input {
        padding: 0.5rem 1rem 0.5rem 3.5rem;
        font-size: .875rem;
        background: #fff;
        transition: padding-left .2s linear;
    }
}


/* ==========================================================
   NAVIGATION
========================================================== */

.nav-list .nav-list-link {
    margin: 3px 8px;
    border-radius: 10px;
    transition: .25s;
}

.nav-list .nav-list-item .nav-list-link {
    display: block;
    padding: .25rem 0;
    outline-offset: -1px;
}

@media (min-width: 50rem) {

    .nav-list .nav-list-item .nav-list-link {
        min-height: 2rem;
        line-height: 1.5rem;
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

.nav-list .nav-list-item.active>.nav-list-link {
    background: #eef2ff !important;
    color: #4f46e5 !important;
    border-left: 3px solid #4f46e5;
    font-weight: 600;
}

.nav-list .nav-list-item .nav-list-link.active {
    text-decoration: none;
}

.nav-list .nav-list-item .nav-list-expander svg {
    transform: rotate(90deg);
}


/* ==========================================================
   HEADER
========================================================== */

.header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-right: 18px;
}

.site-button {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 1rem;
}

.version-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: #EEF4FF;
    border: 1px solid #D7E5FF;
    color: #245BDB;
    font-size: 13px;
    font-weight: 600;
}

.demo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border-radius: 12px;
    background: rgb(36.1802816901,72.3605633803,166.6197183099);
    color: #fff !important;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: .25s;
}


/* ==========================================================
   TYPOGRAPHY
========================================================== */

h1 {
    font-weight: 700;
}

h2 {
    margin-top: 56px;
}


/* ==========================================================
   BUTTONS
========================================================== */

.hero-buttons {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin: 28px 0;
}

.btn {
    border-radius: 10px !important;
    transition: .25s;
}

.btn:hover {
    transform: translateY(-2px);
}


/* ==========================================================
   FEATURE CARDS
========================================================== */

.feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin: 32px 0;
}

.feature-card {
    padding: 24px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(0,0,0,.06);
    transition: .25s;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0,0,0,.12);
}

.feature-card h3 {
    margin: 0 0 12px;
    color: #2563eb;
}

.feature-card p {
    margin: 0;
    line-height: 1.7;
    color: #555;
}


/* ==========================================================
   AI PROVIDERS
========================================================== */

.provider-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 24px;
    margin: 35px 0;
}

.provider-card {
    padding: 30px 25px;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 8px 20px rgba(0,0,0,.04);
    transition: .3s;
}

.provider-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0,0,0,.08);
}

.provider-logo {
    display: block;
    width: 40px !important;
    height: 40px !important;
    margin: 0 auto 16px;
    object-fit: contain;
}

.provider-card h3 {
    margin: 10px 0 12px;
    color: #2563EB;
}


/* ==========================================================
   WORKFLOW SECTION
========================================================== */

.workflow-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin: 40px 0;
}

.workflow-step {
    flex: 1;
    min-width: 170px;
    text-align: center;
}

.workflow-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: auto auto 16px;
    border-radius: 50%;
    background: #f8faff;
    border: 1px solid #dbeafe;
    box-shadow: 0 8px 20px rgba(37,99,235,.08);
    font-size: 30px;
}

.workflow-icon img {
    width: 34px;
    height: 34px;
}

.workflow-arrow {
    margin-top: 22px;
    color: #94a3b8;
    font-size: 32px;
    font-weight: 600;
}

.workflow-step h3 {
    margin: 10px 0;
    color: #111827;
    font-weight: 700;
}

.workflow-step p,
.workflow-description {
    margin: 0;
    color: #64748B;
    font-size: 14px;
    line-height: 1.7;
}

.workflow-title {
    margin: 0 0 12px;
    color: #111827;
    font-size: 20px;
    font-weight: 700;
}


/* ==========================================================
   COMMUNITY SECTION
========================================================== */

.community-section {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}

.community-title {
    width: 100%;
    text-align: center;
    font-weight: 800;
    color: #111827;
    line-height: 1.2;
}

.community-description {
    width: 100%;
    max-width: 760px;
    margin: 0 auto 25px;
    text-align: center;
    font-size: 1.1rem;
    line-height: 1.8;
    color: #64748b;
}

.community-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    width: 100%;
    margin: 35px 0;
}

.community-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    text-decoration: none;
    color: #111827;
    font-weight: 600;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    transition: .3s;
}

.community-links a:hover {
    color: #2563eb;
    background: #eff6ff;
    border-color: #2563eb;
    transform: translateY(-4px);
}

.community-links img {
    width: 24px;
    height: 24px;
}


/* ==========================================================
   TABLES
========================================================== */

table {
    width: 100%;
    margin: 25px 0;
    border-collapse: collapse;
}

table th {
    background: #EEF4FF;
    color: #1E40AF;
    font-weight: 700;
}

table th,
table td {
    padding: 14px 18px;
    border: 1px solid #E5E7EB;
}

.table-wrapper {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-bottom: 1.5rem;
    overflow-x: visible !important;
    border-radius: 4px;
    box-shadow:
        0 1px 2px rgba(0,0,0,.12),
        0 3px 10px rgba(0,0,0,.08);
}


/* ==========================================================
   FOOTER
========================================================== */

.site-footer {
    margin-top: 60px;
    padding-top: 20px;
    border-top: 1px solid #ececec;
    color: #6b7280;
}

 

/* ==========================================================
   TABLET RESPONSIVE
========================================================== */

@media (max-width: 1200px) {

    .provider-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .main-content-wrap {
        width: 92% !important;
    }
}


/* ==========================================================
   TABLET RESPONSIVE
========================================================== */

@media (max-width: 900px) {

    .workflow-container {
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }

    .workflow-step {
        width: 100%;
        max-width: 400px;
    }

    .workflow-arrow {
        transform: rotate(90deg);
        margin: 0;
    }
}


/* ==========================================================
   MOBILE RESPONSIVE
========================================================== */

@media (max-width: 768px) {

    /* Layout */

    .main {
        margin-left: 0 !important;
    }

    .main-content-wrap {
        width: 100% !important;
        padding: 0 20px;
    }

    /* Branding */

    .site-brand {
        gap: 10px;
    }

    .site-brand-logo {
        width: 50px;
        height: 50px;
    }

    .site-brand-title {
        font-size: 20px;
    }

    /* Header */

    .header-actions {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        margin-right: 0;
    }

    .version-badge,
    .demo-btn {
        width: 100%;
        justify-content: center;
    }

    /* Hero */

    .hero-buttons {
        flex-direction: column;
    }

    .hero-buttons .btn {
        width: 100%;
        text-align: center;
    }

    /* Feature Cards */

    .feature-grid {
        grid-template-columns: 1fr;
    }

    /* Provider Cards */

    .provider-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .provider-card {
        padding: 22px 16px;
    }

    /* Workflow */

    .workflow-title {
        font-size: 1.6rem;
        text-align: center;
    }

    .workflow-description {
        text-align: center;
    }

    .workflow-step h3 {
        font-size: 18px;
    }

    .workflow-step p {
        font-size: 15px;
    }

    .workflow-icon {
        width: 64px;
        height: 64px;
    }

    .workflow-icon img {
        width: 30px;
        height: 30px;
    }

    /* Community */

    .community-section {
        align-items: center;
        padding: 0 10px;
    }

    .community-title {
        font-size: 1.8rem;
    }

    .community-description {
        font-size: 1rem;
        line-height: 1.7;
        margin-bottom: 20px;
    }

    .community-links {
        gap: 14px;
        justify-content: center;
    }

    .community-links a {
        width: 100%;
        max-width: 320px;
    }

    /* Typography */

    h1 {
        font-size: 2rem;
    }

    h2 {
        margin-top: 40px;
        font-size: 1.6rem;
    }

    /* Tables */

    .table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 700px;
    }
}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 480px) {

    /* Providers */

    .provider-grid {
        grid-template-columns: 1fr;
    }

    .provider-logo {
        width: 36px !important;
        height: 36px !important;
    }

    .provider-card,
    .feature-card {
        padding: 18px;
    }

    /* Workflow */

    .workflow-title {
        font-size: 1.4rem;
    }

    .workflow-step {
        max-width: 100%;
    }

    .workflow-icon {
        width: 56px;
        height: 56px;
    }

    .workflow-icon img {
        width: 26px;
        height: 26px;
    }

    /* Community */

    .community-title {
        font-size: 1.5rem;
    }

    .community-description {
        font-size: .95rem;
    }

    .community-links {
        gap: 12px;
    }

    .community-links a {
        width: 100%;
        padding: 12px 16px;
        font-size: 15px;
    }

    .community-links img {
        width: 20px;
        height: 20px;
    }

    /* Typography */

    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.4rem;
    }
}


/*==================================================
ORGANIZATION OVERVIEW
==================================================*/

.announcement-box{
    display:flex;
    align-items:center;
    gap:24px;
    padding:26px;
    margin:30px 0;
    border: 3px solid #d6ccff;
    border-left: 5px solid #7c5cff;
    border-radius:10px;
    background: #f5f4f8;
}

.announcement-icon{
    width:70px;
    height:70px;
    min-width:70px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#eef2ff;
    border-radius:16px;
}

.announcement-icon img{
    width:38px;
    height:38px;
}

.announcement-box h2{
    margin:0 0 10px;
    font-size:1.2rem !important;
}

.announcement-box p{
    margin:0;
    color:#5f6470;
    line-height:1.8;
}


/*==================================================
TIP BOX
==================================================*/

.tip-box{

    margin:35px 0;

    padding:25px;

    border-radius:14px;

    border-left:6px solid #22c55e;

    background:#f0fff4;

}

.tip-box h3{

    margin-top:0;

}

.tip-box ul{

    margin-bottom:0;

}


/*==================================================
TABLE
==================================================*/

table{

    width:100%;

    margin-top:20px;

    border-collapse:collapse;

}

table th{

    background:#f7f7f7;

    font-weight:600;

}

table th,
table td{

    padding:14px;

    border:1px solid #ececec;

}

/*==================================================
CODE BLOCK
==================================================*/

pre{

    border-radius:12px;

    margin:25px 0;

}

code{

    font-size:14px;

}


/*==================================================
HEADINGS
==================================================*/

h1{

    margin-top:45px;

}

h2{

    margin-top:45px;

}

h3{

    margin-top:30px;

}


/*==================================================
TEXT
==================================================*/

p{

    line-height:1.8;

}

li{

    line-height:1.8;

}


/*==================================================
RESPONSIVE
==================================================*/

@media (max-width:1200px){

.resource-grid{

grid-template-columns:1fr 1fr;

}

.method-grid{

grid-template-columns:1fr;

}

}


@media (max-width:768px){

.announcement-box{

flex-direction:column;

align-items:flex-start;

}

.resource-grid{

grid-template-columns:1fr;

}

.method-grid{

grid-template-columns:1fr;

}

.announcement-icon{

width:60px;
height:60px;

}

}


/*==================================================
RESOURCE GRID
==================================================*/

.resource-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
    margin:35px 0 50px;
}

.resource-card{
    border:1px solid #e8edf4;
    border-radius:18px;
    padding:10px;
    display:flex;
    flex-direction:column;
    min-height:260px;
    transition:all .25s ease;
    box-shadow:0 3px 10px rgba(15,23,42,.03);
}

.resource-card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 45px rgba(15,23,42,.08);
}


/*==================================================
CARD COLORS
==================================================*/

.resource-card.project{
    background:#f9f8fd;
    border: 1px solid #886ec4;
}

.resource-card.workspace{
    background:#f8fff9;
    border: 1px solid #56d87b;
}

.resource-card.environment{
    background:#fff9f2;
    border: 1px solid #f7c08d;
}

/*==================================================
CARD TITLE
==================================================*/

.card-title{
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:24px;
}

.card-title .ui-title {
    color: #2563eb;
    margin:0;
    font-size:32px;
    font-weight:700;
    color:#2563eb; 
}

.card-title .git-title {
    color: #15803d;
    margin:0;
    font-size:32px;
    font-weight:700;
    color:#147e3b; 
}

/*==================================================
ICON BOX
==================================================*/

.icon-box{
    width:58px;
    height:58px;
    border-radius:16px;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-shrink:0;
}

.project .icon-box{
    background:#F3EDFF;
}

.workspace .icon-box{
    background:#EAFBF1;
}

.environment .icon-box{
    background:#FFF4E9;
}

.icon-box img{
    width:30px;
    height:30px;
}

.resource-card p{
    color:#5b6472;
    font-size:16px;
    line-height:1.8;
    margin:0 0 18px;
}

.resource-card h4{
    margin:0 0 18px;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:2px;
    color:#8a94a6;
    font-weight:700;
}

/*==================================================
FEATURE LIST
==================================================*/

.resource-card ul{
    list-style:none;
    margin:0;
    padding:0;
}

.resource-card li{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:10px;
    color:#374151;
    padding-left: 20px;
}

.resource-card li::before{
    content:"✓" !important;
    color:#22c55e !important;
    font-weight:bold !important;
    position: absolute;
    margin-left: -0.9em;
}


/*==================================================
CARD FOOTER
==================================================*/

.card-footer{
    margin-top:auto;
    padding-top:16px;
    border-top:1px solid #267ce7;
    display: flex;
    justify-content: flex-end; /* Right align */
}

.card-footer a{
    color:#5B5CF0;
    font-weight:600;
    text-decoration:none;
}

.card-footer a:hover{
    color:#3F41DD;
}

/*==================================================
METHOD GRID
==================================================*/

.method-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
    margin:32px 0;
}

/*==================================================
METHOD CARD
==================================================*/

.method-card{
    border:1px solid #ececec;
    border-radius:18px;
    padding:10px;
    display:flex;
    flex-direction:column;
    min-height:200px;
    transition:.25s ease;
    box-shadow:0 2px 8px rgba(15,23,42,.03);
}

.method-card:hover{
    transform:translateY(-4px);
    box-shadow:0 16px 35px rgba(15,23,42,.08);
}

.method-card.ui{
    background: #f7f9fd;
    border:1px solid #2066ff;
}

.method-card.git{
    background:#f5fff9;
    border: 1px solid #5ba06f;
}

.method-card .icon-box{
    background:#EEF4FF;
}

.method-card.git .icon-box{
    background:#EAFBF1;
}

.section-description{
    margin-top:-10px;
    margin-bottom:30px;
    color:#6b7280;
    font-size:17px;
}

.footer-note{
    text-align:center;
    color:#6b7280;
    margin-top:50px;
    font-size:15px;
}

.footer-note a{
    text-decoration:none;
    font-weight:600;
}


.method-card .card-title{
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:18px;
}

.method-card .card-title h3{
    margin:0;
    font-size:1.55rem;
    font-weight:700;
}

.method-card p{
    margin:0 0 18px;
    color:#5b6472;
    line-height:1.7;
}

.method-card h4{
    margin:0 0 12px;
    font-size:.78rem;
    text-transform:uppercase;
    letter-spacing:2px;
    color:#8b93a3;
}

.method-card ul{
    list-style:none;
    padding:0;
    margin:0;
}

.method-card li{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:10px;
    padding-left: 20px;
}

.method-card li::before{
    content:"✓" !important;
    color:#22c55e !important;
    font-weight:bold !important;
    position: absolute;
    margin-left: -0.9em;
}

.method-card .card-footer{
    margin-top:auto;
    padding-top:16px;
    border-top:1px solid #eef2f7;
}

.method-card .icon-box{
    width:54px;
    height:54px;
    border-radius:16px;
    display:flex;
    justify-content:center;
    align-items:center;
}

.method-card.ui .icon-box{
    background:#eaf2ff;
}

.method-card.git .icon-box{
    background:#eafbf1;
}

.method-card .icon-box img{
    width:28px;
    height:28px;
}

.card-title img {
    width: 48px;
    height: 48px;
    padding: 10px;
    border-radius: 14px;
    object-fit: contain;
}

/* Purple */
.project-icon {
    background: #F3EEFF;
}

/* Green */
.workspace-icon {
    background: #EAFBF0;
}

/* Orange */
.environment-icon {
    background: #FFF2E8;
}

/* Blue */
.ui-icon {
    background: #EDF5FF;
}

/* Green */
.git-icon {
    background: #EAFBF0;
}


/* ============================================
   Create Project from UI
============================================ */

.page-icon{
    width:46px;
    height:46px;
    vertical-align:middle;
    margin-right:10px;
}

/* ============================================
   Prerequisite
============================================ */

.prerequisite-box{
    margin:30px 0;
    padding:18px 22px;
    border:1px solid #bfdcff;
    background:#f4f9ff;
    border-radius:12px;
}

.prerequisite-header{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:8px;
}

.prerequisite-header img{
    width:20px;
    height:20px;
}

.prerequisite-header h3,
.prerequisite-header h4,
.prerequisite-header h5,
.prerequisite-header h6{
    margin:0;
    color:#2563eb;
    font-size:16px;
}

/* ============================================
   Layout
============================================ */

.step-layout{
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:40px;
    margin-top:24px;
    align-items:flex-start;
}

/* ============================================
   Timeline
============================================ */

.step-left{
    position:relative;
}

.step-item{
    display:flex;
    gap:18px;
    position:relative;
    padding-bottom:28px;
}

.step-item:last-child{
    padding-bottom:0;
}

.step-item::before{
    content:"";
    position:absolute;
    left:14px;
    top:34px;
    width:2px;
    height:calc(100% - 8px);
    background:#dbeafe;
}

.step-item:last-child::before{
    display:none;
}

.step-circle-ui{
    width:30px;
    height:30px;
    min-width:30px;
    border-radius:50%;
    background:#2563eb;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:14px;
}

.step-content h3{
    margin:0 0 6px;
    font-size:18px;
    font-weight:600;
}

.step-content p{
    margin:0;
    color:#4b5563;
}

.step-content ul{
    margin:10px 0 0 20px;
}

.step-content li{
    margin:6px 0;
}

/* ============================================
   Form Card
============================================ */

.project-form{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:24px;
    box-shadow:0 6px 24px rgba(15,23,42,.05);
}

.form-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}

.form-header h2{
    margin:0;
    font-size:20px;
}

.close-btn{
    color:#9ca3af;
    font-size:20px;
}

.project-form label{
    display:block;
    margin-bottom:16px;
    font-weight:500;
    color:#374151;
}

.project-form input,
.project-form textarea,
.project-form select{
    width:100%;
    margin-top:8px;
    padding:12px 14px;
    border:1px solid #d1d5db;
    border-radius:8px;
    font-size:14px;
    box-sizing:border-box;
    background:#fff;
}

.project-form input:focus,
.project-form textarea:focus,
.project-form select:focus{
    border-color:#4f46e5;
    outline:none;
    box-shadow:0 0 0 3px rgba(79,70,229,.12);
}

.project-form textarea{
    resize:vertical;
}

/* ============================================
   Buttons
============================================ */

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

.cancel-btn{
    border:1px solid #d1d5db;
    background:#fff;
    color:#374151;
    padding:10px 18px;
    border-radius:8px;
    cursor:pointer;
    font-weight:500;
}

.cancel-btn:hover{
    background:#f8fafc;
}

.create-btn{
    background:#2563eb;
    color:#fff;
    border:none;
    padding:10px 20px;
    border-radius:8px;
    cursor:pointer;
    font-weight:600;
}

.create-btn:hover{
    background:#1d4ed8;
}

/* ============================================
   What Happens Next
============================================ */

.what-next{
    margin-top:40px;
}

.what-next ul{
    margin-top:16px;
}

.what-next li{
    margin-bottom:10px;
}

/* ============================================
   Tip
============================================ */

.tip-box{
    margin-top:32px;
    padding:18px 22px;
    background:#f8f5ff;
    border:1px solid #d8c7ff;
    border-radius:12px;
}

.tip-box h3{
    margin-top:0;
    color:#6d28d9;
}

/* ============================================
   Navigation
============================================ */

.page-navigation{
    margin-top:40px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.nav-button{
    width:390px;              /* Fixed width */
    height:48px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 18px;
    border-radius:8px;
    text-decoration:none;
    font-weight:600;
    transition:.2s;
}

.previous{
    background:#7253ed;
    color:#fff;
}

.next{
    background:#7253ed;
    color:#fff;
}

/* ============================================
   Divider
============================================ */

hr{
    margin:40px 0;
}

/* ============================================
   Responsive
============================================ */

@media (max-width:1024px){

.step-layout{
    grid-template-columns:1fr;
}

.step-right{
    order:-1;
}

.page-navigation{
    flex-direction:column;
    gap:16px;
}

.nav-button{
    width:100%;
}

}

@media (max-width:768px){

.project-form{
    padding:18px;
}

.step-content h3{
    font-size:17px;
}

.step-circle{
    width:28px;
    height:28px;
    min-width:28px;
}

.prerequisite-box{
    padding:16px;
}

}

@media (max-width:480px){

.project-form{
    padding:16px;
}

.form-actions{
    flex-direction:column;
}

.cancel-btn,
.create-btn{
    width:100%;
}

.page-icon{
    width:36px;
    height:36px;
}

}

.tip-header{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:12px;
}

.tip-header img{
    width:24px;
    height:24px;
    flex-shrink:0;
}

.tip-header h3{
    margin:0;
    color:#6d28d9;
    font-size:18px;
    font-weight:600;
}

/* ==========================================
   Create Project using Platform as Code
========================================== */

.page-icon{
    width:46px;
    height:46px;
    vertical-align:middle;
    margin-right:10px;
}

/* ==========================================
   Important Callout
========================================== */

.important-box{
    margin:28px 0;
    padding:18px 22px;
    border:1px solid #f9d28b;
    background:#fff8eb;
    border-radius:12px;
}

.important-header{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:8px;
}

.important-header img{
    width:20px;
    height:20px;
}

.important-header h3{
    margin:0;
    color:#c2410c;
    font-size:16px;
    font-weight:600;
}

/* ==========================================
   Main Layout
========================================== */

.step-layout{
    display:grid;
    grid-template-columns:1.05fr 0.95fr;
    gap:36px;
    margin-top:24px;
}

/* ==========================================
   Timeline
========================================== */

.step-left{
    position:relative;
}

.step-item{
    display:flex;
    gap:18px;
    position:relative;
    padding-bottom:28px;
}

.step-item:last-child{
    padding-bottom:0;
}

.step-item::before{
    content:"";
    position:absolute;
    left:14px;
    top:34px;
    width:2px;
    height:calc(100% - 8px);
    background:#bbf7d0;
}

.step-item:last-child::before{
    display:none;
}

.step-circle-pac{
    width:30px;
    height:30px;
    min-width:30px;
    border-radius:50%;
    background:#16a34a;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
}

.step-content h3{
    margin:0 0 6px;
    font-size:18px;
    color:#111827;
}

.step-content p{
    margin:0;
    color:#4b5563;
    line-height:1.7;
}

/* ==========================================
   Right Panel
========================================== */

.code-panel{
    display:flex;
    flex-direction:column;
    gap:20px;
}

/* ==========================================
   Code Card
========================================== */

.code-card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 6px 18px rgba(15,23,42,.05);
}

.code-tabs{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 18px;
    border-bottom:1px solid #eef2f7;
}

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

.tab{
    padding:7px 18px;
    border:1px solid #dbeafe;
    border-radius:8px;
    cursor:pointer;
    font-size:14px;
    font-weight:600;
    color:#6b7280;
    background:#fff;
}

.tab.active{
    color:#2563eb;
    border-color:#bfdbfe;
    background:#eff6ff;
}

.copy-btn{
    padding:7px 14px;
    border:1px solid #d1d5db;
    border-radius:8px;
    background:#fff;
    font-size:14px;
    cursor:pointer;
    transition:.2s;
}

.copy-btn:hover{
    background:#f8fafc;
}

.code-card pre{
    margin:0;
    padding:20px;
    overflow:auto;
    background:#fcfcfd;
}

.code-card code{
    font-family:Consolas, monospace;
    font-size:14px;
    line-height:1.8;
    color:#1e40af;
}

/* ==========================================
   Repository Card
========================================== */

.repo-card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:18px;
    box-shadow:0 6px 18px rgba(15,23,42,.05);
}

.repo-card h3{
    margin-top:0;
    margin-bottom:14px;
    font-size:17px;
}

.repo-card pre{
    margin:0;
    background:#fafafa;
    padding:18px;
    border-radius:8px;
    overflow:auto;
}

.repo-card code{
    font-family:Consolas, monospace;
    line-height:1.8;
}

/* ==========================================
   Tip Box
========================================== */

.tip-box{
    margin-top:34px;
    border:1px solid #d8c7ff;
    background:#faf6ff;
    border-radius:12px;
    padding:18px 22px;
}

.tip-header{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:12px;
}

.tip-header img{
    width:24px;
    height:24px;
}

.tip-header h3{
    margin:0;
    color:#6d28d9;
}

.tip-box p{
    margin:0;
    line-height:1.8;
}

/* ==========================================
   Responsive
========================================== */

@media (max-width:1000px){

.step-layout{
    grid-template-columns:1fr;
}

.page-navigation{
    flex-direction:column;
    gap:16px;
}

.nav-button{
    width:100%;
}

}

@media (max-width:640px){

.code-tabs{
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
}

.tabs{
    width:100%;
}

.tab{
    flex:1;
    text-align:center;
}

.copy-btn{
    width:100%;
}

}

.step-right{

    display:flex;

    flex-direction:column;

    gap:20px;

}

/* YAML CARD */

.code-card{

    background:#fff;

    border:1px solid #e5e7eb;

    border-radius:12px;

    overflow:hidden;

    box-shadow:0 3px 12px rgba(15,23,42,.05);

}

/* REPOSITORY CARD */

.repo-card{

    background:#fff;

    border:1px solid #e5e7eb;

    border-radius:12px;

    padding:20px;

    box-shadow:0 3px 12px rgba(15,23,42,.05);

}

.repo-card h3{

    margin-top:0;

    margin-bottom:16px;

    font-size:20px;

}

.repo-card pre{

    margin:0;

    padding:0;

    background:none;

}

.repo-card code{

    font-size:15px;

    line-height:1.8;

    font-family:Consolas, monospace;

}

/* ==========================================
   YAML / JSON Tabs (CSS Only)
========================================== */

.code-card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 4px 12px rgba(15,23,42,.05);
}

.tabs{
    display:flex;
    flex-wrap:wrap;
}

/* Hide radio buttons */

.tabs input[type="radio"]{
    display:none;
}

/* Labels */

.tab-label{
    padding:12px 22px;
    cursor:pointer;
    font-size:14px;
    font-weight:600;
    color:#6b7280;
    border-bottom:1px solid #eef2f7;
    transition:.2s;
}

/* Active Tab */

#yaml-tab:checked + .tab-label,
#json-tab:checked + .tab-label{
    color:#2563eb;
    background:#eff6ff;
    border-bottom:2px solid #2563eb;
}

/* Content Wrapper */

.content-wrapper{
    width:100%;
}

/* Hide Both */

.yaml-content,
.json-content{
    display:none;
}

/* Show YAML */

#yaml-tab:checked ~ .content-wrapper .yaml-content{
    display:block;
}

/* Show JSON */

#json-tab:checked ~ .content-wrapper .json-content{
    display:block;
}

/* Code Block */

.code-card pre{
    margin:0;
    padding:20px;
    background:#fcfcfd;
    border-top:1px solid #eef2f7;
    overflow:auto;
}

.code-card code{
    font-family:Consolas, monospace;
    font-size:14px;
    line-height:1.8;
    color:#1e293b;
}









/* Overview */

.prerequisite-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
}

.prerequisite-header img {
    width: 22px;
    height: 22px;
}

.prerequisite-header h3 {
    margin: 0;
    color: #176b45;
    font-size: 21px;
}

.platform-overview {
    margin: 0 0 28px;
    max-width: 1100px;
    color: #596273;
    font-size: 16px;
    line-height: 1.8;
}


/* Workflow heading */

.workflow-title {
    margin: 0 0 20px;
    font-size: 27px;
    line-height: 1.25;
    color: #111827;
}


/* Main two-column layout */

.platform-code-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(520px, 1.55fr);
    gap: 24px;
    align-items: stretch;
}


/* Left workflow */

.platform-workflow {
    position: relative;
    padding: 28px;
    box-sizing: border-box;
    border: 1px solid #d9dde5;
    border-radius: 12px;
    background: #ffffff;
}

.platform-workflow .step-item {
    position: relative;
    display: grid;
    grid-template-columns: 42px 1fr;
    column-gap: 18px;
    padding: 0 0 38px;
    margin: 0;
}

.platform-workflow .step-item:last-child {
    padding-bottom: 0;
}

.platform-workflow .step-item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 17px;
    top: 34px;
    bottom: 0;
    width: 2px;
    background: #b7ead1;
}

.platform-workflow .step-circle-ui {
    position: relative;
    z-index: 2;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #18a96b;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

.platform-workflow .step-content {
    padding-top: 1px;
}

.platform-workflow .step-content h3 {
    margin: 0 0 7px;
    color: #111827;
    font-size: 18px;
    line-height: 1.35;
}

.platform-workflow .step-content p {
    margin: 0;
    color: #596273;
    font-size: 15px;
    line-height: 1.65;
}


/* Right column */

.platform-right {
    min-width: 0;
    padding: 28px;
    box-sizing: border-box;
    border: 1px solid #d9dde5;
    border-radius: 12px;
    background: #ffffff;
}

.platform-description {
    margin: 0 0 20px;
    color: #1f2937;
    font-size: 16px;
    line-height: 1.7;
}

.platform-workflow-heading {
    margin: 0 0 18px;
    text-align: center;
    color: #168451;
    font-size: 20px;
}


/* Workflow diagram */

.workflow-diagram {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 22px 18px;
    box-sizing: border-box;
    border: 1px solid #cfe7da;
    border-radius: 10px;
    background: #fbfefc;
}

.workflow-node {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
}

.workflow-icon-define {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 21px;
    font-weight: 700;
    background:#E9F7F0;
    border: 1px solid #BFE5D0;
}

.workflow-icon-commit {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 21px;
    font-weight: 700;
    background:#7B50C2;
    border: 1px solid #6F42B5;
}

.workflow-icon-discover {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 21px;
    font-weight: 700;
    background:#387FEA;
    border: 1px solid #2F73D9;
}

.workflow-icon-validate {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 21px;
    font-weight: 700;
    background:#F2BE2B;
    border: 1px solid #E4AE18;
}

.workflow-icon-reconcile {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 21px;
    font-weight: 700;
    background:#02949F;
    border: 1px solid #01838E;
}

.workflow-icon-observe {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 21px;
    font-weight: 700;
    background:#25A664;
    border: 1px solid #1C9558;
}

.workflow-node strong {
    display: block;
    margin: 0 0 6px;
    color: #111827;
    font-size: 14px;
}

.workflow-node span {
    display: block;
    color: #596273;
    font-size: 12px;
    line-height: 1.45;
}

.workflow-arrow {
    flex: 0 0 auto;
    color: #1f2937;
    font-size: 25px;
    line-height: 1;
}


/* Benefits + Tip */

.platform-bottom-grid {
    display: grid;
    grid-template-columns: 1fr 1.12fr;
    gap: 18px;
    margin-top: 18px;
}

.platform-card {
    padding: 20px;
    box-sizing: border-box;
    border: 1px solid #d9dde5;
    border-radius: 10px;
}

.platform-card h3 {
    margin: 0 0 15px;
    color: #168451;
    font-size: 19px;
}

.benefits-card {
    background: #fbfefc;
}

.benefits-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.benefits-card li {
    position: relative;
    margin: 0 0 11px;
    color: #1f2937;
    font-size: 14px;
    line-height: 1.5;
}

.benefits-card li::before {
    content: "✓" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    color: #168451 !important;
    font-weight: 700 !important;
}


/* Tip */

.platform-tip {
    background: #fffdf6;
    border-color: #eadfbd;
}

.platform-tip .tip-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
}

.platform-tip .tip-header img {
    width: 22px;
    height: 22px;
}

.platform-tip .tip-header h3 {
    margin: 0;
    color: #d88b00;
}

.platform-tip p {
    margin: 0 0 14px;
    color: #394150;
    font-size: 14px;
    line-height: 1.6;
}

.platform-tip hr {
    margin: 14px 0;
    border: 0;
    border-top: 1px solid #eadfbd;
}

.platform-tip > strong {
    color: #d88b00;
    font-size: 13px;
}

.platform-tip pre {
    margin: 10px 0 0;
    padding: 12px;
    overflow-x: auto;
    border-radius: 7px;
    background: #fffaf0;
}

.platform-tip code {
    font-size: 12px;
    line-height: 1.5;
}


/* Navigation */

.platform-navigation {
    display: flex;
    justify-content: flex-end;
    gap: 18px;
    margin: 24px 0 10px;
}

.platform-navigation .nav-button {
    min-width: 250px;
    padding: 15px 22px;
    box-sizing: border-box;
    text-align: center;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
}

.platform-navigation .nav-button.previous {
    border: 1px solid #168451;
    background: #ffffff;
    color: #168451;
}

.platform-navigation .nav-button.next {
    border: 1px solid #168451;
    background: #168451;
    color: #ffffff;
}


/* Responsive */

@media (max-width: 1100px) {

    .platform-code-layout {
        grid-template-columns: 1fr;
    }

    .workflow-diagram {
        flex-wrap: wrap;
    }

    .workflow-node {
        flex: 1 1 28%;
    }

    .workflow-arrow {
        display: none;
    }
}









/* =========================================================
   WORKFLOW DIAGRAM - PERFECT HORIZONTAL ALIGNMENT
   ========================================================= */

.workflow-diagram {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;

    padding: 22px 18px;

    border: 1px solid #cfe7da;
    border-radius: 10px;

    background: #fbfefc;

    box-sizing: border-box;
}


/* ---------------------------------------------------------
   Each workflow item
   --------------------------------------------------------- */

.workflow-node {
    flex: 1 1 0;

    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}


/* ---------------------------------------------------------
   Number box
   --------------------------------------------------------- */

.workflow-icon {
    width: 56px;
    height: 56px;

    flex: 0 0 56px;

    margin: 0 auto 12px;

    display: flex;

    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    border-radius: 10px;

    background: #e5f6ee;

    border: 1px solid #a9ddc4;

    color: #148453;

    font-size: 21px;

    font-weight: 700;
}


/* ---------------------------------------------------------
   Heading
   --------------------------------------------------------- */

.workflow-node strong {

    display: flex;

    align-items: flex-start;
    justify-content: center;

    width: 100%;

    min-height: 22px;

    margin: 0 0 6px;

    color: #111827;

    font-size: 14px;

    line-height: 22px;

    font-weight: 700;
}


/* ---------------------------------------------------------
   Description
   --------------------------------------------------------- */

.workflow-node span {

    display: block;

    width: 100%;

    min-height: 72px;

    margin: 0;

    color: #596273;

    font-size: 12px;

    line-height: 1.45;

    text-align: center;
}


/* ---------------------------------------------------------
   Arrows
   --------------------------------------------------------- */

.workflow-arrow {

    flex: 0 0 24px;

    width: 24px;

    height: 56px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-top: 0;

    color: #1f2937;

    font-size: 24px;

    line-height: 56px;
}




.catalog-header-box {
    width: 100%;
    margin: 0 0 28px;
    padding: 28px 34px;
    box-sizing: border-box;
    border: 1px solid #d9dde5;
    border-radius: 12px;
    background: #ffffff;
}

.catalog-header-box h2 {
    margin: 0 0 10px;
    color: #111827;
    font-size: 32px;
    line-height: 1.2;
}

.catalog-header-box p {
    margin: 0;
    max-width: 760px;
    color: #596273;
    font-size: 16px;
    line-height: 1.7;
}


/* =========================================================
   CATALOG INTRODUCTION
   ========================================================= */

.catalog-prerequisite {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin: 0 0 22px;
    padding: 20px 24px;
    box-sizing: border-box;
    border: 1px solid #bfe3cf;
    border-radius: 10px;
    background: #fbfefc;
}

.catalog-prerequisite .prerequisite-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
}

.catalog-prerequisite .prerequisite-header img {
    width: 22px;
    height: 22px;
}

.catalog-prerequisite .prerequisite-header h3 {
    margin: 0;
    color: #168451;
    font-size: 19px;
}

.catalog-prerequisite > p {
    margin: 1px 0 0;
    color: #394150;
    font-size: 14px;
    line-height: 1.65;
}


/* =========================================================
   MAIN TWO-COLUMN LAYOUT
   ========================================================= */

.catalog-layout {
    display: grid;
    grid-template-columns: minmax(300px, 0.82fr) minmax(620px, 1.55fr);
    gap: 24px;
    align-items: stretch;
}


/* =========================================================
   LEFT WORKFLOW
   ========================================================= */

.catalog-workflow {
    position: relative;
    padding: 28px;
    box-sizing: border-box;
    border: 1px solid #d9dde5;
    border-radius: 10px;
    background: #ffffff;
}

.catalog-workflow .step-item {
    position: relative;
    display: grid;
    grid-template-columns: 42px 1fr;
    column-gap: 18px;
    padding: 0 0 32px;
    margin: 0;
}

.catalog-workflow .step-item:last-child {
    padding-bottom: 0;
}

.catalog-workflow .step-item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 17px;
    top: 34px;
    bottom: 0;
    width: 2px;
    background: #b7ead1;
}

.catalog-workflow .step-circle-ui {
    position: relative;
    z-index: 2;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #18a96b;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
}

.catalog-workflow .step-content h3 {
    margin: 0 0 7px;
    color: #111827;
    font-size: 17px;
    line-height: 1.35;
}

.catalog-workflow .step-content p {
    margin: 0;
    color: #596273;
    font-size: 14px;
    line-height: 1.6;
}

.catalog-workflow .step-content pre {
    margin: 10px 0 0;
    padding: 9px 11px;
    overflow-x: auto;
    border: 1px solid #e4e7ec;
    border-radius: 6px;
    background: #f6f8fb;
}

.catalog-workflow .step-content code {
    font-size: 12px;
}


/* =========================================================
   RIGHT CONTENT
   ========================================================= */

.catalog-content {
    min-width: 0;
}

.catalog-info-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 0 0 12px;
    padding: 18px;
    box-sizing: border-box;
    border: 1px solid #cbdcff;
    border-radius: 9px;
    background: #f8fbff;
}

.catalog-info-icon {
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #eaf2ff;
}

.catalog-info-icon img {
    width: 32px;
    height: 32px;
}

.catalog-info-card h3 {
    margin: 0 0 7px;
    color: #1670dc;
    font-size: 16px;
}

.catalog-info-card p {
    margin: 0;
    color: #1f2937;
    font-size: 14px;
    line-height: 1.6;
}


/* =========================================================
   RESOURCE CATEGORIES + SCHEMA
   ========================================================= */

.catalog-resource-layout {
    display: grid;
    grid-template-columns: minmax(230px, 0.72fr) minmax(440px, 1.5fr);
    gap: 12px;
    align-items: stretch;
}

.resource-categories {
    padding: 18px;
    box-sizing: border-box;
    border: 1px solid #d9dde5;
    border-radius: 9px;
    background: #ffffff;
}

.resource-categories h3,
.catalog-schema-card h3,
.schema-fields-card h3 {
    margin: 0 0 8px;
    color: #168451;
    font-size: 16px;
}

.resource-subtitle {
    margin: 0 0 13px;
    color: #596273;
    font-size: 13px;
}

.resource-category-item {
    min-height: 36px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 4px 2px;
    box-sizing: border-box;
    border-top: 1px solid #edf0f3;
    color: #111827;
    font-size: 13px;
}

.resource-category-item:first-of-type {
    border-top: 0;
}

.resource-category-icon {
    width: 23px;
    height: 23px;
    flex: 0 0 23px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    font-size: 13px;
}

.resource-category-icon.organization { background: #eee7ff; color: #6d42d8; }
.resource-category-icon.project { background: #e8f0ff; color: #2e6fd8; }
.resource-category-icon.workspace { background: #e4f7ea; color: #2d9a55; }
.resource-category-icon.environment { background: #fff1d7; color: #e39a00; }
.resource-category-icon.stack { background: #eee5ff; color: #7a45d7; }
.resource-category-icon.credentials { background: #e5f0ff; color: #3271d2; }
.resource-category-icon.policy { background: #e4f5eb; color: #299459; }
.resource-category-icon.runner { background: #ffe8e8; color: #df4b4b; }
.resource-category-icon.integration { background: #f3e5ff; color: #a042d8; }

.category-arrow {
    margin-left: auto;
    color: #667085;
    font-size: 20px;
    line-height: 1;
}

.resource-more {
    padding-top: 8px;
    text-align: center;
    color: #111827;
    font-size: 12px;
    font-weight: 600;
}


/* Schema */

.catalog-schema-card {
    min-width: 0;
    padding: 18px;
    box-sizing: border-box;
    border: 1px solid #d9dde5;
    border-radius: 9px;
    background: #ffffff;
}

.resource-kind {
    margin: 0 0 13px;
    color: #111827;
    font-size: 13px;
    font-weight: 600;
}

.resource-kind span {
    display: inline-block;
    margin-left: 5px;
    padding: 3px 9px;
    border: 1px solid #9bd6b7;
    border-radius: 999px;
    background: #f1fbf5;
    color: #168451;
    font-weight: 600;
}

.schema-tabs {
    display: flex;
    gap: 22px;
    margin-bottom: 0;
    border-bottom: 1px solid #dfe4ea;
}

.schema-tabs span {
    position: relative;
    padding: 8px 0;
    color: #4b5563;
    font-size: 13px;
    white-space: nowrap;
}

.schema-tabs span.active {
    color: #111827;
    font-weight: 700;
}

.schema-tabs span.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: #168451;
}

.yaml-box {
    position: relative;
    min-height: 255px;
    padding: 14px 14px 14px 12px;
    box-sizing: border-box;
    border: 1px solid #dfe4ea;
    border-top: 0;
    border-radius: 0 0 7px 7px;
    background: #fbfcfd;
}

.yaml-box pre {
    margin: 0;
    padding: 2px 0;
    overflow-x: auto;
    background: transparent;
}

.yaml-box code {
    color: #25364d;
    font-size: 12px;
    line-height: 1.65;
}

.yaml-copy {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    padding: 7px 11px;
    border: 1px solid #d5dbe3;
    border-radius: 6px;
    background: #ffffff;
    color: #374151;
    font-size: 12px;
    cursor: pointer;
}


/* =========================================================
   SCHEMA FIELDS
   ========================================================= */

.schema-fields-card {
    margin-top: 12px;
    padding: 12px;
    box-sizing: border-box;
    border: 1px solid #d9dde5;
    border-radius: 9px;
    background: #ffffff;
}

.schema-fields-card h3 {
    margin-bottom: 8px;
}

.schema-table-wrapper {
    overflow-x: auto;
}

.schema-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.schema-table th,
.schema-table td {
    padding: 7px 8px;
    border-top: 1px solid #e4e7eb;
    text-align: left;
    vertical-align: middle;
    color: #25364d;
    font-size: 11px;
    line-height: 1.4;
}

.schema-table th {
    color: #111827;
    font-size: 11px;
    font-weight: 700;
    border-top: 0;
}

.schema-table th:nth-child(1) { width: 21%; }
.schema-table th:nth-child(2) { width: 15%; }
.schema-table th:nth-child(3) { width: 15%; }
.schema-table th:nth-child(4) { width: 49%; }

.required-yes,
.required-no {
    display: inline-block;
    min-width: 25px;
    padding: 2px 7px;
    box-sizing: border-box;
    text-align: center;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
}

.required-yes {
    border: 1px solid #9bd6b7;
    background: #f1fbf5;
    color: #168451;
}

.required-no {
    border: 1px solid #cfd5dc;
    background: #f7f8fa;
    color: #4b5563;
}


/* =========================================================
   TIP
   ========================================================= */

.catalog-tip {
    margin-top: 18px;
    padding: 18px 20px;
    box-sizing: border-box;
    border: 1px solid #eadfbd;
    border-radius: 9px;
    background: #fffdf6;
}

.catalog-tip .tip-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 9px;
}

.catalog-tip .tip-header img {
    width: 22px;
    height: 22px;
}

.catalog-tip .tip-header h3 {
    margin: 0;
    color: #d88b00;
    font-size: 17px;
}

.catalog-tip p {
    margin: 0;
    color: #394150;
    font-size: 14px;
    line-height: 1.6;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.catalog-navigation {
    display: flex;
    justify-content: flex-end;
    gap: 18px;
    margin-top: 24px;
}

.catalog-navigation .nav-button {
    min-width: 250px;
    padding: 14px 22px;
    box-sizing: border-box;
    text-align: center;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
}

.catalog-navigation .nav-button.previous {
    border: 1px solid #168451;
    background: #ffffff;
    color: #168451;
}

.catalog-navigation .nav-button.next {
    border: 1px solid #168451;
    background: #168451;
    color: #ffffff;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1150px) {

    .catalog-layout {
        grid-template-columns: 1fr;
    }

    .catalog-resource-layout {
        grid-template-columns: minmax(220px, 0.7fr) minmax(430px, 1.3fr);
    }
}

@media (max-width: 800px) {

    .catalog-prerequisite {
        flex-direction: column;
    }

    .catalog-resource-layout {
        grid-template-columns: 1fr;
    }

    .catalog-navigation {
        flex-direction: column;
    }

    .catalog-navigation .nav-button {
        width: 100%;
        min-width: 0;
    }
}



















/* =========================================================
   RESOURCES PAGE
   ========================================================= */

.resources-page {
    width: 100%;
    box-sizing: border-box;
}


/* =========================================================
   HEADER
   ========================================================= */

.resources-header-row {
    display: grid;

    grid-template-columns: minmax(0, 1fr) minmax(400px, 0.9fr);

    gap: 34px;

    align-items: start;

    margin-bottom: 26px;
}

.resources-title h2 {
    margin: 0 0 8px;

    color: #111827;

    font-size: 38px;
    line-height: 1.12;
}

.resources-title p {
    max-width: 650px;

    margin: 0;

    color: #1f2937;

    font-size: 15px;
    line-height: 1.65;
}

.resources-breadcrumb-spacer {
    display: none;
}


/* =========================================================
   PREREQUISITE
   ========================================================= */

.resources-prerequisite {
    display: flex;

    align-items: flex-start;

    gap: 14px;

    padding: 18px 20px;

    box-sizing: border-box;

    border: 1px solid #bfe2cf;

    border-radius: 9px;

    background: #fbfefc;
}

.resources-prerequisite-icon {
    width: 28px;
    height: 28px;

    flex: 0 0 28px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #25a34a;
}

.resources-prerequisite-icon img {
    width: 17px;
    height: 17px;

    filter: brightness(0) invert(1);
}

.resources-prerequisite h3 {
    margin: 0 0 6px;

    color: #168451;

    font-size: 14px;
}

.resources-prerequisite p {
    margin: 0;

    color: #374151;

    font-size: 13px;

    line-height: 1.55;
}


/* =========================================================
   MAIN GRID
   ========================================================= */

.resources-main-grid {
    display: grid;

    grid-template-columns:
        minmax(300px, 0.72fr)
        minmax(650px, 1.6fr);

    gap: 16px;

    align-items: stretch;
}


/* =========================================================
   LEFT WORKFLOW
   ========================================================= */

.resources-workflow-card {
    padding: 28px 26px;

    box-sizing: border-box;

    border: 1px solid #d9dde5;

    border-radius: 9px;

    background: #ffffff;
}

.resources-step-item {
    position: relative;

    display: grid;

    grid-template-columns: 36px 1fr;

    column-gap: 17px;

    padding-bottom: 35px;
}

.resources-step-item:last-child {
    padding-bottom: 0;
}

.resources-step-item:not(:last-child)::before {
    content: "";

    position: absolute;

    left: 17px;

    top: 34px;

    bottom: 0;

    width: 2px;

    background: #b9ead4;
}

.resources-step-circle {
    position: relative;

    z-index: 2;

    width: 34px;
    height: 34px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #16a866;

    color: #ffffff;

    font-size: 15px;

    font-weight: 700;
}

.resources-step-content h3 {
    margin: 1px 0 7px;

    color: #111827;

    font-size: 16px;

    line-height: 1.35;
}

.resources-step-content p {
    margin: 0;

    color: #596273;

    font-size: 14px;

    line-height: 1.6;
}


/* =========================================================
   RIGHT CONTENT
   ========================================================= */

.resources-content {
    min-width: 0;
}


/* =========================================================
   WHAT ARE RESOURCES
   ========================================================= */

.resources-info-card {
    display: flex;

    align-items: flex-start;

    gap: 18px;

    margin-bottom: 10px;

    padding: 18px;

    box-sizing: border-box;

    border: 1px solid #c8dcff;

    border-radius: 9px;

    background: #f7faff;
}

.resources-info-icon {
    width: 56px;
    height: 56px;

    flex: 0 0 56px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background: #e6efff;
}

.resources-info-icon img {
    width: 32px;
    height: 32px;
}

.resources-info-card h3 {
    margin: 0 0 6px;

    color: #0b73df;

    font-size: 16px;
}

.resources-info-card p {
    margin: 0;

    color: #172033;

    font-size: 13px;

    line-height: 1.7;
}


/* =========================================================
   TABLE CARD
   ========================================================= */

.resources-table-card {
    padding: 15px;

    box-sizing: border-box;

    border: 1px solid #d9dde5;

    border-radius: 9px;

    background: #ffffff;
}

.resources-card-title-row {
    margin-bottom: 12px;
}

.resources-card-title-row h3 {
    margin: 0;

    color: #168451;

    font-size: 15px;
}


/* Filters */

.resources-filters {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 12px;
}

.resources-search {
    position: relative;

    width: 190px;
}

.resources-search-icon {
    position: absolute;

    left: 10px;
    top: 50%;

    transform: translateY(-50%);

    color: #667085;

    font-size: 17px;
}

.resources-search input,
.resources-filters select {
    height: 34px;

    box-sizing: border-box;

    border: 1px solid #d6dbe3;

    border-radius: 6px;

    background: #ffffff;

    color: #374151;

    font-size: 12px;

    outline: none;
}

.resources-search input {
    width: 100%;

    padding: 0 10px 0 31px;
}

.resources-filters select {
    min-width: 120px;

    padding: 0 9px;
}

.resources-updated {
    margin-left: auto;

    color: #596273;

    font-size: 11px;

    white-space: nowrap;
}

.resources-updated span {
    margin-right: 6px;

    font-size: 15px;
}


/* Table */

.resources-table-wrapper {
    overflow-x: auto;
}

.resources-table {
    width: 100%;

    border-collapse: collapse;

    table-layout: fixed;
}

.resources-table th,
.resources-table td {
    padding: 8px 6px;

    border-top: 1px solid #e5e8ed;

    text-align: left;

    vertical-align: middle;

    color: #172033;

    font-size: 11px;

    line-height: 1.3;
}

.resources-table th {
    border-top: 0;

    color: #111827;

    font-weight: 700;
}

.resources-table th:nth-child(1) { width: 21%; }
.resources-table th:nth-child(2) { width: 16%; }
.resources-table th:nth-child(3) { width: 17%; }
.resources-table th:nth-child(4) { width: 16%; }
.resources-table th:nth-child(5) { width: 14%; }
.resources-table th:nth-child(6) { width: 10%; }
.resources-table th:nth-child(7) { width: 6%; }

.resources-table a {
    color: #6546e8;

    text-decoration: none;

    font-weight: 500;
}

.resource-status {
    display: inline-block;

    padding: 3px 7px;

    border-radius: 999px;

    font-size: 10px;

    font-weight: 600;

    white-space: nowrap;
}

.resource-status.healthy {
    border: 1px solid #a9dfc2;

    background: #f0fbf5;

    color: #168451;
}

.resource-status.degraded {
    border: 1px solid #f3cf75;

    background: #fff9e8;

    color: #d98b00;
}

.sync-status {
    color: #168451;

    font-weight: 500;
}

.resource-action {
    text-align: center !important;

    font-size: 17px !important;

    color: #374151 !important;
}


/* Pagination */

.resources-pagination-row {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    padding-top: 11px;

    color: #596273;

    font-size: 11px;
}

.resources-pagination {
    display: flex;

    align-items: center;

    gap: 2px;
}

.resources-pagination button {
    min-width: 28px;
    height: 28px;

    padding: 0 7px;

    border: 0;

    border-radius: 5px;

    background: #ffffff;

    color: #374151;

    font-size: 11px;

    cursor: pointer;
}

.resources-pagination button.active {
    border: 1px solid #5c8dff;

    color: #3168dd;

    background: #f7faff;
}


/* =========================================================
   DETAILS + TIP
   ========================================================= */

.resources-bottom-grid {
    display: grid;

    grid-template-columns: minmax(0, 1.35fr) minmax(250px, 0.75fr);

    gap: 10px;

    margin-top: 10px;
}


/* Details */

.resource-details-card {
    min-width: 0;

    padding: 14px;

    box-sizing: border-box;

    border: 1px solid #d9dde5;

    border-radius: 9px;

    background: #ffffff;
}

.resource-details-card > h3 {
    margin: 0 0 11px;

    color: #168451;

    font-size: 14px;
}

.resource-detail-tabs {
    display: flex;

    gap: 22px;

    overflow-x: auto;

    border-bottom: 1px solid #dfe4ea;
}

.resource-detail-tabs span {
    position: relative;

    padding: 0 0 8px;

    color: #374151;

    font-size: 10px;

    white-space: nowrap;
}

.resource-detail-tabs span.active {
    color: #168451;

    font-weight: 700;
}

.resource-detail-tabs span.active::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -1px;

    height: 2px;

    background: #168451;
}

.resource-detail-body {
    display: grid;

    grid-template-columns: 0.9fr 1.1fr;

    gap: 14px;

    padding-top: 11px;
}

.resource-detail-fields {
    display: flex;

    flex-direction: column;

    gap: 8px;
}

.resource-detail-fields > div {
    display: grid;

    grid-template-columns: 82px 1fr;

    gap: 5px;

    align-items: center;

    color: #263247;

    font-size: 10px;
}

.resource-detail-fields strong {
    color: #111827;
}

.api-badge {
    display: inline-block;

    width: fit-content;

    padding: 3px 6px;

    border: 1px solid #a9ddc1;

    border-radius: 999px;

    background: #f0fbf5;

    color: #168451;

    font-size: 9px;
}

.mini-status {
    display: inline-block;

    width: fit-content;

    padding: 2px 6px;

    border-radius: 999px;

    font-size: 9px;

    font-weight: 600;
}

.mini-status.synced,
.mini-status.healthy {
    border: 1px solid #a9ddc1;

    background: #f0fbf5;

    color: #168451;
}


/* YAML */

.resource-yaml {
    position: relative;

    min-width: 0;

    padding: 10px;

    box-sizing: border-box;

    border: 1px solid #e1e5eb;

    border-radius: 6px;

    background: #fbfcfd;
}

.resource-yaml button {
    position: absolute;

    top: 7px;
    right: 7px;

    padding: 5px 8px;

    border: 1px solid #d4dae2;

    border-radius: 5px;

    background: #ffffff;

    color: #374151;

    font-size: 10px;
}

.resource-yaml pre {
    margin: 0;

    padding-top: 2px;

    overflow: auto;
}

.resource-yaml code {
    color: #25364d;

    font-size: 9px;

    line-height: 1.7;
}


/* =========================================================
   TIP
   ========================================================= */

.resources-tip-card {
    padding: 16px;

    box-sizing: border-box;

    border: 1px solid #eadfbd;

    border-radius: 9px;

    background: #fffdf6;
}

.resources-tip-header {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 9px;
}

.resources-tip-header img {
    width: 22px;
    height: 22px;
}

.resources-tip-header h3 {
    margin: 0;

    color: #d88b00;

    font-size: 15px;
}

.resources-tip-card p {
    margin: 0;

    color: #394150;

    font-size: 12px;

    line-height: 1.6;
}

.resources-tip-card hr {
    margin: 14px 0;

    border: 0;

    border-top: 1px solid #eadfbd;
}

.resources-tip-card h4 {
    margin: 0 0 8px;

    color: #111827;

    font-size: 12px;
}

.resources-tip-card ul {
    margin: 0;

    padding-left: 17px;
}

.resources-tip-card li {
    margin: 5px 0;

    color: #4b5563;

    font-size: 11px;

    line-height: 1.45;
}

.status-green {
    color: #168451;
}

.status-orange {
    color: #d98b00;
}

.status-red {
    color: #d94b4b;
}

.status-gray {
    color: #667085;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.resources-navigation {
    display: flex;

    justify-content: flex-end;

    gap: 18px;

    margin-top: 22px;
}

.resources-navigation .nav-button {
    min-width: 230px;

    min-height: 64px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    padding: 12px 20px;

    box-sizing: border-box;

    border-radius: 8px;

    text-align: center;

    text-decoration: none;

    font-weight: 600;
}

.resources-navigation .nav-button small {
    display: block;

    margin-bottom: 3px;

    font-size: 10px;

    font-weight: 500;
}

.resources-navigation .nav-button.previous {
    border: 1px solid #168451;

    background: #ffffff;

    color: #168451;
}

.resources-navigation .nav-button.next {
    border: 1px solid #168451;

    background: #168451;

    color: #ffffff;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1200px) {

    .resources-header-row {
        grid-template-columns: 1fr;
    }

    .resources-main-grid {
        grid-template-columns: 1fr;
    }

    .resources-bottom-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 800px) {

    .resources-filters {
        flex-wrap: wrap;
    }

    .resources-updated {
        width: 100%;
        margin-left: 0;
    }

    .resource-detail-body {
        grid-template-columns: 1fr;
    }

    .resources-navigation {
        flex-direction: column;
    }

    .resources-navigation .nav-button {
        width: 100%;
        min-width: 0;
    }
}





/* =========================================================
   SYNCHRONIZATIONS PAGE
   ========================================================= */

.sync-page {
    width: 100%;
    box-sizing: border-box;
}


/* =========================================================
   HEADER
   ========================================================= */

.sync-header-row {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(390px, 0.88fr);

    gap: 32px;

    align-items: start;

    margin-bottom: 28px;
}

.sync-title h2 {
    margin: 0 0 9px;

    color: #111827;

    font-size: 38px;

    line-height: 1.12;
}

.sync-title p {
    max-width: 650px;

    margin: 0;

    color: #1f2937;

    font-size: 15px;

    line-height: 1.65;
}


/* =========================================================
   PREREQUISITE
   ========================================================= */

.sync-prerequisite {
    display: flex;

    align-items: flex-start;

    gap: 14px;

    padding: 18px 20px;

    box-sizing: border-box;

    border: 1px solid #bfe2cf;

    border-radius: 9px;

    background: #fbfefc;
}

.sync-prerequisite-icon {
    width: 29px;
    height: 29px;

    flex: 0 0 29px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #229b48;
}

.sync-prerequisite-icon img {
    width: 17px;
    height: 17px;

    filter: brightness(0) invert(1);
}

.sync-prerequisite h3 {
    margin: 0 0 6px;

    color: #168451;

    font-size: 14px;
}

.sync-prerequisite p {
    margin: 0;

    color: #374151;

    font-size: 13px;

    line-height: 1.55;
}


/* =========================================================
   MAIN TWO-COLUMN LAYOUT
   ========================================================= */

.sync-main-grid {
    display: grid;

    grid-template-columns:
        minmax(300px, 0.72fr)
        minmax(650px, 1.6fr);

    gap: 20px;

    align-items: stretch;
}


/* =========================================================
   LEFT WORKFLOW
   ========================================================= */

.sync-workflow-card {
    padding: 28px 28px 26px;

    box-sizing: border-box;

    border: 1px solid #d9dde5;

    border-radius: 9px;

    background: #ffffff;
}

.sync-step-item {
    position: relative;

    display: grid;

    grid-template-columns: 36px 1fr;

    column-gap: 18px;

    padding-bottom: 36px;
}

.sync-step-item:last-child {
    padding-bottom: 0;
}

.sync-step-item:not(:last-child)::before {
    content: "";

    position: absolute;

    left: 17px;

    top: 34px;

    bottom: 0;

    width: 2px;

    background: #b9e8d1;
}

.sync-step-circle {
    position: relative;

    z-index: 2;

    width: 34px;
    height: 34px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #159d5d;

    color: #ffffff;

    font-size: 15px;

    font-weight: 700;
}

.sync-step-content h3 {
    margin: 1px 0 7px;

    color: #111827;

    font-size: 16px;

    line-height: 1.35;
}

.sync-step-content p {
    margin: 0;

    color: #596273;

    font-size: 14px;

    line-height: 1.65;
}


/* =========================================================
   RIGHT CONTENT
   ========================================================= */

.sync-content {
    min-width: 0;
}


/* =========================================================
   WHAT ARE SYNCHRONIZATIONS
   ========================================================= */

.sync-info-card {
    display: flex;

    align-items: flex-start;

    gap: 18px;

    margin-bottom: 14px;

    padding: 18px 20px;

    box-sizing: border-box;

    border: 1px solid #bfd5ff;

    border-radius: 9px;

    background: #f7faff;
}

.sync-info-icon {
    width: 58px;
    height: 58px;

    flex: 0 0 58px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background: #e6efff;
}

.sync-info-icon img {
    width: 32px;
    height: 32px;
}

.sync-info-card h3 {
    margin: 0 0 7px;

    color: #0873df;

    font-size: 16px;
}

.sync-info-card p {
    max-width: 750px;

    margin: 0;

    color: #172033;

    font-size: 13px;

    line-height: 1.7;
}


/* =========================================================
   SYNCHRONIZATION PROCESS
   ========================================================= */

.sync-process-card {
    padding: 18px 20px 22px;

    box-sizing: border-box;

    border: 1px solid #d9dde5;

    border-radius: 9px;

    background: #ffffff;
}

.sync-process-card > h3 {
    margin: 0 0 30px;

    color: #168451;

    font-size: 16px;

    line-height: 1.3;
}

.sync-process-flow {
    display: grid;

    grid-template-columns:
        minmax(105px, 1fr)
        28px
        minmax(105px, 1fr)
        28px
        minmax(105px, 1fr)
        28px
        minmax(105px, 1fr)
        28px
        minmax(105px, 1fr);

    align-items: start;

    column-gap: 3px;
}

.sync-process-item {
    min-width: 0;

    text-align: center;
}

.sync-process-icon {
    width: 58px;
    height: 58px;

    margin: 0 auto 12px;

    display: flex;

    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    border: 1px solid #a9ddc1;

    border-radius: 9px;

    background: #f0fbf5;

    color: #168451;
}

.git-mark {
    font-size: 30px;

    transform: rotate(45deg);
}

.process-symbol {
    font-size: 30px;

    line-height: 1;
}

.sync-process-item h4 {
    min-height: 21px;

    margin: 0 0 7px;

    color: #111827;

    font-size: 13px;

    line-height: 1.35;
}

.sync-process-item p {
    min-height: 54px;

    margin: 0;

    color: #4b5563;

    font-size: 11px;

    line-height: 1.55;
}

.sync-arrow {
    display: flex;

    align-items: center;
    justify-content: center;

    padding-top: 21px;

    color: #159d5d;

    font-size: 24px;

    font-weight: 400;
}


/* =========================================================
   BEST PRACTICES + TIP
   ========================================================= */

.sync-bottom-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 14px;

    margin-top: 14px;
}

.sync-best-practices {
    padding: 18px 20px;

    box-sizing: border-box;

    border: 1px solid #bfe3cf;

    border-radius: 9px;

    background: #fbfefc;
}

.sync-best-practices h3 {
    margin: 0 0 12px;

    color: #168451;

    font-size: 16px;
}

.sync-best-practices ul {
    list-style: none;

    margin: 0;

    padding: 0;
}

.sync-best-practices li {
    position: relative;

    margin: 8px 0;

    padding-left: 20px;

    color: #172033;

    font-size: 12px;

    line-height: 1.5;
}

.sync-best-practices li::before {
    content: "✓";

    position: absolute;

    left: 0;

    color: #159d5d;

    font-weight: 700;
}


/* Tip */

.sync-tip-card {
    padding: 18px 20px;

    box-sizing: border-box;

    border: 1px solid #eadfbd;

    border-radius: 9px;

    background: #fffdf6;
}

.sync-tip-header {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 12px;
}

.sync-tip-header img {
    width: 22px;
    height: 22px;
}

.sync-tip-header h3 {
    margin: 0;

    color: #d88b00;

    font-size: 16px;
}

.sync-tip-card p {
    margin: 0;

    color: #394150;

    font-size: 12px;

    line-height: 1.7;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.sync-navigation {
    display: flex;

    justify-content: flex-end;

    gap: 18px;

    margin-top: 24px;
}

.sync-nav-button {
    min-width: 235px;

    min-height: 68px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 16px;

    padding: 12px 22px;

    box-sizing: border-box;

    border-radius: 8px;

    text-align: center;

    text-decoration: none;

    font-weight: 600;
}

.sync-nav-button small {
    display: block;

    margin-bottom: 4px;

    font-size: 11px;

    font-weight: 500;
}

.sync-nav-arrow {
    font-size: 20px;

    line-height: 1;
}

.sync-nav-button.previous {
    border: 1px solid #168451;

    background: #ffffff;

    color: #168451;
}

.sync-nav-button.next {
    border: 1px solid #168451;

    background: #168451;

    color: #ffffff;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1200px) {

    .sync-header-row {
        grid-template-columns: 1fr;
    }

    .sync-main-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {

    .sync-process-flow {
        grid-template-columns: 1fr;

        row-gap: 14px;
    }

    .sync-arrow {
        transform: rotate(90deg);

        padding: 0;

        height: 22px;
    }

    .sync-process-item p {
        min-height: auto;
    }
}

@media (max-width: 700px) {

    .sync-bottom-grid {
        grid-template-columns: 1fr;
    }

    .sync-navigation {
        flex-direction: column;
    }

    .sync-nav-button {
        width: 100%;

        min-width: 0;
    }
}



/* =========================================================
   HISTORY PAGE
   ========================================================= */

.history-page {
    width: 100%;
    box-sizing: border-box;
}


/* =========================================================
   HEADER
   ========================================================= */

.history-header-row {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(390px, 0.88fr);

    gap: 32px;

    align-items: start;

    margin-bottom: 30px;
}

.history-title h2 {
    margin: 0 0 10px;

    color: #111827;

    font-size: 38px;

    line-height: 1.12;
}

.history-title p {
    max-width: 650px;

    margin: 0;

    color: #111827;

    font-size: 15px;

    line-height: 1.7;
}


/* =========================================================
   PREREQUISITE
   ========================================================= */

.history-prerequisite {
    display: flex;

    align-items: flex-start;

    gap: 14px;

    padding: 18px 20px;

    box-sizing: border-box;

    border: 1px solid #bfe2cf;

    border-radius: 9px;

    background: #fbfefc;
}

.history-prerequisite-icon {
    width: 29px;
    height: 29px;

    flex: 0 0 29px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #229b48;
}

.history-prerequisite-icon img {
    width: 17px;
    height: 17px;

    filter: brightness(0) invert(1);
}

.history-prerequisite h3 {
    margin: 0 0 7px;

    color: #168451;

    font-size: 14px;
}

.history-prerequisite p {
    margin: 0;

    color: #374151;

    font-size: 13px;

    line-height: 1.6;
}


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.history-main-grid {
    display: grid;

    grid-template-columns:
        minmax(350px, 0.78fr)
        minmax(650px, 1.35fr);

    gap: 20px;

    align-items: stretch;
}

.history-left,
.history-right {
    min-width: 0;
}


/* =========================================================
   WHAT IS HISTORY
   ========================================================= */

.history-info-card {
    display: flex;

    align-items: flex-start;

    gap: 18px;

    padding: 20px;

    margin-bottom: 20px;

    box-sizing: border-box;

    border: 1px solid #bfd5ff;

    border-radius: 9px;

    background: #f7faff;
}

.history-info-icon {
    width: 62px;
    height: 62px;

    flex: 0 0 62px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background: #e5efff;
}

.history-info-icon img {
    width: 35px;
    height: 35px;
}

.history-info-card h3 {
    margin: 2px 0 8px;

    color: #0873df;

    font-size: 16px;
}

.history-info-card p {
    margin: 0;

    color: #111827;

    font-size: 13px;

    line-height: 1.8;
}


/* =========================================================
   HOW HISTORY HELPS
   ========================================================= */

.history-help-card {
    padding: 20px;

    box-sizing: border-box;

    border: 1px solid #d9dde5;

    border-radius: 9px;

    background: #ffffff;
}

.history-help-card > h3 {
    margin: 0 0 18px;

    color: #168451;

    font-size: 16px;
}

.history-help-item {
    position: relative;

    display: grid;

    grid-template-columns: 58px 1fr;

    column-gap: 18px;

    align-items: center;

    min-height: 86px;

    padding-bottom: 12px;
}

.history-help-item:last-child {
    padding-bottom: 0;
}

.history-help-item:not(:last-child)::after {
    content: "";

    position: absolute;

    left: 29px;

    top: 58px;

    bottom: -3px;

    width: 1px;

    background: #bfe4cf;
}

.history-help-icon {
    position: relative;

    z-index: 2;

    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #effaf4;

    color: #159447;

    font-size: 23px;

    border: 1px solid #d9f0e3;
}

.history-help-item h4 {
    margin: 0 0 5px;

    color: #111827;

    font-size: 14px;

    line-height: 1.35;
}

.history-help-item p {
    margin: 0;

    color: #111827;

    font-size: 12px;

    line-height: 1.7;
}


/* =========================================================
   HISTORY AT A GLANCE
   ========================================================= */

.history-glance-card {
    padding: 20px 22px 26px;

    box-sizing: border-box;

    border: 1px solid #d9dde5;

    border-radius: 9px;

    background: #ffffff;
}

.history-glance-card > h3 {
    margin: 0 0 66px;

    color: #168451;

    font-size: 16px;
}

.history-glance-flow {
    display: grid;

    grid-template-columns:
        minmax(105px, 1fr)
        25px
        minmax(105px, 1fr)
        25px
        minmax(105px, 1fr)
        25px
        minmax(105px, 1fr)
        25px
        minmax(105px, 1fr);

    align-items: start;

    column-gap: 4px;
}

.history-glance-item {
    min-width: 0;

    text-align: center;
}

.history-glance-icon {
    width: 58px;
    height: 58px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin: 0 auto 22px;

    box-sizing: border-box;

    border: 1px solid #a9ddc1;

    border-radius: 9px;

    background: #f0fbf5;

    color: #168451;

    font-size: 31px;

    font-weight: 500;
}

.history-glance-item h4 {
    min-height: 20px;

    margin: 0 0 10px;

    color: #111827;

    font-size: 13px;

    line-height: 1.35;
}

.history-glance-item p {
    min-height: 62px;

    margin: 0;

    color: #111827;

    font-size: 11px;

    line-height: 1.7;
}

.history-glance-line {
    height: 1px;

    margin-top: 29px;

    background: #b8e3ca;
}


/* =========================================================
   TIP
   ========================================================= */

.history-tip-card {
    margin-top: 20px;

    padding: 20px 22px;

    box-sizing: border-box;

    border: 1px solid #eadfbd;

    border-radius: 9px;

    background: #fffdf6;
}

.history-tip-header {
    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 14px;
}

.history-tip-header img {
    width: 24px;
    height: 24px;
}

.history-tip-header h3 {
    margin: 0;

    color: #d88b00;

    font-size: 16px;
}

.history-tip-card p {
    margin: 0;

    color: #1f2937;

    font-size: 13px;

    line-height: 1.75;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.history-navigation {
    display: flex;

    justify-content: flex-end;

    gap: 18px;

    margin-top: 26px;
}

.history-nav-button {
    min-width: 245px;

    min-height: 72px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 16px;

    padding: 12px 24px;

    box-sizing: border-box;

    border-radius: 8px;

    text-align: center;

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;
}

.history-nav-button small {
    display: block;

    margin-bottom: 4px;

    font-size: 11px;

    font-weight: 500;
}

.history-nav-arrow {
    font-size: 20px;

    line-height: 1;
}

.history-nav-button.previous {
    border: 1px solid #168451;

    background: #ffffff;

    color: #168451;
}

.history-nav-button.next {
    border: 1px solid #168451;

    background: #168451;

    color: #ffffff;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1200px) {

    .history-header-row {
        grid-template-columns: 1fr;
    }

    .history-main-grid {
        grid-template-columns: 1fr;
    }

    .history-glance-card > h3 {
        margin-bottom: 40px;
    }
}

@media (max-width: 900px) {

    .history-glance-flow {
        grid-template-columns: 1fr;

        row-gap: 12px;
    }

    .history-glance-line {
        width: 1px;
        height: 22px;

        margin: 0 auto;
    }

    .history-glance-item p {
        min-height: auto;
    }
}

@media (max-width: 700px) {

    .history-navigation {
        flex-direction: column;
    }

    .history-nav-button {
        width: 100%;

        min-width: 0;
    }

    .history-info-card {
        flex-direction: column;
    }
}



/* AXIO — Create Stack from axio.yaml */

.axio-page {
  max-width: 1180px;
  margin: 0 auto;
  color: #111827;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.axio-page * {
  box-sizing: border-box;
}

.axio-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 24px 26px;
  margin: 18px 0;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(15, 23, 42, 0.04);
}

.axio-eyebrow {
  margin-bottom: 7px;
  color: #6d3bd1;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}

.axio-hero h2 {
  margin: 0 0 8px;
  font-size: 27px;
  line-height: 1.2;
}

.axio-hero h2 span {
  color: #6034c5;
}

.axio-hero p {
  max-width: 720px;
  margin: 0;
  color: #5f6675;
  font-size: 14px;
  line-height: 1.65;
}

.axio-badge {
  flex: 0 0 auto;
  padding: 7px 12px;
  border-radius: 999px;
  background: #eee8ff;
  color: #5c31c4;
  font-size: 12px;
  font-weight: 700;
}

.axio-info {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 17px;
  margin-bottom: 20px;
  border: 1px solid #ded3ff;
  border-radius: 10px;
  background: #f8f5ff;
}

.axio-info-icon {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border: 1.5px solid #6939cf;
  border-radius: 50%;
  color: #6939cf;
  font-size: 12px;
  font-weight: 800;
}

.axio-info strong {
  color: #412087;
  font-size: 13px;
}

.axio-info p {
  margin: 3px 0 0;
  color: #6b647b;
  font-size: 12px;
}

.axio-layout {
  display: grid;
  grid-template-columns: 38% 62%;
  gap: 18px;
  align-items: stretch;
}

.axio-steps,
.axio-card {
  border: 1px solid #e3e6ec;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 5px 20px rgba(15, 23, 42, 0.045);
}

.axio-steps {
  padding: 22px 20px;
}

.axio-section-title {
  margin-bottom: 15px;
  font-size: 14px;
  font-weight: 800;
}

.axio-step {
  position: relative;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  width: 100%;
  padding: 12px 8px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #182033;
  text-align: left;
  cursor: pointer;
}

.axio-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 21px;
  top: 40px;
  width: 1px;
  height: calc(100% - 10px);
  background: #d8d4e5;
}

.axio-step-number {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1.5px solid #7041d1;
  border-radius: 50%;
  background: #fff;
  color: #7041d1;
  font-size: 12px;
  font-weight: 800;
}

.axio-step.active {
  background: #f8f5ff;
}

.axio-step.active .axio-step-number,
.axio-step.done .axio-step-number {
  background: #6939cf;
  color: #fff;
}

.axio-step strong {
  display: block;
  margin: 1px 0 4px;
  font-size: 13px;
}

.axio-step small {
  display: block;
  max-width: 250px;
  color: #6b7280;
  font-size: 11.5px;
  line-height: 1.55;
}

.axio-card {
  padding: 24px;
}

.axio-card-header {
  padding-bottom: 16px;
  border-bottom: 1px solid #edf0f4;
}

.axio-card-kicker {
  color: #6b7280;
  font-size: 12px;
  font-weight: 600;
}

.axio-card h3 {
  margin: 3px 0 0;
  font-size: 20px;
}

.axio-progress {
  height: 3px;
  margin-top: 14px;
  overflow: hidden;
  border-radius: 10px;
  background: #eeeaf7;
}

.axio-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #6939cf;
  transition: width .25s ease;
}

.axio-form-step {
  display: none;
  min-height: 275px;
  padding-top: 22px;
}

.axio-form-step.active {
  display: block;
  animation: axioFade .2s ease;
}

@keyframes axioFade {
  from { opacity: .25; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.axio-form-step label {
  display: block;
  margin: 0 0 7px;
  color: #202738;
  font-size: 12px;
  font-weight: 700;
}

.axio-form-step label em {
  color: #dc2626;
  font-style: normal;
}

.axio-form-step input,
.axio-form-step select {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid #dfe3ea;
  border-radius: 8px;
  outline: none;
  background: #fff;
  color: #202738;
  font-size: 13px;
  transition: border-color .15s, box-shadow .15s;
}

.axio-form-step input:focus,
.axio-form-step select:focus {
  border-color: #7041d1;
  box-shadow: 0 0 0 3px rgba(112, 65, 209, .10);
}

.axio-step-help {
  margin-top: 12px;
  padding: 12px;
  border-radius: 8px;
  background: #f8f9fb;
  color: #687082;
  font-size: 12px;
  line-height: 1.55;
}

.axio-input-with-icon {
  position: relative;
}

.axio-input-with-icon input {
  padding-right: 40px;
}

.axio-input-with-icon span {
  position: absolute;
  top: 50%;
  right: 13px;
  transform: translateY(-50%);
  color: #343b4b;
}

.axio-two-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 15px;
}

.axio-two-columns label {
  margin-top: 0;
}

.axio-found,
.axio-auto {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin-top: 18px;
  padding: 13px;
  border: 1px solid #bde8d1;
  border-radius: 9px;
  background: #f2fcf6;
}

.axio-found > span,
.axio-auto > span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #2ca66f;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.axio-found strong,
.axio-auto strong {
  display: block;
  color: #176c47;
  font-size: 12px;
}

.axio-found small,
.axio-auto small {
  display: block;
  margin-top: 3px;
  color: #4c6c5c;
  font-size: 11px;
}

.axio-review {
  display: grid;
  gap: 0;
  border: 1px solid #e4e7ec;
  border-radius: 9px;
  overflow: hidden;
}

.axio-review div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 11px 13px;
  border-bottom: 1px solid #edf0f3;
  font-size: 12px;
}

.axio-review div:last-child {
  border-bottom: 0;
}

.axio-review span {
  color: #707887;
}

.axio-review strong {
  color: #202738;
  font-weight: 700;
  text-align: right;
}

.axio-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding-top: 15px;
  border-top: 1px solid #edf0f4;
}

.axio-btn {
  min-width: 96px;
  padding: 10px 17px;
  border: 1px solid #dfe3e9;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.axio-btn.secondary {
  background: #fff;
  color: #454b59;
}

.axio-btn.primary {
  border-color: #6939cf;
  background: #6939cf;
  color: #fff;
}

.axio-btn.primary:hover {
  background: #592cb7;
}

.axio-complete {
  display: none;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 15px 18px;
  border: 1px solid #bfe8d2;
  border-radius: 11px;
  background: #f2fcf6;
}

.axio-complete.show {
  display: flex;
  animation: axioFade .25s ease;
}

.axio-check {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #2ca66f;
  color: #fff;
  font-weight: 800;
}

.axio-complete strong,
.axio-complete span:last-child {
  display: block;
}

.axio-complete strong {
  color: #176c47;
  font-size: 13px;
}

.axio-complete span:last-child {
  margin-top: 2px;
  color: #5d6e65;
  font-size: 11px;
}

.axio-reference,
.axio-best-practices {
  margin-top: 18px;
  padding: 20px;
  border: 1px solid #e3e6ec;
  border-radius: 12px;
  background: #fff;
}

.axio-reference {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 13px;
  align-items: center;
}

.axio-reference-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #f2efff;
  color: #6939cf;
  font-weight: 800;
}

.axio-reference strong,
.axio-best-practices h3 {
  font-size: 14px;
}

.axio-reference p {
  margin: 4px 0 0;
  color: #687082;
  font-size: 12px;
}

.axio-reference a {
  color: #5f32c4;
  font-size: 12px;
  font-weight: 700;
}

.axio-best-practices h3 {
  margin: 0 0 12px;
}

.axio-best-practices ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.axio-best-practices li {
  position: relative;
  padding-left: 22px;
  color: #5f6675;
  font-size: 12px;
  line-height: 1.55;
}

.axio-best-practices li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #2ca66f;
  font-weight: 900;
}

.axio-page code {
  padding: 2px 5px;
  border-radius: 4px;
  background: #f2f1f5;
  color: #5830b8;
  font-size: .92em;
}

@media (max-width: 900px) {
  .axio-layout {
    grid-template-columns: 1fr;
  }

  .axio-steps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
  }

  .axio-section-title {
    grid-column: 1 / -1;
  }

  .axio-step:not(:last-child)::after {
    display: none;
  }
}

@media (max-width: 600px) {
  .axio-hero,
  .axio-reference {
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .axio-steps {
    grid-template-columns: 1fr;
  }

  .axio-two-columns,
  .axio-best-practices ul {
    grid-template-columns: 1fr;
  }

  .axio-card {
    padding: 17px;
  }
}




/* AXIO — Create Stack from axio.yaml */

.axio-page {
  max-width: 1180px;
  margin: 0 auto;
  color: #111827;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.axio-page * {
  box-sizing: border-box;
}

.axio-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 24px 26px;
  margin: 18px 0;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(15, 23, 42, 0.04);
}

.axio-eyebrow {
  margin-bottom: 7px;
  color: #6d3bd1;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}

.axio-hero h2 {
  margin: 0 0 8px;
  font-size: 27px;
  line-height: 1.2;
}

.axio-hero h2 span {
  color: #6034c5;
}

.axio-hero p {
  max-width: 720px;
  margin: 0;
  color: #5f6675;
  font-size: 14px;
  line-height: 1.65;
}

.axio-badge {
  flex: 0 0 auto;
  padding: 7px 12px;
  border-radius: 999px;
  background: #eee8ff;
  color: #5c31c4;
  font-size: 12px;
  font-weight: 700;
}

.axio-info {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 17px;
  margin-bottom: 20px;
  border: 1px solid #ded3ff;
  border-radius: 10px;
  background: #f8f5ff;
}

.axio-info-icon {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border: 1.5px solid #6939cf;
  border-radius: 50%;
  color: #6939cf;
  font-size: 12px;
  font-weight: 800;
}

.axio-info strong {
  color: #412087;
  font-size: 13px;
}

.axio-info p {
  margin: 3px 0 0;
  color: #6b647b;
  font-size: 12px;
}

.axio-layout {
  display: grid;
  grid-template-columns: 38% 62%;
  gap: 18px;
  align-items: stretch;
}

.axio-steps,
.axio-card {
  border: 1px solid #e3e6ec;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 5px 20px rgba(15, 23, 42, 0.045);
}

.axio-steps {
  padding: 22px 20px;
}

.axio-section-title {
  margin-bottom: 15px;
  font-size: 14px;
  font-weight: 800;
}

.axio-step {
  position: relative;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  width: 100%;
  padding: 12px 8px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #182033;
  text-align: left;
  cursor: pointer;
}

.axio-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 21px;
  top: 40px;
  width: 1px;
  height: calc(100% - 10px);
  background: #d8d4e5;
}

.axio-step-number {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1.5px solid #7041d1;
  border-radius: 50%;
  background: #fff;
  color: #7041d1;
  font-size: 12px;
  font-weight: 800;
}

.axio-step.active {
  background: #f8f5ff;
}

.axio-step.active .axio-step-number,
.axio-step.done .axio-step-number {
  background: #6939cf;
  color: #fff;
}

.axio-step strong {
  display: block;
  margin: 1px 0 4px;
  font-size: 13px;
}

.axio-step small {
  display: block;
  max-width: 250px;
  color: #6b7280;
  font-size: 11.5px;
  line-height: 1.55;
}

.axio-card {
  padding: 24px;
}

.axio-card-header {
  padding-bottom: 16px;
  border-bottom: 1px solid #edf0f4;
}

.axio-card-kicker {
  color: #6b7280;
  font-size: 12px;
  font-weight: 600;
}

.axio-card h3 {
  margin: 3px 0 0;
  font-size: 20px;
}

.axio-progress {
  height: 3px;
  margin-top: 14px;
  overflow: hidden;
  border-radius: 10px;
  background: #eeeaf7;
}

.axio-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #6939cf;
  transition: width .25s ease;
}

.axio-form-step {
  display: none;
  min-height: 275px;
  padding-top: 22px;
}

.axio-form-step.active {
  display: block;
  animation: axioFade .2s ease;
}

@keyframes axioFade {
  from { opacity: .25; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.axio-form-step label {
  display: block;
  margin: 0 0 7px;
  color: #202738;
  font-size: 12px;
  font-weight: 700;
}

.axio-form-step label em {
  color: #dc2626;
  font-style: normal;
}

.axio-form-step input,
.axio-form-step select {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid #dfe3ea;
  border-radius: 8px;
  outline: none;
  background: #fff;
  color: #202738;
  font-size: 13px;
  transition: border-color .15s, box-shadow .15s;
}

.axio-form-step input:focus,
.axio-form-step select:focus {
  border-color: #7041d1;
  box-shadow: 0 0 0 3px rgba(112, 65, 209, .10);
}

.axio-step-help {
  margin-top: 12px;
  padding: 12px;
  border-radius: 8px;
  background: #f8f9fb;
  color: #687082;
  font-size: 12px;
  line-height: 1.55;
}

.axio-input-with-icon {
  position: relative;
}

.axio-input-with-icon input {
  padding-right: 40px;
}

.axio-input-with-icon span {
  position: absolute;
  top: 50%;
  right: 13px;
  transform: translateY(-50%);
  color: #343b4b;
}

.axio-two-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 15px;
}

.axio-two-columns label {
  margin-top: 0;
}

.axio-found,
.axio-auto {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin-top: 18px;
  padding: 13px;
  border: 1px solid #bde8d1;
  border-radius: 9px;
  background: #f2fcf6;
}

.axio-found > span,
.axio-auto > span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #2ca66f;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.axio-found strong,
.axio-auto strong {
  display: block;
  color: #176c47;
  font-size: 12px;
}

.axio-found small,
.axio-auto small {
  display: block;
  margin-top: 3px;
  color: #4c6c5c;
  font-size: 11px;
}

.axio-review {
  display: grid;
  gap: 0;
  border: 1px solid #e4e7ec;
  border-radius: 9px;
  overflow: hidden;
}

.axio-review div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 11px 13px;
  border-bottom: 1px solid #edf0f3;
  font-size: 12px;
}

.axio-review div:last-child {
  border-bottom: 0;
}

.axio-review span {
  color: #707887;
}

.axio-review strong {
  color: #202738;
  font-weight: 700;
  text-align: right;
}

.axio-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding-top: 15px;
  border-top: 1px solid #edf0f4;
}

.axio-btn {
  min-width: 96px;
  padding: 10px 17px;
  border: 1px solid #dfe3e9;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.axio-btn.secondary {
  background: #fff;
  color: #454b59;
}

.axio-btn.primary {
  border-color: #6939cf;
  background: #6939cf;
  color: #fff;
}

.axio-btn.primary:hover {
  background: #592cb7;
}

.axio-complete {
  display: none;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 15px 18px;
  border: 1px solid #bfe8d2;
  border-radius: 11px;
  background: #f2fcf6;
}

.axio-complete.show {
  display: flex;
  animation: axioFade .25s ease;
}

.axio-check {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #2ca66f;
  color: #fff;
  font-weight: 800;
}

.axio-complete strong,
.axio-complete span:last-child {
  display: block;
}

.axio-complete strong {
  color: #176c47;
  font-size: 13px;
}

.axio-complete span:last-child {
  margin-top: 2px;
  color: #5d6e65;
  font-size: 11px;
}

.axio-reference,
.axio-best-practices {
  margin-top: 18px;
  padding: 20px;
  border: 1px solid #e3e6ec;
  border-radius: 12px;
  background: #fff;
}

.axio-reference {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 13px;
  align-items: center;
}

.axio-reference-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #f2efff;
  color: #6939cf;
  font-weight: 800;
}

.axio-reference strong,
.axio-best-practices h3 {
  font-size: 14px;
}

.axio-reference p {
  margin: 4px 0 0;
  color: #687082;
  font-size: 12px;
}

.axio-reference a {
  color: #5f32c4;
  font-size: 12px;
  font-weight: 700;
}

.axio-best-practices h3 {
  margin: 0 0 12px;
}

.axio-best-practices ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.axio-best-practices li {
  position: relative;
  padding-left: 22px;
  color: #5f6675;
  font-size: 12px;
  line-height: 1.55;
}

.axio-best-practices li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #2ca66f;
  font-weight: 900;
}

.axio-page code {
  padding: 2px 5px;
  border-radius: 4px;
  background: #f2f1f5;
  color: #5830b8;
  font-size: .92em;
}

@media (max-width: 900px) {
  .axio-layout {
    grid-template-columns: 1fr;
  }

  .axio-steps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
  }

  .axio-section-title {
    grid-column: 1 / -1;
  }

  .axio-step:not(:last-child)::after {
    display: none;
  }
}

@media (max-width: 600px) {
  .axio-hero,
  .axio-reference {
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .axio-steps {
    grid-template-columns: 1fr;
  }

  .axio-two-columns,
  .axio-best-practices ul {
    grid-template-columns: 1fr;
  }

  .axio-card {
    padding: 17px;
  }
}

/* =========================================================
   Axio - Create Stack Manually
   CSS matched to the Manual Steps page reference
   ========================================================= */

.axio-manual-page {
  --axio-purple: #5b35c9;
  --axio-purple-dark: #4724ae;
  --axio-purple-soft: #f4f0ff;
  --axio-purple-border: #ddd3ff;
  --axio-green: #20a464;
  --axio-green-soft: #edf9f3;
  --axio-text: #111a35;
  --axio-muted: #64708a;
  --axio-border: #e2e6ef;
  --axio-border-light: #edf0f5;
  --axio-white: #ffffff;
  --axio-shadow: 0 8px 28px rgba(31, 41, 73, 0.08);

  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 28px 56px;
  color: var(--axio-text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  box-sizing: border-box;
}

.axio-manual-page *,
.axio-manual-page *::before,
.axio-manual-page *::after {
  box-sizing: border-box;
}

/* ---------- Hero ---------- */

.axio-manual-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.axio-manual-eyebrow {
  margin-bottom: 6px;
  color: var(--axio-purple);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.axio-manual-hero h2 {
  margin: 0;
  color: var(--axio-text);
  font-size: 30px;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.axio-manual-hero h2 span {
  color: var(--axio-purple);
}

.axio-manual-hero p {
  max-width: 760px;
  margin: 9px 0 0;
  color: var(--axio-muted);
  font-size: 14px;
}

.axio-manual-badge {
  flex: 0 0 auto;
  padding: 7px 13px;
  border: 1px solid var(--axio-purple-border);
  border-radius: 999px;
  background: var(--axio-purple-soft);
  color: var(--axio-purple-dark);
  font-size: 12px;
  font-weight: 700;
}

/* ---------- Information box ---------- */

.axio-manual-info {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 22px;
  padding: 14px 16px;
  border: 1px solid var(--axio-purple-border);
  border-radius: 10px;
  background: #faf8ff;
}

.axio-manual-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--axio-purple);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.axio-manual-info strong {
  display: block;
  margin-bottom: 2px;
  color: var(--axio-text);
  font-size: 13px;
}

.axio-manual-info p {
  margin: 0;
  color: var(--axio-muted);
  font-size: 12px;
}

/* ---------- Main two-column layout ---------- */

.axio-manual-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 22px;
  align-items: stretch;
}

/* ---------- Steps ---------- */

.axio-manual-steps {
  position: relative;
  padding: 4px 2px;
}

.axio-manual-section-title {
  margin: 0 0 16px 8px;
  color: var(--axio-text);
  font-size: 13px;
  font-weight: 750;
}

.axio-manual-step {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 11px;
  width: 100%;
  padding: 8px 7px;
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.axio-manual-step::after {
  content: "";
  position: absolute;
  top: 39px;
  left: 21px;
  width: 1px;
  height: calc(100% - 5px);
  background: #d8cdfc;
}

.axio-manual-step:last-child::after {
  display: none;
}

.axio-manual-number {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 2px solid #d5cafa;
  border-radius: 50%;
  background: #fff;
  color: var(--axio-purple);
  font-size: 12px;
  font-weight: 800;
  transition: 0.2s ease;
}

.axio-manual-step > span:last-child {
  min-width: 0;
  padding-top: 1px;
}

.axio-manual-step strong {
  display: block;
  color: #202942;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.3;
}

.axio-manual-step small {
  display: block;
  max-width: 205px;
  margin-top: 3px;
  color: #78839a;
  font-size: 11px;
  line-height: 1.45;
}

.axio-manual-step:hover .axio-manual-number {
  border-color: var(--axio-purple);
}

.axio-manual-step.active .axio-manual-number {
  border-color: var(--axio-purple);
  background: var(--axio-purple);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(91, 53, 201, 0.08);
}

.axio-manual-step.active strong {
  color: var(--axio-purple-dark);
}

.axio-manual-step.done .axio-manual-number {
  border-color: var(--axio-green);
  background: var(--axio-green);
  color: #fff;
}

.axio-manual-step.done::after {
  background: #b8e6cf;
}

/* ---------- Main card ---------- */

.axio-manual-card {
  min-width: 0;
  min-height: 570px;
  overflow: hidden;
  border: 1px solid var(--axio-border);
  border-radius: 12px;
  background: var(--axio-white);
  box-shadow: var(--axio-shadow);
}

.axio-manual-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px 15px;
  border-bottom: 1px solid var(--axio-border-light);
}

.axio-manual-kicker {
  margin-bottom: 2px;
  color: var(--axio-purple);
  font-size: 11px;
  font-weight: 750;
}

.axio-manual-card-header h3 {
  margin: 0;
  color: var(--axio-text);
  font-size: 20px;
  font-weight: 750;
}

.axio-manual-progress {
  width: 130px;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #eeeaf8;
}

.axio-manual-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--axio-purple);
  transition: width 0.25s ease;
}

/* ---------- Form steps ---------- */

.axio-manual-form-step {
  display: none;
  padding: 24px 24px 18px;
}

.axio-manual-form-step.active {
  display: block;
  animation: axioManualFade 0.18s ease;
}

@keyframes axioManualFade {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.axio-manual-form-step label {
  display: block;
  margin: 0 0 7px;
  color: #27314a;
  font-size: 12px;
  font-weight: 700;
}

.axio-manual-form-step label em {
  color: #d33a5c;
  font-style: normal;
}

.axio-manual-form-step input,
.axio-manual-form-step textarea,
.axio-manual-form-step select {
  width: 100%;
  border: 1px solid #d9deea;
  border-radius: 7px;
  outline: none;
  background: #fff;
  color: #27314a;
  font: inherit;
  font-size: 13px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.axio-manual-form-step input,
.axio-manual-form-step select {
  height: 40px;
  padding: 0 12px;
}

.axio-manual-form-step textarea {
  min-height: 82px;
  padding: 10px 12px;
  resize: vertical;
}

.axio-manual-form-step input:focus,
.axio-manual-form-step textarea:focus,
.axio-manual-form-step select:focus {
  border-color: var(--axio-purple);
  box-shadow: 0 0 0 3px rgba(91, 53, 201, 0.08);
}

.axio-manual-form-step + .axio-manual-form-step {
  margin-top: 0;
}

.axio-extra-label {
  margin-top: 18px !important;
}

.axio-manual-help {
  margin-top: 7px;
  color: #7a8499;
  font-size: 11px;
  line-height: 1.45;
}

/* ---------- Repository ---------- */

.axio-manual-repo {
  position: relative;
}

.axio-manual-repo input {
  padding-right: 42px;
}

.axio-manual-repo > span {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  color: #202942;
  font-size: 18px;
  font-weight: 700;
}

/* ---------- Two-column fields ---------- */

.axio-manual-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 17px;
}

/* ---------- Configuration grid ---------- */

.axio-config-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.axio-config-box {
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--axio-border);
  border-radius: 9px;
  background: #fcfcfe;
}

.axio-config-box h4 {
  margin: 0 0 13px;
  color: var(--axio-text);
  font-size: 12px;
  font-weight: 750;
}

.axio-config-box label {
  margin-bottom: 6px;
}

.axio-config-box select {
  height: 38px;
}

.axio-config-box.axio-policy {
  grid-column: 1 / -1;
}

.axio-variable-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) 28px;
  gap: 6px;
  align-items: center;
  margin-bottom: 9px;
}

.axio-variable-row input {
  min-width: 0;
  height: 36px;
  padding: 0 9px;
  font-size: 12px;
}

.axio-variable-row span {
  color: #737c90;
  text-align: center;
}

.axio-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #e2d5da;
  border-radius: 6px;
  background: #fff;
  color: #bd5268;
  cursor: pointer;
  font-size: 17px;
}

.axio-add,
.axio-add-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--axio-purple-border);
  border-radius: 6px;
  background: var(--axio-purple-soft);
  color: var(--axio-purple-dark);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
}

.axio-add-box {
  width: 100%;
  background: #fff;
}

.axio-add:hover,
.axio-add-box:hover {
  background: #eee8ff;
}

/* ---------- Review ---------- */

.axio-manual-review {
  overflow: hidden;
  border: 1px solid var(--axio-border);
  border-radius: 8px;
}

.axio-manual-review > div {
  display: grid;
  grid-template-columns: 42% 58%;
  gap: 12px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--axio-border-light);
}

.axio-manual-review > div:last-child {
  border-bottom: 0;
}

.axio-manual-review span {
  color: #778198;
  font-size: 11px;
}

.axio-manual-review strong {
  color: #27314a;
  font-size: 12px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* ---------- Bottom actions ---------- */

.axio-manual-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding: 16px 24px 20px;
  border-top: 1px solid var(--axio-border-light);
}

.axio-manual-btn {
  min-width: 92px;
  height: 38px;
  padding: 0 16px;
  border-radius: 7px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  transition: 0.15s ease;
}

.axio-manual-btn.secondary {
  border: 1px solid #d9deea;
  background: #fff;
  color: #4e596f;
}

.axio-manual-btn.secondary:hover {
  background: #f7f8fb;
}

.axio-manual-btn.primary {
  border: 1px solid var(--axio-purple);
  background: var(--axio-purple);
  color: #fff;
  box-shadow: 0 3px 8px rgba(91, 53, 201, 0.2);
}

.axio-manual-btn.primary:hover {
  border-color: var(--axio-purple-dark);
  background: var(--axio-purple-dark);
}

/* ---------- Completion message ---------- */

.axio-manual-complete {
  display: none;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid #bce7cf;
  border-radius: 9px;
  background: var(--axio-green-soft);
}

.axio-manual-complete.show {
  display: flex;
}

.axio-manual-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 27px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: var(--axio-green);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
}

.axio-manual-complete strong {
  display: block;
  color: #157b4b;
  font-size: 13px;
}

.axio-manual-complete span:last-child {
  display: block;
  margin-top: 2px;
  color: #557367;
  font-size: 11px;
}

/* ---------- Review note ---------- */

.axio-manual-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid #e7e1f8;
  border-radius: 9px;
  background: #faf9fd;
}

.axio-manual-note-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #eee8ff;
  color: var(--axio-purple);
  font-size: 12px;
  font-weight: 800;
}

.axio-manual-note strong {
  display: block;
  color: var(--axio-text);
  font-size: 12px;
}

.axio-manual-note p {
  margin: 2px 0 0;
  color: var(--axio-muted);
  font-size: 11px;
}

/* ---------- Best practices ---------- */

.axio-manual-best {
  margin-top: 18px;
  padding: 18px 20px;
  border: 1px solid var(--axio-border);
  border-radius: 10px;
  background: #fff;
}

.axio-manual-best h3 {
  margin: 0 0 9px;
  color: var(--axio-text);
  font-size: 14px;
  font-weight: 750;
}

.axio-manual-best ul {
  margin: 0;
  padding-left: 18px;
}

.axio-manual-best li {
  margin: 5px 0;
  color: #667189;
  font-size: 12px;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .axio-manual-page {
    padding: 20px 18px 44px;
  }

  .axio-manual-layout {
    grid-template-columns: 1fr;
  }

  .axio-manual-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 10px;
  }

  .axio-manual-section-title {
    grid-column: 1 / -1;
  }

  .axio-manual-step::after {
    display: none;
  }
}

@media (max-width: 650px) {
  .axio-manual-hero {
    flex-direction: column;
  }

  .axio-manual-hero h2 {
    font-size: 25px;
  }

  .axio-manual-steps {
    grid-template-columns: 1fr;
  }

  .axio-manual-two,
  .axio-config-grid {
    grid-template-columns: 1fr;
  }

  .axio-config-box.axio-policy {
    grid-column: auto;
  }

  .axio-manual-review > div {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .axio-manual-card-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .axio-manual-progress {
    width: 100%;
  }
}


/* =========================================================
   WORKFLOW TEMPLATES OVERVIEW
   ========================================================= */

.workflow-format-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px;
    margin: 28px 0 30px;
}


/* =========================================================
   FORMAT CARDS
   ========================================================= */

.workflow-format-card {
    position: relative;
    min-height: 200px;
    padding: 20px 22px;

    border: 1px solid #d9e2ef;
    border-radius: 9px;

    box-sizing: border-box;
}

.workflow-card-blue {
    background: #f8fbff;
    border-color: #cbdcf2;
}

.workflow-card-purple {
    background: #fcf9ff;
    border-color: #dccdf0;
}


/* =========================================================
   CARD HEADER
   ========================================================= */
.workflow-card-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    margin: 0 0 14px 0 !important;
    padding: 0 !important;
    gap: 16px !important;
    text-align: left !important;
}

.workflow-card-title {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}


.workflow-card-title h3 {
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}


.workflow-icon-deployment {
    flex: 0 0 52px !important;
    width: 52px !important;
    height: 52px !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #ffffff;
    box-sizing: border-box;
}

.workflow-icon-sync {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 21px;
    font-weight: 700;
    background: #dd50dd;
    border: 1px solid #dd50dd;
}

.workflow-icon-deployment svg {
    width: 30px;
    height: 30px;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.workflow-icon-blue {
    border: 1px solid #a8c5f0;
}

.workflow-icon-blue svg {
    stroke: #175cd3;
}

.workflow-icon-purple {
    border: 1px solid #cdb3e8;
}

.workflow-icon-purple svg {
    stroke: #7f3fbf;
}


/* =========================================================
   CARD TITLE
   ========================================================= */

.workflow-card-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.workflow-format-card h3 {
    margin: 0;

    font-size: 16px;
    line-height: 1.4;
    font-weight: 700;
}

.workflow-card-blue h3 {
    color: #175cd3;
}

.workflow-card-purple h3 {
    color: #7139b5;
}


/* =========================================================
   RECOMMENDED BADGE
   ========================================================= */

.workflow-badge {
    display: inline-flex;
    align-items: center;

    padding: 4px 9px;

    border: 1px solid #b7d0f3;
    border-radius: 999px;

    background: #edf5ff;

    color: #175cd3;

    font-size: 10px;
    font-weight: 600;
    line-height: 1;
}


/* =========================================================
   CARD DESCRIPTION
   ========================================================= */

.workflow-format-card > p {
    margin: 7px 0 13px 64px;

    color: #344054;

    font-size: 13px;
    line-height: 1.55;
}


/* =========================================================
   CARD CHECKLIST
   ========================================================= */

.workflow-format-card ul {
    list-style: none;

    margin: 0;
    padding: 0;
}

.workflow-format-card li {
    position: relative;

    margin: 8px 0;
    padding-left: 22px;

    color: #344054;

    font-size: 13px;
    line-height: 1.5;
}

.workflow-format-card li::before {
    content: "✓";

    position: absolute;
    left: 0;
    top: 0;

    color: #039855;

    font-size: 16px;
    font-weight: 700;
}


/* =========================================================
   WHAT'S ON THIS PAGE
   ========================================================= */

.workflow-capability-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;

    margin: 20px 0 26px;
}

.workflow-capability-card {
    min-height: 170px;

    padding: 17px 14px;

    text-align: center;

    border: 1px solid #e0e5ec;
    border-radius: 8px;

    background: #ffffff;

    box-sizing: border-box;
}

.workflow-capability-icon {
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 5px;
}

.workflow-capability-icon svg {
    width: 38px;
    height: 38px;

    fill: none;

    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.workflow-capability-card h4 {
    margin: 3px 0 7px;

    font-size: 13px;
    line-height: 1.4;
    font-weight: 600;
}

.workflow-capability-card p {
    margin: 0;

    color: #475467;

    font-size: 12px;
    line-height: 1.5;
}


/* Blue */

.workflow-capability-blue .workflow-capability-icon svg {
    stroke: #155eef;
}

.workflow-capability-blue h4 {
    color: #155eef;
}


/* Green */

.workflow-capability-green .workflow-capability-icon svg {
    stroke: #039855;
}

.workflow-capability-green h4 {
    color: #087443;
}


/* Orange */

.workflow-capability-orange .workflow-capability-icon svg {
    stroke: #f79009;
}

.workflow-capability-orange h4 {
    color: #d97706;
}


/* Purple */

.workflow-capability-purple .workflow-capability-icon svg {
    stroke: #7f3fbf;
}

.workflow-capability-purple h4 {
    color: #7f3fbf;
}


/* =========================================================
   WHERE TO START
   ========================================================= */

.workflow-start-callout {
    display: flex;
    align-items: center;
    gap: 15px;

    min-height: 78px;

    margin: 24px 0 30px;
    padding: 14px 16px;

    border: 1px solid #b9d2f5;
    border-radius: 7px;

    background: #f5f9ff;

    box-sizing: border-box;
}

.workflow-start-icon {
    flex: 0 0 30px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.workflow-start-icon svg {
    width: 23px;
    height: 23px;

    fill: none;

    stroke: #175cd3;
    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.workflow-start-content {
    flex: 1;
}

.workflow-start-content h4 {
    margin: 0 0 3px;

    color: #175cd3;

    font-size: 14px;
    font-weight: 700;
}

.workflow-start-content p {
    margin: 0;

    color: #344054;

    font-size: 12px;
    line-height: 1.45;
}

.workflow-start-button {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 36px;

    padding: 0 15px;

    border-radius: 5px;

    background: #175cd3;
    color: #ffffff !important;

    font-size: 11px;
    font-weight: 600;

    text-decoration: none !important;

    white-space: nowrap;

    transition: background 0.2s ease;
}

.workflow-start-button:hover {
    background: #0f4bb8;
}


/* =========================================================
   FOOTER PREVIOUS / NEXT
   ========================================================= */

.workflow-footer-nav {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 30px;

    margin-top: 30px;
    padding-top: 0;
}

.workflow-footer-nav a {
    min-height: 60px;

    display: flex;
    align-items: center;

    padding: 10px 16px;

    border: 1px solid #e0e5ec;
    border-radius: 7px;

    background: #ffffff;

    color: #101828 !important;

    text-decoration: none !important;

    box-sizing: border-box;
}

.workflow-nav-prev {
    justify-content: flex-start;
    gap: 12px;
}

.workflow-nav-next {
    justify-content: flex-end;
    gap: 12px;

    text-align: right;
}

.workflow-footer-nav span {
    color: #101828;

    font-size: 18px;
}

.workflow-footer-nav small {
    display: block;

    margin-bottom: 2px;

    color: #101828;

    font-size: 11px;
    font-weight: 600;
}

.workflow-footer-nav strong {
    color: #175cd3;

    font-size: 12px;
    font-weight: 500;
}


/* =========================================================
   HEADINGS
   ========================================================= */

.main-content h2 {
    color: #101828;

    font-size: 21px;
    font-weight: 700;

    margin-top: 28px;
    margin-bottom: 5px;
}

.main-content > p {
    color: #344054;

    font-size: 14px;
    line-height: 1.65;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

    .workflow-capability-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}


@media (max-width: 800px) {

    .workflow-format-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .workflow-capability-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .workflow-start-callout {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .workflow-start-content {
        min-width: 200px;
    }

    .workflow-start-button {
        margin-left: 45px;
    }
}


@media (max-width: 550px) {

    .workflow-capability-grid {
        grid-template-columns: 1fr;
    }

    .workflow-footer-nav {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .workflow-nav-next {
        justify-content: flex-start;
        text-align: left;
    }

    .workflow-start-button {
        margin-left: 0;
        width: 100%;
    }
}

.workflow-format-card li::before
 {
    content: "✓" !important; 
    position: absolute !important; 
    margin-left: 0 !important;
    left: 0 !important; 
    top: 0 !important; 
    color: #039855 !important; 
    font-size: 16px !important;
    font-weight: 700 !important;
}


.workflow-format-card > p {
    margin: 0;
    color: #344054;
    font-size: 13px;
    line-height: 1.55;
}


.workflow-start-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    padding: 18px 24px;
    margin: 24px 0;
    border: 1px solid #b9d3ff;
    border-radius: 8px;
    background: #f4f8ff;
}

.workflow-start-content {
    flex: 1;
}

.workflow-start-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.workflow-start-text h4 {
    margin: 0 0 4px 0;
    color: #1557b0;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
}

.workflow-start-text p {
    margin: 0;
    color: #173b69;
    font-size: 14px;
    line-height: 1.5;
}

.workflow-start-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-shrink: 0;
    margin-left: 24px;
    padding: 10px 18px;
    border-radius: 6px;
    background: #2455c3;
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
}

.workflow-start-button:hover {
    background: #17439f;
}

.workflow-start-button span {
    font-size: 18px;
    line-height: 1;
}


/* =========================================================
   Axio Operations — Approvals
   Scoped to .operations-page so it does not affect other docs.
   ========================================================= */

.operations-page {
  max-width: 100%;
  color: #17233c;
}

.operations-page h1 {
  margin: 0 0 12px;
  color: #16223b;
  font-size: 42px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.8px;
}

.operations-page h2 {
  margin: 38px 0 10px;
  color: #17233c;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
}

.operations-lead {
  max-width: 900px;
  margin: 0 0 24px;
  color: #4b5d78;
  font-size: 15px;
  line-height: 1.65;
}

/* Info callout */

.operations-callout {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  box-sizing: border-box;
  width: 100%;
  margin: 24px 0 30px;
  padding: 16px 20px;
  border: 1px solid #bfd5ff;
  border-radius: 8px;
  background: #f5f9ff;
}

.operations-callout-icon {
  flex: 0 0 22px;
  color: #1769e0;
  font-size: 21px;
  line-height: 1.2;
}

.operations-callout strong {
  display: block;
  margin-bottom: 4px;
  color: #253450;
  font-size: 15px;
}

.operations-callout p {
  margin: 0;
  color: #4b5d78;
  font-size: 14px;
  line-height: 1.55;
}

/* Approval flow */

.approval-flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin: 22px 0 34px;
}

.approval-flow-step {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 132px;
  min-height: 76px;
  padding: 12px 10px;
  border: 1px solid #c9dcff;
  border-radius: 8px;
  background: #f7faff;
  text-align: center;
}

.approval-flow-step strong {
  color: #253450;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}

.approval-flow-step-yellow {
  border-color: #f1d39d;
  background: #fffaf1;
}

.approval-flow-step-purple {
  border-color: #d8c8f4;
  background: #faf7ff;
}

.approval-flow-step-green {
  border-color: #c8e4d2;
  background: #f5fbf7;
}

.approval-flow-step-blue {
  border-color: #c9dcff;
  background: #f5f9ff;
}

.approval-flow-arrow {
  flex: 0 0 auto;
  color: #52637c;
  font-size: 22px;
  line-height: 1;
}

/* Lifecycle table */

.approval-lifecycle-table {
  width: 100%;
  margin: 16px 0 34px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid #dce3ec;
  border-radius: 7px;
  background: #fff;
}

.approval-lifecycle-table th,
.approval-lifecycle-table td {
  padding: 10px 14px;
  border-bottom: 1px solid #e5e9ef;
  text-align: left;
  vertical-align: middle;
  font-size: 13px;
}

.approval-lifecycle-table th {
  background: #f8fafc;
  color: #24334d;
  font-weight: 700;
}

.approval-lifecycle-table tr:last-child td {
  border-bottom: 0;
}

.approval-lifecycle-table td {
  color: #465a76;
}

.approval-status {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.approval-status-pending {
  border: 1px solid #f2c77d;
  background: #fff5df;
  color: #a76500;
}

.approval-status-approved {
  border: 1px solid #b8dec7;
  background: #eef9f1;
  color: #237342;
}

.approval-status-rejected {
  border: 1px solid #efb8b8;
  background: #fff0f0;
  color: #b53a3a;
}

.approval-status-expired {
  border: 1px solid #cfd5de;
  background: #f5f6f8;
  color: #5c6879;
}

/* Lists */

.operations-page ul {
  margin: 10px 0 28px;
  padding-left: 22px;
}

.operations-page li {
  margin: 7px 0;
  color: #465a76;
  font-size: 14px;
  line-height: 1.5;
}

/* Code block */

.operations-page pre {
  margin: 16px 0 18px;
  padding: 18px 20px;
  overflow-x: auto;
  border: 1px solid #dce3ec;
  border-radius: 8px;
  background: #fafbfc;
  box-shadow: none;
}

.operations-page pre code {
  color: #24334d;
  font-size: 13px;
  line-height: 1.65;
}

.operations-page > p + ul {
  margin-top: 8px;
}

/* Best practices */

.operations-checklist {
  margin: 12px 0 34px;
}

.operations-checklist div {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 9px 0;
  color: #465a76;
  font-size: 14px;
  line-height: 1.5;
}

.operations-checklist div:first-letter {
  color: #159447;
}

/* Next callout */

.operations-next-callout {
  display: flex;
  align-items: center;
  gap: 14px;
  box-sizing: border-box;
  width: 100%;
  margin: 34px 0 30px;
  padding: 16px 20px;
  border: 1px solid #bfd5ff;
  border-radius: 8px;
  background: #f5f9ff;
}

.operations-next-icon {
  flex: 0 0 22px;
  color: #1769e0;
  font-size: 20px;
}

.operations-next-content {
  flex: 1;
  min-width: 0;
}

.operations-next-content strong {
  display: block;
  margin-bottom: 4px;
  color: #253450;
  font-size: 14px;
}

.operations-next-content p {
  margin: 0;
  color: #4b5d78;
  font-size: 13px;
  line-height: 1.5;
}

.operations-next-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  flex-shrink: 0;
  padding: 10px 16px;
  border-radius: 6px;
  background: #2455c3;
  color: #fff !important;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
  white-space: nowrap;
}

.operations-next-button:hover {
  background: #17439f;
  color: #fff !important;
}

.operations-next-button span {
  font-size: 17px;
  line-height: 1;
}

/* Previous / Next */

.operations-page-navigation {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin: 32px 0 10px;
  padding-top: 22px;
  border-top: 1px solid #e4e8ee;
}

.operations-nav-card {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 220px;
  padding: 16px 18px;
  border: 1px solid #e0e5ec;
  border-radius: 8px;
  background: #fff;
  color: #253450 !important;
  text-decoration: none !important;
}

.operations-nav-card:hover {
  border-color: #b9c9e4;
}

.operations-nav-card small {
  display: block;
  margin-bottom: 5px;
  color: #6a7890;
  font-size: 12px;
}

.operations-nav-card strong {
  display: block;
  color: #253450;
  font-size: 14px;
}

.operations-nav-arrow {
  color: #1769e0;
  font-size: 20px;
}

.operations-nav-next {
  margin-left: auto;
  text-align: right;
}

/* Responsive */

@media (max-width: 900px) {
  .approval-flow {
    flex-wrap: wrap;
    justify-content: center;
  }

  .approval-flow-arrow {
    display: none;
  }

  .operations-next-callout {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .operations-next-button {
    margin-left: 36px;
  }
}

@media (max-width: 640px) {
  .operations-page h1 {
    font-size: 34px;
  }

  .approval-flow-step {
    width: calc(50% - 8px);
  }

  .operations-next-callout {
    flex-direction: column;
  }

  .operations-next-button {
    margin-left: 0;
  }

  .operations-page-navigation {
    flex-direction: column;
  }

  .operations-nav-next {
    margin-left: 0;
    text-align: left;
  }
}

/* =========================================================
   Axio Operations — Drift Detection
   Scoped to .operations-page
   ========================================================= */

.operations-page {
  max-width: 100%;
  color: #17233c;
}

.operations-page h1 {
  margin: 0 0 12px;
  color: #16223b;
  font-size: 42px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.8px;
}

.operations-page h2 {
  margin: 38px 0 10px;
  color: #17233c;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
}

.operations-page p {
  color: #465a76;
  font-size: 14px;
  line-height: 1.6;
}

.operations-page > p:first-of-type {
  max-width: 900px;
  margin: 0 0 24px;
  color: #33445f;
  font-size: 15px;
  line-height: 1.65;
}

/* Information callout */

.operations-callout {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  box-sizing: border-box;
  width: 100%;
  margin: 24px 0 30px;
  padding: 16px 20px;
  border: 1px solid #bfd5ff;
  border-radius: 8px;
  background: #f5f9ff;
}

.operations-callout-icon {
  flex: 0 0 22px;
  color: #1769e0;
  font-size: 21px;
  line-height: 1.2;
}

.operations-callout strong {
  display: block;
  margin-bottom: 4px;
  color: #253450;
  font-size: 15px;
}

.operations-callout p {
  margin: 0;
}

/* Drift workflow */

.drift-flow {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 22px 0 34px;
}

.drift-flow-step {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 96px;
  padding: 14px 10px 12px;
  border: 1px solid #ccdfff;
  border-radius: 8px;
  text-align: center;
}

.drift-flow-blue {
  border-color: #c5d9ff;
  background: #f6f9ff;
}

.drift-flow-green {
  border-color: #c9e5d2;
  background: #f6fbf7;
}

.drift-flow-purple {
  border-color: #dacbf3;
  background: #faf7ff;
}

.drift-flow-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-top: -32px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: #eaf2ff;
  color: #2563d8;
  font-size: 18px;
  font-weight: 700;
}

.drift-flow-green .drift-flow-icon {
  background: #eaf7ed;
  color: #29934e;
}

.drift-flow-purple .drift-flow-icon {
  background: #f0e9ff;
  color: #7444cc;
}

.drift-flow-step strong {
  color: #1d4fa8;
  font-size: 13px;
  line-height: 1.4;
}

.drift-flow-green strong {
  color: #267a42;
}

.drift-flow-purple strong {
  color: #7041c7;
}

.drift-flow-step span {
  margin-top: 5px;
  color: #53647d;
  font-size: 11px;
  line-height: 1.4;
}

.drift-flow-arrow {
  flex: 0 0 auto;
  color: #27517e;
  font-size: 22px;
  line-height: 1;
}

.drift-result {
  flex: 1.15;
  overflow: hidden;
  border: 1px solid #d9e0e8;
  border-radius: 8px;
  background: #fff;
}

.drift-result-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 7px 12px;
}

.drift-result-row + .drift-result-row {
  border-top: 1px solid #e2e6eb;
}

.drift-result-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 50%;
  font-weight: 700;
}

.drift-result-ok .drift-result-icon {
  background: #e8f6eb;
  color: #29934e;
}

.drift-result-alert .drift-result-icon {
  background: #ffeaea;
  color: #dc3d3d;
}

.drift-result-row strong {
  display: block;
  font-size: 12px;
}

.drift-result-row small {
  display: block;
  margin-top: 2px;
  color: #61718a;
  font-size: 10px;
}

/* Status table */

.drift-status-table {
  width: 100%;
  margin: 16px 0 34px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid #dce3ec;
  border-radius: 7px;
  background: #fff;
}

.drift-status-table th,
.drift-status-table td {
  padding: 10px 14px;
  border-bottom: 1px solid #e5e9ef;
  text-align: left;
  vertical-align: middle;
  font-size: 13px;
}

.drift-status-table th {
  background: #f8fafc;
  color: #24334d;
  font-weight: 700;
}

.drift-status-table td {
  color: #465a76;
}

.drift-status-table tr:last-child td {
  border-bottom: 0;
}

.drift-status {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.drift-status-ok {
  border: 1px solid #b8dec7;
  background: #eef9f1;
  color: #237342;
}

.drift-status-warning {
  border: 1px solid #f1cf96;
  background: #fff6e6;
  color: #b16a08;
}

.drift-status-failed {
  border: 1px solid #cfd5de;
  background: #f4f6f8;
  color: #59677a;
}

.drift-status-neutral {
  border: 1px solid #c8d9ef;
  background: #f1f6fd;
  color: #42658e;
}

/* Two-column section */

.drift-two-column {
  display: grid;
  grid-template-columns: 1.35fr 0.85fr;
  gap: 28px;
  align-items: start;
  margin: 0 0 28px;
}

.drift-two-column h2 {
  margin-top: 0;
}

.drift-two-column ul {
  margin: 10px 0 0;
  padding-left: 21px;
}

.drift-two-column li {
  margin: 7px 0;
  color: #465a76;
  font-size: 13px;
  line-height: 1.5;
}

.drift-report-card {
  box-sizing: border-box;
  padding: 15px 17px;
  border: 1px solid #c9e3d0;
  border-radius: 7px;
  background: #f6fbf7;
}

.drift-report-card > strong {
  display: block;
  margin-bottom: 10px;
  color: #243a2a;
  font-size: 14px;
}

.drift-report-card div {
  margin: 8px 0;
  color: #1e9146;
  font-size: 13px;
}

.drift-report-card div span {
  color: #465a76;
  margin-left: 4px;
}

/* Lists */

.operations-page ul {
  margin: 10px 0 28px;
  padding-left: 22px;
}

.operations-page li {
  margin: 7px 0;
  color: #465a76;
  font-size: 14px;
  line-height: 1.5;
}

/* Code block */

.operations-page pre {
  margin: 16px 0 30px;
  padding: 18px 20px;
  overflow-x: auto;
  border: 1px solid #dce3ec;
  border-radius: 8px;
  background: #fafbfc;
  box-shadow: none;
}

.operations-page pre code {
  color: #26364f;
  font-size: 13px;
  line-height: 1.65;
}

/* Best practices */

.operations-checklist {
  margin: 12px 0 34px;
}

.operations-checklist div {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 9px 0;
  color: #465a76;
  font-size: 14px;
  line-height: 1.5;
}

.operations-checklist .checkmark {
  color: #159447;
  font-weight: 700;
}

/* Next callout */

.operations-next-callout {
  display: flex;
  align-items: center;
  gap: 14px;
  box-sizing: border-box;
  width: 100%;
  margin: 34px 0 30px;
  padding: 16px 20px;
  border: 1px solid #bfd5ff;
  border-radius: 8px;
  background: #f5f9ff;
}

.operations-next-icon {
  flex: 0 0 22px;
  color: #1769e0;
  font-size: 20px;
}

.operations-next-content {
  flex: 1;
  min-width: 0;
}

.operations-next-content strong {
  display: block;
  margin-bottom: 4px;
  color: #253450;
  font-size: 14px;
}

.operations-next-content p {
  margin: 0;
  color: #4b5d78;
  font-size: 13px;
  line-height: 1.5;
}

.operations-next-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  flex-shrink: 0;
  padding: 10px 16px;
  border-radius: 6px;
  background: #3452c5;
  color: #fff !important;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
  white-space: nowrap;
}

.operations-next-button:hover {
  background: #263fa7;
  color: #fff !important;
}

.operations-next-button span {
  font-size: 17px;
  line-height: 1;
}

/* Previous / Next */

.operations-page-navigation {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin: 32px 0 10px;
  padding-top: 22px;
  border-top: 1px solid #e4e8ee;
}

.operations-nav-card {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 205px;
  padding: 15px 17px;
  border: 1px solid #e0e5ec;
  border-radius: 8px;
  background: #fff;
  color: #253450 !important;
  text-decoration: none !important;
}

.operations-nav-card:hover {
  border-color: #b9c9e4;
}

.operations-nav-card small {
  display: block;
  margin-bottom: 5px;
  color: #6a7890;
  font-size: 12px;
}

.operations-nav-card strong {
  display: block;
  color: #253450;
  font-size: 14px;
}

.operations-nav-arrow {
  color: #1769e0;
  font-size: 20px;
}

.operations-nav-next {
  margin-left: auto;
  text-align: right;
}

/* Responsive */

@media (max-width: 950px) {
  .drift-flow {
    flex-wrap: wrap;
    justify-content: center;
  }

  .drift-flow-step {
    flex: 0 1 210px;
  }

  .drift-flow-arrow {
    display: none;
  }

  .drift-result {
    flex: 0 1 300px;
  }

  .drift-two-column {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .operations-page h1 {
    font-size: 34px;
  }

  .operations-next-callout {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .operations-next-button {
    margin-left: 36px;
  }

  .operations-page-navigation {
    flex-direction: column;
  }

  .operations-nav-next {
    margin-left: 0;
    text-align: left;
  }
}



/* =========================================================
   AXIO Docs — Cost Explorer
   Scoped styles: .cost-page
   ========================================================= */

.cost-page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 28px 32px 60px;
  color: #172033;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.6;
}

.cost-page * {
  box-sizing: border-box;
}

.cost-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-size: 13px;
  color: #667085;
}

.cost-breadcrumb strong {
  color: #172033;
}

.cost-page h1 {
  margin: 0 0 8px;
  font-size: 38px;
  line-height: 1.15;
  font-weight: 750;
  letter-spacing: -0.8px;
  color: #101828;
}

.cost-page h2 {
  margin: 30px 0 7px;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 720;
  color: #101828;
}

.cost-page h3 {
  margin: 0;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 700;
  color: #172033;
}

.cost-intro {
  max-width: 850px;
  margin: 0 0 24px;
  font-size: 14px;
  color: #344054;
}

.cost-info-box {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 17px 18px;
  margin: 18px 0 28px;
  border: 1px solid #c9dbff;
  border-radius: 7px;
  background: #f5f9ff;
}

.cost-info-icon {
  flex: 0 0 auto;
  color: #155eef;
  font-size: 22px;
  line-height: 1;
}

.cost-info-box h3 {
  margin-bottom: 4px;
}

.cost-info-box p {
  margin: 0;
  font-size: 13px;
  color: #344054;
}

.cost-flow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 28px;
}

.cost-flow-card {
  position: relative;
  flex: 1;
  min-height: 116px;
  padding: 15px 13px 12px;
  text-align: center;
  border: 1px solid;
  border-radius: 7px;
}

.cost-flow-card strong {
  display: block;
  margin: 2px 0 5px;
  font-size: 13px;
}

.cost-flow-card p {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: #475467;
}

.cost-flow-icon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -30px auto 8px;
  border-radius: 50%;
  background: #fff;
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(16, 24, 40, .08);
}

.cost-flow-blue {
  border-color: #b8d2ff;
  background: #f8fbff;
}

.cost-flow-blue strong,
.cost-flow-blue .cost-flow-icon {
  color: #155eef;
}

.cost-flow-green {
  border-color: #c6e6d0;
  background: #f7fcf8;
}

.cost-flow-green strong,
.cost-flow-green .cost-flow-icon {
  color: #039855;
}

.cost-flow-purple {
  border-color: #d9c9ff;
  background: #fbf9ff;
}

.cost-flow-purple strong,
.cost-flow-purple .cost-flow-icon {
  color: #6941c6;
}

.cost-flow-orange {
  border-color: #f4d59d;
  background: #fffaf2;
}

.cost-flow-orange strong,
.cost-flow-orange .cost-flow-icon {
  color: #d97706;
}

.cost-flow-arrow {
  flex: 0 0 auto;
  color: #174a88;
  font-size: 25px;
  font-weight: 700;
}

.cost-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 16px 0 24px;
}

.cost-metric-card {
  min-height: 105px;
  padding: 15px;
  border: 1px solid #e4e7ec;
  border-radius: 7px;
  background: #fff;
}

.cost-metric-label {
  display: flex;
  justify-content: space-between;
  color: #667085;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .55px;
}

.cost-metric-value {
  margin-top: 10px;
  font-size: 25px;
  line-height: 1.1;
  font-weight: 750;
  color: #101828;
}

.cost-metric-value.green {
  color: #087443;
}

.cost-metric-value.red {
  color: #c4323a;
}

.cost-metric-description {
  margin-top: 6px;
  color: #667085;
  font-size: 10.5px;
}

.cost-tabs {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 12px;
  border-bottom: 1px solid #e4e7ec;
  margin-top: 12px;
}

.cost-tabs span {
  padding: 9px 0 8px;
  color: #667085;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.cost-tabs span.active {
  color: #173f9f;
  border-bottom: 2px solid #3155c7;
}

.cost-table-wrapper {
  overflow-x: auto;
  border: 1px solid #e4e7ec;
  border-top: 0;
  border-radius: 0 0 7px 7px;
}

.cost-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}

.cost-table th {
  padding: 9px 12px;
  text-align: left;
  color: #344054;
  font-weight: 700;
  background: #f8fafc;
  border-bottom: 1px solid #e4e7ec;
}

.cost-table td {
  padding: 9px 12px;
  border-bottom: 1px solid #eef1f5;
  color: #344054;
}

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

.cost-anomaly {
  color: #d92d20;
  font-weight: 700;
}

.cost-trend {
  color: #12a150;
  font-size: 18px;
  letter-spacing: -4px;
}

.cost-report-link {
  display: inline-block;
  margin: 8px 0 4px;
  color: #4f46e5;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.cost-two-column {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 28px;
  align-items: start;
}

.cost-check-list {
  margin: 10px 0 0;
  padding-left: 18px;
  font-size: 12px;
}

.cost-check-list li {
  margin: 5px 0;
  padding-left: 2px;
}

.cost-report-box {
  margin-top: 34px;
  padding: 15px 17px;
  border: 1px solid #c8e3cf;
  border-radius: 7px;
  background: #f6fbf7;
}

.cost-report-box ul {
  margin: 9px 0 0;
  padding: 0;
  list-style: none;
  font-size: 11.5px;
}

.cost-report-box li {
  margin: 6px 0;
}

.cost-report-box li::before,
.cost-best-practices li::before {
  content: "✓";
  margin-right: 8px;
  color: #039855;
  font-weight: 800;
}

.cost-code-block {
  position: relative;
  overflow-x: auto;
  margin-top: 12px;
  border: 1px solid #d9dee8;
  border-radius: 7px;
  background: #fbfcfe;
}

.cost-code-block pre {
  margin: 0;
  padding: 16px 18px;
  color: #392a8c;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.65;
}

.cost-code-block code {
  font-family: inherit;
}

.cost-best-practices {
  list-style: none;
  padding-left: 0;
  margin-top: 10px;
}

.cost-best-practices li {
  margin: 6px 0;
}

.cost-next-box {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  padding: 15px 16px;
  border: 1px solid #c7d9ff;
  border-radius: 7px;
  background: #f5f9ff;
}

.cost-next-content {
  flex: 1;
}

.cost-next-content h3 {
  margin-bottom: 4px;
  color: #172b67;
}

.cost-next-content p {
  margin: 0;
  font-size: 11.5px;
  color: #344054;
}

.cost-next-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  padding: 11px 17px;
  border-radius: 6px;
  background: #4f3cc9;
  color: #fff !important;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.cost-next-button:hover {
  background: #4333b3;
}

.cost-navigation {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid #eaecf0;
}

.cost-nav-card {
  min-height: 70px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 15px;
  border: 1px solid #e4e7ec;
  border-radius: 7px;
  color: #172033;
  text-decoration: none;
}

.cost-nav-card:hover {
  border-color: #b8c7ef;
  background: #fafbff;
}

.cost-nav-card span {
  color: #344054;
  font-size: 20px;
}

.cost-nav-card small {
  display: block;
  color: #667085;
  font-size: 10px;
  margin-bottom: 2px;
}

.cost-nav-card strong {
  display: block;
  color: #172033;
  font-size: 12px;
}

.cost-nav-next {
  justify-content: flex-end;
  text-align: right;
}

/* Responsive */
@media (max-width: 900px) {
  .cost-page {
    padding: 24px 20px 50px;
  }

  .cost-flow {
    flex-wrap: wrap;
  }

  .cost-flow-card {
    min-width: calc(50% - 25px);
  }

  .cost-flow-arrow {
    display: none;
  }

  .cost-summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .cost-page h1 {
    font-size: 32px;
  }

  .cost-flow-card {
    min-width: 100%;
  }

  .cost-summary-grid,
  .cost-two-column,
  .cost-navigation {
    grid-template-columns: 1fr;
  }

  .cost-tabs {
    overflow-x: auto;
    gap: 18px;
  }

  .cost-next-box {
    align-items: flex-start;
    flex-direction: column;
  }

  .cost-next-button {
    width: 100%;
    justify-content: center;
  }

  .cost-nav-next {
    justify-content: space-between;
    text-align: left;
  }
}


.resource-grid-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    margin: 35px 0 50px;
}




/* =========================================
   Drift Detection Dashboard
   ========================================= */

.drift-two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin: 28px 0;
}

.drift-section {
  min-width: 0;
}

.drift-section h2 {
  margin-top: 0;
}

/* -----------------------------------------
   Watched Table
   ----------------------------------------- */

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

table th {
  background: #f7f5ff;
  color: #1f2937;
  font-weight: 700;
}

table th,
table td {
  padding: 12px 14px;
  border: 1px solid #dfe3eb;
  text-align: left;
}

table tr:hover td {
  background: #fafbfc;
}

/* -----------------------------------------
   Watch Stack Info
   ----------------------------------------- */

.drift-info-card {
  margin-top: 20px;
  padding: 18px 20px;
  border: 1px solid #c8d9ff;
  border-radius: 10px;
  background: #f3f7ff;
  color: #4b5563;
  line-height: 1.6;
}

.drift-info-card strong {
  display: block;
  margin-bottom: 6px;
  color: #2457d6;
  font-size: 16px;
}

/* -----------------------------------------
   Status Cards
   ----------------------------------------- */

.drift-status-card {
  margin-top: 14px;
  padding: 16px 18px;
  border-radius: 10px;
  line-height: 1.6;
}

.drift-status-card strong {
  display: block;
  margin-bottom: 5px;
  font-size: 16px;
}

.drift-success {
  border: 1px solid #a9dfbb;
  background: #f1fbf4;
}

.drift-success strong {
  color: #16834b;
}

.drift-failed {
  border: 1px solid #efb5b5;
  background: #fff5f5;
}

.drift-failed strong {
  color: #c93434;
}

/* -----------------------------------------
   Note
   ----------------------------------------- */

.drift-note {
  margin: 20px 0 28px;
  padding: 16px 20px;
  border: 1px solid #f0d58a;
  border-radius: 10px;
  background: #fff9e8;
  color: #66501f;
  line-height: 1.6;
}

.drift-note strong {
  color: #8a5b00;
}

/* -----------------------------------------
   Schedule
   ----------------------------------------- */

.drift-schedule-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 18px 0;
}

.drift-schedule-card {
  padding: 16px;
  border: 1px solid #d8d0ff;
  border-radius: 10px;
  background: #faf9ff;
}

.drift-schedule-card strong {
  display: block;
  margin-bottom: 5px;
  color: #5540c8;
}

.drift-schedule-card span {
  color: #667085;
  font-size: 14px;
}

/* -----------------------------------------
   Troubleshooting
   ----------------------------------------- */

.drift-steps {
  margin: 18px 0;
  padding: 18px 24px;
  border: 1px solid #e0e4eb;
  border-radius: 10px;
  background: #ffffff;
}

.drift-steps ol {
  margin: 0;
  padding-left: 22px;
}

.drift-steps li {
  padding: 5px 0;
  color: #4b5563;
  line-height: 1.5;
}

/* -----------------------------------------
   Warning
   ----------------------------------------- */

.drift-warning {
  margin: 20px 0 30px;
  padding: 18px 20px;
  border: 1px solid #f0c878;
  border-radius: 10px;
  background: #fff8e8;
  color: #66501f;
  line-height: 1.6;
}

.drift-warning strong {
  display: block;
  margin-bottom: 6px;
  color: #8a5b00;
}

/* -----------------------------------------
   Analytics
   ----------------------------------------- */

.drift-analytics {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 25px 0 35px;
  padding: 20px 22px;
  border: 1px solid #d6ceff;
  border-radius: 10px;
  background: #faf9ff;
}

.drift-analytics h2 {
  margin-top: 0;
}

.drift-analytics p {
  margin-bottom: 0;
  color: #667085;
  line-height: 1.6;
}

.drift-analytics-button {
  flex-shrink: 0;
  padding: 11px 18px;
  border-radius: 8px;
  background: #6848e8;
  color: #ffffff;
  font-weight: 600;
  white-space: nowrap;
}

/* -----------------------------------------
   Responsive
   ----------------------------------------- */

@media (max-width: 800px) {
  .drift-two-column {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .drift-schedule-grid {
    grid-template-columns: 1fr;
  }

  .drift-analytics {
    flex-direction: column;
    align-items: flex-start;
  }

  .drift-analytics-button {
    width: 100%;
    text-align: center;
  }

  .drift-table-wrapper {
    overflow-x: auto;
  }
}



/* =========================================
   Environment Cards
   ========================================= */

.environment-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 38px;
  margin: 32px 0;
}


/* =========================================
   Base Card
   ========================================= */

.environment-card {
  position: relative;
  padding: 26px 30px;
  border-radius: 22px;
  background: #ffffff;
  box-sizing: border-box;
  min-height: 500px;
  box-shadow: 0 3px 14px rgba(30, 40, 70, 0.04);
}


/* Blue card */

.environment-card-blue {
  border: 1.5px solid #a9ceff;
}


/* Green card */

.environment-card-green {
  border: 1.5px solid #a9e5c0;
}


/* =========================================
   Card Header
   ========================================= */

.environment-card-header {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 14px;
}

.environment-card-header h3 {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
  color: #172033;
}


/* =========================================
   Icon
   ========================================= */

.environment-card-icon {
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  font-size: 28px;
  line-height: 1;
}

.environment-card-blue .environment-card-icon {
  background: #eaf3ff;
}

.environment-card-green .environment-card-icon {
  background: #eaf9ef;
}


/* =========================================
   Divider
   ========================================= */

.environment-card-divider {
  width: 100%;
  height: 2px;
  margin-bottom: 22px;
}

.environment-card-blue .environment-card-divider {
  background: #c5ddff;
}

.environment-card-green .environment-card-divider {
  background: #c3ebd0;
}


/* =========================================
   Description
   ========================================= */

.environment-card-description {
  margin: 0 0 22px;
  font-size: 17px;
  line-height: 1.6;
  color: #374151;
}


/* =========================================
   Section Label
   ========================================= */

.environment-card-label {
  margin-bottom: 17px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.environment-card-blue .environment-card-label {
  color: #4386e8;
}


/* =========================================
   Key Points
   ========================================= */

.environment-point {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
}

.environment-point-icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 700;
}

.environment-card-blue .environment-point-icon {
  color: #2775d8;
  background: #eaf3ff;
}

.environment-point p {
  margin: 3px 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: #374151;
}


/* =========================================
   Information Box
   ========================================= */

.environment-info {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-top: 20px;
  padding: 14px 17px;
  border-radius: 14px;
}

.environment-info p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}

.environment-info-icon {
  flex-shrink: 0;
  font-size: 21px;
  font-weight: 700;
}


/* Blue information box */

.environment-info-blue {
  background: #eaf3ff;
  color: #244d82;
}

.environment-info-blue .environment-info-icon {
  color: #3479d8;
}


/* Green information box */

.environment-info-green {
  background: #eaf8ee;
  color: #426455;
}

.environment-info-green .environment-info-icon {
  color: #23854d;
}


/* =========================================
   Self Approval Options
   ========================================= */

.self-approval-option {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 16px 18px;
  margin-bottom: 16px;
  border-radius: 16px;
  background: #f5fbf6;
  border: 1px solid #d8efde;
}

.self-approval-icon {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e5f7e9;
  font-size: 22px;
}

.self-approval-option h4 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  color: #18834a;
}

.self-approval-option p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: #374151;
}


/* =========================================
   Responsive
   ========================================= */

@media (max-width: 900px) {

  .environment-cards {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .environment-card {
    min-height: auto;
  }

}


@media (max-width: 600px) {

  .environment-card {
    padding: 24px;
    border-radius: 18px;
  }

  .environment-card-header h3 {
    font-size: 23px;
  }

  .environment-card-description {
    font-size: 16px;
  }

  .environment-point p {
    font-size: 15px;
  }

}




/* =========================================================
   Axio — Governance Dashboard
   Setup Wizard removed
   Scoped to .governance-dashboard
   ========================================================= */

.governance-dashboard {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 28px 32px 60px;
  box-sizing: border-box;
  color: #172033;
  font-family: inherit;
  line-height: 1.55;
}

/* =========================================================
   TOP / INTRO
   ========================================================= */

.governance-top {
  display: block;
  width: 100%;
}

.governance-intro {
  width: 100%;
  max-width: none;
}

.governance-breadcrumb {
  margin: 0 0 14px;
  color: #667085;
  font-size: 13px;
  line-height: 1.4;
}

.governance-breadcrumb span {
  margin: 0 6px;
  color: #98a2b3;
}

.governance-breadcrumb strong {
  color: #172033;
}

/* Page title */
.governance-dashboard h1 {
  margin: 0 0 12px;
  color: #111827;
  font-size: 32px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.5px;
}

/* Route / Who */
.governance-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
}

.governance-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 13px;
  border: 1px solid #b7dfd0;
  border-radius: 8px;
  background: #f8fffc;
  color: #172033;
  font-size: 13px;
  line-height: 1.3;
}

.governance-meta strong {
  color: #172033;
  margin-right: 3px;
}

.governance-meta b {
  color: #087f55;
  font-weight: 700;
}

/* Intro paragraph */
.governance-intro > p {
  max-width: 900px;
  margin: 0 0 22px;
  color: #344054;
  font-size: 14px;
  line-height: 1.65;
}

.governance-dashboard strong {
  color: #172033;
}

/* =========================================================
   NOTE / CALLOUT
   ========================================================= */

.governance-note {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 900px;
  min-height: 46px;
  margin: 0 0 24px;
  padding: 9px 14px;
  box-sizing: border-box;
  border: 1px solid #b7dfd0;
  border-radius: 8px;
  background: #f8fffc;
  color: #344054;
  font-size: 13px;
  line-height: 1.5;
}

.governance-note-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #087f55;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

/* Links */
.governance-dashboard a {
  color: #087f55;
  font-weight: 600;
  text-decoration: none;
}

.governance-dashboard a:hover {
  text-decoration: underline;
}

/* =========================================================
   KPI CARDS
   ========================================================= */

.governance-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  margin: 0 0 20px;
}

.governance-kpi-card {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-width: 0;
  min-height: 112px;
  padding: 15px 13px;
  box-sizing: border-box;
  border: 1px solid #dfe5ed;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(20, 35, 55, 0.025);
}

.governance-kpi-card h3 {
  margin: 0 0 3px;
  color: #172033;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 700;
}

.governance-kpi-card p {
  margin: 2px 0;
  color: #475467;
  font-size: 11px;
  line-height: 1.55;
}

.kpi-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 21px;
  font-weight: 700;
}

.kpi-icon.red {
  background: #fff0f0;
  color: #ef1d1d;
}

.kpi-icon.orange {
  background: #fff5e6;
  color: #f59e0b;
}

.kpi-icon.green {
  background: #eaf9f1;
  color: #087f55;
}

.kpi-icon.blue {
  background: #edf5ff;
  color: #1677ff;
}

.kpi-icon.purple {
  background: #f3edff;
  color: #6941c6;
}

.kpi-value {
  display: block;
  margin: 1px 0 4px;
  font-size: 23px;
  line-height: 1;
  font-weight: 700;
}

.red-text {
  color: #ef1d1d !important;
}

.orange-text {
  color: #f59e0b !important;
}

.green-text {
  color: #087f55 !important;
}

.blue-text {
  color: #1677ff !important;
}

.purple-text {
  color: #6941c6 !important;
}

/* =========================================================
   TABS + FILTERS
   ========================================================= */

.governance-section {
  width: 100%;
}

.governance-tabs {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 40px;
  margin: 0 0 12px;
  border-bottom: 1px solid #e4e7ec;
  position: relative;
}

.governance-tabs > span {
  display: inline-flex;
  align-items: center;
  height: 40px;
  color: #172033;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  position: relative;
}

.governance-tabs > span.active {
  color: #087f55;
}

.governance-tabs > span.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: #087f55;
  border-radius: 2px 2px 0 0;
}

.governance-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.governance-filters > span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 11px;
  box-sizing: border-box;
  border: 1px solid #dfe5ed;
  border-radius: 7px;
  background: #fff;
  color: #344054;
  font-size: 11px;
  line-height: 1.3;
  white-space: nowrap;
}

.governance-filters .clear-filter {
  border-color: transparent;
  background: transparent;
  color: #087f55;
  font-weight: 600;
}

/* =========================================================
   CHART GRID
   ========================================================= */

.governance-chart-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  margin: 0 0 14px;
}

.governance-chart-card {
  min-width: 0;
  min-height: 220px;
  padding: 16px 18px 14px;
  box-sizing: border-box;
  border: 1px solid #dfe5ed;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(20, 35, 55, 0.025);
}

.governance-chart-card h2,
.governance-panel h2 {
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  color: #172033;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 700;
}

/* Donut layout */
.donut-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 135px;
}

.donut {
  position: relative;
  flex: 0 0 128px;
  width: 128px;
  height: 128px;
  border-radius: 50%;
}

.donut::after {
  content: "";
  position: absolute;
  inset: 27px;
  border-radius: 50%;
  background: #fff;
}

.severity-donut {
  background: conic-gradient(
    #ef1d1d 0deg 64.8deg,
    #f97316 64.8deg 201.6deg,
    #fbbf24 201.6deg 360deg
  );
}

.cloud-donut {
  background: conic-gradient(
    #2684ff 0deg 172.8deg,
    #12a8c5 172.8deg 270deg,
    #48c95b 270deg 331.2deg,
    #ff8a00 331.2deg 360deg
  );
}

.donut-center {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.donut-center strong {
  color: #172033;
  font-size: 20px;
  line-height: 1;
}

.donut-center span {
  margin-top: 3px;
  color: #475467;
  font-size: 10px;
}

/* Legend */
.chart-legend {
  min-width: 145px;
}

.chart-legend > div {
  display: grid;
  grid-template-columns: 9px 1fr auto auto;
  align-items: center;
  gap: 7px;
  margin: 8px 0;
  color: #344054;
  font-size: 11px;
}

.chart-legend b {
  color: #172033;
  font-weight: 600;
}

.chart-legend small {
  color: #667085;
  font-size: 10px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.dot.critical {
  background: #ef1d1d;
}

.dot.high {
  background: #f97316;
}

.dot.medium {
  background: #fbbf24;
}

.dot.low {
  background: #087f55;
}

.dot.aws {
  background: #2684ff;
}

.dot.azure {
  background: #12a8c5;
}

.dot.gcp {
  background: #48c95b;
}

.dot.others {
  background: #ff8a00;
}

/* Chart link */
.chart-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  color: #087f55 !important;
  font-size: 11px;
  font-weight: 700;
}

.chart-link span {
  font-size: 16px;
}

/* =========================================================
   CATEGORY BAR CHART
   ========================================================= */

.category-chart {
  margin: 22px 0 12px;
}

.category-chart > div {
  display: grid;
  grid-template-columns: 125px 1fr 28px;
  align-items: center;
  gap: 9px;
  margin: 13px 0;
  color: #344054;
  font-size: 11px;
}

.category-chart > div > span {
  white-space: nowrap;
}

.category-chart .bar {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7eee9;
}

.category-chart .bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #087f55;
}

.category-chart b {
  color: #344054;
  font-size: 10px;
  font-weight: 500;
  text-align: right;
}

/* =========================================================
   BOTTOM PANELS
   ========================================================= */

.governance-bottom-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 12px;
  width: 100%;
}

.governance-panel {
  min-width: 0;
  padding: 15px 17px;
  box-sizing: border-box;
  border: 1px solid #dfe5ed;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(20, 35, 55, 0.025);
}

.governance-panel p {
  margin: 0 0 10px;
  color: #344054;
  font-size: 12px;
  line-height: 1.5;
}

/* =========================================================
   TABLE
   ========================================================= */

.governance-table {
  width: 100%;
  margin: 10px 0 8px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid #dfe5ed;
  border-radius: 7px;
  background: #fff;
}

.governance-table th {
  padding: 8px 11px;
  background: #f8fafc;
  border-bottom: 1px solid #dfe5ed;
  color: #172033;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
}

.governance-table td {
  padding: 8px 11px;
  border-bottom: 1px solid #e9edf2;
  color: #344054;
  font-size: 11px;
  line-height: 1.45;
  vertical-align: top;
}

.governance-table tr:last-child td {
  border-bottom: 0;
}

.governance-table tbody tr:hover {
  background: #fafcfe;
}

.enforce-text {
  color: #ef1d1d !important;
  font-weight: 700;
}

.advisory-text {
  color: #f59e0b !important;
  font-weight: 700;
}

.failopen-text {
  color: #1677ff !important;
  font-weight: 700;
}

.policy-gate-note {
  margin-top: 9px;
  color: #475467;
  font-size: 11px;
  line-height: 1.45;
}

/* =========================================================
   SETTINGS CHECKLIST
   ========================================================= */

.settings-checklist {
  list-style: none;
  margin: 7px 0 12px;
  padding: 0;
}

.settings-checklist li {
  position: relative;
  margin: 7px 0;
  padding-left: 23px;
  color: #344054;
  font-size: 11px;
  line-height: 1.45;
}

.settings-checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #e5f7ed;
  color: #087f55;
  font-size: 10px;
  font-weight: 800;
}

/* Delivery note */
.governance-delivery-note {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid #b8d8ff;
  border-radius: 7px;
  background: #f0f7ff;
  color: #344054;
  font-size: 11px;
  line-height: 1.5;
}

/* =========================================================
   CODE
   ========================================================= */

.governance-dashboard code {
  padding: 2px 5px;
  border: 1px solid #e1e6ed;
  border-radius: 4px;
  background: #f5f7fa;
  color: #354052;
  font-size: 0.9em;
}

.governance-dashboard pre {
  margin: 18px 0;
  padding: 18px;
  overflow-x: auto;
  border-radius: 9px;
  background: #172033;
  color: #f4f7fb;
}

/* =========================================================
   REMOVE OLD SETUP WIZARD STYLES
   ========================================================= */

.governance-setup-card,
.setup-heading,
.setup-icon,
.governance-steps,
.setup-reopen,
.setup-actions,
.setup-button {
  display: none !important;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {
  .governance-dashboard {
    padding: 24px 22px 50px;
  }

  .governance-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .governance-chart-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .governance-chart-card:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .governance-dashboard {
    padding: 22px 18px 45px;
  }

  .governance-dashboard h1 {
    font-size: 28px;
  }

  .governance-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .governance-chart-grid,
  .governance-bottom-grid {
    grid-template-columns: 1fr;
  }

  .governance-chart-card:last-child {
    grid-column: auto;
  }

  .governance-tabs {
    flex-wrap: wrap;
    gap: 18px;
    padding-bottom: 5px;
  }

  .governance-filters {
    width: 100%;
    margin-left: 0;
    overflow-x: auto;
    padding-bottom: 5px;
  }
}

@media (max-width: 600px) {
  .governance-dashboard {
    padding: 18px 14px 36px;
  }

  .governance-dashboard h1 {
    font-size: 25px;
  }

  .governance-meta {
    flex-direction: column;
  }

  .governance-meta span {
    width: 100%;
  }

  .governance-intro > p,
  .governance-note {
    max-width: none;
  }

  .governance-kpis {
    grid-template-columns: 1fr;
  }

  .governance-tabs {
    gap: 12px;
  }

  .governance-tabs > span {
    font-size: 11px;
  }

  .donut-layout {
    justify-content: flex-start;
  }

  .category-chart > div {
    grid-template-columns: 105px 1fr 24px;
  }

  .governance-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}



/* =========================================================
   Axio — Policies: Library, Packs, and Evaluation
   Scoped to .policy-page
   ========================================================= */

.policy-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 30px 28px 64px;
  color: #172033;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.55;
}

.policy-page * {
  box-sizing: border-box;
}

.policy-page h1,
.policy-page h2,
.policy-page h3,
.policy-page p {
  margin-top: 0;
}

.policy-page h1 {
  margin-bottom: 8px;
  color: #111827;
  font-size: 31px;
  line-height: 1.2;
  font-weight: 750;
  letter-spacing: -0.5px;
}

.policy-page h2 {
  margin-bottom: 14px;
  color: #172033;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
}

.policy-page h3 {
  margin: 22px 0 10px;
  color: #172033;
  font-size: 14px;
  font-weight: 700;
}

.policy-page p {
  margin-bottom: 15px;
  color: #3f4b5d;
  font-size: 14px;
}

.policy-page strong {
  color: #172033;
  font-weight: 700;
}

.policy-page a {
  color: #315cff;
  text-decoration: none;
}

.policy-page a:hover {
  text-decoration: underline;
}

.policy-page code {
  padding: 2px 5px;
  border: 1px solid #d9e4dc;
  border-radius: 4px;
  background: #f1faf5;
  color: #087f55;
  font-size: 0.9em;
}

/* Header */

.policy-page-header {
  margin-bottom: 22px;
}

.policy-page-header p {
  margin-bottom: 3px;
  font-size: 14px;
  color: #4d596a;
}

/* Top cards */

.policy-top-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}

.policy-card {
  padding: 22px 20px;
  border: 1px solid #dfe6ee;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 2px 7px rgba(24, 39, 58, 0.025);
}

.policy-card-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.policy-card-title h2 {
  margin: 0;
}

.policy-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 21px;
  font-weight: 700;
}

.policy-icon-purple {
  color: #6637d8;
  background: #f1eaff;
}

.policy-icon-blue {
  color: #1479ed;
  background: #e9f2ff;
}

.policy-icon-green {
  color: #087f55;
  background: #e5f7ef;
}

.policy-meta {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.policy-meta span {
  display: inline-block;
  padding: 8px 11px;
  border: 1px solid #b9e2d1;
  border-radius: 7px;
  background: #fbfffd;
  color: #354154;
  font-size: 12px;
  line-height: 1.35;
}

.policy-meta small {
  color: #087f55;
  font-size: 11px;
}

.policy-meta strong {
  font-size: 12px;
}

/* Check lists */

.policy-check-list {
  list-style: none;
  margin: 10px 0 20px;
  padding: 0;
}

.policy-check-list li {
  position: relative;
  margin: 10px 0;
  padding-left: 27px;
  color: #3f4b5d;
  font-size: 14px;
}

.policy-check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e6f7ef;
  color: #078457;
  font-size: 11px;
  font-weight: 800;
}

/* Policy library panels */

.policy-label {
  margin-bottom: 8px !important;
  color: #172033 !important;
  font-weight: 700;
}

.policy-panel-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.policy-panel-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 55px;
  padding: 7px 10px;
  border: 1px solid #e2e7ee;
  border-radius: 7px;
  background: #fff;
}

.policy-panel-item .mini-icon {
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 700;
}

.policy-panel-item div {
  min-width: 0;
}

.policy-panel-item strong {
  display: block;
  margin-bottom: 1px;
  font-size: 13px;
}

.policy-panel-item small {
  display: block;
  color: #4f5b6b;
  font-size: 12px;
  line-height: 1.35;
}

.mini-icon.green {
  color: #087f55;
  background: #e7f8ef;
}

.mini-icon.purple {
  color: #6b39db;
  background: #f1eaff;
}

.mini-icon.orange {
  color: #ff8b00;
  background: #fff2df;
}

.mini-icon.blue {
  color: #1779ed;
  background: #eaf3ff;
}

.mini-icon.red {
  color: #ef3030;
  background: #ffe9e9;
}

.mini-icon.gray {
  color: #657084;
  background: #f0f2f5;
}

/* Full-width information cards */

.policy-info-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 16px;
  padding: 16px 17px;
  border: 1px solid #dfe6ee;
  border-radius: 9px;
  background: #fff;
}

.policy-info-card h2 {
  margin-bottom: 3px;
  font-size: 15px;
}

.policy-info-card p {
  margin-bottom: 0;
  font-size: 13px;
}

.policy-info-icon {
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 17px;
  font-weight: 700;
}

.policy-domains-card {
  border-color: #cfe9db;
  background: #fbfffd;
}

.policy-domains-card .policy-info-icon {
  background: #e5f7ed;
  color: #087f55;
}

.policy-engines-card {
  border-color: #cfe0f7;
  background: #fbfdff;
}

.policy-engines-card .policy-info-icon {
  background: #e9f2ff;
  color: #1678e9;
}

.policy-single-card {
  border-color: #f0dfbd;
  background: #fffdf8;
}

.policy-single-card .policy-info-icon {
  background: #fff1dc;
  color: #bd7300;
}

.green-text {
  color: #087f55 !important;
}

.purple-text {
  color: #6935d6 !important;
}

.blue-text {
  color: #1579e8 !important;
}

.red-text {
  color: #ef3030 !important;
}

/* Evaluation table */

.policy-evaluation {
  margin-top: 20px;
}

.policy-evaluation > h2 {
  margin-bottom: 10px;
  font-size: 19px;
}

.policy-table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid #dfe5ed;
  border-radius: 9px;
  background: #fff;
}

.policy-table th {
  padding: 9px 12px;
  background: #f7f9fc;
  border-bottom: 1px solid #dfe5ed;
  color: #172033;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
}

.policy-table td {
  padding: 8px 12px;
  border-bottom: 1px solid #e7ebf0;
  color: #3f4b5d;
  font-size: 12px;
  vertical-align: top;
}

.policy-table th + th,
.policy-table td + td {
  border-left: 1px solid #e7ebf0;
}

.policy-table tr:last-child td {
  border-bottom: 0;
}

.policy-table tbody tr:hover {
  background: #fafcfe;
}

.policy-table-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 0;
  padding: 10px 12px;
  border: 1px solid #dfe5ed;
  border-top: 0;
  border-radius: 0 0 9px 9px;
  background: #fff;
}

.policy-table-note span {
  color: #344154;
  font-size: 15px;
}

.policy-table-note p {
  margin: 0;
  color: #3f4b5d;
  font-size: 12px;
}

/* Bottom cards */

.policy-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}

.policy-custom-card,
.policy-roles-card {
  min-height: 225px;
}

.policy-custom-card p,
.policy-roles-card p {
  font-size: 13px;
}

.role-table {
  margin: 12px 0 12px;
}

.role-table th,
.role-table td {
  padding: 6px 8px;
  font-size: 11px;
}

/* Responsive */

@media (max-width: 1000px) {
  .policy-page {
    padding: 25px 20px 50px;
  }

  .policy-top-grid,
  .policy-bottom-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .policy-page {
    padding: 20px 15px 40px;
    font-size: 14px;
  }

  .policy-page h1 {
    font-size: 26px;
  }

  .policy-card {
    padding: 18px 16px;
  }

  .policy-meta {
    flex-direction: column;
  }

  .policy-meta span {
    width: 100%;
  }

  .policy-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  .policy-info-card {
    padding: 14px;
  }
}



/* =========================================================
   Axio — Security Insights and Findings
   Scoped to .security-insights-page
   ========================================================= */

.security-insights-page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 30px 28px 65px;
  color: #172033;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.55;
}

.security-insights-page * {
  box-sizing: border-box;
}

.security-insights-page h1,
.security-insights-page h2,
.security-insights-page h3,
.security-insights-page h4,
.security-insights-page p {
  margin-top: 0;
}

.security-insights-page h1 {
  margin-bottom: 12px;
  color: #111827;
  font-size: 31px;
  line-height: 1.2;
  font-weight: 750;
  letter-spacing: -0.45px;
}

.security-insights-page h2 {
  margin-bottom: 14px;
  color: #087f55;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 750;
}

.security-insights-page h3 {
  margin: 24px 0 9px;
  color: #172033;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 700;
}

.security-insights-page h4 {
  margin: 0 0 7px;
  color: #172033;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 750;
}

.security-insights-page p {
  margin-bottom: 14px;
  color: #3f4b5d;
  font-size: 14px;
}

.security-insights-page strong {
  color: #172033;
  font-weight: 700;
}

.security-insights-page code {
  padding: 2px 5px;
  border: 1px solid #d7e8dd;
  border-radius: 4px;
  background: #f1faf5;
  color: #087f55;
  font-size: 0.9em;
}

/* Header */

.security-page-header {
  margin-bottom: 22px;
}

.security-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 15px;
}

.security-meta span {
  padding: 8px 11px;
  border: 1px solid #b9e2d1;
  border-radius: 7px;
  background: #fbfffd;
  color: #354154;
  font-size: 12px;
  line-height: 1.4;
}

.security-admin-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 17px;
  padding: 11px 13px;
  border: 1px solid #c9ddfa;
  border-radius: 7px;
  background: #f5f9ff;
  color: #354154;
  font-size: 13px;
}

.security-note-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #1679e9;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.security-lead {
  max-width: 850px;
  line-height: 1.7;
}

/* Sections */

.security-section {
  margin-top: 24px;
}

.security-section > h2 {
  margin-top: 0;
}

.security-label {
  margin-top: 16px;
  margin-bottom: 9px !important;
  color: #172033 !important;
  font-weight: 700;
}

/* Action cards */

.security-action-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.security-action-card {
  min-height: 155px;
  padding: 14px 13px;
  border: 1px solid #dfe6ee;
  border-radius: 9px;
  background: #fff;
}

.security-action-icon,
.quick-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  border-radius: 9px;
  font-size: 19px;
  font-weight: 700;
}

.security-action-card p,
.security-quick-card p {
  margin-bottom: 0;
  font-size: 12px;
  line-height: 1.45;
}

.security-action-icon.green,
.quick-icon.green {
  color: #087f55;
  background: #e6f7ef;
}

.security-action-icon.purple,
.quick-icon.purple {
  color: #6a35d8;
  background: #f1eaff;
}

.security-action-icon.blue,
.quick-icon.blue {
  color: #1679e9;
  background: #eaf3ff;
}

.security-action-icon.orange,
.quick-icon.orange {
  color: #f18a00;
  background: #fff1df;
}

.quick-icon.teal {
  color: #087f8b;
  background: #e5f8fa;
}

/* Tables */

.security-table {
  width: 100%;
  margin: 12px 0 14px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid #dfe5ed;
  border-radius: 8px;
  background: #fff;
}

.security-table th {
  padding: 9px 11px;
  background: #f7f9fc;
  border-bottom: 1px solid #dfe5ed;
  color: #172033;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
}

.security-table td {
  padding: 9px 11px;
  border-bottom: 1px solid #e7ebf0;
  color: #3f4b5d;
  font-size: 12px;
  vertical-align: top;
}

.security-table tr:last-child td {
  border-bottom: 0;
}

.security-table tbody tr:hover {
  background: #fafcfe;
}

/* Live scan */

.security-live-card {
  margin: 14px 0;
  padding: 14px 15px;
  border: 1px solid #c8e7d7;
  border-radius: 8px;
  background: #fafffc;
}

.security-live-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: #087f55;
  font-size: 14px;
}

.security-live-title > span {
  width: 19px;
  height: 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e2f6eb;
  font-size: 11px;
  font-weight: 800;
}

.security-live-card ul {
  margin: 0;
  padding-left: 21px;
}

.security-live-card li {
  margin: 5px 0;
  color: #3f4b5d;
  font-size: 13px;
}

/* Quick actions */

.security-quick-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.security-quick-card {
  min-height: 126px;
  padding: 13px 12px;
  border: 1px solid #dfe6ee;
  border-radius: 8px;
  background: #fff;
}

.security-quick-card h4 {
  font-size: 12px;
}

.security-quick-card p {
  font-size: 11px;
}

/* Findings */

.security-findings-section {
  margin-top: 28px;
}

.security-route-badge {
  display: inline-block;
  margin-bottom: 13px;
  padding: 7px 10px;
  border: 1px solid #b9e2d1;
  border-radius: 6px;
  background: #fbfffd;
  color: #087f55;
  font-size: 12px;
}

.security-two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
  margin-top: 14px;
}

.security-capability-card {
  padding: 15px 16px;
  border-radius: 8px;
}

.security-capability-card h3 {
  margin: 0 0 9px;
  font-size: 14px;
}

.security-capability-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.security-capability-card li {
  position: relative;
  margin: 8px 0;
  padding-left: 23px;
  color: #3f4b5d;
  font-size: 13px;
}

.security-capability-card li::before {
  position: absolute;
  left: 0;
  top: 1px;
  width: 17px;
  height: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 800;
}

.security-capability-card.allowed {
  border: 1px solid #c7e7d6;
  background: #fafffc;
}

.security-capability-card.allowed h3 {
  color: #087f55;
}

.security-capability-card.allowed li::before {
  content: "✓";
  background: #e2f6eb;
  color: #087f55;
}

.security-capability-card.restricted {
  border: 1px solid #f2caca;
  background: #fffafa;
}

.security-capability-card.restricted h3 {
  color: #dc2e2e;
}

.security-capability-card.restricted li::before {
  content: "×";
  background: #ffe8e8;
  color: #dc2e2e;
}

.security-warning {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 13px;
  padding: 11px 13px;
  border: 1px solid #f0d29d;
  border-radius: 8px;
  background: #fffaf0;
}

.security-warning > span {
  color: #f08a00;
  font-size: 17px;
}

.security-warning p {
  margin: 0;
  font-size: 12px;
}

/* Deploy gates */

.security-numbered-list {
  list-style: none;
  counter-reset: security-step;
  margin: 13px 0 16px;
  padding: 0;
}

.security-numbered-list li {
  position: relative;
  min-height: 30px;
  margin: 9px 0;
  padding-left: 35px;
  color: #3f4b5d;
  font-size: 13px;
}

.security-numbered-list li::before {
  counter-increment: security-step;
  content: counter(security-step);
  position: absolute;
  left: 0;
  top: -1px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #1a9b69;
  border-radius: 50%;
  color: #087f55;
  background: #f3fbf7;
  font-size: 11px;
  font-weight: 700;
}

.red-text {
  color: #ef3030 !important;
}

.green-text {
  color: #087f55 !important;
}

.security-info-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid #c8dcfa;
  border-radius: 8px;
  background: #f5f9ff;
}

.security-info-note > span {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #1679e9;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

.security-info-note p {
  margin: 0;
  font-size: 12px;
}

/* CVE */

.security-cve-section {
  padding-bottom: 15px;
}

.security-cve-section h2 {
  color: #087f55;
}

/* Responsive */

@media (max-width: 1000px) {
  .security-insights-page {
    padding: 25px 20px 50px;
  }

  .security-action-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .security-quick-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 700px) {
  .security-insights-page {
    padding: 20px 15px 40px;
  }

  .security-insights-page h1 {
    font-size: 26px;
  }

  .security-top-grid,
  .security-two-column {
    grid-template-columns: 1fr;
  }

  .security-action-grid {
    grid-template-columns: 1fr 1fr;
  }

  .security-quick-grid {
    grid-template-columns: 1fr 1fr;
  }

  .security-meta {
    flex-direction: column;
  }

  .security-meta span {
    width: 100%;
  }

  .security-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  .security-action-grid,
  .security-quick-grid,
  .security-two-column {
    grid-template-columns: 1fr;
  }
}



/* =========================================================
   Axio — Compliance, Risk, and Reports
   Scoped to .compliance-risk-reports
   ========================================================= */

.compliance-risk-reports {
  max-width: 1180px;
  margin: 0 auto;
  padding: 26px 28px 64px;
  color: #111827;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.62;
}

/* Breadcrumb */
.compliance-risk-reports .crr-breadcrumb {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 18px;
  color: #526075;
  font-size: 13px;
}

.compliance-risk-reports .crr-breadcrumb strong {
  color: #172033;
}

.compliance-risk-reports .crumb-separator {
  color: #a6afbd;
  font-size: 18px;
}

/* Header */
.compliance-risk-reports .crr-page-header {
  margin-bottom: 30px;
}

.compliance-risk-reports .crr-page-header h1 {
  margin: 0 0 8px;
  color: #111827;
  font-size: 31px;
  line-height: 1.2;
  font-weight: 750;
  letter-spacing: -0.4px;
}

.compliance-risk-reports .crr-page-header p {
  margin: 0;
  max-width: 920px;
  color: #344054;
  font-size: 15px;
}

/* Main sections */
.compliance-risk-reports .crr-section {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(330px, 0.9fr);
  gap: 28px;
  padding: 0 0 34px;
  margin-bottom: 30px;
  border-bottom: 1px solid #e5e9ef;
}

.compliance-risk-reports .crr-section:last-child {
  border-bottom: 0;
  margin-bottom: 0;
}

.compliance-risk-reports .crr-main-column {
  min-width: 0;
}

.compliance-risk-reports .crr-action-column {
  min-width: 0;
}

/* Section heading */
.compliance-risk-reports .crr-section-title {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 0 0 13px;
}

.compliance-risk-reports .crr-section-title h2 {
  margin: 0;
  padding: 0;
  border: 0;
  color: #111827;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 750;
}

.compliance-risk-reports .crr-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 43px;
  height: 43px;
  flex: 0 0 43px;
  border-radius: 10px;
  font-size: 27px;
  font-weight: 700;
}

.compliance-risk-reports .compliance-icon {
  color: #078653;
  background: #edf9f4;
  border: 1px solid #d6eee3;
}

.compliance-risk-reports .risk-icon {
  color: #7138e8;
  background: #f5efff;
  border: 1px solid #e8dcff;
}

.compliance-risk-reports .reports-icon {
  color: #f06b18;
  background: #fff5e9;
  border: 1px solid #ffe3c6;
}

.compliance-risk-reports .audit-icon {
  color: #008d9a;
  background: #edfafa;
  border: 1px solid #d0eeee;
}

/* Meta pills */
.compliance-risk-reports .crr-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 20px;
}

.compliance-risk-reports .crr-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 5px 13px;
  border: 1px solid #b9e4d3;
  border-radius: 7px;
  background: #fbfffd;
  color: #243247;
  font-size: 13px;
}

.compliance-risk-reports .crr-meta b {
  margin-left: 5px;
  color: #087f55;
}

.compliance-risk-reports p {
  margin: 0 0 20px;
  color: #344054;
  font-size: 14px;
}

.compliance-risk-reports strong {
  color: #172033;
}

.compliance-risk-reports a {
  color: #078653;
  font-weight: 650;
  text-decoration: none;
}

.compliance-risk-reports a:hover {
  text-decoration: underline;
}

/* Action cards */
.compliance-risk-reports .crr-action-card {
  padding: 19px 21px 20px;
  border: 1px solid;
  border-radius: 9px;
  background: #fff;
}

.compliance-risk-reports .green-card {
  border-color: #c5e7d8;
  background: linear-gradient(180deg, #fcfffd 0%, #fafffc 100%);
}

.compliance-risk-reports .purple-card {
  border-color: #e3d5fa;
  background: #fefcff;
}

.compliance-risk-reports .crr-action-card h3 {
  margin: 0 0 13px;
  color: #078653;
  font-size: 16px;
  font-weight: 750;
}

.compliance-risk-reports .purple-card h3 {
  color: #7138e8;
}

.compliance-risk-reports .check-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.compliance-risk-reports .check-list li {
  position: relative;
  margin: 0 0 14px;
  padding-left: 30px;
  color: #344054;
  font-size: 14px;
}

.compliance-risk-reports .check-list li:last-child {
  margin-bottom: 0;
}

.compliance-risk-reports .check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #e5f6ee;
  color: #078653;
  font-size: 12px;
  font-weight: 800;
}

.compliance-risk-reports .purple-check li::before {
  background: #f0eaff;
  color: #7138e8;
}

/* Callouts */
.compliance-risk-reports .crr-callout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 22px 0 0;
  padding: 14px 16px;
  border: 1px solid;
  border-radius: 8px;
}

.compliance-risk-reports .crr-callout p {
  margin: 0;
  color: #344054;
  font-size: 13px;
  line-height: 1.6;
}

.compliance-risk-reports .callout-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 800;
}

.compliance-risk-reports .green-callout {
  border-color: #bfe5d3;
  background: #f8fdfb;
}

.compliance-risk-reports .green-callout .callout-icon {
  background: #078653;
  color: #fff;
}

.compliance-risk-reports .purple-callout {
  border-color: #dfd0fa;
  background: #fbf9ff;
}

.compliance-risk-reports .purple-callout .callout-icon {
  background: #7138e8;
  color: #fff;
}

/* Personas */
.compliance-risk-reports .persona-block {
  margin-top: 19px;
}

.compliance-risk-reports .persona-block h4 {
  margin: 0 0 9px;
  color: #172033;
  font-size: 13px;
}

.compliance-risk-reports .persona-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.compliance-risk-reports .persona-tags span {
  padding: 3px 8px;
  border: 1px solid #dfd0fa;
  border-radius: 5px;
  background: #fbf9ff;
  color: #7138e8;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15px;
}

.compliance-risk-reports .persona-block p {
  margin: 7px 0 0;
  font-size: 12px;
}

/* Reports */
.compliance-risk-reports .reports-section {
  grid-template-columns: minmax(0, 0.95fr) minmax(470px, 1.2fr);
  row-gap: 22px;
}

.compliance-risk-reports .amber-callout {
  border-color: #f4d69f;
  background: #fffaf1;
}

.compliance-risk-reports .amber-callout .callout-icon {
  background: #fff0cc;
  color: #c97800;
}

.compliance-risk-reports .warning-callout {
  margin-top: 14px;
}

.compliance-risk-reports .reports-table-column {
  min-width: 0;
}

.compliance-risk-reports .download-heading {
  margin: 0 0 10px;
  color: #e45512;
  font-size: 16px;
  font-weight: 750;
}

.compliance-risk-reports .crr-table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid #dfe5ed;
  border-radius: 8px;
  background: #fff;
  table-layout: fixed;
}

.compliance-risk-reports .crr-table th {
  padding: 10px 12px;
  border-bottom: 1px solid #dfe5ed;
  background: #fafbfc;
  color: #172033;
  text-align: left;
  font-size: 12px;
  font-weight: 750;
}

.compliance-risk-reports .crr-table td {
  padding: 11px 12px;
  border-bottom: 1px solid #e8ecf1;
  color: #344054;
  font-size: 12px;
  vertical-align: top;
}

.compliance-risk-reports .crr-table tr:last-child td {
  border-bottom: 0;
}

.compliance-risk-reports .crr-table th:nth-child(1) {
  width: 25%;
}

.compliance-risk-reports .crr-table th:nth-child(2) {
  width: 43%;
}

.compliance-risk-reports .crr-table th:nth-child(3) {
  width: 32%;
}

.compliance-risk-reports .export-red {
  color: #e2342b !important;
  font-weight: 700;
}

.compliance-risk-reports .export-green {
  color: #078653 !important;
  font-weight: 700;
}

.compliance-risk-reports .export-blue {
  color: #1769d5 !important;
  font-weight: 700;
}

.compliance-risk-reports .crr-wide-callout {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 0;
  padding: 14px 16px;
  border: 1px solid #c7dcff;
  border-radius: 8px;
  background: #f7faff;
}

.compliance-risk-reports .crr-wide-callout .callout-icon {
  background: #2879e9;
  color: #fff;
}

.compliance-risk-reports .crr-wide-callout p {
  margin: 0;
  color: #344054;
  font-size: 13px;
}

/* Audit */
.compliance-risk-reports .audit-section {
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .8fr);
  align-items: center;
}

.compliance-risk-reports .audit-section .crr-section-title {
  margin-bottom: 14px;
}

.compliance-risk-reports .audit-section p {
  max-width: 660px;
  margin-bottom: 14px;
}

.compliance-risk-reports .audit-role-note {
  display: inline-block;
  padding: 7px 11px;
  border: 1px solid #b9e4e8;
  border-radius: 6px;
  background: #f6fcfc;
  color: #344054;
  font-size: 12px;
}

.compliance-risk-reports code {
  padding: 1px 5px;
  border: 1px solid #e1e6ed;
  border-radius: 4px;
  background: #f5f7fa;
  color: #354052;
  font-size: .92em;
}

.compliance-risk-reports .audit-webhook-card {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 92px;
  padding: 16px 18px;
  border: 1px solid #b9e4e8;
  border-radius: 8px;
  background: #fbfefe;
}

.compliance-risk-reports .webhook-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 9px;
  background: #eaf9fa;
  color: #008d9a;
  font-size: 27px;
}

.compliance-risk-reports .audit-webhook-card p {
  margin: 0;
  font-size: 13px;
}

/* Responsive */
@media (max-width: 1000px) {
  .compliance-risk-reports {
    padding: 24px 22px 50px;
  }

  .compliance-risk-reports .crr-section,
  .compliance-risk-reports .reports-section,
  .compliance-risk-reports .audit-section {
    grid-template-columns: 1fr;
  }

  .compliance-risk-reports .crr-action-card {
    max-width: none;
  }

  .compliance-risk-reports .crr-wide-callout {
    grid-column: auto;
  }
}

@media (max-width: 700px) {
  .compliance-risk-reports {
    padding: 20px 16px 42px;
    font-size: 14px;
  }

  .compliance-risk-reports .crr-page-header h1 {
    font-size: 27px;
  }

  .compliance-risk-reports .crr-section-title h2 {
    font-size: 20px;
  }

  .compliance-risk-reports .crr-meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .compliance-risk-reports .crr-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  .compliance-risk-reports .crr-table th,
  .compliance-risk-reports .crr-table td {
    min-width: 150px;
  }
}


/* =========================================================
   ADDITIONAL RESPONSIVE FIXES
   Only for layouts without responsive overrides
   ========================================================= */


/* ---------------------------------------------------------
   Platform as Code
   --------------------------------------------------------- */

@media (max-width: 768px) {

    .platform-bottom-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .platform-workflow .step-item {
        grid-template-columns: 34px minmax(0, 1fr);
        column-gap: 14px;
    }

}


/* ---------------------------------------------------------
   Catalog Workflow
   --------------------------------------------------------- */

@media (max-width: 768px) {

    .catalog-workflow .step-item {
        grid-template-columns: 34px minmax(0, 1fr);
        column-gap: 14px;
    }

}


/* ---------------------------------------------------------
   Resources Workflow
   --------------------------------------------------------- */

@media (max-width: 768px) {

    .resources-step-item {
        grid-template-columns: 32px minmax(0, 1fr);
        column-gap: 14px;
    }

}


/* ---------------------------------------------------------
   Synchronizations Workflow
   --------------------------------------------------------- */

@media (max-width: 768px) {

    .sync-step-item {
        grid-template-columns: 32px minmax(0, 1fr);
        column-gap: 14px;
    }

}


/* ---------------------------------------------------------
   History Help Items
   --------------------------------------------------------- */

@media (max-width: 768px) {

    .history-help-item {
        grid-template-columns: 48px minmax(0, 1fr);
        column-gap: 14px;
    }

    .history-help-icon {
        width: 42px;
        height: 42px;
        font-size: 20px;
    }

}


/* ---------------------------------------------------------
   Axio Variable Rows
   --------------------------------------------------------- */

@media (max-width: 600px) {

    .axio-variable-row {
        grid-template-columns:
            minmax(0, 1fr)
            16px
            minmax(0, 1fr)
            28px;
        gap: 5px;
    }

}


/* ---------------------------------------------------------
   Resource Information Cards
   --------------------------------------------------------- */

@media (max-width: 768px) {

    .resource-grid-info {
        grid-template-columns: 1fr;
        gap: 18px;
    }

}


/* ---------------------------------------------------------
   Small Mobile
   --------------------------------------------------------- */

@media (max-width: 480px) {

    .platform-bottom-grid {
        grid-template-columns: 1fr;
    }

    .platform-workflow .step-item,
    .catalog-workflow .step-item {
        grid-template-columns: 30px minmax(0, 1fr);
        column-gap: 12px;
    }

    .resources-step-item,
    .sync-step-item {
        grid-template-columns: 30px minmax(0, 1fr);
        column-gap: 12px;
    }

    .history-help-item {
        grid-template-columns: 42px minmax(0, 1fr);
        column-gap: 12px;
    }

    .history-help-icon {
        width: 38px;
        height: 38px;
        font-size: 18px;
    }

}


/* =========================================================
   AXIO — BUILT-IN WORKFLOW TEMPLATES
   Matches the supplied reference image
   ========================================================= */

.builtin-workflow-page {
  width: 100%;
  max-width: 1450px;
  margin: 0 auto;
  padding: 24px 24px 55px;
  color: #14213d;
  line-height: 1.55;
  font-family: inherit;
  box-sizing: border-box;
}

.builtin-workflow-page *,
.builtin-workflow-page *::before,
.builtin-workflow-page *::after {
  box-sizing: border-box;
}


/* =========================================================
   Typography
   ========================================================= */

.builtin-workflow-page h1,
.builtin-workflow-page h2,
.builtin-workflow-page h3,
.builtin-workflow-page p {
  margin-top: 0;
}

.builtin-workflow-page h1 {
  margin-bottom: 14px;
  color: #10203f;
  font-size: 36px;
  line-height: 1.15;
  font-weight: 750;
  letter-spacing: -0.5px;
}

.builtin-workflow-page h2 {
  margin-bottom: 18px;
  color: #0758d8;
  font-size: 21px;
  line-height: 1.25;
  font-weight: 750;
}

.builtin-workflow-page h3 {
  margin-bottom: 9px;
  font-size: 17px;
  line-height: 1.25;
  font-weight: 750;
}

.builtin-workflow-page p,
.builtin-workflow-page li {
  color: #253451;
  font-size: 14px;
}

.builtin-workflow-page strong {
  color: #12203d;
}


/* =========================================================
   Hero
   ========================================================= */

.builtin-hero {
  display: grid;
  grid-template-columns: minmax(350px, 0.82fr) minmax(650px, 1.55fr);
  gap: 30px;
  align-items: start;
  margin-bottom: 26px;
}

.builtin-hero-copy {
  padding-top: 7px;
}

.section-eyebrow {
  margin-bottom: 8px;
  color: #1769e0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
}

.builtin-hero-copy > p {
  max-width: 560px;
  margin-bottom: 0;
  color: #172b4d;
  font-size: 17px;
  line-height: 1.65;
}


/* =========================================================
   Common Cards
   ========================================================= */

.pipeline-card,
.template-kinds-card,
.builtin-table-card,
.selection-card {
  border: 1px solid #d8e3f1;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(30, 64, 110, 0.035);
}


/* =========================================================
   Pipeline Card
   ========================================================= */

.pipeline-card {
  min-height: 225px;
  padding: 17px 20px 15px;
}

.pipeline-card h2 {
  margin-bottom: 19px;
  color: #0758d8;
  font-size: 20px;
  text-align: center;
}

.pipeline-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  overflow-x: visible;
  padding: 5px 0 2px;
}

.pipeline-arrow {
  flex: 0 0 auto;
  color: #173b70;
  font-size: 25px;
  line-height: 1;
  font-weight: 600;
}

.pipeline-step {
  width: 76px;
  min-width: 76px;
  min-height: 96px;
  padding: 8px 5px 9px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;

  border: 1px solid;
  border-radius: 10px;
  background: #ffffff;
  text-align: center;
}

.pipeline-step strong {
  color: #14213d;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
}

.pipeline-icon {
  width: 39px;
  height: 39px;

  display: grid;
  place-items: center;

  border-radius: 9px;

  font-size: 21px;
  line-height: 1;
  font-weight: 800;
}


/* Pipeline Colors */

.pipeline-step.purple {
  border-color: #a88cff;
}

.pipeline-step.purple .pipeline-icon {
  background: #f0eaff;
  color: #7041df;
}

.pipeline-step.blue {
  border-color: #84b4ff;
}

.pipeline-step.blue .pipeline-icon {
  background: #e8f2ff;
  color: #1769e0;
}

.pipeline-step.cyan {
  border-color: #79b9ff;
}

.pipeline-step.cyan .pipeline-icon {
  background: #e9f7ff;
  color: #087fc0;
}

.pipeline-step.teal {
  border-color: #7bd6cf;
}

.pipeline-step.teal .pipeline-icon {
  background: #e8faf8;
  color: #008f88;
}

.pipeline-step.orange {
  border-color: #ffb35c;
}

.pipeline-step.orange .pipeline-icon {
  background: #fff1df;
  color: #ef8500;
}

.pipeline-step.green {
  border-color: #72d89a;
}

.pipeline-step.green .pipeline-icon {
  background: #e9faef;
  color: #079347;
}

.pipeline-step.light-blue {
  border-color: #91b8ff;
}

.pipeline-step.light-blue .pipeline-icon {
  background: #edf4ff;
  color: #3778e8;
}


/* Parallel indicator */

.parallel-label {
  width: 185px;
  margin: 1px auto 0;

  color: #1769e0;
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
}

.parallel-label span {
  display: block;
  height: 12px;
  margin: -1px 0 1px;

  border-left: 1px dashed #86aef2;
  border-right: 1px dashed #86aef2;
  border-bottom: 1px dashed #86aef2;
}


/* =========================================================
   Main Content Grid
   ========================================================= */

.builtin-main-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.78fr) minmax(650px, 1.72fr);
  gap: 22px;
  align-items: stretch;
}

.template-kinds-card,
.builtin-table-card {
  padding: 18px;
}


/* =========================================================
   Card Heading
   ========================================================= */

.card-heading-icon {
  display: inline-grid;
  place-items: center;

  width: 31px;
  height: 31px;
  margin-right: 8px;

  border-radius: 8px;
  background: #eaf2ff;
  color: #1769e0;

  vertical-align: middle;
  font-size: 18px;
  line-height: 1;
}


/* =========================================================
   Template Types
   ========================================================= */

.template-kind {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 5px;
}

.kind-icon {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;

  display: grid;
  place-items: center;

  border-radius: 12px;
  background: #e9f2ff;
  color: #2675e8;

  font-size: 28px;
  line-height: 1;
}

.org-kind .kind-icon {
  background: #eaf8ee;
  color: #159447;
}

.platform-kind h3 {
  color: #1769e0;
}

.org-kind h3 {
  color: #159447;
}

.template-kind ul {
  margin: 0;
  padding-left: 18px;
}

.template-kind li {
  margin: 5px 0;
  color: #253451;
  font-size: 13px;
  line-height: 1.5;
}

.kind-divider {
  height: 1px;
  margin: 10px 0;
  background: #e4eaf3;
}


/* =========================================================
   Published Note
   ========================================================= */

.published-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;

  margin: 15px -1px -1px;
  padding: 13px;

  border: 1px solid #cfe0fa;
  border-radius: 9px;

  background: #f2f7ff;
}

.published-note > span {
  flex: 0 0 auto;
  color: #1769e0;
  font-size: 19px;
  line-height: 1.2;
}

.published-note p {
  margin: 0;
  color: #253451;
  font-size: 13px;
  line-height: 1.55;
}


/* =========================================================
   Built-in Templates Table
   ========================================================= */

.template-table-wrap {
  width: 100%;
  overflow: hidden;

  border: 1px solid #d9e2ee;
  border-radius: 9px;
}

.builtin-template-table {
  width: 100%;
  margin: 0 !important;

  border: 0 !important;
  border-collapse: collapse !important;
  border-spacing: 0;

  box-shadow: none !important;
  background: #ffffff;
}

.builtin-template-table th {
  padding: 11px 14px;

  border-right: 1px solid #dce4ef;
  border-bottom: 1px solid #d6e0ed;

  background: #f7faff;
  color: #1769e0;

  font-size: 13px;
  line-height: 1.35;
  font-weight: 750;
  text-align: left;
  vertical-align: middle;
}

.builtin-template-table td {
  padding: 11px 14px;

  border-right: 1px solid #e1e7ef;
  border-bottom: 1px solid #e1e7ef;

  color: #253451;

  font-size: 12.5px;
  line-height: 1.45;
  vertical-align: middle;
}

.builtin-template-table tr:last-child td {
  border-bottom: 0;
}

.builtin-template-table th:last-child,
.builtin-template-table td:last-child {
  border-right: 0;
}

.builtin-template-table tbody tr:hover {
  background: #fbfdff;
}


/* Template IDs */

.template-id {
  display: inline-block;
  color: #14213d;
  font-size: 12.5px;
  line-height: 1.35;
  white-space: nowrap;
}

.template-id.terraform,
.template-id.opentofu {
  color: #6540d8;
}

.template-id.pulumi {
  color: #1769e0;
}

.template-id.cloudformation {
  color: #16a05d;
}

.template-id.crossplane {
  color: #0a9d91;
}

.template-id.bicep {
  color: #1769e0;
}

.template-id.destroy {
  color: #e53935;
}

.template-id.drift {
  color: #08a39a;
}


/* =========================================================
   Operation-specific Section
   ========================================================= */

.operation-heading {
  padding: 10px 14px;

  border-top: 1px solid #dfe6f0;
  border-bottom: 1px solid #dfe6f0;

  background: #f8f3ff;
  color: #6340d6;

  font-size: 13px;
  line-height: 1.4;
  font-weight: 750;
}

.operation-table td {
  padding-top: 12px;
  padding-bottom: 12px;
}


/* =========================================================
   Template Selection
   ========================================================= */

.selection-card {
  margin-top: 22px;
  padding: 17px 20px 18px;

  border-color: #d3e5d9;
  background: #fbfefc;
}

.selection-card h2 {
  margin-bottom: 14px;
  color: #139149;
  font-size: 20px;
}

.selection-icon {
  display: inline-grid;
  place-items: center;

  width: 32px;
  height: 32px;
  margin-right: 8px;

  border-radius: 50%;
  background: #e7f7ec;
  color: #139149;

  vertical-align: middle;
  font-size: 18px;
}

.selection-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}

.selection-item {
  display: flex;
  gap: 9px;
  align-items: flex-start;
}

.check-icon {
  width: 20px;
  height: 20px;
  min-width: 20px;

  display: grid;
  place-items: center;

  margin-top: 1px;

  border-radius: 50%;
  background: #e5f7eb;
  color: #159447;

  font-size: 12px;
  line-height: 1;
  font-weight: 800;
}

.selection-item p {
  margin: 0;
  color: #253451;
  font-size: 12.5px;
  line-height: 1.5;
}

.selection-item code {
  padding: 1px 4px;

  border: 0;
  border-radius: 4px;

  background: #eef7f0;
  color: #16874a;

  font-size: 0.9em;
}


/* =========================================================
   LARGE TABLET
   Important:
   Do NOT collapse at 1100px.
   Just-the-Docs sidebar reduces available content width.
   ========================================================= */

@media (max-width: 1150px) {

  .builtin-workflow-page {
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .builtin-hero {
    grid-template-columns: minmax(290px, 0.8fr) minmax(520px, 1.4fr);
    gap: 20px;
  }

  .builtin-main-grid {
    grid-template-columns: minmax(260px, 0.75fr) minmax(520px, 1.6fr);
    gap: 18px;
  }

  .pipeline-flow {
    gap: 6px;
  }

  .pipeline-arrow {
    font-size: 21px;
  }

  .pipeline-step {
    width: 68px;
    min-width: 68px;
  }

  .selection-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

  .builtin-hero {
    grid-template-columns: 1fr;
  }

  .builtin-main-grid {
    grid-template-columns: 1fr;
  }

  .pipeline-card {
    min-height: auto;
  }

  .pipeline-flow {
    justify-content: center;
    overflow-x: auto;
    padding-bottom: 5px;
  }

  .selection-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .builtin-template-table {
    min-width: 760px;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

  .builtin-workflow-page {
    padding: 18px 12px 38px;
  }

  .builtin-workflow-page h1 {
    font-size: 27px;
    line-height: 1.18;
  }

  .builtin-workflow-page h2 {
    font-size: 19px;
  }

  .builtin-hero-copy > p {
    font-size: 15px;
    line-height: 1.6;
  }

  .pipeline-card {
    padding: 15px 12px;
  }

  .pipeline-card h2 {
    margin-bottom: 16px;
    font-size: 18px;
  }

  .pipeline-flow {
    justify-content: flex-start;
  }

  .pipeline-step {
    width: 68px;
    min-width: 68px;
    min-height: 90px;
  }

  .pipeline-icon {
    width: 35px;
    height: 35px;
    font-size: 19px;
  }

  .pipeline-arrow {
    font-size: 20px;
  }

  .builtin-main-grid {
    gap: 15px;
  }

  .template-kinds-card,
  .builtin-table-card {
    padding: 14px;
  }

  .selection-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .selection-card {
    padding: 15px;
  }

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


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 425px) {

  .builtin-workflow-page {
    padding-left: 10px;
    padding-right: 10px;
  }

  .builtin-workflow-page h1 {
    font-size: 24px;
  }

  .builtin-workflow-page h2 {
    font-size: 18px;
  }

  .builtin-hero-copy > p {
    font-size: 14px;
  }

  .pipeline-flow {
    justify-content: flex-start;
  }

  .pipeline-step {
    width: 62px;
    min-width: 62px;
    min-height: 88px;
    padding: 7px 4px;
  }

  .pipeline-icon {
    width: 34px;
    height: 34px;
    font-size: 18px;
  }

  .pipeline-step strong {
    font-size: 10px;
  }

  .pipeline-arrow {
    font-size: 19px;
  }

  .template-kind {
    gap: 10px;
  }

  .kind-icon {
    width: 50px;
    height: 50px;
    flex-basis: 50px;
    font-size: 24px;
  }

  .template-kind li {
    font-size: 12.5px;
  }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 375px) {

  .builtin-workflow-page {
    padding-left: 8px;
    padding-right: 8px;
  }

  .builtin-workflow-page h1 {
    font-size: 22px;
  }

  .pipeline-card {
    padding: 13px 9px;
  }

  .pipeline-step {
    width: 58px;
    min-width: 58px;
  }

  .pipeline-arrow {
    font-size: 17px;
  }

  .template-kinds-card,
  .builtin-table-card {
    padding: 12px;
  }

  .selection-card {
    padding: 13px;
  }
}


/* =========================================================
   320px
   ========================================================= */

@media (max-width: 320px) {

  .builtin-workflow-page h1 {
    font-size: 21px;
  }

  .builtin-workflow-page h2 {
    font-size: 17px;
  }

  .pipeline-step {
    width: 54px;
    min-width: 54px;
    min-height: 84px;
  }

  .pipeline-icon {
    width: 31px;
    height: 31px;
    font-size: 16px;
  }

  .pipeline-step strong {
    font-size: 9px;
  }

  .pipeline-arrow {
    font-size: 15px;
  }
}


/* =========================================================
   AI Assistant Documentation Page
   ========================================================= */

.ai-assistant-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 34px 70px;
  color: #171923;
  font-family: inherit;
}

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */

.ai-hero h1 {
  margin: 0 0 12px;
  font-size: 38px;
  line-height: 1.15;
  font-weight: 750;
  letter-spacing: -1px;
}

.ai-hero p {
  max-width: 780px;
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.65;
  color: #303440;
}

/* ---------------------------------------------------------
   Headings
   --------------------------------------------------------- */

.ai-assistant-page h2 {
  margin: 28px 0 8px;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 750;
  color: #171923;
}

.ai-assistant-page h3 {
  margin: 0;
  font-size: 15px;
  line-height: 1.35;
}

.ai-section-description {
  margin: 0 0 14px;
  color: #656b78;
  font-size: 14px;
}

/* ---------------------------------------------------------
   Information Banner
   --------------------------------------------------------- */

.ai-info-banner {
  display: flex;
  align-items: center;
  gap: 10px;

  margin: 14px 0 26px;
  padding: 11px 14px;

  border: 1px solid #bcd1ff;
  border-radius: 6px;

  background: #f5f8ff;
  color: #334155;

  font-size: 13px;
  line-height: 1.5;
}

.ai-info-banner a {
  color: #4c42d8;
  text-decoration: none;
}

.ai-info-banner a:hover {
  text-decoration: underline;
}

.ai-banner-icon {
  color: #2563eb;
  font-size: 17px;
}

/* ---------------------------------------------------------
   What It Does - Feature Cards
   --------------------------------------------------------- */

.ai-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;

  margin-top: 16px;
}

.ai-feature-card {
  display: flex;
  gap: 14px;

  min-height: 92px;
  padding: 18px;

  border: 1px solid #dfe3eb;
  border-radius: 7px;

  background: #ffffff;
}

.ai-feature-card h3 {
  margin-bottom: 7px;
}

.ai-feature-card p {
  margin: 0;

  color: #4f5663;
  font-size: 13px;
  line-height: 1.65;
}

.ai-feature-icon {
  flex: 0 0 28px;

  padding-top: 2px;

  font-size: 24px;
  line-height: 1;
}

.ai-feature-icon.purple {
  color: #6d4aff;
}

.ai-feature-icon.green {
  color: #08a85b;
}

.ai-feature-icon.blue {
  color: #146cff;
}

/* ---------------------------------------------------------
   Assistant Modes Table
   --------------------------------------------------------- */

.ai-mode-table {
  overflow: hidden;

  margin-top: 14px;

  border: 1px solid #dfe3eb;
  border-radius: 6px;

  background: #ffffff;
}

.ai-mode-row {
  display: grid;
  grid-template-columns: 1.1fr 0.65fr 0.7fr 2fr;
  align-items: center;

  min-height: 42px;

  border-bottom: 1px solid #e5e8ee;

  font-size: 13px;
}

.ai-mode-row > div {
  padding: 9px 14px;
}

.ai-mode-header {
  background: #f7f8fa;
  font-weight: 700;
}

.ai-mode-row:last-of-type {
  border-bottom: 0;
}

.ai-mode-row .check {
  color: #08a85b;
  font-weight: 700;
}

.ai-mode-note {
  display: flex;
  align-items: center;
  gap: 8px;

  padding: 9px 14px;

  border-top: 1px solid #dfe3eb;

  background: #f5f7ff;
  color: #4a5362;

  font-size: 12px;
}

.ai-mode-note span {
  color: #2563eb;
  font-size: 16px;
}

/* ---------------------------------------------------------
   Inline Code
   --------------------------------------------------------- */

.ai-assistant-page code {
  padding: 2px 5px;

  border-radius: 4px;

  background: #f2efff;
  color: #6951dc;

  font-size: 0.92em;
}

/* ---------------------------------------------------------
   Chat Experience
   --------------------------------------------------------- */

.ai-check-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;

  margin-top: 14px;
}

.ai-check-column {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ai-check-column > div {
  display: flex;
  gap: 10px;

  color: #08a85b;

  font-size: 14px;
  line-height: 1.45;
}

.ai-check-column span {
  color: #2f3542;
}

/* ---------------------------------------------------------
   Context Engine
   --------------------------------------------------------- */

.ai-endpoint {
  display: inline-block;

  margin: 10px 0 12px;
  padding: 5px 9px;

  border-radius: 5px;

  background: #f0ecff;
  color: #6749dc;

  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
}

.ai-context-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px 28px;

  margin: 18px 0;

  color: #313846;
  font-size: 13px;
}

.ai-context-grid > div {
  display: flex;
  align-items: center;
  gap: 9px;
}

.context-icon {
  display: inline-flex;
  justify-content: center;

  width: 24px;

  font-size: 20px;
}

.context-icon.purple {
  color: #6947ef;
}

.context-icon.green {
  color: #08a85b;
}

.context-icon.blue {
  color: #146cff;
}

/* ---------------------------------------------------------
   Warning
   --------------------------------------------------------- */

.ai-warning {
  display: flex;
  align-items: center;
  gap: 9px;

  margin: 16px 0 28px;
  padding: 10px 13px;

  border: 1px solid #f0d58a;
  border-radius: 6px;

  background: #fffaf0;
  color: #6c5424;

  font-size: 12px;
}

.ai-warning > span:first-child {
  color: #c88400;
  font-size: 18px;
}

/* ---------------------------------------------------------
   Tool Calling Flow
   --------------------------------------------------------- */

.ai-flow {
  display: flex;
  align-items: flex-start;
  gap: 18px;

  margin: 22px 0 16px;
}

.ai-flow-step {
  flex: 1;
  min-width: 0;
}

.flow-number {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 31px;
  height: 31px;
  margin-bottom: 9px;

  border: 1px solid currentColor;
  border-radius: 50%;

  font-size: 13px;
  font-weight: 700;
}

.purple-bg {
  color: #6846ed;
  background: #faf8ff;
}

.blue-bg {
  color: #146cff;
  background: #f6f9ff;
}

.orange-bg {
  color: #cc7a00;
  background: #fffaf1;
}

.green-bg {
  color: #079958;
  background: #f3fff9;
}

.ai-flow-step h3 {
  margin-bottom: 5px;
}

.ai-flow-step h3 small {
  font-size: 11px;
  font-weight: 500;
}

.ai-flow-step p {
  margin: 0;

  color: #646b78;

  font-size: 12px;
  line-height: 1.5;
}

.ai-flow-arrow {
  padding-top: 5px;

  color: #202633;
  font-size: 25px;
}

.ai-tool-note {
  margin: 12px 0 28px;

  color: #343b48;

  font-size: 13px;
}

/* ---------------------------------------------------------
   Bottom Banner
   --------------------------------------------------------- */

.ai-bottom-banner {
  margin-top: 20px;
  margin-bottom: 0;
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 900px) {
  .ai-feature-grid,
  .ai-check-grid,
  .ai-context-grid {
    grid-template-columns: 1fr;
  }

  .ai-flow {
    flex-direction: column;
    gap: 12px;
  }

  .ai-flow-arrow {
    align-self: center;
    transform: rotate(90deg);
  }

  .ai-mode-table {
    overflow-x: auto;
  }

  .ai-mode-row {
    min-width: 760px;
  }
}

@media (max-width: 600px) {
  .ai-assistant-page {
    padding: 22px 18px 50px;
  }

  .ai-hero h1 {
    font-size: 31px;
  }
}




/* =========================================================
   AI Prompt Library
   ========================================================= */

.ai-prompt-library-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 34px 70px;
  color: #171923;
  font-family: inherit;
}

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */

.prompt-hero h1 {
  margin: 0 0 12px;
  font-size: 38px;
  line-height: 1.15;
  font-weight: 750;
  letter-spacing: -1px;
}

.prompt-hero p {
  max-width: 800px;
  margin: 0 0 18px;
  color: #303440;
  font-size: 16px;
  line-height: 1.65;
}

/* ---------------------------------------------------------
   Headings
   --------------------------------------------------------- */

.ai-prompt-library-page h2 {
  margin: 28px 0 10px;
  color: #171923;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 750;
}

.prompt-section-description {
  margin: 0 0 14px;
  color: #5f6674;
  font-size: 14px;
}

/* ---------------------------------------------------------
   Info Banner
   --------------------------------------------------------- */

.prompt-info-banner,
.prompt-link-banner,
.prompt-source-banner {
  display: flex;
  align-items: center;
  gap: 10px;

  border: 1px solid #cbd8ff;
  border-radius: 6px;

  background: #f7f9ff;
  color: #30394a;

  font-size: 13px;
  line-height: 1.55;
}

.prompt-info-banner {
  margin: 14px 0 26px;
  padding: 11px 14px;
}

.prompt-link-banner {
  margin-top: 20px;
  padding: 10px 14px;
}

.prompt-source-banner {
  margin-top: 20px;
  padding: 11px 14px;
}

.prompt-info-icon,
.prompt-link-icon {
  flex: 0 0 auto;
  color: #2563eb;
  font-size: 18px;
}

.prompt-link-icon {
  color: #6846ed;
}

.prompt-info-banner a {
  color: #5d43d6;
  text-decoration: none;
}

.prompt-info-banner a:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------
   Inline Code
   --------------------------------------------------------- */

.ai-prompt-library-page code {
  padding: 2px 5px;
  border-radius: 4px;
  background: #f0ecff;
  color: #6846d8;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.9em;
}

/* ---------------------------------------------------------
   How To Use
   --------------------------------------------------------- */

.prompt-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 16px;
}

.prompt-step {
  position: relative;
  min-height: 155px;
  padding: 18px 16px 18px;
  border: 1px solid #e0e4ec;
  border-radius: 7px;
  background: #ffffff;
}

.prompt-step-number {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 26px;
  height: 26px;
  margin-bottom: 12px;

  border-radius: 50%;

  background: #6846ed;
  color: #ffffff;

  font-size: 12px;
  font-weight: 700;
}

.prompt-step-icon {
  position: absolute;
  top: 18px;
  right: 18px;

  color: #6846ed;
  font-size: 27px;
}

.prompt-step h3 {
  max-width: 150px;
  margin: 0 0 8px;
  color: #1b2130;
  font-size: 14px;
  line-height: 1.35;
}

.prompt-step p {
  margin: 0;
  color: #454c59;
  font-size: 13px;
  line-height: 1.65;
}

/* ---------------------------------------------------------
   Categories
   --------------------------------------------------------- */

.prompt-category-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;

  margin-top: 16px;
}

.prompt-category-card {
  display: flex;
  align-items: center;
  gap: 11px;

  min-height: 62px;
  padding: 11px 13px;

  border: 1px solid #e0e4ec;
  border-radius: 6px;

  background: #ffffff;
}

.prompt-category-card strong {
  display: block;
  margin-bottom: 3px;

  color: #202534;
  font-size: 12px;
  font-weight: 700;
}

.prompt-category-card small {
  display: block;
  color: #4f5663;
  font-size: 12px;
}

.category-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 30px;
  min-width: 30px;

  font-size: 25px;
  font-weight: 700;
}

.category-icon.terraform {
  color: #7547d9;
}

.category-icon.opentofu {
  color: #d49a00;
}

.category-icon.pulumi {
  color: #ef4f9d;
}

.category-icon.crossplane {
  color: #08a6a0;
}

.category-icon.aws {
  color: #e88900;
  font-size: 14px;
}

.category-icon.azure {
  color: #0878db;
}

.category-icon.gcp {
  color: #4285f4;
}

.category-icon.security {
  color: #e33e4b;
}

.category-icon.governance {
  color: #16a05d;
}

/* ---------------------------------------------------------
   Approved Status
   --------------------------------------------------------- */

.approved {
  color: #079958;
  font-weight: 700;
}

/* ---------------------------------------------------------
   Prompt Table
   --------------------------------------------------------- */

.prompt-table-wrapper {
  overflow-x: auto;

  border: 1px solid #dfe3eb;
  border-radius: 7px;

  background: #ffffff;
}

.prompt-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;

  font-size: 12px;
}

.prompt-table th {
  padding: 10px 12px;

  border-bottom: 1px solid #dfe3eb;

  background: #f7f8fa;

  color: #343b49;

  text-align: left;
  font-weight: 700;
}

.prompt-table th:nth-child(1) {
  width: 27%;
}

.prompt-table th:nth-child(2) {
  width: 27%;
}

.prompt-table th:nth-child(3) {
  width: 46%;
}

.prompt-table td {
  padding: 7px 12px;

  border-bottom: 1px solid #e5e8ee;

  color: #252b38;

  line-height: 1.45;
  vertical-align: middle;
}

.prompt-table tr:last-child td {
  border-bottom: 0;
}

.prompt-table td:first-child {
  color: #6846d8;
  font-weight: 500;
}

.prompt-table td code {
  background: #f3f0ff;
  color: #6846d8;
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 1000px) {
  .prompt-category-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .prompt-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .ai-prompt-library-page {
    padding: 22px 18px 50px;
  }

  .prompt-hero h1 {
    font-size: 31px;
  }

  .prompt-steps,
  .prompt-category-grid {
    grid-template-columns: 1fr;
  }

  .prompt-table {
    min-width: 760px;
  }
}


/* =========================================================
   AI Model Platform
   ========================================================= */

.ai-model-platform-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 34px 70px;
  color: #171923;
  font-family: inherit;
}

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */

.model-hero h1 {
  margin: 0 0 10px;
  font-size: 38px;
  line-height: 1.15;
  font-weight: 750;
  letter-spacing: -1px;
}

.model-hero p {
  max-width: 850px;
  margin: 0 0 18px;
  color: #303440;
  font-size: 16px;
  line-height: 1.6;
}

.ai-model-platform-page h2 {
  margin: 25px 0 9px;
  color: #171923;
  font-size: 21px;
  line-height: 1.3;
  font-weight: 750;
}

.model-section-description {
  margin: 0 0 12px;
  color: #626977;
  font-size: 13px;
}

/* ---------------------------------------------------------
   Banners
   --------------------------------------------------------- */

.model-info-banner,
.model-warning-banner,
.model-success-banner,
.playground-banner,
.routing-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;

  border-radius: 6px;

  font-size: 12px;
  line-height: 1.55;
}

.model-info-banner {
  margin: 13px 0 20px;
  padding: 10px 13px;

  border: 1px solid #c7d7ff;
  background: #f6f9ff;
  color: #30394a;
}

.model-warning-banner {
  margin: 17px 0 10px;
  padding: 9px 13px;

  border: 1px solid #f2d58d;
  background: #fffaf0;
  color: #694f20;
}

.model-success-banner {
  margin: 9px 0 19px;
  padding: 9px 13px;

  border: 1px solid #bfe8d7;
  background: #f3fff9;
  color: #315b49;
}

.playground-banner {
  margin: 17px 0 20px;
  padding: 9px 13px;

  border: 1px solid #d6ccff;
  background: #faf8ff;
  color: #37304f;
}

.model-info-icon {
  color: #2563eb;
  font-size: 17px;
}

.model-warning-banner > span:first-child {
  color: #d08400;
  font-size: 17px;
}

.model-success-banner > span:first-child {
  color: #0a9a5b;
  font-size: 17px;
}

.playground-banner > span:first-child {
  color: #6846ed;
  font-size: 17px;
}

/* ---------------------------------------------------------
   Inline Code
   --------------------------------------------------------- */

.ai-model-platform-page code {
  padding: 2px 5px;
  border-radius: 4px;

  background: #f0ecff;
  color: #6846d8;

  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.9em;
}

/* ---------------------------------------------------------
   Architecture
   --------------------------------------------------------- */

.architecture-flow {
  margin-top: 13px;
}

.architecture-top,
.architecture-service {
  width: 52%;
  margin: 0 auto;

  padding: 10px 16px;

  border-radius: 6px;

  text-align: center;
  font-size: 12px;
  font-weight: 600;
}

.architecture-top {
  border: 1px solid #d8cdfd;
  background: #f8f5ff;
  color: #6140d4;
}

.architecture-service {
  border: 1px solid #bfe6dc;
  background: #f0fbf7;
  color: #144b43;
  font-size: 13px;
}

.architecture-icon {
  margin-right: 8px;
  color: #6846ed;
  font-size: 17px;
}

.architecture-arrow {
  height: 25px;

  color: #252b38;

  text-align: center;
  font-size: 21px;
  line-height: 25px;
}

.architecture-branch {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;

  position: relative;
  margin-top: 8px;
}

.architecture-branch::before {
  content: "";

  position: absolute;
  top: -9px;
  left: 10%;
  right: 10%;

  height: 1px;

  background: #3d4552;
}

.architecture-card {
  position: relative;

  min-height: 98px;
  padding: 14px 12px;

  border: 1px solid #dfe3eb;
  border-radius: 6px;

  background: #ffffff;
}

.architecture-card::before {
  content: "";

  position: absolute;
  top: -9px;
  left: 50%;

  width: 1px;
  height: 9px;

  background: #3d4552;
}

.architecture-card-icon {
  margin-bottom: 7px;

  color: #6846ed;
  font-size: 20px;
}

.security-card .architecture-card-icon {
  color: #079958;
}

.architecture-card h3 {
  margin: 0 0 8px;
  color: #1e2430;
  font-size: 12px;
  line-height: 1.35;
}

.architecture-card p {
  margin: 0;
  color: #5c6471;
  font-size: 11px;
  line-height: 1.5;
}

/* ---------------------------------------------------------
   Platform Tabs
   --------------------------------------------------------- */

.platform-tabs {
  display: grid;
  grid-template-columns: repeat(9, 1fr);

  margin-top: 14px;

  border: 1px solid #dfe3eb;
  border-radius: 6px;

  overflow: hidden;

  background: #ffffff;
}

.platform-tab {
  min-height: 112px;
  padding: 11px 7px;

  border-right: 1px solid #e5e8ee;

  text-align: center;
}

.platform-tab:last-child {
  border-right: 0;
}

.platform-tab.active {
  background: #fbfaff;
}

.platform-tab-icon {
  margin-bottom: 5px;

  color: #6846ed;

  font-size: 23px;
}

.platform-tab strong {
  display: block;

  color: #202534;

  font-size: 11px;
  line-height: 1.3;
}

.platform-tab.active strong {
  color: #6846ed;
}

.platform-tab p {
  margin: 7px 0 0;

  color: #5d6471;

  font-size: 9px;
  line-height: 1.45;
}

/* ---------------------------------------------------------
   Provider Catalog
   --------------------------------------------------------- */

.provider-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;

  margin-top: 13px;
}

.provider-card {
  min-height: 92px;
  padding: 13px;

  border: 1px solid #dfe3eb;
  border-radius: 6px;

  background: #ffffff;
}

.provider-card-title {
  display: flex;
  align-items: center;
  gap: 8px;

  margin-bottom: 8px;
}

.provider-card-title span {
  color: #079958;
  font-size: 20px;
}

.provider-card-title h3 {
  margin: 0;

  font-size: 14px;
}

.provider-card p {
  margin: 0;

  color: #4f5663;

  font-size: 11px;
  line-height: 1.55;
}

.provider-card.self-hosted .provider-card-title span,
.provider-card.self-hosted .provider-card-title h3 {
  color: #1767d7;
}

.provider-card.enterprise .provider-card-title span,
.provider-card.enterprise .provider-card-title h3 {
  color: #6846ed;
}

.provider-note {
  margin-top: 12px;
}

/* ---------------------------------------------------------
   Category / Modality Pills
   --------------------------------------------------------- */

.model-meta-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;

  margin: 11px 0 13px;

  font-size: 10px;
}

.model-meta-row > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.pill,
.status {
  display: inline-block;

  padding: 2px 6px;

  border-radius: 10px;

  font-size: 9px;
  font-weight: 700;
}

.pill.green {
  background: #eaf9f1;
  color: #079958;
}

.pill.blue {
  background: #edf5ff;
  color: #146cff;
}

.pill.purple {
  background: #f1edff;
  color: #6846ed;
}

.pill.cyan {
  background: #eafafa;
  color: #058f99;
}

.pill.red {
  background: #fff0f1;
  color: #d33b4a;
}

/* ---------------------------------------------------------
   Main Content Grid
   --------------------------------------------------------- */

.model-content-grid {
  display: grid;
  grid-template-columns: 1.35fr 0.9fr;
  gap: 20px;
  align-items: start;
}

.model-main-column h2 {
  margin-top: 0;
}

/* ---------------------------------------------------------
   Feature Table
   --------------------------------------------------------- */

.feature-table-wrapper {
  overflow: hidden;

  border: 1px solid #dfe3eb;
  border-radius: 6px;

  background: #ffffff;
}

.feature-table {
  width: 100%;

  border-collapse: collapse;

  font-size: 10px;
}

.feature-table th {
  padding: 9px 10px;

  border-bottom: 1px solid #dfe3eb;

  background: #f7f8fa;

  color: #343b49;

  text-align: left;
  font-weight: 700;
}

.feature-table td {
  padding: 8px 10px;

  border-bottom: 1px solid #e7e9ee;

  color: #323945;

  line-height: 1.4;
}

.feature-table tr:last-child td {
  border-bottom: 0;
}

.feature-table td:first-child {
  color: #303846;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 9px;
}

/* ---------------------------------------------------------
   Routing Note
   --------------------------------------------------------- */

.routing-note {
  margin-top: 14px;
  padding: 10px 12px;

  border: 1px solid #f0d99c;
  background: #fffaf0;
  color: #694f20;
}

/* ---------------------------------------------------------
   Security / Governance Panels
   --------------------------------------------------------- */

.security-panel,
.governance-panel {
  padding: 13px;

  border: 1px solid #dfe3eb;
  border-radius: 6px;

  background: #ffffff;
}

.security-panel {
  margin-top: 0;
}

.governance-panel {
  margin-top: 12px;
}

.panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.panel-title > span {
  color: #2563eb;
  font-size: 19px;
}

.governance-panel .panel-title > span {
  color: #079958;
}

.panel-title h2 {
  margin: 0;
  font-size: 14px;
}

.panel-source {
  margin: 8px 0 10px;

  color: #5d6471;

  font-size: 9px;
  line-height: 1.4;
}

.security-list {
  margin: 0;
  padding: 0;

  list-style: none;
}

.security-list li {
  position: relative;

  margin: 7px 0;
  padding-left: 15px;

  color: #414854;

  font-size: 10px;
  line-height: 1.45;
}

.security-list li::before {
  content: "✓";

  position: absolute;
  left: 0;

  color: #079958;
  font-weight: 700;
}

.security-alert {
  margin-top: 10px;
  padding: 9px;

  border: 1px solid #ffc8c8;
  border-radius: 5px;

  background: #fff5f5;

  color: #6d3030;

  font-size: 9px;
  line-height: 1.55;
}

.security-alert strong {
  color: #e03c3c;
}

.security-alert span {
  margin-right: 3px;

  color: #6846ed;
  font-weight: 700;
}

.governance-panel p {
  margin: 9px 0;

  color: #4d5561;

  font-size: 9px;
  line-height: 1.65;
}

/* ---------------------------------------------------------
   Status Pills
   --------------------------------------------------------- */

.status.draft {
  background: #f1edff;
  color: #6846ed;
}

.status.pending {
  background: #f3edff;
  color: #7b3fe4;
}

.status.approved {
  background: #e9f9f0;
  color: #079958;
}

.status.rejected {
  background: #fff0f1;
  color: #d13a48;
}

.status.archived {
  background: #f1f2f4;
  color: #656b75;
}

.status.allow {
  background: #e9f9f0;
  color: #079958;
}

.status.deny {
  background: #fff0f1;
  color: #d13a48;
}

.status.approval {
  background: #fff6df;
  color: #b56b00;
}

.status.redact {
  background: #edf5ff;
  color: #146cff;
}

.status.reroute {
  background: #f1edff;
  color: #6846ed;
}

.status.session {
  background: #e9f9f0;
  color: #079958;
}

.status.project {
  background: #fff6df;
  color: #b56b00;
}

.status.organization {
  background: #fff0f1;
  color: #d13a48;
}

.status.knowledge {
  background: #f1edff;
  color: #6846ed;
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 1050px) {
  .platform-tabs {
    grid-template-columns: repeat(5, 1fr);
  }

  .platform-tab {
    border-bottom: 1px solid #e5e8ee;
  }

  .architecture-branch {
    grid-template-columns: repeat(3, 1fr);
  }

  .model-content-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 800px) {
  .ai-model-platform-page {
    padding: 22px 18px 50px;
  }

  .architecture-top,
  .architecture-service {
    width: 85%;
  }

  .provider-grid {
    grid-template-columns: 1fr;
  }

  .model-meta-row {
    flex-direction: column;
  }
}

@media (max-width: 600px) {
  .model-hero h1 {
    font-size: 31px;
  }

  .architecture-branch {
    grid-template-columns: 1fr;
  }

  .architecture-branch::before,
  .architecture-card::before {
    display: none;
  }

  .platform-tabs {
    grid-template-columns: repeat(2, 1fr);
  }

  .platform-tab {
    border-right: 1px solid #e5e8ee;
  }

  .feature-table-wrapper {
    overflow-x: auto;
  }

  .feature-table {
    min-width: 620px;
  }
}


* =========================================================
   AI MCP Servers documentation page
   Designed for Jekyll / Just the Docs
   ========================================================= */

.mcp-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 34px 70px;
  color: #171923;
  font-family: inherit;
  box-sizing: border-box;
}

.mcp-page *,
.mcp-page *::before,
.mcp-page *::after {
  box-sizing: border-box;
}

.mcp-page h1,
.mcp-page h2,
.mcp-page h3,
.mcp-page p {
  margin-top: 0;
}

.mcp-title {
  margin: 0 0 10px !important;
  font-size: 38px !important;
  line-height: 1.15 !important;
  font-weight: 750 !important;
  letter-spacing: -1px;
  color: #171923;
}

.mcp-intro {
  max-width: 850px;
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.65;
  color: #303440;
}

.mcp-page h2 {
  margin: 22px 0 10px !important;
  font-size: 21px !important;
  line-height: 1.3;
  font-weight: 750 !important;
  color: #171923;
}

.mcp-description,
.mcp-section-description {
  margin-bottom: 12px;
  color: #4f5563;
  font-size: 14px;
  line-height: 1.55;
}

.mcp-page code {
  padding: 2px 5px;
  border-radius: 4px;
  background: #f5f0ff;
  color: #7a31d8;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .9em;
  white-space: normal;
  overflow-wrap: anywhere;
}

.mcp-info-banner,
.mcp-warning-banner,
.mcp-success-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 11px 14px;
  margin: 14px 0 18px;
  border: 1px solid;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.55;
}

.mcp-info-banner {
  border-color: #bfd4ff;
  background: #f6f9ff;
  color: #34415c;
}

.mcp-warning-banner {
  border-color: #f1d28e;
  background: #fffaf0;
  color: #634b25;
}

.mcp-success-banner {
  border-color: #bde5d5;
  background: #f2fbf7;
  color: #315647;
  margin-top: 14px;
}

.mcp-banner-icon,
.mcp-success-icon {
  flex: 0 0 auto;
  font-size: 17px;
  line-height: 1.2;
  font-weight: 700;
}

.mcp-numbered-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0 14px;
}

.mcp-numbered-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.mcp-numbered-item p {
  margin: 1px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: #303440;
}

.mcp-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  background: #6335dc;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.mcp-step-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 14px 0 16px;
}

.mcp-step-card {
  min-height: 125px;
  padding: 16px 17px;
  border: 1px solid #dfe3eb;
  border-radius: 7px;
  background: #fff;
}

.mcp-step-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 11px;
}

.mcp-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #6335dc;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.mcp-step-icon {
  color: #6032e0;
  font-size: 27px;
  line-height: 1;
  font-weight: 400;
}

.mcp-step-card p {
  margin: 0;
  color: #343946;
  font-size: 13px;
  line-height: 1.7;
}

.mcp-server-table-wrapper {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #dfe3eb;
  border-radius: 7px;
  background: #fff;
}

.mcp-server-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  table-layout: fixed;
  margin: 0 !important;
  font-size: 12px;
}

.mcp-server-table th {
  padding: 9px 10px;
  border-bottom: 1px solid #dfe3eb;
  background: #f7f8fb;
  color: #252b3a;
  font-weight: 700;
  text-align: left;
}

.mcp-server-table td {
  padding: 7px 10px;
  border-bottom: 1px solid #e7e9ef;
  color: #333846;
  vertical-align: middle;
  line-height: 1.4;
}

.mcp-server-table tr:last-child td {
  border-bottom: 0;
}

.mcp-server-table td:nth-child(1),
.mcp-server-table td:nth-child(4) {
  font-weight: 600;
  color: #252a37;
}

.mcp-server-table code {
  font-size: 10.5px;
  background: transparent;
  padding: 0;
  color: #444a58;
}

.mcp-classic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid #dfe3eb;
  border-radius: 7px;
  overflow: hidden;
  background: #fff;
  margin-top: 12px;
}

.mcp-classic-item {
  display: grid;
  grid-template-columns: 28px 95px 1fr;
  align-items: center;
  gap: 8px;
  min-height: 55px;
  padding: 10px 14px;
  border-bottom: 1px solid #e5e7ed;
  font-size: 12px;
}

.mcp-classic-item:nth-child(odd) {
  border-right: 1px solid #e5e7ed;
}

.mcp-classic-item:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.mcp-classic-item strong {
  color: #252a37;
  font-size: 13px;
}

.mcp-classic-item span:last-child {
  color: #4d5360;
  line-height: 1.45;
}

.classic-icon {
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
}

.classic-icon.blue { color: #2869ef; }
.classic-icon.purple { color: #6335dc; }
.classic-icon.green { color: #10a875; }
.classic-icon.red { color: #ef4444; }
.classic-icon.orange { color: #f08a24; }

.mcp-resources {
  margin-top: 18px;
}

.mcp-resources p {
  margin: 0 0 9px;
  color: #303642;
  font-size: 12px;
  line-height: 1.7;
}

.mcp-resources p:last-child {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .mcp-page {
    padding: 24px 22px 55px;
  }

  .mcp-step-grid {
    grid-template-columns: 1fr;
  }

  .mcp-classic-grid {
    grid-template-columns: 1fr;
  }

  .mcp-classic-item:nth-child(odd) {
    border-right: 0;
  }

  .mcp-classic-item:not(:last-child) {
    border-bottom: 1px solid #e5e7ed;
  }
}

@media (max-width: 600px) {
  .mcp-page {
    padding: 20px 16px 45px;
  }

  .mcp-title {
    font-size: 30px !important;
  }

  .mcp-page h2 {
    font-size: 19px !important;
  }

  .mcp-intro,
  .mcp-description,
  .mcp-section-description {
    font-size: 13px;
  }

  .mcp-classic-item {
    grid-template-columns: 25px 85px 1fr;
    padding: 10px;
  }
}


/* =========================================================
   Axio — My Profile
   ========================================================= */

.profile-page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 30px 34px 70px;
  color: #10152f;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.65;
  box-sizing: border-box;
}

.profile-page *,
.profile-page *::before,
.profile-page *::after {
  box-sizing: border-box;
}

/* =========================================================
   Typography
   ========================================================= */

.profile-page h1 {
  margin: 0;
  font-size: 36px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -1.2px;
  color: #10152f;
}

.profile-page h2 {
  margin: 25px 0 5px;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  color: #10152f;
}

.profile-page h3 {
  margin: 5px 0;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 700;
  color: #10152f;
}

.profile-subtitle {
  margin: 5px 0 20px;
  font-size: 13px;
  line-height: 1.6;
  color: #30364d;
}

/* =========================================================
   Information Banner
   ========================================================= */

.profile-banner {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 42px;
  margin-top: 12px;
  padding: 10px 14px;

  border: 1px solid #bdd4ff;
  border-radius: 6px;

  background: #f7faff;
  color: #30364d;

  font-size: 12px;
  line-height: 1.5;
}

.profile-banner span:first-child {
  flex-shrink: 0;
  color: #146cff;
  font-size: 17px;
  line-height: 1;
}

.profile-banner code {
  padding: 0;
  background: transparent;
  color: #b20a82;
  font-size: 11px;
}

/* =========================================================
   Feature Cards
   ========================================================= */

.profile-features {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.profile-features > div {
  min-height: 175px;
  padding: 16px 14px;

  border: 1px solid #e0e4ed;
  border-radius: 7px;

  background: #ffffff;

  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.profile-features > div:hover {
  border-color: #d2d7e3;
  box-shadow: 0 3px 12px rgba(16, 21, 47, 0.05);
  transform: translateY(-1px);
}

.profile-features b {
  display: flex;
  align-items: center;
  height: 42px;

  color: #6031ed;
  font-size: 30px;
  line-height: 1;
  font-weight: 700;
}

.profile-features p {
  margin: 0;
  color: #30364d;
  font-size: 12px;
  line-height: 1.75;
}

/* =========================================================
   Route / Path Box
   ========================================================= */

.profile-route {
  display: flex;
  align-items: center;
  gap: 6px;

  width: 100%;
  min-height: 42px;
  margin-top: 20px;
  padding: 10px 14px;

  border: 1px solid #cbe8dd;
  border-radius: 6px;

  background: #f6fcf9;
  color: #20263d;

  font-size: 12px;
  line-height: 1.5;
}

.profile-route code {
  padding: 0;
  background: transparent;
  color: #b20a82;
  font-size: 11px;
}

/* =========================================================
   Tables
   ========================================================= */

.profile-table {
  width: 100%;
  margin-top: 10px;

  overflow: hidden;

  border: 1px solid #e0e4ed;
  border-radius: 7px;

  background: #ffffff;
}

.profile-head,
.profile-table > div:not(.profile-head) {
  display: grid;
  grid-template-columns: 31% 69%;
  align-items: center;
}

.profile-head {
  min-height: 42px;
  padding: 0 16px;

  background: #fafbfe;

  border-bottom: 1px solid #e0e4ed;

  color: #555c70;
  font-size: 12px;
  font-weight: 700;
}

.profile-table > div:not(.profile-head) {
  min-height: 50px;

  border-bottom: 1px solid #e7eaf1;

  color: #30364d;
  font-size: 12px;
}

.profile-table > div:last-child {
  border-bottom: 0;
}

.profile-table > div > * {
  min-width: 0;
  padding: 9px 16px;
}

.profile-table code {
  padding: 0;
  background: transparent;
  color: #b20a82;
  font-size: 11px;
}

/* =========================================================
   Profile Panels
   ========================================================= */

.profile-panel {
  width: 100%;
  margin-top: 10px;

  overflow: hidden;

  border: 1px solid #e0e4ed;
  border-radius: 7px;

  background: #ffffff;
}

.panel-title {
  display: flex;
  align-items: center;
  gap: 10px;

  min-height: 48px;
  padding: 0 15px;

  border-bottom: 1px solid #e8eaf0;

  color: #10152f;
  font-size: 13px;
  font-weight: 700;
}

.panel-title > span:last-child {
  margin-left: auto;
}

.panel-title em {
  padding: 2px 8px;

  border-radius: 5px;

  background: #e8f8f0;
  color: #087d57;

  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.4;
}

.panel-title em.purple {
  background: #f0eaff;
  color: #6133e7;
}

.compact .panel-title {
  border-bottom: 0;
}

/* =========================================================
   Profile Form
   ========================================================= */

.profile-form {
  display: grid;
  grid-template-columns: 1.45fr 1fr 1fr;
  gap: 18px;

  padding: 16px;
}

.profile-form label {
  display: block;

  color: #30364d;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}

.profile-form input {
  display: block;

  width: 100%;
  height: 34px;
  margin-top: 5px;
  padding: 6px 10px;

  border: 1px solid #d9dee8;
  border-radius: 5px;

  outline: none;
  background: #ffffff;
  color: #20263d;

  font: inherit;
  font-size: 11px;

  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.profile-form input:focus {
  border-color: #6b43ed;
  box-shadow: 0 0 0 2px rgba(94, 43, 234, 0.08);
}

.profile-form small {
  display: block;
  margin-top: 4px;

  color: #72798c;
  font-size: 9px;
  font-weight: 400;
  line-height: 1.4;
}

/* =========================================================
   Avatar
   ========================================================= */

.avatar-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.avatar-row i {
  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 42px;
  width: 42px;
  height: 42px;

  border-radius: 50%;

  background: #d9c9ff;
  color: #ffffff;

  font-size: 14px;
  font-style: normal;
  font-weight: 700;
}

/* =========================================================
   Buttons / Actions
   ========================================================= */

.actions,
.session-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;

  padding: 0 16px 14px;
}

.actions button,
.session-actions button {
  min-height: 30px;
  padding: 6px 14px;

  border: 1px solid #d8deea;
  border-radius: 5px;

  background: #ffffff;
  color: #30364d;

  font: inherit;
  font-size: 11px;
  font-weight: 700;

  cursor: pointer;
}

.actions button:hover,
.session-actions button:hover {
  background: #f8f9fc;
}

.actions .primary {
  border-color: #5e2bea;
  background: #5e2bea;
  color: #ffffff;
}

.actions .primary:hover {
  background: #5122d1;
  border-color: #5122d1;
}

/* =========================================================
   Sessions
   ========================================================= */

.sessions {
  width: calc(100% - 32px);
  margin: 0 16px;

  overflow: hidden;

  border: 1px solid #e0e4ed;
  border-radius: 6px;

  background: #ffffff;
}

.sessions > div {
  display: grid;
  grid-template-columns:
    minmax(170px, 1.35fr)
    minmax(140px, 1.1fr)
    minmax(90px, 0.8fr)
    minmax(75px, 0.65fr)
    minmax(65px, 0.55fr);

  gap: 10px;
  align-items: center;

  min-height: 40px;
  padding: 8px 10px;

  border-top: 1px solid #e8eaf0;

  color: #30364d;
  font-size: 10px;
  line-height: 1.4;
}

.sessions .session-head {
  border-top: 0;
  background: #f7f8fb;

  color: #555c70;
  font-weight: 700;
}

.sessions small {
  display: block;
  margin-top: 2px;

  color: #7a8091;
  font-size: 9px;
  line-height: 1.35;
}

/* =========================================================
   Session Status
   ========================================================= */

.profile-status-active {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: fit-content;
  padding: 2px 7px;

  border-radius: 4px;

  background: #ecfaf3;
  color: #078457;

  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.4;
}

/* =========================================================
   Revoke Button
   ========================================================= */

.revoke {
  border: 1px solid #ff7a7a !important;

  background: #ffffff !important;
  color: #e32828 !important;
}

.revoke:hover {
  background: #fff5f5 !important;
}

/* Push revoke button to left in action row */
.session-actions {
  justify-content: flex-end;
}

.session-actions .revoke {
  margin-right: auto;
}

/* =========================================================
   Responsive — Tablet
   ========================================================= */

@media (max-width: 1050px) {
  .profile-page {
    max-width: 100%;
  }

  .profile-features {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .profile-form {
    grid-template-columns: 1fr 1fr;
  }

  .profile-form > :first-child {
    grid-column: 1 / -1;
  }
}

/* =========================================================
   Responsive — Mobile
   ========================================================= */

@media (max-width: 700px) {
  .profile-page {
    padding: 20px 15px 50px;
  }

  .profile-page h1 {
    font-size: 28px;
    letter-spacing: -0.8px;
  }

  .profile-page h2 {
    font-size: 18px;
  }

  .profile-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-features > div {
    min-height: 155px;
  }

  .profile-head {
    display: none;
  }

  .profile-table > div:not(.profile-head) {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 0;
    padding: 0;
  }

  .profile-table > div:not(.profile-head) > * {
    padding: 7px 12px;
  }

  .profile-table > div:not(.profile-head) > *:first-child {
    padding-bottom: 2px;
    color: #555c70;
    font-weight: 700;
  }

  .profile-form {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .profile-form > :first-child {
    grid-column: auto;
  }

  .avatar-row {
    align-items: flex-start;
  }

  .actions,
  .session-actions {
    flex-wrap: wrap;
  }

  .sessions {
    width: calc(100% - 20px);
    margin: 0 10px;

    overflow-x: auto;
  }

  .sessions > div {
    min-width: 720px;
  }
}

/* =========================================================
   Small Mobile
   ========================================================= */

@media (max-width: 480px) {
  .profile-features {
    grid-template-columns: 1fr;
  }

  .profile-features > div {
    min-height: auto;
  }

  .profile-banner,
  .profile-route {
    align-items: flex-start;
  }

  .actions,
  .session-actions {
    justify-content: stretch;
  }

  .actions button,
  .session-actions button {
    flex: 1;
  }

  .session-actions .revoke {
    margin-right: 0;
  }
}


/* Administration — Tenant */

.tenant-page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 34px 70px;
  color: #111a35;
  font-family: inherit;
  box-sizing: border-box;
}

.tenant-page * {
  box-sizing: border-box;
}

.tenant-hero h1 {
  margin: 0;
  font-size: 36px;
  line-height: 1.15;
  font-weight: 750;
  letter-spacing: -1px;
  color: #111a35;
}

.tenant-hero p {
  margin: 10px 0 22px;
  font-size: 15px;
  line-height: 1.6;
  color: #303a52;
}

.tenant-info-banner,
.tenant-signin-note {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #c9dcff;
  border-radius: 7px;
  background: #f6f9ff;
  color: #273653;
  padding: 12px 15px;
  font-size: 13px;
  line-height: 1.55;
}

.tenant-info-icon,
.tenant-signin-note > span:first-child {
  color: #146cff;
  font-size: 18px;
  flex: 0 0 auto;
}

.tenant-page code {
  color: #7a25e8;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .92em;
}

.tenant-section {
  margin-top: 27px;
}

.tenant-section h2 {
  margin: 0 0 13px;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 750;
  color: #111a35;
}

.tenant-identity-card {
  border: 1px solid #dfe5ef;
  border-radius: 9px;
  background: #fff;
  padding: 16px;
}

.tenant-identity-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.tenant-org-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.tenant-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #7545df;
  color: white;
  font-size: 17px;
  font-weight: 700;
}

.tenant-org-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  font-size: 18px;
  font-weight: 750;
}

.tenant-org-brand p {
  margin: 4px 0 3px;
  color: #364158;
  font-size: 13px;
}

.tenant-org-brand small {
  color: #68728a;
  font-size: 11px;
}

.tenant-status {
  padding: 4px 8px;
  border-radius: 5px;
  background: #e9faf2;
  color: #09985c;
  font-size: 10px;
  font-weight: 700;
}

.tenant-outline-button,
.tenant-select,
.tenant-copy-field button {
  border: 1px solid #d8dfeb;
  background: #fff;
  color: #1c2740;
  border-radius: 6px;
  cursor: pointer;
}

.tenant-outline-button {
  padding: 8px 13px;
  font-size: 12px;
}

.tenant-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 22px;
}

.tenant-field label,
.tenant-description label {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 700;
  color: #162039;
}

.tenant-copy-field {
  display: flex;
  align-items: stretch;
  border: 1px solid #d9dfeb;
  border-radius: 6px;
  overflow: hidden;
  height: 34px;
}

.tenant-copy-field code {
  display: flex;
  align-items: center;
  flex: 1;
  padding: 0 10px;
  color: #26324b;
  background: #fff;
}

.tenant-copy-field button {
  border: 0;
  border-left: 1px solid #d9dfeb;
  border-radius: 0;
  padding: 0 12px;
  font-size: 11px;
}

.tenant-field small {
  display: block;
  margin-top: 5px;
  color: #717b91;
  font-size: 10px;
}

.tenant-description {
  margin-top: 18px;
}

.tenant-description p {
  margin: 0;
  color: #1d2942;
  font-size: 13px;
}

.tenant-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.tenant-kpi-card {
  min-height: 128px;
  padding: 14px;
  border: 1px solid #dfe5ef;
  border-radius: 8px;
  background: #fff;
}

.tenant-kpi-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  margin-bottom: 7px;
  border-radius: 6px;
  font-size: 19px;
}

.tenant-kpi-icon.purple { background: #f1eaff; color: #7040ed; }
.tenant-kpi-icon.green { background: #e9faf3; color: #08a366; }
.tenant-kpi-icon.blue { background: #edf4ff; color: #2374e8; }
.tenant-kpi-icon.amber { background: #fff6e5; color: #e69a13; }

.tenant-kpi-card > span {
  display: block;
  color: #253049;
  font-size: 12px;
}

.tenant-kpi-card > strong {
  display: block;
  margin-top: 8px;
  font-size: 23px;
  line-height: 1;
}

.tenant-kpi-card > small {
  display: block;
  margin-top: 9px;
  font-size: 10px;
}

.tenant-positive {
  color: #08a366;
}

.tenant-positive em {
  color: #6e778b;
  font-style: normal;
  margin-left: 3px;
}

.tenant-analytics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.tenant-chart-card {
  min-height: 205px;
  padding: 16px;
  border: 1px solid #dfe5ef;
  border-radius: 8px;
  background: #fff;
}

.tenant-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
}

.tenant-select {
  padding: 6px 9px;
  font-size: 10px;
}

.tenant-line-chart {
  display: flex;
  margin-top: 16px;
  height: 140px;
}

.chart-y-labels {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 36px;
  padding: 0 0 21px;
  color: #6d778c;
  font-size: 9px;
}

.chart-area {
  position: relative;
  flex: 1;
  padding-bottom: 22px;
}

.chart-gridline {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid #edf0f5;
}

.chart-gridline.g1 { top: 0; }
.chart-gridline.g2 { top: 33%; }
.chart-gridline.g3 { top: 66%; }
.chart-gridline.g4 { top: 100%; }

.chart-area svg {
  position: absolute;
  inset: 0 0 22px;
  width: 100%;
  height: calc(100% - 22px);
  overflow: visible;
}

.chart-fill {
  fill: rgba(119, 70, 230, .10);
}

.chart-line {
  fill: none;
  stroke: #7040ed;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.chart-x-labels {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  color: #6d778c;
  font-size: 9px;
}

.tenant-donut-content {
  display: flex;
  align-items: center;
  justify-content: space-around;
  min-height: 155px;
}

.tenant-donut {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(
    #18b879 0 66.7%,
    #397de7 66.7% 85.7%,
    #f4b12d 85.7% 95.2%,
    #b9bfca 95.2% 100%
  );
}

.tenant-donut::before {
  content: "";
  position: absolute;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #fff;
}

.tenant-donut > div {
  position: relative;
  z-index: 1;
  text-align: center;
}

.tenant-donut strong {
  display: block;
  font-size: 18px;
}

.tenant-donut span {
  color: #737d90;
  font-size: 9px;
}

.tenant-legend {
  display: grid;
  gap: 10px;
  font-size: 10px;
  color: #263149;
}

.tenant-legend div {
  display: grid;
  grid-template-columns: 9px 1fr auto;
  gap: 7px;
  align-items: center;
  min-width: 145px;
}

.tenant-legend b {
  font-weight: 500;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.dot.active { background: #18b879; }
.dot.planning { background: #397de7; }
.dot.hold { background: #f4b12d; }
.dot.archived { background: #b9bfca; }

.tenant-links-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.tenant-link-card {
  display: grid;
  grid-template-columns: 30px 1fr 15px;
  align-items: start;
  gap: 10px;
  min-height: 76px;
  padding: 12px;
  border: 1px solid #dfe5ef;
  border-radius: 7px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.tenant-link-card:hover {
  border-color: #b9a5f6;
  box-shadow: 0 4px 14px rgba(45, 34, 95, .07);
  transform: translateY(-1px);
}

.link-icon {
  color: #7040ed;
  font-size: 20px;
  text-align: center;
}

.tenant-link-card b {
  display: block;
  color: #3e25bd;
  font-size: 12px;
}

.tenant-link-card small {
  display: block;
  margin-top: 4px;
  color: #657087;
  font-size: 10px;
  line-height: 1.4;
}

.tenant-link-card > strong {
  color: #6b7385;
  font-size: 14px;
}

.tenant-warning {
  margin-top: 15px;
  padding: 11px 14px;
  border: 1px solid #f3d99a;
  border-radius: 7px;
  background: #fff9ed;
  color: #67471c;
  font-size: 11px;
  line-height: 1.55;
}

.tenant-warning strong {
  color: #b06b00;
}

.tenant-warning ul {
  margin: 5px 0 0 17px;
  padding: 0;
}

.tenant-warning li {
  margin: 2px 0;
}

.tenant-signin-note {
  margin-top: 11px;
}

@media (max-width: 1000px) {
  .tenant-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tenant-links-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 760px) {
  .tenant-page {
    padding: 22px 18px 50px;
  }

  .tenant-hero h1 {
    font-size: 28px;
  }

  .tenant-fields,
  .tenant-analytics-grid,
  .tenant-links-grid {
    grid-template-columns: 1fr;
  }

  .tenant-identity-top {
    flex-direction: column;
  }

  .tenant-outline-button {
    width: 100%;
  }

  .tenant-kpi-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 500px) {
  .tenant-kpi-grid {
    grid-template-columns: 1fr;
  }

  .tenant-info-banner {
    align-items: flex-start;
  }

  .tenant-org-brand {
    align-items: flex-start;
  }

  .tenant-donut-content {
    flex-direction: column;
    gap: 18px;
  }
}


/* Administration — Users documentation page */

.admin-users-page {
  max-width: 1220px;
  margin: 0 auto;
  padding: 34px 34px 70px;
  color: #111936;
  font-family: inherit;
}

.admin-users-page h1 {
  margin: 0 0 8px;
  font-size: 39px;
  line-height: 1.15;
  font-weight: 750;
  letter-spacing: -1.2px;
}

.admin-users-subtitle {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.55;
  color: #30384d;
}

.admin-users-info {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 50px;
  margin-bottom: 20px;
  padding: 0 17px;
  border: 1px solid #c8dcff;
  border-radius: 7px;
  background: #f7faff;
  color: #202943;
  font-size: 13px;
  line-height: 1.55;
}

.admin-users-info-icon {
  flex: 0 0 auto;
  color: #1769ff;
  font-size: 18px;
}

.admin-users-info code,
.admin-users-note code {
  color: #8b22f5;
  background: transparent;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .92em;
}

.admin-users-info b {
  margin: 0 10px;
  color: #687085;
}

.admin-users-tabs {
  display: flex;
  width: fit-content;
  margin-bottom: -1px;
  position: relative;
  z-index: 2;
}

.admin-users-tab {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 132px;
  padding: 14px 20px;
  border: 1px solid #e1e5ef;
  background: #fbfcff;
  color: #5c6680;
  font-size: 14px;
  font-weight: 650;
}

.admin-users-tab:first-child {
  border-radius: 7px 0 0 0;
}

.admin-users-tab:last-child {
  border-radius: 0 7px 0 0;
}

.admin-users-tab.active {
  color: #6031ee;
  background: #fff;
  border-bottom-color: #fff;
  box-shadow: inset 0 -2px 0 #6332ef;
}

.admin-users-panel {
  padding: 18px 17px 12px;
  border: 1px solid #e1e5ef;
  border-radius: 0 8px 8px 8px;
  background: #fff;
}

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

.admin-users-toolbar p {
  margin: 0;
  font-size: 13px;
  color: #30384d;
}

.admin-users-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.admin-users-search {
  width: 220px;
  height: 37px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid #dce2ed;
  border-radius: 6px;
  color: #8b93a5;
  font-size: 13px;
}

.admin-users-search span:first-child {
  font-size: 21px;
  color: #647089;
  line-height: 1;
}

.admin-users-filter,
.admin-users-invite {
  height: 37px;
  padding: 0 17px;
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: default;
}

.admin-users-filter {
  border: 1px solid #dce2ed;
  background: #fff;
  color: #1c2540;
}

.admin-users-invite {
  border: 1px solid #6332ef;
  background: #6332ef;
  color: #fff;
  box-shadow: 0 3px 8px rgba(99, 50, 239, .18);
}

.admin-users-table-wrap {
  overflow: hidden;
  border: 1px solid #e2e6ef;
  border-radius: 7px;
}

.admin-users-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12.5px;
}

.admin-users-table th {
  padding: 13px 13px;
  background: #fafbfe;
  color: #161d35;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  border-bottom: 1px solid #e5e8ef;
}

.admin-users-table td {
  height: 50px;
  padding: 7px 13px;
  color: #202840;
  border-bottom: 1px solid #edf0f5;
  vertical-align: middle;
}

.admin-users-table tbody tr:last-child td {
  border-bottom: 0;
}

.admin-user-name {
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}

.admin-avatar {
  width: 27px;
  height: 27px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
}

.admin-avatar.purple {
  background: #cdb7ff;
  color: #fff;
}

.admin-avatar.blue {
  background: #6d9df7;
  color: #fff;
}

.admin-avatar.green {
  background: #56c49a;
  color: #fff;
}

.admin-you {
  padding: 2px 7px;
  border-radius: 4px;
  background: #e7f8ef;
  color: #13a865;
  font-size: 9px;
  font-weight: 700;
}

.admin-role {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 5px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 10px;
  font-weight: 700;
}

.admin-role.owner {
  color: #6535ed;
  background: #f0e9ff;
}

.admin-role.admin {
  color: #286cf4;
  background: #e8f0ff;
}

.admin-role.member {
  color: #0ca267;
  background: #e6f8f0;
}

.admin-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #169e62;
}

.admin-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #18b66f;
}

.admin-action {
  margin-right: 16px;
  color: #0e1730;
  font-size: 19px;
}

.admin-action:last-child {
  margin-right: 0;
  font-size: 18px;
}

.admin-users-help {
  color: #a0a8b9;
}

.admin-users-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 1px 0;
  color: #48516a;
  font-size: 12px;
}

.admin-users-pagination > div {
  display: flex;
  gap: 8px;
}

.admin-users-pagination button {
  height: 31px;
  padding: 0 11px;
  border: 1px solid #e1e5ef;
  border-radius: 5px;
  background: #fff;
  color: #667087;
  font: inherit;
}

.admin-users-pagination button.current {
  color: #6332ef;
  border-color: #7652f2;
  background: #faf8ff;
}

.admin-users-pagination button:disabled {
  opacity: .45;
}

.admin-quick-actions {
  margin-top: 16px;
  padding: 15px 16px 17px;
  border: 1px solid #e4dfff;
  border-radius: 8px;
  background: linear-gradient(100deg, #fbf9ff, #fff);
}

.admin-quick-actions h2 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
}

.admin-lightning {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-right: 7px;
  border-radius: 50%;
  background: #eadfff;
  color: #6332ef;
  font-size: 19px;
}

.admin-quick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

.admin-quick-card {
  min-height: 83px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #edf0f5;
  border-radius: 7px;
  background: #fff;
}

.admin-quick-icon,
.admin-about-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 43px;
  height: 43px;
  border-radius: 9px;
  font-size: 23px;
}

.purple-bg {
  color: #6332ef;
  background: #f2edff;
}

.blue-bg {
  color: #2c70f4;
  background: #edf4ff;
}

.green-bg {
  color: #11a467;
  background: #eaf9f2;
}

.orange-bg {
  color: #f09a1b;
  background: #fff5e4;
}

.admin-quick-card div {
  flex: 1;
}

.admin-quick-card strong {
  color: #5630df;
  font-size: 13px;
}

.admin-quick-card p {
  margin: 4px 0 0;
  color: #4b556d;
  font-size: 11px;
  line-height: 1.5;
}

.admin-quick-card .arrow {
  color: #6b7488;
  font-size: 20px;
}

.admin-bottom-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 16px;
  margin-top: 16px;
}

.admin-note {
  padding: 16px;
  border-radius: 8px;
}

.admin-note.membership {
  border: 1px solid #d8eee4;
  background: #f8fffb;
}

.admin-note.about {
  border: 1px solid #f2dfb9;
  background: #fffaf1;
}

.admin-note h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 13px;
  font-size: 14px;
}

.admin-note.membership h2 > span {
  color: #08a86a;
}

.admin-note.about h2 > span {
  color: #f2a027;
}

.admin-note ul {
  margin: 0 0 13px;
  padding-left: 22px;
}

.admin-note li {
  margin: 8px 0;
  color: #273049;
  font-size: 12px;
  line-height: 1.45;
}

.admin-note li::marker {
  color: #17b474;
}

.admin-note-callout {
  display: flex;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid #ccebdd;
  border-radius: 7px;
  background: #effbf5;
  color: #2b3b4b;
  font-size: 11px;
  line-height: 1.55;
}

.admin-note-callout > span:first-child {
  color: #0fa66b;
  font-size: 15px;
}

.admin-note-callout code {
  color: #6b32e8;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.admin-about-row {
  display: flex;
  align-items: center;
  gap: 13px;
}

.admin-about-row p {
  margin: 0;
  color: #253047;
  font-size: 11.5px;
  line-height: 1.55;
}

.admin-about-row strong {
  color: #18213a;
}

.admin-about-icon {
  width: 43px;
  height: 43px;
  font-size: 21px;
}

.admin-about-divider {
  height: 1px;
  margin: 13px 0;
  background: #f0e5d0;
}

@media (max-width: 1000px) {
  .admin-users-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-users-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .admin-users-search {
    flex: 1;
  }

  .admin-quick-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .admin-bottom-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .admin-users-page {
    padding: 24px 16px 50px;
  }

  .admin-users-page h1 {
    font-size: 30px;
  }

  .admin-users-info {
    align-items: flex-start;
    padding: 12px;
  }

  .admin-users-info b {
    display: none;
  }

  .admin-users-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-users-search {
    width: auto;
  }

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

  .admin-users-table {
    min-width: 850px;
  }

  .admin-quick-grid {
    grid-template-columns: 1fr;
  }
}



/* Administration — Groups */

.admin-groups-page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 30px 34px 70px;
  color: #111936;
  font-family: inherit;
}

.admin-groups-page h1 {
  margin: 0;
  font-size: 38px;
  line-height: 1.15;
  font-weight: 750;
  letter-spacing: -1.1px;
}

.admin-groups-lead {
  margin: 10px 0 24px;
  font-size: 15px;
  line-height: 1.6;
  color: #26304b;
}

.admin-groups-page code {
  color: #6426e9;
  background: transparent;
  font-size: .92em;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.admin-groups-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 54px;
  padding: 13px 16px;
  margin-bottom: 24px;
  border: 1px solid #c8d9ff;
  border-radius: 7px;
  background: #f7faff;
  color: #27314c;
  font-size: 13px;
}

.info-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 2px solid #2c67ff;
  border-radius: 50%;
  color: #2c67ff;
  font-size: 11px;
  font-weight: 700;
}

.info-separator {
  color: #68728b;
}

/* Tabs */

.groups-tabs {
  display: flex;
  margin-bottom: -1px;
}

.groups-tab {
  min-height: 50px;
  padding: 0 27px;
  border: 1px solid #dfe4ee;
  border-bottom-color: #dfe4ee;
  background: #fafbfe;
  color: #65708b;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  border-radius: 7px 7px 0 0;
}

.groups-tab + .groups-tab {
  margin-left: 2px;
}

.groups-tab.active {
  color: #6025e8;
  background: #fff;
  border-bottom-color: #fff;
  box-shadow: inset 0 -2px 0 #6426e9;
}

.tab-icon {
  margin-right: 9px;
  font-size: 19px;
  color: #6426e9;
}

.tab-icon.cloud {
  color: #66728c;
}

/* Main workspace */

.groups-workspace {
  padding: 20px 16px 18px;
  border: 1px solid #dfe4ee;
  border-radius: 0 7px 7px 7px;
  background: #fff;
}

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

.groups-toolbar p {
  margin: 0;
  color: #25304b;
  font-size: 13px;
}

.groups-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.groups-search {
  display: flex;
  align-items: center;
  width: 235px;
  height: 38px;
  padding: 0 11px;
  border: 1px solid #dce2ec;
  border-radius: 7px;
  background: #fff;
  color: #64708a;
}

.groups-search span {
  margin-right: 8px;
  font-size: 22px;
  line-height: 1;
}

.groups-search input {
  width: 100%;
  border: 0;
  outline: 0;
  color: #17203a;
  font: inherit;
  font-size: 12px;
}

.groups-search input::placeholder {
  color: #7a849a;
}

.groups-filter,
.create-group {
  height: 38px;
  padding: 0 16px;
  border-radius: 7px;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}

.groups-filter {
  border: 1px solid #dce2ec;
  background: #fff;
  color: #18213c;
}

.create-group {
  border: 1px solid #6426e9;
  background: #6426e9;
  color: #fff;
}

/* Group cards */

.group-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.group-card {
  min-height: 215px;
  padding: 20px;
  border: 1px solid #e0e5ee;
  border-radius: 9px;
  background: #fff;
}

.group-card-top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.group-symbol {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border-radius: 10px;
  font-size: 30px;
}

.group-card.green .group-symbol {
  background: #ecfbf3;
  color: #17b86a;
}

.group-card.blue .group-symbol {
  background: #eef5ff;
  color: #1765e8;
}

.group-card.orange .group-symbol {
  background: #fff5e8;
  color: #f59b18;
}

.group-heading {
  min-width: 0;
  padding-top: 3px;
}

.group-heading h2 {
  margin: 0 0 7px;
  font-size: 17px;
  line-height: 1.25;
  font-weight: 700;
}

.group-heading span {
  color: #69748e;
  font-size: 13px;
}

.more-btn {
  margin-left: auto;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: #1b2340;
  font-weight: 800;
  letter-spacing: 2px;
  cursor: pointer;
}

.group-card > p {
  min-height: 44px;
  margin: 18px 0 14px;
  color: #29334e;
  font-size: 13px;
  line-height: 1.7;
}

.avatars {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}

.avatars span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-right: -2px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #eee8ff;
  color: #6426e9;
  font-size: 11px;
  font-weight: 650;
}

.avatars span:nth-child(2) {
  background: #e8f1ff;
  color: #2468dc;
}

.avatars span:nth-child(3) {
  background: #e6f9ef;
  color: #19a96a;
}

.avatars span:nth-child(4) {
  background: #ffecef;
  color: #e74f6a;
}

.avatars .more-avatar {
  width: 38px;
  background: #fff;
  border: 1px solid #e1e5ed;
  color: #37415b;
}

.group-card small {
  color: #69748e;
  font-size: 12px;
}

/* Pagination */

.groups-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  color: #53607c;
  font-size: 12px;
}

.groups-pagination > div {
  display: flex;
  gap: 8px;
}

.groups-pagination button {
  height: 36px;
  padding: 0 13px;
  border: 1px solid #e0e4ec;
  border-radius: 7px;
  background: #fff;
  color: #66718a;
  font: inherit;
}

.groups-pagination .current-page {
  border-color: #7a4df0;
  color: #6426e9;
}

/* Bottom information */

.groups-bottom {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 20px;
  margin-top: 24px;
}

.groups-panel {
  padding: 20px 22px;
  border: 1px solid #dfe5ee;
  border-radius: 8px;
}

.about-groups {
  background: #fbfffd;
}

.about-tabs {
  background: #fffdfa;
}

.groups-panel h2 {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 18px;
  font-size: 16px;
  font-weight: 700;
}

.panel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  font-size: 16px;
}

.green-icon {
  background: #eaf9f0;
  color: #15b66b;
}

.orange-icon {
  background: #fff0d7;
  color: #ef9b17;
}

.groups-panel ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.groups-panel li {
  position: relative;
  margin: 0 0 11px;
  padding-left: 28px;
  color: #26304b;
  font-size: 13px;
  line-height: 1.55;
}

.groups-panel li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border: 1px solid #24c77c;
  border-radius: 50%;
  color: #16b66a;
  font-size: 9px;
  font-weight: 800;
}

.panel-note {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 18px;
  padding: 11px 13px;
  border-radius: 7px;
  font-size: 12px;
  line-height: 1.5;
}

.green-note {
  border: 1px solid #c9eadb;
  background: #f1fbf6;
  color: #27384b;
}

.tab-explanation {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  color: #27314b;
  font-size: 13px;
  line-height: 1.6;
}

.tab-explanation strong {
  color: #111936;
}

.explain-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 8px;
  font-size: 22px;
}

.internal-icon {
  background: #effaf4;
  color: #13b66b;
}

.synced-icon {
  background: #eef5ff;
  color: #1765e8;
}

.synced-explanation {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #e8e8e8;
}

/* Responsive */

@media (max-width: 1000px) {
  .admin-groups-page {
    padding: 25px 22px 55px;
  }

  .groups-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .group-grid {
    grid-template-columns: 1fr;
  }

  .groups-bottom {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .admin-groups-page h1 {
    font-size: 30px;
  }

  .admin-groups-info {
    align-items: flex-start;
    flex-direction: column;
  }

  .groups-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .groups-search {
    width: 100%;
  }

  .groups-filter,
  .create-group {
    flex: 1;
  }

  .groups-pagination {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }
}



/* Administration — MFA */

.admin-mfa-page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 34px 70px;
  color: #111936;
  font-family: inherit;
}

.admin-mfa-page h1 {
  margin: 0;
  font-size: 38px;
  line-height: 1.15;
  font-weight: 750;
  letter-spacing: -1.1px;
}

.mfa-hero {
  position: relative;
}

.mfa-lead {
  margin: 10px 0 24px;
  color: #28324e;
  font-size: 15px;
  line-height: 1.55;
}

.admin-mfa-page code {
  color: #6426e9;
  background: transparent;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .92em;
}

.mfa-info-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 54px;
  margin-right: 300px;
  padding: 12px 16px;
  border: 1px solid #cbdcff;
  border-radius: 7px;
  background: #f7faff;
  color: #29334e;
  font-size: 13px;
}

.mfa-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 2px solid #2e6bff;
  border-radius: 50%;
  color: #2e6bff;
  font-size: 11px;
  font-weight: 700;
}

.mfa-dot {
  color: #65708b;
}

.mfa-security-illustration {
  position: absolute;
  top: -4px;
  right: 10px;
  width: 220px;
  height: 190px;
}

.mfa-orbit {
  position: absolute;
  inset: 20px;
  border: 1px dashed #dce4fa;
  border-radius: 50%;
}

.orbit-two {
  inset: 38px 2px;
  transform: rotate(45deg);
}

.mfa-shield {
  position: absolute;
  top: 43px;
  left: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 94px;
  height: 108px;
  clip-path: polygon(50% 0, 92% 18%, 84% 68%, 50% 100%, 16% 68%, 8% 18%);
  background: linear-gradient(145deg, #efe8ff, #b99bff);
  box-shadow: 0 8px 25px rgba(100, 38, 233, .16);
}

.mfa-shield span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 47px;
  height: 47px;
  border-radius: 50%;
  background: #6426e9;
  color: white;
  font-size: 20px;
}

.orbit-icon {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid #e4e9f5;
  border-radius: 50%;
  background: white;
  font-size: 18px;
}

.orbit-icon.person {
  top: 10px;
  left: 12px;
  color: #14a66a;
}

.orbit-icon.key {
  top: 28px;
  right: 8px;
  color: #f39a1b;
}

.orbit-icon.phone {
  right: 12px;
  bottom: 14px;
  color: #2d6cff;
}

/* Summary */

.mfa-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 26px;
}

.mfa-summary-card {
  display: flex;
  gap: 18px;
  min-height: 165px;
  padding: 20px;
  border: 1px solid #e0e5ee;
  border-radius: 9px;
  background: #fff;
}

.summary-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  border-radius: 50%;
  font-size: 27px;
}

.summary-icon.purple {
  background: #f2ebff;
  color: #6426e9;
}

.summary-icon.green {
  background: #eaf9f1;
  color: #13ae69;
}

.mfa-summary-card h2 {
  margin: 3px 0 8px;
  font-size: 17px;
  line-height: 1.3;
}

.mfa-summary-card p {
  margin: 0;
  color: #303a55;
  font-size: 13px;
  line-height: 1.6;
}

.mfa-toggle-row,
.method-status {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mfa-toggle-row {
  margin: 23px 0 11px;
}

.mfa-toggle {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex: 0 0 42px;
  border-radius: 20px;
  background: #b9c1d3;
}

.mfa-toggle span {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}

.mfa-toggle.enabled {
  background: #6426e9;
}

.mfa-toggle.enabled span {
  left: 21px;
}

.mfa-help {
  max-width: 420px;
  color: #68738d !important;
  font-size: 12px !important;
}

.adoption-card {
  position: relative;
}

.adoption-copy {
  display: flex;
  flex-direction: column;
}

.adoption-number {
  margin-top: 25px;
  font-size: 36px;
  line-height: 1;
}

.adoption-total {
  margin-top: 7px;
  color: #59657f;
  font-size: 13px;
}

.mfa-donut {
  position: absolute;
  top: 51px;
  right: 36px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(#28bc79 0 59%, #e6e9f0 59% 100%);
}

.mfa-donut::before {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background: white;
}

.mfa-donut > div {
  position: absolute;
  inset: 14px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mfa-donut strong {
  font-size: 20px;
}

/* Methods */

.mfa-methods {
  margin-top: 28px;
}

.mfa-methods > h2 {
  margin: 0;
  font-size: 18px;
}

.section-subtitle {
  margin: 7px 0 16px;
  color: #56627d;
  font-size: 13px;
}

.mfa-method-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.mfa-method-card {
  min-height: 190px;
  padding: 20px;
  border: 1px solid #e0e5ee;
  border-radius: 9px;
  background: #fff;
}

.method-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 13px;
  border-radius: 9px;
  font-size: 26px;
}

.method-icon.google {
  background: #fff8e7;
  color: #ef9b16;
}

.method-icon.microsoft {
  background: #eaf4ff;
  color: #1269d9;
}

.method-icon.sms {
  background: #fff5e6;
  color: #f39a16;
}

.method-icon.email {
  background: #edf5ff;
  color: #2470e9;
}

.method-content h3 {
  margin: 0 0 7px;
  font-size: 16px;
  line-height: 1.35;
}

.method-content p {
  min-height: 58px;
  margin: 14px 0 18px;
  color: #29334f;
  font-size: 13px;
  line-height: 1.65;
}

.recommended {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 6px;
  background: #dcf8e9;
  color: #0b9c59;
  font-size: 11px;
  font-weight: 650;
}

.method-status strong {
  font-size: 13px;
}

/* Bottom links */

.mfa-links-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}

.mfa-link-card {
  display: flex;
  gap: 17px;
  min-height: 120px;
  padding: 19px;
  border: 1px solid #dfe5ee;
  border-radius: 9px;
}

.blue-card {
  background: #f9fbff;
  border-color: #d8e4ff;
}

.purple-card {
  background: #fcf9ff;
  border-color: #e7dfff;
}

.link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 43px;
  height: 43px;
  flex: 0 0 43px;
  border-radius: 50%;
  background: #eef5ff;
  color: #2469e8;
  font-size: 19px;
  font-weight: 700;
}

.purple-card .link-icon {
  background: #f2eaff;
  color: #6426e9;
}

.mfa-link-card h2 {
  margin: 2px 0 7px;
  font-size: 16px;
}

.mfa-link-card p {
  margin: 0 0 12px;
  color: #3a4560;
  font-size: 12px;
  line-height: 1.55;
}

.mfa-link-card a {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  padding: 8px 13px;
  border: 1px solid #d9c9ff;
  border-radius: 6px;
  color: #6426e9;
  background: #fff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 650;
}

.mfa-link-card a span {
  font-size: 17px;
}

/* Responsive */

@media (max-width: 1050px) {
  .mfa-security-illustration {
    display: none;
  }

  .mfa-info-banner {
    margin-right: 0;
  }

  .mfa-method-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 760px) {
  .admin-mfa-page {
    padding: 24px 20px 55px;
  }

  .admin-mfa-page h1 {
    font-size: 30px;
  }

  .mfa-summary-grid,
  .mfa-links-grid {
    grid-template-columns: 1fr;
  }

  .mfa-method-grid {
    grid-template-columns: 1fr;
  }

  .mfa-info-banner {
    align-items: flex-start;
    flex-direction: column;
  }

  .mfa-donut {
    right: 20px;
  }
}


/* Administration — Integrations */

.integrations-page {
  max-width: 1220px;
  margin: 0 auto;
  padding: 28px 34px 70px;
  color: #111936;
  font-family: inherit;
}

.integrations-page h1 {
  margin: 0 0 8px;
  font-size: 38px;
  line-height: 1.15;
  font-weight: 750;
  letter-spacing: -1px;
}

.page-subtitle {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.6;
  color: #303b5c;
}

.info-banner,
.scim-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid #c8d9ff;
  border-radius: 7px;
  background: #f6f9ff;
  color: #202b4c;
  font-size: 13px;
  line-height: 1.55;
}

.info-icon {
  color: #1769ff;
  font-size: 19px;
  flex: 0 0 auto;
}

.info-banner code,
.scim-banner code {
  color: #6735e9;
  font-size: 12px;
}

.separator {
  margin: 0 14px;
  color: #65708d;
}

.integration-hub {
  display: grid;
  grid-template-columns: 1.15fr 1.2fr auto;
  align-items: center;
  gap: 24px;
  margin: 28px 0 25px;
  padding: 16px 18px;
  border: 1px solid #e0e4ed;
  border-radius: 8px;
  background: #fff;
}

.hub-intro {
  display: flex;
  align-items: center;
  gap: 14px;
}

.hub-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f1eaff;
  color: #6735e9;
  font-size: 24px;
}

.hub-intro h2 {
  margin: 0 0 4px;
  font-size: 16px;
}

.hub-intro p {
  margin: 0;
  max-width: 260px;
  color: #4b5673;
  font-size: 12px;
  line-height: 1.55;
}

.health strong {
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
}

.health-items {
  display: flex;
  align-items: center;
  gap: 22px;
}

.health-items span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #39435f;
  font-size: 12px;
  white-space: nowrap;
}

.health-items b {
  margin-left: 3px;
  font-size: 16px;
  color: #17203d;
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

.dot.green { background: #14a96b; }
.dot.orange { background: #f49a13; }
.dot.red { background: #ef4444; }
.dot.gray { background: #8991a6; }

.hub-actions {
  display: flex;
  gap: 12px;
}

.hub-actions button {
  height: 38px;
  padding: 0 15px;
  border: 1px solid #ddd3ff;
  border-radius: 6px;
  background: #fff;
  color: #161c3a;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.hub-actions button:hover {
  background: #f7f4ff;
  border-color: #bda8ff;
}

.section-title {
  margin: 0;
  font-size: 17px;
  line-height: 1.35;
}

.section-description {
  margin: 5px 0 14px;
  color: #59647f;
  font-size: 12px;
}

.integration-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
}

.integration-card {
  min-height: 126px;
  display: flex;
  gap: 14px;
  padding: 16px 14px;
  border: 1px solid #e0e4ed;
  border-radius: 7px;
  background: #fff;
  box-sizing: border-box;
}

.integration-card:hover {
  border-color: #c9baff;
  box-shadow: 0 4px 14px rgba(68, 42, 150, 0.06);
}

.card-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  font-size: 24px;
  font-weight: 600;
}

.card-icon.purple { background: #f2ecff; color: #6735e9; }
.card-icon.green { background: #eaf9f1; color: #16a765; }
.card-icon.blue { background: #edf5ff; color: #3479ed; }
.card-icon.orange { background: #fff5e7; color: #f39a18; }
.card-icon.pink { background: #fff0f4; color: #ef4772; }
.card-icon.cyan { background: #eafafa; color: #10aeb5; }

.card-content {
  min-width: 0;
  flex: 1;
}

.card-content h3 {
  margin: 2px 0 7px;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 700;
}

.card-content h3 span {
  float: right;
  font-size: 21px;
  line-height: 14px;
  font-weight: 400;
}

.card-content p {
  min-height: 37px;
  margin: 0 0 12px;
  color: #303b5c;
  font-size: 12px;
  line-height: 1.55;
}

.card-content small {
  color: #5d6883;
  font-size: 11px;
}

.scim-banner {
  margin-top: 24px;
}

/* Responsive */
@media (max-width: 1150px) {
  .integration-hub {
    grid-template-columns: 1fr;
  }

  .hub-actions {
    justify-content: flex-start;
  }

  .integration-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .integrations-page {
    padding: 22px 18px 50px;
  }

  .integrations-page h1 {
    font-size: 30px;
  }

  .integration-grid {
    grid-template-columns: 1fr;
  }

  .health-items {
    flex-wrap: wrap;
    gap: 12px 20px;
  }

  .hub-actions {
    flex-wrap: wrap;
  }
}


/* Administration — IaC Engines */

.iac-engines-page {
  --navy: #10163b;
  --muted: #586184;
  --purple: #5d2cff;
  --purple-soft: #f0ebff;
  --border: #e3e6f0;
  --green: #20b878;
  --green-soft: #e9faf2;
  --orange: #f59b20;
  --orange-soft: #fff4df;
  --blue: #2d72ed;
  --bg: #ffffff;
  color: var(--navy);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  min-height: 100vh;
  background: #fff;
}

.iac-engines-page * { box-sizing: border-box; }

.iac-topbar {
  height: 76px;
  border-bottom: 1px solid #e8eaf1;
  display: flex;
  align-items: center;
  padding: 0 30px;
  gap: 55px;
  width: 100%;
  margin-left: 0;
}

.iac-brand {
  position: absolute;
  left: 28px;
  top: 17px;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -1.5px;
  display: none;
  align-items: center;
  gap: 9px;
}

.iac-brand-mark {
  color: #20b878;
  font-size: 37px;
  line-height: 1;
}

.iac-topnav {
  display: flex;
  align-self: stretch;
  align-items: center;
  gap: 43px;
  font-weight: 600;
  font-size: 14px;
}

.iac-topnav span {
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
}

.iac-topnav .active { color: #08a967; }

.iac-topnav .active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: #08b46e;
}

.iac-top-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 19px;
  color: var(--navy);
}

.iac-search,
.engine-search {
  height: 40px;
  border: 1px solid #dfe3ee;
  border-radius: 9px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #69718c;
  padding: 0 12px;
  background: #fff;
}

.iac-search { width: 260px; font-size: 13px; }
.engine-search { width: 225px; font-size: 13px; }

.iac-search kbd {
  margin-left: auto;
  background: #f5f6fa;
  border-radius: 5px;
  padding: 4px 8px;
  color: #242944;
  font-size: 11px;
}

.iac-action { font-size: 22px; }

.iac-avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: #6533ed;
  color: #fff;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
}

.iac-sidebar {
  position: absolute;
  left: 0;
  top: 0;
  width: 220px;
  min-height: 100%;
  border-right: 1px solid #e8eaf1;
  padding: 101px 12px 20px;
  background: #fff;
}

.iac-side-title {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 13px 17px;
  font-size: 16px;
}

.iac-side-icon {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: #fff;
  background: #6332ee;
  font-size: 14px;
}

.iac-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.iac-nav a {
  height: 36px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  border-radius: 7px;
  color: #192042;
  font-size: 13px;
  text-decoration: none;
}

.iac-nav a span { flex: 1; }

.iac-nav a.selected {
  color: #5d2cff;
  background: #f0ebff;
  font-weight: 600;
}

.iac-help {
  margin: 28px 10px 0;
  border: 1px solid #e1e4ee;
  border-radius: 9px;
  padding: 17px 14px;
}

.iac-help h3 {
  margin: 0 0 10px;
  font-size: 15px;
}

.iac-help p {
  margin: 0 0 14px;
  color: #56607f;
  line-height: 1.8;
  font-size: 12px;
}

.iac-help button,
.runtime-card button {
  border: 1px solid #ddd5ff;
  color: #5d2cff;
  background: #fff;
  border-radius: 6px;
  padding: 8px 11px;
  font-weight: 600;
  font-size: 11px;
}

.iac-sidebar-footer {
  position: fixed;
  bottom: 27px;
  left: 31px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #68708c;
  font-size: 11px;
}

.iac-sidebar-footer strong {
  color: #111733;
  font-size: 12px;
}

.iac-collapse {
  position: fixed;
  bottom: 15px;
  left: 155px;
  border: 1px solid #dfe2eb;
  background: #fff;
  border-radius: 7px;
  width: 34px;
  height: 34px;
  color: #27304e;
}

.iac-main {
  margin-left: 0;
  width: 100%;
  max-width: 1600px;
  padding: 28px 38px 45px;
}

.iac-hero h1 {
  margin: 0;
  font-size: 38px;
  letter-spacing: -1.7px;
  line-height: 1.2;
}

.iac-hero p {
  margin: 8px 0 24px;
  font-size: 15px;
  color: #313b61;
}

.iac-info {
  min-height: 52px;
  border: 1px solid #cbdcff;
  background: #f7faff;
  border-radius: 8px;
  padding: 0 17px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  margin-bottom: 8px;
}

.iac-info code {
  color: #5d2cff;
  background: transparent;
}

.info-icon {
  width: 18px;
  height: 18px;
  border: 1.5px solid #2876ff;
  color: #2876ff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
}

.iac-shell {
  border: 1px solid #e2e5ed;
  border-radius: 9px;
  margin-top: 8px;
  padding: 0 17px 15px;
  background: #fff;
}

.iac-tabs {
  display: flex;
  margin: 0 -17px 15px;
  padding-left: 0;
  border-bottom: 1px solid #e3e5ec;
}

.iac-tabs button {
  height: 43px;
  padding: 0 25px;
  border: 0;
  border-right: 1px solid #e6e8ef;
  background: #fafbfe;
  color: #4e5776;
  font-weight: 600;
  font-size: 13px;
}

.iac-tabs button.active {
  background: #fff;
  color: #5d2cff;
  border-bottom: 2px solid #5d2cff;
}

.iac-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 13px;
  margin-bottom: 22px;
}

.stat-card {
  border: 1px solid #e2e5ed;
  border-radius: 9px;
  min-height: 105px;
  padding: 15px;
  display: flex;
  gap: 13px;
  align-items: flex-start;
}

.stat-icon {
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 21px;
  font-weight: 700;
}

.stat-icon.purple { color: #5d2cff; background: #f2edff; }
.stat-icon.green { color: #16a66d; background: #eaf9f1; }
.stat-icon.orange { color: #ef9715; background: #fff4df; }
.stat-icon.blue { color: #2375e9; background: #edf5ff; }

.stat-card span {
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 3px;
}

.stat-card strong {
  display: block;
  font-size: 27px;
  line-height: 1.1;
}

.stat-card small {
  color: #647091;
  font-size: 10px;
}

.iac-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin: 3px 0 16px;
}

.iac-section-heading h2 {
  margin: 0 0 4px;
  font-size: 18px;
}

.iac-section-heading p {
  margin: 0;
  color: #606a87;
  font-size: 12px;
}

.iac-heading-actions {
  display: flex;
  gap: 12px;
}

.primary {
  border: 0;
  border-radius: 7px;
  background: #5b28ed;
  color: #fff;
  padding: 0 18px;
  font-weight: 700;
  font-size: 12px;
}

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

.engine-card {
  border: 1px solid #e0e4ed;
  border-radius: 9px;
  padding: 14px 16px 15px;
  min-height: 145px;
  background: #fff;
}

.engine-head {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.engine-head > b {
  margin-left: auto;
  font-size: 19px;
  line-height: 1;
}

.engine-logo {
  width: 41px;
  height: 41px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 23px;
  font-weight: 800;
}

.engine-logo.terraform { color: #6332ed; background: #f0ebff; }
.engine-logo.opentofu { color: #e4ae00; background: #fff8d9; }
.engine-logo.pulumi { color: #e83d92; background: #fff0f8; }
.engine-logo.crossplane { color: #2674ec; background: #edf5ff; }
.engine-logo.cloudformation { color: #e84a8c; background: #fff0f5; }
.engine-logo.bicep { color: #1b83d8; background: #edf7ff; }

.engine-head h3 {
  margin: 1px 0 3px;
  font-size: 14px;
}

.engine-head h3 code {
  margin-left: 5px;
  color: #647091;
  background: #f4f5f9;
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 500;
}

.status {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 9px;
  font-weight: 600;
}

.status.active {
  color: #159964;
  background: #e8f9f1;
}

.status.deprecated {
  color: #e88b00;
  background: #fff1d9;
}

.engine-card > p {
  margin: 9px 0 12px;
  font-size: 11px;
  color: #343d5f;
}

.engine-meta {
  display: flex;
  gap: 7px;
}

.engine-meta span {
  border: 1px solid #dfe3ee;
  border-radius: 6px;
  padding: 6px 9px;
  font-size: 10px;
  color: #293354;
  background: #fafbfe;
}

.iac-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 17px;
}

.lifecycle-card,
.runtime-card {
  border: 1px solid #dfe4ec;
  border-radius: 9px;
  min-height: 126px;
  padding: 16px 18px;
  display: flex;
  gap: 13px;
}

.lifecycle-card {
  background: #f6fcf9;
}

.runtime-card {
  background: #fcf9ff;
  border-color: #dfd3ff;
}

.bottom-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: #13a36c;
  background: #e9f9f2;
  font-size: 20px;
}

.runtime-card .bottom-icon {
  color: #5d2cff;
  background: #f1eaff;
}

.lifecycle-card h3,
.runtime-card h3 {
  margin: 0 0 8px;
  font-size: 15px;
}

.lifecycle-card ul {
  padding: 0;
  margin: 0;
  list-style: none;
  color: #263153;
  font-size: 11px;
  line-height: 1.8;
}

.lifecycle-card li::before {
  content: "✓";
  color: #15ad72;
  font-weight: 700;
  margin-right: 8px;
}

.runtime-card p {
  margin: 0 0 12px;
  color: #4e5879;
  font-size: 11px;
  line-height: 1.5;
}

@media (max-width: 1100px) {
  .iac-sidebar { width: 190px; }
  .iac-topbar, .iac-main { margin-left: 190px; }
  .iac-main { padding-left: 24px; padding-right: 24px; }
  .engine-grid { grid-template-columns: repeat(2, 1fr); }
  .iac-stats { grid-template-columns: repeat(2, 1fr); }
  .iac-topnav { gap: 20px; }
}

@media (max-width: 800px) {
  .iac-sidebar { display: none; }
  .iac-topbar, .iac-main { margin-left: 0; }
  .iac-topbar { padding: 0 18px; }
  .iac-brand { position: static; }
  .iac-topnav { display: none; }
  .iac-main { padding: 22px 16px; }
  .engine-grid,
  .iac-bottom-grid,
  .iac-stats { grid-template-columns: 1fr; }
  .iac-section-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
}


/* Administration — Audit Logs */

.audit-page {
  --navy:#10163b;
  --muted:#59627f;
  --border:#e1e5ef;
  --purple:#6330ef;
  --green:#17ad70;
  --red:#ef3c45;
  --orange:#f39a19;
  --blue:#2878ee;
  color:var(--navy);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  max-width:100%;
  padding:28px 38px 45px;
  position:relative;
  min-height:100vh;
  background:#fff;
}

.audit-page * { box-sizing:border-box; }

.audit-hero h1 {
  margin:0;
  font-size:38px;
  line-height:1.15;
  letter-spacing:-1.7px;
}

.audit-hero p {
  margin:8px 0 22px;
  color:#343d60;
  font-size:14px;
}

.audit-info {
  min-height:45px;
  border:1px solid #cadcff;
  background:#f7faff;
  border-radius:8px;
  padding:10px 16px;
  display:flex;
  align-items:center;
  gap:14px;
  font-size:11px;
  margin-bottom:19px;
}

.audit-info code { color:#5c28ef; }

.audit-info-icon {
  width:18px;height:18px;border:1.5px solid #2775ed;
  color:#2775ed;border-radius:50%;display:grid;place-items:center;
  font-size:11px;font-weight:700;
}

.audit-kpis {
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:13px;
}

.audit-kpi {
  border:1px solid var(--border);
  border-radius:9px;
  min-height:94px;
  padding:13px;
  display:flex;
  gap:11px;
  background:#fff;
}

.audit-kpi-icon {
  width:38px;height:38px;flex:0 0 38px;border-radius:9px;
  display:grid;place-items:center;font-size:19px;font-weight:700;
}

.audit-kpi-icon.blue{color:#2878ee;background:#edf5ff}
.audit-kpi-icon.green{color:#17ad70;background:#eaf9f2}
.audit-kpi-icon.red{color:#ed3b46;background:#fff0f1}
.audit-kpi-icon.orange{color:#ef9617;background:#fff5e4}
.audit-kpi-icon.purple{color:#6330ef;background:#f1ebff}

.audit-kpi span {
  display:block;font-size:11px;font-weight:700;margin-bottom:3px;
}
.audit-kpi strong {
  display:block;font-size:20px;line-height:1.1;
}
.audit-kpi small {display:block;color:#66708e;font-size:9px;margin-top:4px}
.positive{color:#17a96d!important}
.negative{color:#ed3944!important}
.orange-text{color:#ec9418!important}
.purple-text{color:#5f2cf0!important}

.audit-analytics h2 {
  font-size:16px;
  margin:19px 0 9px;
}
.audit-analytics h2 small {font-weight:400;color:#59627f}

.audit-chart-grid {
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr 1fr;
  gap:12px;
}

.audit-chart {
  border:1px solid var(--border);
  border-radius:8px;
  min-height:170px;
  padding:11px;
  background:#fff;
}

.audit-chart h3 {
  margin:0 0 9px;
  font-size:10px;
}

.line-chart {height:137px;position:relative}
.line-grid {
  position:absolute;inset:8px 0 22px;
  background:repeating-linear-gradient(to bottom,transparent 0,transparent 32px,#edf0f6 33px);
}
.line-chart svg {position:absolute;left:0;right:0;top:8px;width:100%;height:108px}
.chart-axis {
  position:absolute;bottom:0;left:0;right:0;
  display:flex;justify-content:space-between;color:#707995;font-size:8px;
}

.donut-row {
  height:137px;
  display:flex;
  align-items:center;
  gap:13px;
}
.donut {
  width:91px;height:91px;flex:0 0 91px;border-radius:50%;
  position:relative;
}
.donut::after {
  content:"";position:absolute;inset:20px;border-radius:50%;background:#fff;
}
.category-donut {
  background:conic-gradient(#2878ee 0 28.5%,#54a8ed 28.5% 44.7%,#7d9b6d 44.7% 57.4%,#f28a28 57.4% 67.7%,#ad45df 67.7% 76.3%,#d2d5dc 76.3%);
}
.status-donut {
  background:conic-gradient(#18b677 0 93.1%,#ef3c45 93.1% 98.3%,#f39a19 98.3% 99.5%,#aab0be 99.5%);
}
.legend {
  display:flex;flex-direction:column;gap:6px;flex:1;
}
.legend span {
  display:flex;align-items:center;font-size:8px;white-space:nowrap;
}
.legend b {margin-left:auto;font-weight:500}
.dot {
  width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:7px;
}
.d1{background:#2878ee}.d2{background:#54a8ed}.d3{background:#7d9b6d}
.d4{background:#f28a28}.d5{background:#ad45df}.d6{background:#d2d5dc}
.success{background:#18b677}.failure{background:#ef3c45}
.warning{background:#f39a19}.info{background:#aab0be}

.bar-chart {
  height:137px;display:flex;align-items:flex-end;justify-content:space-around;
  padding:4px 4px 15px;border-bottom:1px solid #e8ebf1;
}
.bar-chart div {
  height:100%;width:12%;display:flex;align-items:center;justify-content:flex-end;
  flex-direction:column;
}
.bar-chart i {
  width:12px;background:#7040ec;border-radius:3px 3px 0 0;display:block;
}
.bar-chart span {font-size:7px;color:#66708c;margin-top:5px}

.audit-workspace {
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: 9px;
  margin-top: 17px;
  margin-right: 0;
  padding: 12px 10px 9px;
  position: relative;
}

.audit-toolbar {
  display:flex;gap:9px;align-items:center;
}
.audit-search {
  height:35px;width:185px;border:1px solid #dfe3ec;border-radius:7px;
  display:flex;align-items:center;gap:8px;padding:0 10px;color:#6a7390;font-size:10px;
}
.audit-toolbar button,.audit-filter-row span,.audit-export button {
  height:35px;border:1px solid #dfe3ec;background:#fff;border-radius:7px;
  padding:0 11px;font-size:9px;color:#273151;white-space:nowrap;
}
.audit-filter-row {
  display:flex;gap:8px;margin-top:9px;align-items:center;
}
.audit-filter-row span {
  height:28px;display:flex;align-items:center;
  background:#fafbfe;border-radius:14px;
}
.audit-filter-row .filter-count {
  color:#3523d5;background:#f0edff;border-color:#ddd5ff;
}
.audit-filter-row .reset {margin-left:auto}
.audit-export {
  display:flex;justify-content:flex-end;gap:8px;margin:8px 0;
}
.audit-export button {height:28px}

.audit-table-wrap {
  width: 100%;
  max-width: 100%;
  border: 1px solid #e2e5ed;
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: 6px;
}

.audit-table {
  width: 100%;
  min-width: 850px;
  border-collapse: collapse;
  font-size: 9px;
}

.audit-table th {
  background:#f8f9fc;
  text-align:left;
  padding:11px 9px;
  font-weight:700;
  color:#293353;
  white-space:nowrap;
}
.audit-table td {
  border-top:1px solid #eceef4;
  padding:10px 9px;
  white-space:nowrap;
}
.audit-table .link{color:#5530e8}
.audit-table .deploy{color:#e88b14}
.audit-table .policy{color:#2878ee}
.audit-table .authz{color:#14a66b}

.badge,.severity,.tag-purple {
  display:inline-flex;align-items:center;
  border-radius:5px;padding:3px 6px;font-size:8px;
  white-space:nowrap;
}
.badge.success{color:#129967;background:#e8faf1}
.badge.failure{color:#e8323e;background:#fff0f1}
.severity.info{color:#2875e8;background:#eaf3ff}
.severity.high{color:#ed3d48;background:#fff0f1}
.severity.critical{color:#6a2af0;background:#f1ebff}
.eye{font-size:15px;color:#283253}

.audit-pagination {
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 3px 0;font-size:9px;color:#4e5878;
}
.audit-pagination div{display:flex;gap:5px;align-items:center}
.audit-pagination button{
  height:27px;border:1px solid #e0e4ed;background:#fff;border-radius:6px;
  padding:0 9px;font-size:9px;color:#59627d;
}
.audit-pagination .current{color:#5d2cff;border-color:#6c3df1}

.audit-drawer {
  position:absolute;
  right:38px;
  top:368px;
  width:215px;
  border:1px solid #dfe3eb;
  border-radius:9px;
  background:#fff;
  padding:13px;
  box-shadow:0 4px 18px rgba(20,28,60,.04);
}
.drawer-head{display:flex;justify-content:space-between;align-items:center}
.drawer-head h3{font-size:13px;margin:0}
.drawer-head button{
  border:1px solid #e4e6ed;background:#fff;border-radius:6px;
  width:25px;height:25px;color:#606a86
}
.drawer-tags{display:flex;justify-content:space-between;margin-top:13px}
.tag-purple{color:#5f2cf0;background:#f0ebff}
.audit-drawer h2{font-size:14px;margin:12px 0 5px}
.audit-drawer>p{font-size:8px;color:#64708d}
.drawer-tabs{
  display:flex;gap:20px;border-bottom:1px solid #e5e8ef;margin:12px 0;
  font-size:9px;color:#4d5878;
}
.drawer-tabs b{color:#5d2cff;border-bottom:2px solid #5d2cff;padding-bottom:7px}
.audit-drawer dl{
  display:grid;grid-template-columns:58px 1fr;gap:10px 7px;
  font-size:8px;margin:0;
}
.audit-drawer dt{font-weight:600;color:#34405f}
.audit-drawer dd{margin:0;color:#56617e;overflow-wrap:anywhere}
.drawer-close{
  display:block;margin:14px auto 0;border:1px solid #dfe3eb;background:#fff;
  border-radius:6px;padding:6px 23px;font-size:9px;color:#36405f;
}

@media (max-width:1200px){
  .audit-kpis{grid-template-columns:repeat(3,1fr)}
  .audit-chart-grid{grid-template-columns:repeat(2,1fr)}
  .audit-workspace{margin-right:0}
  .audit-drawer{display:none}
}
@media (max-width:800px){
  .audit-page{padding:20px}
  .audit-kpis,.audit-chart-grid{grid-template-columns:1fr}
  .audit-toolbar{flex-wrap:wrap}
  .audit-table-wrap{overflow-x:auto}
  .audit-info{flex-wrap:wrap}
}



/* =========================================================
   AXIO — Roles & Access
   Page 1 — Roles & Access Overview
   ========================================================= */

.rao-page {
  --rao-navy: #102d5c;
  --rao-blue: #155bc4;
  --rao-light-blue: #edf5ff;
  --rao-border: #cbd9e8;
  --rao-text: #18263a;
  --rao-muted: #536176;
  --rao-green: #15955a;
  --rao-green-bg: #f1fbf5;
  --rao-yellow: #d88c10;
  --rao-yellow-bg: #fffaf0;

  max-width: 1100px;
  margin: 0 auto;
  padding: 0 14px 34px;
  color: var(--rao-text);
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}

.rao-page *,
.rao-page *::before,
.rao-page *::after {
  box-sizing: border-box;
}

/* Header */

.rao-page-header {
  height: 49px;
  border-bottom: 1px solid #b8c8da;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rao-brand {
  color: var(--rao-navy);
  font-size: 29px;
  font-weight: 800;
  letter-spacing: 1px;
}

.rao-page-meta {
  color: #303944;
  font-size: 14px;
}

.rao-page-meta span {
  margin: 0 10px;
  color: #718094;
}

/* Title */

.rao-title-block {
  padding: 29px 0 17px;
}

.rao-title-block h1 {
  margin: 0;
  color: var(--rao-navy);
  font-size: 45px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -1.1px;
}

.rao-title-block p {
  max-width: 780px;
  margin: 11px 0 0;
  color: var(--rao-muted);
  font-size: 18px;
  line-height: 1.45;
}

/* Info boxes */

.rao-info-box,
.rao-tip-box {
  border: 1px solid #b9d6f7;
  border-radius: 7px;
  background: #f4f9ff;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 16px;
}

.rao-info-box p,
.rao-tip-box p {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
}

.rao-info-icon {
  flex: 0 0 29px;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: var(--rao-blue);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
}

/* Sections */

.rao-section {
  margin-top: 21px;
}

.rao-section h2 {
  margin: 0 0 6px;
  color: var(--rao-navy);
  font-size: 23px;
  line-height: 1.2;
  font-weight: 800;
}

.rao-number {
  display: inline-flex;
  width: 27px;
  height: 27px;
  margin-right: 8px;
  border-radius: 5px;
  background: var(--rao-blue);
  color: #fff;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  vertical-align: -2px;
}

.rao-intro {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
}

/* Built-in roles */

.rao-role-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 9px;
}

.rao-role-card {
  min-height: 286px;
  border: 1px solid #cfe0f2;
  border-radius: 8px;
  background: #fff;
  padding: 14px 12px 13px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rao-role-icon {
  width: 67px;
  height: 67px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: #eaf3ff;
  color: var(--rao-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 33px;
  font-weight: 700;
}

.rao-role-card h3 {
  margin: 0 0 10px;
  color: var(--rao-blue);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 800;
}

.rao-role-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
}

.rao-role-label {
  margin-top: auto;
  padding: 6px 10px;
  border-radius: 4px;
  background: #edf5ff;
  color: var(--rao-blue);
  font-size: 12px;
}

.rao-unassigned .rao-role-icon {
  background: #f0f1f2;
  color: #52606e;
}

.rao-unassigned .rao-role-label {
  background: #f0f1f2;
  color: #52606e;
}

/* Key concepts */

.rao-concept-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 9px;
}

.rao-concept-card {
  min-height: 147px;
  border: 1px solid #d5e1ea;
  border-radius: 7px;
  background: #fff;
  padding: 13px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.rao-concept-icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #eaf8f0;
  color: var(--rao-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  font-weight: 800;
}

.rao-concept-card h3 {
  margin: 1px 0 6px;
  color: var(--rao-green);
  font-size: 15px;
  line-height: 1.25;
}

.rao-concept-card p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
}

/* How access works */

.rao-access-section {
  margin-top: 22px;
}

.rao-flow {
  display: grid;
  grid-template-columns: 1fr 31px 1fr 31px 1fr 31px 1fr;
  align-items: start;
  margin-top: 12px;
}

.rao-flow-item {
  text-align: center;
  padding: 0 9px;
}

.rao-flow-icon {
  width: 61px;
  height: 61px;
  margin: 0 auto 11px;
  border-radius: 50%;
  background: #eaf3ff;
  color: var(--rao-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 29px;
  font-weight: 800;
}

.rao-flow-item h3 {
  margin: 0 0 8px;
  color: var(--rao-blue);
  font-size: 14px;
  line-height: 1.3;
}

.rao-flow-item p {
  max-width: 190px;
  margin: 0 auto;
  font-size: 13px;
  line-height: 1.45;
}

.rao-flow-arrow {
  padding-top: 20px;
  color: var(--rao-blue);
  font-size: 29px;
  text-align: center;
}

/* Core principle */

.rao-core-box {
  margin-top: 18px;
  border: 1px solid #f0cf82;
  border-radius: 7px;
  background: #fffaf0;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.rao-core-icon {
  flex: 0 0 35px;
  font-size: 30px;
  text-align: center;
}

.rao-core-box h3 {
  margin: 0 0 5px;
  color: #d2860b;
  font-size: 16px;
}

.rao-core-box p {
  margin: 0;
  color: var(--rao-navy);
  font-size: 14px;
  line-height: 1.45;
}

.rao-core-box strong {
  font-weight: 800;
}

/* Bottom tip */

.rao-tip-box {
  margin-top: 18px;
  min-height: 49px;
}

.rao-tip-box p {
  color: var(--rao-navy);
}

/* Just-the-Docs compatibility */

.rao-page h1::before,
.rao-page h2::before,
.rao-page h3::before {
  content: none !important;
}

.rao-page h1,
.rao-page h2,
.rao-page h3,
.rao-page p {
  letter-spacing: normal;
}

/* Responsive */

@media (max-width: 1000px) {
  .rao-role-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .rao-concept-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 800px) {
  .rao-flow {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .rao-flow-arrow {
    display: none;
  }
}

@media (max-width: 650px) {
  .rao-page {
    padding: 0 10px 28px;
  }

  .rao-page-header {
    height: auto;
    padding: 9px 0;
    gap: 10px;
  }

  .rao-brand {
    font-size: 24px;
  }

  .rao-page-meta {
    font-size: 11px;
  }

  .rao-title-block h1 {
    font-size: 34px;
  }

  .rao-title-block p {
    font-size: 16px;
  }

  .rao-role-grid,
  .rao-concept-grid,
  .rao-flow {
    grid-template-columns: 1fr;
  }
}



/* =========================================================
   AXIO — Roles & Access
   Page 2 — Users & Role Assignment
   ========================================================= */

.ura-page {
  --ura-navy: #102d5c;
  --ura-blue: #155bc4;
  --ura-light-blue: #edf5ff;
  --ura-border: #cbd9e8;
  --ura-text: #17243a;
  --ura-muted: #536176;
  --ura-green: #15955a;
  --ura-green-bg: #f1fbf5;
  --ura-orange: #e88b09;
  --ura-orange-bg: #fff9ee;

  max-width: 1100px;
  margin: 0 auto;
  padding: 0 14px 34px;
  color: var(--ura-text);
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}

.ura-page *,
.ura-page *::before,
.ura-page *::after {
  box-sizing: border-box;
}

/* Header */

.ura-page-header {
  height: 49px;
  border-bottom: 1px solid #b8c8da;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ura-brand {
  color: var(--ura-navy);
  font-size: 29px;
  font-weight: 800;
  letter-spacing: 1px;
}

.ura-page-meta {
  color: #303944;
  font-size: 14px;
}

.ura-page-meta span {
  margin: 0 10px;
  color: #718094;
}

/* Title */

.ura-title-block {
  padding: 27px 0 16px;
}

.ura-title-block h1 {
  margin: 0;
  color: var(--ura-navy);
  font-size: 44px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -1px;
}

.ura-title-block p {
  max-width: 850px;
  margin: 9px 0 0;
  color: var(--ura-muted);
  font-size: 17px;
  line-height: 1.45;
}

/* Callout */

.ura-info-box,
.ura-reminder {
  border: 1px solid #b9d6f7;
  border-radius: 7px;
  background: #f4f9ff;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 16px;
}

.ura-info-box p,
.ura-reminder p {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
}

.ura-info-box strong {
  color: var(--ura-blue);
}

.ura-info-icon {
  flex: 0 0 29px;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: var(--ura-blue);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
}

/* Sections */

.ura-section {
  margin-top: 20px;
}

.ura-section h2 {
  margin: 0 0 5px;
  color: var(--ura-navy);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 800;
}

.ura-number {
  display: inline-flex;
  width: 27px;
  height: 27px;
  margin-right: 8px;
  border-radius: 5px;
  background: var(--ura-blue);
  color: #fff;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  vertical-align: -2px;
}

.ura-intro {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
}

/* Generic cards */

.ura-card-grid {
  display: grid;
  gap: 14px;
  margin-top: 10px;
}

.ura-card-grid.four {
  grid-template-columns: repeat(4, 1fr);
}

.ura-card {
  min-height: 185px;
  border: 1px solid #cfe0f2;
  border-radius: 8px;
  background: #fff;
  padding: 13px 13px 15px;
  text-align: center;
}

.ura-icon {
  width: 62px;
  height: 62px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: #eaf3ff;
  color: var(--ura-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 800;
}

.ura-card h3 {
  margin: 0 0 7px;
  color: var(--ura-blue);
  font-size: 16px;
  line-height: 1.25;
}

.ura-card p {
  max-width: 190px;
  margin: 0 auto;
  font-size: 13px;
  line-height: 1.45;
}

/* Assignment flow */

.ura-assignment-flow {
  display: grid;
  grid-template-columns: 1fr 29px 1fr 29px 1fr 29px 1fr;
  align-items: center;
  margin-top: 10px;
}

.ura-flow-card {
  min-height: 153px;
  border: 1px solid #cfe0f2;
  border-radius: 7px;
  background: #f9fcff;
  padding: 12px 13px;
  text-align: left;
}

.ura-flow-icon {
  width: 42px;
  height: 42px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: #eaf8f0;
  color: var(--ura-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  font-weight: 800;
}

.ura-flow-card h3 {
  margin: 0 0 5px;
  color: var(--ura-green);
  font-size: 14px;
}

.ura-flow-card p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
}

.ura-flow-arrow {
  color: var(--ura-blue);
  font-size: 27px;
  text-align: center;
}

/* Role table */

.ura-table {
  width: 100%;
  margin-top: 9px;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #cbd9e8;
  border-radius: 6px;
  overflow: hidden;
  font-size: 12.5px;
}

.ura-table th {
  padding: 7px 11px;
  background: var(--ura-navy);
  color: #fff;
  font-size: 13px;
  text-align: left;
  font-weight: 700;
}

.ura-table td {
  padding: 7px 11px;
  border-top: 1px solid #d7e1ec;
  line-height: 1.35;
  vertical-align: middle;
}

.ura-table tbody tr:nth-child(even) {
  background: #f5f9fd;
}

.ura-role-table th:nth-child(1) {
  width: 19%;
}

.ura-role-table th:nth-child(2) {
  width: 46%;
}

.ura-role-table th:nth-child(3) {
  width: 35%;
}

.ura-table-icon {
  display: inline-flex;
  width: 30px;
  height: 30px;
  margin-right: 8px;
  border-radius: 50%;
  background: #eaf3ff;
  color: var(--ura-blue);
  align-items: center;
  justify-content: center;
  font-size: 15px;
  vertical-align: middle;
}

.ura-muted-icon {
  color: #687789;
  background: #edf0f3;
}

/* Groups */

.ura-groups-layout {
  display: grid;
  grid-template-columns: 1fr 1fr 1.7fr;
  gap: 14px;
  margin-top: 9px;
}

.ura-group-card {
  min-height: 125px;
  border: 1px solid #cfe0f2;
  border-radius: 7px;
  background: #fff;
  padding: 13px;
  display: flex;
  gap: 11px;
  align-items: flex-start;
}

.ura-group-icon {
  flex: 0 0 47px;
  width: 47px;
  height: 47px;
  border-radius: 50%;
  background: #eaf8f0;
  color: var(--ura-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  font-weight: 800;
}

.ura-group-card h3 {
  margin: 1px 0 6px;
  color: var(--ura-green);
  font-size: 15px;
}

.ura-group-card p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
}

.ura-benefits {
  border: 1px solid #bfe1ce;
  border-radius: 7px;
  background: var(--ura-green-bg);
  padding: 12px 14px;
}

.ura-benefits-title {
  color: var(--ura-green);
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 9px;
}

.ura-check-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ura-green);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}

.ura-benefits ul {
  margin: 8px 0 0 5px;
  padding-left: 17px;
}

.ura-benefits li {
  margin: 5px 0;
  font-size: 12.5px;
  line-height: 1.35;
}

/* Important notes */

.ura-notes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 9px;
  border: 1px solid #f0cf82;
  border-radius: 7px;
  background: var(--ura-orange-bg);
  padding: 15px 10px;
}

.ura-note {
  min-height: 66px;
  padding: 0 17px;
  display: flex;
  align-items: center;
  gap: 11px;
  border-right: 1px solid #edc66e;
}

.ura-note:last-child {
  border-right: 0;
}

.ura-note > span {
  flex: 0 0 34px;
  color: var(--ura-orange);
  font-size: 27px;
  font-weight: 800;
  text-align: center;
}

.ura-note p {
  margin: 0;
  color: var(--ura-navy);
  font-size: 12.5px;
  line-height: 1.4;
}

/* Reminder */

.ura-reminder {
  margin-top: 18px;
  min-height: 48px;
}

.ura-reminder strong {
  color: var(--ura-blue);
  margin-right: 5px;
}

/* Just The Docs compatibility */

.ura-page h1::before,
.ura-page h2::before,
.ura-page h3::before {
  content: none !important;
}

.ura-page h1,
.ura-page h2,
.ura-page h3,
.ura-page p {
  letter-spacing: normal;
}

/* Responsive */

@media (max-width: 950px) {
  .ura-card-grid.four {
    grid-template-columns: repeat(2, 1fr);
  }

  .ura-groups-layout {
    grid-template-columns: 1fr 1fr;
  }

  .ura-benefits {
    grid-column: 1 / -1;
  }

  .ura-notes {
    grid-template-columns: repeat(2, 1fr);
  }

  .ura-note:nth-child(2) {
    border-right: 0;
  }

  .ura-note:nth-child(-n+2) {
    border-bottom: 1px solid #edc66e;
    padding-bottom: 10px;
  }

  .ura-note:nth-child(n+3) {
    padding-top: 10px;
  }
}

@media (max-width: 800px) {
  .ura-assignment-flow {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .ura-flow-arrow {
    display: none;
  }

  .ura-groups-layout {
    grid-template-columns: 1fr;
  }

  .ura-benefits {
    grid-column: auto;
  }
}

@media (max-width: 650px) {
  .ura-page {
    padding: 0 10px 28px;
  }

  .ura-page-header {
    height: auto;
    padding: 9px 0;
    gap: 10px;
  }

  .ura-brand {
    font-size: 24px;
  }

  .ura-page-meta {
    font-size: 11px;
  }

  .ura-title-block h1 {
    font-size: 34px;
  }

  .ura-card-grid.four,
  .ura-assignment-flow,
  .ura-notes {
    grid-template-columns: 1fr;
  }

  .ura-note {
    border-right: 0;
    border-bottom: 1px solid #edc66e;
    padding: 10px 15px !important;
  }

  .ura-note:last-child {
    border-bottom: 0;
  }

  .ura-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}