/* ========================================================================== CoinPulse — application stylesheet Dark-first fintech UI, light theme via ========================================================================== */ :root { --bg: #070b14; --bg-2: #0b1220; --panel: #0e1526; --panel-2: #131c31; --line: #1e2942; --line-soft: #17203333; --txt: #e9eefa; --txt-2: #a6b3c9; --muted: #6f7d95; --brand: #f7931a; --brand-2: #ffb648; --ok: #34d399; --bad: #f87171; --warn: #fbbf24; --info: #60a5fa; --radius: 16px; --radius-sm: 10px; --shadow: 0 18px 40px -24px rgba(0,0,0,.9); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; } html[data-theme="light"] { --bg: #f4f6fb; --bg-2: #ffffff; --panel: #ffffff; --panel-2: #f7f9fd; --line: #e3e8f2; --txt: #10182b; --txt-2: #4b5876; --muted: #7b87a1; --shadow: 0 16px 34px -26px rgba(16,24,43,.45); } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.55; color: var(--txt); background: radial-gradient(900px 520px at 12% -8%, rgba(247,147,26,.10), transparent 62%), radial-gradient(760px 460px at 96% 4%, rgba(96,165,250,.08), transparent 60%), var(--bg); background-attachment: fixed; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.25; letter-spacing: -.01em; } h1 { font-size: 1.5rem; } h2 { font-size: 1.15rem; } h3 { font-size: 1rem; } p { margin: 0 0 .9em; } hr { border: 0; border-top: 1px solid var(--line); margin: 22px 0; } code, .mono { font-family: var(--mono); font-size: .86em; } .ic { flex: none; vertical-align: -3px; } .muted { color: var(--muted); } .small { font-size: 12.5px; } .center { text-align: center; } .right { text-align: right; } .nowrap { white-space: nowrap; } .trunc { display: inline-block; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } .mt0{margin-top:0}.mt1{margin-top:8px}.mt2{margin-top:16px}.mt3{margin-top:26px} .mb0{margin-bottom:0}.mb1{margin-bottom:8px}.mb2{margin-bottom:16px}.mb3{margin-bottom:26px} .flex { display: flex; gap: 12px; } .flex.mid { align-items: center; } .flex.between { justify-content: space-between; } .flex.wrap { flex-wrap: wrap; } .grid { display: grid; gap: 16px; } .grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); } .span-2 { grid-column: span 2; } .hide { display: none !important; } /* ------------------------------------------------------------------ layout */ .layout { display: flex; min-height: 100vh; } .sidebar { width: 258px; flex: none; background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 30%), var(--bg-2); border-right: 1px solid var(--line); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 40; } .sidebar.admin-sidebar { background: linear-gradient(180deg, rgba(247,147,26,.06), transparent 26%), var(--bg-2); } .brand { display: flex; align-items: center; gap: 12px; padding: 20px 18px 16px; } .brand-mark { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; color: #12100b; background: linear-gradient(140deg, var(--brand), var(--brand-2)); box-shadow: 0 10px 22px -12px rgba(247,147,26,.9); } .brand-mark.admin { background: linear-gradient(140deg, #6f7dff, #9f7bff); color: #fff; } .brand-text { display: flex; flex-direction: column; font-weight: 700; letter-spacing: -.01em; } .brand-text small { font-weight: 500; font-size: 11px; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; } .side-nav { padding: 6px 10px; display: flex; flex-direction: column; gap: 2px; flex: 1; } .nav-sep { font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); padding: 16px 10px 6px; } .nav-link { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--txt-2); font-weight: 550; font-size: 14px; transition: .16s; border: 1px solid transparent; } .nav-link:hover { background: rgba(255,255,255,.045); color: var(--txt); } .nav-link.active { background: linear-gradient(90deg, rgba(247,147,26,.16), rgba(247,147,26,.03)); color: var(--txt); border-color: rgba(247,147,26,.28); } .nav-link.active .ic { color: var(--brand); } .nav-link.nav-admin.active { background: linear-gradient(90deg, rgba(111,125,255,.18), transparent); border-color: rgba(111,125,255,.3); } .nav-link.nav-admin.active .ic { color: #9f9bff; } .nav-link.logout:hover { color: var(--bad); } .nav-badge { margin-left: auto; background: var(--brand); color: #12100b; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 7px; } .side-foot { padding: 12px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; } .balance-mini { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; } .balance-mini span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .balance-mini strong { display: block; font-size: 19px; letter-spacing: -.02em; } .balance-mini em { font-size: 11.5px; color: var(--warn); font-style: normal; } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { display: flex; align-items: center; gap: 16px; padding: 16px 26px; border-bottom: 1px solid var(--line); background: rgba(7,11,20,.72); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 30; } html[data-theme="light"] .topbar { background: rgba(255,255,255,.82); } .page-title h1 { margin: 0; font-size: 1.24rem; } .page-title p { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; } .topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; } .user-chip { display: flex; align-items: center; gap: 10px; padding: 5px 12px 5px 5px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); } .avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; background: linear-gradient(140deg, #26365e, #1b2540); color: #cfdaf2; } html[data-theme="light"] .avatar { background: linear-gradient(140deg, #e8ecf7, #d6deef); color: #31405f; } .user-chip-txt { display: flex; flex-direction: column; line-height: 1.15; } .user-chip-txt strong { font-size: 13px; } .user-chip-txt small { color: var(--muted); font-size: 11.5px; } .content { padding: 26px; flex: 1; max-width: 1320px; width: 100%; } .app-footer { padding: 18px 26px 30px; color: var(--muted); font-size: 12px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; } /* ------------------------------------------------------------------- cards */ .card { background: linear-gradient(180deg, rgba(255,255,255,.025), transparent 40%), var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); } .card.tight { padding: 14px; } .card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .card-head h2, .card-head h3 { margin: 0; } .card-head .spacer { margin-left: auto; } .card-sub { color: var(--muted); font-size: 12.5px; margin: 2px 0 0; } .stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); } .stat-label { display: block; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); } .stat-value { display: block; font-size: 25px; letter-spacing: -.02em; margin: 4px 0 2px; } .stat-sub { font-size: 12.5px; color: var(--txt-2); } .stat.brand { border-color: rgba(247,147,26,.34); background: linear-gradient(180deg, rgba(247,147,26,.09), transparent 55%), var(--panel); } .stat.ok { border-color: rgba(52,211,153,.3); } /* ------------------------------------------------------------------ buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: var(--radius-sm); border: 1px solid transparent; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: .16s; white-space: nowrap; background: linear-gradient(140deg, var(--brand), var(--brand-2)); color: #14100a; } .btn:hover { filter: brightness(1.07); transform: translateY(-1px); } .btn:active { transform: none; } .btn[disabled], .btn.disabled { opacity: .5; pointer-events: none; } .btn-ghost { background: transparent; border-color: var(--line); color: var(--txt); } .btn-ghost:hover { background: rgba(255,255,255,.05); } .btn-soft { background: var(--panel-2); border-color: var(--line); color: var(--txt); } .btn-ok { background: linear-gradient(140deg, #22c55e, #4ade80); color: #06170d; } .btn-danger { background: linear-gradient(140deg, #ef4444, #f87171); color: #1a0606; } .btn-info { background: linear-gradient(140deg, #3b82f6, #60a5fa); color: #041020; } .btn-warn { background: linear-gradient(140deg, #d97706, #fbbf24); color: #1a1204; } .btn-xs { padding: 6px 10px; font-size: 12px; border-radius: 8px; } .btn-sm { padding: 8px 13px; font-size: 13px; } .btn-lg { padding: 13px 22px; font-size: 15.5px; } .btn-block { width: 100%; } .icon-btn { background: var(--panel); border: 1px solid var(--line); color: var(--txt); width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; cursor: pointer; } .icon-btn:hover { background: var(--panel-2); } .only-mobile { display: none; } form.inline { display: inline; } /* -------------------------------------------------------------------- chips */ .chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid var(--line); background: var(--panel); color: var(--txt-2); } .chip-live { color: var(--ok); border-color: rgba(52,211,153,.3); background: rgba(52,211,153,.08); } .chip-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(52,211,153,.7); animation: pulse 2.2s infinite; } .chip-warn { color: var(--warn); border-color: rgba(251,191,36,.3); background: rgba(251,191,36,.08); } .chip-info { color: var(--info); border-color: rgba(96,165,250,.3); background: rgba(96,165,250,.08); } .chip-bad { color: var(--bad); border-color: rgba(248,113,113,.3); background: rgba(248,113,113,.08); } @keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } } .pill { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 650; border: 1px solid var(--line); color: var(--txt-2); background: var(--panel-2); } .pill-ok { color: var(--ok); border-color: rgba(52,211,153,.35); background: rgba(52,211,153,.1); } .pill-bad { color: var(--bad); border-color: rgba(248,113,113,.35); background: rgba(248,113,113,.1); } .pill-warn { color: var(--warn); border-color: rgba(251,191,36,.35); background: rgba(251,191,36,.1); } .pill-info { color: var(--info); border-color: rgba(96,165,250,.35); background: rgba(96,165,250,.1); } .pill-muted { color: var(--muted); } .badge-method { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--txt-2); } .up { color: var(--ok); } .down { color: var(--bad); } .flat { color: var(--muted); } .up-bg { background: rgba(52,211,153,.1); color: var(--ok); border-color: rgba(52,211,153,.3); } /* ------------------------------------------------------------------- tables */ .table-wrap { overflow-x: auto; border-radius: var(--radius-sm); } table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; } table.tbl th { text-align: left; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; } table.tbl td { padding: 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; } table.tbl tbody tr:hover { background: rgba(255,255,255,.022); } table.tbl tbody tr:last-child td { border-bottom: 0; } table.tbl .num { font-family: var(--mono); font-size: 12.8px; } .amount-in { color: var(--ok); font-weight: 650; } .amount-out { color: var(--bad); font-weight: 650; } .row-actions { display: flex; gap: 6px; } /* -------------------------------------------------------------------- forms */ label.field { display: block; margin-bottom: 14px; } label.field > span.lbl { display: block; font-size: 12.5px; font-weight: 600; color: var(--txt-2); margin-bottom: 6px; } input[type=text], input[type=email], input[type=password], input[type=number], input[type=tel], input[type=search], input[type=date], select, textarea { width: 100%; padding: 11px 13px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--bg-2); color: var(--txt); font: inherit; font-size: 14.5px; transition: .15s; } html[data-theme="light"] input, html[data-theme="light"] select, html[data-theme="light"] textarea { background: #fff; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(247,147,26,.16); } input::placeholder { color: #5d6a82; } textarea { min-height: 96px; resize: vertical; } select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 34px; } .field-hint { display: block; font-size: 11.8px; color: var(--muted); margin-top: 5px; } .field-error { display: block; font-size: 12.2px; color: var(--bad); margin-top: 5px; } input.invalid, select.invalid { border-color: var(--bad); } .input-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 14px; } .input-group { display: flex; align-items: stretch; } .input-group input { border-radius: var(--radius-sm) 0 0 var(--radius-sm); } .input-group .addon { display: grid; place-items: center; padding: 0 13px; border: 1px solid var(--line); border-left: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--panel-2); color: var(--txt-2); font-weight: 600; font-size: 14px; } .check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--txt-2); margin-bottom: 14px; } .check input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--brand); flex: none; } .amount-quick { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .amount-quick button { background: var(--panel-2); border: 1px solid var(--line); color: var(--txt-2); border-radius: 999px; padding: 6px 13px; font-size: 12.5px; font-weight: 600; cursor: pointer; } .amount-quick button:hover { border-color: var(--brand); color: var(--txt); } /* ------------------------------------------------------------------- alerts */ .alert { display: flex; gap: 11px; align-items: flex-start; padding: 12px 15px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: 13.8px; border: 1px solid var(--line); background: var(--panel); } .alert .ic { margin-top: 2px; } .alert-ok, .alert-success { border-color: rgba(52,211,153,.35); background: rgba(52,211,153,.09); color: #b8f2d8; } .alert-error { border-color: rgba(248,113,113,.4); background: rgba(248,113,113,.1); color: #ffc9c9; } .alert-warn { border-color: rgba(251,191,36,.4); background: rgba(251,191,36,.1); color: #ffe6ae; } .alert-info { border-color: rgba(96,165,250,.35); background: rgba(96,165,250,.09); color: #c9ddff; } html[data-theme="light"] .alert { color: var(--txt); } .alert a { text-decoration: underline; font-weight: 600; } /* ------------------------------------------------------------------ ticker */ .ticker { border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius); overflow: hidden; } .ticker-head { display: flex; align-items: center; gap: 10px; padding: 11px 15px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--txt-2); } .ticker-head .spacer { margin-left: auto; } .ticker-track { display: flex; gap: 26px; padding: 12px 15px; overflow-x: auto; scrollbar-width: thin; } .tick { display: flex; align-items: center; gap: 9px; white-space: nowrap; font-size: 13px; } .tick b { font-family: var(--mono); font-weight: 600; } .coin-badge { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; font-size: 9.5px; font-weight: 800; letter-spacing: .02em; color: #0d1526; background: #8ea2c9; text-transform: uppercase; } .coin-badge.coin-btc { background: linear-gradient(140deg,#f7931a,#ffbd5c); color: #241503; } .coin-badge.coin-eth { background: linear-gradient(140deg,#8a92b2,#c0c8e0); } .coin-badge.coin-usdt { background: linear-gradient(140deg,#26a17b,#4ccfa4); color: #04231a; } .coin-badge.coin-bnb { background: linear-gradient(140deg,#f0b90b,#ffd84d); color: #2a1f00; } .coin-badge.coin-sol { background: linear-gradient(140deg,#9945ff,#14f195); color: #06070f; } .coin-badge.coin-xrp { background: linear-gradient(140deg,#23292f,#5b6b7d); color: #e6eef8; } .coin-badge.coin-ada { background: linear-gradient(140deg,#0d1e30,#2f6ca8); color: #e6f0fb; } .coin-badge.coin-doge { background: linear-gradient(140deg,#c2a633,#e8d588); color: #2b2403; } .coin-badge.coin-trx { background: linear-gradient(140deg,#eb0029,#ff6b81); color: #2a0208; } .coin-badge.coin-ltc { background: linear-gradient(140deg,#345d9d,#8fb7f0); color: #05101f; } .coin-badge.coin-link { background: linear-gradient(140deg,#2a5ada,#8fb2ff); color: #040d20; } .coin-badge.coin-avax { background: linear-gradient(140deg,#e84142,#ff8b8c); color: #2a0405; } .coin-badge.coin-dot { background: linear-gradient(140deg,#e6007a,#ff7cc0); color: #2a0317; } .coin-badge.coin-matic{ background: linear-gradient(140deg,#8247e5,#b58cff); color: #0d042a; } .market-row { display: grid; grid-template-columns: 2.4fr 1fr 1fr 1.1fr 1.4fr; gap: 12px; align-items: center; padding: 13px 15px; border-bottom: 1px solid var(--line-soft); } .market-row:last-child { border-bottom: 0; } .market-row:hover { background: rgba(255,255,255,.022); } .coin-cell { display: flex; align-items: center; gap: 11px; min-width: 0; } .coin-cell .name { font-weight: 600; font-size: 14px; } .coin-cell .sym { color: var(--muted); font-size: 11.5px; letter-spacing: .04em; } .spark { width: 100%; height: 34px; display: block; } .price-cell { text-align: right; font-family: var(--mono); font-size: 14px; font-weight: 600; } .change-cell { text-align: right; font-weight: 650; font-size: 13px; } /* -------------------------------------------------------------- auth pages */ .auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; } .auth-aside { padding: 46px 48px; display: flex; flex-direction: column; justify-content: space-between; background: radial-gradient(600px 420px at 20% 10%, rgba(247,147,26,.16), transparent 60%), linear-gradient(160deg, #0a1020, #070b14); border-right: 1px solid var(--line); } .auth-form-side { display: grid; place-items: center; padding: 40px 24px; } .auth-card { width: 100%; max-width: 430px; } .auth-card h1 { font-size: 1.6rem; } .auth-lead { color: var(--txt-2); font-size: 14px; } .auth-foot { margin-top: 18px; font-size: 13px; color: var(--muted); } .auth-list { display: grid; gap: 14px; margin: 26px 0; } .auth-list div { display: flex; gap: 12px; align-items: flex-start; color: var(--txt-2); font-size: 14px; } .auth-list .ic { color: var(--brand); margin-top: 3px; } .trust-row { display: flex; gap: 20px; color: var(--muted); font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; } .quote { border-left: 2px solid var(--brand); padding-left: 16px; color: var(--txt-2); font-size: 14px; } /* ------------------------------------------------------------------ deposit */ .method-tabs { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-bottom: 20px; } .method-tab { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); cursor: pointer; transition: .15s; } .method-tab input { display: none; } .method-tab.active { border-color: var(--brand); background: linear-gradient(180deg, rgba(247,147,26,.1), transparent 70%), var(--panel); } .method-tab strong { display: block; font-size: 14px; } .method-tab small { color: var(--muted); font-size: 11.8px; } .cc-visual { position: relative; border-radius: 18px; padding: 22px; color: #f4f8ff; overflow: hidden; margin-bottom: 20px; background: linear-gradient(130deg, #1d2a4a, #0f1729 60%, #241a0f); border: 1px solid #2b3860; box-shadow: var(--shadow); } .cc-visual::after { content: ""; position: absolute; inset: -40% -20% auto auto; width: 320px; height: 320px; background: radial-gradient(circle, rgba(247,147,26,.3), transparent 62%); } .cc-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; position: relative; } .cc-chip { width: 42px; height: 30px; border-radius: 6px; background: linear-gradient(140deg, #d9b45e, #f7dd9a); } .cc-num { font-family: var(--mono); font-size: 20px; letter-spacing: .12em; margin: 26px 0 18px; position: relative; } .cc-meta { display: flex; gap: 34px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #9fb0cf; position: relative; } .cc-meta b { display: block; font-size: 13px; letter-spacing: .04em; color: #eaf1ff; margin-top: 2px; } .secure-note { display: flex; gap: 9px; align-items: center; font-size: 12.3px; color: var(--muted); margin-top: 12px; } .addr-box { display: flex; gap: 10px; align-items: center; background: var(--bg-2); border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 12px 14px; } .addr-box code { font-size: 13px; word-break: break-all; } .qr-wrap { background: #fff; padding: 12px; border-radius: 13px; display: inline-block; line-height: 0; } .steps { counter-reset: step; display: grid; gap: 14px; } .steps li { list-style: none; display: flex; gap: 13px; align-items: flex-start; } .steps li::before { counter-increment: step; content: counter(step); width: 25px; height: 25px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--panel-2); border: 1px solid var(--line); color: var(--brand); font-size: 12px; font-weight: 700; } .copy-btn { background: var(--panel-2); border: 1px solid var(--line); color: var(--txt-2); border-radius: 9px; padding: 7px 11px; font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; } .copy-btn:hover { border-color: var(--brand); color: var(--txt); } /* ------------------------------------------------------------------ widgets */ .pager { display: flex; gap: 6px; justify-content: center; margin-top: 18px; flex-wrap: wrap; } .page-btn { padding: 7px 12px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel); font-size: 13px; font-weight: 600; color: var(--txt-2); } .page-btn:hover { border-color: var(--brand); color: var(--txt); } .page-btn.active { background: var(--brand); color: #14100a; border-color: var(--brand); } .page-btn.disabled { opacity: .4; pointer-events: none; } .empty { text-align: center; padding: 34px 20px; color: var(--muted); } .empty h3 { color: var(--txt); margin: 10px 0 4px; } .empty .btn { margin-top: 10px; } .progress { height: 7px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); overflow: hidden; } .progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-2)); } .kv { display: grid; grid-template-columns: 168px 1fr; gap: 10px 16px; font-size: 13.8px; } .kv dt { color: var(--muted); } .kv dd { margin: 0; font-weight: 550; word-break: break-word; } .tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 18px; flex-wrap: wrap; } .tab { padding: 9px 14px; font-size: 13.5px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; } .tab.active { color: var(--txt); border-color: var(--brand); } .strength { display: flex; gap: 5px; margin-top: 7px; } .strength i { height: 4px; flex: 1; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); } .strength i.on-1 { background: var(--bad); border-color: var(--bad); } .strength i.on-2 { background: var(--warn); border-color: var(--warn); } .strength i.on-3 { background: #a3e635; border-color: #a3e635; } .strength i.on-4 { background: var(--ok); border-color: var(--ok); } .toast-host { position: fixed; right: 18px; bottom: 18px; display: grid; gap: 10px; z-index: 90; } .toast { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--ok); border-radius: 10px; padding: 11px 15px; font-size: 13.5px; box-shadow: var(--shadow); animation: rise .25s ease; } @keyframes rise { from { opacity: 0; transform: translateY(8px); } } .skeleton { background: linear-gradient(90deg, var(--panel-2), var(--panel), var(--panel-2)); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 8px; } @keyframes shimmer { to { background-position: -200% 0; } } .fade-in { animation: fade .3s ease; } @keyframes fade { from { opacity: 0; } } .ticket-note { background: rgba(96,165,250,.08); border: 1px solid rgba(96,165,250,.28); border-radius: var(--radius-sm); padding: 13px 15px; font-size: 13px; color: var(--txt-2); } .admin-note { background: rgba(251,191,36,.07); border: 1px solid rgba(251,191,36,.28); border-radius: var(--radius-sm); padding: 13px 15px; font-size: 13px; } /* ------------------------------------------------------------- responsive */ @media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); } .market-row { grid-template-columns: 2fr 1fr 1fr; } .market-row .col-cap, .market-row .col-spark { display: none; } } @media (max-width: 900px) { .act-checklist { grid-template-columns: 1fr; } .auth-wrap { grid-template-columns: 1fr; } .auth-aside { display: none; } .sidebar { position: fixed; left: 0; top: 0; transform: translateX(-104%); transition: transform .22s ease; box-shadow: 0 0 60px rgba(0,0,0,.6); } .sidebar.open { transform: none; } .only-mobile { display: grid; } .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0,1fr); } .span-2 { grid-column: auto; } .content { padding: 18px 16px; } .topbar { padding: 13px 16px; } .user-chip-txt { display: none; } .kv { grid-template-columns: 1fr; gap: 3px 0; } .kv dt { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; } .input-row { grid-template-columns: minmax(0,1fr); } } @media (max-width: 620px) { .market-row { grid-template-columns: 1.8fr 1fr; } .market-row .col-change { display: none; } .cc-num { font-size: 16px; letter-spacing: .08em; } .stat-value { font-size: 21px; } } @media print { .sidebar, .topbar, .app-footer { display: none; } .layout { display: block; } } /* ========================================================================== KYC / activation ========================================================================== */ .chip-ok { color: var(--ok); border-color: rgba(52,211,153,.3); background: rgba(52,211,153,.08); } .tier-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .tier-line .pill { font-size: 10.5px; } .tier-cta { font-size: 11.5px; font-weight: 650; color: var(--brand); } /* dashboard banner ---------------------------------------------------------- */ .activation-banner { border-color: rgba(251,191,36,.35); background: linear-gradient(180deg, rgba(251,191,36,.07), transparent 55%), var(--panel); } .activation-banner.is-active { border-color: rgba(96,165,250,.32); background: linear-gradient(180deg, rgba(96,165,250,.07), transparent 55%), var(--panel); } .act-checklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; } .act-checklist li { display: flex; gap: 10px; align-items: flex-start; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px 13px; font-size: 13px; } .act-checklist .ic { margin-top: 2px; } /* activation hero ---------------------------------------------------------- */ .activation-hero { border-color: rgba(247,147,26,.3); background: linear-gradient(180deg, rgba(247,147,26,.06), transparent 45%), var(--panel); } .activation-progress { min-width: 220px; } /* stage cards -------------------------------------------------------------- */ .step-card { display: block; padding: 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow); transition: .16s; height: 100%; } .step-card:hover { transform: translateY(-2px); border-color: rgba(247,147,26,.45); } .step-card.done, .step-card.approved { border-color: rgba(52,211,153,.35); background: linear-gradient(180deg, rgba(52,211,153,.06), transparent 55%), var(--panel); } .step-card.available { border-color: rgba(247,147,26,.5); } .step-card.pending { border-color: rgba(96,165,250,.4); } .step-card.rejected { border-color: rgba(248,113,113,.45); } .step-card.more_info { border-color: rgba(251,191,36,.45); } .step-card.locked { opacity: .62; } .step-num { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--panel-2); border: 1px solid var(--line); font-weight: 700; font-size: 13px; color: var(--brand); } .step-card.done .step-num, .step-card.approved .step-num { background: rgba(52,211,153,.15); border-color: rgba(52,211,153,.4); color: var(--ok); } /* uploads ------------------------------------------------------------------ */ .upload-field { border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 13px 15px; background: var(--bg-2); } .upload-field.has-file { border-style: solid; border-color: rgba(52,211,153,.4); } .upload-field input[type=file] { padding: 9px; font-size: 13px; } .upload-field input[type=file]::file-selector-button { background: var(--panel-2); color: var(--txt); border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px; margin-right: 12px; font: inherit; font-size: 12.5px; cursor: pointer; } .upload-field input[type=file]::file-selector-button:hover { border-color: var(--brand); } /* admin review ------------------------------------------------------------- */ .doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; } .doc-card { margin: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--panel-2); } .doc-thumb { display: grid; place-items: center; height: 118px; background: #0c1striped; background: #0c1322; } .doc-thumb img { width: 100%; height: 118px; object-fit: cover; display: block; } .doc-file { color: var(--muted); font-size: 11px; text-align: center; } .doc-card figcaption { padding: 10px; display: grid; gap: 2px; } .decision-row { display: flex; gap: 8px; flex-wrap: wrap; } .is-locked { opacity: .6; pointer-events: none; }