/* ============================================================================
   Beranda (Welcome View) - Tema Dinamis & Responsif
   Semua rule di-scope ke #welcome-view dan memakai CSS custom properties dari
   sistem tema aktif (data-theme) supaya tampilan beranda ikut semua 8 tema.

   Bentuk visual mengikuti mockup beranda: sudut membulat, kicker berbentuk pill,
   aksen serif pada separuh judul, kartu catatan bertumpuk dengan garis tepi kiri,
   dan strip login/profil sebagai panel yang menumpang di bawah mockup IDE.
   Aksen memakai --brand-indigo (bukan emerald mockup) supaya identitas merek
   tiap tema tetap terjaga. Emerald/amber/rose tetap dipakai untuk makna status.

   Alasan tiap keputusan bentuk ada di Architecture/UI dan log.md.
   ========================================================================== */

#welcome-view {
    /* Aksen tunggal beranda = aksen merek tema aktif.
       --bd-accent dipakai untuk garis/isi (bukan teks); --bd-accent-text untuk
       teks di atas permukaan terang/gelap, dan ditimpa di tema yang aksen
       mereknya terlalu tipis untuk teks (lihat blok override di bawah). */
    --bd-accent: var(--brand-indigo);
    --bd-accent-text: var(--brand-indigo);
    --bd-accent-soft: var(--brand-indigo-glow);
    --bd-info: var(--brand-cyan);
    --bd-ok: var(--accent-emerald, var(--color-success));
    --bd-warn: var(--accent-amber, var(--color-warning));

    /* Varian teks dari warna di atas untuk dipakai DI DALAM kaca. Teks di atas
       permukaan transparan kehilangan kontras, jadi tema yang butuh diperbaiki
       menimpanya di blok override bawah (nilainya hasil pengukuran, hue tetap). */
    --bd-ok-glass: var(--bd-ok);
    --bd-info-glass: var(--bd-info);
    --bd-warn-glass: var(--bd-warn);
    --bd-accent-glass: var(--bd-accent);
    --bd-link-glass: var(--bd-accent-text);

    /* Radius: dipakai hemat, dua tingkat saja (kontrol kecil vs panel). */
    --bd-r-sm: var(--radius-md);
    --bd-r-lg: var(--radius-lg);

    --bd-mono: "JetBrains Mono", "SFMono-Regular", "Cascadia Code", "Roboto Mono", Consolas, monospace;
    --bd-serif: "Instrument Serif", Georgia, "Times New Roman", serif;

    /* LIQUID GLASS (keputusan pemilik produk, override tertulis di log.md).
       Hanya dua elemen yang ber-blur: mockup IDE dan strip login/profil.

       Kenapa versi pertama (kulit 30% / isi 62%) tidak terbaca sebagai kaca:
       latar di belakang panel cuma satu warna rata, dan backdrop-filter yang
       memblur warna rata menghasilkan warna yang sama persis. Selisihnya di
       tema gelap hanya ~3 dari 255. Perbaikannya dua sisi:
       (a) latar stage diberi struktur yang benar-benar bisa dibelokkan
           (.bd-stage::before / ::after), dan
       (b) alpha kaca diturunkan ke batas terendah yang masih lolos 4.5:1.

       Alpha 24/46/58/46 bukan pilihan selera: itu transparansi tertinggi yang
       masih lolos AA di kedua tema (Dark, Light).
       Konsekuensinya teks kecil di atas kaca naik satu tingkat token
       (tertiary -> secondary): --text-tertiary memang tidak akan pernah lolos
       di atas permukaan transparan, berapa pun alpha-nya.
       Kilau ditaruh HANYA di tepi (bukan di atas area teks) supaya teks kecil
       tidak kehilangan kontras; ini juga cara Apple menaruh highlight-nya. */
    --bd-glass-blur: 24px;
    --bd-glass-sat: 180%;
    --bd-glass-bg: color-mix(in srgb, var(--bg-surface) 24%, transparent);
    --bd-glass-bg-soft: color-mix(in srgb, var(--bg-surface) 46%, transparent);
    --bd-glass-bg-editor: color-mix(in srgb, var(--bg-editor) 58%, transparent);
    --bd-glass-bg-strip: color-mix(in srgb, var(--bg-surface) 50%, transparent);

    /* Permukaan kaca tambahan: kartu catatan dan tombol CTA (keputusan pemilik
       2026-10-14). Kartu catatan hanya satu lapis kaca, tidak ada kulit panel
       di bawahnya, jadi alpha-nya diukur langsung terhadap latar halaman. */
    --bd-glass-bg-note: color-mix(in srgb, var(--bg-surface) 46%, transparent);
    --bd-glass-bg-note-accent: color-mix(in srgb, var(--bg-elevated) 52%, transparent);
    --bd-glass-bg-btn: color-mix(in srgb, var(--bg-surface) 46%, transparent);
    --bd-glass-bg-btn-hover: color-mix(in srgb, var(--bg-hover) 60%, transparent);
    --bd-glass-edge-accent: color-mix(in srgb, var(--btn-bg) 55%, transparent);
    /* Teks kartu catatan dan tanda tangan halaman. Keduanya ditimpa di tema
       yang headroom kontrasnya nol di atas kaca / latar hero. */
    --bd-note-text: var(--text-secondary);
    --bd-signature-text: var(--text-secondary);
    /* Isian tombol CTA saat jadi kaca: alpha minimum agar label CTA tetap lolos
       4.5:1 pada latar terburuk. */
    --bd-cta-fill: color-mix(in srgb, var(--btn-bg) 74%, transparent);
    --bd-cta-fill-hover: color-mix(in srgb, var(--btn-bg-hover) 80%, transparent);

    /* Latar hero (dipakai .bd-hero::before / ::after). Garis blueprint memberi
       blur sesuatu yang tajam untuk disapu; dua titik cahaya aksen memberi
       saturate(180%) sesuatu untuk dikuatkan sekaligus warna yang dipantulkan
       kaca. Keduanya mencakup kedua kolom (keputusan pemilik 2026-10-14). */
    --bd-hero-rule: color-mix(in srgb, var(--text-tertiary) 18%, transparent);
    --bd-hero-glow: color-mix(in srgb, var(--brand-indigo) 13%, transparent);
    /* Tepi: aksen redup (kaca memantulkan sekitar) + cahaya putih (specular). */
    --bd-glass-edge: color-mix(in srgb, var(--brand-indigo) 20%, transparent);
    --bd-glass-rim: color-mix(in srgb, var(--brand-indigo) 55%, transparent);
    --bd-glass-spec: color-mix(in srgb, #ffffff 46%, transparent);
    --bd-glass-spec-soft: color-mix(in srgb, #ffffff 20%, transparent);
    --bd-glass-hi-top: color-mix(in srgb, #ffffff 30%, transparent);
    /* Cincin cahaya tipis di sisi dalam tepi: yang membuat permukaan terbaca
       sebagai lensa, bukan kotak berbingkai. Satu piksel, tidak menyentuh teks. */
    --bd-glass-ring: color-mix(in srgb, #ffffff 7%, transparent);
    --bd-glass-hi-bottom: color-mix(in srgb, var(--text-primary) 10%, transparent);

    /* Skala teks fluid: ikut lebar layar, dikunci batas bawah (tetap terbaca
       di laptop 1366px) dan batas atas (tidak membengkak di monitor 4K).
       3xs khusus mockup IDE dekoratif (aria-hidden). */
    --bd-fs-3xs: clamp(8px, 0.18vw + 5.6px, 11px);
    --bd-fs-2xs: clamp(9px, 0.2vw + 6.5px, 12px);
    --bd-fs-xs: clamp(10px, 0.22vw + 7.2px, 13px);
    --bd-fs-sm: clamp(11px, 0.25vw + 8px, 14.5px);
    --bd-fs-md: clamp(12.5px, 0.25vw + 9.5px, 16px);
    --bd-fs-code: clamp(8.5px, 0.22vw + 5.8px, 12.5px);

    /* Jarak vertikal ikut tinggi layar agar muat di monitor pendek */
    --bd-space: clamp(14px, 2.6vh, 34px);
    --bd-maxw: clamp(1100px, 88vw, 2100px);

    position: relative;
    background: var(--bg-base);
    color: var(--text-primary);
    border: none;
    min-height: 0;
    padding: clamp(14px, 1.8vh, 24px) clamp(16px, 2vw, 26px) clamp(10px, 1.2vh, 14px);
    overflow: visible;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

#welcome-view.active,
body:has(#welcome-view.active) #welcome-view.active {
    overflow: visible;
}

/* Garis teknik (blueprint / grid) sebagai backdrop.
   Dipertahankan: ini motif identitas "papan drafting" yang sudah dicatat di
   motif identitas aplikasi dan dipakai seluruh aplikasi (judul, garis pemisah, tabel).
   Tidak ditambah gradien radial mockup supaya tidak menumpuk dua teknik latar. */
#welcome-view::before {
    display: none !important;
    background: none !important;
}

#welcome-view ::selection {
    background: var(--brand-indigo-glow, rgba(230, 172, 75, 0.3));
    color: var(--text-primary);
}

/* Netralkan centering lama dari styles.css (layout baru rata kiri-atas) */
#welcome-view.active {
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
}

/* ---------- HERO ---------- */
.bd-hero {
    position: relative;
    z-index: 2;
    max-width: var(--bd-maxw);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(360px, 1.02fr) minmax(520px, 1.15fr);
    gap: clamp(22px, 3vw, 52px);
    align-items: center;
    flex: 1 0 auto;
    min-height: 0;
    width: 100%;
}

.bd-copy { padding-bottom: 20px; }

/* Label konteks praktikum. Berfungsi, bukan hiasan: menyebut kelas praktikum
   yang sedang dibuka sebelum judul menyapa pengguna. */
.bd-kicker {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    font: var(--bd-fs-2xs) var(--bd-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--bd-accent-text);
    background: var(--bg-elevated);
    border: 1px solid var(--border-accent);
    padding: 5px 12px;
    border-radius: var(--radius-full);
}

.bd-title {
    margin: clamp(10px, 2vh, 22px) 0 0;
    max-width: none;
    font-size: clamp(32px, min(4.2vw, 7.6vh), 58px);
    line-height: 1.08;
    letter-spacing: -.025em;
    font-weight: 700;
    color: var(--text-primary);
}
/* Separuh judul memakai serif miring sebagai "suara" yang berbeda dari
   separuh pernyataan di atasnya; satu-satunya aksen tipografi di layar ini. */
.bd-title em {
    font-family: var(--bd-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 1.12em;
    letter-spacing: -.01em;
    color: var(--bd-accent-text);
}

/* Tiga catatan bertumpuk mengikuti urutan baca 01 -> 02 -> 03 */
.bd-subtitle {
    margin-top: var(--bd-space);
    max-width: 62ch;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Kartu catatan: garis tepi kiri sebagai penanda margin, seperti catatan
   pinggir di kertas sketsa. */
/* Kartu catatan ikut jadi kaca (keputusan pemilik 2026-10-14). Ia satu lapis
   saja di atas latar hero, jadi alpha-nya diukur langsung: 46% masih lolos
   4.5:1 untuk teks secondary di 8 tema (emerald menimpanya di blok override).
   Garis tepi kiri 3px tetap: itu motif catatan pinggir, bukan hiasan baru. */
.bd-note {
    margin: 0;
    padding: clamp(11px, 1.3vh, 15px) clamp(13px, 0.9vw, 17px);
    background: var(--bd-glass-bg-note);
    -webkit-backdrop-filter: blur(var(--bd-glass-blur)) saturate(var(--bd-glass-sat));
    backdrop-filter: blur(var(--bd-glass-blur)) saturate(var(--bd-glass-sat));
    border: 1px solid var(--bd-glass-edge);
    border-left: 3px solid var(--border-strong);
    border-radius: var(--bd-r-sm);
    font-size: var(--bd-fs-sm);
    line-height: 1.62;
    color: var(--bd-note-text);
    box-shadow:
        inset 0 1px 0 0 var(--bd-glass-hi-top),
        inset 0 0 0 1px var(--bd-glass-ring);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.bd-note:hover {
    transform: translateY(-2px);
    border-left-color: var(--bd-accent);
    /* Tepi kaca dipertahankan saat hover, ditambah elevasi yang sudah ada. */
    box-shadow:
        inset 0 1px 0 0 var(--bd-glass-hi-top),
        inset 0 0 0 1px var(--bd-glass-ring),
        var(--box-shadow-editor, 0 10px 22px rgba(0,0,0,.15));
}
.bd-note-num {
    display: block;
    margin-bottom: 6px;
    font: 700 var(--bd-fs-2xs) var(--bd-mono);
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--bd-note-text);
}
.bd-note-accent {
    border-left-color: var(--bd-accent);
    background: var(--bd-glass-bg-note-accent);
    /* Isi kartu 03 selalu primary: tahan di --text-primary di semua tema. */
    color: var(--text-primary);
}
.bd-note-accent .bd-note-num {
    color: var(--bd-accent-text);
}
.bd-subtitle .bd-inline-code {
    display: inline-block;
    padding: 1px 5px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    font: var(--bd-fs-xs) var(--bd-mono);
    color: var(--bd-accent-text);
}

/* Baris ini duduk langsung di atas latar hero (bukan di atas kaca), jadi ia
   terkena garis blueprint 18% dan titik cahaya aksen. Terukur: --text-tertiary
   hanya ~4.1:1 di atas piksel garis. Karena itu seluruh baris memakai
   --text-secondary. */
.bd-signature {
    margin-top: var(--bd-space);
    font: var(--bd-fs-xs) var(--bd-mono);
    color: var(--bd-signature-text);
}
.bd-signature span { color: var(--bd-signature-text); }

/* ---------- CTA / TOMBOL ----------
   styles.css menggambar tombol sebagai pil neomorfik lewat lapisan ::before
   (warna) dan ::after (sapuan gradien hover), plus radius 30em. Beranda
   melepas kedua lapisan itu dan memakai sudut 8px supaya selaras dengan
   jaring-jaring kotak di sekitarnya. */
#welcome-view button {
    min-width: 0;
    border-radius: var(--bd-r-sm);
    box-shadow: none !important;
}
#welcome-view button::after { display: none !important; }
#welcome-view button:active { transform: translateY(1px); }

#welcome-view .welcome-actions { margin-top: var(--bd-space); gap: 12px; display: flex; flex-wrap: wrap; align-items: center; }

#welcome-view .welcome-cta-btn {
    height: clamp(40px, 4.6vh, 50px);
    padding: 0 clamp(16px, 1.2vw, 24px);
    font: 600 var(--bd-fs-md)/1 var(--font-ui);
    letter-spacing: 0;
    text-transform: none;
    border-radius: var(--bd-r-sm);
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

/* Varian blok penuh untuk tombol sesi di beranda (pengganti dua inline
   style="margin-top:14px; width:100%" di welcome-view.php). */
#welcome-view .welcome-cta-block {
    margin-top: 14px;
    width: 100%;
}

/* CTA utama: tombol bertepi penuh tanpa isian. Sistem tombol datar global
   mematikan `button::before`, jadi isian kaca tidak pernah dirender. Label
   karena itu memakai warna teks tema (putih di tema gelap, gelap di tema
   terang) supaya tidak jatuh menjadi teks hitam di atas latar hitam. Blur
   tetap dipertahankan untuk konteks hero, meski isiannya transparan. */
#welcome-view .welcome-cta-btn.btn-primary {
    background: transparent !important;
    -webkit-backdrop-filter: blur(var(--bd-glass-blur)) saturate(var(--bd-glass-sat));
    backdrop-filter: blur(var(--bd-glass-blur)) saturate(var(--bd-glass-sat));
    border: 1px solid var(--bd-glass-edge-accent) !important;
    /* Isian ::before dimatikan sistem tombol datar, jadi label harus memakai
       warna teks tema (putih di tema gelap, gelap di tema terang). */
    color: var(--text-primary) !important;
    box-shadow:
        inset 0 1px 0 0 var(--bd-glass-hi-top),
        inset 0 0 0 1px var(--bd-glass-ring),
        0 6px 20px var(--bd-accent-soft) !important;
}
#welcome-view .welcome-cta-btn.btn-primary::before {
    background: var(--bd-cta-fill) !important;
}
#welcome-view .welcome-cta-btn.btn-primary:hover {
    border-color: var(--bd-glass-edge-accent) !important;
    transform: translateY(-1px);
}
#welcome-view .welcome-cta-btn.btn-primary:hover::before {
    background: var(--bd-cta-fill-hover) !important;
}

#welcome-view .welcome-cta-btn.btn-secondary {
    background: transparent !important;
    -webkit-backdrop-filter: blur(var(--bd-glass-blur)) saturate(var(--bd-glass-sat));
    backdrop-filter: blur(var(--bd-glass-blur)) saturate(var(--bd-glass-sat));
    border: 1px solid var(--bd-glass-edge) !important;
    color: var(--text-primary) !important;
    box-shadow:
        inset 0 1px 0 0 var(--bd-glass-hi-top),
        inset 0 0 0 1px var(--bd-glass-ring) !important;
}
#welcome-view .welcome-cta-btn.btn-secondary::before {
    background: var(--bd-glass-bg-btn) !important;
}
#welcome-view .welcome-cta-btn.btn-secondary:hover {
    border-color: var(--bd-accent) !important;
    color: var(--text-primary) !important;
    transform: translateY(-1px);
}
#welcome-view .welcome-cta-btn.btn-secondary:hover::before {
    background: var(--bd-glass-bg-btn-hover) !important;
}

#welcome-view .welcome-note {
    font: var(--bd-fs-2xs) var(--bd-mono);
    color: var(--text-tertiary);
}

/* Tombol dalam strip login & blokir sesi */
#welcome-view .bd-login-submit {
    background: var(--btn-bg, var(--bd-accent)) !important;
    border: 1px solid var(--btn-bg, var(--bd-accent)) !important;
    color: var(--btn-color, #ffffff) !important;
}
#welcome-view .bd-login-submit::before {
    background: var(--btn-bg, var(--bd-accent)) !important;
}
#welcome-view .bd-login-submit:hover:not(:disabled) {
    background: var(--btn-bg-hover, var(--color-primary-hover)) !important;
    border-color: var(--btn-bg-hover, var(--color-primary-hover)) !important;
}
#welcome-view .bd-login-submit:hover:not(:disabled)::before {
    background: var(--btn-bg-hover, var(--color-primary-hover)) !important;
}
#welcome-view .bd-login-submit:disabled {
    opacity: .65;
    cursor: wait;
}
#welcome-view .bd-linklike {
    display: inline;
    width: auto;
    height: auto;
    min-width: 0;
    padding: 0;
    border: none !important;
    border-radius: 0;
    background: transparent !important;
    /* Tautan ini berada di dalam strip kaca: pakai varian aman-kaca. */
    color: var(--bd-link-glass) !important;
    font: inherit;
    text-decoration: underline;
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
}
#welcome-view .bd-linklike::before { background: transparent !important; }
#welcome-view .bd-linklike:hover {
    background: transparent !important;
    color: var(--bd-link-glass) !important;
    text-decoration-thickness: 2px;
}

/* ---------- BLOK SESI & PANEL ADMIN ---------- */
#welcome-view .welcome-sesi-block,
#welcome-view .welcome-admin-panel {
    border-radius: var(--bd-r-lg);
}

#welcome-view .welcome-admin-panel {
    margin-top: var(--bd-space);
    max-width: clamp(520px, 36vw, 780px);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    padding: clamp(14px, 1.1vw, 20px);
}
#welcome-view .welcome-admin-head-text h4 {
    color: var(--text-primary);
    font-size: var(--bd-fs-md);
    margin: 0 0 4px;
}
#welcome-view .welcome-admin-head-text p {
    color: var(--text-secondary);
    font-size: var(--bd-fs-xs);
    margin: 0;
}
#welcome-view .welcome-admin-item {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--bd-r-sm);
    color: var(--text-primary);
    font-size: var(--bd-fs-sm);
    padding: clamp(8px, 1.1vh, 13px) clamp(10px, 0.8vw, 15px);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
#welcome-view .welcome-admin-item i {
    width: clamp(26px, 1.9vw, 36px);
    height: clamp(26px, 1.9vw, 36px);
    font-size: var(--bd-fs-sm);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    transition: color .15s ease, border-color .15s ease;
}
#welcome-view .welcome-admin-item:hover {
    background: var(--bg-hover);
    border-color: var(--bd-accent);
    transform: translateY(-2px);
}
#welcome-view .welcome-admin-item:hover i,
#welcome-view .welcome-admin-item:focus-visible i {
    color: var(--bd-accent);
    border-color: var(--border-accent);
}
#welcome-view .welcome-admin-item:focus-visible {
    outline: 2px solid var(--bd-accent);
    outline-offset: 2px;
}
@media (max-width: 420px) {
    #welcome-view .welcome-admin-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Blokir sesi: status menunggu (amber), bukan galat. */
#welcome-view .welcome-sesi-block {
    background: var(--bg-surface);
    border: 1px solid var(--bd-warn);
    border-radius: var(--bd-r-lg);
    padding: clamp(16px, 1.4vw, 20px);
    margin-top: 22px;
}
#welcome-view .welcome-sesi-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--bd-r-sm);
    background: var(--bd-accent-soft, rgba(230, 172, 75, 0.15));
    border: 1px solid var(--bd-warn);
    color: var(--bd-warn);
    font-size: var(--bd-fs-md);
    margin-bottom: 10px;
}
#welcome-view .welcome-sesi-block h3 {
    color: var(--text-primary);
    font-size: var(--bd-fs-md);
    margin: 0 0 6px;
}
#welcome-view .welcome-sesi-block p {
    color: var(--text-secondary);
    font-size: var(--bd-fs-xs);
    margin: 0;
}
#welcome-view .welcome-sesi-block .welcome-note {
    color: var(--text-tertiary);
}
#welcome-view .welcome-sesi-kelas {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 10px 0 8px;
    padding: 5px 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font: var(--bd-fs-2xs) var(--bd-mono);
    color: var(--text-secondary);
}
#welcome-view .welcome-sesi-kelas strong {
    color: var(--text-primary);
}

/* Blok responsi aktif: status aktif (emerald) menumpang gaya blok sesi,
   hanya warna statusnya yang berbeda. */
#welcome-view #welcome-responsi-active-block {
    background: var(--code-correct-bg, rgba(94, 184, 134, 0.12));
    border-color: var(--bd-ok);
}
#welcome-view #welcome-responsi-active-block .welcome-sesi-icon {
    background: var(--code-correct-bg, rgba(94, 184, 134, 0.18));
    border-color: var(--bd-ok);
    color: var(--bd-ok);
}
#welcome-view #welcome-responsi-active-block h3 {
    color: var(--bd-ok);
}

/* ---------- STAGE (IDE + STRIP OVERLAY) ---------- */
/* Ruang bawah ditaruh untuk strip login/profil yang menumpang tepi bawah
   mockup IDE, sehingga strip terlihat menempel pada gambar produk. */
.bd-stage {
    position: relative;
    min-width: 0;
    padding-bottom: clamp(72px, 9vh, 112px);
}

/* Latar hero: kaca hanya terbaca kalau ada sesuatu yang bisa dibelokkan.
   Halaman ini menyediakan satu warna rata, jadi area hero (kedua kolom,
   keputusan pemilik 2026-10-14) mendapat dua lapis:
   1. garis blueprint yang lebih rapat dan lebih tegas daripada grid halaman
      (26px vs 42px, 18% vs 8%). Di luar permukaan kaca garisnya tajam, di
      belakangnya tersapu blur: itulah yang membuat batas "kaca" terbaca.
   2. dua titik cahaya aksen dengan satu warna: satu di belakang tumpukan
      catatan (kolom kiri), satu di belakang terminal (kolom kanan). Ini yang
      memberi saturate(180%) sesuatu untuk dikuatkan, dan memberi kaca warna
      yang dipantulkan latar.
   Titik cahaya kiri sengaja berhenti sebelum baris tombol CTA: kalau cahaya
   ikut berada di belakang tombol, isian tombol terpaksa hampir opak supaya
   label CTA tetap lolos AA (terukur 0.94 vs 0.74).
   z-index -1 diperlukan karena .bd-copy tidak ber-position: lapis ini harus
   turun ke bawah konten in-flow-nya, bukan hanya ke bawah panel yang positioned.
   Ini dicatat sebagai override sadar. */
.bd-hero::before,
.bd-hero::after {
    display: none !important;
    background: none !important;
}

.bd-ide,
.bd-ide-head,
.bd-ide-work,
.bd-sidebar,
.bd-editor,
.bd-tabs,
.bd-tab,
.bd-code-area,
.bd-numbers,
.bd-code,
.bd-console,
.bd-console-head,
.bd-console-body,
.bd-ide-status {
    border-radius: 0;
}

/* Tepi kaca: dua garis cahaya tipis (dalam dan luar) di sisi atas, garis
   gelap tipis di sisi bawah, lalu bayangan aksen yang jatuh ke bawah.
   Semua elemen cahaya hanya menyentuh tepi, tidak menimpa area teks. */
.bd-ide,
.bd-login-strip,
.bd-profile-strip {
    border: 1px solid var(--bd-glass-edge);
    box-shadow:
        0 -1px 0 0 var(--bd-glass-spec-soft),
        inset 0 1px 0 0 var(--bd-glass-hi-top),
        inset 0 -1px 0 0 var(--bd-glass-hi-bottom),
        inset 0 0 0 1px var(--bd-glass-ring),
        0 14px 44px -24px var(--bd-glass-rim),
        var(--box-shadow-modal, 0 18px 40px rgba(0,0,0,.35));
}

/* Kilau specular di tepi atas: paling terang di kiri, memudar ke kanan.
   Ini yang membuat panel terbaca "memantulkan cahaya", bukan sekadar kotak
   berbingkai. Aman di semua peramban (tanpa mask). */
.bd-ide::after,
.bd-login-strip::after,
.bd-profile-strip::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        var(--bd-glass-spec) 0%,
        var(--bd-glass-spec) 16%,
        var(--bd-glass-spec-soft) 58%,
        transparent 100%
    );
}

/* Bila mask-composite didukung, kilau ditingkatkan menjadi cincin tepi yang
   memudar ke bawah (tepi kiri/kanan ikut menyala), seperti kaca membulat. */
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
    .bd-ide::after,
    .bd-login-strip::after,
    .bd-profile-strip::after {
        inset: 0;
        height: auto;
        padding: 1px;
        background: linear-gradient(
            180deg,
            var(--bd-glass-spec) 0%,
            var(--bd-glass-spec-soft) 34%,
            transparent 62%
        );
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }
}

.bd-ide {
    background: var(--bd-glass-bg);
    -webkit-backdrop-filter: blur(var(--bd-glass-blur)) saturate(var(--bd-glass-sat));
    backdrop-filter: blur(var(--bd-glass-blur)) saturate(var(--bd-glass-sat));
    border-radius: var(--bd-r-lg);
    overflow: hidden;
    position: relative;
    width: 100%;
    min-height: 420px;
    height: 100%;
    max-height: min(calc(100dvh - 140px), 780px);
    display: grid;
    grid-template-rows: clamp(32px, 3.6vh, 44px) 1fr clamp(26px, 2.9vh, 36px);
    transition: background-color .25s ease, border-color .25s ease;
}

.bd-ide-head {
    background: var(--bd-glass-bg-soft);
    border-bottom: 1px solid var(--border-editor);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
}
.bd-window { display: flex; align-items: center; gap: 6px; }
.bd-window i { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); }
.bd-window i:nth-child(1) { background: var(--accent-rose, #E05A47); }
.bd-window i:nth-child(2) { background: var(--bd-warn); }
.bd-window i:nth-child(3) { background: var(--bd-ok); }
/* Catatan kontras kaca: seluruh teks kecil di dalam panel kaca memakai
   --text-secondary. --text-tertiary hanya lolos di atas permukaan solid;
   di atas permukaan transparan nilainya jatuh di bawah 4.5:1 di semua alpha
   (lihat riwayat pengukuran di log.md). */
.bd-window-title { color: var(--text-secondary); font: var(--bd-fs-3xs) var(--bd-mono); letter-spacing: .04em; }

.bd-ide-work {
    display: grid;
    grid-template-columns: clamp(140px, 10vw, 240px) 1fr;
    min-height: 0;
}

.bd-sidebar {
    background: var(--bd-glass-bg-soft);
    border-right: 1px solid var(--border-editor);
    padding: 12px 0;
    color: var(--text-secondary);
    font: var(--bd-fs-3xs) var(--bd-mono);
}
.bd-sidebar-title {
    padding: 0 13px 10px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: var(--bd-fs-3xs);
}
.bd-tree-item {
    padding: 6px 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color .15s ease, color .15s ease;
}
.bd-tree-item.active {
    color: var(--text-primary);
    background: color-mix(in srgb, var(--bg-elevated) 72%, transparent);
    border-left: 2px solid var(--bd-accent);
    padding-left: 11px;
}
.bd-tree-item .folder { color: var(--bd-warn-glass); }
.bd-tree-item .file { color: var(--bd-info-glass); }
.bd-tree-indent { padding-left: 28px; }

.bd-editor {
    min-width: 0;
    display: grid;
    grid-template-rows: clamp(30px, 3.4vh, 42px) 1fr clamp(110px, 17vh, 220px);
}
.bd-tabs {
    display: flex;
    align-items: flex-end;
    /* transparan: kaca panel yang tampil, bukan pita solid */
    background: transparent;
    border-bottom: 1px solid var(--border-editor);
}
.bd-tab {
    height: clamp(30px, 3.4vh, 42px);
    min-width: clamp(130px, 9vw, 200px);
    padding: 0 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    /* Tab baris ini tembus pandang (satu-satunya area kaca yang benar-benar
       terlihat), jadi labelnya memakai --text-primary. Bedanya tab aktif
       dibuat lewat latar + garis aksen atas, bukan lewat warna teks yang lebih
       redup, karena warna redup tidak lolos di atas kaca. */
    color: var(--text-primary);
    font: var(--bd-fs-3xs) var(--bd-mono);
    border-right: 1px solid var(--border-editor);
    background: transparent;
    transition: background-color .15s ease, color .15s ease;
}
.bd-tab.active {
    background: var(--bd-glass-bg-editor);
    color: var(--text-primary);
    border-top: 2px solid var(--bd-accent);
}
.bd-tab-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-blue); }
.bd-tab-dot.green { background: var(--accent-emerald); }

.bd-code-area {
    min-height: 0;
    display: grid;
    grid-template-columns: clamp(40px, 3vw, 60px) 1fr;
    background: transparent;
    overflow: hidden;
}
.bd-numbers {
    padding-top: 14px;
    color: var(--text-secondary);
    background: var(--bd-glass-bg-soft);
    text-align: right;
    padding-right: 10px;
    font: var(--bd-fs-code)/1.95 var(--bd-mono);
    user-select: none;
    border-right: 1px solid var(--border-subtle);
}
.bd-code {
    margin: 0;
    padding: 14px 18px;
    background: var(--bd-glass-bg-editor);
    border: 0;
    color: var(--text-primary);
    font: var(--bd-fs-code)/1.95 var(--bd-mono);
    overflow: auto;
    white-space: pre;
}
.bd-code .kw { color: var(--bd-accent); font-weight: 600; }
.bd-code .fn { color: var(--bd-info); }
.bd-code .type { color: var(--accent-blue); }
.bd-code .str { color: var(--accent-emerald); }
.bd-code .num { color: var(--accent-amber); }
.bd-code .comment { color: var(--text-secondary); font-style: italic; }
.bd-code .pre { color: var(--accent-rose); }
.bd-code .op { color: var(--text-secondary); }

/* Penyetelan kontras token per tema (target >= 4.5:1 di atas latar editor):
   - light: amber D97706 hanya ~3.0:1 untuk angka. */
[data-theme="dark"] .bd-code .pre { color: #E05C49; }
[data-theme="light"] .bd-code .num { color: #AB4F09; }
[data-theme="light"] .bd-code .str { color: #297751; }
[data-theme="light"] .bd-code .pre { color: #BA3E2B; }

.bd-console {
    background: transparent;
    border-top: 1px solid var(--border-editor);
    display: grid;
    grid-template-rows: clamp(24px, 2.8vh, 34px) 1fr;
}
.bd-console-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 11px;
    color: var(--text-secondary);
    font: var(--bd-fs-3xs) var(--bd-mono);
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bd-glass-bg-soft);
}
.bd-console-actions { display: flex; gap: 13px; }
.bd-console-actions span.active { color: var(--bd-accent-glass); font-weight: bold; }
.bd-console-body {
    padding: 9px 12px;
    color: var(--text-secondary);
    font: var(--bd-fs-3xs)/1.75 var(--bd-mono);
    overflow: auto;
    background: var(--bd-glass-bg-soft);
}
.bd-console-body .good { color: var(--bd-ok-glass); }
.bd-console-body .info { color: var(--bd-info-glass); }
.bd-console-body .warn { color: var(--bd-warn-glass); }

.bd-ide-status {
    background: var(--bd-glass-bg-soft);
    border-top: 1px solid var(--border-editor);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 11px;
    color: var(--text-secondary);
    font: var(--bd-fs-3xs) var(--bd-mono);
}
.bd-status-left,
.bd-status-right { display: flex; gap: 14px; align-items: center; }
.bd-ide-status .on { color: var(--bd-ok-glass); }
.bd-ide-status .branch { color: var(--bd-accent-glass); }

/* ---------- LOGIN STRIP (tamu) - overlay di tepi bawah mockup IDE ---------- */
.bd-login-strip,
.bd-profile-strip {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 5;
    background: var(--bd-glass-bg-strip);
    -webkit-backdrop-filter: blur(var(--bd-glass-blur)) saturate(var(--bd-glass-sat));
    backdrop-filter: blur(var(--bd-glass-blur)) saturate(var(--bd-glass-sat));
    color: var(--text-primary);
    border-radius: var(--bd-r-lg);
    overflow: hidden;
    transition: background-color .25s ease, border-color .25s ease;
}
.bd-login-strip { width: min(360px, 92%); }
.bd-profile-strip { width: min(400px, 92%); }

.bd-login-top {
    height: clamp(26px, 3vh, 36px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    background: color-mix(in srgb, var(--bg-elevated) 55%, transparent);
    border-bottom: 1px solid var(--border-subtle);
}
.bd-login-top span { font: var(--bd-fs-2xs) var(--bd-mono); color: var(--text-secondary); }
.bd-close-dots { display: flex; gap: 5px; }
.bd-close-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--border-strong); }
.bd-login-body { padding: clamp(12px, 1vw, 18px); }

.bd-login-prompt {
    font: var(--bd-fs-xs)/1.6 var(--bd-mono);
    color: var(--text-secondary);
    margin-bottom: 11px;
    padding: 8px 10px;
    background: var(--bg-base);
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-sm);
}
.bd-login-prompt strong { color: var(--bd-accent-text); }

.bd-login-label {
    display: block;
    margin: 9px 0 5px;
    color: var(--text-secondary);
    font: var(--bd-fs-2xs) var(--bd-mono);
    letter-spacing: .08em;
}
.bd-login-input {
    width: 100%;
    height: clamp(32px, 3.8vh, 42px);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--bg-base);
    color: var(--text-primary);
    padding: 0 10px;
    outline: none;
    font: var(--bd-fs-xs) var(--bd-mono);
    transition: border-color .15s ease;
}
.bd-login-input:focus {
    border-color: var(--bd-accent);
    box-shadow: none;
}
.bd-login-input::placeholder { color: var(--text-secondary); }
.bd-login-error {
    margin-top: 8px;
    padding: 5px 7px;
    background: var(--code-incorrect-bg, rgba(224, 90, 71, 0.12));
    border: 1px solid var(--code-incorrect, #E05A47);
    border-radius: var(--radius-sm);
    color: var(--code-incorrect, #E05A47);
    font: var(--bd-fs-2xs)/1.5 var(--bd-mono);
}
.bd-login-submit {
    width: 100%;
    height: clamp(34px, 3.8vh, 44px);
    margin-top: 11px;
    border-radius: var(--bd-r-sm);
    font: 600 var(--bd-fs-xs) var(--font-ui);
    cursor: pointer;
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.bd-login-note {
    margin-top: 10px;
    color: var(--text-secondary);
    font: var(--bd-fs-2xs)/1.6 var(--bd-mono);
}
.bd-linklike {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* ---------- SAPAAN (sudah login) - strip yang sama, konten sesi aktif ---------- */
.bd-profile-body { padding: clamp(12px, 1vw, 18px); }
#welcome-view .bd-profile-strip .welcome-greeting-top {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border-subtle);
}
#welcome-view .bd-profile-strip .welcome-greeting-avatar {
    width: clamp(34px, 2.4vw, 44px);
    height: clamp(34px, 2.4vw, 44px);
    border-radius: var(--bd-r-sm);
    display: grid;
    place-items: center;
    background: var(--bd-accent-soft);
    border: 1px solid var(--border-accent);
    color: var(--bd-accent);
    font-size: 14px;
}
#welcome-view .bd-profile-strip .welcome-greeting-hello {
    display: block;
    font: var(--bd-fs-2xs) var(--bd-mono);
    color: var(--text-secondary);
    letter-spacing: .08em;
    text-transform: uppercase;
}
#welcome-view .bd-profile-strip .welcome-greeting-name {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
#welcome-view .bd-profile-strip .welcome-greeting-name strong {
    font-size: var(--bd-fs-md);
    color: var(--text-primary);
    line-height: 1.25;
}
#welcome-view .bd-profile-strip .badge-role {
    font: 700 var(--bd-fs-2xs) var(--bd-mono);
    letter-spacing: .1em;
    border-radius: var(--radius-full);
}
#welcome-view .bd-profile-strip .welcome-stat-chips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
#welcome-view .bd-profile-strip .welcome-stat-chip {
    display: flex;
    align-items: center;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--bd-r-sm);
    padding: 9px 10px;
    gap: 9px;
    transition: background-color .15s ease, border-color .15s ease;
}
#welcome-view .bd-profile-strip .welcome-stat-chip:hover {
    border-color: var(--bd-accent);
    transform: none;
}
#welcome-view .bd-profile-strip .welcome-stat-chip .welcome-stat-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
#welcome-view .bd-profile-strip .welcome-stat-chip strong {
    display: block;
    font-size: clamp(16px, 1.15vw, 22px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary);
    font-family: var(--bd-mono);
}
#welcome-view .bd-profile-strip .welcome-stat-chip .welcome-stat-info > span {
    display: block;
    font-size: var(--bd-fs-2xs);
    font-family: var(--bd-mono);
    color: var(--text-secondary);
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.3;
}
#welcome-view .bd-profile-strip .welcome-empty-hint {
    font: var(--bd-fs-2xs)/1.6 var(--bd-mono);
    color: var(--text-secondary);
    display: flex;
    gap: 7px;
    align-items: flex-start;
}

/* Harness 1648 kondisi (riwayat saat 8 tema): 0 gagal. Catatan pengukuran
   lama untuk tema yang sudah dihapus (sakura 6.29:1, sakura-light 4.91:1
   pada komposit kaca terburuk) dipertahankan sebagai arsip. */

/* ---------- Override kontras teks DI DALAM kaca ----------
   Kaca menurunkan kontras semua teks di atasnya, termasuk teks strip yang
   sebelumnya lolos di permukaan solid. Nilai di bawah adalah warna terdekat
   yang masih lolos 4.5:1 pada komposit kaca nyata (kulit 24% + tint 46%,
   latar stage termasuk garis blueprint dan glow). Hue dipertahankan: hanya
   digelapkan (tema terang) atau diterangkan (tema gelap). Perhitungannya
   dicatat di Architecture/UI. */
[data-theme="light"] #welcome-view {
    --bd-ok-glass: #27724E;
    --bd-warn-glass: #985304;
}
/* Tanda tangan halaman duduk langsung di atas latar hero (bukan di atas kaca),
   jadi ia bertemu piksel garis dan piksel cahaya. Di kedua tema
   --text-secondary kehilangan kontras di piksel cahaya, jadi nilainya
   digeser sedikit: hue tetap, hanya lebih gelap (terang) atau lebih
   terang (gelap). */
[data-theme="dark"] #welcome-view { --bd-signature-text: #B3AB9F; }
[data-theme="light"] #welcome-view { --bd-signature-text: #564F46; }

/* Hover CTA tema light adalah kebalikan dari tema lain: --btn-bg-hover
   (#B45309) lebih gelap daripada isian normalnya, jadi label gelap justru
   kehilangan kontras kalau isiannya pekat. Rentang yang lolos di tema ini
   hanya alpha <= 0.72. */
[data-theme="light"] #welcome-view {
    --bd-cta-fill-hover: color-mix(in srgb, var(--btn-bg-hover) 70%, transparent);
}

/* Badge peran - warna mengikuti makna peran, bukan aksen merek.
   Tema terang butuh warna status yang lebih gelap agar teks 10-12px lolos
   4.5:1 di atas permukaan elevated-nya. */
#welcome-view .badge-role { color: var(--accent-emerald, #5EB886); }
#welcome-view .badge-role-admin { color: var(--accent-amber, #ffffff); }
#welcome-view .badge-role-asisten { color: var(--brand-cyan, #7EAFBA); }

[data-theme="light"] #welcome-view .badge-role { color: #1F6B45; }
[data-theme="light"] #welcome-view .badge-role-admin { color: #92400E; }
[data-theme="light"] #welcome-view .badge-role-asisten { color: #0f6f8c; }

/* ---------- FOOTER MINI (Dihapus sesuai permintaan pengguna) ---------- */
.bd-footer {
    display: none !important;
}

/* ---------- TOAST ---------- */
.bd-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%, 15px);
    opacity: 0;
    pointer-events: none;
    z-index: 500;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: var(--bd-r-sm);
    color: var(--text-primary);
    font: var(--bd-fs-xs) var(--bd-mono);
    padding: 9px 12px;
    box-shadow: var(--box-shadow-modal);
    transition: .2s;
}
.bd-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- FALLBACK KACA ----------
   Tanpa dukungan backdrop-filter, atau saat pengguna meminta transparansi
   dikurangi, panel kembali ke permukaan solid. Efek kaca murni kosmetik:
   tidak ada teks yang bergantung pada blur untuk terbaca. */
@media (prefers-reduced-transparency: reduce) {
    /* Tanpa kaca, kedua lapis latar hero kehilangan tujuannya: garis hanya
       bertugas memberi blur sesuatu untuk disapu, glow hanya memberi kerja
       pada saturate. Keduanya dilepas, bukan ditinggal sebagai hiasan. */
    .bd-hero::before,
    .bd-hero::after { content: none; }
    /* Permukaan kaca baru (kartu catatan & tombol CTA) kembali solid. Token
       diarahkan ke permukaan biasa supaya tidak perlu menulis ulang tiap aturan. */
    #welcome-view {
        --bd-glass-bg-note: var(--bg-surface);
        --bd-glass-bg-note-accent: var(--bg-elevated);
        --bd-glass-bg-btn: var(--bg-surface);
        --bd-glass-bg-btn-hover: var(--bg-hover);
        --bd-glass-edge: var(--border-subtle);
        --bd-glass-edge-accent: var(--btn-bg, var(--bd-accent));
    }
    /* Isian tombol dipatok langsung: alpha kaca per tema punya spesifisitas
       lebih tinggi daripada token di atas, jadi nilai kacanya harus ditimpa. */
    #welcome-view .welcome-cta-btn.btn-primary { border-color: var(--btn-bg, var(--bd-accent)) !important; }
    #welcome-view .welcome-cta-btn.btn-primary::before { background: var(--btn-bg, var(--bd-accent)) !important; }
    #welcome-view .welcome-cta-btn.btn-primary:hover::before { background: var(--btn-bg-hover, var(--color-primary-hover)) !important; }
    #welcome-view .welcome-cta-btn.btn-secondary { border-color: var(--border-strong) !important; }
    #welcome-view .welcome-cta-btn.btn-secondary::before { background: var(--bg-surface) !important; }
    #welcome-view .welcome-cta-btn.btn-secondary:hover::before { background: var(--bg-hover) !important; }
    .bd-ide,
    .bd-code,
    .bd-code-area,
    .bd-tab.active { background: var(--bg-editor); }
    .bd-login-strip,
    .bd-profile-strip,
    .bd-ide-head,
    .bd-sidebar,
    .bd-numbers,
    .bd-ide-status,
    .bd-console,
    .bd-console-head,
    .bd-console-body { background: var(--bg-surface); }
    .bd-login-top { background: var(--bg-elevated); }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .bd-hero::before,
    .bd-hero::after { content: none; }
    #welcome-view {
        --bd-glass-bg-note: var(--bg-surface);
        --bd-glass-bg-note-accent: var(--bg-elevated);
        --bd-glass-bg-btn: var(--bg-surface);
        --bd-glass-bg-btn-hover: var(--bg-hover);
        --bd-glass-edge: var(--border-subtle);
        --bd-glass-edge-accent: var(--btn-bg, var(--bd-accent));
    }
    #welcome-view .welcome-cta-btn.btn-primary { border-color: var(--btn-bg, var(--bd-accent)) !important; }
    #welcome-view .welcome-cta-btn.btn-primary::before { background: var(--btn-bg, var(--bd-accent)) !important; }
    #welcome-view .welcome-cta-btn.btn-primary:hover::before { background: var(--btn-bg-hover, var(--color-primary-hover)) !important; }
    #welcome-view .welcome-cta-btn.btn-secondary { border-color: var(--border-strong) !important; }
    #welcome-view .welcome-cta-btn.btn-secondary::before { background: var(--bg-surface) !important; }
    #welcome-view .welcome-cta-btn.btn-secondary:hover::before { background: var(--bg-hover) !important; }
    .bd-ide,
    .bd-code,
    .bd-code-area,
    .bd-tab.active { background: var(--bg-editor); }
    .bd-login-strip,
    .bd-profile-strip,
    .bd-ide-head,
    .bd-sidebar,
    .bd-numbers,
    .bd-ide-status,
    .bd-console,
    .bd-console-head,
    .bd-console-body { background: var(--bg-surface); }
    .bd-login-top { background: var(--bg-elevated); }
}

/* ---------- HORMATI PREFERENSI GERAK ---------- */
@media (prefers-reduced-motion: reduce) {
    #welcome-view .bd-note,
    #welcome-view .welcome-cta-btn,
    #welcome-view .welcome-admin-item,
    #welcome-view .welcome-stat-chip {
        transition: none;
    }
    #welcome-view .bd-note:hover,
    #welcome-view .welcome-cta-btn:hover,
    #welcome-view .welcome-admin-item:hover {
        transform: none;
    }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px) {
    #welcome-view { padding: 22px 18px 12px; }
    .bd-hero {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .bd-subtitle { max-width: none; }
    /* Strip turun dari posisi absolut: di layar sempit ia jadi panel sendiri
       di bawah mockup, bukan menumpang di atasnya. */
    .bd-stage {
        padding-bottom: 0;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .bd-login-strip,
    .bd-profile-strip {
        position: static;
        width: min(460px, 100%);
        margin: 0 auto;
    }
    .bd-ide { min-height: 460px; height: auto; max-height: none; }
    #welcome-view .welcome-admin-panel { max-width: none; }
}

/* Desktop pendek (laptop 768px, zoom 125-150%): rapatkan ritme vertikal */
@media (min-width: 1101px) and (max-height: 760px) {
    .bd-note { line-height: 1.5; }
    .bd-note-num { margin-bottom: 4px; }
    #welcome-view .welcome-admin-grid { gap: 6px; }
}

@media (max-width: 720px) {
    #welcome-view { padding: 18px 13px 10px; min-height: auto; }
    .bd-hero { gap: 30px; }
    .bd-title { font-size: clamp(30px, 9vw, 40px); }
    .bd-ide { min-height: 480px; }
    .bd-ide-work { grid-template-columns: 1fr; }
    .bd-sidebar { display: none; }
    .bd-login-strip,
    .bd-profile-strip {
        width: 100%;
        margin: 0;
    }
    .bd-footer { text-align: left; }
}

/* ============================================================================
   DASHBOARD PER PERAN (setelah login)
   ----------------------------------------------------------------------------
   Tamu memakai landing-view; panel ini hanya dirender untuk pengguna yang
   sudah masuk. Bahasa visualnya melanjutkan "kertas kerja laboratorium":
   judul tegas, label mono kecil, garis tipis, dan satu aksen merek. Tidak ada
   kaca/blur di sini karena tidak ada lapisan di belakangnya yang perlu
   dibelokkan; permukaan solid lebih jujur dan lebih mudah dipindai.
   ========================================================================== */

#welcome-view .bd-dashboard {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: clamp(4px, 0.8vh, 12px) 0 clamp(8px, 1.2vh, 18px);
    box-sizing: border-box !important;
    color: var(--text-primary);
}

#welcome-view .bd-dash-shell {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2.2vh, 26px);
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* ---------- Kepala dashboard ---------- */
#welcome-view .bd-dash-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(16px, 3vw, 40px);
    padding-bottom: clamp(16px, 2vh, 24px);
    border-bottom: 1px solid var(--border-subtle);
}

#welcome-view .bd-dash-intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

#welcome-view .bd-dash-eyebrow {
    margin: 0 0 7px;
    font: 500 var(--bd-fs-2xs)/1.2 var(--bd-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

#welcome-view .bd-dash-title {
    margin: 0;
    font-family: var(--font-ui);
    font-size: clamp(26px, 2.7vw, 38px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.025em;
    color: var(--text-primary);
}

#welcome-view .bd-dash-id {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: clamp(14px, 1.8vh, 20px);
    min-width: 0;
}

#welcome-view .bd-dash-id .welcome-greeting-avatar {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    border-radius: var(--bd-r-sm);
    background: var(--bd-accent-soft);
    border: 1px solid var(--border-accent);
    color: var(--bd-accent);
    font-size: 16px;
}

#welcome-view .bd-dash-id-text { min-width: 0; }

#welcome-view .bd-dash-id .welcome-greeting-hello {
    display: block;
    font: var(--bd-fs-2xs)/1.3 var(--bd-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

#welcome-view .bd-dash-id .welcome-greeting-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
}

#welcome-view .bd-dash-id .welcome-greeting-name strong {
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.25;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

#welcome-view .bd-dash-id .badge-role {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 0;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--text-secondary);
    font: 700 var(--bd-fs-2xs)/1.2 var(--bd-mono);
    letter-spacing: .08em;
}

#welcome-view .bd-dash-context {
    margin: 5px 0 0;
    font: var(--bd-fs-2xs)/1.5 var(--bd-mono);
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

#welcome-view .bd-dash-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 10px;
}

#welcome-view .bd-dash-actions .welcome-cta-btn {
    min-height: 44px;
    height: auto;
    padding: 0 clamp(16px, 1.2vw, 22px);
}

/* Permukaan solid: dashboard tidak duduk di atas stage kaca, jadi blur dan
   bayangan mengambang tidak punya alasan di sini. */
#welcome-view .bd-dashboard .welcome-cta-btn.btn-primary {
    background: transparent !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid var(--btn-bg) !important;
    /* Tombol utama dashboard memakai outline, bukan isian putih: label putih
       di tema gelap dan gelap di tema terang, sama seperti tombol di sebelahnya. */
    color: var(--text-primary) !important;
    box-shadow: none !important;
}
#welcome-view .bd-dashboard .welcome-cta-btn.btn-primary::before {
    background: var(--btn-bg) !important;
}
#welcome-view .bd-dashboard .welcome-cta-btn.btn-primary:hover {
    border-color: var(--btn-bg-hover) !important;
}
#welcome-view .bd-dashboard .welcome-cta-btn.btn-primary:hover::before {
    background: var(--btn-bg-hover) !important;
}
#welcome-view .bd-dashboard .welcome-cta-btn.btn-secondary {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid var(--border-strong) !important;
    box-shadow: none !important;
}
#welcome-view .bd-dashboard .welcome-cta-btn.btn-secondary::before {
    background: var(--bg-elevated) !important;
}
#welcome-view .bd-dashboard .welcome-cta-btn.btn-secondary:hover {
    border-color: var(--bd-accent) !important;
}
#welcome-view .bd-dashboard .welcome-cta-btn.btn-secondary:hover::before {
    background: var(--bg-hover) !important;
}

/* ---------- Kartu umum ---------- */
#welcome-view .bd-dash-card {
    min-width: 0;
    padding: clamp(16px, 1.5vw, 22px);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--bd-r-lg);
}

#welcome-view .bd-dash-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: clamp(12px, 1.5vh, 18px);
}

#welcome-view .bd-dash-card-head h2 {
    margin: 0;
    font-size: var(--bd-fs-md);
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary);
}

#welcome-view .bd-dash-card-head p {
    margin: 4px 0 0;
    font-size: var(--bd-fs-xs);
    line-height: 1.5;
    color: var(--text-secondary);
}

/* ---------- Mahasiswa: performa ---------- */
#welcome-view .bd-dash-student {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 1.8vh, 20px);
    min-width: 0;
}

/* ---------- Mahasiswa: status sesi / responsi (Session Status Panel) ---------- */
#welcome-view .bd-dash-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md, 8px);
    margin-top: 14px;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

#welcome-view .bd-dash-note.hidden {
    display: none !important;
}

#welcome-view .bd-dash-note-ok {
    border-color: rgba(16, 185, 129, 0.3);
    background: color-mix(in srgb, #10b981 6%, var(--bg-surface));
}

#welcome-view .bd-dash-note-warn {
    border-color: rgba(245, 158, 11, 0.3);
    background: color-mix(in srgb, #f59e0b 6%, var(--bg-surface));
}

#welcome-view .bd-dash-note-responsi {
    border-color: rgba(99, 102, 241, 0.3);
    background: color-mix(in srgb, #6366f1 6%, var(--bg-surface));
}

#welcome-view .bd-dash-note-main {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1 1 auto;
}

#welcome-view .bd-dash-note-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    font-size: 16px;
}

#welcome-view .bd-dash-note-ok .bd-dash-note-icon {
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.3);
}

#welcome-view .bd-dash-note-warn .bd-dash-note-icon {
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.3);
}

#welcome-view .bd-dash-note-responsi .bd-dash-note-icon {
    color: #6366f1;
    border-color: rgba(99, 102, 241, 0.3);
}

#welcome-view .bd-dash-note-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

#welcome-view .bd-dash-note-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

#welcome-view .bd-dash-note-header h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-primary);
}

#welcome-view .bd-dash-note-badge {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 7px;
    border-radius: 4px;
    line-height: 1.2;
}

#welcome-view .bd-dash-note-badge.badge-active {
    color: #10b981;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.25);
}

#welcome-view .bd-dash-note-badge.badge-responsi {
    color: #6366f1;
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.25);
}

#welcome-view .bd-dash-note-badge.badge-idle {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.25);
}

#welcome-view .bd-dash-note-desc {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-secondary);
}

#welcome-view .bd-dash-note-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--text-tertiary);
}

#welcome-view .note-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

#welcome-view .note-meta-item i {
    font-size: 13px;
}

#welcome-view .note-meta-item strong {
    color: var(--text-primary);
}

#welcome-view .note-meta-sep {
    color: var(--border-strong);
}

#welcome-view .bd-dash-note-action {
    flex-shrink: 0;
}

#welcome-view .bd-dash-note-btn {
    min-height: 36px;
    height: 36px;
    padding: 0 14px;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* ---------- Mahasiswa: KPI Summary Cards ---------- */
#welcome-view .welcome-stat-chips {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

#welcome-view .welcome-stat-chips.hidden {
    display: none !important;
}

#welcome-view .welcome-stat-chip {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md, 8px);
    transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
    min-width: 0;
}

#welcome-view .welcome-stat-chip:hover {
    border-color: var(--border-strong);
    background: color-mix(in srgb, var(--text-primary) 2%, var(--bg-surface));
}

#welcome-view .kpi-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

#welcome-view .welcome-stat-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    font-size: 14px;
}

#welcome-view .welcome-stat-icon i {
    font-size: 16px !important;
}

#welcome-view .kpi-icon-speed {
    color: #06b6d4;
    background: rgba(6, 182, 212, 0.12);
    border: 1px solid rgba(6, 182, 212, 0.25);
}

#welcome-view .kpi-icon-best {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.25);
}

#welcome-view .kpi-icon-acc {
    color: #10b981;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.25);
}

#welcome-view .kpi-icon-sessions {
    color: #6366f1;
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.25);
}

#welcome-view .kpi-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#welcome-view .kpi-metric-wrap {
    display: flex;
    align-items: baseline;
    gap: 4px;
    line-height: 1;
    margin-bottom: 4px;
}

#welcome-view .kpi-number {
    font-family: var(--bd-mono);
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

#welcome-view .kpi-unit {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    font-family: var(--bd-mono);
}

#welcome-view .kpi-caption {
    font-size: 11px;
    color: var(--text-tertiary);
    line-height: 1.3;
}

#welcome-view .welcome-empty-hint {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    background: var(--bg-elevated);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md, 8px);
    color: var(--text-secondary);
    font-size: var(--bd-fs-sm);
    line-height: 1.6;
    margin-bottom: 12px;
}

#welcome-view .welcome-empty-hint i {
    margin-top: 2px;
    color: var(--bd-accent);
}

/* ---------- Mahasiswa: Compact Activity List ---------- */
#welcome-view .welcome-recent-integrated {
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--border-subtle);
}

#welcome-view .welcome-recent-integrated.hidden {
    display: none !important;
}

#welcome-view .welcome-recent-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

#welcome-view .welcome-recent-tag {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#welcome-view .welcome-recent-tag i {
    font-size: 15px;
    color: var(--brand-cyan, #06b6d4);
}

#welcome-view .welcome-recent-note {
    font: var(--bd-fs-2xs)/1.2 var(--bd-mono);
    color: var(--text-tertiary);
}

#welcome-view .bd-recent-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#welcome-view .bd-recent-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 6px;
    background: var(--bg-surface);
    border: 1px solid transparent;
    transition: all 0.15s ease;
}

#welcome-view .bd-recent-item:hover {
    background: var(--bg-elevated);
    border-color: var(--border-subtle);
}

#welcome-view .bd-recent-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: rgba(6, 182, 212, 0.08);
    border: 1px solid rgba(6, 182, 212, 0.2);
    color: var(--brand-cyan, #06b6d4);
    font-size: 14px;
}

#welcome-view .bd-recent-icon i {
    font-size: 16px !important;
}

#welcome-view .bd-recent-main {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1 1 auto;
}

#welcome-view .bd-recent-title {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#welcome-view .bd-recent-meta {
    font: var(--bd-fs-2xs)/1.4 var(--bd-mono);
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#welcome-view .bd-recent-metrics {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    text-align: right;
}

#welcome-view .recent-metric-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    min-width: 38px;
}

#welcome-view .recent-metric-val {
    font-family: var(--bd-mono);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

#welcome-view .recent-metric-lbl {
    font-family: var(--bd-mono);
    font-size: 10px;
    color: var(--text-tertiary);
    text-transform: lowercase;
    line-height: 1.2;
}

#welcome-view .bd-dashboard button:focus-visible {
    outline: 2px solid var(--bd-accent);
    outline-offset: 2px;
}

/* ---------- Responsif dashboard ---------- */
@media (max-width: 1020px) {
    #welcome-view .bd-dash-top {
        flex-direction: column;
    }

    #welcome-view .bd-dash-actions {
        justify-content: flex-start;
    }

    #welcome-view .welcome-stat-chips {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        padding: 6px;
    }

    #welcome-view .welcome-stat-chip {
        justify-content: flex-start;
        padding: 6px 8px;
        border-radius: 4px !important;
        background: var(--bg-elevated) !important;
    }

    #welcome-view .welcome-stat-chip + .welcome-stat-chip {
        border-left: none !important;
    }
}

@media (max-width: 620px) {
    #welcome-view .bd-dashboard { padding-top: 0; }

    #welcome-view .bd-dash-actions {
        width: 100%;
    }

    #welcome-view .bd-dash-actions .welcome-cta-btn {
        flex: 1 1 100%;
    }

    #welcome-view .bd-dash-card { padding: 15px; }

    #welcome-view .bd-recent-item {
        grid-template-columns: 34px minmax(0, 1fr);
        align-items: flex-start;
    }

    #welcome-view .bd-recent-icon {
        width: 34px;
        height: 34px;
    }

    #welcome-view .bd-recent-metrics {
        grid-column: 2;
        justify-content: flex-start;
        gap: 16px;
        margin-top: 4px;
    }

    #welcome-view .bd-recent-metrics span { text-align: left; }

    #welcome-view .bd-dash-note {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    #welcome-view .welcome-stat-chips {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    #welcome-view .bd-dashboard .welcome-cta-btn {
        transition: none;
    }
}

/* ---------- Program Praktikum Mahasiswa ---------- */
#welcome-view #welcome-my-practicums-card {
    margin-bottom: clamp(14px, 1.8vh, 20px);
}

#welcome-view .welcome-practicum-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 16px;
    align-items: stretch;
}

#welcome-view .welcome-practicum-loading,
#welcome-view .welcome-practicum-error {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px;
    color: var(--text-secondary);
    font-size: var(--bd-fs-sm);
}

#welcome-view .welcome-skeleton-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--bg-surface);
    border: 1px dashed var(--border-subtle);
    border-radius: var(--radius-md, 8px);
    padding: 16px 18px;
    min-height: 220px;
    box-sizing: border-box;
}

#welcome-view .welcome-practicum-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md, 8px);
    padding: 16px 18px;
    min-height: 220px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    position: relative;
    box-sizing: border-box;
}

#welcome-view .welcome-practicum-card:hover {
    border-color: var(--border-strong);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

#welcome-view .welcome-practicum-card.is-active {
    border-color: var(--brand-cyan, #06b6d4);
    box-shadow: 0 0 0 1px var(--brand-cyan, #06b6d4), 0 4px 16px rgba(6, 182, 212, 0.1);
    background: color-mix(in srgb, var(--brand-cyan) 3%, var(--bg-surface));
}

#welcome-view .welcome-practicum-card.type-proyek.is-active {
    border-color: var(--brand-indigo, #6366f1);
    box-shadow: 0 0 0 1px var(--brand-indigo, #6366f1), 0 4px 16px rgba(99, 102, 241, 0.1);
    background: color-mix(in srgb, var(--brand-indigo) 3%, var(--bg-surface));
}

#welcome-view .wp-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

#welcome-view .wp-bentuk-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border-radius: 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: transparent !important;
    border: none !important;
}

#welcome-view .wp-bentuk-chip.is-proyek {
    background: transparent !important;
    color: var(--brand-indigo, #6366f1);
    border: none !important;
}

#welcome-view .wp-bentuk-chip.is-pemrograman {
    background: transparent !important;
    color: var(--brand-cyan, #06b6d4);
    border: none !important;
}

#welcome-view .wp-bentuk-chip i {
    font-size: 14px;
}

#welcome-view .wp-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.2;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

#welcome-view .wp-status-badge i {
    font-size: 14px !important;
}

#welcome-view .wp-status-badge.is-approved {
    color: #10b981;
}

#welcome-view .wp-status-badge.is-pending {
    color: #f59e0b;
}

#welcome-view .wp-status-badge.is-rejected {
    color: #ef4444;
}

#welcome-view .wp-status-badge.is-none {
    color: var(--text-tertiary);
}

#welcome-view .wp-card-body {
    flex: 1 1 auto;
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
}

#welcome-view .wp-course-code {
    font-family: var(--bd-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 3px;
}

#welcome-view .wp-course-title {
    margin: 0 0 6px 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.35;
    min-height: 2.7em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#welcome-view .wp-course-desc {
    margin: 0 0 10px 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary);
    min-height: 3em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#welcome-view .wp-course-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 8px;
}

#welcome-view .wp-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    color: var(--text-secondary);
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

#welcome-view .wp-meta-item i {
    font-size: 14px !important;
    color: var(--text-tertiary);
}

#welcome-view .wp-meta-active {
    color: var(--brand-cyan, #06b6d4) !important;
    font-weight: 600;
}

#welcome-view .wp-meta-active i {
    color: var(--brand-cyan, #06b6d4) !important;
}

#welcome-view .wp-card-footer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--border-subtle);
}

#welcome-view .wp-card-footer .btn {
    width: 100%;
    min-height: 38px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: var(--radius-sm, 6px);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

#welcome-view .wp-btn-active {
    border-color: var(--bd-accent);
    color: var(--bd-accent-text);
}

#welcome-view .wp-action-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#welcome-view .wp-status-note {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.4;
}

#welcome-view .wp-status-note i {
    font-size: 14px;
    flex-shrink: 0;
}

#welcome-view .wp-note-rejected {
    color: var(--accent-rose, #ef4444);
}

@media (max-width: 480px) {
    #welcome-view .welcome-practicum-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Pemisahan Tegas Dua Model Praktikum ---------- */
#welcome-view .model-section-card {
    border-top: 3px solid var(--border-subtle);
    margin-bottom: 24px;
}

#welcome-view .model-pemrograman-card {
    border-top-color: var(--brand-cyan, #06b6d4);
}

#welcome-view .model-project-card {
    border-top-color: var(--brand-indigo, #6366f1);
}

#welcome-view .model-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border-radius: 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    background: transparent !important;
    border: none !important;
}

#welcome-view .model-header-badge.badge-pemrograman {
    background: transparent !important;
    color: var(--brand-cyan, #06b6d4);
    border: none !important;
}

#welcome-view .model-header-badge.badge-proyek {
    background: transparent !important;
    color: var(--brand-indigo, #6366f1);
    border: none !important;
}

#welcome-view .model-header-badge i {
    font-size: 14px;
}

#welcome-view .model-sub-block {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--border-subtle);
}

#welcome-view .model-sub-title {
    margin: 0 0 12px 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

#welcome-view .model-sub-title i {
    font-size: 16px;
}

#welcome-view .project-rpal-chips {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

#welcome-view .project-rpal-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm, 6px);
}

#welcome-view .project-rpal-chip .rpal-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

#welcome-view .project-rpal-chip .rpal-weight {
    font-size: 18px;
    font-weight: 700;
    color: var(--brand-indigo, #6366f1);
    font-family: var(--bd-mono);
}

@media (max-width: 600px) {
    #welcome-view .project-rpal-chips {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------- Tanpa badge/tile: ikon KPI & riwayat tampil polos ----------
   Aturan lama di styles.css memberi kotak berwarna + pemusatan pada chip KPI.
   Di sini ikon dibuat inline tanpa wadah, dan isi kartu rata kiri. */
#welcome-view .welcome-stat-chip {
    align-items: flex-start !important;
    text-align: left !important;
}

#welcome-view .welcome-stat-chip .kpi-top,
#welcome-view .welcome-stat-chip .kpi-metric-wrap {
    justify-content: flex-start !important;
}

#welcome-view .welcome-stat-icon,
#welcome-view .welcome-stat-icon::before,
#welcome-view .welcome-stat-icon::after,
#welcome-view .welcome-stat-icon i {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

#welcome-view .welcome-stat-icon {
    width: auto !important;
    height: auto !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    display: inline-flex !important;
}

#welcome-view .welcome-stat-icon i {
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    font-size: 18px !important;
    line-height: 1 !important;
}

#welcome-view .bd-recent-icon {
    width: auto !important;
    height: auto !important;
    flex: 0 0 auto !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

#welcome-view .bd-recent-icon i {
    font-size: 18px !important;
}

#welcome-view .bd-recent-item {
    padding-left: 0;
    padding-right: 0;
    background: transparent;
}

#welcome-view .bd-recent-item:hover {
    background: transparent;
    border-color: transparent;
}