@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700;800&display=swap');
/* One mobile interface, from small phones to centered large-screen viewing. */
:root{color-scheme:dark;--bg:#0d1828;--paper:#142236;--ink:#f2f4f8;--muted:#a6b2c4;--green:#ddc08e;--deep:#101d2f;--line:#2e4056;--accent:#ddc08e;--pale:#1d2e44;--red:#f1a29c;--radius:16px;--shadow:none;font-family:'Noto Sans TC','Microsoft JhengHei',sans-serif;font-size:14px;color:var(--ink);background:#070e19;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0 auto;max-width:480px;min-height:100dvh;background:var(--bg);box-shadow:0 0 90px #0004;line-height:1.6}
button,input,select,textarea{font:inherit}
button,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button{cursor:pointer;border:0;background:none;color:inherit}
a{color:inherit;text-decoration:none}
button:disabled{opacity:.45;cursor:not-allowed}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
svg{vertical-align:middle}
.icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.shell,.workspace{display:block;min-width:0;min-height:100dvh}
.brand{display:inline-flex;align-items:center;gap:10px;font-size:21px;font-weight:600;letter-spacing:2px;white-space:nowrap}
.brand img{width:31px;height:31px;border-radius:50%;object-fit:cover;flex-shrink:0}
.credit-brand-mark{width:30px;height:30px;object-fit:cover;border-radius:50%;flex-shrink:0}
.brand small{display:none}
.topbar{height:76px;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--bg);border-bottom:1px solid #25364a70}
.top-actions{display:flex;align-items:center;gap:2px}
.icon-btn{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;position:relative;color:var(--accent);padding:8px}
.dot{position:absolute;top:8px;right:8px;width:7px;height:7px;background:var(--accent);border:2px solid var(--bg);border-radius:50%}
.content{padding:22px 18px calc(108px + env(safe-area-inset-bottom));min-width:0}
.page-head{margin-bottom:25px}
.page-heading{display:flex;align-items:center;gap:8px}
.page-heading .back-btn{margin-left:-10px;color:var(--ink)}
h1,h2,h3,p{overflow-wrap:anywhere}
.page-head h1{font-size:27px;line-height:1.45;letter-spacing:.5px;font-weight:600;margin:0}
.page-head p{color:var(--muted);font-size:13px;margin:9px 0 0;line-height:1.8}
.date{color:var(--muted);font-size:11px;display:flex;gap:7px;align-items:center;margin-top:11px}
.date .icon{width:14px;height:14px}
.eyebrow{font-size:10px;letter-spacing:2px;color:var(--accent);margin-bottom:8px}
.panel{background:linear-gradient(120deg,#19293b80,#101d2d60);border:1px solid var(--line);border-radius:var(--radius);padding:20px 18px;min-width:0;box-shadow:none}
.panel-title{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.panel-title h2{font-size:16px;font-weight:500;margin:0;letter-spacing:.4px}
.panel-title h2 .icon{color:var(--accent);margin-right:8px}
.panel-title>.btn{margin-left:auto}
.row{display:flex;align-items:center;gap:12px;min-width:0}
.between{justify-content:space-between}
.wrap{flex-wrap:wrap}
.small{font-size:12px}
.tiny{font-size:11px}
.muted{color:var(--muted)}
.positive{color:var(--accent)}
.negative{color:var(--red)}
.money{font-variant-numeric:tabular-nums;letter-spacing:.2px}
.btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border:1px solid transparent;border-radius:10px;background:linear-gradient(110deg,#e3c995,#cdb184);color:#101b29;font-size:14px;font-weight:600;line-height:1.6;text-align:center}
.btn:hover{filter:brightness(1.08)}
.btn.secondary{background:transparent;border-color:#4a5363;color:var(--accent)}
.btn.ghost{background:#ddc08e12;color:var(--accent);border-color:transparent}
.btn.danger{background:#54313b;color:#ffd2ce;border-color:#70424a}
.btn.small{min-height:44px;padding:9px 12px;font-size:12px}
.text-btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;font-size:12px;min-height:44px;color:var(--accent);padding:6px 0}
.text-btn .icon{width:16px;height:16px}
.dashboard-top,.dashboard-middle,.grid-2,.grid-3,.account-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.stack{display:flex;flex-direction:column;gap:16px;min-width:0}
.span-2{grid-column:auto}
.spacer{height:20px}
.section-heading{margin:27px 0 14px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.section-heading h2{font-size:18px;font-weight:600;margin:0}
.wealth{padding:22px 20px;background-color:#10263f;background-image:linear-gradient(90deg,rgba(5,19,37,.68),rgba(5,19,37,.26) 65%,rgba(5,19,37,.08)),url('./assets/swiss-lake-balance.png');background-size:cover;background-position:center;border-color:#3a4b60}
.wealth .wealth-title,.wealth .wealth-caption{color:#dce6f0;text-shadow:0 1px 5px #061326}
.wealth .wealth-total{text-shadow:0 2px 12px #061326}
.wealth-title{color:#c2cbd6;font-size:14px}
.wealth-title .icon-btn{min-width:36px;min-height:36px}
.wealth-total{display:flex;align-items:baseline;gap:9px;font-size:clamp(29px,8.6vw,42px);line-height:1.3;margin:15px 0 9px;white-space:nowrap;font-weight:600;letter-spacing:.3px}
.wealth-total span{font-size:19px;color:var(--ink);font-weight:500}
.wealth-total strong{font-weight:650}
.wealth-caption{font-size:11px;color:var(--muted)}
.wealth-bottom{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);margin-top:22px;padding-top:16px;gap:8px}
.wealth-bottom label{display:block;color:var(--muted);font-size:10px;margin-bottom:5px}
.wealth-bottom strong{font-size:12px;font-weight:500;overflow-wrap:anywhere}
.quick-services{margin:18px 0 12px;padding:14px 8px;background:linear-gradient(120deg,#17293deF,#101e30ed);border:1px solid #9d89643d;border-radius:18px;box-shadow:0 8px 22px #0002}
.quick-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;align-items:stretch}
.quick{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:9px;min-height:82px;padding:5px 2px;border-radius:12px;font-size:11px;line-height:1.5;text-align:center;color:#d3deeb;transition:background .15s,transform .15s}
.quick .q-icon{display:flex;align-items:center;justify-content:center;width:43px;height:43px;border-radius:13px;border:1px solid #d2b37c40;color:#e3c790;background:linear-gradient(140deg,#d9b77b16,#d9b77b04);box-shadow:inset 0 1px #ffffff08}
.quick .q-icon .icon{width:22px;height:22px;stroke-width:1.5}
.quick:hover{background:#d9b77b0a}.quick:active{transform:translateY(1px);background:#d9b77b14}
.quick .icon{width:25px;height:25px}
.quick:hover .q-icon{background:#203248}
.account-card{position:relative;padding:19px 18px}
.account-card .currency-badge{height:42px;width:42px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#dcc08f1a;border:1px solid #665e50;border-radius:50%;font-size:12px;color:var(--accent)}
.account-card:nth-child(even) .currency-badge{background:#91a5cd20;border-color:#435872;color:#c1d0e7}
.account-card .currency-badge{overflow:hidden;padding:0}
.currency-flag{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
.transfer-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:24px;border-bottom:1px solid var(--line);gap:4px}
.transfer-nav a{display:flex;justify-content:center;align-items:center;min-height:50px;padding:8px 3px;color:var(--muted);font-size:13px;text-align:center;border-bottom:2px solid transparent;overflow-wrap:anywhere}
.transfer-nav a.active{color:var(--accent);border-bottom-color:var(--accent)}
.transfer-section{padding-top:12px;border-top:1px solid var(--line)}
.transfer-section:first-child{border:0;padding-top:0}
.transfer-section h3{font-size:15px;color:var(--ink);font-weight:500;margin:0}
.transfer-estimate{padding:0 14px;border:1px solid var(--line);border-radius:10px;background:#091724}
.transfer-estimate .kv{font-size:12px}
.transfer-other{display:flex;justify-content:space-between;gap:18px;margin-top:22px;flex-wrap:wrap}
.transfer-other a{font-size:12px}
.receive-account{display:flex;align-items:center;gap:12px;padding:20px 0;border-bottom:1px solid var(--line)}
.receive-account:last-child{border:0}
.receive-account>.currency-flag{width:40px;height:40px;flex-shrink:0}
.receive-account>div{flex:1;min-width:0}.receive-account h3,.payee-item h3{font-size:15px;margin:0;font-weight:500}
.receive-account p{font-size:12px;margin:7px 0;overflow-wrap:anywhere}.receive-account .btn{min-width:50px}
.payee-item{padding:22px 0;border-bottom:1px solid var(--line)}.payee-item:first-child{padding-top:0}.payee-item:last-child{border:0;padding-bottom:0}
.payee-number{font-size:18px;letter-spacing:.5px;margin:12px 0 20px;overflow-wrap:anywhere}
.payment-progress{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;padding:0;margin:0 0 26px;gap:8px}
.payment-progress li{display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center;font-size:11px;color:var(--muted);overflow-wrap:anywhere}
.payment-progress li>span{display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--line);border-radius:50%;font-size:12px}
.payment-progress li.active{color:var(--accent)}.payment-progress li.active>span{border-color:var(--accent);background:#ddc08e12}.payment-progress li.done>span{background:#203245;color:var(--ink)}
.payment-account{display:flex;align-items:center;gap:12px;width:100%;min-height:112px;padding:19px 0;text-align:left;border-bottom:1px solid var(--line);color:var(--ink)}
.payment-account:first-child{padding-top:0}.payment-account:last-child{border:0;padding-bottom:0}
.payment-account .currency-flag,.payment-source .currency-flag{width:40px;height:40px;flex-shrink:0}
.payment-account>div{flex:1;min-width:0}.payment-account strong{display:block;font-size:15px;font-weight:500}.payment-account small{display:block;font-size:11px;color:var(--muted);margin:7px 0}
.payment-account div>span{font-size:16px}.payment-account>b{font-size:11px;font-weight:500;color:var(--accent)}.payment-account>.icon{width:16px;height:16px;flex-shrink:0}
.payment-source{display:flex;align-items:center;gap:10px;margin-bottom:20px;padding:14px 12px;border:1px solid var(--line);border-radius:12px;background:#142337}
.payment-source>div{flex:1;min-width:0}.payment-source strong{display:block;font-size:13px;font-weight:500}.payment-source small{display:block;font-size:10px;margin-top:6px;color:var(--muted)}.payment-source>span{font-size:11px;color:var(--accent)}.payment-source .btn{min-width:40px;padding:7px;font-size:11px}
.payment-back{display:flex;margin-top:16px}.payment-back .btn{width:100%}
.payment-recipient{position:relative;display:flex;flex-direction:column;gap:8px;padding:0 55px 18px 0;border-bottom:1px solid var(--line)}.payment-recipient strong{font-size:15px;font-weight:500}.payment-recipient span{font-size:12px;overflow-wrap:anywhere}.payment-recipient small{font-size:11px;color:var(--muted);overflow-wrap:anywhere}.payment-recipient .btn{position:absolute;right:0;top:0;min-width:45px;padding:6px}
.payment-balance .kv{padding:0;border:0;font-size:12px}
.account-card h3{font-size:15px;font-weight:500;margin:0 0 4px}
.acct-number{color:var(--muted);font-size:11px;letter-spacing:.5px}
.account-card .balance{font-size:26px;margin:19px 0 14px;line-height:1.4}
.account-card .balance span{font-size:12px;color:var(--muted);margin-right:10px}
.account-card .balance strong{font-weight:600}
.card-footer{border-top:1px solid var(--line);padding-top:12px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;color:var(--muted)}
.status-dot{width:5px;height:5px;background:var(--accent);display:inline-block;margin-right:6px;border-radius:50%}
.dashboard-accounts .account-card .balance{font-size:24px;margin-bottom:0}
.dashboard-accounts .card-footer{display:none}
.dashboard-middle{margin-top:24px}
.summary-chart{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.summary-chart label{color:var(--muted);font-size:11px}
.summary-chart strong{display:block;font-size:21px;font-weight:500;margin-top:7px}
.summary-chart small{display:block;color:var(--muted);font-size:10px;margin-top:4px}
.chart{width:100%;height:135px;margin-top:20px;overflow:visible}
.chart-labels{display:flex;justify-content:space-between;color:var(--muted);font-size:10px;gap:5px}
.transaction-list{display:flex;flex-direction:column}
.transaction-item{display:grid;grid-template-columns:35px minmax(0,1fr) auto;gap:10px;align-items:center;border-bottom:1px solid var(--line);padding:17px 0;text-align:left;width:100%}
.transaction-item:first-child{padding-top:2px}
.transaction-item:last-child{border:0;padding-bottom:0}
.transaction-item h3{font-size:13px;font-weight:500;margin:0 0 5px}
.transaction-item small{color:var(--muted);font-size:10px}
.transaction-item .txn-bank{display:block;margin-top:4px;overflow-wrap:anywhere}
.transaction-item strong{font-size:13px;font-weight:500;white-space:nowrap}
.txn-icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#ddc08e0d;border:1px solid #35465b;color:var(--accent);flex-shrink:0}
.txn-icon .icon{width:18px;height:18px}
.txn-name{display:flex;align-items:center;gap:10px}
.txn-name>div{min-width:0}
.txn-name small{display:block;color:var(--muted);font-size:10px;margin-top:4px}
.badge{display:inline-flex;align-items:center;padding:3px 8px;border-radius:5px;background:#cbb68912;border:1px solid #cbb68925;color:#decaab;font-size:10px;white-space:nowrap}
.badge.warning{background:#dbab4d14;color:#edce91;border-color:#dbab4d30}
.badge.error{background:#e7868612;color:#f2aaa6;border-color:#e7868630}
.table-wrap{overflow:visible}
.table-wrap table,.table-wrap tbody,.table-wrap tr{display:block;width:100%;white-space:normal}
.table-wrap table{border-collapse:collapse;text-align:left}
.table-wrap thead{display:none}
.table-wrap tbody tr{padding:16px 0;border-bottom:1px solid var(--line)}
.table-wrap tbody tr:first-child{padding-top:0}
.table-wrap tbody tr:last-child{padding-bottom:0;border-bottom:0}
.table-wrap td{display:grid;grid-template-columns:72px minmax(0,1fr);gap:10px;padding:6px 0;border:0;font-size:13px;line-height:1.8;white-space:normal}
.table-wrap td::before{content:attr(data-label);color:var(--muted);font-size:11px}
.table-wrap td[data-label=""]{grid-template-columns:minmax(0,1fr)}
.table-wrap td[data-label=""]::before{display:none}
.cell-value{min-width:0;overflow-wrap:anywhere}
.cell-value .row{flex-wrap:wrap;gap:8px}
.cell-value small{white-space:normal}
.cell-value .btn+.btn{margin-left:5px}
.form-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.field{display:flex;flex-direction:column;gap:9px;color:#b0bdce;font-size:13px;min-width:0}
.field.wide{grid-column:1/-1}
.field input,.field select,.field textarea,.search-input{min-width:0;width:100%;min-height:52px;border:1px solid #394b62;border-radius:10px;background:#162538;color:var(--ink);font-size:16px;padding:13px 14px;outline:none}
.field input::placeholder,.field textarea::placeholder{color:#8596ad}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 2px #ddc08e12}
.field textarea{resize:vertical;min-height:115px;line-height:1.8}
.checkbox{display:flex;gap:9px;align-items:center;font-size:12px;color:#c0cad6;min-height:44px}
.checkbox input,.field input[type=checkbox]{width:18px;height:18px;min-height:0;flex-shrink:0;accent-color:var(--accent)}
.form-actions{display:flex;justify-content:flex-end;gap:10px;padding-top:24px;flex-wrap:wrap}
.form-actions .btn{flex:1;min-width:90px}
form>.form-actions>.btn:only-child{width:100%}
.form-error{color:var(--red);font-size:12px;white-space:pre-line;margin-top:14px}
.form-error:empty{display:none}
.info{margin-top:18px;padding:14px;border-radius:10px;background:#ddc08e0b;border:1px solid #7e705330;color:#c4bdad;font-size:12px;line-height:1.9;overflow-wrap:anywhere}
.kv{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);font-size:13px;line-height:1.9}
.kv:last-child{border:0}
.kv>label{color:var(--muted);max-width:42%;flex-shrink:0}
.kv>span{min-width:0;overflow-wrap:anywhere;text-align:right}
.kv>div{min-width:0}
.kv strong{overflow-wrap:anywhere}
.amount-large{font-size:29px;line-height:1.5;font-weight:500;margin:15px 0;letter-spacing:.5px;overflow-wrap:anywhere}
.toolbar{display:flex;flex-direction:column;align-items:stretch;gap:15px;margin-bottom:24px}
.toolbar .field{min-width:0}
.toolbar>.btn{align-self:flex-start;min-width:100px}
.tabs{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--line);gap:0;margin:0 0 23px}
.tabs a{display:inline-flex;align-items:center;justify-content:center;min-height:45px;padding:10px 11px;color:var(--muted);font-size:12px;border-bottom:2px solid transparent}
.tabs a.active{color:var(--accent);border-bottom-color:var(--accent)}
.progress{height:5px;border-radius:5px;overflow:hidden;background:#2a3b50;margin:17px 0 10px}
.progress>span{display:block;height:100%;max-width:100%;border-radius:5px;background:var(--accent)}
.metric label{font-size:12px;color:var(--muted)}
.metric strong{font-size:27px;line-height:1.5;display:block;margin-top:10px;font-weight:500;overflow-wrap:anywhere}
.bank-card{background:radial-gradient(ellipse at 0 0,#26374d,#132135 65%);color:#e2c895;border:1px solid #c4aa7c;border-radius:17px;padding:22px;position:relative;overflow:hidden;aspect-ratio:1.586;min-height:0;box-shadow:0 16px 32px #0002}
.bank-card:after{content:'';position:absolute;width:350px;height:350px;border:1px solid #ddc08e25;border-radius:50%;right:-180px;bottom:-250px;box-shadow:0 0 0 17px #ddc08e09,0 0 0 34px #ddc08e07,0 0 0 51px #ddc08e06,0 0 0 68px #ddc08e04;pointer-events:none}
.bank-card>.row{font-size:11px;gap:7px;position:relative;z-index:1;flex-wrap:wrap}
.bank-card .chip{width:32px;height:25px;border:1px solid #c3a36c;border-radius:5px;background:linear-gradient(110deg,#d7bc8a,#f0dbad);margin:22px 0 15px}
.bank-card .card-number{font-size:19px;letter-spacing:1.4px;white-space:nowrap;color:#f0e8d9;position:relative;z-index:1}
.bank-card .card-bottom{display:flex;justify-content:space-between;margin-top:17px;font-size:10px;letter-spacing:1px;position:relative;z-index:1}
.bank-card .card-bottom strong{font-size:19px;font-style:italic;line-height:1}
.card-hero{margin:0 5px 23px}
.card-services{margin-top:20px}
.empty{text-align:center;padding:30px 12px;color:var(--muted);font-size:12px;line-height:2}
.empty .icon{display:block;margin:0 auto 12px;width:30px;height:30px;color:var(--accent)}
.notice{display:flex;gap:12px;padding:19px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.notice:last-child{border:0}
.notice>div{min-width:0}
.notice .row{flex-wrap:wrap}
.notice h3{font-size:14px;font-weight:500;margin:0 0 7px}
.notice p{font-size:12px;line-height:1.9;color:var(--muted);margin:0;overflow-wrap:anywhere}
.notice.unread h3:after{content:'';display:inline-block;width:5px;height:5px;background:var(--accent);border-radius:50%;margin-left:7px}
.notice>.btn{margin-left:46px;flex-basis:100%;max-width:calc(100% - 46px)}
.notice>div[style*="text-align:right"]{margin-left:46px;flex-basis:100%;display:flex;align-items:center;justify-content:space-between;gap:12px}
.notice>div[style*="text-align:right"]>div{margin-top:0!important}
details{font-size:13px;border-bottom:1px solid var(--line);padding:18px 0}
summary{cursor:pointer;min-height:28px}
details p{color:var(--muted);font-size:12px;line-height:2}
.stepper{display:flex;align-items:center;justify-content:space-between;gap:5px;margin-bottom:25px;font-size:10px;color:#91a0b3}
.stepper span{display:flex;align-items:center;gap:5px;white-space:nowrap}
.stepper b{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #526174;border-radius:50%;font-weight:400;flex-shrink:0}
.stepper .current{color:var(--accent)}
.stepper .current b{color:#122032;background:var(--accent);border-color:var(--accent)}
.stepper i{height:1px;width:12px;background:#3a4a5d;flex-shrink:1}
dialog{width:min(448px,calc(100% - 24px));max-width:none;max-height:calc(100dvh - 24px);padding:23px 19px;border:1px solid #4a5360;border-radius:18px;background:#142235;color:var(--ink);overflow:auto;overscroll-behavior:contain;box-shadow:0 20px 90px #0007}
dialog::backdrop{background:#050c15bf;backdrop-filter:blur(5px)}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:23px}
.modal-head h2{font-size:21px;font-weight:500;line-height:1.6;margin:6px 0 0}
.modal-head h2{min-width:0;flex:1}
.modal-tools{display:flex;gap:4px;align-items:center;flex-shrink:0}
.modal-tools .language-button{margin-right:0}
.modal-head .icon-btn{margin-right:-7px}
.success-mark{width:58px;height:58px;border:1px solid #a58e653f;background:#d0b27d12;color:var(--accent);display:flex;align-items:center;justify-content:center;border-radius:50%;margin:4px auto 20px}
.success-mark .icon{width:28px;height:28px}
.center{text-align:center}
.receipt{padding:7px 0}
.receipt .brand{font-size:19px}
.receipt h1{font-size:21px}
.receipt .kv{font-size:12px}
.receipt svg{max-width:100%}
#toast{position:fixed;bottom:calc(95px + env(safe-area-inset-bottom));left:50%;transform:translate(-50%,15px);width:max-content;max-width:min(440px,calc(100vw - 32px));padding:13px 19px;border:1px solid #7f735c;background:#233044;color:#f3e7d1;border-radius:10px;font-size:12px;line-height:1.8;text-align:center;z-index:100;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
#toast.show{opacity:1;transform:translate(-50%,0)}
#toast.error{background:#462e37;color:#ffd5d1;border-color:#a46b6b}
.mobile-nav{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:min(100%,480px);height:calc(77px + env(safe-area-inset-bottom));padding:6px 9px calc(6px + env(safe-area-inset-bottom));background:#0d1929f5;border-top:1px solid #2e3b4c;display:flex;align-items:center;justify-content:space-around;z-index:25;backdrop-filter:blur(14px)}
.mobile-nav a{min-width:48px;min-height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#a8b3c2;font-size:11px;position:relative}
.mobile-nav .icon{width:24px;height:24px}
.mobile-nav a.active{color:var(--accent)}
.mobile-nav a.active:after{content:'';position:absolute;bottom:0;width:19px;height:2px;border-radius:2px;background:var(--accent)}
body.menu-open{overflow:hidden}
.sidebar{position:fixed;top:0;bottom:0;left:max(0px,calc((100vw - 480px)/2));width:min(310px,calc(100vw - 36px));background:#122033;border-right:1px solid var(--line);padding:26px 19px;overflow:auto;overscroll-behavior:contain;z-index:40;display:flex;flex-direction:column;visibility:hidden;transform:translateX(-110%)}
.sidebar.open{visibility:visible;transform:translateX(0)}
.sidebar .brand{font-size:19px;gap:7px}
.sidebar .brand img{width:28px;height:28px}
.sidebar-close{position:absolute;right:7px;top:19px}
.sidebar-scrim{display:none}
body.menu-open .sidebar-scrim{display:block;position:fixed;inset:0;background:#050b15a6;z-index:35;backdrop-filter:blur(3px)}
.nav-label{font-size:11px;color:#91a0b4;margin:27px 10px 12px;letter-spacing:1px}
.nav{display:flex;flex-direction:column;gap:3px}
.nav a{display:flex;align-items:center;gap:13px;font-size:13px;min-height:46px;padding:10px 14px;border-radius:9px;color:#bcc7d6}
.nav a.active{background:#d6b98a13;color:var(--accent)}
.nav a:hover{background:#ffffff08}
.sidebar-bottom{padding:25px 8px 12px;margin-top:auto}
.mobile-logout{display:flex;width:100%;margin-bottom:18px}
.helpbox{font-size:12px;line-height:2;color:#c3cddd;padding:14px;border:1px solid var(--line);border-radius:12px}
.sidebar-foot{color:#8f9eb1;font-size:10px;line-height:2;margin-top:18px}
.footer{border-top:1px solid var(--line);padding-top:20px;margin-top:30px;color:#8c9bb0;font-size:9px;line-height:2;display:flex;flex-direction:column;gap:10px}
.footer .row{gap:16px;flex-wrap:wrap}
.footer .icon{width:12px;height:12px}
.login-page{display:block;min-height:100dvh;background:radial-gradient(ellipse at top,#1d2d42 0,transparent 55%),var(--bg)}
.login-art{padding:40px 28px 12px;position:relative}
.login-art .brand{font-size:25px}
.login-art .brand img{width:40px;height:40px}
.login-copy{padding-top:42px}
.login-copy h1{font-size:30px;font-weight:500;line-height:1.65;letter-spacing:1px;margin:0}
.login-copy p,.login-art footer,.orb,.login-copy .eyebrow{display:none}
.login-main{padding:22px 28px 38px;display:block}
.login-box{max-width:none}
.login-box>.eyebrow{display:none}
.login-box h2{font-size:23px;font-weight:500;margin:0 0 8px}
.login-box .subtitle{font-size:12px;color:var(--muted);margin:0 0 29px}
.login-box .field{margin-top:21px}
.login-box form>.btn{width:100%;margin-top:25px;min-height:53px}
.login-links{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:17px;font-size:12px;color:var(--accent)}
.login-links>button,.login-links>a{display:inline-flex;align-items:center;min-height:44px;padding:5px 0}
.login-links .btn{background:none;color:var(--accent);margin:0;width:auto}
.login-security{border-top:1px solid var(--line);margin-top:29px;padding-top:21px;font-size:10px;color:#a6b2c3;display:flex;align-items:center;gap:9px}
.login-security .icon{width:17px;color:var(--accent)}
.bar-chart{height:170px;display:flex;align-items:flex-end;justify-content:space-around;gap:8px;padding:10px 0 24px;border-bottom:1px solid var(--line)}
.bar-group{display:flex;align-items:flex-end;justify-content:center;gap:3px;height:100%;position:relative;flex:1;min-width:0}
.bar-group i{width:min(13px,40%);display:block;border-radius:3px 3px 0 0;min-height:0;background:var(--accent)}
.bar-group i:nth-child(2){background:#627b9d}
.bar-group label{position:absolute;bottom:-24px;left:0;width:100%;text-align:center;color:var(--muted);font-size:10px}
.allocation{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap}
.donut{width:155px;height:155px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.donut:after{content:'資產配置';width:117px;height:117px;display:flex;align-items:center;justify-content:center;background:var(--paper);border-radius:50%;color:var(--muted);font-size:12px}
.legend{display:flex;align-items:center;gap:9px;margin:12px 0;color:var(--muted);font-size:12px}
.legend i{width:8px;height:8px;border-radius:2px}
.calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.calendar>div{padding:7px 3px;min-height:57px;border:1px solid var(--line);border-radius:6px;font-size:11px}
.calendar>div.header{min-height:20px;border:0;text-align:center;color:var(--muted)}
.calendar small{display:block;font-size:8px;line-height:1.7;color:#a6b3c4;overflow-wrap:anywhere}
.calendar .today{background:#ddc08e16;border-color:#a99167}
.search-results{display:flex;flex-direction:column}
.search-results a{padding:15px 8px;border-bottom:1px solid var(--line);font-size:14px;color:#e0e5ed;min-height:48px}
.admin-badge{font-size:9px;letter-spacing:1px;color:var(--accent);border:1px solid var(--line);border-radius:4px;padding:3px 6px}
.print-only{display:none}
.promo{padding:20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);margin-top:22px}
.promo h3{margin:5px 0;font-size:17px}
.promo p{font-size:12px;color:var(--muted)}
body.hide-money .sensitive{position:relative;color:transparent!important;text-shadow:none!important}
body.hide-money .sensitive:after{content:'••••••';position:absolute;inset:0;display:flex;align-items:center;color:var(--ink);font-size:min(21px,1em);letter-spacing:.12em;white-space:nowrap;overflow:hidden}

@media(max-width:360px){.topbar{padding-inline:13px}
.brand{font-size:19px;gap:8px}
.brand img{width:28px;height:28px}
.content{padding-inline:14px}
.page-head h1{font-size:24px}
.panel{padding:18px 15px}
.wealth{padding:21px 17px}
.wealth-total{font-size:29px;gap:7px}
.wealth-total span{font-size:16px}
.wealth-bottom{grid-template-columns:1fr;gap:8px}
.wealth-bottom>div{display:flex;justify-content:space-between;gap:10px}
.wealth-bottom label{margin:0;font-size:11px}
.wealth-bottom strong{font-size:13px}
.quick .q-icon{width:41px;height:41px}
.quick{font-size:12px}
.table-wrap td{grid-template-columns:63px minmax(0,1fr);gap:8px}
.bank-card{padding:19px 17px}
.bank-card .chip{margin:17px 0 12px}
.bank-card .card-number{font-size:17px;letter-spacing:1px}
.bank-card .card-bottom{margin-top:15px}
.stepper{font-size:9px;gap:3px}
.stepper span{gap:4px}
.stepper b{width:20px;height:20px}
.transaction-item{gap:8px;grid-template-columns:30px minmax(0,1fr) auto}
.transaction-item .txn-icon{width:29px;height:29px}
.transaction-item strong{font-size:12px}
.login-art{padding-inline:23px}
.login-main{padding-inline:23px}
}

.rotate-back{transform:rotate(180deg)}
.service-grid{display:grid;grid-template-columns:1fr;gap:10px}
.service-grid a{display:flex;align-items:center;gap:12px;min-height:58px;padding:14px 18px;border:1px solid var(--line);border-radius:12px;background:#152336;color:var(--ink);font-size:13px}
.service-grid a>.icon:first-child{color:var(--accent)}
.service-grid a>.icon:last-child{margin-left:auto;color:var(--muted);width:17px}
.card-layout{display:flex;flex-direction:column;gap:20px}
.card-layout>.bank-card{order:0;margin-inline:4px}
.card-bill{order:1}
.card-services{order:2;margin:0}
.card-rewards{order:3}
.content>.panel:has(form[data-form="filter"])>.row.between{flex-wrap:wrap;gap:15px}
.content>.panel:has(form[data-form="filter"])>.row.between>.row{flex-wrap:wrap;gap:8px}
.stack .row.between,.panel .row.between:has(>.row){flex-wrap:wrap}
.panel [data-form="transfer"] input[name="amount"],.panel [data-form="internal"] input[name="amount"]{font-size:27px;color:var(--accent);font-weight:600;min-height:65px}
.panel:has(form[data-form="transfer"]){padding:0;border:0;background:transparent}
.panel:has(form[data-form="transfer"])>.panel-title{display:none}

.bill-summary{display:grid;grid-template-columns:1.2fr 1fr;gap:14px;margin-bottom:12px}
.bill-summary>div+div{padding-left:16px;border-left:1px solid var(--line)}
.bill-summary label{font-size:12px;color:var(--muted)}
.bill-summary strong{display:block;font-size:24px;font-weight:600;margin-top:8px;white-space:nowrap}
.bill-footnote{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;font-size:10px;color:var(--muted);margin-top:10px}
.card-bill .panel-title{margin-bottom:18px}

@media(max-width:360px){.bill-summary strong{font-size:21px}
.bill-summary>div+div{padding-left:11px}
}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}
}

@media print{:root{color-scheme:light;--ink:#172130;--muted:#526071;--line:#d7dde4;--bg:#fff;--paper:#fff}
body{max-width:none;background:white;box-shadow:none;color:var(--ink)}
.sidebar,.sidebar-scrim,.topbar,.mobile-nav,.footer,.no-print,.form-actions,.text-btn,button,#toast{display:none!important}
.content{padding:0}
.panel{background:white;break-inside:avoid;box-shadow:none}
.print-only{display:block}
.table-wrap{overflow:visible}
dialog{position:static;background:white;color:#172130;box-shadow:none;max-height:none;width:100%;margin:0;border:0}
body:has(dialog[open]) #app{display:none}
dialog::backdrop{background:white}
.receipt .brand{color:#172130}
}


.drawer-search{display:flex;align-items:center;gap:10px;min-height:48px;border:1px solid var(--line);border-radius:10px;color:var(--muted);font-size:12px;margin:28px 3px 0;padding:10px 12px;text-align:left}
.drawer-search>.icon:last-child{margin-left:auto;width:17px}


/* Localised labels can be longer than the original Chinese. */
.language-button{flex-direction:column;gap:1px;min-width:40px;padding:3px;font-size:8px;line-height:1.2}.language-button .icon{width:19px;height:19px}.login-language{position:absolute;right:22px;top:39px}.language-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.language-options>button{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:55px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;text-align:left;font-size:15px;color:var(--ink)}.language-options>button[aria-pressed=true]{border-color:var(--accent);background:#ddc08e12;color:var(--accent)}.language-check{width:20px}.language-setting{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;color:var(--accent);text-align:left}.language-setting>.icon:last-child{margin-left:auto;width:17px}.donut:after{content:var(--allocation-label,'資產配置')}
html:not([lang=zh-Hant]) .brand{font-size:18px;letter-spacing:1.3px}html:not([lang=zh-Hant]) .topbar{padding-inline:14px}html:not([lang=zh-Hant]) .top-actions{gap:0}html:not([lang=zh-Hant]) .mobile-nav a{font-size:10px;max-width:20%;text-align:center}html:not([lang=zh-Hant]) .tabs a{overflow-wrap:anywhere;font-size:12px;padding-inline:10px}html:not([lang=zh-Hant]) .panel-title{gap:8px}html:not([lang=zh-Hant]) .panel-title h2{font-size:15px}html:not([lang=zh-Hant]) .table-wrap td{grid-template-columns:90px minmax(0,1fr)}html:not([lang=zh-Hant]) .table-wrap td::before{overflow-wrap:anywhere}html:not([lang=zh-Hant]) .page-head h1{font-size:25px}html:not([lang=zh-Hant]) .quick{font-size:11px;text-align:center;overflow-wrap:anywhere}html:not([lang=zh-Hant]) .stepper{align-items:flex-start;gap:5px}html:not([lang=zh-Hant]) .stepper span{flex-direction:column;text-align:center;white-space:normal;flex:1;gap:6px}html:not([lang=zh-Hant]) .stepper i{margin-top:11px}html:not([lang=zh-Hant]) .kv>label{max-width:46%;overflow-wrap:anywhere}html:not([lang=zh-Hant]) .bill-summary strong{font-size:22px}html:not([lang=zh-Hant]) .calendar>div.header{font-size:9px;overflow-wrap:anywhere}html:not([lang=zh-Hant]) .login-copy h1{font-size:28px}html:not([lang=zh-Hant]) .checkbox{overflow-wrap:anywhere}html:not([lang=zh-Hant]) .transaction-item strong{font-size:12px}
@media(max-width:360px){html:not([lang=zh-Hant]) .brand{font-size:16px;gap:7px;letter-spacing:1px}.top-actions>.icon-btn{min-width:38px}.top-actions>.language-button{min-width:34px}html:not([lang=zh-Hant]) .content{padding-inline:13px}html:not([lang=zh-Hant]) .bill-summary strong{font-size:19px}html:not([lang=zh-Hant]) .page-head h1{font-size:23px}html:not([lang=zh-Hant]) .table-wrap td{grid-template-columns:75px minmax(0,1fr)}html:not([lang=zh-Hant]) .login-copy h1{font-size:26px}html:not([lang=zh-Hant]) .quick{font-size:10px}html:not([lang=zh-Hant]) .transaction-item strong{font-size:11px}}
@media print{.language-button,#language-modal{display:none!important}}

.display-currency{font-size:10px;letter-spacing:.6px;color:var(--muted);margin-top:9px}[data-input-currency]{font-size:11px;color:var(--accent);margin-left:5px}.dashboard-accounts [data-usd-amount]{font-variant-numeric:tabular-nums}

/* Mobile transaction journal. */
.history-page{padding-bottom:12px}
.history-search{display:flex;align-items:center;gap:12px;background:#172739;border:1px solid #34495e;border-radius:12px;padding:0 14px;min-height:54px}
.history-search>.icon{width:19px;height:19px;color:var(--accent);flex-shrink:0}
.history-search input{border:0!important;background:transparent!important;padding:14px 0!important;min-height:50px!important;width:100%;min-width:0;box-shadow:none!important;font-size:14px}
.history-search:focus-within{border-color:var(--accent)}
.history-search-submit{display:grid;place-items:center;color:var(--accent);width:32px;height:40px;flex-shrink:0}
.history-search-submit .icon{width:19px;height:19px}
.history-filters{margin-top:12px;border-bottom:1px solid var(--line)}
.history-filters summary{display:flex;align-items:center;gap:8px;list-style:none;cursor:pointer;min-height:46px;color:var(--muted);font-size:12px}
.history-filters summary::-webkit-details-marker{display:none}
.history-filters summary>.icon{width:16px;height:16px}
.history-filters summary>.icon:last-child{margin-left:auto;width:14px;transition:transform .2s}
.history-filters[open] summary>.icon:last-child{transform:rotate(180deg)}
.history-filter-count{display:grid;place-items:center;background:#ddc08e20;border:1px solid #ddc08e40;border-radius:50%;width:20px;height:20px;color:var(--accent);font-size:10px}
.history-filter-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px;padding:12px 0 22px}
.history-filter-fields .field{min-width:0;margin:0;font-size:11px}
.history-filter-fields input,.history-filter-fields select{width:100%;min-width:0;max-width:100%;font-size:12px;padding:12px 10px}
.history-filter-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px;grid-column:1/-1}
.history-results-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 0 24px;color:var(--muted);font-size:11px}
.history-export{display:flex;align-items:center;gap:6px;color:var(--accent);min-height:30px;font-size:11px}
.history-export .icon{width:15px;height:15px}
.history-day{margin:0 0 28px}
.history-day>h2{margin:0 0 10px;font-size:11px;letter-spacing:1.5px;font-weight:400;color:#91a4ba}
.history-day-list{border:1px solid #2b4055;border-radius:14px;overflow:hidden;background:linear-gradient(120deg,#13223490,#101d2d70)}
.history-entry{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:start;gap:10px;width:100%;padding:19px 14px;text-align:left;color:var(--ink);border:0;background:transparent}
.history-entry+.history-entry{border-top:1px solid #2b405580}
.history-entry:hover,.history-entry:focus-visible{background:#ddc08e09}
.history-entry:focus-visible{outline:1px solid var(--accent);outline-offset:-2px}
.history-entry-icon{display:grid;place-items:center;width:32px;height:32px;border:1px solid #ddc08e30;border-radius:50%;color:var(--accent);background:#ddc08e08;margin-top:1px}
.history-entry-icon .icon{width:16px;height:16px}
.history-entry-icon.is-credit{color:#a4c7c0;border-color:#a4c7c035;background:#a4c7c009}
.history-entry-info,.history-entry-value{display:flex;flex-direction:column;min-width:0}
.history-entry-title{font-size:13px;line-height:1.5;font-weight:500;overflow-wrap:anywhere;color:#edf1f7}
.history-entry-bank{font-size:10px;line-height:1.5;color:#c1ad88;margin-top:5px;overflow-wrap:anywhere}
.history-entry-meta{font-size:9px;color:var(--muted);line-height:1.5;margin-top:6px;overflow-wrap:anywhere}
.history-entry-value{align-items:flex-end;gap:8px;max-width:148px;padding-top:2px;text-align:right}
.history-entry-value strong{font-size:15px;font-weight:500;line-height:1.3;font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.3px}
.history-entry-value .positive{color:#a4c7c0}
.history-entry-status{font-size:9px;color:#ddc08e;line-height:1.4;overflow-wrap:anywhere}
.history-entry-status.is-success{color:#839b9d}
.history-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 14px}
.history-pagination>span{font-size:11px;color:var(--muted);white-space:nowrap}
.history-pagination .btn{min-height:40px;font-size:11px;padding:9px 13px}
.history-pagination button:disabled{opacity:.3;cursor:default}
.history-empty{border:1px solid var(--line);border-radius:14px;padding:45px 18px;text-align:center}
.history-empty>.icon{color:var(--accent);width:30px;height:30px;margin-bottom:20px}
.history-empty h2{font-size:15px;margin:0 0 12px}.history-empty p{font-size:12px;color:var(--muted);line-height:1.7;margin:0 0 24px}
@media(max-width:360px){.history-entry{grid-template-columns:27px minmax(0,1fr) auto;gap:8px;padding:17px 10px}.history-entry-icon{width:26px;height:26px}.history-entry-title{font-size:12px}.history-entry-value strong{font-size:12px}.history-entry-value{max-width:118px}.history-filter-fields{grid-template-columns:minmax(0,1fr)}}

.language-options>button{min-width:0;padding:14px 12px;font-size:14px;gap:5px}.language-options .language-check{flex:0 0 16px;text-align:right}

.profile-page{display:flex;flex-direction:column;gap:24px;padding-bottom:12px}
.profile-identity{display:flex;align-items:center;gap:16px;padding:24px 20px;border:1px solid #3c4a58;border-radius:16px;background:linear-gradient(120deg,#203146,#122133)}
.profile-avatar{width:54px;height:54px;display:grid;place-items:center;flex-shrink:0;border:1px solid #ddc08e60;border-radius:50%;background:#ddc08e0d;color:var(--accent)}
.profile-avatar .icon{width:25px;height:25px}.profile-identity>div{min-width:0}.profile-identity h2{margin:0 0 8px;font-size:22px;line-height:1.4;overflow-wrap:anywhere}.profile-identity p{margin:0;font-size:11px;color:var(--muted);line-height:1.5}
.profile-identity-mark{margin-left:auto;align-self:flex-start;color:var(--accent);opacity:.7}.profile-identity-mark .icon{width:18px;height:18px}
.profile-section{border:1px solid #2d4257;border-radius:14px;overflow:hidden;background:#13223460}
.profile-section>h2{font-size:13px;font-weight:500;color:var(--accent);letter-spacing:1px;padding:19px 20px 16px;margin:0;border-bottom:1px solid #2d425780}
.profile-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;padding:4px 20px 8px;column-gap:22px}.profile-details>div{min-width:0;padding:20px 0}.profile-details>div+div{border-top:0}.profile-details>div:nth-child(n+3){border-top:1px solid #2d425770}.profile-details>.profile-detail-wide{grid-column:1/-1;padding:19px 0}.profile-details dt{font-size:10px;color:#8fa4bc;line-height:1.5;margin-bottom:9px;letter-spacing:.3px}.profile-details dd{margin:0;color:#edf2f8;font-size:14px;line-height:1.65;overflow-wrap:anywhere}.profile-details>div:first-child dd{font-size:18px;font-weight:500;letter-spacing:1px}.profile-details>div:nth-child(2) dd{font-size:16px;font-weight:400}.profile-detail-wide:last-child dd{color:#bbcadd;font-size:13px;line-height:1.8}
.profile-security{display:flex;align-items:center;gap:13px;padding:20px}.profile-service-icon{color:var(--accent);display:grid;place-items:center;width:30px;flex-shrink:0}.profile-service-icon .icon{width:20px;height:20px}.profile-security>div{display:flex;flex-direction:column;gap:8px;font-size:12px}.profile-password{font-size:16px;letter-spacing:4px;font-weight:400;color:#91a4ba}
.profile-visibility{display:flex;align-items:center;gap:13px;width:100%;padding:18px 20px;text-align:left;border-top:1px solid #2d425780;font-size:12px;color:var(--ink)}.profile-visibility>.icon:first-child{width:20px;margin:0 5px;color:var(--accent)}.profile-visibility>.icon:last-child{margin-left:auto;width:14px;height:14px;color:var(--muted)}
.profile-status-list{margin:0;padding:0 20px}.profile-status-list>div{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 0}.profile-status-list>div+div{border-top:1px solid #2d425770}.profile-status-list dt{font-size:12px;line-height:1.5}.profile-status-list dd{display:flex;align-items:center;gap:6px;font-size:10px;line-height:1.5;color:var(--muted);margin:0;flex-shrink:0}.profile-status-list dd i{width:4px;height:4px;border-radius:50%;background:currentColor}.profile-status-list .is-enabled{color:#a4c7c0}
.profile-devices{padding:0 20px}.profile-devices>div:not(.empty){display:flex;align-items:center;gap:13px;padding:20px 0;font-size:12px;line-height:1.6;overflow-wrap:anywhere}.profile-devices>div+div{border-top:1px solid #2d425770}
@media(max-width:360px){.profile-identity{padding:20px 16px;gap:12px}.profile-section>h2{padding-inline:16px}.profile-details,.profile-status-list,.profile-devices{padding-inline:16px}.profile-identity h2{font-size:20px}}

/* Financial insights: compact mobile cards with consistent chart scales. */
.insights-page{display:flex;flex-direction:column;gap:20px;padding-bottom:12px;font-variant-numeric:tabular-nums}
.insight-hero{position:relative;overflow:hidden;padding:23px 20px 0;border:1px solid #516073;border-radius:17px;background:radial-gradient(ellipse at 100% 0,#d2b47e17,transparent 65%),linear-gradient(120deg,#20344c,#132234)}
.insight-hero-top{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:12px;color:#d4c09a}
.insight-month{font-size:10px;letter-spacing:1.3px;color:#a2b3c6;white-space:nowrap}
.insight-balance{display:block;min-height:52px;margin:19px 0 21px;font-size:34px;font-weight:500;line-height:1.5;letter-spacing:-.7px;overflow-wrap:anywhere;color:#f0e7d5}
.insight-cashflow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:19px 0 23px;border-top:1px solid #a2b3c62a;gap:18px}
.insight-cashflow>div{min-width:0}.insight-cashflow>div+div{padding-left:18px;border-left:1px solid #a2b3c62a}
.insight-cashflow>div>span{display:flex;gap:5px;align-items:center;font-size:10px;color:#9eb0c7;line-height:1.6}.insight-cashflow .icon{width:13px;height:13px;color:#bda985}
.insight-cashflow strong{display:block;margin-top:9px;font-size:19px;font-weight:500;line-height:1.4;letter-spacing:-.4px;overflow-wrap:anywhere}.insight-cashflow>div:first-child strong{color:#c6dcd7}
.insight-panel{padding:21px 20px;border:1px solid #2d4257;border-radius:15px;background:linear-gradient(130deg,#14233790,#101d2b70);min-width:0}
.insight-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:23px}
.insight-heading h2{margin:0;font-size:15px;line-height:1.5;font-weight:500;color:#e9edf5}
.insight-period{font-size:10px;color:var(--muted);letter-spacing:1px;white-space:nowrap}
.insight-selected{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:25px}
.insight-selected>div{min-width:0}.insight-selected span{display:flex;align-items:center;gap:7px;font-size:10px;color:#97a9be}
.income-dot,.expense-dot{display:block;width:5px;height:5px;border-radius:50%;background:#ddc08e}.expense-dot{background:#7d9ab9}
.insight-selected strong{display:block;font-size:17px;font-weight:400;margin-top:8px;line-height:1.4;overflow-wrap:anywhere}
.insight-chart{display:grid;grid-template-columns:36px minmax(0,1fr);gap:10px;height:174px}
.insight-axis{display:flex;flex-direction:column;justify-content:space-between;padding-bottom:29px;font-size:9px;line-height:1;color:#7e92ab;text-align:right}
.insight-plot{position:relative;min-width:0}.insight-chart-grid{position:absolute;inset:0 0 29px;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
.insight-chart-grid i{height:0;border-top:1px dashed #34475b}
.insight-bars{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;height:100%}
.insight-month-bar{display:flex;flex-direction:column;align-items:center;height:100%;min-width:0;padding:0 2px;color:#7d91aa;border:0;background:transparent}
.insight-bar-pair{height:calc(100% - 29px);width:100%;display:flex;align-items:flex-end;justify-content:center;gap:4px;border-radius:4px;position:relative}
.insight-bar-pair i{display:block;width:min(12px,38%);min-height:0;background:#ddc08e;border-radius:3px 3px 0 0;opacity:.6}
.insight-bar-pair i:nth-child(2){background:#7d9ab9}.insight-bar-month{display:block;white-space:nowrap;font-size:9px;padding-top:13px;line-height:1.2}
.insight-month-bar.is-selected .insight-bar-pair i{opacity:1}.insight-month-bar.is-selected{color:var(--accent)}
.insight-month-bar:hover .insight-bar-pair{background:#ddc08e08}.insight-month-bar:focus-visible{outline:1px solid var(--accent);outline-offset:3px;border-radius:3px}
.insight-category-list{display:flex;flex-direction:column;gap:20px}.insight-category-top{display:flex;align-items:center;justify-content:space-between;gap:15px}
.insight-category-name,.insight-asset-name{display:flex;align-items:center;gap:8px;font-size:12px;line-height:1.5;min-width:0;overflow-wrap:anywhere}
.insight-category-name i,.insight-asset-name i{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.insight-category-top strong{font-size:15px;font-weight:400;text-align:right;flex-shrink:0}
.insight-category-bottom{display:flex;align-items:center;gap:14px;margin:10px 0 0 13px}
.insight-category-track{height:3px;border-radius:3px;background:#24364b;flex:1;overflow:hidden}.insight-category-track i{display:block;height:100%;border-radius:3px}
.insight-category-bottom>span{width:38px;font-size:10px;color:#7f94ac;text-align:right}
.insight-heading .insight-edit{display:flex;gap:5px;align-items:center;padding:0;min-height:28px;border:0;background:transparent;color:var(--accent);font-size:10px;font-weight:400;white-space:normal;text-align:right;box-shadow:none}
.insight-edit .icon{width:13px;height:13px;flex-shrink:0}
.insight-budget-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.insight-budget-total strong{font-size:27px;font-weight:500;letter-spacing:-.7px;overflow-wrap:anywhere;line-height:1.5}
.insight-budget-percent{font-size:13px;color:var(--accent);white-space:nowrap}
.insight-budget-cap{display:flex;justify-content:space-between;gap:12px;margin:8px 0 15px;font-size:10px;color:#8ea2bb;line-height:1.5}
.insight-budget-track{height:6px;background:#26384e;border-radius:6px;overflow:hidden}.insight-budget-track i{display:block;height:100%;border-radius:6px}
.insight-budget-remaining{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:18px;font-size:11px;color:#a4c7c0}.insight-budget-remaining strong{font-size:14px;font-weight:400}
.insights-page .is-negative{color:#e4a29a}
.insight-assets-track{display:flex;gap:3px;height:10px;border-radius:5px;overflow:hidden;background:#26384e;margin:4px 0 26px}.insight-assets-track i{display:block;height:100%}
.insight-asset-list{display:flex;flex-direction:column;gap:19px}.insight-asset-list>div{display:grid;grid-template-columns:minmax(0,1fr) auto 39px;gap:10px;align-items:baseline}
.insight-asset-value{font-size:12px;white-space:nowrap}.insight-asset-percent{text-align:right;color:#8da2bb;font-size:10px}
.insight-net{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-top:22px;margin-top:23px;border-top:1px solid #2d4257;font-size:12px;color:#99abc1}.insight-net strong{font-size:20px;font-weight:500;color:#e4d3ad;text-align:right;overflow-wrap:anywhere}
.insight-calendar{padding:0}.insight-calendar summary{display:flex;align-items:center;gap:10px;list-style:none;cursor:pointer;padding:21px 20px;font-size:14px}.insight-calendar summary::-webkit-details-marker{display:none}.insight-calendar summary>.icon{width:18px;height:18px;color:var(--accent)}.insight-calendar summary>.icon:last-child{margin-left:auto;width:14px;color:var(--muted)}.insight-calendar[open] summary>.icon:last-child{transform:rotate(90deg)}.insight-calendar>div{padding:0 15px 18px}
.insight-panel>.empty{padding:18px 0;color:#8196ae;font-size:11px}.insight-panel>.empty .icon{width:24px;height:24px;margin-bottom:12px}
.insight-debits{display:flex;flex-direction:column;gap:18px}.insight-debits>div{display:flex;align-items:center;gap:10px}.insight-debit-icon{display:grid;place-items:center;width:32px;height:36px;color:var(--accent);background:#ddc08e0a;border:1px solid #ddc08e22;border-radius:8px;flex-shrink:0}.insight-debit-icon .icon{width:16px;height:16px}.insight-debits>div>div{display:flex;flex-direction:column;gap:7px;min-width:0}.insight-debits strong{font-size:13px;font-weight:400;line-height:1.5}.insight-debits>div>div>span{font-size:9px;color:var(--muted);line-height:1.5}.insight-debits>div>.money{margin-left:auto;text-align:right;white-space:nowrap}
.insight-alerts{display:flex;flex-direction:column}.insight-alerts>button{display:flex;align-items:center;gap:10px;text-align:left;padding:14px 0;width:100%;color:var(--ink);font-size:12px}.insight-alerts>button+button{border-top:1px solid var(--line)}.insight-alerts>button>span{min-width:0;overflow-wrap:anywhere}.insight-alerts small{display:block;font-size:9px;color:var(--muted);margin-top:8px}.insight-alerts strong{font-size:13px;margin-left:auto;white-space:nowrap;font-weight:400}.insight-alerts .icon{width:13px;flex-shrink:0;color:var(--accent)}

.credit-page{display:flex;flex-direction:column;gap:22px;padding-bottom:10px;font-variant-numeric:tabular-nums}
.credit-selector{display:flex;justify-content:space-between;align-items:center;gap:14px;color:#a6b6ca;font-size:11px;line-height:1.6}
.credit-selector>span{min-width:0;overflow-wrap:anywhere}.credit-selector .credit-apply{display:flex;align-items:center;gap:5px;min-height:32px;padding:0;border:0;background:transparent;box-shadow:none;font-size:10px;font-weight:400;color:var(--accent);text-align:right;white-space:normal;flex-shrink:0;max-width:45%}.credit-apply .icon{width:13px;height:13px;flex-shrink:0}
.credit-tabs{display:flex;gap:8px;overflow-x:auto}.credit-tabs a{font-size:10px;padding:8px 12px;border:1px solid var(--line);border-radius:20px;white-space:nowrap;color:var(--muted)}.credit-tabs a.active{border-color:var(--accent);color:var(--accent)}
.credit-plastic.bank-card{padding:24px 23px 22px;aspect-ratio:auto;min-height:235px;border:1px solid #ad9466;border-radius:17px;background:radial-gradient(ellipse at 0 0,#34475e50,transparent 65%),linear-gradient(110deg,#24384f,#101f32 85%);box-shadow:0 15px 32px #0003}
.credit-plastic:after{width:360px;height:360px;bottom:-220px;right:-230px;border-color:#ddc08e35;box-shadow:0 0 0 24px #ddc08e09,0 0 0 48px #ddc08e07,0 0 0 72px #ddc08e05,0 0 0 96px #ddc08e03}
.credit-plastic-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;position:relative;z-index:1}.credit-plastic-top>span:first-child{display:flex;align-items:center;gap:9px;font-size:15px;letter-spacing:1.5px;flex-shrink:0}.credit-plastic-top>.credit-card-type{font-size:10px;line-height:1.6;color:#baa47d;text-align:right;max-width:47%;overflow-wrap:anywhere}.credit-plastic-top .icon{width:27px;height:27px;stroke-width:1.3;flex-shrink:0}.credit-plastic-top small{display:block;font-size:7px;letter-spacing:2.8px;line-height:1.8;margin-top:4px;color:#b59e78}
.credit-chip-row{display:flex;gap:16px;align-items:center;height:36px;margin:22px 0 13px;position:relative;z-index:1}.credit-plastic .chip{width:36px;height:27px;margin:0;background:linear-gradient(115deg,#a78d61,#e2ce9e 50%,#bca474);position:relative;box-shadow:inset 0 0 0 3px #1b2b3b25}.credit-plastic .chip:before{content:'';position:absolute;top:8px;bottom:8px;left:0;right:0;border-block:1px solid #77603a80}.credit-plastic .chip:after{content:'';position:absolute;left:12px;right:12px;top:0;bottom:0;border-inline:1px solid #77603a80}
.credit-contactless{position:relative;width:20px;height:24px;display:block;opacity:.65}.credit-contactless i{position:absolute;top:50%;left:0;transform:translateY(-50%);border:1px solid #ddc08e;border-left:0;border-top-color:transparent;border-bottom-color:transparent;border-radius:0 50% 50% 0;width:5px;height:10px}.credit-contactless i:nth-child(2){width:11px;height:17px}.credit-contactless i:nth-child(3){width:17px;height:24px}
.credit-plastic .card-number{font-size:23px;letter-spacing:2px;line-height:1.5;white-space:nowrap;color:#e3e8ee}.credit-plastic .card-bottom{margin-top:19px;align-items:center;gap:10px;font-size:11px;line-height:1.5;letter-spacing:1px;color:#bdcad9}.credit-plastic .card-bottom>span:first-child{overflow-wrap:anywhere;min-width:0}.credit-card-state{display:flex;gap:5px;align-items:center;color:#bba887;font-size:9px;margin-left:auto;letter-spacing:0;flex-shrink:0}.credit-card-state i{width:4px;height:4px;border-radius:50%;background:currentColor}.credit-plastic .card-bottom strong{margin-left:7px;font-size:22px;color:#ddc08e;flex-shrink:0}
.credit-limit{padding:22px 20px;border:1px solid #344a60;border-radius:15px;background:linear-gradient(130deg,#17283c,#111f30)}
.credit-limit-label{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#9db0c8;font-size:11px}.credit-limit-label .icon{width:18px;height:18px;color:#bda67e}
.credit-available{display:block;margin:14px 0 23px;font-size:33px;font-weight:500;line-height:1.4;min-height:47px;color:#f0e5d0;letter-spacing:-.6px;overflow-wrap:anywhere}
.credit-limit-track{height:5px;background:#2a3e55;border-radius:5px;overflow:hidden;margin-bottom:22px}.credit-limit-track i{display:block;background:linear-gradient(90deg,#aa9063,#ddc08e);height:100%;border-radius:5px}
.credit-limit-numbers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.credit-limit-numbers>div{min-width:0}.credit-limit-numbers>div+div{border-left:1px solid #344a6060;padding-left:20px}.credit-limit-numbers span{font-size:10px;color:#91a5bf;line-height:1.5;display:block}.credit-limit-numbers strong{display:block;margin-top:8px;font-size:18px;font-weight:400;letter-spacing:-.2px;overflow-wrap:anywhere;line-height:1.5}
.credit-services{display:grid;grid-template-columns:repeat(auto-fit,minmax(65px,1fr));gap:12px;padding:0 8px}.credit-service{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;color:#b5c3d4;min-width:0;padding:0;font-size:11px;line-height:1.6}.credit-service>span:first-child{display:grid;place-items:center;width:45px;height:45px;background:#ddc08e08;border:1px solid #ddc08e40;border-radius:50%;color:var(--accent)}.credit-service .icon{width:19px;height:19px;stroke-width:1.4}.credit-service:hover>span:first-child{background:#ddc08e12;border-color:#ddc08e}.credit-service:focus-visible{outline:1px solid var(--accent);outline-offset:5px;border-radius:8px}
.credit-rewards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:20px 0 22px;border-block:1px solid #2c4056;margin-top:2px}.credit-rewards>div{min-width:0;padding-left:10px}.credit-rewards>div+div{border-left:1px solid #2c4056;padding-left:22px}.credit-rewards span{display:flex;align-items:center;gap:6px;color:#8ea3bd;font-size:10px;line-height:1.6}.credit-rewards .icon{width:14px;height:14px;color:var(--accent);flex-shrink:0}.credit-rewards strong{display:block;margin-top:10px;font-weight:400;font-size:23px;line-height:1.4;overflow-wrap:anywhere;color:#d4ddeb}
.credit-section-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;margin:5px 0 24px}.credit-section-heading h2{font-size:16px;line-height:1.5;font-weight:500;margin:0}.credit-section-heading>span{color:#8197b1;font-size:10px;white-space:nowrap}
.credit-purchase-day{margin:0 0 22px}.credit-purchase-day>h3{font-size:10px;color:#839ab5;font-weight:400;letter-spacing:1.3px;margin:0 0 10px}.credit-purchase-day>div{background:#13223480;border:1px solid #2e4258;border-radius:12px;overflow:hidden}
.credit-purchase{display:flex;align-items:flex-start;gap:12px;padding:18px 14px}.credit-purchase+.credit-purchase{border-top:1px solid #2e425870}.credit-merchant-icon{display:grid;place-items:center;flex-shrink:0;width:30px;height:32px;color:#c2aa7f;background:#ddc08e08;border:1px solid #ddc08e20;border-radius:8px}.credit-merchant-icon .icon{width:15px;height:15px}.credit-merchant{min-width:0;display:flex;flex-direction:column;gap:8px;padding-top:1px}.credit-merchant strong{font-size:13px;line-height:1.5;font-weight:400;overflow-wrap:anywhere}.credit-merchant small{font-size:9px;color:#7f95af;line-height:1.5;overflow-wrap:anywhere}.credit-purchase-value{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:8px;text-align:right;flex-shrink:0;padding-top:1px}.credit-purchase-value strong{font-size:16px;font-weight:500;white-space:nowrap;letter-spacing:-.2px;line-height:1.4}.credit-purchase-value small{font-size:9px;color:#8cb2aa;line-height:1.5}.credit-purchase-value .is-pending{color:#c2a775}
@media(max-width:360px){.credit-plastic.bank-card{padding:20px 18px;min-height:220px}.credit-plastic .card-number{font-size:19px;letter-spacing:1.1px}.credit-plastic-top>span:first-child{font-size:13px;gap:6px}.credit-plastic-top>.credit-card-type{font-size:9px}.credit-plastic-top .icon{width:23px;height:23px}.credit-limit{padding:20px 17px}.credit-available{font-size:29px}.credit-limit-numbers strong{font-size:16px}.credit-limit-numbers>div+div{padding-left:14px}.credit-limit-numbers{gap:12px}.credit-rewards strong{font-size:20px}.credit-rewards>div+div{padding-left:16px}.credit-purchase{padding:17px 11px;gap:9px}.credit-purchase-value strong{font-size:14px}.credit-merchant strong{font-size:12px}.credit-merchant-icon{width:26px;height:29px}}
@media(max-width:360px){.insight-hero,.insight-panel{padding-inline:16px}.insight-balance{font-size:29px}.insight-cashflow{gap:10px}.insight-cashflow>div+div{padding-left:12px}.insight-cashflow strong{font-size:16px}.insight-selected strong{font-size:15px}.insight-heading h2{font-size:14px}.insight-chart{gap:6px;grid-template-columns:30px minmax(0,1fr)}.insight-bars{gap:4px}.insight-bar-pair{gap:3px}.insight-budget-total strong{font-size:24px}.insight-asset-list>div{grid-template-columns:minmax(0,1fr) auto 34px;gap:6px}.insight-asset-name{font-size:10px;gap:5px}.insight-asset-value{font-size:11px}.insight-calendar{padding:0}}

/* Three-step credit application and review. */
.credit-application-modal{padding:23px 20px!important}.credit-application-modal .modal-head{margin-bottom:25px}.credit-application-modal .modal-head h2{font-size:20px}
.credit-app-body{min-width:0}.credit-app-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:0 0 23px;margin:0 0 24px;border-bottom:1px solid #344a60}
.credit-app-steps li{display:flex;flex-direction:column;align-items:center;gap:9px;min-width:0;color:#7e94ae;font-size:10px;text-align:center;line-height:1.5}.credit-app-steps li>span{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;border:1px solid #344a60;font-size:11px}
.credit-app-steps .is-active{color:#e2c28c}.credit-app-steps .is-active>span{border-color:#d9bb86;background:#ddc08e13}.credit-app-steps .is-complete>span{color:#c9b083;border-color:#74664f}
.credit-app-fields{display:flex;flex-direction:column;gap:19px}.credit-app-fields>.field{width:100%;min-width:0;margin:0;font-size:11px;line-height:1.6}.credit-app-fields input,.credit-app-fields select{min-height:51px;width:100%;min-width:0;font-size:14px;padding:13px 14px;box-sizing:border-box}
.credit-app-section-title{font-size:13px!important;color:#ddc08e;margin:5px 0 0;font-weight:500;letter-spacing:.5px;line-height:1.6}.credit-app-section-title:not(:first-child){padding-top:20px;border-top:1px solid #344a60;margin-top:8px}
.credit-app-identity{border:1px solid #344a60;border-radius:12px;padding:18px 16px;background:#10203270;margin-top:5px}.credit-app-identity h3,.credit-app-review h3{font-size:12px;font-weight:500;color:#cfb788;margin:0 0 18px;line-height:1.5}.credit-app-identity dl{margin:0;display:flex;flex-direction:column;gap:16px}.credit-app-identity dt{color:#839bb7;font-size:10px;margin-bottom:5px;line-height:1.5}.credit-app-identity dd{margin:0;color:#cdd8e6;font-size:12px;line-height:1.6;overflow-wrap:anywhere}
.credit-app-review{border:1px solid #344a60;border-radius:12px;padding:18px 15px;background:#10203250;grid-column:1/-1;min-width:0}.credit-app-review .kv{gap:20px;align-items:baseline;padding-block:13px}.credit-app-review .kv:last-child{border-bottom:0;padding-bottom:0}.credit-app-review .kv>label{font-size:10px;line-height:1.6;max-width:45%;color:#8fa6c1}.credit-app-review .kv>span{font-size:12px;line-height:1.6;overflow-wrap:anywhere;max-width:60%;text-align:right}
.credit-app-declaration{display:flex;align-items:flex-start;gap:12px;padding:3px 1px;color:#bacbdd;font-size:12px;line-height:1.8}.credit-app-declaration input{width:18px;min-height:18px;height:18px;margin:3px 0 0;flex-shrink:0;accent-color:#d8b981}.credit-app-actions{display:flex;gap:12px;position:sticky;bottom:-23px;background:linear-gradient(0deg,#142234 85%,#14223400);padding:22px 0 10px;margin-top:12px;z-index:2}.credit-app-actions>.btn{flex:1;font-size:13px;min-height:48px}.credit-app-actions>.secondary{flex:0 1 35%;font-size:12px}
@media(max-width:360px){.credit-application-modal{padding:20px 16px!important}.credit-app-steps{gap:5px}.credit-app-steps li{font-size:9px}.credit-app-review{padding:16px 12px}.credit-app-review .kv{gap:10px}.credit-app-review .kv>span{font-size:11px}.credit-app-actions{bottom:-20px}}

/* Subtle digital banking backdrop, constrained to the mobile canvas. */
body{isolation:isolate;background:#0b1726}
body:before{content:'';position:fixed;inset:0;width:100%;max-width:480px;margin:0 auto;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#0b172626 0%,#0b172640 55%,#0b1726b3 82%,#0b1726 100%) center top/100% min(125vw,600px) no-repeat,url('./assets/site-julius-baer-v7.png') center top/100% auto no-repeat,#0b1726}
.panel{background:linear-gradient(120deg,#17273ce8,#101f31ed)}
.panel.wealth{background:linear-gradient(120deg,#17273ce8,#101f31ed);border-color:#566578;overflow:hidden}
.topbar{background:#0d1828ed;backdrop-filter:blur(16px)}
@media print{body:before{display:none}}

.language-options>button>span:first-child{min-width:0;overflow-wrap:anywhere;line-height:1.5}

.admin-hub{display:flex;flex-direction:column;gap:22px}
.admin-customer-list{display:flex;flex-direction:column;gap:12px}
.admin-customer-card{display:flex;align-items:center;gap:13px;padding:19px 14px;border:1px solid #3c5068;border-radius:14px;background:#0e1e32b3;min-height:110px}
.admin-customer-card:hover{border-color:#c6ac7f}.admin-customer-avatar{display:grid;place-items:center;width:40px;height:45px;flex-shrink:0;border-radius:12px;background:#d9bc8610;color:#ddc08e}
.admin-customer-card>div{display:flex;flex-direction:column;min-width:0;gap:5px}.admin-customer-card h2{font-size:15px;margin:0;font-weight:500;line-height:1.6}.admin-customer-card>div>span{font-size:11px;color:#b6c6d9}.admin-customer-card small{font-size:10px;color:#8fa6c1;overflow-wrap:anywhere}
.admin-customer-card-status{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:13px;flex-shrink:0}.admin-customer-card-status>.icon{width:16px;height:16px;color:#ddc08e}
.admin-customer-back{margin-bottom:17px}
.admin-hub-status{display:flex;align-items:center;gap:12px;padding:16px;border:1px solid #36495f;border-radius:14px;background:#102035ed}
.admin-hub-status-icon{display:grid;place-items:center;width:36px;height:40px;color:#d8bd8c;flex-shrink:0}
.admin-hub-status>div{display:flex;flex-direction:column;gap:4px}.admin-hub-status>div>span{font-size:10px;color:#93a9c3}.admin-hub-status strong{font-size:12px;font-weight:500;color:#dbe5f0}
.admin-hub-date{margin-left:auto;font-size:10px;color:#a3b6cd;white-space:nowrap}
.admin-hub-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.admin-hub-link{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:20px;min-height:144px;padding:20px 17px;border:1px solid #405169;border-radius:17px;background:linear-gradient(135deg,#1c3048f5,#111f32f5);transition:border-color .15s,background .15s}
.admin-hub-link:hover{border-color:#c8ac7b}.admin-hub-link:active{background:#26394e}
.admin-hub-icon{display:grid;place-items:center;width:39px;height:39px;border-radius:12px;border:1px solid #cfb27b40;background:#cfb27b0b;color:#ddc08e}.admin-hub-icon .icon{width:22px;height:22px}
.admin-hub-link h2{font-size:14px;font-weight:500;line-height:1.6;margin:0;padding-right:12px;color:#e1e8f1}
.admin-hub-arrow{position:absolute;right:13px;bottom:21px;color:#a99471}.admin-hub-arrow .icon{width:14px;height:14px}
.admin-hub-count{position:absolute;right:17px;top:20px;min-width:23px;height:23px;padding:0 6px;display:grid;place-items:center;border-radius:20px;background:#dcc08f;color:#101c2d;font-size:11px}
@media(max-width:360px){.admin-hub-grid{gap:10px}.admin-hub-link{padding:17px 13px;min-height:135px;gap:16px}.admin-hub-link h2{font-size:12px}.admin-hub-status{padding:13px;gap:7px}.admin-hub-date{font-size:9px}}

/* Heritage bank card with etched architectural artwork. */
.credit-plastic.bank-card{position:relative;display:flex;flex-direction:column;aspect-ratio:1.586;min-height:250px;padding:23px 24px 20px;border:1px solid #7b7c855e;border-radius:15px;background:linear-gradient(180deg,#0811260a,#0711251a 55%,#071125a6),url('./assets/credit-card-engraving-v1.png') center/cover no-repeat;box-shadow:0 12px 28px #0004,inset 0 1px #ffffff12;color:#e0d6b8}
.credit-plastic.bank-card:after{display:none}
.credit-plastic-top>span:first-child{font-family:Georgia,'Times New Roman',serif;font-size:22px;letter-spacing:.2px;gap:0;color:#e2d8ba}
.credit-plastic-top .credit-brand-mark{display:none}
.credit-plastic-top>.credit-card-type{font-size:9px;color:#a9b1c2;max-width:38%}
.credit-plastic .credit-chip-row{margin:22px 0 0;gap:14px}
.credit-plastic .chip{width:39px;height:30px;opacity:.9}
.credit-plastic .credit-contactless{color:#b1b5bf;opacity:.65}
.credit-plastic .card-number{margin-top:auto;padding-top:38px;font-size:clamp(17px,4.8vw,23px);line-height:1.4;letter-spacing:2px;color:#e4e7ec;text-shadow:0 1px 5px #000;font-weight:400}
.credit-plastic .card-bottom{margin-top:12px;position:relative;z-index:1;color:#c6c8ce;font-size:10px;gap:10px}
.credit-plastic .card-bottom>strong{font-size:21px;font-style:italic;color:#e0d6b8;letter-spacing:.5px}
.credit-plastic .credit-card-state{font-size:8px;color:#c4baa1}
@media(max-width:360px){.credit-plastic.bank-card{padding:20px 18px 17px;min-height:225px}.credit-plastic-top>span:first-child{font-size:20px}.credit-plastic .credit-chip-row{margin-top:16px}.credit-plastic .card-number{font-size:17px;letter-spacing:1.3px;padding-top:29px}.credit-plastic .card-bottom{gap:7px;font-size:9px}}

/* Compact mobile sign-in with a dedicated photo header and large touch targets. */
.brand{letter-spacing:.5px}
@media(max-width:360px){.topbar .brand{font-size:16px;gap:7px}.topbar .brand img{width:27px;height:27px}}
.login-page{min-height:100dvh;background:linear-gradient(180deg,#0b17261a,#0b172633 35%,#0b172699 66%,#0b1726 100%) center top/100% min(177.7778vw,853.333px) no-repeat,url('./assets/login-julius-baer-v2.png') center top/100% auto no-repeat,#0b1726;padding-bottom:env(safe-area-inset-bottom)}
.login-art{height:clamp(260px,34svh,340px);padding:calc(20px + env(safe-area-inset-top)) 22px 0;background:transparent}
.login-art .brand{font-size:21px;gap:9px;letter-spacing:1px;text-shadow:0 2px 10px #0008;max-width:calc(100% - 55px)}
.login-art .brand img{width:32px;height:32px}
.login-art .login-language{top:calc(17px + env(safe-area-inset-top));right:17px;min-width:44px;min-height:44px;border:1px solid #d9bd8a40;border-radius:12px;background:#0b172680}
.login-copy{display:none}
.login-main{padding:0 22px 28px;position:relative;margin-top:-22px}
.login-box{width:100%;padding:25px 20px 18px;border:1px solid #40536b;border-radius:22px;background:linear-gradient(135deg,#192b40f5,#101f31fa);box-shadow:0 15px 36px #0003}
.login-box h2{font-size:25px;font-weight:600;line-height:1.4;letter-spacing:.4px;margin:0 0 7px}
.login-box .subtitle{font-size:12px;line-height:1.7;margin:0 0 23px;color:#a6b8ce}
.login-box .field{display:block;margin:0 0 18px;font-size:12px;line-height:1.6;color:#b7c6d9}
.login-box .field input{width:100%;min-width:0;min-height:54px;margin-top:8px;padding:14px 15px;font-size:16px;line-height:1.5;border-radius:12px;border:1px solid #3b526c;background:#0c192ab3;color:#f2f4f8;scroll-margin-block:25px}
.login-options{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:-3px}
.login-options .checkbox{font-size:11px;min-height:44px;display:flex;align-items:center;gap:8px;margin:0;line-height:1.5}
.login-options .checkbox input{width:18px;height:18px;flex-shrink:0;accent-color:#ddc08e}
.login-options .text-btn{display:flex;align-items:center;gap:5px;min-height:44px;padding:7px 0;font-size:11px;color:#d6bd91;line-height:1.5}
.login-options .text-btn .icon{width:17px;height:17px}
.login-box form>.btn{min-height:54px;border-radius:12px;font-size:15px;margin-top:14px;display:flex;justify-content:center;align-items:center;gap:12px}
.login-links{justify-content:center;margin-top:12px}
.login-links>.text-btn{font-size:12px;min-height:44px;padding:8px 18px}
.login-security{justify-content:center;text-align:center;line-height:1.7;gap:8px;font-size:10px;margin-top:15px;padding-top:17px;color:#91a6bf}
.login-security .icon{flex-shrink:0;width:16px;height:16px}
@media(max-width:360px){.login-main{padding-inline:16px}.login-art{padding-inline:19px}.login-box{padding:22px 16px 17px;border-radius:18px}.login-box h2{font-size:23px}.login-box .field{margin-bottom:15px}.login-options{column-gap:12px}}
@media(max-height:700px){.login-art{height:210px}.login-main{margin-top:-15px}.login-box{padding-top:20px}.login-box .subtitle{margin-bottom:18px}.login-security{margin-top:10px;padding-top:13px}}