/* Wallet Panel — UI mengikuti bahasa desain Pokecards Market (pokepedia.id/market): kanvas hangat off-white, border cream, primary brick-red, tipografi Urbanist, tombol pill. */ @import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@400;500;600;700;800&display=swap'); /* --------------------------------------------------------------------- Token tema. Light default; dark pakai keluarga warna hangat yang sama biar kerasa satu brand, bukan dua skin. Diterapkan via [data-theme] di ; "auto" ikut setting OS. --------------------------------------------------------------------- */ :root, [data-theme="light"] { color-scheme: light; --background: #FCFAF6; --foreground: #1B1214; --card: #FFFFFF; --border: #EEE6D0; --border-strong: #E3D7BA; --primary: #B63C3B; --primary-hover: #A03433; --primary-soft: rgba(182, 60, 59, 0.10); --primary-ring: rgba(182, 60, 59, 0.35); --primary-fg: #FFFFFF; --secondary: #F7F3E8; --muted: #F7F3E8; --muted-foreground: #676162; --blue: #2C7D98; --green: #2F7D5B; --amber: #B8791F; --header-bg: rgba(252, 250, 246, 0.85); --overlay-bg: rgba(252, 250, 246, 0.90); --ok-bg: rgba(47, 125, 91, 0.08); --ok-border: rgba(47, 125, 91, 0.30); --ok-fg: #235F45; --err-fg: #8E2E2D; --err-bg: rgba(142, 46, 45, 0.08); --err-border: rgba(142, 46, 45, 0.30); --err-strong: #6B1312; --radius: 12px; --radius-sm: 8px; --shadow-card: 0 1px 2px rgba(27, 18, 20, 0.04); --shadow-pop: 0 4px 20px -4px rgba(182, 60, 59, 0.18); --shadow-md: 0 2px 8px rgba(27, 18, 20, 0.08); --scrim: rgba(27, 18, 20, 0.55); } [data-theme="dark"] { color-scheme: dark; --background: #15100F; --foreground: #F4EFE7; --card: #1E1817; --border: #322A28; --border-strong: #463B37; --primary: #E0645F; --primary-hover: #EC7C77; --primary-soft: rgba(224, 100, 95, 0.14); --primary-ring: rgba(224, 100, 95, 0.40); --primary-fg: #1B1214; --secondary: #272020; --muted: #272020; --muted-foreground: #A79E97; --blue: #63B8D2; --green: #55B98C; --amber: #DFA950; --header-bg: rgba(21, 16, 15, 0.82); --overlay-bg: rgba(21, 16, 15, 0.82); --ok-bg: rgba(85, 185, 140, 0.10); --ok-border: rgba(85, 185, 140, 0.32); --ok-fg: #7FD3AC; --err-fg: #F09A96; --err-bg: rgba(240, 154, 150, 0.12); --err-border: rgba(240, 154, 150, 0.34); --err-strong: #FFB9B5; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-pop: 0 4px 20px -4px rgba(0, 0, 0, 0.6); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45); --scrim: rgba(0, 0, 0, 0.66); } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--background); color: var(--foreground); font-family: Urbanist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; padding-bottom: calc(28px + env(safe-area-inset-bottom)); } a { color: inherit; text-decoration: none; } button, input, select { font: inherit; color: inherit; } .muted { color: var(--muted-foreground); } .tnum { font-variant-numeric: tabular-nums; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } /* transisi tema hanya saat toggle diklik, biar gak ada animasi saat load */ .theme-anim, .theme-anim * { transition: background-color .18s, color .18s, border-color .18s; } /* ------------------------------- login ------------------------------- */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } .login-card { width: 100%; max-width: 380px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 34px 26px; text-align: center; box-shadow: var(--shadow-card); } .login-card h1 { margin: 14px 0 4px; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; } .login-card .sub { margin: 0 0 24px; color: var(--muted-foreground); font-size: 14px; } .login-card input { width: 100%; margin-bottom: 12px; } .login-card .btn { width: 100%; } .logo { font-size: 30px; color: var(--primary); } .err { background: var(--err-bg); color: var(--err-strong); border: 1px solid var(--primary-ring); padding: 10px; border-radius: var(--radius-sm); font-size: 14px; margin-bottom: 15px; font-weight: 500; } /* ------------------------------- header ------------------------------ */ .hdr { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; padding-top: calc(14px + env(safe-area-inset-top)); background: var(--header-bg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } .hdr-l { display: flex; align-items: center; gap: 11px; } .hdr-title { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; } .hdr-sub { color: var(--muted-foreground); font-size: 13px; } .hdr-r { display: flex; align-items: center; gap: 8px; } /* ------------------------------- tabs -------------------------------- */ .tabs { position: sticky; top: 64px; z-index: 19; display: flex; gap: 8px; padding: 12px 16px; background: var(--header-bg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } .tab { flex: 1; height: 38px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--muted-foreground); font-size: 14px; font-weight: 600; cursor: pointer; transition: all .18s; } .tab:hover { border-color: var(--border-strong); background: var(--secondary); } .tab.on { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); } .pane { display: none; padding: 16px; max-width: 860px; margin: 0 auto; } .pane.on { display: block; } /* ------------------------------ kontrol ------------------------------ */ input, select { width: 100%; height: 42px; padding: 0 13px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--card); color: var(--foreground); font-size: 16px; /* 16px cegah iOS auto-zoom */ appearance: none; outline: none; transition: border-color .18s, box-shadow .18s; } select { background-image: linear-gradient(45deg, transparent 50%, var(--muted-foreground) 50%), linear-gradient(135deg, var(--muted-foreground) 50%, transparent 50%); background-position: calc(100% - 17px) 18px, calc(100% - 12px) 18px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 34px; } input:focus, select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } label { display: block; margin: 13px 0 6px; font-size: 12px; color: var(--muted-foreground); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--foreground); font-size: 14px; font-weight: 600; cursor: pointer; transition: all .18s; white-space: nowrap; } .btn:hover { border-color: var(--border-strong); background: var(--secondary); } .btn:active { transform: scale(.985); } .btn:disabled { opacity: .5; cursor: default; } .btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); } .btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--primary-fg); } .btn-danger { color: var(--primary); border-color: var(--primary-ring); background: var(--card); } .btn-danger:hover { background: var(--primary-soft); border-color: var(--primary); } .btn-sm { height: 34px; padding: 0 13px; font-size: 13px; } /* Tombol kecil di dalam kartu koleksi. Tetap >=32px tinggi supaya target sentuh di HP masih nyaman (WCAG 2.5.8 minimum 24px, kita lebihin). */ .btn-mini { height: 34px; padding: 0 12px; font-size: 12.5px; font-weight: 600; border-radius: 999px; } .btn-mini.sel { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); } .btn-mini.sel:hover { background: var(--primary-hover); border-color: var(--primary-hover); } /* Pemisah "atau" di halaman login — garis di kedua sisi teks. */ .sep { display: flex; align-items: center; gap: 10px; margin: 14px 0; } .sep::before, .sep::after { content: ""; flex: 1; height: 1px; background: var(--border); } .sep > span { color: var(--muted-foreground); font-size: 12px; } .icon-btn { width: 38px; height: 38px; padding: 0; border-radius: 999px; border: 1px solid var(--border); background: var(--card); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 15px; transition: all .18s; } .icon-btn:hover { border-color: var(--border-strong); background: var(--secondary); } .bar { display: flex; gap: 9px; align-items: center; margin-bottom: 13px; } .bar select, .bar input { flex: 1; } .row { display: flex; gap: 9px; } .row input { flex: 1; } .row2 { display: flex; gap: 9px; margin-top: 16px; } .row2 .btn { flex: 1; } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .chk { display: flex; align-items: center; gap: 7px; font-size: 14px; color: var(--muted-foreground); white-space: nowrap; font-weight: 500; cursor: pointer; } .chk input { width: auto; height: auto; accent-color: var(--primary); } /* ------------------------------ statistik ---------------------------- */ .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; } .stat { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 10px; text-align: center; box-shadow: var(--shadow-card); } .stat .k { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .stat .l { font-size: 11px; color: var(--muted-foreground); margin-top: 3px; text-transform: uppercase; letter-spacing: .5px; font-weight: 600; } /* ------------------------------- daftar ------------------------------ */ .list { display: flex; flex-direction: column; gap: 9px; } .empty { color: var(--muted-foreground); text-align: center; padding: 36px 10px; font-size: 15px; } .w { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 13px 14px; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow-card); cursor: pointer; transition: all .18s; } .w:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); } .w.off { opacity: .5; } .w-l { font-weight: 700; min-width: 44px; font-size: 15px; } .w-m { flex: 1; min-width: 0; } .w-a { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .w-b { text-align: right; font-variant-numeric: tabular-nums; } .w-e { font-size: 14px; font-weight: 650; } .w-u { font-size: 12px; color: var(--muted-foreground); } .w-b.zero .w-e { color: var(--muted-foreground); font-weight: 500; } .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none; } .dot.off { background: var(--muted-foreground); } /* ------------------------------- kartu ------------------------------- */ .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: 14px; box-shadow: var(--shadow-card); } .card-t { font-weight: 700; font-size: 16px; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; letter-spacing: -0.01em; } .tag { font-size: 11px; font-weight: 600; color: var(--muted-foreground); background: var(--secondary); border: 1px solid var(--border); padding: 3px 9px; border-radius: 999px; text-transform: none; letter-spacing: 0; } .hint { font-size: 13px; color: var(--muted-foreground); margin-top: 10px; } .hint-i { text-transform: none; letter-spacing: 0; font-weight: 400; } .gen .row { margin-top: 10px; } .gen input { max-width: 130px; } /* ------------------------------- jobs -------------------------------- */ .job { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; display: flex; align-items: center; gap: 12px; cursor: pointer; box-shadow: var(--shadow-card); transition: all .18s; } .job:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); } .job-m { flex: 1; min-width: 0; } .job-n { font-weight: 650; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .job-c { font-size: 12px; color: var(--muted-foreground); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pill { font-size: 11px; padding: 5px 11px; border-radius: 999px; font-weight: 700; flex: none; } .pill.running { background: var(--primary-soft); color: var(--primary); border: 1px solid var(--primary-ring); } .pill.done { background: var(--ok-bg); color: var(--ok-fg); border: 1px solid var(--ok-border); } /* failed: --err-fg di atas --primary-soft cuma dapat kontras 1.43 (audit Ags 2026) -> teks nyaris ilang. Pakai pasangan pekat sendiri. */ .pill.failed { background: var(--err-bg); color: var(--err-strong); border: 1px solid var(--err-border); } /* --------------------------- inspect panel --------------------------- Kartu hasil auto-detect contract di form mint. Border kiri tebal jadi penanda status (valid / warning / gagal) tanpa perlu ikon tambahan. */ .inspect { margin: 10px 0 14px; padding: 12px 14px; background: var(--muted); border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; } .inspect.good { border-left-color: var(--ok-fg); } .inspect.warn { border-left-color: var(--primary); } .inspect.bad { border-left-color: var(--err-fg); } .ins-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; } .ins-t { font-weight: 700; font-size: 14px; } .ins-rows { display: flex; flex-direction: column; gap: 5px; } .ins-r { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; } .ins-r > span:first-child { color: var(--muted-foreground); flex: none; } .ins-r > span:last-child { text-align: right; word-break: break-word; } .ins-r code { font-size: 12px; } .ins-warn { color: var(--primary); font-weight: 600; } /* Baris koleksi di bulk-list: dua kolom, tapi nama koleksi bisa panjang jadi kolom kiri dibolehin shrink dan tiap baris dipisah garis tipis. */ .ins-r-col { align-items: flex-start; padding: 6px 0; border-bottom: 1px solid var(--border); } .ins-r-col:last-child { border-bottom: 0; } .ins-r-col > span:first-child { flex: 1 1 auto; min-width: 0; color: var(--foreground); } .ins-r-col > span:last-child { flex: none; } .ins-note { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); color: var(--muted-foreground); font-size: 12px; line-height: 1.45; } /* spinner kecil buat state "memeriksa…" */ .spin { width: 13px; height: 13px; flex: none; border-radius: 50%; border: 2px solid var(--primary-ring); border-top-color: var(--primary); animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* --------------------- daftar koleksi (bulk list) --------------------- */ /* Progress scan. Lebar bar di-set inline dari JS. */ .scan-prog { margin: 10px 0 4px; } .scan-bar { height: 6px; border-radius: 999px; background: var(--primary-soft); overflow: hidden; margin-bottom: 6px; } .scan-fill { height: 100%; width: 5%; background: var(--primary); border-radius: 999px; transition: width .3s ease; } .colls { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; } /* Satu kartu per koleksi. Border kiri jadi indikator kuat "dipilih" — warna doang nggak cukup buat aksesibilitas, jadi checkbox tetap sumber kebenaran. */ .coll { border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--card); } .coll.on { border-left-color: var(--primary); background: var(--primary-soft); } .coll-h { display: flex; align-items: center; gap: 10px; cursor: pointer; } .coll-cb { width: 20px; height: 20px; flex: none; accent-color: var(--primary); } .coll-img { width: 38px; height: 38px; flex: none; border-radius: 9px; object-fit: cover; background: var(--primary-soft); border: 1px solid var(--border); } .coll-img-ph { display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--primary); font-size: 15px; } .coll-meta { display: flex; flex-direction: column; min-width: 0; gap: 1px; } /* .coll-h itu