:root{
    --bg: #F5F7FB;
    --surface: #FFFFFF;
    --border: #E3E7EF;
    --border-soft: #EDF0F6;
    --ink: #171B26;
    --muted: #171B26;
    --muted-soft: #98A2B3;
    --brand: #0281c6;
    --brand-ink: #075784;
    --brand-tint: #eff9fe;
    --radius-lg: 18px;
    --radius-md: 12px;
    --radius-sm: 8px;
    --shadow-card: 0 1px 2px rgba(20,25,40,0.04), 0 8px 24px -12px rgba(20,25,40,0.10);
}

        body{
            background: var(--bg);
            font-family: 'Inter', system-ui, sans-serif;
            color: var(--ink);
        }

        .mk-heading{ font-family: 'Lexend', 'Inter', system-ui, sans-serif; }
        .mk-mono{ font-family: 'JetBrains Mono', ui-monospace, monospace; }

        /* ---------- filter bar ---------- */
        .mk-filterbar{
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-card);
            padding: 20px;
        }

        .mk-select{
            height: 48px;
            padding: 0 14px;
            border-radius: var(--radius-md);
            border: 1px solid var(--border);
            width: 100%;
            background: var(--surface);
            color: var(--ink);
            font-size: 14px;
            transition: border-color .15s ease;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%2398A2B3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 14px center;
        }

        .mk-select:focus{
            outline: none;
            border-color: var(--brand);
            box-shadow: 0 0 0 3px var(--brand-tint);
        }

        .mk-search-btn{
            height: 48px;
            padding: 0 28px;
            border-radius: var(--radius-md);
            background: var(--brand);
            color:white;
            font-weight: 600;
            font-size: 14px;
            border: none;
            cursor: pointer;
            transition: background .15s ease;
            white-space: nowrap;
        }

        .mk-search-btn:hover{ background: var(--brand-ink); }

        /* ---------- mock cards ---------- */
        .mk-grid{
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 28px;
        }

        .mk-card{
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-card);
            overflow: hidden;
            transition: transform .15s ease, box-shadow .15s ease;
        }

        .mk-card:hover{
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(20,25,40,0.06), 0 16px 32px -14px rgba(20,25,40,0.16);
        }

        .mk-bookmark-btn{
            position: absolute;
            top: 16px;
            right: 16px;
            width: 36px;
            height: 36px;
            border-radius: 999px;
            border: 1px solid var(--border);
            background: rgba(255,255,255,0.9);
            backdrop-filter: blur(4px);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: var(--muted);
            font-size: 14px;
            transition: color .15s ease, border-color .15s ease, background .15s ease;
            z-index: 2;
        }

        .mk-bookmark-btn:hover{
            border-color: var(--brand);
            color: var(--brand);
        }

        .mk-bookmark-btn.is-active{
            color: var(--brand);
            background: var(--brand-tint);
            border-color: #DCE3FB;
        }

        .mk-bookmark-btn .fa-bookmark{
            pointer-events: none;
        }

        .mk-card-head{
            padding: 22px 24px 14px;
            padding-right: 56px;
        }

        .mk-card-title{
            font-family: 'Lexend', sans-serif;
            font-weight: 600;
            font-size: 17px;
            line-height: 1.35;
        }

        .mk-card-meta{
            margin-top: 8px;
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }

        .mk-chip{
            font-size: 11px;
            font-weight: 600;
            padding: 4px 10px;
            border-radius: 999px;
            background: var(--brand-tint);
            color: var(--brand-ink);
            white-space: nowrap;
        }

        .mk-chip.mk-chip-muted{
            background: var(--border-soft);
            color: var(--muted);
        }

        .mk-duration{
            font-family: 'JetBrains Mono', monospace;
            font-size: 12px;
            color: var(--muted-soft);
            display: flex;
            align-items: center;
            gap: 5px;
            margin-left: auto;
        }

        .mk-card-body{
            padding: 0 24px;
            flex: 1;
        }

        .mk-card-desc{
            font-size: 13.5px;
            line-height: 1.7;
            color: var(--muted);
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .mk-card-footer{
            padding: 18px 24px 24px;
            border-top: 1px solid var(--border-soft);
            margin-top: 18px;
        }

        .mk-footer-row{
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12.5px;
            color: var(--muted-soft);
            margin-bottom: 14px;
        }

        .mk-footer-row .mk-author{
            color: var(--muted);
            font-weight: 500;
        }

        .mk-actions{
            display: flex;
            gap: 10px;
        }

        .mk-btn{
            flex: 1;
            text-align: center;
            padding: 10px 14px;
            border-radius: 999px;
            font-size: 13px;
            font-weight: 600;
            text-decoration: none;
            transition: opacity .15s ease, background .15s ease;
        }

        .mk-btn-outline{
            border: 1px solid var(--border);
            color: var(--ink);
            background: var(--surface);
        }

        .mk-btn-outline:hover{ border-color: var(--brand); color: var(--brand); }

        .mk-btn-solid{
            background: var(--brand);
            color: #fff;
            border: 1px solid var(--brand);
        }

        .mk-btn-solid:hover{ background: var(--brand-ink); }

        .mk-empty{
            text-align: center;
            color: var(--muted);
            padding: 64px 24px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
        }