@import "jakarta-font.css";

:root {
  --font-family: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --page-a: #EEF3FD;
  --page-b: #F8FAFD;
  --surface: #FFFFFF;
  --surface-soft: #F5F7FB;
  --border: #EDF0F6;
  --text-primary: #12141C;
  --text-secondary: #8A93A7;
  --text-tertiary: #B7BECC;
  --blue: #2F6FED;
  --blue-dark: #1D5FE0;
  --blue-bg: #E7EFFE;
  --violet: #8B5CF6;
  --violet-bg: #F1ECFE;
  --teal: #12B5A0;
  --teal-bg: #E1F7F3;
  --amber: #F5A623;
  --amber-bg: #FFF3DF;
  --success: #1FAE6B;
  --danger: #F0473F;
  --danger-bg: #FDECEC;
  --ink-900: #0f172a;
  --ink-800: #111827;
  --ink-700: #1e293b;
  --shadow-soft: 0 16px 40px -18px rgba(30,41,86,0.16);
  --shadow-card: 0 10px 26px -14px rgba(30,41,86,0.10);
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
}

* { box-sizing: border-box; }

html,
body {
    font-family: var(--font-family);
}

body.kgate-surface {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text-primary);
  background:
    radial-gradient(720px 420px at 8% -8%, rgba(47,111,237,0.10), transparent 60%),
    radial-gradient(600px 380px at 96% 0%, rgba(139,92,246,0.07), transparent 55%),
    linear-gradient(180deg, var(--page-a), var(--page-b) 340px);
  min-height: 90vh;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

body.kgate-dark-surface {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at top left, rgba(47,111,237,0.35), transparent 35%),
    linear-gradient(135deg, var(--ink-900), #1e3a8a);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---- Reusable card ---- */
.kgate-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border: none;
}

.kgate-card-soft {
  background: var(--surface-soft);
  border-radius: var(--radius-md);
  border: none;
}

/* ---- Icon base — every icon in the app should use this wrapper,
   regardless of which icon font (Font Awesome today, Tabler later
   if we ever switch) actually renders inside it. Swapping icon sets
   later only means changing the <i> classes, never this wrapper. ---- */
.icon-base {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  color: #fff;
}
.icon-base.size-sm { width: 38px; height: 38px; border-radius: 12px; }
.icon-base.size-md { width: 46px; height: 46px; border-radius: 16px; }
.icon-base.size-lg { width: 72px; height: 72px; border-radius: 50%; }

.icon-base.tone-blue   { background: linear-gradient(155deg, var(--blue), #4E8CFF); box-shadow: 0 10px 20px -8px rgba(47,111,237,0.55); }
.icon-base.tone-violet { background: linear-gradient(155deg, var(--violet), #B69CFB); box-shadow: 0 10px 20px -8px rgba(139,92,246,0.5); }
.icon-base.tone-teal   { background: linear-gradient(155deg, var(--teal), #4FD9C4); box-shadow: 0 10px 20px -8px rgba(18,181,160,0.5); }
.icon-base.tone-danger { background: linear-gradient(155deg, var(--danger), #FF8A83); box-shadow: 0 10px 20px -8px rgba(240,71,63,0.5); }
.icon-base.tone-soft-blue   { background: var(--blue-bg);   color: var(--blue);   box-shadow: none; }
.icon-base.tone-soft-violet { background: var(--violet-bg); color: var(--violet); box-shadow: none; }
.icon-base.tone-soft-teal   { background: var(--teal-bg);   color: var(--teal);   box-shadow: none; }
.icon-base.tone-soft-amber  { background: var(--amber-bg);  color: var(--amber);  box-shadow: none; }
.icon-base.tone-amber { background: linear-gradient(155deg, var(--amber), #FFC966); box-shadow: 0 10px 20px -8px rgba(245,166,35,0.5); color: #fff; }

/* ---- Pill buttons matching the dashboard's action styling ---- */
.btn-kgate-primary {
  background: linear-gradient(155deg, var(--blue), #4E8CFF);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.85rem 1.25rem;
  font-weight: 700;
  font-size: 13.5px;
  box-shadow: 0 10px 20px -9px rgba(47,111,237,0.6);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-kgate-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 26px -10px rgba(47,111,237,0.7); color: #fff; }

.btn-kgate-outline {
  background: var(--surface);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.85rem 1.25rem;
  font-weight: 700;
  font-size: 13.5px;
  transition: all .15s ease;
}
.btn-kgate-outline:hover { background: var(--surface-soft); color: var(--text-primary); }

.text-tertiary { color: var(--text-tertiary); }
.text-kgate-secondary { color: var(--text-secondary); }

/* ---- Status pill — small badge above a card's heading, e.g. "License Required" ---- */
/* ---- Status pill — small badge above a card's heading, e.g. "License Required" ---- */
.public-status-pill {
  display: inline-block;
  border-radius: 999px;
  padding: .35rem .9rem;
  font-size: .85rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.public-status-pill.tone-amber  { background: rgba(245,166,35,.15); color: #b45309; border: 1px solid rgba(245,166,35,.3); }
.public-status-pill.tone-danger { background: var(--danger-bg); color: var(--danger); border: 1px solid rgba(240,71,63,.25); }
.public-status-pill.tone-teal   { background: var(--teal-bg); color: var(--teal); border: 1px solid rgba(18,181,160,.25); }
/* ---- Info list — the small icon+text rows explaining page state ---- */
.info-list {
  background: var(--surface-soft);
  border-radius: var(--radius-md);
  padding: 1rem;
  text-align: left;
  font-size: .95rem;
}
.info-list .info-row { display: flex; align-items: flex-start; gap: 12px; }
.info-list .info-row + .info-row { margin-top: .6rem; }
.info-list .info-row i { width: 20px; flex-shrink: 0; margin-top: 2px; color: var(--amber); }

/* ---- Utility font sizes not covered by Bootstrap's defaults ---- */
.fs-13  { font-size: 13px; }
.fs-135 { font-size: 13.5px; }

/* ---- Alert-style banners (dashboard license status) ---- */
.banner-card {
  border-left: 4px solid transparent;
}
.banner-card.banner-amber  { border-left-color: var(--amber); }
.banner-card.banner-danger { border-left-color: var(--danger); }

.banner-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.banner-content {
  flex: 1;
  min-width: 200px;
}

.banner-title {
  font-weight: 800;
  font-size: 16px;
}

.banner-text {
  color: var(--text-secondary);
  font-size: 13.5px;
}

/* ---- Grid modifier: 2-column variant of .dashboard-kpi-grid (About page) ---- */
.kpi-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

/* ---- License status row (About page) ---- */
.license-status-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

/* ---- Label/value meta list (About page installation & license details) ---- */
.meta-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
}

.meta-value {
  color: var(--text-primary);
}

/* ---- Common centered pages ---- */

.kgate-page-wrapper {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}


/* ---- Common page card ---- */
.kgate-page-card {
  width: 100%;
  max-width: 420px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 0;
}


/* ---- Common card header ---- */
.kgate-card-header {
  padding: 2.5rem 2rem 1.75rem;
  text-align: center;
  background:
    radial-gradient(300px 180px at 50% 0%, rgba(47,111,237,.18), transparent 70%);
}

.kgate-card-header .icon-base {
  margin: 0 auto 1rem;
}

.kgate-card-header i {
  font-size: 30px;
}

.kgate-card-header h2,
.kgate-card-header h3 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.kgate-card-header p {
  margin-top: .5rem;
  margin-bottom: 0;
  color: var(--text-secondary);
  font-size: .9rem;
}


/* ---- Common card body ---- */
.kgate-card-body {
  padding: 0 32px 32px;
}


/* ---- Landing / License body spacing ---- */
.kgate-page-card .page-icon {
  margin-top: -76px;
}


/* ---- Status ---- */
.license-card .public-status-pill {
  margin-top: 4px;
}


/* ---- Login form ---- */
.login-card .form-label {
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-primary);
}

.login-card .input-group-text {
  background: var(--surface-soft);
  border-color: var(--border);
  color: var(--text-secondary);
}

.login-card .form-control {
  border-color: var(--border);
  padding: .75rem 1rem;
}

.login-card .form-control:focus {
  border-color: var(--blue);
  box-shadow: 0 0 .2rem rgba(47,111,237,.15);
}

/* ---- Footer ---- */
.page-footer {
  padding: 1rem 0;
  color: var(--text-secondary);
  text-align: center;
  font-size: .9rem;
}

.page-footer a {
  color: var(--text-primary);
  text-decoration: none;
}

.page-footer a:hover {
  color: var(--blue);
}

/* =========================================================
   kGate Admin Layout
   Uses default-theme.css variables
   ========================================================= */

.admin-shell {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
}


/* Sidebar */

@media(max-width:768px){

    .sidebar-toggle {
        display:none !important;
    }

}
.admin-sidebar {
    width: 84px;
    min-height: calc(100vh - 48px);
    background: var(--surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-soft);
    padding: 22px 0 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    position: sticky;
    top: 24px;
    transition: width .25s ease;
    z-index: 9999;
}


.admin-sidebar.expanded {
    width: 240px;
    align-items: stretch;
    padding-left: 14px;
    padding-right: 14px;
}


.admin-brand {
    font-size: 16px;
    font-weight: 800;
    color: var(--blue);
    margin-bottom: 12px;
}


.sidebar-toggle {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 14px;
    background: var(--surface-soft);
    color: var(--text-secondary);
    margin-bottom: 14px;
    cursor: pointer;
}


.sidebar-toggle:hover {
    background: var(--border);
}


.admin-nav {
    display: flex;
    flex-direction: column;
}


.admin-nav-link {
    position: relative;

    width: 46px;
    height: 46px;
    border-radius: 16px;

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

    color: var(--text-secondary);
    text-decoration: none;

    transition: all .2s ease;

    overflow: visible;
}

.admin-nav-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.admin-nav-group-label {
    display: none; /* hidden on the icon rail — only meaningful once labels are visible */
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    padding: 0 0 2px 14px;
}

.admin-sidebar.expanded .admin-nav-group-label {
    display: block;
}

.admin-nav-link span {
    position: absolute;
    left: 54px;
    top: 50%;
    height: 46px;
    transform: translateY(-50%) translateX(-8px);

    opacity: 0;
    visibility: hidden;

    padding: 10px 14px;
    border-radius: 14px;

    background: var(--surface);

    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;

    box-shadow: var(--shadow-soft);

    transition: opacity .18s ease,
                transform .18s ease,
                visibility .18s;
}

.admin-nav-link:hover {
    z-index: 200;
    background: var(--surface-soft);
    color: var(--text-primary);
}

.admin-nav-link:hover span {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
    color: var(--text-primary);
}


.admin-sidebar.expanded .admin-nav-link span {
    position: static;
    transform: none;

    opacity: 1;
    visibility: visible;

    background: transparent;
    box-shadow: none;
    border-radius: 0;

    padding: 0;
    margin-left: 14px;

    height: auto;
}

.admin-sidebar.expanded .admin-nav-link {
    width:100%;
    justify-content:flex-start;
    padding-left:14px;
}


.admin-sidebar.expanded .admin-nav-link span {
    display:inline;
}

.admin-sidebar.expanded .admin-nav-link.active:hover span {
    display:inline;
    color: var(--surface);
}

.admin-sidebar.expanded .sidebar-toggle i {
    transform:rotate(180deg);
}


.sidebar-toggle i {
    transition:.25s ease;
}



.admin-nav-link i {
    font-size: 18px;
}

.admin-nav-link.active {
    background: linear-gradient(155deg, var(--blue), #4E8CFF);
    color: white;
    box-shadow: 0 10px 20px -8px rgba(47,111,237,.55);
}


.admin-sidebar-divider {
    width: 28px;
    height: 1px;
    background: var(--border);
    margin: 8px 0;
}


.admin-sidebar-bottom {
    margin-top: auto;
}


/* Content */
.admin-main {
    flex: 1;
    min-width: 0;
}


.admin-main main {
    min-height: calc(100vh - 110px);
}


/* Footer */
.admin-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;

    color: var(--text-tertiary);
    font-size: 12.5px;

    padding: 18px 4px 4px;
}


.admin-footer a {
    color: var(--text-secondary);
    font-weight: 700;
    text-decoration: none;
}


.admin-footer a:hover {
    color: var(--blue);
}


.admin-footer-links {
    display: flex;
    gap: 18px;
}

.admin-tooltip {
    z-index:9999;
    background:var(--text-primary);
    color:white;
    padding:6px 10px;
    border-radius:8px;
    font-size:12px;
    font-weight:600;
    white-space:nowrap;
    box-shadow:var(--shadow-card);
}


/* ---------- Mobile top bar (hidden on desktop) ---------- */
.admin-mobile-topbar {
    display: none;
}

.sidebar-backdrop {
    display: none;
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {

    .admin-shell {
        flex-direction: column;
        padding: 0;
    }

    /* Persistent top bar — this is what fixes the "no branding on
       mobile" issue: the logo is always visible here, independent of
       whether the nav drawer is open or closed. */
    .admin-mobile-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: sticky;
        min-width: 100%;
        top: 0;
        z-index: 1000;
        background: var(--surface);
        box-shadow: var(--shadow-soft);
        padding: 14px 16px;
        margin-bottom: 16px;
    }

    .admin-brand-mobile {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 16px;
        font-weight: 800;
        color: var(--blue);
        text-decoration: none;
    }

    .mobile-nav-toggle {
        width: 40px;
        height: 40px;
        border: none;
        border-radius: 12px;
        background: var(--surface-soft);
        color: var(--text-secondary);
        font-size: 16px;
    }

    .mobile-nav-toggle:hover {
        background: var(--border);
    }

    /* The sidebar becomes a full off-canvas drawer, hidden off-screen
       until toggled open — with real, always-visible text labels
       (same visual treatment as the desktop "expanded" state), grouped
       under section headers, instead of a cramped horizontal icon strip. */
    .admin-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 260px;
        max-width: 82vw;
        border-radius: 0;
        transform: translateX(-100%);
        transition: transform .25s ease;
        align-items: stretch;
        padding: 20px 14px;
        overflow-y: auto;
        z-index: 1100;
    }

    .admin-sidebar.mobile-open {
        transform: translateX(0);
    }

    /* Always show labels/group headers inside the mobile drawer —
       there's no hover on touch, so the tooltip-on-hover pattern used
       on desktop can't apply here. */
    .admin-sidebar .admin-nav-link {
        width: 100%;
        justify-content: flex-start;
        padding-left: 14px;
    }

    .admin-sidebar .admin-nav-link span.nav-text {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
        margin-left: 14px;
        height: auto;
        display: inline;
    }

    .admin-sidebar .admin-nav-group-label {
        display: block;
    }

    .admin-sidebar .admin-brand,
    .admin-sidebar .sidebar-toggle {
        display: none; /* branding + desktop-only expand toggle both live in the mobile top bar / aren't needed here */
    }

    .sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(11, 18, 32, .45);
        z-index: 1050;
    }

    .sidebar-backdrop.visible {
        display: block;
    }

    .admin-footer {
        flex-direction: column;
        gap: 10px;
        padding: 0 16px 16px;
    }
}

/* ================= Dashboard ================= */

.dashboard-header {
    margin-bottom:24px;
}

.dashboard-header h1 {
    font-size:24px;
    font-weight:800;
    letter-spacing:-0.02em;
    margin:0;
}

.dashboard-header p {
    color:var(--text-secondary);
    margin-top:4px;
}



.dashboard-kpi-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
    margin-bottom:18px;
}


.dashboard-card {
    background:var(--surface);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-card);
    padding:22px;
}


.kpi-card {
    display:flex;
    flex-direction:column;
    gap:16px;
}


.kpi-title-group {
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:600;
}


.kpi-icon {
    width:38px;
    height:38px;
    border-radius:12px;

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


.kpi-icon.blue {
    background:var(--blue-bg);
    color:var(--blue);
}

.kpi-icon.teal {
    background:var(--teal-bg);
    color:var(--teal);
}

.kpi-icon.violet {
    background:var(--violet-bg);
    color:var(--violet);
}

.kpi-icon.amber {
    background:var(--amber-bg);
    color:var(--amber);
}


.kpi-value {
    font-size:28px;
    font-weight:800;
    letter-spacing:-0.02em;
}


.kpi-meta {
    display:flex;
    gap:14px;
    font-size:12.5px;
    color:var(--text-secondary);
}


.success {
    color:var(--success);
    font-weight:700;
}


.danger {
    color:var(--danger);
    font-weight:700;
}



.dashboard-chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 18px;
}


.chart-card {
    min-width: 0;
    min-height: 340px;
}

.card-title {
    font-size:15.5px;
    font-weight:700;
    margin-bottom:18px;
}


.chart-container {
    position: relative;
    height: 260px;
    width: 100%;
}



@media(max-width:1100px){

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

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

}


@media(max-width:600px){

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

}

/* =========================
   Admin Tables
========================= */

.page-title {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:24px;
    font-weight:800;
    letter-spacing:-0.02em;
}

.page-subtitle {
    color:var(--text-secondary);
    font-size:13px;
}


.action-group {
    display:flex;
    gap:10px;
}


.btn-soft {
    border:none;
    background:var(--surface-soft);
    color:var(--text-secondary);
    border-radius:14px;
    padding:10px 16px;
    font-size:13px;
    font-weight:700;
    transition:.2s ease;
}

.btn-soft:hover {
    background:var(--blue-bg);
    color:var(--blue);
}


.btn-primary-soft {
    border:none;
    background:linear-gradient(155deg,var(--blue),#4E8CFF);
    color:white;
    border-radius:14px;
    padding:10px 18px;
    font-size:13px;
    font-weight:700;
    box-shadow:0 10px 20px -10px rgba(47,111,237,.5);
}


.table-card {
    background:var(--surface);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-card);
    padding:22px;
}


.table-modern {
    border-collapse:separate;
    border-spacing:0 8px;
}

.table-modern thead th {
    border:none;
    color:var(--text-secondary);
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
}

.table-modern tbody tr {
    background:var(--surface-soft);
}

.table-modern tbody td {
    border:none;
    padding:14px;
    vertical-align:middle;
    font-size:13px;
}

.table-modern tbody tr td:first-child {
    border-radius:14px 0 0 14px;
}

.table-modern tbody tr td:last-child {
    border-radius:0 14px 14px 0;
}


.status-pill {
    display:inline-flex;
    align-items:center;
    padding:5px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
}

.status-success {
    background:var(--teal-bg);
    color:var(--teal);
}

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

.status-secondary {
    background: var(--surface-soft);
    color: var(--text-secondary);
}

.status-info {
    background: var(--blue-bg);
    color: var(--blue);
}

.status-primary {
    background: var(--violet-bg);
    color: var(--violet);
}

.component-badge {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  border-radius: 100px;
  background: var(--blue-bg);
  color: var(--blue-dark);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: capitalize;
}

.icon-btn {
    width:34px;
    height:34px;
    border-radius:12px;
    border:none;
    display:inline-flex;
    justify-content:center;
    align-items:center;
    background:var(--surface);
    color:var(--text-secondary);
    box-shadow:var(--shadow-card);
}

.icon-btn:hover {
    color:var(--blue);
}

.icon-btn-danger:hover {
    color:var(--danger);
}

.content-card {
    background: var(--card-bg);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.card-title {
    padding: 1rem 1.25rem;
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
}

.card-body {
    padding: 1.25rem;
}

.terminal-box {
    height: 300px;
    overflow-y: auto;
    background: var(--surface-muted);
    border-radius: 10px;
    padding: 1rem;
    font-family: monospace;
    font-size: .85rem;
}

.code-block {
  position: relative;
}

.code-block pre {
  border-radius: .5rem;
  margin:0;
}

.code-block .copy-btn {
  position:absolute;
  top:8px;
  right:8px;
  font-size:.75rem;
  z-index:2;
}


.docs-card {
  border-radius:12px;
  border:1px solid var(--border-color);
  padding:1rem;
  background:var(--card-bg);
}

.docs-card-title {
    padding: 1rem 1.25rem;
    font-weight: 600;
    border-bottom: 1px solid var(--border);
}

.content-card {
    background: var(--surface);
    border-radius: 14px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.terminal-box {
    height: 300px;
    overflow-y: auto;
    background: var(--surface-soft);
    border-radius: 10px;
    padding: 1rem;
    font-family: monospace;
    font-size: .85rem;
}

.docs-card {
  border-radius: 12px;
  border: 1px solid var(--border);
  padding: 1rem;
  background: var(--surface);
}

.about-card {
    display:flex; 
    flex-direction:column; 
    gap:6px; 
    font-size:13px; 
    color:var(--text-secondary);
}