/* =====================================================
   NoiSplit — Fintech App CSS
   Aesthetic: Clean, trustworthy, modern fintech
   Fonts: Outfit (display) + DM Sans (body)
   Colors: Navy primary, Teal accent, warm neutrals
   ===================================================== */
:root{--pri:#1B3A5C;--pri-lt:#2B5A8C;--pri-bg:#E8F0FE;--acc:#00C9A7;--acc-dk:#00A88A;--acc-glow:rgba(0,201,167,.25);--bg:#F5F7FA;--surface:#fff;--txt:#1A1D29;--txt2:#6B7280;--txt3:#9CA3AF;--border:#E5E7EB;--bdr-lt:#F0F1F3;--red:#EF4444;--amber:#F59E0B;--green:#10B981;--r-sm:10px;--r-md:14px;--r-lg:20px;--shadow:0 2px 12px rgba(0,0,0,.06);--font-d:'Outfit',sans-serif;--font-b:'DM Sans',sans-serif;--nav-h:72px;--top-h:58px}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{font-family:var(--font-b);background:var(--bg);color:var(--txt);overflow:hidden;height:100%;height:100dvh;-webkit-font-smoothing:antialiased}

/* SPLASH */
.splash{position:fixed;inset:0;z-index:9999;background:linear-gradient(160deg,var(--pri),#0F2440);display:flex;align-items:center;justify-content:center;transition:opacity .5s,visibility .5s}
.splash.hide{opacity:0;visibility:hidden}
.splash-inner{text-align:center}
.splash-logo{height:45px;filter:brightness(0)invert(1);animation:pulse 1.5s ease infinite}
.splash-bar{width:120px;height:3px;background:rgba(255,255,255,.15);border-radius:3px;margin:24px auto 0;overflow:hidden}
.splash-fill{width:40%;height:100%;background:var(--acc);border-radius:3px;animation:load 1.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.7}}
@keyframes load{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}}

/* GATE */
.gate{position:fixed;inset:0;z-index:500;background:var(--bg);max-width:480px;margin:0 auto}
.gate-scroll{height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch}
.gate-hero{text-align:center;padding:20px 24px 12px}
.gate-hero h2{font-family:var(--font-d);font-weight:700;font-size:22px;margin-top:14px}
.gate-hero p{font-size:13px;color:var(--txt2);margin-top:6px;line-height:1.5}
.gate-icon{width:64px;height:64px;border-radius:18px;background:linear-gradient(135deg,var(--pri),var(--pri-lt));color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:28px}
.hint{text-align:center;font-size:11px;color:var(--txt3)}
.divider{display:flex;align-items:center;gap:12px;margin-top:16px}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border)}
.divider span{font-size:11px;color:var(--txt3);white-space:nowrap}
.demo-card{display:flex;align-items:center;gap:12px;padding:12px;background:var(--surface);border-radius:var(--r-md);margin-bottom:8px;border:1px solid var(--bdr-lt);cursor:pointer;transition:transform .15s}
.demo-card:active{transform:scale(.98)}
.demo-av{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.demo-info{flex:1;min-width:0}
.demo-info strong{font-size:13px;display:block}
.demo-info span{font-size:11px;color:var(--txt3);display:block;margin-top:1px}
.demo-arr{color:var(--txt3);font-size:14px}

/* LOADER */
.loader{position:fixed;inset:0;z-index:600;background:rgba(255,255,255,.96);display:flex;align-items:center;justify-content:center;max-width:480px;margin:0 auto}
.loader-inner{text-align:center;padding:40px}
.loader-ring{width:72px;height:72px;margin:0 auto 16px;position:relative;display:flex;align-items:center;justify-content:center}
.loader-ring i{font-size:24px;color:var(--pri)}
.ring-spin{position:absolute;inset:0;border:3px solid var(--border);border-top-color:var(--acc);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loader-inner p{font-size:13px;font-weight:600;color:var(--txt);margin-bottom:12px}
.loader-bar{width:180px;height:3px;background:var(--border);border-radius:3px;margin:0 auto;overflow:hidden}
.loader-fill{width:30%;height:100%;background:var(--acc);border-radius:3px;animation:loadbar 3s ease-in-out infinite}
@keyframes loadbar{0%{width:10%}50%{width:80%}100%{width:100%}}

/* APP */
.app{height:100dvh;display:flex;flex-direction:column;max-width:480px;margin:0 auto;background:var(--bg);position:relative;overflow:hidden}

/* TOPBAR */
.topbar{height:var(--top-h);min-height:var(--top-h);display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:var(--surface);border-bottom:1px solid var(--bdr-lt);z-index:100}
.notif{position:relative;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--bg);font-size:17px;color:var(--txt2);cursor:pointer}
.notif-dot{position:absolute;top:5px;right:5px;width:7px;height:7px;background:var(--red);border-radius:50%;border:2px solid var(--surface)}
.avatar-sm{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--pri),var(--pri-lt));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:12px;cursor:pointer}

/* VIEWS */
.view{display:none;flex:1;overflow:hidden}
.view.active{display:flex;flex-direction:column;animation:fadeUp .25s ease}
.vscroll{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.vscroll::-webkit-scrollbar{display:none}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.vtitle{font-family:var(--font-d);font-weight:700;font-size:20px}
.vsub{font-size:12px;color:var(--txt2);margin-top:2px}

/* HERO */
.hero{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:160px}
.hero-bg{position:absolute;inset:0;background:linear-gradient(135deg,var(--pri) 0%,#0D2B4A 60%,#091F36 100%)}
.hero-bg::after{content:'';position:absolute;top:-40%;right:-20%;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(0,201,167,.15),transparent 70%)}
.hero-content{position:relative;padding:22px;color:#fff}
.hero-label{font-size:11px;text-transform:uppercase;letter-spacing:1.2px;opacity:.7;font-weight:500}
.hero-amt{font-family:var(--font-d);font-size:32px;font-weight:700;margin-top:4px;letter-spacing:-.5px}
.hero-stats{display:flex;align-items:center;margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.12)}
.hstat{flex:1;text-align:center}
.hstat span{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.8px;opacity:.6}
.hstat strong{display:block;font-family:var(--font-d);font-size:16px;font-weight:600;margin-top:2px}
.hstat-div{width:1px;height:28px;background:rgba(255,255,255,.12)}

/* VERIFIED BADGE */
.ver-badge{display:flex;align-items:center;gap:7px;padding:9px 12px;background:#D1FAE5;color:#059669;border-radius:var(--r-sm);font-size:11px;font-weight:600}

/* QUICK ACTIONS */
.quick-action{display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 6px;background:var(--surface);border-radius:var(--r-md);cursor:pointer;transition:transform .15s;border:1px solid var(--bdr-lt)}
.quick-action:active{transform:scale(.96)}
.qa-ic{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:18px}
.qa-blue{background:var(--pri-bg);color:var(--pri)}
.qa-green{background:#D1FAE5;color:var(--green)}
.qa-amber{background:#FEF3C7;color:var(--amber)}
.quick-action span{font-size:10px;font-weight:600;color:var(--txt2)}

/* ACCOUNT CHECK */
.ac-header{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#D1FAE5;border-radius:var(--r-sm);font-size:13px;font-weight:600;color:#059669;margin-bottom:12px}
.ac-ok-icon{font-size:18px}
.ac-section{background:var(--surface);border-radius:var(--r-md);padding:14px;border:1px solid var(--bdr-lt);margin-bottom:10px}
.ac-section-title{font-family:var(--font-d);font-weight:700;font-size:13px;margin-bottom:10px;color:var(--pri);display:flex;align-items:center;gap:8px}
.ac-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:12px;color:var(--txt2)}
.ac-row+.ac-row{border-top:1px solid var(--bdr-lt)}
.ac-row strong{color:var(--txt);font-weight:600;font-size:12px;text-align:right}
.ac-row strong.mono{font-family:'DM Sans',monospace;font-size:11px;letter-spacing:.5px}
.c-green{color:var(--green)!important}
.c-red{color:var(--red)!important}
.c-accent{color:var(--acc-dk)!important}
.ac-account{display:flex;align-items:center;gap:10px;padding:10px 0}
.ac-account+.ac-account{border-top:1px solid var(--bdr-lt)}
.ac-acc-icon{width:36px;height:36px;border-radius:10px;background:var(--pri-bg);color:var(--pri);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.ac-acc-info{flex:1;min-width:0}
.ac-acc-info strong{font-size:12px;display:block}
.ac-acc-info span{font-size:10px;color:var(--txt3);display:block;margin-top:1px}
.ac-acc-bal{font-family:var(--font-d);font-weight:700;font-size:13px;flex-shrink:0}

/* ESERCENTI */
.searchbox{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:0 12px;height:42px;transition:border-color .2s}
.searchbox:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-glow)}
.searchbox i{color:var(--txt3);font-size:15px}
.searchbox input{border:none;outline:none;flex:1;font-size:13px;font-family:var(--font-b);background:transparent;color:var(--txt)}
.cat-filters{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.cat-filters::-webkit-scrollbar{display:none}
.cat-chip{border:1px solid var(--border);background:var(--surface);border-radius:18px;padding:6px 12px;font-size:11px;font-weight:600;font-family:var(--font-b);white-space:nowrap;cursor:pointer;color:var(--txt2);transition:all .2s;display:flex;align-items:center;gap:4px}
.cat-chip.active{background:var(--pri);color:#fff;border-color:var(--pri)}
.cat-chip:active{transform:scale(.95)}

/* ESERCENTE CARD */
.es-card{display:flex;align-items:flex-start;gap:12px;padding:14px;background:var(--surface);border-radius:var(--r-md);margin-bottom:8px;border:1px solid var(--bdr-lt);cursor:pointer;transition:transform .15s}
.es-card:active{transform:scale(.99)}
.es-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.es-body{flex:1;min-width:0}
.es-top{display:flex;align-items:center;gap:8px}
.es-top strong{font-size:13px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.es-tier-tag{font-size:10px;font-weight:700;color:var(--acc-dk);background:rgba(0,201,167,.1);padding:2px 6px;border-radius:6px;white-space:nowrap}
.es-desc{display:block;font-size:11px;color:var(--txt2);margin-top:3px}
.es-addr{display:block;font-size:10px;color:var(--txt3);margin-top:2px}
.es-addr i{font-size:10px;margin-right:2px}
.es-risk{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;margin-top:6px;padding:3px 8px;border-radius:6px}
.es-risk.low{background:#D1FAE5;color:#059669}
.es-risk.medium{background:#FEF3C7;color:#D97706}
.es-risk.high{background:#FEE2E2;color:#DC2626}
.es-risk.blocked{background:#FEE2E2;color:#DC2626}
.btn-sim{border:none;background:var(--pri);color:#fff;border-radius:var(--r-sm);padding:8px 12px;font-size:11px;font-weight:700;font-family:var(--font-b);cursor:pointer;white-space:nowrap;flex-shrink:0;display:flex;align-items:center;gap:5px;transition:transform .15s;align-self:center}
.btn-sim:active{transform:scale(.95)}

/* SIMULATOR */
.btn-back{background:var(--surface);border:1px solid var(--border);border-radius:10px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;color:var(--txt)}
.btn-back:active{background:var(--bg)}
.sim-header{display:flex;align-items:center;gap:14px}
.sim-icon-wrap{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.sim-name{font-family:var(--font-d);font-weight:700;font-size:16px;margin:0}
.sim-cat{font-size:12px;color:var(--txt2)}
.section-title{font-family:var(--font-d);font-weight:700;font-size:14px;display:flex;align-items:center}
.amt-wrap{display:flex;align-items:center;gap:8px;background:var(--surface);border:2px solid var(--border);border-radius:var(--r-md);padding:0 16px;height:56px;transition:border-color .2s}
.amt-wrap:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-glow)}
.amt-cur{font-family:var(--font-d);font-size:22px;font-weight:700;color:var(--txt2)}
.amt-input{border:none;outline:none;font-family:var(--font-d);font-size:26px;font-weight:700;color:var(--txt);background:transparent;width:100%}
.amt-input::-webkit-outer-spin-button,.amt-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.amt-input[type=number]{-moz-appearance:textfield}
.sel-label{font-size:12px;font-weight:600;color:var(--txt2);display:block;margin-bottom:8px}
.rate-btns{display:flex;gap:8px}
.rate-btn{flex:1;height:52px;border:2px solid var(--border);border-radius:var(--r-sm);background:var(--surface);font-family:var(--font-d);font-size:18px;font-weight:700;color:var(--txt2);cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.rate-btn small{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.rate-btn.active{border-color:var(--acc);background:var(--acc);color:#fff;box-shadow:0 4px 16px var(--acc-glow)}
.rate-btn:active:not([disabled]){transform:scale(.95)}
.rate-btn[disabled]{opacity:.3;cursor:not-allowed}
.no-rates{text-align:center;padding:12px;font-size:12px;color:var(--red);font-weight:600}

/* SIM RESULT */
.sim-summary{background:var(--surface);border-radius:var(--r-md);padding:14px;border:1px solid var(--bdr-lt)}
.sim-row{display:flex;justify-content:space-between;padding:7px 0;font-size:13px;color:var(--txt2)}
.sim-row+.sim-row{border-top:1px solid var(--bdr-lt)}
.sim-row strong{color:var(--txt);font-weight:600}
.sim-row.lg strong{font-family:var(--font-d);font-size:16px;color:var(--pri)}
.sim-row.green{background:#ECFDF5;margin:8px -14px -14px;padding:10px 14px;border-radius:0 0 var(--r-md) var(--r-md)}
.sim-row.green strong{color:var(--green)}

/* RISK */
.sim-risk{border-radius:var(--r-md);padding:14px;margin-top:10px}
.sim-risk.low{background:#D1FAE5;border:1px solid #A7F3D0}
.sim-risk.medium{background:#FEF3C7;border:1px solid #FDE68A}
.sim-risk.high{background:#FEE2E2;border:1px solid #FECACA}
.sim-risk.blocked{background:#FEE2E2;border:1px solid #FECACA}
.sr-head{display:flex;align-items:flex-start;gap:10px}
.sr-head i{font-size:22px;flex-shrink:0;margin-top:2px}
.sr-head strong{font-size:13px;display:block}
.sr-head span{font-size:11px;color:var(--txt2);display:block;margin-top:2px}
.capacity-bar{margin-top:12px}
.cb-label{display:flex;justify-content:space-between;font-size:10px;color:var(--txt2);margin-bottom:4px}
.cb-track{height:6px;background:rgba(0,0,0,.08);border-radius:3px;overflow:hidden}
.cb-fill{height:100%;border-radius:3px;transition:width .8s ease}
.sim-blocked{text-align:center;padding:20px;color:var(--red)}
.sim-blocked i{font-size:28px}
.btn-blocked{opacity:.4;cursor:not-allowed!important}

/* CREDIT / SCORE */
.gauge-wrap{text-align:center;padding:12px 0}
.gauge{width:180px;height:180px;position:relative;margin:0 auto}
.gauge svg{width:100%;height:100%}
.gauge-arc{transition:stroke-dasharray 1.5s ease}
.gauge-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}
.gauge-num{font-family:var(--font-d);font-size:38px;font-weight:800;display:block;line-height:1}
.gauge-of{font-size:13px;color:var(--txt3)}
.gauge-tier{font-family:var(--font-d);font-size:16px;font-weight:700;margin-top:6px}
.approval{display:flex;align-items:center;gap:12px;padding:14px;border-radius:var(--r-md);margin-top:12px}
.approval.ok{background:#D1FAE5;border:1px solid #A7F3D0}
.approval.ok i{color:var(--green);font-size:26px}
.approval.no{background:#FEE2E2;border:1px solid #FECACA}
.approval.no i{color:var(--red);font-size:26px}
.approval strong{font-size:13px;display:block}
.approval span{font-size:11px;color:var(--txt2);display:block;margin-top:2px}
.cr-section{background:var(--surface);border-radius:var(--r-md);padding:14px;border:1px solid var(--bdr-lt);margin-top:10px}
.cr-section h6{font-family:var(--font-d);font-weight:700;font-size:13px;margin-bottom:10px;color:var(--pri)}
.factor{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:11px;color:var(--txt2)}
.factor>span:first-child{width:90px;flex-shrink:0;font-weight:600}
.fbar{flex:1;height:6px;background:var(--border);border-radius:3px;overflow:hidden}
.ffill{height:100%;border-radius:3px;transition:width 1s ease}
.factor>span:last-child{width:70px;text-align:right;font-size:10px;color:var(--txt3)}
.tx-row{display:flex;align-items:center;gap:10px;padding:8px 0}
.tx-row+.tx-row{border-top:1px solid var(--bdr-lt)}
.tx-ic{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.tx-ic.inc{background:#D1FAE5;color:var(--green)}
.tx-ic.exp{background:#FEE2E2;color:var(--red)}
.tx-info{flex:1;min-width:0}
.tx-info strong{font-size:12px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx-info span{font-size:10px;color:var(--txt3);display:block;margin-top:1px}
.tx-amt{font-family:var(--font-d);font-weight:700;font-size:12px;flex-shrink:0}
.tx-amt.inc{color:var(--green)}
.tx-amt.exp{color:var(--red)}

/* SCAN */
.scan-wrap{text-align:center;padding:20px}
.scan-frame{width:220px;height:220px;margin:0 auto;position:relative;display:flex;align-items:center;justify-content:center;background:rgba(27,58,92,.03);border-radius:var(--r-lg)}
.sc{position:absolute;width:32px;height:32px;border-color:var(--acc);border-style:solid;border-width:0}
.sc.tl{top:0;left:0;border-top-width:3px;border-left-width:3px;border-radius:10px 0 0 0}
.sc.tr{top:0;right:0;border-top-width:3px;border-right-width:3px;border-radius:0 10px 0 0}
.sc.bl{bottom:0;left:0;border-bottom-width:3px;border-left-width:3px;border-radius:0 0 0 10px}
.sc.br{bottom:0;right:0;border-bottom-width:3px;border-right-width:3px;border-radius:0 0 10px 0}
.scan-line{position:absolute;top:16px;left:16px;right:16px;height:2px;background:linear-gradient(90deg,transparent,var(--acc),transparent);animation:scanmove 2.5s ease-in-out infinite;opacity:.8}
@keyframes scanmove{0%,100%{top:16px}50%{top:calc(100% - 18px)}}
.scan-ph{font-size:44px;color:var(--pri);opacity:.12}
.scan-txt{font-size:14px;font-weight:500;color:var(--txt2)}

/* PROFILE */
.profile-head{text-align:center;padding:16px 0}
.profile-av{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--pri),var(--pri-lt));color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;font-family:var(--font-d)}
.profile-menu{background:var(--surface);border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--bdr-lt)}
.pm-item{display:flex;align-items:center;gap:12px;padding:14px 16px;font-size:13px;font-weight:500;cursor:pointer;color:var(--txt)}
.pm-item:active{background:var(--bg)}
.pm-item+.pm-item{border-top:1px solid var(--bdr-lt)}
.pm-item i:first-child{font-size:17px;color:var(--txt2);width:22px;text-align:center}
.pm-item span{flex:1}
.pm-item em{font-style:normal;font-size:11px;font-weight:600;margin-left:auto}
.pm-item.danger{color:var(--red)}
.pm-item.danger i{color:var(--red)}

/* BTN */
.btn-ns{background:linear-gradient(135deg,var(--acc),var(--acc-dk));color:#fff;border:none;border-radius:var(--r-md);font-family:var(--font-b);font-weight:700;font-size:14px;padding:12px 22px;box-shadow:0 4px 16px var(--acc-glow);transition:transform .15s;letter-spacing:.2px;cursor:pointer}
.btn-ns:active{transform:scale(.97);box-shadow:none}
.btn-ns-lg{padding:14px 24px;font-size:15px}

/* NAV */
.bnav{display:flex;align-items:flex-end;justify-content:space-around;height:var(--nav-h);min-height:var(--nav-h);background:var(--surface);border-top:1px solid var(--bdr-lt);padding:0 4px;padding-bottom:env(safe-area-inset-bottom,0);z-index:100}
.nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 0 9px;border:none;background:none;cursor:pointer;font-size:9px;font-weight:600;font-family:var(--font-b);color:var(--txt3);transition:color .2s;flex:1}
.nav-item i{font-size:20px}
.nav-item.active{color:var(--pri)}
.nav-item.active::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:20px;height:2px;background:var(--acc);border-radius:0 0 2px 2px}
.nav-item{position:relative}
.scan-nav{padding-top:0}
.scan-btn-inner{width:48px;height:48px;border-radius:15px;background:linear-gradient(135deg,var(--acc),var(--acc-dk));display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;margin-top:-12px;box-shadow:0 4px 16px var(--acc-glow);transition:transform .15s}
.scan-nav:active .scan-btn-inner{transform:scale(.92)}
.scan-nav span{color:var(--acc-dk)}

/* MODAL */
.ok-modal{border-radius:var(--r-lg)!important;border:none}
.ok-check{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--acc),var(--acc-dk));display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:32px;animation:pop .5s cubic-bezier(.175,.885,.32,1.275)}
@keyframes pop{0%{transform:scale(0)}100%{transform:scale(1)}}
.ok-details{background:var(--bg);border-radius:var(--r-md);padding:12px}
.ok-row{display:flex;justify-content:space-between;padding:6px 0;font-size:12px;color:var(--txt2)}
.ok-row strong{color:var(--txt)}
.nf-item{display:flex;align-items:flex-start;gap:10px;padding:14px 18px;border-bottom:1px solid var(--bdr-lt)}
.nf-item.unread{background:var(--pri-bg)}
.nf-ic{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.nf-body{flex:1}
.nf-body span{font-size:12px;display:block;line-height:1.4}
.nf-body small{font-size:10px;color:var(--txt3);margin-top:3px;display:block}
.empty{text-align:center;padding:24px;color:var(--txt3)}
.empty i{font-size:28px;margin-bottom:6px;display:block}
.empty p{font-size:12px;margin:0}