body {
    padding: var(--sidepadding) calc(var(--sidepadding) + 5px);
    min-height: 100dvh;
}

.content-container {
    width: 100%;
    height: auto;
    max-width: 1920px;

    height: 100%;
    min-height: fit-content;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    gap: 24px;

    width: 100%;
    height: 100%;
}

@media (min-width: 768px) { .content-container { flex-direction: row; } }

/* ====================SIDEBAR==================== */

.sidebar {
    width: 100%;
    max-width: none;

    transition: max-width 0.3s ease;
}

@media (min-width: 768px) { .sidebar { max-width: 260px; height: 100%; } }

.sidebar-container {    
    display: flex;
    flex-direction: column;

    height: 100%;
    position: relative;
}

.sidebar-heading {
    padding: 14px 0;
    border-bottom: 1px solid hsl(from var(--text-muted) h s l / 0.5);

    display: flex;
    justify-content: space-between;
    align-items: center;

    white-space: nowrap;

    & svg { width: 19px; }
    
    & p {
        pointer-events: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
    }
}

@media (min-width: 768px) { .sidebar-heading svg { width: 16px; } }

#left-arrow-main { fill: var(--text-default); transition: fill .1s ease; }
.sidebar-heading button:hover #left-arrow-main { fill: var(--interactive-hover); }
.sidebar-heading button:active { scale: .97; }

.sidebar-heading button {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    width: fit-content;
    height: fit-content;

    display: grid;
    place-items: center;

    padding: clamp(0rem, -1.3125rem + 2.7344vw, 0.875rem); /* default = 14px */
}

.sidebar-heading .collapse-sidebar-button { display: none; }
.sidebar-heading .ham-menu { display: grid; margin-right: 15px; }

@media (min-width: 768px) {
  .sidebar-heading .collapse-sidebar-button { display: grid; }
  .sidebar-heading .ham-menu { display: none; }
}

.sidebar-usage {
    display: flex;
    flex-direction: column-reverse;
    gap: 9px;

    padding: 24px 0;

    border-bottom: 1px solid hsl(from var(--text-muted) h s l / 0.5);
}

.text-usage-details {
    color: var(--text-default);
    white-space: nowrap;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sidebar-page-selector {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;

    padding: 24px 0;
}

.sidebar-page-button {
    width: fit-content;
    margin-right: auto;

    text-align: left;
    color: var(--text-default);

    display: flex;
    flex-direction: column;
    gap: 7px;
}

.page-button-active, .sidebar-page-button:hover { color: var(--interactive-hover); }
.page-button-active { color: var(--text-strong); font-weight: 500; }

.sidebar-page-button:active { scale: .99; }

.sidebar-links {
    padding: 12px 0;
    white-space: nowrap;
}

.sidebar-links a {
    font-size: 15px;
    color: var(--text-default);
    
    display: flex;
    align-items: center;
    gap: 4px;

    width: fit-content;

    & svg { width: 16px; fill: var(--text-default); }
    &:active { scale: .99; }
}

.sidebar-links a:hover  {
    color: var(--interactive-hover);
    & svg { fill: var(--interactive-hover); }
}

.sidebar-account {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 24px 0;

    position: relative;
    bottom: 0;

    width: 100%;
    height: fit-content;

    border-top: 1px solid hsl(from var(--text-muted) h s l / 0.5);

    pointer-events: none;
    -webkit-user-select: none;
    -ms-user-select: none; 
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none; 
}

.sidebar-account-icon {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    min-width: 48px;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 50vw;

    font-size: 16px;

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

    background-color: #f0c0c0;

    & p {
        font-weight: 600;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
}

.sidebar-account-details {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-heading p,
.text-usage-details,
.sidebar-account-details {
    transition: opacity 0.2s ease;
}

.collapse .sidebar-heading p,
.collapse .text-usage-details,
.collapse .sidebar-account-details {
    opacity: 0;
}

/* =========COLLAPSE SIDEBAR========= */

.collapse { max-width: 100px; }
.collapse .sidebar-heading { justify-content: center; & p { display: none; } }
.collapse .text-usage-details { display: none; }
.collapse .sidebar-account-details { display: none; }
.collapse .sidebar-heading { & svg { rotate: 180deg; } }
.collapse .sidebar-account { justify-content: center; }

/* =========COLLAPSE HAM MENU========= */

@media (max-width: 768px) {
    .sidebar-usage,
    .sidebar-page-selector,
    .sidebar-links,
    .sidebar-theme,
    .sidebar-account {
        max-height: 1000px;
        opacity: 1;
        overflow: hidden;
        transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.35s ease, border 0.35s ease;
    }

    .collapse-ham-menu .sidebar-usage,
    .collapse-ham-menu .sidebar-page-selector,
    .collapse-ham-menu .sidebar-links,
    .collapse-ham-menu .sidebar-theme,
    .collapse-ham-menu .sidebar-account {
        max-height: 0;
        opacity: 0;
        padding: 0;
        border: none;
    }

    .icon-ham { display: none; }
    .icon-x { display: block; }

    .collapse-ham-menu .icon-ham { display: block; }
    .collapse-ham-menu .icon-x { display: none; }
}

/* ====================DASHBOARD==================== */

.dashboard {
    background-color: var(--surface-base);
    border-radius: 15px;

    width: 100%;
    height: fit-content;
    min-height: 100vh;
}

.dashboard-container {
    padding: clamp(1.5rem, 0.859rem + 2.0513vw, 2.5rem) clamp(1.125rem, 0.5552rem + 2.4309vw, 2.5rem); /* 40px */
}

.dashboard-header { padding: 0 6px; padding-bottom: 24px; }

.dashboard-grid-box {
    border-radius: 8px;
    padding: 20px;

    border: 1px solid hsl(from var(--text-muted) h s l / 0.5);
    background-color: var(--surface-base);

    display: flex;
    flex-direction: column;
    gap: 18px;

    padding-bottom: 40px;
    min-width: 0; /* prevent grid/flex blowout */
}

.dashboard-grid-box-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dashboard-grid-container {
    display: grid;
    gap: 18px;
    align-items: start;
    /* Default: single column on small screens */
    grid-template-columns: 1fr;
}

/* ── Overview grid ─────────────────────────────────────────────────────────── */

/*
  Layout goal (≥ 900px):
  [ stat ] [ stat ] [ stat ] [ stat ]   ← spans full width
  [ 7-day chart         ] [ plan       ]
  [ recent activity (wide)             ]
*/

.dashboard-overview .dashboard-grid-container {
    /* row 1: 4 stat cards side-by-side, rows 2-3: two-column */
    grid-template-columns: 1fr;
    grid-template-areas:
        "stats"
        "chart"
        "plan"
        "activity";
}

@media (min-width: 1280px) {
    .dashboard-overview .dashboard-grid-container {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "stats   stats"
            "chart   plan"
            "activity activity";
    }
}
.overview-main-stats    { grid-area: stats; }
.overview-7-day-requests { grid-area: chart; }
.overview-monthly-quota  { grid-area: plan; }
.overview-recent-activity { grid-area: activity; }

/* stat cards: 1 col → 2x2 grid → full row */
.overview-main-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

@media (min-width: 550px) {
    .overview-main-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1280px) {
    .overview-main-stats { grid-template-columns: repeat(4, 1fr); }
}

.overview-main-stats .overview-stat { min-width: 0; }

/* ── Analytics grid ───────────────────────────────────────────────────────── */

/*
  Layout goal:
  [ stat ] [ stat ] [ stat ] [ stat ]   ← 2x2 → full row (same as overview)
  [ requests graph — full width        ]
  [ endpoints ] [ render mode ] [ errors ]
  [ latency   ] [ top domains          ]
*/

.dashboard-analytics .dashboard-grid-container {
    grid-template-columns: 1fr;
    grid-template-areas:
        "stats"
        "graph"
        "endpoints"
        "render"
        "errors"
        "latency"
        "domains";
}

@media (min-width: 640px) {
    .dashboard-analytics .dashboard-grid-container {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "stats      stats"
            "graph      graph"
            "endpoints  render"
            "errors     latency"
            "domains    domains";
    }
}

@media (min-width: 1200px) {
    .dashboard-analytics .dashboard-grid-container {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas:
            "stats      stats      stats"
            "graph      graph      graph"
            "endpoints  render     errors"
            "latency    domains    domains";
    }
}

.analytics-main-stats        { grid-area: stats; }
.analytics-requests-graphs   { grid-area: graph; min-width: 0; overflow: hidden; }
.analytics-endpoint-breakdowns { grid-area: endpoints; }
.analytics-render-mode       { grid-area: render; }
.analytics-error-codes       { grid-area: errors; }
.analytics-latency           { grid-area: latency; }
.analytics-top-domains       { grid-area: domains; }

/* stat cards: mirror overview — 2x2 → full row */
.analytics-main-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

@media (min-width: 550px) {
    .analytics-main-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1280px) {
    .analytics-main-stats { grid-template-columns: repeat(4, 1fr); }
}

.analytics-main-stats .analytics-stat {
    min-width: 0;
}

/* ── Billing grid ──────────────────────────────────────────────────────────── */

.dashboard-billing .dashboard-grid-container {
    grid-template-columns: 1fr;
}

@media (min-width: 1280px) {
    .dashboard-billing .dashboard-grid-container {
        grid-template-columns: 1fr 1fr;
    }
}

/* ── Settings grid ─────────────────────────────────────────────────────────── */

/*
  Goal:
  [ profile ] [ notifications (tall) ]
  [ danger  ] [ notifications (tall) ]
  [ webhook ]
*/

.dashboard-settings .dashboard-grid-container {
    grid-template-columns: 1fr;
    grid-template-areas:
        "profile"
        "notifs"
        "danger"
        "webhook";
}

@media (min-width: 1280px) {
    .dashboard-settings .dashboard-grid-container {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "profile  notifs"
            "danger   notifs"
            "webhook  notifs";
    }
}

.settings-profile       { grid-area: profile; }
.settings-notifications { grid-area: notifs; }
.settings-delete-account { grid-area: danger; }
.settings-webhook       { grid-area: webhook; }

.dashboard-input {
    display: flex;
    flex-direction: column;
    gap: 10px;

    & select { padding: 0; margin: unset; font-size: 15px; }

    & input, select {
        min-width: 120px;
        height: 100%;
        width: 100%;
        box-sizing: border-box;
        padding: 10px 12px;
        border-radius: 4px;

        background-color: hsl(from var(--text-muted) h s l / 0.1);
        border: 1px solid hsl(from var(--text-muted) h s l / 0.4);
        color: var(--text-strong);

        font-size: 15px;

        &::placeholder { font-size: 15px; }
        /* &:focus { box-shadow: 0 1px 3px hsl(from var(--text-strong) h s l / 0.12); } */
        &:focus { outline: 2px var(--interactive-hover) solid; }
    }

    & select { 
        color: var(--text-default);
        -webkit-appearance: none; 
        -moz-appearance: none;
        appearance: none;  

        &:focus { outline: none; }
        &:valid { color: var(--text-strong); &:focus { color: var(--text-strong); } }
    }

    & button {
        width: 100%;
        padding: 12px 0;
        border-radius: 6px;

        background-color: var(--text-strong);
        color: var(--surface-base);

        font-weight: 500;
        font-size: 15px;

        &:active { scale: .99; }
    }
    
    & p { color: var(--text-default); pointer-events: none; font-size: 15px; white-space: nowrap; }
}

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

.overview-stat {
    gap: 4px;
    padding-bottom: 24px;
    min-width: 0;

    & h1 { font-size: clamp(2.25rem, 2.0946rem + 0.663vw, 2.625rem); font-weight: 640; }
}

.neutral-stat { color: var(--text-default); font-weight: 450; }
.positive-stat { color: var(--status-success); font-weight: 450; }
.negative-stat { color: var(--status-danger); font-weight: 450; }

.overview-7-day-requests { padding-bottom: 30px; gap: 10px; height: 100%; }

.overview-7-day-requests .dashboard-grid-box-content p:last-of-type {
    pointer-events: none;
    -webkit-user-select: none;
    -ms-user-select: none; 
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none; 
}

.overview-monthly-quota { padding-bottom: 36px; height: 100%; }

.overview-monthly-quota .dashboard-grid-box-content p:last-of-type {
    pointer-events: none;
    -webkit-user-select: none;
    -ms-user-select: none; 
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none; 
}

.recent-activity-heading {
    display: flex;
    gap: 12px;
    align-items: center;

    font-size: 15px;
    min-width: 0; /* allow flex children to shrink */

    & p:nth-child(2) {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        min-width: 0;
        flex-shrink: 1;
    }

    & p:last-child {
        flex-shrink: 0; /* keep the timestamp from shrinking */
    }
}

.recent-activity-heading .circle {
    width: 8px;
    height: 8px;
    aspect-ratio: 1 / 1;

    background-color: var(--status-success);
    border-radius: 50vw;

    animation: blink 3.5s linear infinite;

    &.negative { background-color: var(--status-danger); }
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

.recent-activity-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;

    padding-top: 12px;
}

.activity-tag {
    font-size: 13px;
    background-color: var(--text-strong);

    border: 1px solid;

    padding: 3px 8px;
    border-radius: 4px;

    &.positive { background-color: hsl(from var(--status-success) h s l / 0.2); border-color: var(--status-success); color: var(--status-success); }
    &.negative { background-color: hsl(from var(--status-danger) h s l / 0.2); border-color: var(--status-danger); color: var(--status-danger); }
    &.neutral { background-color: hsl(from var(--text-muted) h s l / 0.2); border-radius: 50vw; border-color: var(--text-muted); color: var(--text-default); }
}

/* =========API KEYS========= */

.dashboard-api-keys .dashboard-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 24px;
}

.add-api-key {
    background-color: var(--accent);
    color: #f7f8fa;

    padding: 6px 12px;
    border-radius: 5px;
    font-size: 15px;
    white-space: nowrap;
}

.api-key-box {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;

    padding: 18px;
}

@media (min-width: 1500px) { .api-key-box { flex-direction: row; justify-content: space-between; align-items: center; } }

.api-key-name { padding-bottom: 8px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.api-key-info-tag {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: grid;
    place-items: center;

    color: var(--text-strong);
    font-size: 15px;
    font-weight: 500;

    padding: 2px 5px;
    border-radius: 2px;

    &.positive { background-color: hsl(from var(--status-success) h s l / 0.3); }
    &.negative { background-color: hsl(from var(--status-danger) h s l / 0.3); }
    &.neutral { background-color: hsl(from var(--text-muted) h s l / 0.3); }
}

.api-key-stats {
    display: flex;
    flex-wrap: wrap;
    column-gap: 16px;
    row-gap: 4px;

    color: var(--text-default);
    font-size: 13px;

    white-space: nowrap;
}

.api-key-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    min-width: 0;
}

/* Row 1: the key field (full width) */
.api-key {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    width: 100%;
    min-width: 0;
    box-sizing: border-box;

    border: 1px solid hsl(from var(--text-muted) h s l / 0.5);
    border-radius: 5px;
    padding: 0 14px;
    height: 35px;

    & p {
        font-size: 13px;
        font-weight: 450;
        color: var(--text-default);

        /* truncate the long key string instead of overflowing */
        flex: 1 1 0;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        transition: color .2s ease;
    }

    & button {
        flex-shrink: 0;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        display: grid;
        place-items: center;
    }

    & svg { width: 18px; }

    &:hover p { color: var(--text-strong); }
}

.api-key button svg:last-child { display: none; }
.api-key.revealed button svg:first-child { display: none; }
.api-key.revealed button svg:last-child { display: inline; }

/* Row 2: action buttons sit side-by-side, stretch to fill on mobile */
.api-key-wrapper-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.api-key-wrapper-actions button {
    flex: 1 1 auto;
    min-width: 80px;
    padding: 0 13px;
    height: 35px;
    box-sizing: border-box;
    white-space: nowrap;
}

.api-key-wrapper-actions button:active { scale: .98; }

/* On wider screens let them sit naturally at min-content width */
@media (min-width: 480px) {
    .api-key-wrapper-actions button { flex: 0 0 auto; }
}

/* Side-by-side layout at large breakpoint: wrapper becomes a row */
@media (min-width: 1500px) {
    .api-key-wrapper {
        flex-direction: row;
        align-items: center;
        flex-shrink: 0;
    }

    .dashboard-grid-container .api-key-wrapper { width: auto; }
    .dashboard-api-keys .api-key { width: clamp(220px, 22vw, 380px); }
    .api-key-wrapper-actions { width: auto; flex-wrap: nowrap; }
    .api-key-wrapper-actions button { flex: 0 0 auto; }
}

.api-key-clipboard {
    background-color: var(--text-strong);

    color: var(--surface-base);
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;

    border-radius: 5px;
    padding: 8px 13px;

    transition: background-color .3s ease;

    &:hover { background-color: var(--interactive-hover); }
}

/* API KEY MODALS */

.create-api-container {
    max-width: 700px;
}

.create-key-name { display: flex; flex-direction: column; gap: 6px; }

.api-creation { display: flex; flex-direction: column; gap: 18px; }
.api-creation.hidden { display: none !important; }

.key-information { 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 

    padding: 18px;
    border-radius: 5px;
    background-color: hsl(from var(--text-muted) h s l / 0.1);
}

.dynamic-key-example {
    padding: 18px;
    border-radius: 5px;
    font-size: 13px;

    border: 1px solid hsl(from var(--text-muted) h s l / 0.4);
    background-color: hsl(from var(--text-muted) h s l / 0.16);
}

.schema-input {
    display: flex; 
    flex-direction: column; 
    gap: 18px; 

    height: 100%;
}

.schema-input-guidelines {
    border: 1px solid hsl(from var(--text-muted) h s l / 0.5);
    background-color: hsl(from var(--text-muted) h s l / 0.16);

    border-radius: 5px;
    font-size: 13px;

    & .guidelines-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        column-gap: 12px;
        row-gap: 6px;

        padding: 12px;

        color: var(--text-default);
    }

    & .guidelines-example {
        padding: 16px 18px;

        & p { line-height: 1.5; }
    }
}

@media (max-width: 550px) {
    .guidelines-info.heading {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }
}

.schema-input-box { display: flex; flex-direction: column; gap: 16px; height: 100%; }

.schema-input-box-text-area { width: 100%; height: 100%; }

.schema-input-box-text-area textarea {
    min-width: 100%;
    max-width: 100%;

    box-sizing: border-box;

    min-height: 140px;
    height: 100%;

    text-align: left;
    vertical-align: top; 

    border-radius: 5px;
    padding: 12px;

    border: 1px solid hsl(from var(--text-muted) h s l / 0.5);
    background-color: hsl(from var(--text-muted) h s l / 0.16);

    &:focus { border: 1px solid hsl(from var(--text-muted) h s l / 0.25); }

    &::placeholder { line-height: 1.7; font-weight: 400; }
}

.schema-input-preview {
    padding: 18px;
    border-radius: 5px;
    font-size: 13px;

    margin-top: -8px;

    border: 1px solid hsl(from var(--text-default) h s l / 0.1);
    background-color: hsl(from var(--text-muted) h s l / .16);
}

/* Preview line colors */
.field-name    { color: var(--status-warning);   }
.field-type    { color: var(--status-danger);      }
.field-example { color: var(--accent);   }
.field-hint    { color: var(--text-default); }
.punctuation   { color: var(--text-default); }
.preview-line  { line-height: 1.9; }

/* Parse errors */
#schema-parse-errors { margin-top: 6px; }
.parse-error   { font-size: 12px; color: var(--status-danger); line-height: 1.8; }
.error-line    { color: var(--text-default); }

.confirm-create-api-key {
    margin-left: auto;
    padding-top: 10px;

    display: flex;
    gap: 12px;

    color: var(--text-default);

    & button {
        border-radius: 5px;
        padding: 7px 12px;
        font-weight: 500;
        
        transition: color .2s ease;
        &:hover { color: var(--interactive-hover); }

        &:active { scale: .98; }
    }

    & button:last-of-type {
        background-color: var(--text-strong);
        color: var(--surface-base);

        transition: opacity .2s ease;
        &:hover { color: var(--surface-base); opacity: .75; }
    }

    & button:last-of-type.disabled {
        background-color: var(--text-default);
        opacity: .5;
        pointer-events: none;
        cursor: default;

        &:hover { color: var(--surface-base); opacity: .5; }
    }
}

.revoke-api-container {
    max-width: 700px;
    
    & .api-key-box { 
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

    & .api-key {
        width: 100%;
        box-sizing: border-box;

        & p {
            min-width: 0;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }
}

@media (max-width: 470px) { .revoke-api-container .api-key p { max-width: 180px; width: 100%; } }

.warning-revoke {
    border-radius: 5px;
    padding: 16px;

    border: 1px solid hsl(from var(--status-danger) h s l / 0.7);
    background-color: rgba(239, 68, 68, .1);

    font-size: 15px;
}

.confirm-revoke { 
    font-size: 15px; 
    display: flex; 
    flex-direction: column; 
    gap: 9px; 

    & .input-confirm:focus-within { box-shadow: 0 1px 3px hsl(from black h s l / 0.12); }
}

.input-confirm {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 12px;
    border-radius: 8px;

    border: 1px solid hsl(from var(--text-muted) h s l / 0.4);
    color: var(--text-strong);

    display: flex;
    gap: 8px;

    & svg { width: 19px; fill: var(--status-danger);}
    & input { width: 100%; }
    & input::placeholder { font-size: 15px; }
}

.revoke-buttons {
    margin-left: auto;
    padding-top: 10px;

    display: flex;
    gap: 12px;

    color: var(--text-default);

    & button {
        border-radius: 5px;
        padding: 7px 12px;
        font-weight: 500;
        
        transition: color .2s ease;
        &:hover { color: var(--interactive-hover); }

        &:active { scale: .98; }
    }

    & .red-button {
        background-color: var(--status-danger);
        color: var(--surface-base);

        transition: opacity .2s ease;
        &:hover { color: var(--surface-base); opacity: .75; }
    }

    & .red-button.disabled {
        background-color: var(--text-default);
        opacity: .5;
        pointer-events: none;
        cursor: default;

        &:hover { color: var(--surface-base); opacity: .5; }
    }
}

.success-api {
    & .api-key-box { 
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

    & .api-key {
        width: 100%;
        box-sizing: border-box;

        & p {
            min-width: 0;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }
}

.success-api-container { max-width: 500px; gap: 16px; }

.success-api .success-text { font-size: 15px; & h1 { font-size: 28px; padding-bottom: 12px;} }

.success-api .api-key-box { padding: 0; }
.success-api .api-key-wrapper { flex-direction: column; gap: 9px; }
.success-api .api-key p { padding: 12px 0; font-size: 15px; max-width: fit-content; }
@media (max-width: 470px) { .success-api-container .api-key p { max-width: 180px; width: 100%; } }
.success-api .api-key-clipboard { width: 100%; padding: 9px 0; &:active { scale: .99; } }

/* =========ANALYTICS========= */

.analytics-stat {
    gap: 4px;
    padding-bottom: 24px;
    min-width: 0;

    & h1 { font-size: clamp(2.25rem, 2.0946rem + 0.663vw, 2.625rem); font-weight: 640; }
}

.analytics-progresses { height: 100%; }
.analytics-latency    { height: 100%; }

/* Graph scroll wrapper — `min-width: 0` + `width: 100%` contains the
   overflow so the min-width on the inner bar-graph doesn't bleed out
   and cause page-level horizontal scrolling on mobile */
.analytics-daily-graph,
.analytics-monthly-graph {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
    scrollbar-width: thin;
    scrollbar-color: hsl(from var(--text-muted) h s l / 0.6) transparent;
}

.analytics-daily-graph .bar-graph,
.analytics-monthly-graph .bar-graph { min-width: 768px; }

.analytics-daily-graph::-webkit-scrollbar,
.analytics-monthly-graph::-webkit-scrollbar { height: 4px; }

.analytics-daily-graph::-webkit-scrollbar-track,
.analytics-monthly-graph::-webkit-scrollbar-track { background: transparent; }

.analytics-daily-graph::-webkit-scrollbar-thumb,
.analytics-monthly-graph::-webkit-scrollbar-thumb {
    background-color: hsl(from var(--text-muted) h s l / 0.6);
    border-radius: 4px;
}

.analytics-requests-graphs small {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;

    gap: 8px;
}

@media (min-width: 768px) {
    .analytics-requests-graphs small { flex-direction: row; justify-content: space-between; align-items: center; }
}

.analytics-top-domains {
    padding-bottom: 32px;

    & table {
        border-collapse: collapse;
        border-spacing: 15px;
    }

    & td, th { padding: 10px 20px; }

    & tr:not(:first-of-type) {
        color: var(--text-default);
        transition: background-color .3s ease;
        &:hover { background-color: hsl(from var(--text-muted) h s l / 0.2); }
    }

    & tr td:first-of-type { color: var(--text-strong); font-weight: 500; }

    & th {
        font-weight: 400;
        color: var(--text-default);
        text-align: left;

        border-bottom: 1px solid hsl(from var(--text-muted) h s l / 0.5);
    }
}

.success-percent {
    font-size: 13px;
    background-color: var(--text-strong);

    border: 1px solid;

    padding: 3px 8px;
    width: fit-content;
    border-radius: 4px;

    &.positive { background-color: hsl(from var(--status-success) h s l / 0.2); border-color: var(--status-success); color: hsl(from var(--text-strong) h s l / 0.9); font-weight: 450; }
    &.negative { background-color: hsl(from var(--status-danger) h s l / 0.2); border-color: var(--status-danger); color: hsl(from var(--text-strong) h s l / 0.9); font-weight: 450; }
}

/* =========BILLING========= */

.billing-current-plan { height: fit-content; height: 100%; }

.current-plan-pricing-name {
    display: flex;
    gap: 3px;
    padding-top: 10px;
}

.current-plan-usage .progress .bar { background-color: var(--accent) }

@media (max-width: 500px) { .billing-current-plan .side-by-side-buttons { flex-direction: column; gap: 9px; & button { padding: 12px 0; box-sizing: border-box; } } }

#upgrade-plan-button { transition: background-color .2s ease; }
#upgrade-plan-button:hover { background-color: var(--accent); }

.billing-payment-invoice { height: fit-content; }

.card-info-container {
    display: flex;
    align-items: center;
    gap: 20px;

    padding: 12px 3px;
}

.card-info-icon {
    padding: 12px 15px;
    border-radius: 3px;

    background-color: var(--accent-subtle);
    color: var(--accent);
    font-size: 17px;
}

.payment-invoice-record {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;

    text-align: right;
}

.payment-invoice-record p:first-of-type { margin-right: auto; color: var(--text-default); }

.payment-invoice-billing-date {
    pointer-events: none;
    -webkit-user-select: none;
    -ms-user-select: none; 
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none; 
}

.current-balance {
    border: 1px solid hsl(from var(--text-muted) h s l / 0.25);
    background-color: hsl(from var(--text-muted) h s l / 0.05);

    border-radius: 5px;
    padding: 18px;

    font-size: 15px;

    display: flex;
    flex-direction: column;
    gap: 4px;

    & div { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
}

.cost-preview {
    border: 1px solid hsl(from var(--text-muted) h s l / 0.5);
    background-color: hsl(from var(--accent-subtle) h s l / 0.36);

    border-radius: 5px;
    padding: 18px;
    
    font-size: 15px;

    display: flex;
    flex-direction: column;
    gap: 4px;

    & div { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
}

.overage-purchase-button {
    width: 100%;

    display: flex;
    flex-direction: column;
    gap: 8px;

    & button {
        width: 100%;

        background-color: var(--accent);
        color: var(--surface-base);

        font-size: 15px;
        font-weight: 500;

        padding: 10px 16px;
        border-radius: 6px;
        box-sizing: border-box;
        
        &:active { scale: .99; }
    }
}

.billing-pricing-plans {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.pricing-plans-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    gap: 12px;
    padding: 0;
}

.pricing-plan {
    width: 100%;
    flex: 1 1 300px;
}

.pricing-plan.current {
    pointer-events: none; 
    cursor: default; 
    opacity: .36;

    pointer-events: none;
    -webkit-user-select: none;
    -ms-user-select: none; 
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none; 
}

.plan-cta.stroked {
    background-color: inherit; 
    color: var(--text-default); 
    border: 1px solid var(--text-default);

    transition: color .2s ease, border-color .2s ease;
}

.plan-cta.upgrade { transition: background-color .2s ease; }
.plan-cta.upgrade:hover { background-color: var(--accent); }

/* =========SETTINGS========= */

.settings-profile {
    height: fit-content;
}

.settings-account {
    display: flex;
    align-items: center;
    gap: 12px;

    position: relative;
    bottom: 0;

    width: 100%;
    height: fit-content;

    pointer-events: none;
    -webkit-user-select: none;
    -ms-user-select: none; 
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none; 
}

.settings-account-icon {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    width: 64px;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 50vw;

    font-size: 18px;

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

    background-color: #f0c0c0;

    & p {
        font-weight: 600;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
}

.settings-account-details p {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
    flex-shrink: 1;
}

.settings-notifications {
    height: fit-content;
}

.settings-delete-account {
    height: fit-content;

    border-color: var(--status-danger);

    padding-bottom: 30px;

    & button {
        border-radius: 5px;
        padding: 8px 12px;
        width: fit-content;

        border: 1px solid var(--status-danger);

        font-weight: 500;
        font-size: 14px;

        transition: background-color .2s ease;

        &:hover { background-color: rgba(239, 68, 68, .2); }  
        &:active { scale: .99; }    
    }
}

.settings-webhook {
    height: fit-content;
}