:root {
    --background: #ffffff;
    --foreground: oklch(0.145 0 0);
    --card: #ffffff;
    --card-foreground: oklch(0.145 0 0);
    --border: rgba(0,0,0,.1);
    --accent: #e9ebef;
    --primary: #030213;
    --muted-foreground: #717182;

    /* GenomeArc accent */
    --ga-accent: #14998C;
}

/* Dark mode */
.dark {
    --background: oklch(0.145 0 0);
    --foreground: oklch(0.985 0 0);
    --card: oklch(0.205 0 0);
    --card-foreground: oklch(0.985 0 0);
    --border: oklch(0.269 0 0);
}
body {
    background: var(--background);
    color: var(--foreground);
    font-size: 16px;
}

/* Cards */
.card,
.modal-content {
    background: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border);
    border-radius: 14px;
}
.modal-content{
    background: #062b26!important;
}
/* Inputs */
.form-control,
.form-select {
    background: rgba(255,255,255,.03);
    color: var(--foreground);
    border-color: var(--border);
}

.form-control::placeholder {
    color: var(--muted-foreground);
}

/* Buttons */
.btn-primary {
    background: linear-gradient(135deg, #0D6359, #14998C);
    border: none;
}

.btn-primary:hover {
    filter: brightness(1.1);
}
.searchboxDiv {
    background: rgba(255, 255, 255, 0.08); /* slightly lighter */
    border: 1px solid rgba(255, 255, 255, 0.14);

    /* STRONGER BLUR */
    backdrop-filter: blur(26px) saturate(160%);
    -webkit-backdrop-filter: blur(26px) saturate(160%);

    border-radius: 30px;
}
.searchboxDiv_shadow{
    box-shadow:
        inset 0 1px 0 #0D6359,
        0 8px 30px rgba(0,0,0,0.35);
}
.sidebar {
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,.8),
        rgba(0,0,0,.9)
    );
    border-right: 1px solid var(--border);
    backdrop-filter: blur(14px);
}
.common_btn{
    /*border: 1px solid rgba(255, 255, 255, 0.14);*/
    box-shadow:
        inset 0 1px 0 #0D6359,
        0 8px 30px rgba(0,0,0,0.35);
    background:rgba(255, 255, 255, 0.14)!important;
    border-color: rgba(20, 153, 140, 0.6);
}