.card{
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  overflow:hidden;
  background:var(--bg-elevated);
  display:flex;
  flex-direction:column;
  box-shadow:var(--shadow-card);
  transition:border-color .15s ease, box-shadow .2s ease, background-color .15s ease;
}
.card.is-interactive{ text-decoration:none; color:inherit; cursor:pointer; }
.card.is-interactive h3{ transition:color .15s ease; }

.card.is-interactive:hover{ box-shadow:var(--shadow-card-hover); }

.card.is-interactive:hover h3,
.card.is-interactive:hover .app-name{ color:var(--accent); text-decoration:underline; }

.card-media{
  position:relative;
  aspect-ratio:var(--card-media-ratio, 16/10);
  overflow:hidden;
  background:var(--bg-sunken);
}
.card-media img{ width:100%; height:100%; object-fit:cover; display:block; }

.card--pricing{
  position:relative;
  overflow-x:hidden;
  overflow-y:visible;
  box-shadow:var(--shadow);
  padding:var(--card-padding-md);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.card--pricing:hover{ border-color:var(--line-strong); }
.card--pricing.is-featured{
  border:2px solid var(--accent);
  box-shadow:var(--shadow-lift);
}

.card--auth{
  display:block;
  overflow:visible;
  width:100%;
  max-width:420px;
  padding:var(--card-padding-lg);
  border-color:var(--line-strong);
  transition:none;
}
.card--auth h1{ font-size:26px; margin-top:8px; }
.card--auth p.lede{ color:var(--ink-soft); font-size:14px; margin-top:8px; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 18px;
  border-radius:var(--radius-xs);
  font-size:14.5px;
  font-weight:600;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--btn-primary-bg); color:var(--btn-primary-ink); font-weight:600; }
.btn-primary:hover{ background:var(--btn-primary-hover); }
.btn-outline{ background:transparent; color:var(--ink); border-color:var(--line-strong); }
.btn-outline:hover{ border-color:var(--ink); }
.btn-sm{ padding:7px 13px; font-size:13px; }
@media (max-width:430px){

  .btn-sm{ padding:6px 10px; font-size:12px; }
}
.btn-block{ width:100%; }
.btn-google{ border-radius:var(--radius-pill); }
.btn-google img,
.btn-google svg{ width:18px; height:18px; flex-shrink:0; }

.divider-v{
  flex:0 0 auto;
  align-self:center;
  width:1px;
  height:24px;
  background:var(--line);
}

.divider-h{
  height:1px;
  background:var(--line);
  margin:4px;
}

.divider-h--full{
  margin-left:-4px;
  margin-right:-4px;
}

.dropdown-list{
  position:absolute; top:calc(100% + 8px); right:0; box-sizing:border-box;

  padding:4px;
  background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius-md);
  box-shadow:0 8px 24px rgba(0,0,0,0.18);
}
.dropdown-list[hidden]{ display:none; }
.dropdown-item{
  display:block; width:100%; text-align:left;
  font-family:var(--font-body); font-size:13px; font-weight:500; color:var(--ink-soft);
  background:none; border:none; border-radius:var(--radius-xs);
  padding:6px; cursor:pointer;
}
.dropdown-item:hover{ background:var(--nav-active); color:var(--ink); }

#dashLogout{ padding-left:8px; padding-right:8px; }

.nav-account-menu{ position:relative; display:flex; align-items:center; gap:2px; }

.nav-apps-link-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  flex-shrink:0;
}
.nav-apps-link-icon svg{ width:100%; height:100%; display:block; fill:currentColor; }

.chip{
  display:inline-block;
  font-family:var(--font-body);
}
.chip--sm{
  font-size:10.5px;
  padding:3px 9px;
  border-radius:var(--radius-pill);
  background:var(--line-strong);
  color:var(--ink-soft);
}

.app-card{
  align-items:center;
  text-align:center;
  padding:var(--card-padding-md);
  gap:14px;
}
.app-card .app-icon{
  display:flex;
  width:64px;
  height:64px;
  flex-shrink:0;
}
.app-card .app-icon svg{ width:100%; height:100%; display:block; }
.app-card .app-info{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.app-card .app-name{
  font-size:14px;
  font-weight:600;
  color:var(--ink);
  transition:color .15s ease;
}
.app-card .app-subtitle{
  font-size:12.5px;
  color:var(--ink-soft);
}

.landing-app-card{
  flex-direction:row;
  align-items:center;
  text-align:left;
  height:72px;
  box-sizing:border-box;
  padding:0 20px;
  gap:16px;
}
.landing-app-card .app-icon{
  width:40px;
  height:40px;
}

.landing-app-card .app-info{
  min-width:0;
}
.landing-app-card .app-name,
.landing-app-card .app-subtitle{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.landing-app-card .app-arrow{
  width:20px;
  height:20px;
  flex-shrink:0;
  margin-left:auto;
  color:var(--ink-soft);
}

.panel-card{
  background:var(--bg-elevated);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:var(--card-padding-md);
  box-shadow:var(--shadow-card);
}
.panel-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
}
.panel-card-head-main{
  display:flex;
  align-items:center;
  gap:12px;
}

.panel-card-head-text{
  min-width:0;
  flex:1 1 auto;
}
.panel-card-title{
  font-size:14px;
  font-weight:600;
  color:var(--ink);
}
.panel-card-link{
  display:inline-flex;
  align-items:center;
  gap:2px;
  font-size:13px;
  font-weight:600;
  color:var(--accent);
  text-decoration:none;
  white-space:nowrap;
  flex-shrink:0;
}
.panel-card-link:hover{ text-decoration:underline; }
.panel-card-link-icon{
  width:14px;
  height:14px;
  flex-shrink:0;
}
.panel-card-body{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.grid-cards-4{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--grid-gap);
}
@media (max-width:1100px){ .grid-cards-4{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:820px){ .grid-cards-4{ grid-template-columns:1fr 1fr; gap:var(--grid-gap-tablet); } }
@media (max-width:430px){ .grid-cards-4{ gap:var(--grid-gap-compact); } }

.confirm-modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.55);
  display:flex;

  overflow-y:auto;
  overscroll-behavior:contain;
  padding:16px;
  z-index:var(--z-modal);
}
.confirm-modal{
  margin:auto;
  width:100%;
  max-width:420px;
  background:var(--bg-elevated);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-lift);
  padding:16px;
}
.confirm-modal-msg{
  color:var(--ink);
  font-size:14.5px;
  line-height:1.55;
  margin:0 0 20px;
  white-space:pre-line;
}
.confirm-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
}
@media (max-width:430px){
  .confirm-modal-actions{ flex-direction:column-reverse; }
  .confirm-modal-actions .btn{ width:100%; }
}

.empty-state{
  text-align:center;padding:60px 20px;color:var(--ink-soft);
}
.empty-state .es-icon{font-size:40px;display:block;margin-bottom:12px;opacity:.5}
.empty-state h3{color:var(--ink);margin-bottom:6px}