:root{
  --blue-900:#0b3d91;
  --blue-700:#1565c0;
  --blue-500:#1e88e5;
  --muted:#6b7280;
  --bg:#f5f8fb;
  --card:#ffffff;
  --glass: rgba(255,255,255,0.6);
  --radius:12px;
  --shadow: 0 6px 20px rgba(16,24,40,0.08);
}
*{box-sizing:border-box}
html,body,#app{height:100%}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial; margin:0; background:linear-gradient(180deg,var(--bg),#eaf2ff); color:#0f1724}
.app{min-height:100vh}
.view{min-height:100vh; display:flex; flex-direction:column}
.centered{align-items:center; justify-content:center}
.brand{font-size:22px; font-weight:700; color:var(--blue-900); margin-bottom:18px}
.card{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px}
.login-card{width:360px; max-width:92%; text-align:left}
.login-card h2{margin:0 0 8px}
.login-card .user-meta{color:var(--muted); margin-bottom:12px}
.login-card input{width:100%; padding:12px 14px; margin:8px 0; border-radius:8px; border:1px solid #e6edf6}
.row.actions{display:flex; gap:10px; margin-top:10px}
.btn{padding:10px 14px; border-radius:8px; border:0; cursor:pointer; background:#eef3fb}
.btn.primary{background:var(--blue-700); color:white}
.btn.ghost{background:transparent; border:1px solid #dbeafe}
.btn.outline{background:transparent; border:1px solid rgba(255,255,255,0.06); color:white}
.hint{color:var(--muted); font-size:13px; margin-top:12px}
.login-footer{margin-top:12px; color:var(--muted); font-size:12px}
.sr-only{position:absolute!important;height:1px;width:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.login-info{margin-top:14px;color:var(--muted);font-size:14px}
.login-info h4{margin:8px 0}
.login-info ul{margin:0 0 8px 18px}
.login-info .security{font-size:12px;color:#0f1724;background:#f1f7ff;padding:8px;border-radius:8px;margin-top:8px}

/* Overlay / spinner */
.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(6,10,28,0.5);z-index:60}
.overlay.hidden{display:none}
.overlay-card{background:var(--card);padding:20px;border-radius:12px;display:flex;align-items:center;gap:14px;box-shadow:var(--shadow)}
.spinner{width:48px;height:48px;border-radius:50%;border:6px solid #e6f0ff;border-top-color:var(--blue-500);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.overlay .msg{font-weight:600;color:#0f1724}

/* Animated entrances */
.content .card{opacity:0; transform:translateY(18px); transition:transform 520ms cubic-bezier(.2,.9,.2,1), opacity 420ms ease; will-change:transform,opacity}
.content .card.visible{opacity:1; transform:none}

.tx-list .tx-item{opacity:0; transform:translateX(12px); transition:opacity 420ms ease, transform 420ms cubic-bezier(.2,.9,.2,1)}
.tx-list .tx-item.visible{opacity:1; transform:none}

.fee{font-size:13px;color:var(--muted);margin-top:8px}

/* Slight responsive tune-ups */
@media (max-width:900px){
  .main{padding:18px}
  .top-cards{flex-direction:column}
}

/* Brand animations */

.brand, .bank-name, .sidebar .logo{
  display:inline-block;
  transform-origin:center;
}

/* gentle float for brand */
@keyframes floatY{
  0%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
  100%{transform:translateY(0)}
}

/* shimmer for text */
@keyframes shimmer{
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}

/* pulse for logo */
@keyframes pulseLogo{
  0%{transform:scale(1)}
  50%{transform:scale(1.06)}
  100%{transform:scale(1)}
}

/* Apply animations only when .play-entrance is present on the root */
.play-entrance .brand{
  font-weight:700;
  color:var(--blue-900);
  animation-name: floatY, shimmer;
  animation-duration:3.6s, 2.8s;
  animation-iteration-count: 1, 1;
  animation-timing-function: ease-in-out, linear;
  background:linear-gradient(90deg,#0b3d91 0%, #1e88e5 40%, #81d4fa 60%, #0b3d91 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-size:200% 100%;
}

.play-entrance .sidebar .logo{
  font-weight:800; font-size:28px; width:56px; height:56px; display:flex;align-items:center;justify-content:center;border-radius:10px;
  animation: pulseLogo 2.6s ease-in-out 1, shimmer 3.2s linear 1;
  background:linear-gradient(135deg,#1e88e5,#0b3d91);
  color: white;
  box-shadow: 0 6px 24px rgba(30,136,229,0.12);
  background-size:300% 100%;
}

.play-entrance .bank-name{
  font-weight:600; color:rgba(255,255,255,0.95); display:block; margin-top:8px; letter-spacing:0.2px;
  animation: shimmer 3.4s linear 1;
  background:linear-gradient(90deg, rgba(255,255,255,0.9), rgba(255,255,255,0.6), rgba(255,255,255,0.9));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-size:300% 100%;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce){
  .brand, .sidebar .logo, .bank-name, .content .card, .tx-list .tx-item{animation:none; transition:none}
}

/* Ensure brand animations run continuously (infinite) by default */
.brand{
  font-weight:700;
  color:var(--blue-900);
  animation: floatY 3.6s ease-in-out infinite, shimmer 2.8s linear infinite;
  background:linear-gradient(90deg,#0b3d91 0%, #1e88e5 40%, #81d4fa 60%, #0b3d91 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-size:200% 100%;
}

.sidebar .logo{
  font-weight:800; font-size:28px; width:56px; height:56px; display:flex;align-items:center;justify-content:center;border-radius:10px;
  animation: pulseLogo 2.6s ease-in-out infinite, shimmer 3.2s linear infinite;
  background:linear-gradient(135deg,#1e88e5,#0b3d91);
  color: white;
  box-shadow: 0 6px 24px rgba(30,136,229,0.12);
  background-size:300% 100%;
}

.bank-name{
  font-weight:600; color:rgba(255,255,255,0.95); display:block; margin-top:8px; letter-spacing:0.2px;
  animation: shimmer 3.4s linear infinite;
  background:linear-gradient(90deg, rgba(255,255,255,0.9), rgba(255,255,255,0.6), rgba(255,255,255,0.9));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-size:300% 100%;
}


/* Dashboard layout */
.hidden{display:none}
.sidebar{width:260px; min-width:220px; background:linear-gradient(180deg,var(--blue-700),var(--blue-900)); color:white; padding:20px; height:100vh; position:fixed; left:0; top:0}
.sidebar .logo{font-weight:800; font-size:28px; background:rgba(255,255,255,0.08); width:56px; height:56px; display:flex; align-items:center; justify-content:center; border-radius:10px}
.bank-name{margin-top:8px; font-weight:600}
.menu{margin-top:30px; display:flex; flex-direction:column; gap:8px}
.menu-item{color:rgba(255,255,255,0.92); text-decoration:none; padding:10px 12px; border-radius:8px}
.menu-item.active, .menu-item:hover{background:rgba(255,255,255,0.06)}
.sidebar-bottom{position:absolute; bottom:20px; left:20px; right:20px}

.main{margin-left:260px; padding:24px 32px 80px 32px; min-height:100vh}
.main-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px}
.search input{padding:10px 14px; border-radius:10px; border:1px solid #dbeafe; width:420px; max-width:60vw}
.header-right{display:flex; align-items:center; gap:12px}
.avatar{width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,var(--blue-700),var(--blue-500));color:white;display:flex;align-items:center;justify-content:center;font-weight:700}

.content{display:flex; flex-direction:column; gap:18px}
.row{display:flex; gap:18px}
.top-cards .card{flex:1}
.balance-card{padding:20px; border-left:6px solid var(--blue-700)}
.balance-card .title{color:var(--muted); font-size:13px}
.balance-card .sub{color:var(--muted); font-size:13px}
.balance-card .amount{font-size:28px; font-weight:800; margin:12px 0}
.card-actions{display:flex; gap:10px}
.quick-actions .actions-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:10px}
.quick-actions .action{padding:10px; border-radius:10px; background:linear-gradient(180deg,#f8fbff,#eef6ff); border:1px solid #e6f0ff}
.account-insights ul{list-style:none;padding:0;margin:8px 0 0}
.account-insights li{padding:6px 0; color:var(--muted)}

.transactions{flex:2}
.transactions .tx-list{list-style:none;padding:0;margin:12px 0}
.tx-item{display:flex;justify-content:space-between;padding:12px;border-radius:10px;border:1px solid #f1f7ff;margin-bottom:8px}
.tx-item .left{display:flex;gap:12px;align-items:center}
.tx-item .dot{width:44px;height:44px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:700}
.tx-item.in .dot{background:linear-gradient(135deg,#e6fbf0,#b9f0d6); color:#04623a}
.tx-item.out .dot{background:linear-gradient(135deg,#fff2f4,#ffdfe5); color:#88022b}
.tx-item .meta{color:var(--muted)}
.tx-amount{font-weight:700}

.details{width:320px}
.info-table td{padding:6px 8px}
.small{margin-top:12px;color:var(--muted);font-size:13px}

.main-footer{margin-top:20px;color:var(--muted);font-size:13px}

/* Responsive */
@media (max-width:1000px){
  .sidebar{position:relative;width:100%;height:auto;display:flex;flex-direction:row;align-items:center;padding:12px 16px}
  .main{margin-left:0;padding-top:12px}
  .row{flex-direction:column}
  .details{width:100%}
  .search input{width:100%; max-width:100%}
}

@media (max-width:520px){
  .login-card{width:92%}
  .search{display:none}
}