/* Tarazia v0.5.2 — light-only UI, project-supplied local bank artwork and repaired landing navigation. */
:root{
    --theme-surface:#fff;
    --theme-surface-2:#f6f9fd;
    --theme-line:#dfe7f1;
    --theme-text:#162033;
    --theme-muted:#6f7f95;
    --theme-shadow:0 16px 42px rgba(20,46,86,.10);
    --theme-bg:#f5f7fb;
    --theme-card:#fff;
    --theme-card-soft:#f7faff;
    --theme-text-strong:#14213a;
    --theme-text-muted:#687a93;
    --theme-border:#dce6f1;
    color-scheme:light;
}
html,body{width:100%;max-width:100%;overflow-x:hidden!important;color-scheme:light!important}
body,.app-shell,.page-shell,.page-content,.marketing-main,main,section,.container{min-width:0;max-width:100%}
img,svg,video,canvas{max-width:100%}
input,select,textarea{min-width:0;max-width:100%}
.table-wrap{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
.landing-header-tools,.topbar-actions{display:flex;align-items:center;gap:9px}

/* Reliable landing layout and reveal state. */
html.js .page-content [data-reveal]{opacity:1;transform:none}
.hero-v2{position:relative}
.hero-v2-copy{position:relative;z-index:6}
.hero-product-stage{position:relative;z-index:2;isolation:isolate}
.stage-glow{z-index:0;pointer-events:none}
.dashboard-showcase{z-index:2;backface-visibility:hidden}
.floating-chip{z-index:5;backface-visibility:hidden}

/* Desktop landing header: three equal tracks keep the menu exactly in the visual center. */
.landing-header{position:relative;direction:rtl;display:grid!important;grid-template-columns:minmax(190px,1fr) auto minmax(190px,1fr);align-items:center;gap:18px;min-height:88px}
.landing-header>.brand{grid-column:3;justify-self:end;position:relative;z-index:3;display:flex;align-items:center;min-width:0;margin:0!important}
.landing-nav{grid-column:2;justify-self:center;position:static!important;z-index:2;transform:none!important;direction:rtl;display:flex;align-items:center;justify-content:center;gap:24px;min-width:max-content;margin:0!important;padding:0!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important}
.landing-nav>a:not(.btn){white-space:nowrap}
.landing-header-actions{grid-column:1;justify-self:start;position:relative;z-index:3;display:flex;align-items:center;gap:10px;white-space:nowrap}
.landing-header-actions .btn,.landing-header-actions>a{white-space:nowrap}
.landing-header-tools{display:none!important}
.landing-nav-mobile-actions{display:none}

/* Bank artwork: project-supplied local PNGs. Identified banks render as artwork only — no repeated visible bank name. */
.account-card-top{position:relative;display:flex;align-items:center;justify-content:center;min-height:112px;margin-bottom:4px}
.account-bank-brand{display:flex;align-items:center;justify-content:center;width:100%;min-width:0;text-align:center}
.bank-logo{display:flex;align-items:center;justify-content:center;flex:0 0 auto;overflow:visible;padding:0;background:transparent;border:0;box-shadow:none}
.bank-logo-medium{width:104px;height:72px}.bank-logo-large{width:138px;height:96px}
.bank-logo-image{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;object-position:center;margin:auto;transform:none;filter:drop-shadow(0 6px 10px rgba(20,55,95,.10))}
.bank-logo:not([data-bank-slug]){width:64px;height:64px;padding:7px;border:1px solid #e2eaf3;border-radius:20px;background:linear-gradient(145deg,#fff,#f7faff);box-shadow:0 10px 24px rgba(20,55,95,.08);overflow:hidden}
.bank-logo-fallback,.bank-preview-fallback{display:grid;place-items:center;width:100%;height:100%;border-radius:inherit;color:#2456a6;background:#eaf2ff;font-size:10px;font-weight:900}
.account-status-badge{position:absolute;inset-inline-start:0;top:0;align-self:flex-start;border:1px solid transparent;font-size:11px}.enhanced-account-card .badge-success{background:#ddf8ea;color:#087849;border-color:#9fdfbf}.enhanced-account-card .badge-muted{background:#eef1f5;color:#66758a;border-color:#d8dee8}
.account-balance{display:block;margin:8px 0 14px;font-size:23px}.enhanced-bank-fields{position:relative}.enhanced-bank-fields>label:first-of-type{margin-top:2px}
.bank-live-preview{display:flex;align-items:center;gap:12px;padding:12px;border:1px dashed #cbd8e7;border-radius:17px;background:#f7faff;transition:border-color .2s ease,background .2s ease,box-shadow .2s ease}.bank-live-preview small,.bank-live-preview strong,.bank-live-preview em{display:block}.bank-live-preview small{font-size:10px;color:var(--muted)}.bank-live-preview strong{font-size:12px}.bank-live-preview em{margin-top:2px;color:var(--theme-text-muted);font-size:10px;font-style:normal;font-weight:400}.bank-preview-copy[hidden]{display:none!important}
.bank-live-preview.identified{justify-content:center;min-height:132px;border-style:solid;border-color:#c7dfd3;background:linear-gradient(145deg,#fff,#f6fbf8);box-shadow:inset 0 0 0 1px rgba(255,255,255,.8)}
.bank-preview-logo-wrap{display:grid;place-items:center;flex:0 0 62px;width:62px;height:62px;border:1px solid #dbe5ef;border-radius:18px;background:#fff;box-shadow:0 8px 22px rgba(20,55,95,.08);overflow:hidden;padding:5px}.bank-live-preview.identified .bank-preview-logo-wrap{flex-basis:150px;width:150px;height:104px;border:0;border-radius:0;padding:0;background:transparent;box-shadow:none;overflow:visible}
.bank-preview-logo{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;object-position:center;margin:auto;transform:none;filter:drop-shadow(0 7px 11px rgba(20,55,95,.10))}.bank-preview-fallback{font-size:9px}
.account-edit-details>summary{padding-block:9px}.bank-detail-row{min-width:0}.bank-number{overflow-wrap:anywhere;word-break:break-word}.copy-button{flex:0 0 auto}

/* Profile, subscription and error-page stability. */
.profile-settings-grid,.profile-settings-card,.profile-form{min-width:0}.profile-center-wrap,.profile-settings-grid,.profile-settings-card,.payment-history-panel,.current-plan,.subscription-picker{opacity:1!important;visibility:visible!important;transform:none!important}.profile-settings-card{background:#fff}.profile-identity-copy p{overflow-wrap:anywhere}.password-requirements{display:flex;flex-wrap:wrap;gap:7px}.password-requirements span{padding:5px 8px;border-radius:9px;background:#f2f6fb;color:#52647c;font-size:10px}
.btn-outline-readable{display:inline-flex;align-items:center;justify-content:center;border:1px solid #c8d7e9;border-radius:11px;padding:10px 17px;background:#fff;color:#193c69;font-weight:800}.current-plan-actions .btn-light{background:#e8f2ff;color:#123e77}.payment-history-panel .panel-head{flex-wrap:wrap}
.error-body{min-height:100vh;background:radial-gradient(circle at 80% 0,#dbeaff,transparent 34%),var(--bg)}.error-page{min-height:100vh;display:grid;place-items:center;padding:24px}.error-card{width:min(520px,100%);padding:34px;text-align:center;border:1px solid var(--theme-line);border-radius:25px;background:#fff;box-shadow:var(--theme-shadow)}.error-card>img{width:62px;height:62px;object-fit:contain}.error-code{display:block;margin-top:12px;color:var(--primary);font-size:13px;font-weight:900}.error-card h1{margin:6px 0}.error-card p{color:var(--theme-muted)}.error-actions{display:flex;justify-content:center;gap:9px;margin-top:22px}

@media(max-width:1180px){.landing-header{grid-template-columns:minmax(155px,1fr) auto minmax(155px,1fr)}.landing-nav{gap:15px}.landing-header-actions{gap:7px}.landing-header-actions .btn{padding-inline:13px}}
@media(max-width:1100px){.accounts-page-layout{grid-template-columns:minmax(0,1fr)!important}.sticky-panel{position:static!important}.accounts-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:980px){
 .landing-header{position:relative;direction:rtl;display:flex!important;grid-template-columns:none!important;width:calc(100% - 24px)!important;max-width:calc(100vw - 24px)!important;height:72px;min-height:72px;margin-inline:auto;padding-inline:0;gap:8px;align-items:center;justify-content:space-between}.landing-header>.brand{order:1;min-width:0;margin-inline-end:0!important}.landing-header-actions{display:none!important}.landing-header-tools{display:flex!important;order:2;margin:0!important;margin-inline-start:auto!important}.landing-menu-toggle{display:grid!important;place-items:center;width:42px;height:42px;padding:0!important}
 .landing-nav{position:absolute!important;top:calc(100% + 8px)!important;left:auto!important;right:auto!important;inset-inline:0!important;transform:none!important;z-index:120;display:none!important;flex-direction:column!important;width:100%!important;max-width:100%!important;min-width:0!important;margin-inline:auto!important;padding:12px!important;gap:6px!important;border:1px solid var(--theme-border)!important;border-radius:18px!important;background:rgba(255,255,255,.99)!important;box-shadow:0 22px 55px rgba(20,52,99,.18)!important;backdrop-filter:blur(18px)!important;transform:none!important}.landing-nav.open{display:flex!important}.landing-nav>a{width:100%;min-height:43px;display:flex;align-items:center;justify-content:center;text-align:center;border-radius:11px}.landing-nav>a:not(.btn){padding:8px 10px}.landing-nav-mobile-actions{display:grid!important;grid-template-columns:1fr;gap:7px;width:100%;padding-top:7px;margin-top:4px;border-top:1px solid var(--theme-border)}.landing-nav-mobile-actions>*{width:100%;min-height:43px;display:flex;align-items:center;justify-content:center;text-align:center}
}
@media(max-width:820px){
 html,body{position:relative;width:100%;max-width:100vw;overflow-x:hidden!important}.container{width:calc(100% - 24px);max-width:100%}
 .landing-header{position:relative;direction:rtl;display:flex!important;grid-template-columns:none!important;width:calc(100% - 24px)!important;max-width:calc(100vw - 24px)!important;height:72px;min-height:72px;margin-inline:auto;padding-inline:0;gap:8px;align-items:center;justify-content:space-between}.landing-header>.brand{order:1;min-width:0;margin-inline-end:0!important}.landing-header-actions{display:none!important}.landing-header-tools{display:flex!important;order:2;margin:0!important;margin-inline-start:auto!important}.landing-menu-toggle{display:grid!important;place-items:center;width:42px;height:42px;padding:0!important}
 .landing-nav{position:absolute!important;top:calc(100% + 8px)!important;inset-inline:0!important;z-index:120;display:none!important;flex-direction:column!important;width:100%!important;max-width:100%!important;margin-inline:auto!important;padding:12px!important;gap:6px!important;border:1px solid var(--theme-border)!important;border-radius:18px!important;background:rgba(255,255,255,.99)!important;box-shadow:0 22px 55px rgba(20,52,99,.18)!important;backdrop-filter:blur(18px)!important;transform:none!important}.landing-nav.open{display:flex!important}.landing-nav>a{width:100%;min-height:43px;display:flex;align-items:center;justify-content:center;text-align:center;border-radius:11px}.landing-nav>a:not(.btn){padding:8px 10px}.landing-nav-mobile-actions{display:grid!important;grid-template-columns:1fr;gap:7px;width:100%;padding-top:7px;margin-top:4px;border-top:1px solid var(--theme-border)}.landing-nav-mobile-actions>*{width:100%;min-height:43px;display:flex;align-items:center;justify-content:center;text-align:center}
 .hero-v2{display:flex!important;flex-direction:column;gap:18px;width:calc(100% - 24px)!important;max-width:calc(100vw - 24px)!important;margin-inline:auto;padding-top:28px;overflow:visible}.hero-v2-copy,.hero-product-stage{width:100%;max-width:100%;min-width:0}.hero-v2-copy{text-align:center}.hero-v2 .hero-actions,.hero-trust-v2{justify-content:center}.hero-product-stage{min-height:420px;overflow:hidden!important}.dashboard-showcase{inset:24px 0 12px!important;left:0!important;right:0!important;width:100%!important;max-width:100%!important;transform:none!important}.floating-chip{display:none!important}
 .section-block,.workflow-section,.faq-preview,.final-cta{width:calc(100% - 24px)!important;max-width:calc(100vw - 24px)!important;margin-inline:auto}.dark-section .workflow-section{width:calc(100% - 24px)!important}.hero-product-stage,.showcase-body,.showcase-main,.service-bento,.marketing-pricing-grid,.faq-list{min-width:0;max-width:100%}[data-reveal="left"],[data-reveal="right"],[data-tilt]{transform:none!important}.ambient-orb{max-width:80vw}
 .app-shell{display:block;width:100%}.page-shell{width:100%;max-width:100%;overflow-x:hidden}.topbar{height:auto;min-height:76px;padding:10px 13px;gap:9px}.topbar>div:nth-child(2){min-width:0}.topbar h1{font-size:17px}.topbar p{max-width:46vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.topbar-actions{margin-inline-start:auto}.user-chip>div{display:none}.page-content{width:100%;max-width:100%;padding:18px 13px 48px}.page-content>*,.panel,.account-card,.profile-center-wrap,.profile-settings-grid,.profile-settings-card{max-width:100%;min-width:0}.split-layout,.content-grid,.profile-settings-grid,.form-grid,.transaction-form{grid-template-columns:minmax(0,1fr)!important}.accounts-cards{grid-template-columns:minmax(0,1fr)!important}.account-create-panel{order:1}.accounts-list-section{order:2}.bank-detail-row{grid-template-columns:82px minmax(0,1fr) auto!important;max-width:100%;overflow:hidden}.bank-number{min-width:0;font-size:11px;overflow-wrap:anywhere;word-break:break-all}.current-plan-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}.current-plan-actions a{width:100%}.pricing-grid,.tier-pricing-grid{grid-template-columns:minmax(0,1fr)!important}.duration-filter{max-width:100%;overflow-x:auto}.profile-identity-card{flex-direction:column}.profile-form{grid-template-columns:minmax(0,1fr)!important}.profile-full-field,.profile-form-actions{grid-column:auto!important}
}
@media(max-width:560px){.hero-v2{padding-top:24px!important}.hero-v2 h1{font-size:34px!important;line-height:1.28!important;letter-spacing:-1px}.hero-v2-copy>p{font-size:14px!important}.hero-product-stage{min-height:325px!important}.dashboard-showcase{inset:8px 0 0!important;border-radius:18px}.showcase-header{height:42px;padding-inline:11px}.showcase-body{height:calc(100% - 42px);grid-template-columns:40px minmax(0,1fr)!important}.showcase-main{padding:9px!important}.showcase-stats{grid-template-columns:1fr 1fr!important}.showcase-stats article{padding:9px!important}.showcase-chart{height:105px!important;padding:8px!important}.logo-strip{padding:17px!important}.marketing-plan-card{padding:22px!important}.faq-item summary{gap:8px;font-size:13px}.final-cta{padding:25px 18px!important}.account-card{padding:15px}.account-bank-brand strong{max-width:135px}.bank-detail-row{display:grid!important;grid-template-columns:1fr auto!important}.bank-detail-label{grid-column:1/-1}.bank-number{white-space:normal}.current-plan-actions{grid-template-columns:1fr}.error-actions{flex-direction:column}.error-actions>*{width:100%}.bank-live-preview{align-items:center}.bank-preview-logo-wrap{width:58px;height:58px;flex-basis:58px}.bank-live-preview.identified .bank-preview-logo-wrap{width:82px;height:82px;flex-basis:82px}}

/* Tarazia v0.5.3 corrective pass — compact local bank marks + single-source landing actions. */
@media (min-width:981px){
  .landing-header{width:min(1180px,calc(100% - 40px))!important;max-width:1180px!important;margin-inline:auto!important;grid-template-columns:minmax(210px,1fr) auto minmax(210px,1fr)!important;column-gap:28px!important;padding-inline:0!important}
  .landing-header>.brand{grid-column:3!important;justify-self:end!important}
  .landing-header>.landing-nav{grid-column:2!important;justify-self:center!important;display:flex!important;gap:25px!important}
  .landing-header>.landing-header-actions{grid-column:1!important;justify-self:start!important;display:flex!important;align-items:center!important;gap:9px!important}
  .landing-nav>.landing-header-actions{display:none!important}
  .landing-header-tools{display:none!important}
}

/* Account-card bank mark: a compact centered mark, never a giant wordmark. */
.account-card-top{position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;min-height:96px!important;margin:0 0 8px!important;padding:2px 54px 0!important;overflow:visible!important}
.account-bank-brand{display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;min-width:0!important;margin:0 auto!important}
.account-bank-brand .bank-logo-large,.bank-logo-large[data-bank-slug]{width:84px!important;height:84px!important;min-width:84px!important;min-height:84px!important;padding:9px!important;border:1px solid #e1e9f3!important;border-radius:22px!important;background:#fff!important;box-shadow:0 10px 28px rgba(20,55,95,.10)!important;overflow:hidden!important}
.account-bank-brand .bank-logo-image,.bank-logo-large .bank-logo-image{display:block!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;object-position:center!important;margin:auto!important;filter:none!important;transform:none!important}
.account-status-badge{position:absolute!important;top:5px!important;left:0!important;right:auto!important;inset-inline:auto!important;transform:none!important;margin:0!important;z-index:2!important;white-space:nowrap!important}
.enhanced-account-card>h3{margin-top:1px!important;text-align:center!important}
.enhanced-account-card>small{display:block!important;text-align:center!important}
.enhanced-account-card .account-balance{text-align:center!important}

/* Detected-bank preview uses the same normalized local mark and stays visually contained. */
.bank-live-preview.identified{display:flex!important;align-items:center!important;justify-content:center!important;min-height:120px!important;padding:13px!important}
.bank-live-preview.identified .bank-preview-logo-wrap{display:grid!important;place-items:center!important;flex:0 0 94px!important;width:94px!important;height:94px!important;padding:10px!important;border:1px solid #dfe8f2!important;border-radius:24px!important;background:#fff!important;box-shadow:0 10px 26px rgba(20,55,95,.09)!important;overflow:hidden!important}
.bank-live-preview.identified .bank-preview-logo{display:block!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;object-position:center!important;margin:auto!important;filter:none!important;transform:none!important}
.bank-live-preview.identified .bank-preview-copy{display:none!important}

@media (max-width:980px){
  .landing-header{width:calc(100% - 24px)!important;max-width:calc(100vw - 24px)!important}
  .landing-header>.landing-header-actions{display:none!important}
  .landing-nav>.landing-header-actions{display:grid!important;grid-template-columns:1fr!important;gap:7px!important;width:100%!important;margin:6px 0 0!important;padding:9px 0 0!important;border-top:1px solid var(--theme-border)!important}
  .landing-nav>.landing-header-actions>*{display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;min-height:43px!important;margin:0!important;text-align:center!important}
  .landing-nav>.landing-header-actions [data-pwa-install][hidden]{display:none!important}
}

@media (max-width:560px){
  .account-card-top{min-height:84px!important;padding-inline:48px!important}
  .account-bank-brand .bank-logo-large,.bank-logo-large[data-bank-slug]{width:74px!important;height:74px!important;min-width:74px!important;min-height:74px!important;padding:8px!important;border-radius:20px!important}
  .account-status-badge{top:4px!important;font-size:10px!important}
  .bank-live-preview.identified{min-height:106px!important}
  .bank-live-preview.identified .bank-preview-logo-wrap{flex-basis:82px!important;width:82px!important;height:82px!important;padding:8px!important;border-radius:21px!important}
}


/* Tarazia v0.5.4 — final header and bank-logo geometry.
   This block intentionally owns these layouts so older hotfix rules cannot move them again. */

/* Desktop landing header: physical left/center/right are fixed using LTR grid tracks;
   each child keeps RTL text flow. */
@media (min-width:981px){
  .landing-header{
    direction:ltr!important;
    display:grid!important;
    grid-template-columns:minmax(220px,1fr) auto minmax(220px,1fr)!important;
    grid-template-rows:88px!important;
    align-items:center!important;
    width:min(1180px,calc(100% - 40px))!important;
    max-width:1180px!important;
    min-height:88px!important;
    height:88px!important;
    margin-inline:auto!important;
    padding:0!important;
    column-gap:28px!important;
  }
  .landing-header>.brand{
    direction:rtl!important;
    grid-column:3!important;
    grid-row:1!important;
    justify-self:end!important;
    align-self:center!important;
    margin:0!important;
    min-width:0!important;
  }
  .landing-header>.landing-nav{
    direction:rtl!important;
    grid-column:2!important;
    grid-row:1!important;
    justify-self:center!important;
    align-self:center!important;
    display:flex!important;
    position:static!important;
    inset:auto!important;
    transform:none!important;
    width:auto!important;
    min-width:max-content!important;
    margin:0!important;
    padding:0!important;
    gap:26px!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
  }
  .landing-header>.landing-header-actions{
    direction:rtl!important;
    grid-column:1!important;
    grid-row:1!important;
    justify-self:start!important;
    align-self:center!important;
    display:flex!important;
    align-items:center!important;
    gap:9px!important;
    margin:0!important;
    white-space:nowrap!important;
  }
  .landing-header>.landing-header-tools{display:none!important}
}

/* Mobile/tablet: brand is always on the right, menu button always on the left. */
@media (max-width:980px){
  .landing-header{
    direction:ltr!important;
    display:grid!important;
    grid-template-columns:auto 1fr auto!important;
    grid-template-rows:72px!important;
    align-items:center!important;
    width:calc(100% - 24px)!important;
    max-width:calc(100vw - 24px)!important;
    min-height:72px!important;
    height:72px!important;
    margin-inline:auto!important;
    padding:0!important;
    gap:10px!important;
  }
  .landing-header>.brand{
    direction:rtl!important;
    grid-column:3!important;
    grid-row:1!important;
    justify-self:end!important;
    order:unset!important;
    margin:0!important;
  }
  .landing-header>.landing-header-tools{
    grid-column:1!important;
    grid-row:1!important;
    justify-self:start!important;
    display:flex!important;
    order:unset!important;
    margin:0!important;
  }
  .landing-header>.landing-header-actions{display:none!important}
  .landing-header>.landing-nav{
    direction:rtl!important;
    position:absolute!important;
    top:calc(100% + 8px)!important;
    left:0!important;
    right:0!important;
    inset-inline:0!important;
    z-index:120!important;
    display:none!important;
    flex-direction:column!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:12px!important;
    gap:6px!important;
    border:1px solid var(--theme-border)!important;
    border-radius:18px!important;
    background:rgba(255,255,255,.99)!important;
    box-shadow:0 22px 55px rgba(20,52,99,.18)!important;
    backdrop-filter:blur(18px)!important;
    transform:none!important;
  }
  .landing-header>.landing-nav.open{display:flex!important}
  .landing-nav>.landing-header-actions{
    direction:rtl!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
    width:100%!important;
    margin:6px 0 0!important;
    padding:9px 0 0!important;
    border-top:1px solid var(--theme-border)!important;
  }
  .landing-nav>.landing-header-actions>*{
    width:100%!important;
    min-height:43px!important;
    margin:0!important;
    justify-content:center!important;
  }
}

/* Accounts page: keep the form/cards group balanced instead of drifting across the full canvas. */
.accounts-page-layout{
  width:min(1120px,100%)!important;
  margin-inline:auto!important;
  align-items:start!important;
}
.accounts-list-section{min-width:0!important}
.accounts-cards{align-items:start!important}

/* Bank symbol area. Fresh v054 image paths prevent browser/PWA from reusing the old wordmarks. */
.account-card-top{
  position:relative!important;
  display:grid!important;
  place-items:center!important;
  width:100%!important;
  min-width:100%!important;
  min-height:126px!important;
  margin:0 0 8px!important;
  padding:4px 54px 8px!important;
  overflow:visible!important;
}
.account-bank-brand{
  display:grid!important;
  place-items:center!important;
  width:100%!important;
  min-width:0!important;
  min-height:108px!important;
  margin:0!important;
  text-align:center!important;
}
.account-bank-brand .bank-logo-large,
.bank-logo-large[data-bank-slug]{
  display:grid!important;
  place-items:center!important;
  width:108px!important;
  height:108px!important;
  min-width:108px!important;
  min-height:108px!important;
  max-width:108px!important;
  max-height:108px!important;
  padding:0!important;
  margin:0 auto!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.account-bank-brand .bank-logo-image,
.bank-logo-large .bank-logo-image{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:auto!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  filter:drop-shadow(0 8px 12px rgba(20,55,95,.12))!important;
  transform:none!important;
}
.account-status-badge{
  position:absolute!important;
  top:4px!important;
  right:0!important;
  left:auto!important;
  inset-inline:auto!important;
  z-index:3!important;
  margin:0!important;
  transform:none!important;
  white-space:nowrap!important;
}
.enhanced-account-card>h3{margin:2px 0 0!important;text-align:center!important}
.enhanced-account-card>small{display:block!important;text-align:center!important}
.enhanced-account-card .account-balance{text-align:center!important}

/* Detected bank: show only one crisp symbol, centered, no bank name/caption. */
.bank-live-preview.identified{
  display:grid!important;
  place-items:center!important;
  min-height:140px!important;
  padding:14px!important;
  border-style:solid!important;
  overflow:hidden!important;
}
.bank-live-preview.identified .bank-preview-logo-wrap{
  display:grid!important;
  place-items:center!important;
  width:112px!important;
  height:112px!important;
  min-width:112px!important;
  min-height:112px!important;
  flex:0 0 112px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.bank-live-preview.identified .bank-preview-logo{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:auto!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  filter:drop-shadow(0 8px 12px rgba(20,55,95,.12))!important;
  transform:none!important;
}
.bank-live-preview.identified .bank-preview-copy,
.bank-live-preview.identified .bank-preview-fallback{display:none!important}

@media (max-width:560px){
  .account-card-top{min-height:110px!important;padding-inline:46px!important}
  .account-bank-brand{min-height:94px!important}
  .account-bank-brand .bank-logo-large,
  .bank-logo-large[data-bank-slug]{width:94px!important;height:94px!important;min-width:94px!important;min-height:94px!important;max-width:94px!important;max-height:94px!important}
  .bank-live-preview.identified{min-height:124px!important}
  .bank-live-preview.identified .bank-preview-logo-wrap{width:96px!important;height:96px!important;min-width:96px!important;min-height:96px!important;flex-basis:96px!important}
}

/* Tarazia v0.5.5 — accounts layout/readability pass.
   Keep the create form physically on the right and give bank identifiers enough room. */
@media (min-width:1180px){
  .accounts-page-layout{
    direction:ltr!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(360px,400px)!important;
    grid-template-areas:"accounts-list account-form"!important;
    gap:26px!important;
    align-items:start!important;
    width:min(1180px,100%)!important;
    max-width:1180px!important;
    margin-inline:auto!important;
  }
  .accounts-page-layout>.account-create-panel{
    direction:rtl!important;
    grid-area:account-form!important;
    order:unset!important;
    width:100%!important;
    max-width:400px!important;
    justify-self:end!important;
    position:sticky!important;
    top:18px!important;
  }
  .accounts-page-layout>.accounts-list-section{
    direction:rtl!important;
    grid-area:accounts-list!important;
    order:unset!important;
    min-width:0!important;
    width:100%!important;
  }
  .accounts-page-layout .accounts-cards{
    display:grid!important;
    grid-template-columns:repeat(auto-fit,minmax(360px,1fr))!important;
    gap:20px!important;
    width:100%!important;
    min-width:0!important;
    align-items:start!important;
  }
}

/* Account cards: bank/card/account/IBAN values stay readable instead of collapsing to ellipses. */
.accounts-cards .enhanced-account-card{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  padding:18px!important;
}
.enhanced-account-card .bank-details-card{
  display:grid!important;
  gap:7px!important;
  width:100%!important;
  min-width:0!important;
  margin-top:10px!important;
  padding:11px!important;
  border:1px solid #dbe6f2!important;
  border-radius:14px!important;
  background:#f8fbff!important;
}
.enhanced-account-card .bank-detail-row{
  display:grid!important;
  grid-template-columns:82px minmax(0,1fr) 42px!important;
  align-items:center!important;
  gap:8px!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  overflow:visible!important;
}
.enhanced-account-card .bank-detail-label{
  color:#6d7d92!important;
  font-size:10px!important;
  font-weight:700!important;
  white-space:nowrap!important;
}
.enhanced-account-card .bank-number{
  display:block!important;
  min-width:0!important;
  max-width:none!important;
  overflow:visible!important;
  text-overflow:clip!important;
  white-space:nowrap!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  direction:ltr!important;
  unicode-bidi:isolate!important;
  text-align:left!important;
  color:#173963!important;
  font-size:12px!important;
  font-weight:800!important;
  line-height:1.7!important;
  letter-spacing:.05px!important;
  font-variant-numeric:tabular-nums!important;
}
.enhanced-account-card .bank-detail-wide .bank-number{
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  font-size:11px!important;
  line-height:1.8!important;
}
.enhanced-account-card .copy-button{
  width:42px!important;
  min-width:42px!important;
  padding-inline:0!important;
  text-align:center!important;
}

@media (max-width:1179px){
  .accounts-page-layout{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:18px!important;
  }
  .accounts-page-layout>.account-create-panel{
    direction:rtl!important;
    order:1!important;
    width:100%!important;
    max-width:620px!important;
    justify-self:center!important;
    position:static!important;
  }
  .accounts-page-layout>.accounts-list-section{
    direction:rtl!important;
    order:2!important;
    width:100%!important;
  }
  .accounts-page-layout .accounts-cards{
    display:grid!important;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))!important;
    gap:16px!important;
  }
}

@media (max-width:560px){
  .accounts-cards .enhanced-account-card{padding:14px!important}
  .enhanced-account-card .bank-details-card{padding:10px!important}
  .enhanced-account-card .bank-detail-row{
    grid-template-columns:1fr 42px!important;
    gap:5px 8px!important;
  }
  .enhanced-account-card .bank-detail-label{
    grid-column:1/-1!important;
    font-size:10px!important;
  }
  .enhanced-account-card .bank-number{
    grid-column:1!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    font-size:11px!important;
  }
  .enhanced-account-card .copy-button{grid-column:2!important;grid-row:2!important}
}

/* Tarazia v0.5.6 — final accounts geometry and optimized bank marks. */

/* Use the whole content canvas on wide screens: form hugs the physical right edge,
   accounts use the remaining width and fit three cards per row. */
@media (min-width:1280px){
  .page-content{width:100%!important;max-width:none!important;padding-inline:22px!important}
  .accounts-page-layout{
    direction:ltr!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 330px!important;
    grid-template-areas:"accounts-list account-form"!important;
    gap:18px!important;
    align-items:start!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
  }
  .accounts-page-layout>.account-create-panel{
    direction:rtl!important;
    grid-area:account-form!important;
    order:unset!important;
    width:330px!important;
    max-width:330px!important;
    min-width:330px!important;
    justify-self:end!important;
    margin:0!important;
    position:sticky!important;
    top:18px!important;
  }
  .accounts-page-layout>.accounts-list-section{
    direction:rtl!important;
    grid-area:accounts-list!important;
    order:unset!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
  }
  .accounts-page-layout .accounts-cards{
    direction:rtl!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:16px!important;
    width:100%!important;
    min-width:0!important;
    align-items:start!important;
  }
}

/* Medium desktop: keep the form on the right and use two account columns. */
@media (min-width:1000px) and (max-width:1279px){
  .page-content{width:100%!important;max-width:none!important;padding-inline:18px!important}
  .accounts-page-layout{
    direction:ltr!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 310px!important;
    grid-template-areas:"accounts-list account-form"!important;
    gap:16px!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
  }
  .accounts-page-layout>.account-create-panel{
    direction:rtl!important;
    grid-area:account-form!important;
    order:unset!important;
    width:310px!important;
    max-width:310px!important;
    min-width:310px!important;
    justify-self:end!important;
    position:static!important;
    margin:0!important;
  }
  .accounts-page-layout>.accounts-list-section{
    direction:rtl!important;
    grid-area:accounts-list!important;
    order:unset!important;
    width:100%!important;
    min-width:0!important;
  }
  .accounts-page-layout .accounts-cards{
    direction:rtl!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:14px!important;
  }
}

/* Tablets and phones stack cleanly; form comes first. */
@media (max-width:999px){
  .accounts-page-layout{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;
    max-width:none!important;
    gap:16px!important;
  }
  .accounts-page-layout>.account-create-panel{
    direction:rtl!important;
    order:1!important;
    width:100%!important;
    max-width:620px!important;
    min-width:0!important;
    justify-self:center!important;
    position:static!important;
  }
  .accounts-page-layout>.accounts-list-section{direction:rtl!important;order:2!important;width:100%!important;min-width:0!important}
  .accounts-page-layout .accounts-cards{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))!important;gap:14px!important}
}

/* Compact, consistent bank symbol geometry. The PNGs already have normalized safe areas;
   CSS does not stretch them beyond their intended visual size. */
.account-card-top{
  min-height:92px!important;
  padding:2px 44px 4px!important;
  margin-bottom:4px!important;
}
.account-bank-brand{min-height:84px!important}
.account-bank-brand .bank-logo-large,
.bank-logo-large[data-bank-slug]{
  width:84px!important;
  height:84px!important;
  min-width:84px!important;
  min-height:84px!important;
  max-width:84px!important;
  max-height:84px!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  margin:0 auto!important;
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.account-bank-brand .bank-logo-image,
.bank-logo-large .bank-logo-image{
  display:block!important;
  width:80px!important;
  height:80px!important;
  max-width:80px!important;
  max-height:80px!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:auto!important;
  filter:drop-shadow(0 5px 8px rgba(20,55,95,.10))!important;
}
.account-status-badge{top:0!important;right:0!important;font-size:10px!important;padding:4px 7px!important}

/* Three-column cards stay compact while bank numbers remain readable. */
@media (min-width:1280px){
  .accounts-cards .enhanced-account-card{padding:14px!important}
  .enhanced-account-card .bank-details-card{padding:9px!important;gap:6px!important}
  .enhanced-account-card .bank-detail-row{grid-template-columns:72px minmax(0,1fr) 38px!important;gap:6px!important}
  .enhanced-account-card .bank-detail-label{font-size:9.5px!important}
  .enhanced-account-card .bank-number{font-size:11px!important;line-height:1.65!important}
  .enhanced-account-card .bank-detail-wide .bank-number{font-size:10px!important;line-height:1.7!important}
  .enhanced-account-card .copy-button{width:38px!important;min-width:38px!important;font-size:10px!important}
}

/* Bank preview in the create/edit form: centered mark, no giant empty tile. */
.bank-live-preview.identified{
  min-height:100px!important;
  padding:8px!important;
  display:grid!important;
  place-items:center!important;
}
.bank-live-preview.identified .bank-preview-logo-wrap{
  width:84px!important;
  height:84px!important;
  min-width:84px!important;
  min-height:84px!important;
  flex:0 0 84px!important;
  display:grid!important;
  place-items:center!important;
  margin:0 auto!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.bank-live-preview.identified .bank-preview-logo{
  display:block!important;
  width:80px!important;
  height:80px!important;
  max-width:80px!important;
  max-height:80px!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:auto!important;
  filter:drop-shadow(0 5px 8px rgba(20,55,95,.10))!important;
}

@media (max-width:560px){
  .account-card-top{min-height:82px!important;padding-inline:40px!important}
  .account-bank-brand{min-height:76px!important}
  .account-bank-brand .bank-logo-large,
  .bank-logo-large[data-bank-slug]{width:74px!important;height:74px!important;min-width:74px!important;min-height:74px!important;max-width:74px!important;max-height:74px!important}
  .account-bank-brand .bank-logo-image,
  .bank-logo-large .bank-logo-image{width:70px!important;height:70px!important;max-width:70px!important;max-height:70px!important}
  .bank-live-preview.identified{min-height:90px!important}
  .bank-live-preview.identified .bank-preview-logo-wrap{width:74px!important;height:74px!important;min-width:74px!important;min-height:74px!important;flex-basis:74px!important}
  .bank-live-preview.identified .bank-preview-logo{width:70px!important;height:70px!important;max-width:70px!important;max-height:70px!important}
}