/* * karind-theme.css v4 — FINAL * ───────────────────────────────────────────────────────────── * Scope: * html[data-theme="light"] .screen → halaman reguler * html[data-theme="light"] .bs → bottom sheet keamanan (position:fixed) * html[data-theme="light"] .overlay → overlay keamanan (position:fixed) * html[data-theme="light"] .toast → toast (position:fixed) * * KTheme set data-theme di BOTH .screen DAN * * PALETTE: * bg #f0eff5 · card #fff · card2 #e8e6f0 * text #111018 · muted #6b7280 · border rgba(0,0,0,.1) * ───────────────────────────────────────────────────────────── */ /* ── Transisi smooth ─────────────────────────────────────── */ .screen { transition: background-color .3s, background-image .3s; } /* ═══════════════════════════════════════════════════════════ CSS VARIABLES — cascade otomatis ke semua var() descendants ─────────────────────────────────────────────────────────── */ html[data-theme="light"] .screen { --bg: #f0eff5; --card: #ffffff; --card2: #e8e6f0; --white: #111018; --muted: #6b7280; --border: rgba(0,0,0,0.10); --gold: #a07800; background-color: #f0eff5 !important; background-image: radial-gradient(circle at 12% 8%, rgba(229,9,20,.025), transparent 45%) !important; color: #111018; /* inherit → sebagian besar teks langsung benar */ } /* ═══════════════════════════════════════════════════════════ STATUS BAR ─────────────────────────────────────────────────────────── */ html[data-theme="light"] .screen .sbar .t { color: #111018 !important; } html[data-theme="light"] .screen .bw { border-color: #111018 !important; } html[data-theme="light"] .screen .bf, html[data-theme="light"] .screen .bt { background: #111018 !important; } html[data-theme="light"] .screen .si svg [fill="#fff"] { fill: #111018 !important; } html[data-theme="light"] .screen .si svg [stroke="#fff"] { stroke: #111018 !important; } /* ═══════════════════════════════════════════════════════════ BOTTOM NAV ─────────────────────────────────────────────────────────── */ html[data-theme="light"] .screen .bnav { background: rgba(240,239,245,.97) !important; border-top-color: rgba(0,0,0,.09) !important; } html[data-theme="light"] .screen .nl { color: #c4c2ce !important; } html[data-theme="light"] .screen .nl.on { color: #e50914 !important; } html[data-theme="light"] .screen .nico.on { background: rgba(229,9,20,.1) !important; } /* ═══════════════════════════════════════════════════════════ PAGE HEADER (back, title, pg-hd) ─────────────────────────────────────────────────────────── */ html[data-theme="light"] .screen .pg-hd { background: #f0eff5 !important; border-bottom-color: rgba(0,0,0,.09) !important; } html[data-theme="light"] .screen .pg-title, html[data-theme="light"] .screen .pg-title-sm { color: #111018 !important; } html[data-theme="light"] .screen .pg-sub { color: #6b7280 !important; } html[data-theme="light"] .screen .back { color: #6b7280 !important; background: #e8e6f0 !important; } html[data-theme="light"] .screen .back svg path { stroke: #6b7280 !important; } /* ═══════════════════════════════════════════════════════════ HOME — TOPBAR & SEARCH ─────────────────────────────────────────────────────────── */ html[data-theme="light"] .screen .topbar, html[data-theme="light"] .screen .home-top { background: #f0eff5 !important; border-bottom-color: rgba(0,0,0,.09) !important; } html[data-theme="light"] .screen .g-brand { color: #9ca3af !important; } html[data-theme="light"] .screen .g-name, html[data-theme="light"] .screen .g-title { color: #111018 !important; } html[data-theme="light"] .screen .srch { background: #e8e6f0 !important; border-color: rgba(0,0,0,.08) !important; } html[data-theme="light"] .screen .srch input { color: #111018 !important; } html[data-theme="light"] .screen .srch input::placeholder { color: #a0a0b0 !important; } html[data-theme="light"] .screen .ibu { background: #e8e6f0 !important; border-color: rgba(0,0,0,.08) !important; } html[data-theme="light"] .screen .nd { border-color: #f0eff5 !important; } /* ═══════════════════════════════════════════════════════════ HOME — BANNER (teks tetap putih karena di atas foto gelap) ─────────────────────────────────────────────────────────── */ html[data-theme="light"] .screen .btit { color: #fff !important; } html[data-theme="light"] .screen .bsub { color: rgba(255,255,255,.82) !important; } html[data-theme="light"] .screen .dots .dot { background: rgba(0,0,0,.2) !important; } html[data-theme="light"] .screen .dots .dot.on { background: #e50914 !important; } /* ═══════════════════════════════════════════════════════════ HOME — QUICK ACTIONS ─────────────────────────────────────────────────────────── */ html[data-theme="light"] .screen .qic { background: #e8e6f0 !important; border-color: rgba(0,0,0,.08) !important; } html[data-theme="light"] .screen .ql { color: #6b7280 !important; } /* ═══════════════════════════════════════════════════════════ HOME — SECTION HEADERS ─────────────────────────────────────────────────────────── */ html[data-theme="light"] .screen .st, html[data-theme="light"] .screen .sec-t { color: #111018 !important; } html[data-theme="light"] .screen .sa { color: #e50914 !important; } /* ═══════════════════════════════════════════════════════════ HOME — CARDS (news, event, gear, artist, song) ─────────────────────────────────────────────────────────── */ html[data-theme="light"] .screen .nc, html[data-theme="light"] .screen .ec, html[data-theme="light"] .screen .gc { background: #fff !important; border-color: rgba(0,0,0,.09) !important; box-shadow: 0 1px 6px rgba(0,0,0,.06) !important; } html[data-theme="light"] .screen .nc-tt { color: #111018 !important; } html[data-theme="light"] .screen .nc-sr { color: #9ca3af !important; } html[data-theme="light"] .screen .nc-rd { color: #e50914 !important; } html[data-theme="light"] .screen .ec-nm, html[data-theme="light"] .screen .gc-nm, html[data-theme="light"] .screen .arc-nm, html[data-theme="light"] .screen .sc-tt { color: #111018 !important; } html[data-theme="light"] .screen .ec-dt { color: #9ca3af !important; } html[data-theme="light"] .screen .ec-pr, html[data-theme="light"] .screen .gc-pr { color: #a07800 !important; } /* ═══════════════════════════════════════════════════════════ HOME — NOW PLAYING ─────────────────────────────────────────────────────────── */ html[data-theme="light"] .screen .np { background: rgba(255,255,255,.9) !important; border-color: rgba(229,9,20,.15) !important; box-shadow: 0 2px 14px rgba(0,0,0,.08) !important; } html[data-theme="light"] .screen .np-tt { color: #111018 !important; } html[data-theme="light"] .screen .np-ar { color: #6b7280 !important; } html[data-theme="light"] .screen .np-pg { background: rgba(0,0,0,.09) !important; } html[data-theme="light"] .screen .np-pl { background: #a07800 !important; } html[data-theme="light"] .screen .np-al { background: rgba(229,9,20,.07) !important; } /* ═══════════════════════════════════════════════════════════ PROFILE — COVER & AVATAR ─────────────────────────────────────────────────────────── */ html[data-theme="light"] .screen .cover { background: linear-gradient(155deg,#fce8e8 0%,#f9d5d5 45%,#f2dede 75%,#f0eff5 100%) !important; } html[data-theme="light"] .screen .cover::before{ background: radial-gradient(ellipse at 30% 50%,rgba(229,9,20,.1),transparent 55%),radial-gradient(ellipse at 85% 20%,rgba(229,9,20,.04),transparent 40%) !important; } html[data-theme="light"] .screen .cover::after { opacity: .01 !important; } html[data-theme="light"] .screen .av { background: linear-gradient(135deg,#fdd8d8,#f9b4b4) !important; border-color: #f0eff5 !important; } html[data-theme="light"] .screen .avck { border-color: #f0eff5 !important; } html[data-theme="light"] .screen .pnm { color: #111018 !important; } html[data-theme="light"] .screen .pemail { color: #6b7280 !important; } html[data-theme="light"] .screen .rolsw { background: #e8e6f0 !important; border-color: rgba(0,0,0,.1) !important; color: #6b7280 !important; } html[data-theme="light"] .screen .bedit { border-color: rgba(0,0,0,.13) !important; color: #111018 !important; } /* ═══════════════════════════════════════════════════════════ PROFILE — STATS ─────────────────────────────────────────────────────────── */ html[data-theme="light"] .screen .stats { background: #fff !important; border-color: rgba(0,0,0,.09) !important; } html[data-theme="light"] .screen .st { border-right-color: rgba(0,0,0,.08) !important; } html[data-theme="light"] .screen .sn { color: #111018 !important; } html[data-theme="light"] .screen .sn.g { color: #a07800 !important; } html[data-theme="light"] .screen .sl { color: #9ca3af !important; } /* ═══════════════════════════════════════════════════════════ PROFILE — WALLET ─────────────────────────────────────────────────────────── */ html[data-theme="light"] .screen .wallet { background: #fff !important; border-color: rgba(229,9,20,.16) !important; } html[data-theme="light"] .screen .wl { color: #9ca3af !important; } html[data-theme="light"] .screen .wb { color: #111018 !important; } html[data-theme="light"] .screen .wb em { color: #9ca3af !important; } html[data-theme="light"] .screen .wdiv { background: rgba(0,0,0,.08) !important; } html[data-theme="light"] .screen .wa { border-right-color: rgba(0,0,0,.08) !important; } html[data-theme="light"] .screen .wa:active { background: #ece9f5 !important; } html[data-theme="light"] .screen .wal { color: #6b7280 !important; } /* ═══════════════════════════════════════════════════════════ SECTION LABELS (semua halaman) ─────────────────────────────────────────────────────────── */ html[data-theme="light"] .screen .slbl, html[data-theme="light"] .screen .slabel, html[data-theme="light"] .screen .set-sec-hd, html[data-theme="light"] .screen .sec-header, html[data-theme="light"] .screen .g-sl, html[data-theme="light"] .screen .sec-label { color: #9ca3af !important; } /* ═══════════════════════════════════════════════════════════ MENU GROUPS — Profile (mg, mi, mtn, mts) ─────────────────────────────────────────────────────────── */ html[data-theme="light"] .screen .mg, html[data-theme="light"] .screen .mgroup { background: #fff !important; border-color: rgba(0,0,0,.09) !important; box-shadow: 0 1px 5px rgba(0,0,0,.05) !important; } html[data-theme="light"] .screen .mi { border-bottom-color: rgba(0,0,0,.07) !important; } html[data-theme="light"] .screen .mi:active { background: #ece9f5 !important; } html[data-theme="light"] .screen .mtn { color: #111018 !important; } html[data-theme="light"] .screen .mts { color: #6b7280 !important; } html[data-theme="light"] .screen .marr { opacity: 1 !important; } html[data-theme="light"] .screen .marr svg path { stroke: #c4c2ce !important; } html[data-theme="light"] .screen .mbg { background: rgba(229,9,20,.1) !important; color: #c0000a !important; } html[data-theme="light"] .screen .tgl.off { background: #c8c5d8 !important; } /* ═══════════════════════════════════════════════════════════ MENU GROUPS — Keamanan (menu-card, menu-name, menu-desc) ─────────────────────────────────────────────────────────── */ html[data-theme="light"] .screen .menu-card { background: #fff !important; box-shadow: 0 1px 5px rgba(0,0,0,.05) !important; } html[data-theme="light"] .screen .menu-item { border-bottom-color: rgba(0,0,0,.07) !important; } html[data-theme="light"] .screen .menu-item:active { background: #ece9f5 !important; } html[data-theme="light"] .screen .menu-name { color: #111018 !important; } html[data-theme="light"] .screen .menu-desc { color: #6b7280 !important; } html[data-theme="light"] .screen .menu-chev { opacity: .4 !important; } /* ═══════════════════════════════════════════════════════════ KEAMANAN — Security badge ─────────────────────────────────────────────────────────── */ html[data-theme="light"] .screen .sec-badge { background: rgba(229,9,20,.06) !important; border-color: rgba(229,9,20,.18) !important; } html[data-theme="light"] .screen .sec-badge-icon { background: rgba(229,9,20,.12) !important; } html[data-theme="light"] .screen .sec-badge-title { color: #c0000a !important; } html[data-theme="light"] .screen .sec-badge-sub { color: #6b7280 !important; } html[data-theme="light"] .screen .sec-dot.off { background: #d4d2dc !important; } html[data-theme="light"] .screen .sec-lv-txt { color: #6b7280 !important; } /* ═══════════════════════════════════════════════════════════ KEAMANAN — Login activity ─────────────────────────────────────────────────────────── */ html[data-theme="light"] .screen .act-title { color: #111018 !important; } html[data-theme="light"] .screen .act-meta { color: #9ca3af !important; } html[data-theme="light"] .screen .act-time { color: #b0aebf !important; } html[data-theme="light"] .screen .act-item { border-bottom-color: rgba(0,0,0,.06) !important; } /* ═══════════════════════════════════════════════════════════ INLINE SETTINGS — Profile page (set-card, set-nm, set-sub) ─────────────────────────────────────────────────────────── */ html[data-theme="light"] .screen .set-card { background: #fff !important; border-color: rgba(0,0,0,.09) !important; box-shadow: 0 1px 5px rgba(0,0,0,.05) !important; } html[data-theme="light"] .screen .set-item { border-bottom-color: rgba(0,0,0,.07) !important; } html[data-theme="light"] .screen .set-item:active { background: #ece9f5 !important; } html[data-theme="light"] .screen .set-nm, html[data-theme="light"] .screen .set-acc-title { color: #111018 !important; } html[data-theme="light"] .screen .set-sub { color: #6b7280 !important; } html[data-theme="light"] .screen .set-arr svg path { stroke: #c4c2ce !important; opacity: 1 !important; } html[data-theme="light"] .screen .set-badge { background: rgba(229,9,20,.1) !important; color: #c0000a !important; } html[data-theme="light"] .screen .set-toggle.off { background: #c8c5d8 !important; } html[data-theme="light"] .screen .lang-pill { background: #e8e6f0 !important; } html[data-theme="light"] .screen .lp-opt { color: #9ca3af !important; } html[data-theme="light"] .screen .lp-opt.active { color: #e50914 !important; } /* ═══════════════════════════════════════════════════════════ SETTINGS PAGE — acc-header, user-card, menu-item, logout ─────────────────────────────────────────────────────────── */ html[data-theme="light"] .screen .sec-card { background: #fff !important; border-color: rgba(0,0,0,.09) !important; } html[data-theme="light"] .screen .menu-item { border-bottom-color: rgba(0,0,0,.07) !important; } html[data-theme="light"] .screen .mi-title { color: #111018 !important; } html[data-theme="light"] .screen .mi-sub { color: #6b7280 !important; } html[data-theme="light"] .screen .mi-arrow svg path { stroke: #c4c2ce !important; opacity: 1 !important; } html[data-theme="light"] .screen .mi-badge { background: rgba(229,9,20,.1) !important; color: #c0000a !important; } html[data-theme="light"] .screen .acc-header { background: #fff !important; border-top-color: rgba(0,0,0,.08) !important; } html[data-theme="light"] .screen .acc-title { color: #111018 !important; } html[data-theme="light"] .screen .acc-arrow svg path { stroke: #9ca3af !important; } html[data-theme="light"] .screen .acc-body { background: #fff !important; } html[data-theme="light"] .screen .acc-item { border-top-color: rgba(0,0,0,.07) !important; } html[data-theme="light"] .screen .acc-item:active { background: #ece9f5 !important; } html[data-theme="light"] .screen .acc-item-ico { background: rgba(0,0,0,.04) !important; } html[data-theme="light"] .screen .acc-item-txt { color: #6b7280 !important; } html[data-theme="light"] .screen .uc-av { background: linear-gradient(135deg,#fdd8d8,#f9b4b4) !important; } html[data-theme="light"] .screen .uc-name { color: #111018 !important; } html[data-theme="light"] .screen .uc-email { color: #6b7280 !important; } html[data-theme="light"] .screen .uc-edit { border-color: rgba(0,0,0,.12) !important; color: #111018 !important; } html[data-theme="light"] .screen .logout-btn { background: rgba(220,38,38,.04) !important; border-color: rgba(220,38,38,.2) !important; } html[data-theme="light"] .screen .logout-txt { color: #dc2626 !important; } html[data-theme="light"] .screen .version-txt { color: #ccc !important; } html[data-theme="light"] .screen .blog { background: rgba(220,38,38,.04) !important; border-color: rgba(220,38,38,.2) !important; } html[data-theme="light"] .screen .ver { color: #ccc !important; } /* ═══════════════════════════════════════════════════════════ PROFILE — ROLE SHEET (.ovl, .sheet, .rc) ─────────────────────────────────────────────────────────── */ html[data-theme="light"] .screen .ovl { background: rgba(0,0,0,.45) !important; } html[data-theme="light"] .screen .sheet { background: #fff !important; border-color: rgba(0,0,0,.08) !important; } html[data-theme="light"] .screen .shnd { background: #d4d2dc !important; } html[data-theme="light"] .screen .sttl { color: #111018 !important; } html[data-theme="light"] .screen .ssub { color: #6b7280 !important; } html[data-theme="light"] .screen .shr { background: rgba(0,0,0,.08) !important; } html[data-theme="light"] .screen .rc { background: #f5f4fa !important; border-color: rgba(0,0,0,.09) !important; } html[data-theme="light"] .screen .rc:active { background: #ece9f5 !important; } html[data-theme="light"] .screen .rc.cur { background: rgba(229,9,20,.04) !important; border-color: rgba(229,9,20,.25) !important; } html[data-theme="light"] .screen .rc.nw { border-color: rgba(0,0,0,.1) !important; } html[data-theme="light"] .screen .rcn { color: #111018 !important; } html[data-theme="light"] .screen .rcd { color: #6b7280 !important; } html[data-theme="light"] .screen .rt-n { background: rgba(0,0,0,.06) !important; color: #6b7280 !important; } /* ═══════════════════════════════════════════════════════════ LOGIN / REGISTER — forms ─────────────────────────────────────────────────────────── */ html[data-theme="light"] .screen .fi { background: #fff !important; color: #111018 !important; border-color: rgba(0,0,0,.12) !important; } html[data-theme="light"] .screen .fi:focus { border-color: #e50914 !important; box-shadow: 0 0 0 2px rgba(229,9,20,.12) !important; } html[data-theme="light"] .screen .fi::placeholder { color: #b0aebf !important; } html[data-theme="light"] .screen textarea.fi { background: #fff !important; color: #111018 !important; } html[data-theme="light"] .screen .ph-pre { background: #fff !important; border-color: rgba(0,0,0,.12) !important; color: #9ca3af !important; } html[data-theme="light"] .screen .fl { color: #6b7280 !important; } html[data-theme="light"] .screen .fl-row .fl { color: #6b7280 !important; } html[data-theme="light"] .screen .tog { background: #e8e6f0 !important; } html[data-theme="light"] .screen .tb { color: #9ca3af !important; } html[data-theme="light"] .screen .tb.on { background: #fff !important; color: #111018 !important; box-shadow: 0 1px 4px rgba(0,0,0,.1) !important; } html[data-theme="light"] .screen .hint { background: #e8e6f0 !important; border-color: rgba(0,0,0,.06) !important; } html[data-theme="light"] .screen .hl { color: #b0aebf !important; } html[data-theme="light"] .screen .ht { color: #6b7280 !important; } html[data-theme="light"] .screen .ht span { color: #4b5563 !important; } html[data-theme="light"] .screen .lr { color: #9ca3af !important; } html[data-theme="light"] .screen .terms { color: #9ca3af !important; } html[data-theme="light"] .screen .forgot-box { background: rgba(229,9,20,.04) !important; border-color: rgba(229,9,20,.14) !important; } html[data-theme="light"] .screen .forgot-text { color: #9ca3af !important; } html[data-theme="light"] .screen .or-line { background: rgba(0,0,0,.09) !important; } html[data-theme="light"] .screen .or-txt { color: #b0aebf !important; } html[data-theme="light"] .screen .pg-logo-ic { background: #e8e6f0 !important; border-color: rgba(229,9,20,.14) !important; } html[data-theme="light"] .screen .fi-hint { color: #b0aebf !important; } html[data-theme="light"] .screen .eye-btn svg path { stroke: #b0aebf !important; } /* ═══════════════════════════════════════════════════════════ EDIT PROFILE ─────────────────────────────────────────────────────────── */ html[data-theme="light"] .screen .av-hint { color: #9ca3af !important; } html[data-theme="light"] .screen .sec-div-txt { color: #9ca3af !important; } html[data-theme="light"] .screen .sec-div-line { background: rgba(0,0,0,.09) !important; } html[data-theme="light"] .screen .sec-note { background: #e8e6f0 !important; border-color: rgba(0,0,0,.08) !important; } html[data-theme="light"] .screen .sec-note-title { color: #111018 !important; } html[data-theme="light"] .screen .sec-note-text { color: #6b7280 !important; } /* ═══════════════════════════════════════════════════════════ GUEST PROFILE ─────────────────────────────────────────────────────────── */ html[data-theme="light"] .screen .g-av { background: #e8e6f0 !important; border-color: rgba(0,0,0,.09) !important; } html[data-theme="light"] .screen .g-nm { color: #111018 !important; } html[data-theme="light"] .screen .g-sb { color: #6b7280 !important; } html[data-theme="light"] .screen .gbo { border-color: rgba(0,0,0,.16) !important; color: #111018 !important; background: transparent !important; } html[data-theme="light"] .screen .g-trx { background: #fff !important; border-color: rgba(0,0,0,.08) !important; } html[data-theme="light"] .screen .g-empty { color: #9ca3af !important; } html[data-theme="light"] .screen .ti-nm { color: #111018 !important; } html[data-theme="light"] .screen .ti-dt { color: #9ca3af !important; } html[data-theme="light"] .screen .ti-pr { color: #111018 !important; } /* ═══════════════════════════════════════════════════════════ ALAMAT — cards, form sheet ─────────────────────────────────────────────────────────── */ html[data-theme="light"] .screen .addr-card { background: #fff !important; border-color: rgba(0,0,0,.09) !important; box-shadow: 0 1px 6px rgba(0,0,0,.06) !important; } html[data-theme="light"] .screen .addr-card.utama { background: rgba(229,9,20,.03) !important; border-color: rgba(229,9,20,.28) !important; } html[data-theme="light"] .screen .card-label { color: #111018 !important; } html[data-theme="light"] .screen .card-name { color: #111018 !important; } html[data-theme="light"] .screen .card-phone, html[data-theme="light"] .screen .card-address { color: #6b7280 !important; } html[data-theme="light"] .screen .btn-ubah { border-color: rgba(0,0,0,.12) !important; color: #111018 !important; background: transparent !important; } html[data-theme="light"] .screen .btn-more { border-color: rgba(0,0,0,.12) !important; background: transparent !important; } html[data-theme="light"] .screen .bottom-bar { background: #f0eff5 !important; border-top-color: rgba(0,0,0,.08) !important; } html[data-theme="light"] .screen .tambah-btn { color: #e50914 !important; } html[data-theme="light"] .screen .empty-title { color: #111018 !important; } html[data-theme="light"] .screen .empty-sub { color: #6b7280 !important; } /* Alamat form sheet */ html[data-theme="light"] .screen .sheet { background: #fff !important; } html[data-theme="light"] .screen .sheet-hd { border-bottom-color: rgba(0,0,0,.08) !important; } html[data-theme="light"] .screen .sheet-title { color: #111018 !important; } html[data-theme="light"] .screen .sheet-close { color: #9ca3af !important; } html[data-theme="light"] .screen .sheet-hnd { background: #d4d2dc !important; } html[data-theme="light"] .screen .lbtn { background: #e8e6f0 !important; border-color: rgba(0,0,0,.09) !important; color: #6b7280 !important; } html[data-theme="light"] .screen .lbtn.on { background: rgba(229,9,20,.08) !important; border-color: rgba(229,9,20,.28) !important; color: #c0000a !important; } html[data-theme="light"] .screen .utama-label { color: #111018 !important; } html[data-theme="light"] .screen .utama-sub { color: #6b7280 !important; } html[data-theme="light"] .screen .more-sheet { background: #fff !important; } html[data-theme="light"] .screen .more-txt { color: #111018 !important; } /* ═══════════════════════════════════════════════════════════ KEAMANAN — BOTTOM SHEETS (position:fixed → pakai html scope!) ─────────────────────────────────────────────────────────── */ html[data-theme="light"] .bs { background: #fff !important; color: #111018 !important; border-top-color: rgba(0,0,0,.08) !important; } html[data-theme="light"] .bs-handle { background: #d4d2dc !important; } html[data-theme="light"] .bs-title { color: #111018 !important; } html[data-theme="light"] .bs-sub { color: #6b7280 !important; } /* Input di dalam BS */ html[data-theme="light"] .bs .fi { background: #e8e6f0 !important; color: #111018 !important; border-color: rgba(0,0,0,.1) !important; } html[data-theme="light"] .bs .fi:focus { border-color: #e50914 !important; box-shadow: 0 0 0 2px rgba(229,9,20,.12) !important; } html[data-theme="light"] .bs .fi::placeholder { color: #b0aebf !important; } html[data-theme="light"] .bs .fi[readonly] { background: #f0eff5 !important; color: #6b7280 !important; } html[data-theme="light"] .bs .fl { color: #6b7280 !important; } html[data-theme="light"] .bs .fi-hint { color: #b0aebf !important; } html[data-theme="light"] .bs .fi-eye { opacity: .5 !important; } html[data-theme="light"] .bs .fi-eye svg path, html[data-theme="light"] .bs .fi-eye svg circle { stroke: #555 !important; } /* Password strength bars */ html[data-theme="light"] .bs .pw-bar { background: #d4d2dc !important; } html[data-theme="light"] .bs .pw-txt { color: #9ca3af !important; } /* Ghost button */ html[data-theme="light"] .bs .btn-ghost { border-color: rgba(0,0,0,.14) !important; color: #6b7280 !important; } html[data-theme="light"] .bs .btn-ghost:active { background: #ece9f5 !important; } /* Success state */ html[data-theme="light"] .bs .success-title { color: #111018 !important; } html[data-theme="light"] .bs .success-sub { color: #6b7280 !important; } /* ═══════════════════════════════════════════════════════════ KEAMANAN — PIN NUMPAD (position:fixed di dalam .bs) ─────────────────────────────────────────────────────────── */ html[data-theme="light"] .bs .pin-step { color: #111018 !important; } html[data-theme="light"] .bs .pin-step-sub { color: #6b7280 !important; } html[data-theme="light"] .bs .pin-dot { border-color: rgba(0,0,0,.25) !important; } html[data-theme="light"] .bs .pin-dot.filled { background: #111018 !important; border-color: #111018 !important; } html[data-theme="light"] .bs .np-btn { background: #e8e6f0 !important; color: #111018 !important; } html[data-theme="light"] .bs .np-btn:active { background: #dddae8 !important; transform: scale(.94); } html[data-theme="light"] .bs .np-btn.del { background: transparent !important; color: #6b7280 !important; } html[data-theme="light"] .bs .np-btn.empty { background: transparent !important; } html[data-theme="light"] .bs .np-label { color: #9ca3af !important; } /* ═══════════════════════════════════════════════════════════ KEAMANAN — OVERLAY (position:fixed) ─────────────────────────────────────────────────────────── */ html[data-theme="light"] .overlay.show { background: rgba(0,0,0,.45) !important; } /* ═══════════════════════════════════════════════════════════ TOAST (position:fixed — semua halaman) ─────────────────────────────────────────────────────────── */ html[data-theme="light"] .toast { background: #fff !important; color: #111018 !important; border-color: rgba(0,0,0,.12) !important; box-shadow: 0 4px 20px rgba(0,0,0,.1) !important; } /* ═══════════════════════════════════════════════════════════ QUICK BAR (theme + lang icons) — light mode ─────────────────────────────────────────────────────────── */ html[data-theme="light"] .screen .qbar .qbtn, html[data-theme="light"] .screen .qbar .qlang { background: rgba(0,0,0,.09) !important; border-color: rgba(0,0,0,.13) !important; } html[data-theme="light"] .screen .qbar .qbtn:active, html[data-theme="light"] .screen .qbar .qlang:active { background: rgba(0,0,0,.15) !important; } html[data-theme="light"] .screen .qbar #qlang-txt { color: #111018 !important; }