/* === Components === */
/* LOGIN */
.login{min-height:100dvh;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:72px 24px 40px}
.login-logo{margin-bottom:28px}
.login-h{font-size:28px;font-weight:800;text-align:center;margin-bottom:8px}
.login-sub{font-size:15px;color:var(--t2);text-align:center;margin-bottom:40px}
.login-form{width:100%;max-width:340px}
.fld{margin-bottom:16px}
.fld-lbl{display:block;font-size:13px;font-weight:500;color:var(--t2);margin-bottom:6px}
.inp{width:100%;padding:14px 16px;background:var(--s2);border:1.5px solid rgba(255,255,255,.1);border-radius:var(--r2);color:var(--t1);font-size:16px;transition:border-color .15s}
.inp:focus{border-color:var(--ac);outline:none}
.inp::placeholder{color:var(--t3)}
.inpw{position:relative}
.inpw .inp{padding-right:48px}
.eye-btn{position:absolute;right:14px;top:50%;transform:translateY(-50%);padding:4px;opacity:.5;transition:opacity .15s}
.eye-btn:hover{opacity:1}
.btn-p{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:15px;background:var(--ac);color:#000;font-size:15px;font-weight:700;border-radius:var(--r2);transition:opacity .1s,transform .08s;margin-top:4px}
.btn-p:active{opacity:.8;transform:scale(.96)}
.btn-g{display:flex;align-items:center;justify-content:center;gap:8px;padding:13px 20px;background:var(--s2);color:#fff;font-size:15px;font-weight:600;border-radius:var(--r2);transition:opacity .1s,transform .08s,background .1s}
.btn-g:active{opacity:.8;transform:scale(.96);background:var(--s3)}
.btn-d{display:flex;align-items:center;justify-content:center;gap:8px;padding:13px 20px;background:#ef444418;color:var(--rd);font-size:15px;font-weight:600;border-radius:var(--r2);transition:opacity .1s,transform .08s}
.btn-d:active{opacity:.75;transform:scale(.96)}
.btn-gen{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px;background:var(--s2);color:var(--t1);font-size:15px;font-weight:700;border-radius:var(--r2);transition:opacity .1s,transform .08s;border:1px solid rgba(255,255,255,.1)}
.btn-gen:active{opacity:.8;transform:scale(.96)}
.err{color:var(--rd);font-size:13px;padding:10px 14px;background:rgba(255,59,48,.12);border-radius:var(--r3);display:none;margin-bottom:12px}
.hints{margin-top:28px;padding:16px;background:var(--s1);border-radius:var(--r2);border:1px dashed var(--s3)}
.hrow{display:flex;justify-content:space-between;align-items:center;padding:6px 0}
.hrow:not(:last-child){border-bottom:1px solid var(--s2)}
.hlbl{font-size:13px;color:var(--t2)}
.hval{font-size:13px;font-weight:700;font-family:'SF Mono',Consolas,monospace;color:#fff}
/* HOME */
.hdr{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px}
.profile-btn{display:flex;align-items:center;gap:10px;transition:opacity .1s,transform .08s}
.profile-btn:active{opacity:.7;transform:scale(.96)}
.pname{font-size:17px;font-weight:700}
.av{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;color:#fff;flex-shrink:0}
.notif{width:40px;height:40px;background:var(--s1);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:opacity .1s,transform .08s}
.notif:active{opacity:.7;transform:scale(.9)}
/* Balance Card */
.bc{margin:0 16px 20px;background:#1c1c1e;border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.08);position:relative}
.bc-inner{padding:20px 22px 18px;position:relative;z-index:1}
.bc-stripe{position:absolute;right:-30px;top:-30px;width:160px;height:160px;border-radius:50%;background:rgba(255,221,45,.04);pointer-events:none}
.bc-stripe2{position:absolute;left:-40px;bottom:-40px;width:180px;height:180px;border-radius:50%;background:rgba(255,221,45,.025);pointer-events:none}
.bc-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px}
.bc-lbl{font-size:11px;font-weight:500;color:var(--t2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.bc-bal{font-size:28px;font-weight:700;color:var(--t1);letter-spacing:-.5px;line-height:1}
.bc-logo-ph{width:44px;height:44px;background:rgba(255,255,255,.07);border-radius:12px;flex-shrink:0}
.bc-num{font-size:14px;letter-spacing:.18em;color:var(--t2);font-family:'SF Mono',Consolas,monospace;margin-bottom:10px}
.bc-foot{display:flex;justify-content:space-between;font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:.06em}
/* Quick Actions */
.qa{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0 16px;margin-bottom:24px}
.qa-btn{display:flex;flex-direction:column;align-items:center;gap:8px;transition:transform .08s,opacity .08s}
.qa-btn:active{transform:scale(.88);opacity:.8}
.qa-ico{width:56px;height:56px;border-radius:18px;display:flex;align-items:center;justify-content:center}
.qa-lbl{font-size:11px;font-weight:500;color:var(--t2);text-align:center;line-height:1.3}
/* Sections */
.sec{padding:0 16px;margin-bottom:24px}
.sec-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.sec-ttl{font-size:17px;font-weight:700}
.sec-lnk{font-size:14px;color:var(--t2);font-weight:600;transition:opacity .1s,transform .08s}
.sec-lnk:active{opacity:.6;transform:scale(.95)}
/* TX */
.tx{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--s1)}
.tx:last-child{border-bottom:none}
.tx-ico{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:20px}
.tx-info{flex:1;min-width:0}
.tx-desc{font-size:15px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx-meta{font-size:12px;color:var(--t2);margin-top:2px}
.tx-amt{font-size:15px;font-weight:700;white-space:nowrap}
.tx-date{font-size:13px;font-weight:600;color:var(--t2);padding:16px 0 8px}
/* User card */
.uc{background:var(--s1);border-radius:var(--r);padding:16px;margin-bottom:8px;display:flex;align-items:center;gap:14px;transition:opacity .1s,transform .08s,background .1s;width:100%;text-align:left;border:1px solid rgba(255,255,255,.04)}
.uc:active{opacity:.85;transform:scale(.985);background:var(--s2)}
.ui{flex:1;min-width:0}
.un{font-size:16px;font-weight:700}
.us{font-size:13px;color:var(--t2);margin-top:2px}
.ub{font-size:17px;font-weight:800;color:var(--gr);white-space:nowrap}
/* Page header */
.phdr{display:flex;align-items:center;gap:12px;padding:14px 16px 12px;padding-top:calc(14px + env(safe-area-inset-top,0px));position:sticky;top:0;background:#000;z-index:10;border-bottom:1px solid var(--s1)}
.phdr-t{font-size:18px;font-weight:700}
.bk{width:36px;height:36px;background:var(--s2);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity .1s,transform .08s,background .1s}
.bk:active{opacity:.8;transform:scale(.9);background:var(--s3)}
.sp{flex:1}
/* Detail */
.dhdr{display:flex;align-items:center;gap:16px;padding:20px 16px;background:var(--s1);margin-bottom:16px;border-bottom:1px solid rgba(255,255,255,.06)}
.dbal{font-size:28px;font-weight:800;margin-top:6px}
/* Stats */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 16px;margin-bottom:24px}
.stat{background:var(--s1);border-radius:var(--r);padding:16px}
.sv{font-size:20px;font-weight:800;margin-bottom:2px}
.sl{font-size:12px;color:var(--t2)}
/* Actions row */
.arow{display:flex;gap:10px;padding:0 16px;margin-bottom:12px}
.arow .btn-p,.arow .btn-g{flex:1}
/* Form */
.fsec{padding:0 16px;padding-top:16px}
.fsec .fld{margin-bottom:20px}
/* Profile menu */
.pm{display:flex;align-items:center;width:100%;padding:14px 16px;font-size:15px;font-weight:500;background:var(--s1);border-bottom:1px solid rgba(255,255,255,.05);transition:opacity .1s,background .1s}
.pm:active{opacity:.8;background:var(--s2)}
.pm:last-child{border-bottom:none;border-radius:0 0 var(--r) var(--r)}
.pm:first-child{border-radius:var(--r) var(--r) 0 0}
.pm-ico{font-size:18px;margin-right:14px;width:24px;text-align:center}
.pm-arr{margin-left:auto;opacity:.4}
/* Empty */
.empty{text-align:center;padding:40px 20px}
.ei{font-size:48px;margin-bottom:12px}
.et{color:var(--t2);font-size:15px}
/* Toast */
#toast{position:fixed;bottom:calc(var(--nav) + 16px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%) translateY(20px);background:#fff;color:#000;padding:11px 20px;border-radius:100px;font-size:14px;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.4);opacity:0;transition:opacity .2s,transform .2s;white-space:nowrap;pointer-events:none;z-index:9999;max-width:calc(100vw - 48px)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* Bottom Sheet */
.sov{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:100;display:flex;align-items:flex-end;justify-content:center;animation:fadeIn .2s}
.sh{width:100%;max-width:480px;background:var(--s2);border-radius:24px 24px 0 0;border-top:1px solid rgba(255,255,255,.08);padding:8px 20px calc(32px + env(safe-area-inset-bottom,0px));max-height:90vh;overflow-y:auto;animation:slideUp .25s cubic-bezier(.32,.72,0,1)}
.shdl{width:36px;height:4px;background:var(--s3);border-radius:2px;margin:0 auto 20px}
.sht{font-size:20px;font-weight:800;margin-bottom:16px}
.shb{display:flex;align-items:center;width:100%;padding:15px 16px;background:var(--s2);border-radius:var(--r2);margin-bottom:8px;font-size:15px;font-weight:500;transition:opacity .1s,transform .08s,background .1s}
.shb:active{opacity:.8;transform:scale(.98);background:var(--s3)}
.shb.danger{color:var(--rd)}
.sh-amt{width:100%;padding:16px;background:var(--s2);border:1.5px solid var(--s3);border-radius:var(--r2);color:#fff;font-size:26px;font-weight:700;text-align:center;margin-bottom:12px}
.sh-amt:focus{border-color:var(--ac)}
.sh-amt::placeholder{color:var(--t3)}
.sh-row{display:flex;gap:10px;margin-top:12px}
.sh-row .btn-p,.sh-row .btn-g{flex:1}
.info-row{font-size:13px;color:var(--t2);margin-bottom:16px}
.info-row strong{color:#fff}
/* -- GENERATION SHEET -- */
.gen-preset{padding:12px 8px;background:var(--s2);border-radius:var(--r2);text-align:center;font-size:14px;font-weight:700;color:var(--t2);border:1.5px solid transparent;transition:all .1s,transform .08s;line-height:1.5;width:100%}
.gen-preset:active{opacity:.75;transform:scale(.95)}
.gen-preset.on{background:#2979FF1A;color:var(--ac);border-color:var(--ac)}
.gen-tog-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--s2);cursor:pointer;gap:16px;transition:opacity .1s,background .1s}
.gen-tog-row:active{opacity:.75;background:rgba(255,255,255,.03)}
.tog{width:44px;height:26px;background:var(--s3);border-radius:13px;position:relative;transition:background .2s;flex-shrink:0}
.tog::after{content:'';position:absolute;left:3px;top:3px;width:20px;height:20px;background:#fff;border-radius:50%;transition:transform .2s}
.tog.on{background:var(--ac)}
.tog.on::after{transform:translateX(18px)}
.gen-prev{margin:16px 0;padding:14px 16px;background:#2979FF18;border-radius:var(--r2);border:1.5px solid #2979FF35;text-align:center;font-size:15px;font-weight:700;color:var(--ac)}
.gen-chip{padding:6px 11px;background:var(--s3);border-radius:100px;font-size:12px;font-weight:500;color:var(--t2);border:1.5px solid transparent;transition:all .1s,transform .08s;cursor:pointer;user-select:none;display:inline-block}
.gen-chip.on{background:#2979FF1A;color:var(--ac);border-color:#2979FF50}
.gen-chip:active{opacity:.7;transform:scale(.93)}
.gen-cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:16px}
.gen-cat{padding:8px 4px;background:var(--s2);border-radius:var(--r3);text-align:center;font-size:11px;font-weight:500;color:var(--t2);border:1.5px solid transparent;transition:all .15s}
.gen-cat.on{color:var(--ac);border-color:var(--ac);background:#2979FF18}
/* TX lazy-load spinner */
.tx-load-wrap{text-align:center;padding:22px 16px;display:none}
.tx-loader{display:inline-block;width:28px;height:28px;border:3px solid var(--s2);border-top-color:var(--ac);border-radius:50%;animation:spin .7s linear infinite}
.tx-end{text-align:center;padding:16px 16px 28px;font-size:12px;color:var(--t3);letter-spacing:.04em}

/* === T-Bank (Tinkoff) ЛК Design =========================================== */
/* Placeholders (empty spaces instead of icons) */
.ic-circle-ph{width:44px;height:44px;border-radius:50%;background:var(--s2);flex-shrink:0;display:flex;align-items:center;justify-content:center}
.ic-sq-ph{background:rgba(255,255,255,.07);border-radius:10px}
.ic-sq-sm{width:24px;height:24px;background:rgba(255,255,255,.12);border-radius:6px;flex-shrink:0}

/* T-Bank Header */
.tbank-hdr{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 10px}
.tbank-hdr-name{font-size:18px;font-weight:700;color:var(--t1)}
.tbank-hdr-date{font-size:12px;color:var(--t2);margin-top:2px}
.tbank-notif-btn{width:40px;height:40px;background:var(--s1);border-radius:50%;display:flex;align-items:center;justify-content:center}

/* T-Bank Quick Actions horizontal scroll */
.tbank-qa-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:4px 0 8px;margin-bottom:16px}
.tbank-qa-wrap::-webkit-scrollbar{display:none}
.tbank-qa{display:flex;gap:0;padding:0 16px;min-width:max-content}
.tbank-qa-item{display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 14px;min-width:76px;transition:opacity .1s,transform .08s;background:none;border:none;cursor:pointer}
.tbank-qa-item:active{opacity:.6;transform:scale(.88)}
.tbank-qa-item span{font-size:12px;color:var(--t2);font-weight:500;text-align:center;white-space:nowrap;font-family:inherit}

/* T-Bank Section headers */
.tbank-sec{padding:0 16px 8px}
.tbank-sec-hdr{display:flex;align-items:center;justify-content:space-between;padding:8px 0 14px}
.tbank-sec-ttl{font-size:18px;font-weight:700;color:var(--t1)}
.tbank-sec-link{font-size:14px;color:var(--t2);font-weight:500;transition:opacity .1s,transform .08s}
.tbank-sec-link:active{opacity:.6;transform:scale(.94)}

/* T-Bank Transaction item */
.tbank-tx{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.tbank-tx:last-child{border-bottom:none}
.tbank-tx-info{flex:1;min-width:0}
.tbank-tx-name{font-size:15px;font-weight:500;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbank-tx-meta{font-size:12px;color:var(--t2);margin-top:3px}
.tbank-tx-amt{font-size:15px;font-weight:600;white-space:nowrap}

/* T-Bank Date row */
.tbank-tx-date{font-size:13px;color:var(--t3);padding:14px 0 6px;font-weight:500}

/* T-Bank Promo banner */
.tbank-banner{margin:0 16px 20px;background:var(--s1);border-radius:var(--r);padding:16px;display:flex;align-items:center;gap:14px;border:1px solid rgba(255,255,255,.04)}
.tbank-banner-ttl{font-size:14px;font-weight:600;color:var(--t1);margin-bottom:3px}
.tbank-banner-sub{font-size:12px;color:var(--t2);line-height:1.4}

/* T-Bank nav active dot indicator */
.tbank-nav-dot{width:4px;height:4px;border-radius:50%;background:var(--ac);margin:2px auto 0;opacity:0}
.ni.on .tbank-nav-dot{opacity:1}
.ni.on .ic-sq-sm{background:var(--ac)}

/* T-Bank Profile card */
.tbank-profile-card{margin:0 16px 16px;background:var(--s1);border-radius:var(--r);padding:20px;display:flex;align-items:center;gap:16px;border:1px solid rgba(255,255,255,.04)}

/* Adjusted admin styles for consistency */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 16px;margin-bottom:20px}
.stat{background:var(--s1);border-radius:var(--r);padding:14px;border:1px solid rgba(255,255,255,.04)}

/* Toasts use T-Bank yellow */
#toast{background:var(--s2);color:var(--t1);border:1px solid rgba(255,255,255,.1)}

/* -- Chat -- */
.cm-user,.cm-bot{display:flex;margin:6px 12px}
.cm-user{justify-content:flex-end}
.cm-bot{justify-content:flex-start}
.cm-bubble{max-width:75%;padding:10px 14px;border-radius:18px;font-size:14px;line-height:1.5;word-break:break-word}
.cm-user .cm-bubble{background:#FFDD2D;color:#000;border-radius:18px 18px 4px 18px}
.cm-bot .cm-bubble{background:var(--s1);color:var(--t1);border-radius:18px 18px 18px 4px;border:1px solid rgba(255,255,255,.06)}
.cm-typing{display:flex;gap:4px;align-items:center;padding:12px 16px}
.cm-typing span{width:6px;height:6px;background:var(--t3);border-radius:50%;animation:typing 1.2s infinite}
.cm-typing span:nth-child(2){animation-delay:.2s}
.cm-typing span:nth-child(3){animation-delay:.4s}
/* -- Invest -- */
.inv-ticker{display:flex;align-items:center;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.04);cursor:pointer}
.inv-ticker:active{background:rgba(255,255,255,.03)}
.inv-up{color:#4CAF50}
.inv-dn{color:#f44336}