.dashboard-page {
    --api-ink: #102238;
    --api-muted: #607086;
    --api-line: #d9e3ec;
    --api-soft: #f5f8fb;
    --api-brand: #087f5b;
    --api-brand-dark: #066548;
    display: grid;
    gap: 1.25rem;
}

.page-heading {
    background:
        radial-gradient(circle at 88% 10%, rgba(52, 211, 153, 0.2), transparent 24rem),
        linear-gradient(125deg, #0a2038 0%, #103653 58%, #0b5f55 140%);
    border: 0;
    border-radius: 18px;
    box-shadow: 0 20px 45px rgba(8, 34, 60, 0.18);
    color: #fff;
    overflow: hidden;
    padding: 1.65rem 1.8rem;
    position: relative;
}

.page-heading::after {
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
    content: "";
    height: 12rem;
    position: absolute;
    right: -3rem;
    top: -6rem;
    width: 12rem;
}

.page-heading p {
    color: #72e5bd;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .14em;
    margin: 0 0 .4rem;
    text-transform: uppercase;
}

.page-heading h1 {
    color: #fff;
    font-size: clamp(1.65rem, 2.6vw, 2.35rem);
    letter-spacing: -.035em;
    margin: 0;
}

.page-status {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    color: #d9e9f2;
    padding: .48rem .55rem .48rem .85rem;
    position: relative;
    z-index: 1;
}

.page-status strong {
    background: #34d399;
    border-radius: 999px;
    color: #073c2d;
    padding: .32rem .7rem;
}

.panel {
    border: 1px solid var(--api-line);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(15, 35, 55, .07);
    padding: 1.25rem;
}

.panel-title {
    border-bottom: 1px solid #e7edf3;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
}

.panel-title h2 {
    color: var(--api-ink);
    font-size: 1.08rem;
    letter-spacing: -.015em;
}

.panel-actions {
    display: flex;
    gap: .55rem;
}

.panel-title button {
    border-radius: 9px;
    cursor: pointer;
    min-height: 2.55rem;
    padding: .55rem 1rem;
    transition: transform 140ms ease, box-shadow 140ms ease;
}

.panel-title button:not(.secondary-action) {
    background: var(--api-brand);
    box-shadow: 0 7px 16px rgba(8,127,91,.2);
}

.panel-title button:hover {
    box-shadow: 0 9px 20px rgba(8,127,91,.2);
    transform: translateY(-1px);
}

.feedback-banner {
    border-radius: 10px;
    margin-bottom: 1rem;
    padding: .8rem 1rem;
}

.table-wrap {
    overflow: visible;
}

.endpoint-table {
    min-width: 0;
}

.endpoint-table thead {
    display: none;
}

.endpoint-table tbody {
    display: grid;
    gap: 1rem;
}

.endpoint-table tr {
    background: linear-gradient(180deg, #fff, #fbfcfe);
    border: 1px solid var(--api-line);
    border-radius: 13px;
    display: grid;
    gap: .85rem 1rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 1rem;
    position: relative;
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.endpoint-table tr:hover {
    border-color: #b8d5ca;
    box-shadow: 0 12px 25px rgba(22, 53, 75, .08);
    transform: translateY(-1px);
}

.endpoint-table td {
    align-content: start;
    border: 0;
    color: var(--api-ink);
    display: grid;
    font-size: .88rem;
    gap: .38rem;
    min-width: 0;
    padding: 0;
}

.endpoint-table td::before {
    color: var(--api-muted);
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: .075em;
    text-transform: uppercase;
}

.endpoint-table td:nth-child(1) {
    align-items: center;
    background: #eaf6f1;
    border-radius: 9px;
    color: var(--api-brand-dark);
    display: flex;
    font-size: .95rem;
    font-weight: 900;
    grid-column: span 2;
    min-height: 2.65rem;
    padding: .6rem .8rem;
}

.endpoint-table td:nth-child(1)::before { content: none; }
.endpoint-table td:nth-child(2) { grid-column: span 2; }
.endpoint-table td:nth-child(3) { grid-column: span 2; }
.endpoint-table td:nth-child(10) { grid-column: span 3; }
.endpoint-table td:nth-child(11) { align-items: end; }
.endpoint-table td:nth-child(2)::before { content: "Base URL"; }
.endpoint-table td:nth-child(3)::before { content: "Endpoint path"; }
.endpoint-table td:nth-child(4)::before { content: "Username"; }
.endpoint-table td:nth-child(5)::before { content: "Password"; }
.endpoint-table td:nth-child(6)::before { content: "Timeout"; }
.endpoint-table td:nth-child(7)::before { content: "Method"; }
.endpoint-table td:nth-child(8)::before { content: "Sync schedule"; }
.endpoint-table td:nth-child(9)::before { content: "Status"; }
.endpoint-table td:nth-child(10)::before { content: "Last check"; }
.endpoint-table td:nth-child(11)::before { content: "Connection test"; }

.table-input {
    background: var(--api-soft);
    border: 1px solid #cbd7e2;
    border-radius: 8px;
    font-size: .86rem;
    min-height: 2.55rem;
    outline: 0;
    padding: .52rem .65rem;
    transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.table-input:focus {
    background: #fff;
    border-color: var(--api-brand);
    box-shadow: 0 0 0 3px rgba(8,127,91,.12);
}

.table-input.compact { min-width: 0; }

.badge {
    justify-self: start;
    min-height: 2.1rem;
    padding: .48rem .7rem;
}

.table-action {
    background: var(--api-ink);
    border-radius: 8px;
    min-height: 2.55rem;
    width: 100%;
}

.table-action:hover { background: #173c5f; }

.table-message {
    max-width: none;
    white-space: normal;
}

.smart-fill-settings-card .endpoint-table tr {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.smart-fill-settings-card .endpoint-table td:nth-child(1) {
    grid-column: span 3;
}

.smart-fill-settings-card .endpoint-table td:nth-child(2),
.smart-fill-settings-card .endpoint-table td:nth-child(3),
.smart-fill-settings-card .endpoint-table td:nth-child(10) {
    grid-column: auto;
}

.smart-fill-settings-card .endpoint-table td:nth-child(4)::before { content: "API key"; }
.smart-fill-settings-card .endpoint-table td:nth-child(5)::before { content: "Secret"; }
.smart-fill-settings-card .endpoint-table td:nth-child(6)::before { content: "Request template"; }

.endpoint-status-line {
    background: #f2f7fa;
    border: 1px dashed #bfd0dc;
    border-radius: 10px;
    display: grid;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .75rem;
    gap: .45rem;
    padding: .8rem .9rem;
    word-break: break-all;
}

.form-grid.request-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.form-grid.auth-grid {
    grid-template-columns: minmax(16rem, 2fr) repeat(2, minmax(10rem, 1fr));
}

.form-grid input,
.form-grid select {
    border-radius: 8px;
    min-height: 2.7rem;
}

.form-grid input:focus,
.form-grid select:focus {
    background: #fff;
    border-color: var(--api-brand);
    box-shadow: 0 0 0 3px rgba(8,127,91,.12);
    outline: 0;
}

@media (max-width: 1050px) {
    .endpoint-table tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .endpoint-table td:nth-child(10) { grid-column: span 1; }
    .smart-fill-settings-card .endpoint-table tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .smart-fill-settings-card .endpoint-table td:nth-child(1) { grid-column: span 2; }
    .form-grid.request-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .form-grid.auth-grid { grid-template-columns: 1fr 1fr; }
    .form-grid.auth-grid label:first-child { grid-column: 1 / -1; }
}

@media (max-width: 650px) {
    .dashboard-page { gap: .9rem; }
    .page-heading { align-items: flex-start; border-radius: 13px; padding: 1.25rem; }
    .page-status { margin-top: .75rem; }
    .panel { border-radius: 13px; padding: .9rem; }
    .panel-title { align-items: stretch; gap: .8rem; }
    .panel-actions { width: 100%; }
    .panel-actions button { flex: 1; }
    .endpoint-table tr,
    .smart-fill-settings-card .endpoint-table tr { grid-template-columns: 1fr; padding: .85rem; }
    .endpoint-table td:nth-child(1),
    .endpoint-table td:nth-child(2),
    .endpoint-table td:nth-child(3),
    .endpoint-table td:nth-child(10),
    .smart-fill-settings-card .endpoint-table td:nth-child(1) { grid-column: auto; }
    .form-grid.request-grid,
    .form-grid.auth-grid { grid-template-columns: 1fr; }
    .form-grid.auth-grid label:first-child { grid-column: auto; }
}

.fma-support-grid {
    border-top: 1px solid #e1e9ef;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1.45fr) minmax(20rem, 1fr);
    margin-top: 1.15rem;
    padding-top: 1.15rem;
}

.endpoint-subpanel {
    background: linear-gradient(180deg, #f7fafc, #f2f7f8);
    border: 1px solid #d5e3e7;
    border-radius: 13px;
    padding: 1rem;
}

.subpanel-heading {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: .9rem;
}

.subpanel-heading h2 {
    color: var(--api-ink);
    font-size: .95rem;
    margin: 0;
}

.endpoint-subpanel .form-grid.request-grid,
.endpoint-subpanel .form-grid.auth-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.auth-panel {
    background: linear-gradient(145deg, #f3f8fb, #edf7f3);
}

.auth-panel .form-grid.auth-grid {
    grid-template-columns: 1fr;
}

.auth-panel .source-line {
    margin: .8rem 0 0;
}

@media (max-width: 1050px) {
    .fma-support-grid { grid-template-columns: 1fr; }
    .auth-panel .form-grid.auth-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 650px) {
    .endpoint-subpanel .form-grid.request-grid,
    .endpoint-subpanel .form-grid.auth-grid,
    .auth-panel .form-grid.auth-grid { grid-template-columns: 1fr; }
    .subpanel-heading { align-items: flex-start; flex-direction: column; gap: .3rem; }
}

.panel-eyebrow {
    color: var(--api-brand);
    display: block;
    font-size: .64rem;
    font-weight: 900;
    letter-spacing: .1em;
    margin-bottom: .25rem;
    text-transform: uppercase;
}

.panel-title > div:first-child {
    display: grid;
    gap: .15rem;
}

/* Simple API Settings layout */
.dashboard-page {
    gap: 1rem;
    max-width: 1440px;
    margin: 0 auto;
}

.page-heading {
    background: #ffffff;
    border: 1px solid #d8e2ea;
    border-left: 5px solid #087f5b;
    border-radius: 10px;
    box-shadow: none;
    color: #102238;
    min-height: 6rem;
    padding: 1.2rem 1.35rem;
}

.page-heading::after {
    display: none;
}

.page-heading p {
    color: #087f5b;
    letter-spacing: .1em;
}

.page-heading h1 {
    color: #102238;
    font-size: 1.75rem;
}

.page-status {
    background: #f2f7f5;
    border: 1px solid #cfe2da;
    color: #50677a;
    padding: .4rem .45rem .4rem .75rem;
}

.page-status strong {
    background: #d9f3e8;
    color: #087454;
}

.panel {
    border: 1px solid #d8e2ea;
    border-radius: 10px;
    box-shadow: none;
    padding: 1.1rem;
}

.panel-title {
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: .85rem;
}

.panel-title h2 {
    font-size: 1.05rem;
}

.panel-eyebrow {
    font-size: .62rem;
    margin-bottom: .1rem;
}

.panel-meta {
    color: #6b7b8c;
    font-size: .76rem;
    font-weight: 700;
}

.panel-title button {
    border-radius: 7px;
    box-shadow: none !important;
    min-height: 2.4rem;
    transform: none !important;
}

.panel-title button:not(.secondary-action) {
    background: #087f5b;
}

.endpoint-table tbody {
    gap: .75rem;
}

.endpoint-table tr {
    background: #ffffff;
    border: 1px solid #dbe4eb;
    border-radius: 8px;
    box-shadow: none !important;
    gap: .75rem .9rem;
    padding: .9rem;
    transform: none !important;
}

.endpoint-table tr:hover {
    border-color: #a9cbbd;
}

.endpoint-table td:nth-child(1) {
    background: #edf7f3;
    border-radius: 6px;
    min-height: 2.4rem;
}

.table-input,
.form-grid input,
.form-grid select {
    background: #ffffff;
    border-color: #cbd7e2;
    border-radius: 6px;
    min-height: 2.45rem;
}

.table-input:focus,
.form-grid input:focus,
.form-grid select:focus {
    border-color: #087f5b;
    box-shadow: 0 0 0 2px rgba(8, 127, 91, .1);
}

.table-action {
    background: #102238;
    border-radius: 6px;
    min-height: 2.45rem;
}

.fma-support-grid {
    background: #f7f9fb;
    border: 1px solid #dfe7ed;
    border-radius: 8px;
    gap: .8rem;
    grid-template-columns: minmax(0, 1.5fr) minmax(18rem, 1fr);
    margin-top: 1rem;
    padding: .8rem;
}

.endpoint-subpanel,
.auth-panel {
    background: #ffffff;
    border: 1px solid #dbe4eb;
    border-radius: 7px;
    padding: .85rem;
}

.subpanel-heading {
    margin-bottom: .75rem;
}

.endpoint-status-line {
    background: #f7f9fb;
    border: 1px solid #dbe4eb;
    border-radius: 7px;
}

.feedback-banner {
    border-radius: 7px;
}

@media (max-width: 1050px) {
    .fma-support-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px) {
    .page-heading,
    .panel {
        border-radius: 8px;
    }

    .page-heading {
        padding: 1rem;
    }

    .panel {
        padding: .8rem;
    }

    .fma-support-grid {
        padding: .6rem;
    }
}

/* Premium API workspace */
.dashboard-page{--api-brand:#07805c;--api-ink:#0c2038;counter-reset:api-card;gap:1rem;max-width:1480px;margin:0 auto}.page-heading{background:linear-gradient(112deg,#081f36,#0b2d49 72%,#075b50 145%);border:0;border-radius:14px;box-shadow:0 14px 32px rgba(8,31,54,.14);color:#fff;min-height:7rem;padding:1.35rem 1.5rem}.page-heading::before{background:#20c997;content:"";height:3px;left:1.5rem;position:absolute;top:0;width:4rem}.page-heading::after{border:26px solid rgba(255,255,255,.035);display:block;height:11rem;right:8rem;top:-6.5rem;width:11rem}.page-heading p{color:#70dfbc}.page-heading h1{color:#fff;font-size:clamp(1.65rem,2.4vw,2.1rem)}.page-status{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#d7e4ed}.page-status strong{background:#20c997;color:#063b2c}.panel{border:1px solid #d7e1e9;border-radius:12px;box-shadow:0 8px 24px rgba(19,45,70,.055);counter-increment:api-card;padding:1.15rem;position:relative}.panel::before{background:#081f36;border-radius:0 0 7px 7px;color:#fff;content:"0" counter(api-card);font-size:.66rem;font-weight:900;left:1.15rem;letter-spacing:.08em;padding:.35rem .55rem;position:absolute;top:0}.smart-fill-settings-card::before{background:#07805c}.panel-title{align-items:end;min-height:4.2rem;padding:.75rem 0 .9rem 3.25rem}.panel-title h2{font-size:1.15rem}.panel-title button{border-radius:7px;min-height:2.35rem}.panel-title button:not(.secondary-action){background:#07805c}.endpoint-table tbody{gap:.72rem}.endpoint-table tr{background:#fbfcfd;border:1px solid #dae3ea;border-left:4px solid #aab9c5;border-radius:9px;box-shadow:none!important;gap:.72rem .8rem;padding:.85rem;transform:none!important}.endpoint-table tr:hover{background:#fff;border-color:#a9cabc;border-left-color:#07805c}.endpoint-table td:nth-child(1){background:transparent;border-radius:0;color:#0c2038;font-size:.96rem;min-height:2.35rem;padding:0}.table-input,.form-grid input,.form-grid select{background:#fff;border-color:#c9d5df;border-radius:6px;font-size:.82rem;min-height:2.35rem}.table-action{background:#081f36;border-radius:6px;min-height:2.35rem}.fma-support-grid{background:#f3f6f8;border:1px solid #dce5eb;border-radius:9px;gap:.75rem;grid-template-columns:minmax(0,1.55fr) minmax(18rem,1fr);margin-top:.85rem;padding:.7rem}.endpoint-subpanel,.auth-panel{background:#fff;border:1px solid #d8e2e9;border-radius:7px;padding:.8rem}.auth-panel{border-top:3px solid #07805c}.endpoint-status-line{background:#081f36;border:0;border-radius:7px;color:#d8e8f2}.smart-fill-settings-card .endpoint-table tbody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.smart-fill-settings-card .endpoint-table tr{border-left-color:#07805c;grid-template-columns:repeat(2,minmax(0,1fr))}.smart-fill-settings-card .endpoint-table td:nth-child(1){grid-column:1/-1}.smart-fill-settings-card .endpoint-table td:nth-child(2),.smart-fill-settings-card .endpoint-table td:nth-child(3){grid-column:auto}@media(max-width:1100px){.fma-support-grid,.smart-fill-settings-card .endpoint-table tbody{grid-template-columns:1fr}}@media(max-width:650px){.page-heading{border-radius:11px}.panel{border-radius:10px}.panel-title{padding-left:0;padding-top:1.8rem}.smart-fill-settings-card .endpoint-table tr{grid-template-columns:1fr}.smart-fill-settings-card .endpoint-table td:nth-child(1){grid-column:auto}}

/* Full-width API workspace */
.dashboard-shell.dashboard-shell-single {
    width: 100%;
    max-width: none;
}

.dashboard-shell.dashboard-shell-single > .dashboard-page {
    width: 100%;
    max-width: none;
}

@media (min-width: 1200px) {
    .dashboard-shell.dashboard-shell-single {
        padding-inline: clamp(.25rem, 1vw, 1rem);
    }
}