/* Commerce App Portal UI Kit (mobile-first, calm premium, app-shell) */
.ca-ui{
  max-width: 1100px;
  margin: 12px auto;
  padding: 14px;
  background: #f6f7f9;
  border-radius: 22px;
  color: #111;
}
.ca-ui-appbar{
  display:flex;
  justify-content: space-between;
  align-items:flex-start;
  gap: 14px;
  padding: 14px 14px 12px;
  border-radius: 18px;
  background: var(--ca-ui-header, #0f172a);
  color: #fff;
}
.ca-ui-greet-title{
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
}
.ca-ui-greet-name{
  margin-left: 6px;
  opacity: .95;
}
.ca-ui-greet-sub{
  margin-top: 6px;
  font-size: 13px;
  opacity: .9;
}
.ca-ui-pill{
  display:inline-flex;
  align-items:center;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  font-size: 12px;
  white-space: nowrap;
}

.ca-ui-appbar-right{
  display:flex;
  align-items:center;
  gap: 10px;
}
.ca-ui-logout{
  display:inline-flex;
  align-items:center;
  padding: 8px 10px;
  border-radius: 999px;
  text-decoration:none;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  border: 1px solid rgba(255,255,255,.18);
}
.ca-ui-logout:hover{
  background: rgba(255,255,255,.18);
}
.ca-ui-tabs{
  display:flex;
  gap: 8px;
  margin-top: 12px;
  padding: 6px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e6e8ee;
  overflow:auto;
}
.ca-ui-tab{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  text-decoration:none;
  color:#111;
  border: 1px solid transparent;
  background: transparent;
  white-space: nowrap;
}
.ca-ui-tab.is-active{
  background:#111;
  color:#fff;
}
.ca-ui-tab.is-disabled{
  opacity:.5;
  pointer-events:none;
}
.ca-ui-tab-badge{
  display:inline-flex;
  min-width: 20px;
  height: 20px;
  align-items:center;
  justify-content:center;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.22);
  font-size: 12px;
  color: inherit;
}
.ca-ui-tab.is-active .ca-ui-tab-badge{
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.25);
}
.ca-ui-body{
  margin-top: 12px;
}
.ca-ui-body .ca-card{
  border-radius: 18px;
}
@media (min-width: 992px){
  .ca-ui-appbar{
    align-items:center;
  }
  .ca-ui-greet-title{
    font-size: 20px;
  }
}


/* v3.50.0 additions */
.ca-list{display:flex;flex-direction:column;gap:10px}
.ca-list-item{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;border:1px solid rgba(0,0,0,.08);border-radius:16px;padding:12px;background:#fff}
.ca-list-title{font-weight:700;font-size:15px;line-height:1.25;margin:0 0 6px}
.ca-list-meta{display:flex;flex-wrap:wrap;gap:6px}
.ca-list-actions{display:flex;gap:8px;align-items:center}
.ca-btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 12px;border-radius:12px;text-decoration:none;border:1px solid rgba(0,0,0,.1);background:#fff;font-weight:600}
.ca-btn--primary{background:var(--ca-brand,#111);border-color:var(--ca-brand,#111);color:#fff}
.ca-empty{padding:14px;border:1px dashed rgba(0,0,0,.15);border-radius:16px;background:rgba(0,0,0,.02)}
.ca-notice{padding:10px 12px;border-radius:14px;margin:0 0 12px;border:1px solid rgba(0,0,0,.12);background:rgba(0,0,0,.03)}
.ca-switch{display:flex;align-items:center;gap:10px}
.ca-switch input{position:absolute;opacity:0;pointer-events:none}
.ca-switch-ui{width:44px;height:26px;border-radius:999px;border:1px solid rgba(0,0,0,.2);background:rgba(0,0,0,.06);position:relative;flex:0 0 auto}
.ca-switch-ui:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:999px;background:#fff;border:1px solid rgba(0,0,0,.12);transition:transform .18s ease}
.ca-switch input:checked + .ca-switch-ui{background:rgba(0,0,0,.86);border-color:rgba(0,0,0,.86)}
.ca-switch input:checked + .ca-switch-ui:after{transform:translateX(18px)}
.ca-switch-label{font-weight:600}

.ca-wiz-steps{display:flex;gap:8px;margin:0 0 14px}
.ca-wiz-step{width:34px;height:34px;border-radius:12px;border:1px solid rgba(0,0,0,.14);background:#fff;font-weight:700}
.ca-wiz-step.is-active{background:rgba(0,0,0,.86);border-color:rgba(0,0,0,.86);color:#fff}
.ca-wiz-panel{display:none}
.ca-wiz-panel.is-active{display:block}
.ca-wiz-actions{display:flex;gap:10px;justify-content:space-between;margin-top:14px}
.ca-wiz-form label{display:block;margin:10px 0;font-weight:600}
.ca-wiz-form input[type="text"],.ca-wiz-form input[type="email"],.ca-wiz-form textarea{width:100%;padding:10px 12px;border-radius:12px;border:1px solid rgba(0,0,0,.14);background:#fff}


/* Utilities */
:is(.ca-ui, .ca-portal) .ca-spacer{height:12px;}