/* ── Custom daisyUI Theme ── */
[data-theme="couprix"] {
    --p: 55.6% 0.257 293;
    --pf: 49% 0.257 293;
    --pc: 100% 0 0;
    --s: 54.1% 0.234 265;
    --sf: 48% 0.234 265;
    --sc: 100% 0 0;
    --a: 68.3% 0.166 293;
    --af: 62% 0.166 293;
    --ac: 15% 0.02 293;
    --n: 21.6% 0.006 286;
    --nf: 14.5% 0.006 286;
    --nc: 85% 0.006 286;
    --b1: 14.5% 0.006 286;
    --b2: 11% 0.005 286;
    --b3: 21.6% 0.006 286;
    --bc: 91.5% 0.003 286;
    --su: 76.3% 0.167 163;
    --suc: 15% 0.03 163;
    --er: 67.5% 0.19 22;
    --erc: 100% 0 0;
    --wa: 81.1% 0.152 85;
    --wac: 15% 0.03 85;
    --in: 73.7% 0.14 240;
    --inc: 15% 0.02 240;
    --rounded-box: 0.75rem;
    --rounded-btn: 0.5rem;
    --rounded-badge: 1.5rem;
    --animation-btn: 0.15s;
    --animation-input: 0.15s;
    --btn-focus-scale: 0.98;
    --border-btn: 1px;
    --tab-border: 1px;
    --tab-radius: 0.5rem;
    color-scheme: dark;
}

/* ── Root variables ── */
:root {
    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

body {
    font-family: var(--font-sans);
}

/* ── Glass bar ── */
.glass-bar {
    background: oklch(14.5% 0.006 286 / .85);
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
}

/* ── Cards ── */
.card-item {
    background: oklch(11% 0.005 286);
    border: 1px solid oklch(21.6% 0.006 286);
    border-radius: 0.75rem;
    transition: border-color .2s, box-shadow .2s, transform .15s;
    cursor: pointer;
    overflow: hidden;
}

.card-item:hover {
    border-color: oklch(55.6% 0.257 293 / .35);
    box-shadow: 0 0 20px oklch(55.6% 0.257 293 / .08);
    transform: translateY(-2px);
}

/* ── Pills ── */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 500;
    background: oklch(21.6% 0.006 286);
    color: oklch(91.5% 0.003 286 / .55);
    white-space: nowrap;
}

.pill-accent {
    background: oklch(55.6% 0.257 293 / .12);
    color: oklch(55.6% 0.257 293);
}

/* ── Section label ── */
.section-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: oklch(91.5% 0.003 286 / .35);
}

/* ── Line clamp ── */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Spinner ── */
.spinner {
    width: 24px;
    height: 24px;
    border: 2px solid oklch(21.6% 0.006 286);
    border-top-color: oklch(55.6% 0.257 293);
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ── Scroll-top button ── */
.scroll-top-btn {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 50;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid oklch(21.6% 0.006 286);
    background: oklch(14.5% 0.006 286);
    color: oklch(91.5% 0.003 286 / .6);
    cursor: pointer;
    transition: border-color .2s, color .2s;
    opacity: 0;
    pointer-events: none;
}

.scroll-top-btn.visible {
    opacity: 1;
    pointer-events: auto;
}

.scroll-top-btn:hover {
    border-color: oklch(55.6% 0.257 293 / .4);
    color: oklch(55.6% 0.257 293);
}

/* ── Detail modal ── */
.detail-overlay {
    background: oklch(0% 0 0 / .65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.detail-backdrop {
    background: transparent;
}

.detail-panel {
    background: oklch(11% 0.005 286);
    border: 1px solid oklch(21.6% 0.006 286);
}

.detail-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.25rem;
}

.detail-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid oklch(21.6% 0.006 286);
    background: oklch(14.5% 0.006 286);
    color: oklch(91.5% 0.003 286 / .5);
    cursor: pointer;
    transition: border-color .2s, color .2s, background .2s;
}

.detail-close:hover {
    border-color: oklch(67.5% 0.19 22 / .5);
    color: oklch(67.5% 0.19 22);
    background: oklch(67.5% 0.19 22 / .1);
}

.detail-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding: 1rem;
    border-radius: 0.5rem;
    background: oklch(14.5% 0.006 286);
    border: 1px solid oklch(21.6% 0.006 286 / .5);
}

.detail-meta-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.detail-meta-item>div {
    display: flex;
    flex-direction: column;
}

.detail-meta-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: oklch(91.5% 0.003 286 / .35);
}

.detail-meta-value {
    font-size: 0.85rem;
    color: oklch(91.5% 0.003 286 / .85);
}

.detail-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.detail-stat {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: oklch(91.5% 0.003 286 / .45);
}

.detail-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.7rem 1rem;
    margin-bottom: 1.5rem;
    border-radius: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: var(--font-sans);
    color: white;
    background: linear-gradient(135deg, oklch(55.6% 0.257 293), oklch(49% 0.257 293));
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: opacity .2s, transform .1s;
}

.detail-cta:hover {
    opacity: .9;
    transform: translateY(-1px);
}

.detail-section {
    margin-bottom: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid oklch(21.6% 0.006 286 / .5);
}

.detail-section-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: oklch(91.5% 0.003 286 / .4);
    margin-bottom: 0.75rem;
}

.detail-prose p {
    margin-bottom: 0.5rem;
}

.detail-prose ul {
    list-style: disc;
    padding-left: 1.25rem;
    margin-bottom: 0.5rem;
}

.detail-prose strong {
    color: oklch(91.5% 0.003 286 / .8);
}

/* ── Scrollbar ── */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: oklch(21.6% 0.006 286);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: oklch(30% 0.006 286);
}

/* ── Search Input ── */
.search-input {
    width: 100%;
    height: 2.25rem;
    padding: 0 0.75rem 0 2.25rem;
    font-size: 0.85rem;
    font-family: var(--font-sans);
    border-radius: 0.5rem;
    border: 1px solid oklch(21.6% 0.006 286 / .6);
    background: oklch(11% 0.005 286 / .6);
    color: oklch(91.5% 0.003 286);
    outline: none;
    transition: border-color .2s, background .2s, box-shadow .2s;
}

.search-input::placeholder {
    color: oklch(91.5% 0.003 286 / .3);
}

.search-input:focus {
    background: oklch(11% 0.005 286);
    border-color: oklch(55.6% 0.257 293 / .5);
    box-shadow: 0 0 0 2px oklch(55.6% 0.257 293 / .1);
}

/* ── Custom Dropdown ── */
.cdd-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    height: 2.25rem;
    padding: 0 0.65rem;
    font-size: 0.85rem;
    font-family: var(--font-sans);
    border-radius: 0.5rem;
    border: 1px solid oklch(21.6% 0.006 286 / .6);
    background: oklch(11% 0.005 286 / .6);
    color: oklch(91.5% 0.003 286);
    cursor: pointer;
    transition: border-color .2s, background .2s;
}

.cdd-trigger:hover,
.cdd-trigger.open {
    background: oklch(11% 0.005 286);
    border-color: oklch(55.6% 0.257 293 / .4);
}

.cdd-chev {
    transition: transform .2s;
}

.cdd-trigger.open .cdd-chev {
    transform: rotate(180deg);
}

.cdd-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    min-width: 200px;
    max-height: 280px;
    background: oklch(11% 0.005 286);
    border: 1px solid oklch(21.6% 0.006 286);
    border-radius: 0.5rem;
    box-shadow: 0 8px 32px oklch(0% 0 0 / .45);
    overflow: hidden;
    z-index: 60;
    display: flex;
    flex-direction: column;
}

.cdd-search-wrap {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem;
    border-bottom: 1px solid oklch(21.6% 0.006 286);
    color: oklch(91.5% 0.003 286 / .3);
}

.cdd-search {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: oklch(91.5% 0.003 286);
    font-size: 0.8rem;
    font-family: var(--font-sans);
}

.cdd-search::placeholder {
    color: oklch(91.5% 0.003 286 / .25);
}

.cdd-list {
    overflow-y: auto;
    flex: 1;
    padding: 0.25rem;
}

.cdd-opt {
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
    border-radius: 0.35rem;
    cursor: pointer;
    color: oklch(91.5% 0.003 286 / .65);
    transition: background .15s, color .15s;
}

.cdd-opt:hover {
    background: oklch(21.6% 0.006 286 / .7);
    color: oklch(91.5% 0.003 286);
}

.cdd-opt.active {
    background: oklch(55.6% 0.257 293 / .12);
    color: oklch(55.6% 0.257 293);
}