:root {
    --bg: #07090d;
    --bg2: #0b0f16;
    --surface: #0e1420;
    --border: rgba(255,255,255,.08);
    --border2: rgba(255,255,255,.14);
    --text: #e9eef7;
    --muted: #a7b0c2;
    --primary: #5aa2ff;
    --primary2: #2f6bff;
    --good: #46d39a;
    --warn: #f4c150;
    --danger: #ff6b6b;
    --radius: 16px;
    --radius2: 12px;
    --shadow: 0 8px 20px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    min-height: 100%;
    background:
        radial-gradient(1600px 1600px at 50% 0%, rgba(239, 255, 90, 0.18), transparent 60%),
        linear-gradient(180deg, var(--bg), var(--bg2));
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-color: var(--bg2);
    color: var(--text);
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.navbar {
    position: sticky;
    top: 0;
    z-index: 10;
    width: 100%;
    padding: .9rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: rgba(7,9,13,.75);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--text);
}

.logo-img {
    height: 32px;
    width: 32px;
    object-fit: contain;
    filter: drop-shadow(0 0 12px rgba(90,162,255,.35));
}

.nav-links {
    display: flex;
    gap: 1.25rem;
    font-size: .92rem;
}

.page {
    padding: 2rem 20px 4rem;
    max-width: 900px;
    margin: 0 auto;
}

.card {
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    box-shadow: var(--shadow);
    margin-bottom: 1.25rem;
}

.card h2 {
    margin: 0 0 .25rem;
    font-size: 1.1rem;
}

.subtle { color: var(--muted); font-size: .9rem; margin-bottom: .9rem; }
.muted { color: var(--muted); }

.section-title {
    text-align: center;
    font-size: 1.3rem;
    margin: 2.5rem 0 1rem;
}
.page > .section-title:first-child { margin-top: 0; }

.tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.tool-card {
    display: block;
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
    transition: border-color .15s ease, transform .15s ease;
}

.tool-card:hover {
    border-color: rgba(90,162,255,.5);
    transform: translateY(-2px);
    text-decoration: none;
}

.tool-card .icon { font-size: 1.8rem; margin-bottom: .6rem; display: block; }
.tool-card h2 { margin: 0 0 .35rem; color: var(--text); font-size: 1.1rem; }
.tool-card p { margin: 0; color: var(--muted); font-size: .88rem; }
.tool-card .tool-card-cta { color: var(--primary); font-weight: 600; margin-top: .6rem; }

/* Destination card: same shell as a tool card, but for links off to another
   Lark site. The logo (instead of an emoji icon) and the corner glyph both
   signal "this leaves Lark Tools" before the visitor clicks. */
.destination-card { position: relative; }
.destination-card .external-badge {
    position: absolute;
    top: 1.1rem;
    right: 1.2rem;
    font-size: 1rem;
    color: var(--muted);
}
.destination-card .destination-logo {
    height: 32px;
    width: auto;
    object-fit: contain;
    display: block;
    /* The logo is dark-on-transparent, designed for larkskitchen.com's light
       background - it would wash out directly on this site's dark theme, so
       it sits on its own small light chip instead of altering its colors. */
    background: #fff;
    padding: .4rem .6rem;
    border-radius: 8px;
    margin-bottom: .7rem;
}
.destination-card .destination-logo.destination-logo-dark {
    /* This logo already has its own dark, opaque badge background, so it
       sits directly on the page instead of getting the light chip above. */
    height: 44px;
    background: none;
    padding: 0;
    border-radius: 50%;
}

/* Private-service badge: same corner spot as .external-badge, but amber and
   a padlock so "this leaves the site" (arrow) reads differently from "this
   requires a login" (lock) at a glance. */
.destination-card .external-badge.private-badge { color: var(--warn); }

.kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .9rem;
}

.kpi {
    background: rgba(255,255,255,.03);
    border: 1px solid var(--border);
    border-radius: var(--radius2);
    padding: 1rem;
}

.kpi .label { color: var(--muted); font-size: .82rem; margin-bottom: .3rem; }
.kpi .value { font-size: 1.6rem; font-weight: 700; }
.kpi .mini { color: var(--muted); font-size: .78rem; margin-top: .3rem; }

.badge {
    display: inline-block;
    font-size: .8rem;
    padding: .28rem .65rem;
    border-radius: 999px;
    font-weight: 600;
}

table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; }

/* Keeps a column pinned in place when its table scrolls horizontally -
   needs an opaque background so scrolled-under cells don't show through. */
.sticky-col { position: sticky; left: 0; background: var(--bg2); z-index: 1; }

input, select, button {
    font-family: inherit;
    font-size: .95rem;
}

input, select, textarea {
    width: 100%;
    padding: .7rem .8rem;
    border-radius: var(--radius2);
    border: 1px solid var(--border);
    background: rgba(10,14,22,.55);
    color: var(--text);
    outline: none;
}

input:focus, select:focus, textarea:focus {
    border-color: rgba(90,162,255,.6);
    box-shadow: 0 0 0 4px rgba(90,162,255,.14);
}

textarea {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .85rem;
    line-height: 1.5;
    resize: vertical;
}

button {
    padding: .7rem 1.2rem;
    border-radius: var(--radius2);
    border: 1px solid rgba(90,162,255,.35);
    background: linear-gradient(135deg, rgba(90,162,255,.95), rgba(47,107,255,.95));
    color: #fff;
    font-weight: 650;
    cursor: pointer;
}

button:hover { box-shadow: 0 10px 22px rgba(47,107,255,.22); }
button:disabled { opacity: .5; cursor: progress; }

button.btn-secondary {
    background: rgba(255,255,255,.04);
    border: 1px solid var(--border);
    color: var(--text);
    font-weight: 600;
}
button.btn-secondary:hover { box-shadow: none; border-color: var(--border2); }

.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-size: .82rem; color: var(--muted); margin-bottom: .35rem; }

.badge-ok { background: var(--good); color: #06110c; }
.badge-warn { background: var(--warn); color: #1a1400; }
.badge-fail { background: var(--danger); color: #1a0505; }
.badge-info { background: rgba(90,162,255,.18); color: var(--primary); }

.finding-list { list-style: none; padding: 0; margin: 0; }
.finding-list li {
    padding: .5rem 0;
    border-bottom: 1px solid var(--border);
    font-size: .92rem;
}
.finding-list li:last-child { border-bottom: none; }
.finding-list .finding-detail { color: var(--muted); font-size: .85rem; margin-top: .2rem; }

.mono-block {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .82rem;
    line-height: 1.5;
    background: rgba(10,14,22,.55);
    border: 1px solid var(--border);
    border-radius: var(--radius2);
    padding: 1rem;
    overflow-x: auto;
    white-space: pre;
}

.call-list-item {
    display: block;
    width: 100%;
    text-align: left;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--border);
    border-radius: var(--radius2);
    padding: .8rem 1rem;
    margin-bottom: .6rem;
    cursor: pointer;
    color: var(--text);
}
.call-list-item:hover { border-color: rgba(90,162,255,.5); }
.call-list-item.active { border-color: var(--primary); background: rgba(90,162,255,.08); }
.call-list-item .call-list-meta { color: var(--muted); font-size: .82rem; margin-top: .3rem; }

.btn-row { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
.btn-row.tight { margin-top: .6rem; }

.radarWrap {
    border-radius: var(--radius2);
    overflow: hidden;
    height: 320px;
    border: 1px solid var(--border);
}
.radarWrap iframe { width: 100%; height: 100%; border: 0; }