/* Access, welcome and account details share the same quiet app rhythm. */
#pin-screen{
 --pin-key-width:72px;--pin-key-height:56px;--pin-keypad-width:288px;--pin-row-gap:10px;
 padding:calc(38px + env(safe-area-inset-top,0px)) max(24px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(24px,env(safe-area-inset-left,0px));
 background:#fff;color:#182a36;
}
#pin-screen[open]{justify-content:safe center}
#pin-screen .pin-shell{width:min(320px,100%)}
#pin-screen .pin-illustration{height:128px;margin:0 auto 20px}
#pin-screen .pin-original-brand{width:128px;height:128px;max-width:100%;animation:none!important;transform:none;transition:none!important}
#pin-screen .pin-content h2{padding:0;font:400 27px/1.2 'RHENAU Editorial',Georgia,serif;letter-spacing:-.02em;color:#182a36;animation:none!important}
#pin-screen #pin-form{margin:14px auto 0}
#pin-screen #pin-description{font-size:14px;line-height:1.5;color:#61717b;padding:0}
#pin-screen .pin-entry{margin:18px auto 0;padding:12px 6px;border-radius:6px}
#pin-screen .pin-digits{align-items:center;gap:10px}
#pin-screen .pin-digits>span{flex:0 0 22px;width:22px;height:3px;border:0;border-radius:2px;background:#d3dfe6;transform:none;transition:background 120ms ease}
#pin-screen .pin-digits [data-filled=true]{background:#173d51;border:0;transform:none}
#pin-screen .pin-entry[data-invalid=true] .pin-digits>span{background:#b56859}
#pin-screen .pin-forget{margin:4px auto 0;font-size:12px;min-height:44px}
#pin-screen .pin-keypad{grid-template-columns:repeat(3,var(--pin-key-width));justify-content:space-between;width:var(--pin-keypad-width);max-width:100%;margin:10px auto 0;column-gap:0;row-gap:var(--pin-row-gap)}
#pin-screen .pin-keypad button{box-sizing:border-box;width:var(--pin-key-width);min-width:44px;height:var(--pin-key-height);min-height:44px;border:1px solid #d4dfe6;border-radius:13px;background:#f7f9fa;font-size:22px;font-weight:400;font-variant-numeric:tabular-nums;padding:0;gap:0;line-height:1;color:#173d51;transition:background 110ms ease,border-color 110ms ease,transform 80ms ease}
#pin-screen .pin-keypad button small{display:none}
#pin-screen .pin-keypad button:hover:not(:disabled){background:#eef3f6;border-color:#bacbd5}
#pin-screen .pin-keypad button:active:not(:disabled){background:#e2ecf2;border-color:#9ab2c1;transform:scale(.98)}
#pin-screen .pin-keypad button:disabled{background:#fafbfc;border-color:#e3e9ed;color:#97a5ae}
#pin-screen[data-mode=login] .pin-alternatives{width:var(--pin-keypad-width);max-width:100%;margin:0 auto}
#pin-screen[data-mode=login] #pin-password{box-sizing:border-box;left:0;bottom:0;width:var(--pin-key-width);height:var(--pin-key-height);min-height:44px;border:1px solid #d4dfe6;border-radius:13px;background:#f7f9fa}
#pin-screen[data-mode=login] #pin-password:hover:not(:disabled){background:#eef3f6;border-color:#bacbd5}
#pin-screen[data-mode=login] #pin-password:active:not(:disabled){background:#e2ecf2;border-color:#9ab2c1;transform:scale(.98)}
#pin-screen[data-mode=login] #pin-password::before{width:20px;height:20px}
#pin-screen .pin-keypad button .icon{width:20px;height:20px}
#pin-screen .pin-footer{font-size:11px;margin-top:20px;color:#61717b}
#pin-screen[data-mode=choose] .pin-illustration,#pin-screen[data-mode=confirm] .pin-illustration,#pin-screen[data-mode=checking] .pin-illustration,#pin-screen[data-mode=reauth] .pin-illustration{height:120px}
#pin-screen[data-mode=choose] .pin-original-brand,#pin-screen[data-mode=confirm] .pin-original-brand,#pin-screen[data-mode=checking] .pin-original-brand,#pin-screen[data-mode=reauth] .pin-original-brand{width:120px;height:120px}
/* Static recorded balances never travel or flash when the gate opens. */
body.rhenau-ui[data-auth=ready][data-page=overview] :is(#view,.bank-home,.bank-account,.bank-home-activity){animation:none!important;transition:none;transform:none}
body.rhenau-ui[data-auth] .top-actions>.avatar,
body.rhenau-ui[data-auth] .profile .avatar,
body.rhenau-ui[data-auth] .settings-profile .avatar{display:flex!important;align-items:center;justify-content:center;padding:0;line-height:1;text-align:center;letter-spacing:0;flex-shrink:0}
body.rhenau-ui[data-auth] .top-actions>.avatar{min-width:44px;min-height:44px;width:44px;height:44px;margin:0;font-size:12px}
body.rhenau-ui[data-auth=ready][data-page=overview] #page-heading{min-width:0;display:block}
body.rhenau-ui[data-auth=ready][data-page=overview] #title{display:block;min-width:0;max-width:100%;white-space:nowrap;overflow-wrap:normal;word-break:normal;text-wrap:nowrap;padding-right:.5em}
.greeting-type{max-width:none;padding-right:.4em;white-space:nowrap}
.greeting-sizer,.greeting-line{white-space:nowrap}
.greeting-caret{display:inline-block;width:1.5px;height:.78em;margin-left:.12em;background:currentColor;vertical-align:-.02em;animation:greeting-caret-blink 1000ms steps(1,end) infinite}
.greeting-caret[hidden]{display:none}
@keyframes greeting-caret-blink{0%,52%{opacity:1}53%,100%{opacity:0}}
body.rhenau-ui[data-auth] :is(.portfolio-layout,.portfolio-main,.portfolio-aside,.investment-workspace,.investment-main,.account-workspace){min-width:0;max-width:100%}
body.rhenau-ui[data-auth] .account-recent .activity-list{padding:0 24px;width:100%;box-sizing:border-box}
body.rhenau-ui[data-auth] .activity-item{display:grid;grid-template-columns:36px minmax(0,1fr) auto 16px;width:100%;max-width:100%;min-width:0;box-sizing:border-box;text-align:left}
body.rhenau-ui[data-auth] .activity-description{min-width:0;overflow:hidden}
body.rhenau-ui[data-auth] .activity-description strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.rhenau-ui[data-auth] .activity-description small{display:flex;flex-wrap:wrap;gap:4px 7px;max-width:100%}
body.rhenau-ui[data-auth] .activity-description small>span{min-width:0;overflow-wrap:anywhere}
body.rhenau-ui[data-auth] .activity-amount{min-width:0;text-align:right;white-space:nowrap}
body.rhenau-ui[data-auth] .activity-amount b{display:block}
body.rhenau-ui[data-auth] .activity-chevron{display:flex;align-items:center;justify-content:center;min-width:0;width:16px}
body.rhenau-ui[data-auth] .activity-chevron .icon{width:16px;height:16px}
body.rhenau-ui[data-auth] .account-recent .card-head{align-items:center;flex-wrap:wrap}
body.rhenau-ui[data-auth] .account-recent .card-head h2{flex:1;min-width:160px}
body.rhenau-ui[data-auth] .account-help{display:flex;align-items:center;gap:18px;padding:26px 0 8px;border-top:1px solid var(--line);margin-top:28px;min-width:0}
body.rhenau-ui[data-auth] .account-help>.icon{width:26px;height:26px;color:#3d6174;flex:none}
body.rhenau-ui[data-auth] .account-help>div:first-of-type{flex:1;min-width:0}
body.rhenau-ui[data-auth] .account-help h2{font-size:17px;font-weight:500;line-height:1.4;margin:0 0 5px}
body.rhenau-ui[data-auth] .account-help p{font-size:13px;line-height:1.6;color:#61717b;margin:0;max-width:52ch}
body.rhenau-ui[data-auth] .account-help-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
@media(max-height:760px){
 #pin-screen{--pin-key-height:52px;--pin-row-gap:8px;padding-top:calc(38px + env(safe-area-inset-top,0px));padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
 #pin-screen .pin-illustration{height:120px;margin-bottom:16px}
 #pin-screen .pin-original-brand{width:120px;height:120px}
 #pin-screen .pin-content h2{font-size:25px}
 #pin-screen #pin-form{margin-top:16px}
 #pin-screen .pin-entry{margin-top:18px}
 #pin-screen .pin-forget{margin-top:6px}
 #pin-screen .pin-keypad{margin-top:8px}
}
@media(max-height:640px){
 #pin-screen{--pin-key-height:48px;--pin-row-gap:6px;padding-top:calc(38px + env(safe-area-inset-top,0px));padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
 #pin-screen .pin-illustration{height:104px;margin-bottom:12px}
 #pin-screen .pin-original-brand{width:104px;height:104px}
 #pin-screen #pin-form{margin-top:12px}
 #pin-screen .pin-entry{margin-top:12px;padding-top:10px;padding-bottom:10px}
 #pin-screen .pin-content h2{font-size:24px}
 #pin-screen .pin-footer{margin-top:14px}
}
@media(max-width:760px){
 body.rhenau-ui[data-auth] .account-recent .activity-list{padding:0 18px}
 body.rhenau-ui[data-auth] .activity-item{grid-template-columns:30px minmax(0,1fr) auto 12px;gap:10px}
 body.rhenau-ui[data-auth] .activity-icon{width:30px;height:30px}
 body.rhenau-ui[data-auth] .activity-amount b{font-size:12px}
 body.rhenau-ui[data-auth] .account-help{align-items:flex-start;flex-wrap:wrap;gap:13px;padding-top:23px}
 body.rhenau-ui[data-auth] .account-help-actions{padding-left:39px;width:100%}
}
@media(max-width:380px){
 body.rhenau-ui[data-auth] .activity-item{grid-template-columns:28px minmax(0,1fr) 12px;gap:6px 9px}
 body.rhenau-ui[data-auth] .activity-description{grid-column:2;grid-row:1}
 body.rhenau-ui[data-auth] .activity-amount{grid-column:2;grid-row:2;text-align:left}
 body.rhenau-ui[data-auth] .activity-chevron{grid-column:3;grid-row:1/3}
 body.rhenau-ui[data-auth] .activity-icon{grid-column:1;grid-row:1/3}
}
@media(orientation:landscape) and (max-height:500px) and (min-width:600px){
 #pin-screen{--pin-key-width:64px;--pin-key-height:44px;--pin-keypad-width:256px;--pin-row-gap:6px;justify-content:flex-start;padding-top:calc(42px + env(safe-area-inset-top,0px));padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
 #pin-screen .pin-shell{width:min(700px,100%)}
 #pin-screen .pin-content{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(280px,1.2fr);gap:0 32px}
 #pin-screen .pin-illustration{grid-column:1;grid-row:1;height:120px!important;margin:28px auto 0}
 #pin-screen .pin-original-brand{width:120px;height:120px!important}
 #pin-screen .pin-content h2{grid-column:1;grid-row:2;margin:0;align-self:start}
 #pin-screen #pin-form{grid-column:2;grid-row:1/3;margin:0}
 #pin-screen .pin-alternatives{grid-column:2;grid-row:2}
 #pin-screen .pin-footer{display:none}
}
@media(prefers-reduced-motion:reduce){.greeting-caret{animation:none;visibility:hidden}}

/* Animate the supplied artwork as a single mark; never redraw the ibex. */
@keyframes pin-brand-arrive{0%{opacity:.35;transform:translateY(4px) scale(.985)}100%{opacity:1;transform:translateY(0) scale(1)}}
#pin-screen[open] .pin-original-brand{animation:pin-brand-arrive 1000ms cubic-bezier(.22,1,.36,1) both!important}
body[data-auth=ready][data-access-phase=unlocking] #pin-screen .pin-original-brand{animation:none!important;transform:none}
@media(prefers-reduced-motion:reduce){#pin-screen[open] .pin-original-brand{animation:none!important;transform:none!important}}

body.rhenau-ui[data-auth] .transfer-bank-details{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;min-width:0}
body.rhenau-ui[data-auth] .transfer-bank-details label{margin:10px 0 0}
body.rhenau-ui[data-auth] .transfer-bank-details input{box-sizing:border-box;width:100%;min-width:0}
body.rhenau-ui[data-auth] #transfer-recipient-iban{font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* A receipt earns its motion only after the server has recorded the transfer. */
body.rhenau-ui[data-auth] .transfer-bank-details>label{display:block;font-size:13px;font-weight:500;line-height:1.5}
body.rhenau-ui[data-auth] .transfer-success-motion{display:flex;justify-content:center;margin:6px auto 20px;color:#276143}
body.rhenau-ui[data-auth] .transfer-success-mark{width:64px;height:64px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
body.rhenau-ui[data-auth] .transfer-success-mark circle{stroke:#d5e5dc;fill:#edf4ef;stroke-dasharray:170;stroke-dashoffset:0}
body.rhenau-ui[data-auth] .transfer-success-mark path{stroke-dasharray:1;stroke-dashoffset:0}
body.rhenau-ui[data-auth] .transfer-sent-amount{display:block;text-align:center;margin:0 0 14px;color:#173d51;font:400 32px/1.25 var(--font);font-variant-numeric:tabular-nums;letter-spacing:-.025em}
@keyframes transfer-receipt-arrive{from{opacity:.2;transform:translateY(6px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes transfer-ring-draw{to{stroke-dashoffset:0}}
@keyframes transfer-check-draw{to{stroke-dashoffset:0}}
@keyframes transfer-amount-out{0%{opacity:0;transform:translateY(14px)}35%{opacity:1;transform:translateY(-4px)}100%{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){body.rhenau-ui[data-auth] :is(.transfer-success-motion,.transfer-success-mark circle,.transfer-success-mark path,.transfer-sent-amount){animation:none;transform:none;opacity:1;stroke-dashoffset:0}}

body.rhenau-ui[data-auth] .transfer-success :is(h2,p){animation:none}
body.rhenau-ui[data-auth] .transfer-receipt-new .transfer-success-motion{animation:transfer-receipt-arrive 420ms cubic-bezier(.22,1,.36,1) both}
body.rhenau-ui[data-auth] .transfer-receipt-new .transfer-success-mark circle{stroke-dashoffset:170;animation:transfer-ring-draw 600ms ease-out forwards}
body.rhenau-ui[data-auth] .transfer-receipt-new .transfer-success-mark path{stroke-dashoffset:1;animation:transfer-check-draw 340ms 250ms cubic-bezier(.22,1,.36,1) forwards}
body.rhenau-ui[data-auth] .transfer-receipt-new .transfer-sent-amount{animation:transfer-amount-out 800ms cubic-bezier(.22,1,.36,1) both}
@media(prefers-reduced-motion:reduce){body.rhenau-ui[data-auth] .transfer-receipt-new :is(.transfer-success-motion,.transfer-success-mark circle,.transfer-success-mark path,.transfer-sent-amount){animation:none;transform:none;opacity:1;stroke-dashoffset:0}}
