/* PixMatic customer workspace: warm paper, compact navigation, and credit-first hierarchy. */
:root {
  --bg-0: #faf7ef;
  --bg-1: #fffefa;
  --bg-2: #f4f0e7;
  --bg-3: #eee7db;
  --border: #e8e0d2;
  --border-strong: #d8cdbb;
  --text: #29251f;
  --muted: #746b5f;
  --dim: #948b7e;
  --gold: #df891f;
  --gold-2: #f4ad2c;
  --green: #36845c;
  --red: #b54735;
  --blue: #387cb8;
}
html { scroll-behavior: smooth; background: var(--bg-0); }
body {
  min-width: 320px;
  background:
    radial-gradient(ellipse 40% 25% at 7% 0%, rgba(239, 198, 148, .2), transparent 78%),
    radial-gradient(ellipse 45% 36% at 100% 12%, rgba(233, 224, 202, .3), transparent 78%),
    var(--bg-0);
  color: var(--text);
}
.dashboard-app { min-height: 100vh; }
.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 30px;
  min-height: 76px;
  padding: 12px clamp(20px, 4.5vw, 72px);
  border-bottom: 1px solid rgba(222, 213, 198, .86);
  background: rgba(255, 254, 250, .9);
  box-shadow: 0 8px 24px rgba(65, 48, 24, .035);
  backdrop-filter: blur(18px);
}
.app-brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.app-brand img { display: block; width: auto; max-width: 164px; height: 31px; object-fit: contain; }
.app-nav { display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; }
.app-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #70675b;
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.app-nav-link:hover { color: #352a1e; background: #f8f2e8; }
.app-nav-link.active { color: #94551c; border-color: #efdfc5; background: #fbf2e4; }
.app-nav-link.nav-soon { gap: 6px; cursor: default; }
.app-nav-link.nav-soon small { padding: 2px 5px; color: #9b6b35; border-radius: 5px; background: #f4e8d5; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.app-tools { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.app-icon-link, .language-switch, .notif-btn, .logout {
  display: inline-grid;
  place-items: center;
  width: 37px;
  height: 37px;
  border: 1px solid #e7dfd2;
  border-radius: 11px;
  background: #fffefa;
  color: #62594d;
  text-decoration: none;
  cursor: pointer;
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}
.app-icon-link:hover, .language-switch:hover, .notif-btn:hover, .logout:hover { color: #99551b; border-color: #dcb982; background: #fff8ec; }
.app-icon-link svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.language-switch { width: auto; min-width: 46px; padding: 0 9px; font: inherit; font-size: 11px; font-weight: 700; }
.profile-pill { display: flex; align-items: center; gap: 5px; padding: 3px 4px 3px 7px; border: 1px solid #e8e0d4; border-radius: 14px; background: #fffefa; }
.profile-link { display: flex; align-items: center; gap: 8px; min-width: 0; color: inherit; text-decoration: none; }
.profile-pill .side-avatar { width: 30px; height: 30px; flex: 0 0 30px; border: 0; background: linear-gradient(145deg, #d77d27, #efa944); color: #fff; font-size: 12px; }
.profile-info { display: flex; flex-direction: column; min-width: 0; max-width: 115px; line-height: 1.25; }
.profile-info b { overflow: hidden; color: #352f27; font-size: 10px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.profile-info small { overflow: hidden; color: #8b8276; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.profile-pill .logout { width: 29px; height: 29px; border-color: transparent; background: transparent; }
.profile-pill .logout svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.header-upgrade { padding: 9px 12px; border-radius: 10px; font-size: 11px; }

/* Notification layer sits above the sticky header without changing existing behavior. */
.notif-btn { position: relative; width: 37px; height: 37px; padding: 0; color: #62594d; }
.notif-badge { top: -5px; right: -5px; border-color: #fffefa; box-shadow: 0 2px 6px rgba(151, 52, 32, .15); }
.notif-popover {
  top: calc(100% + 12px);
  right: 0;
  width: 360px;
  border: 1px solid #e7dfd2;
  border-radius: 15px;
  background: #fffefa;
  box-shadow: 0 18px 48px rgba(47, 37, 22, .16);
}
.notif-header { background: #faf7ef; }
.notif-item, .notif-item:hover { background: #fffefa; }
.notif-item.unread { background: #fff8eb; border-color: #eed2a8; }
.notif-empty { color: #81786c; }
.notif-empty svg { color: #b2a797; }

main.main { width: min(1440px, 100%); margin: 0 auto; padding: 34px clamp(20px, 4.5vw, 72px) 80px; }
.welcome-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; margin: 0 0 25px; }
.welcome-kicker { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: #9a6a34; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.welcome-kicker-dot { width: 7px; height: 7px; border-radius: 50%; background: #df891f; box-shadow: 0 0 0 4px #f5e8d1; }
.welcome-row h1 { margin: 0; color: #29251f; font-size: clamp(24px, 3vw, 34px); font-weight: 800; letter-spacing: -.045em; line-height: 1.2; }
#welcomeGreeting { color: #71685d; font-weight: 550; }
#topbarUserName { color: #29251f; }
.welcome-wave { display: inline-block; margin-inline-start: 4px; font-size: .75em; transform-origin: 75% 75%; animation: waveHello 3.6s ease-in-out infinite; }
@keyframes waveHello { 0%, 86%, 100% { transform: rotate(0); } 89% { transform: rotate(14deg); } 93% { transform: rotate(-9deg); } 97% { transform: rotate(7deg); } }
.welcome-sub { margin: 8px 0 0; color: #7e756a; font-size: 13px; }
.welcome-note { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 4px; padding: 9px 12px; border: 1px solid #e9dfcf; border-radius: 999px; background: rgba(255,254,250,.72); color: #766b5d; font-size: 10px; font-weight: 650; white-space: nowrap; }
.welcome-note-mark { color: #d78227; font-size: 15px; }

.btn { border-radius: 10px; font-weight: 700; }
.btn-gold { border: 1px solid #bc6e1d; background: linear-gradient(180deg, #f0a33b, #e18a24); color: #241b12; box-shadow: 0 2px 0 rgba(129, 70, 16, .11); }
.btn-gold:hover { background: linear-gradient(180deg, #f4b355, #e99430); box-shadow: 0 5px 14px rgba(175, 104, 24, .16); }
.btn-ghost { border: 1px solid #e5dccd; background: #fffefa; color: #51483d; }
.btn-ghost:hover { border-color: #d3b78e; background: #fcf6eb; }

.download-card {
  margin-bottom: 18px;
  padding: 22px 25px;
  border-color: #ead3af;
  border-radius: 17px;
  background: linear-gradient(112deg, #fff3df, #fffefa 67%);
  box-shadow: 0 8px 22px rgba(70, 50, 24, .035);
}
.download-card::before { background: radial-gradient(circle, rgba(234, 165, 77, .18), transparent 65%); }
.dl-title { color: #352a1d; font-size: 19px; }
.dl-sub { color: #746b5f; font-size: 13px; }
.dl-meta { color: #938575; font-family: inherit; font-size: 11px; }
#userPendingUpgradeNotice { color: #58452d; }

.cards-row { grid-template-columns: minmax(0, 1.7fr) repeat(2, minmax(160px, .68fr)); gap: 14px; margin-bottom: 18px; }
.card { border: 1px solid #e9e2d7; border-radius: 17px; background: rgba(255,254,250,.94); box-shadow: 0 8px 24px rgba(67, 50, 27, .045); color: #29251f; }
.plan-card { border-color: #e8d2b1; background: linear-gradient(145deg, #fff6e8 0%, #fffefa 72%); }
.plan-card::before { background: radial-gradient(circle, rgba(225, 151, 51, .13), transparent 68%); }
.card-label { color: #887c6b; font-family: inherit; font-size: 10px; font-weight: 750; letter-spacing: .075em; }
.card-label a { color: #8e5c25 !important; font-size: 11px !important; }
.plan-header { margin-bottom: 17px; }
.plan-title { color: #2e281f; font-size: 27px; }
.plan-title .badge { color: #6d4d22 !important; background: #f8e7c9 !important; }
.plan-price { color: #84796a; }
.plan-price b { color: #413629; }
.credit-used { color: #342a1e; font-size: 28px; }
.credit-used b { color: #c6741d; }
.credit-total { color: #84796a; font-family: inherit; font-size: 12px; }
.credit-bar { height: 9px; background: #efe8dc; }
.credit-fill { background: linear-gradient(90deg, #ed9e36, #dc7920); box-shadow: 0 0 10px rgba(220, 121, 32, .22); }
.credit-fill::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.48), transparent); }
.credit-meta { color: #817668; font-size: 10px; }
#accountActiveBadge { background: rgba(245, 238, 226, .8) !important; border-color: #e9decd !important; }
#accountActiveIcon { background: #f3e4cb !important; color: #aa6c22 !important; }
#accountActiveTitle { color: #42382b !important; }
#accountActiveSub { color: #817568 !important; }
#accountActiveStatus { background: #fbf3e6; border: 1px solid #ead7b9; color: #91581d; box-shadow: none; }
#accountActiveStatus:hover { background: #f7e9d1; }
.plan-actions { gap: 9px; }
.plan-actions .btn { font-size: 12px; }
.stat-card { min-height: 205px; padding: 22px; }
.stat-card:nth-child(2) { background: linear-gradient(155deg, #fffefa, #faf1e5); }
.stat-card:nth-child(3) { background: linear-gradient(155deg, #fffefa, #f2f0e8); }
.stat-val { margin: 10px 0 8px; color: #312a21; font-size: clamp(29px, 3vw, 37px); }
.stat-delta { background: #e7f2e7; color: #39714b; font-size: 10px; }
.stat-delta.neg { background: #f8e7e1; color: #a34432; }
.stat-sub { padding-top: 10px; color: #83796d; font-size: 11px; }

.usage-card { margin-bottom: 18px; padding: 21px 23px 15px; scroll-margin-top: 98px; }
.usage-header { margin-bottom: 14px; }
.usage-header h3, .table-header h3 { color: #302a22; font-size: 15px; font-weight: 750; letter-spacing: -.01em; }
.usage-tabs { gap: 2px; padding: 3px; border: 1px solid #e9e0d3; border-radius: 9px; background: #f8f4ec; }
.usage-tab { padding: 5px 10px; color: #7d7367; font-size: 10px; }
.usage-tab.active { background: #fffefa; color: #724717; box-shadow: 0 1px 3px rgba(55, 41, 21, .12); }
.usage-tab:hover:not(.active) { color: #45392a; }
.chart { height: 180px; gap: 6px; padding-top: 20px; }
.chart-bar { border-radius: 5px 5px 1px 1px; background: linear-gradient(180deg, #f1b25d, #db8525); box-shadow: 0 0 7px rgba(216, 132, 36, .13); }
.chart-bar:hover { background: linear-gradient(180deg, #efaa4a, #c96f20); box-shadow: 0 0 12px rgba(204, 119, 30, .2); }
.chart-col span { color: #918778; font-family: inherit; font-size: 9px; }
.chart-tip { border-color: #e8dece; background: #30291f; color: #fff9ed; }

.table-card { margin-bottom: 18px; padding: 0; scroll-margin-top: 98px; }
.table-header { min-height: 62px; padding: 16px 21px; border-color: #eee8dd; }
.table-search { border-color: #e9e1d5; border-radius: 9px; background: #faf7f1; color: #887d6d; }
.table-search input { color: #3b342b; font-size: 11px; }
.table-search input::placeholder { color: #a1988b; }
table { font-size: 12px; }
thead th { padding: 11px 20px; border-color: #eee8dd; background: #faf7f1; color: #8a8073; font-family: inherit; font-size: 9px; font-weight: 750; letter-spacing: .055em; }
tbody td { padding: 13px 20px; border-color: #f0ebe3; color: #51483c; }
tbody tr:hover { background: #fdfaf4; }
.td-batch-icon { border-color: #eee4d4; background: #fbf4e8; color: #b8752a; }
.td-batch b { color: #392f23; }
.td-batch small, .td-time { color: #8e8476; font-family: inherit; font-size: 10px; }
.td-count, .td-credits { color: #514334; font-family: inherit; font-size: 11px; }
.status { font-size: 10px; }
.status.done { background: #e8f2e8; color: #38734a; }
.status.processing { background: #eaf1f7; color: #4577a2; }
.status.failed { background: #f8e9e5; color: #a34634; }
.invoice-badge { background: #e8f2e8; color: #38734a; font-size: 10px; }
.invoice-badge.pending { background: #fff1d9; color: #9b641d; }
.btn-download { border-color: #e8dfd0; color: #6e5738; }
.btn-download:hover { border-color: #d1a66b; color: #975c1f; }

/* Keep section destinations comfortably below the pinned navigation. */
#overview, #usage, #activity, #invoices { scroll-margin-top: 96px; }
body[dir="rtl"] .app-nav { direction: rtl; }
body[dir="rtl"] .welcome-row, body[dir="rtl"] .welcome-row h1 { text-align: right; }
body[dir="rtl"] .app-icon-link svg { transform: scaleX(-1); }
body[dir="rtl"] .notif-popover { right: auto; left: 0; }
body[dir="rtl"] .stat-sub { margin-inline-start: auto; margin-inline-end: 0; }

@media (max-width: 1180px) {
  .app-header { gap: 17px; padding-inline: 24px; }
  .app-nav-link { padding: 8px 9px; font-size: 11px; }
  .app-tools { gap: 6px; }
  .settings-link { display: none; }
  .profile-info { max-width: 88px; }
  main.main { padding-inline: 24px; }
}
@media (max-width: 980px) {
  .app-header { grid-template-columns: auto minmax(0,1fr); row-gap: 9px; padding: 11px 20px; }
  .app-brand { grid-row: 1; grid-column: 1; }
  .app-tools { grid-row: 1; grid-column: 2; }
  .app-nav { grid-row: 2; grid-column: 1 / -1; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .app-nav::-webkit-scrollbar { display: none; }
  .cards-row { grid-template-columns: minmax(0, 1.35fr) minmax(160px, .75fr); }
  .plan-card { grid-row: span 2; }
  .stat-card { min-height: 145px; }
}
@media (max-width: 700px) {
  .app-header { padding: 10px 14px 8px; gap: 6px 10px; }
  .app-brand img { height: 27px; max-width: 132px; }
  .header-upgrade { padding: 8px 9px; font-size: 0; gap: 4px; }
  .header-upgrade svg { width: 15px; height: 15px; }
  .header-upgrade span { font-size: 0; }
  .header-upgrade span::after { content: 'Upgrade'; font-size: 10px; }
  .app-tools { gap: 5px; }
  .profile-info { display: none; }
  .profile-pill { gap: 2px; padding: 2px; }
  .profile-pill .side-avatar { width: 28px; height: 28px; flex-basis: 28px; }
  .profile-pill .logout { width: 27px; height: 27px; }
  .app-icon-link, .language-switch, .notif-btn { width: 32px; height: 32px; min-width: 32px; border-radius: 9px; }
  .language-switch { font-size: 9px; }
  .app-nav { gap: 2px; margin-inline: -4px; }
  .app-nav-link { padding: 7px 9px; font-size: 10px; }
  .app-nav-link.nav-soon { display: none; }
  main.main { padding: 24px 14px 52px; }
  .welcome-row { align-items: flex-start; margin-bottom: 18px; }
  .welcome-row h1 { font-size: 25px; }
  .welcome-sub { max-width: 34ch; font-size: 11px; }
  .welcome-note { display: none; }
  .cards-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .plan-card { grid-column: 1 / -1; grid-row: auto; }
  .stat-card { min-height: 135px; padding: 17px 15px; }
  .stat-val { font-size: 31px; }
  .stat-card .card-label { min-height: 28px; line-height: 1.35; }
  .download-card { padding: 19px; }
  .dl-title { font-size: 17px; }
  .usage-card { padding: 17px 14px 12px; }
  .chart { height: 148px; gap: 3px; }
  .chart-col span { font-size: 8px; }
  .table-header { align-items: flex-start; flex-direction: column; gap: 11px; padding: 15px; }
  .table-search { width: 100%; }
  .table-search input { width: 100%; }
  .table-card { overflow: hidden; }
  .table-card > table { display: block; overflow-x: auto; }
  thead th, tbody td { padding: 10px 13px; white-space: nowrap; }
  .notif-popover { right: -90px; width: min(350px, calc(100vw - 24px)); }
  body[dir="rtl"] .notif-popover { right: auto; left: -90px; }
  #accountActiveBadge { align-items: flex-start !important; flex-direction: column; }
  #accountActiveBadge a.btn { width: 100%; justify-content: center; }
  .plan-actions { flex-direction: column; }
  .plan-actions .btn { width: 100%; }
}
@media (max-width: 380px) {
  .app-header { padding-inline: 10px; }
  .app-brand img { max-width: 118px; }
  .app-tools { gap: 3px; }
  .language-switch { min-width: 29px; padding-inline: 3px; }
  .profile-pill .logout { display: none; }
  main.main { padding-inline: 11px; }
  .welcome-row h1 { font-size: 22px; }
  .credit-meta { gap: 8px; }
  .credit-meta span:last-child { text-align: end; }
}