/* DRS Banking
   Só fundos sólidos: no FiveM, sombras, filtros e animações com transform ficam com um retângulo preto.
   Solid backgrounds only: in FiveM, shadows, filters and transform animations render a black box. */
:root {
    --app: rgb(10, 13, 20);
    --side: rgb(13, 16, 25);
    --card: rgb(19, 24, 38);
    --card-2: rgb(24, 30, 46);
    --card-hover: rgb(28, 35, 54);
    --line: rgb(31, 37, 54);
    --line-2: rgb(40, 48, 70);
    --white: #f4f6fb;
    --text: #cfd5e3;
    --muted: #8a92a6;
    --faint: #5c6478;
    --green: #34d399;
    --green-2: #6ee7b7;
    --green-bg: rgb(14, 42, 34);
    --red: #f87171;
    --red-bg: rgb(52, 22, 26);
    --blue: #60a5fa;
    --blue-bg: rgb(20, 34, 58);
    --gold: #fbbf24;
    --gold-bg: rgb(52, 40, 12);
    --violet: #a78bfa;
    --violet-bg: rgb(36, 30, 66);
    --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; font-family: "Inter", "Segoe UI", sans-serif; }
html, body { width: 100vw; height: 100vh; overflow: hidden; background: transparent; color: var(--text); user-select: none; }
body { display: grid; place-items: center; }
.hidden { display: none !important; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
input, select { font: inherit; color: var(--white); }
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 6px; }
svg { display: block; }
.mono { font-family: var(--mono); }

/* ------------------------------------------------------------------ bank window */
.bank { width: min(1320px, 95vw); height: min(800px, 90vh); display: grid; grid-template-columns: 300px 1fr; background: var(--app); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; }

/* sidebar */
.side { display: flex; flex-direction: column; gap: 16px; padding: 22px 18px; background: var(--side); border-right: 1px solid var(--line); min-height: 0; overflow-y: auto; }
.profile { display: flex; align-items: center; gap: 12px; }
.avatar { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; font: 800 18px var(--mono); color: #052e22; background: var(--green); overflow: hidden; flex-shrink: 0; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.who { min-width: 0; }
.who strong { display: block; font-size: 15px; font-weight: 800; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who span { font-size: 12px; font-weight: 600; color: var(--muted); }
.label { font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.balances { display: flex; flex-direction: column; gap: 7px; }
.bal { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 14px; background: var(--card); border: 1px solid transparent; text-align: left; width: 100%; }
button.bal:hover { background: var(--card-hover); }
.bal.on { border-color: rgb(40, 110, 86); background: rgb(17, 34, 34); }
.bal-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.bal-ico svg { width: 18px; height: 18px; }
.i-wallet { color: var(--gold); background: var(--gold-bg); }
.i-checking { color: var(--green); background: var(--green-bg); }
.i-job { color: var(--blue); background: var(--blue-bg); }
.i-gang { color: var(--red); background: var(--red-bg); }
.i-shared { color: var(--violet); background: var(--violet-bg); }
.bal-txt { min-width: 0; flex: 1; }
.bal-txt span { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bal-txt strong { display: block; font: 700 15px var(--mono); color: var(--white); }
.quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qa { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border-radius: 14px; background: var(--card); font-size: 12px; font-weight: 700; color: var(--text); }
.qa:hover { background: var(--card-hover); color: var(--white); }
.qa svg { width: 20px; height: 20px; color: var(--green); }
.spacer { flex: 1; }
.number { padding: 12px 14px; border-radius: 14px; background: var(--card); border: 1px dashed var(--line-2); }
.number strong { display: block; margin-top: 4px; font: 700 15px var(--mono); color: var(--white); letter-spacing: 0.06em; word-break: break-all; }
.logout { display: flex; align-items: center; justify-content: center; gap: 8px; height: 42px; border-radius: 12px; font-size: 13px; font-weight: 700; color: var(--red); background: var(--red-bg); }
.logout:hover { color: #fff; }
.logout svg { width: 17px; height: 17px; }

/* main */
.main { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 26px 14px; }
.head h1 { font-size: 24px; font-weight: 800; color: var(--white); }
.head p { margin-top: 3px; font-size: 13px; font-weight: 500; color: var(--muted); }
.secure { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--green); background: var(--green-bg); }
.secure svg { width: 15px; height: 15px; }
.tabs { display: flex; gap: 4px; margin: 0 26px; padding: 4px; border-radius: 12px; background: var(--side); border: 1px solid var(--line); width: max-content; }
.tab { padding: 8px 15px; border-radius: 9px; font-size: 13px; font-weight: 700; color: var(--muted); }
.tab:hover { color: var(--white); }
.tab.on { color: var(--white); background: var(--card-2); }
.view { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 26px 24px; display: flex; flex-direction: column; gap: 16px; }

.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.kpi { padding: 16px 18px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.kpi span { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.kpi strong { display: block; margin-top: 6px; font: 700 24px var(--mono); color: var(--white); }
.pos { color: var(--green) !important; }
.neg { color: var(--red) !important; }

.panel { padding: 16px 18px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.panel-head h2 { font-size: 15px; font-weight: 800; color: var(--white); }
.panel p.desc { margin: -4px 0 12px; font-size: 12.5px; font-weight: 500; color: var(--muted); line-height: 1.5; }

.tx-list { list-style: none; display: flex; flex-direction: column; }
.tx { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-top: 1px solid var(--line); }
.tx:first-child { border-top: 0; }
.tx-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.tx-ico svg { width: 17px; height: 17px; }
.tx-ico.deposit { color: var(--green); background: var(--green-bg); }
.tx-ico.withdraw { color: var(--red); background: var(--red-bg); }
.tx-main { flex: 1; min-width: 0; }
.tx-main strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-main span { font: 600 11px var(--mono); color: var(--faint); }
.tx-amt { font: 700 14px var(--mono); white-space: nowrap; }
.empty { padding: 26px; text-align: center; font-size: 13px; font-weight: 600; color: var(--muted); }

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.field input, .field select { height: 42px; padding: 0 13px; border-radius: 11px; font-size: 14px; background: var(--side); border: 1px solid var(--line-2); outline: none; user-select: text; }
.field select option { background: var(--side); }
.field input:focus, .field select:focus { border-color: var(--green); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { height: 30px; padding: 0 12px; border-radius: 8px; font: 700 12px var(--mono); color: var(--muted); background: var(--side); border: 1px solid var(--line-2); }
.chip:hover { color: var(--white); }
.chip.on { color: #052e22; background: var(--green); border-color: var(--green); }
.actions { display: flex; gap: 8px; justify-content: flex-end; grid-column: 1 / -1; }
.btn { height: 42px; padding: 0 18px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 13.5px; font-weight: 800; color: #052e22; background: var(--green); }
.btn:hover { background: var(--green-2); }
.btn:disabled { cursor: not-allowed; color: var(--faint); background: var(--card-2); }
.btn.ghost { color: var(--text); background: var(--card-2); border: 1px solid var(--line-2); }
.btn.ghost:hover { color: var(--white); background: var(--card-hover); }
.btn.danger { color: #fff; background: rgb(150, 40, 48); }
.btn.sm { height: 32px; padding: 0 12px; font-size: 12px; border-radius: 9px; }
.switch { display: flex; gap: 4px; padding: 4px; border-radius: 11px; background: var(--side); border: 1px solid var(--line-2); grid-column: 1 / -1; width: max-content; }
.switch button { padding: 7px 14px; border-radius: 8px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.switch button.on { color: var(--white); background: var(--card-2); }

.tools { display: flex; gap: 8px; align-items: center; }
.search { height: 36px; width: 220px; padding: 0 12px; border-radius: 10px; font-size: 13px; background: var(--side); border: 1px solid var(--line-2); outline: none; user-select: text; }
.search:focus { border-color: var(--green); }
.pager { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--muted); }
.pager div { display: flex; gap: 6px; }

/* shared accounts */
.shared-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.acc { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 16px; background: var(--side); border: 1px solid var(--line-2); }
.acc-top { display: flex; align-items: center; gap: 12px; }
.acc-top .bal-txt strong { font-size: 18px; }
.members { display: flex; flex-wrap: wrap; gap: 6px; }
.member { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 10px; border-radius: 8px; font: 700 11.5px var(--mono); color: var(--text); background: var(--card-2); }
.member.owner { color: var(--gold); background: var(--gold-bg); padding-right: 10px; }
.member button { width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; color: var(--muted); }
.member button:hover { color: var(--red); background: var(--red-bg); }
.row { display: flex; gap: 8px; }
.row input { flex: 1; height: 34px; padding: 0 11px; border-radius: 9px; font-size: 12.5px; background: var(--card); border: 1px solid var(--line-2); outline: none; user-select: text; }
.row input:focus { border-color: var(--green); }

/* cards */
.cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.plastic { position: relative; height: 176px; border-radius: 18px; padding: 20px 22px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; background: rgb(17, 70, 56); border: 1px solid rgb(40, 120, 96); }
.plastic.credit { background: rgb(60, 44, 110); border-color: rgb(100, 84, 170); }
.plastic::after { content: ""; position: absolute; right: -40px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255, 255, 255, 0.06); }
.plastic .chipset { width: 42px; height: 32px; border-radius: 7px; background: rgb(222, 190, 110); }
.plastic .pnum { font: 700 18px var(--mono); letter-spacing: 0.12em; color: #fff; }
.plastic .pname { display: flex; justify-content: space-between; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); }
.card-body { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.pin-in { width: 120px; letter-spacing: 0.4em; text-align: center; }

/* ------------------------------------------------------------------ ATM + PIN */
.atm, .pinpad { width: 420px; border-radius: 24px; background: var(--app); border: 1px solid var(--line-2); overflow: hidden; }
.atm-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: var(--side); border-bottom: 1px solid var(--line); }
.atm-head strong { font-size: 15px; font-weight: 800; color: var(--white); letter-spacing: 0.08em; }
.atm-head button { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--muted); background: var(--card); }
.atm-head button:hover { color: var(--white); }
.atm-head svg { width: 16px; height: 16px; }
.atm-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.atm-bal { padding: 16px; border-radius: 16px; background: var(--card); text-align: center; }
.atm-bal span { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.atm-bal strong { display: block; margin-top: 4px; font: 700 30px var(--mono); color: var(--white); }
.atm-bal em { display: block; margin-top: 6px; font: normal 600 11.5px var(--mono); color: var(--muted); }
.atm-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.atm-quick button { height: 44px; border-radius: 11px; font: 700 14px var(--mono); color: var(--white); background: var(--card); border: 1px solid var(--line-2); }
.atm-quick button:hover { border-color: var(--green); }
.atm-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; }
.atm-row input { min-width: 0; width: 100%; height: 44px; padding: 0 13px; border-radius: 11px; font: 700 15px var(--mono); background: var(--side); border: 1px solid var(--line-2); outline: none; user-select: text; }

.pin-dots { display: flex; justify-content: center; gap: 14px; padding: 20px 0 6px; }
.pin-dots i { width: 16px; height: 16px; border-radius: 50%; background: var(--card-2); border: 2px solid var(--line-2); }
.pin-dots i.on { background: var(--green); border-color: var(--green); }
.pin-msg { min-height: 18px; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--red); }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 6px 20px 20px; }
.keypad button { height: 54px; border-radius: 13px; font: 700 20px var(--mono); color: var(--white); background: var(--card); border: 1px solid var(--line-2); }
.keypad button:hover { background: var(--card-hover); }
.keypad button.ok { color: #052e22; background: var(--green); border-color: var(--green); font-size: 14px; font-family: "Inter", sans-serif; font-weight: 800; }
.keypad button.clr { color: var(--muted); font-size: 13px; font-family: "Inter", sans-serif; font-weight: 800; }

/* ------------------------------------------------------------------ toast, confirm, prompt */
.toast { position: fixed; top: 4vh; left: 0; right: 0; margin: 0 auto; width: max-content; max-width: 560px; padding: 11px 16px; border-radius: 12px; font-size: 13px; font-weight: 700; color: var(--white); background: rgb(18, 44, 36); border: 1px solid rgb(40, 110, 86); }
.toast.bad { background: rgb(52, 22, 26); border-color: rgb(120, 44, 50); }
.modal { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(4, 6, 10, 0.7); }
.modal-box { width: min(420px, 92vw); padding: 22px; border-radius: 18px; background: var(--app); border: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 16px; }
.modal-box p { font-size: 14.5px; font-weight: 700; color: var(--white); line-height: 1.5; }
.modal-box .actions { justify-content: flex-end; }
.prompt { position: fixed; top: 50vh; right: 1.4vw; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 12px; background: var(--app); border: 1px solid var(--line-2); font-size: 13.5px; font-weight: 700; color: var(--white); }
.prompt kbd { min-width: 30px; height: 30px; padding: 0 8px; border-radius: 8px; display: grid; place-items: center; font: 700 13px var(--mono); color: #052e22; background: var(--green); }