/* Rewardexa Compact UI V2 — smaller, cleaner, centered icons */
:root{
  --rwx-sidebar-w: 210px;
  --rwx-page-gap: 14px;
  --rwx-card-radius: 14px;
}

/* Overall scale */
html{
  font-size:13px!important;
}
body{
  font-size:13px!important;
  line-height:1.35!important;
  overflow-x:hidden!important;
}

/* Page width / spacing */
.main-content,
.page-main,
.dashboard-main,
.content{
  padding:0!important;
}

.content-area,
.page-content,
.dashboard-content,
.main-area{
  padding:14px 18px!important;
  max-width:none!important;
}

.topbar,
.page-topbar{
  min-height:50px!important;
  padding:8px 18px!important;
}

.topbar-title,
.page-title{
  font-size:16px!important;
  line-height:1.2!important;
}

.topbar-subtitle,
.breadcrumb,
.page-subtitle,
.topbar span{
  font-size:12px!important;
  line-height:1.2!important;
}

/* Sidebar smaller */
.sidebar{
  width:var(--rwx-sidebar-w)!important;
  min-width:var(--rwx-sidebar-w)!important;
  max-width:var(--rwx-sidebar-w)!important;
}

.sidebar-header,
.sidebar-brand{
  padding:14px 16px!important;
  min-height:64px!important;
}

.logo-icon,
.brand-icon,
.sidebar-logo,
.brand-logo{
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  border-radius:12px!important;
  font-size:18px!important;
}

.logo-text,
.brand-title,
.sidebar-brand-title{
  font-size:18px!important;
}

.sidebar-user,
.user-card,
.user-mini-card{
  padding:12px 16px!important;
  gap:10px!important;
}

.user-avatar,
.avatar,
.sidebar-avatar{
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  font-size:17px!important;
}

.user-name,
.sidebar-user-name{
  font-size:13px!important;
}

.user-meta,
.sidebar-user-meta{
  font-size:11px!important;
}

.sidebar-balance,
.balance-card-mini{
  margin:10px 14px!important;
  padding:10px 12px!important;
  border-radius:10px!important;
}

.sidebar-balance strong,
.balance-card-mini strong{
  font-size:18px!important;
}

.nav-section-title,
.sidebar-section-title{
  font-size:9px!important;
  margin:12px 16px 5px!important;
}

.nav-item,
.sidebar-nav a,
.sidebar-nav .nav-link{
  min-height:38px!important;
  padding:9px 16px!important;
  gap:10px!important;
  font-size:13px!important;
}

.sidebar-footer,
.logout-area{
  padding:12px 16px!important;
}

/* Header icon buttons */
.topbar-btn,
.icon-btn,
.hamburger-btn{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  padding:0!important;
  border-radius:9px!important;
}

/* Hero smaller */
.hero,
.hero-card,
.dashboard-hero,
.profile-hero,
.rewards-hero,
.referral-hero{
  min-height:96px!important;
  padding:18px 22px!important;
  margin:14px 0!important;
  border-radius:16px!important;
}

.hero h1,
.hero-title,
.dashboard-hero h1,
.profile-hero h1{
  font-size:22px!important;
  line-height:1.15!important;
  margin:0 0 7px!important;
}

.hero p,
.hero-subtitle,
.hero-desc{
  font-size:13px!important;
  line-height:1.35!important;
  margin:0!important;
}

.hero-actions{
  gap:8px!important;
}

/* Cards grid tighter */
.stats-grid,
.summary-grid,
.cards-grid,
.dashboard-stats,
.metrics-grid{
  gap:12px!important;
  margin:14px 0!important;
}

.stat-card,
.metric-card,
.summary-card,
.info-card{
  position:relative!important;
  min-height:100px!important;
  padding:15px 16px!important;
  border-radius:14px!important;
  overflow:hidden!important;
}

/* Keep stat badge away from icon */
.stat-change,
.metric-change,
.status-pill{
  position:absolute!important;
  top:12px!important;
  right:12px!important;
  margin:0!important;
  z-index:3!important;
  max-width:82px!important;
  font-size:10px!important;
  line-height:1.1!important;
  padding:4px 7px!important;
  white-space:normal!important;
  text-align:center!important;
}

/* Big numbers smaller */
.stat-value,
.metric-value,
.balance-big,
.points-big{
  font-size:25px!important;
  line-height:1.05!important;
  margin-top:10px!important;
}

.stat-label,
.metric-label,
.card-label{
  font-size:12px!important;
  line-height:1.25!important;
}

/* Section title / filters */
.section-title,
.tasks-section-title,
.card-title{
  font-size:15px!important;
  line-height:1.2!important;
}

.tasks-filters,
.filters,
.category-tabs,
.tabs,
.network-tabs{
  gap:7px!important;
  margin:10px 0!important;
}

button,
.btn,
.button,
.primary-btn,
.secondary-btn,
.action-btn,
.hero-btn,
.filter-btn,
.category-btn,
.chip,
.tab-btn{
  min-height:32px!important;
  padding:7px 12px!important;
  font-size:12px!important;
  border-radius:9px!important;
  line-height:1.15!important;
  gap:7px!important;
}

/* Main dashboard columns */
.dashboard-grid,
.main-grid,
.content-grid{
  gap:12px!important;
}

/* Latest transactions panel smaller */
.transactions-panel,
.latest-transactions,
.activity-card,
.tx-card{
  border-radius:14px!important;
}

.panel-header,
.tx-header{
  padding:12px 14px!important;
  min-height:44px!important;
}

.tx-item,
.transaction-row,
.activity-row{
  min-height:52px!important;
  padding:10px 14px!important;
  gap:10px!important;
}

.tx-title,
.transaction-title{
  font-size:12px!important;
  line-height:1.25!important;
}

.tx-time,
.transaction-time{
  font-size:10px!important;
}

.tx-points,
.transaction-points{
  font-size:13px!important;
}

/* Tasks/rewards/profile pages */
.task-card,
.reward-card,
.form-card,
.profile-card,
.settings-card,
.list-card{
  border-radius:14px!important;
  padding:14px!important;
}

.tasks-grid,
.reward-grid,
.grid{
  gap:12px!important;
}

.reward-image,
.reward-thumb,
.task-image{
  height:86px!important;
}

.task-card h3,
.reward-card h3,
.form-card-title,
.card h3{
  font-size:14px!important;
  line-height:1.25!important;
}

.task-card p,
.reward-card p,
.card p{
  font-size:12px!important;
}

input,
select,
textarea,
.form-control{
  min-height:38px!important;
  padding:9px 12px!important;
  font-size:12px!important;
  border-radius:9px!important;
}

label,
.field-label{
  font-size:12px!important;
}

.field-hint,
.help-text{
  font-size:11px!important;
}

/* Icon alignment: icons must be centered and isolated */
.rwx-emoji-icon,
.rwx-ui-emoji,
.nav-icon,
.menu-icon,
.stat-icon,
.card-icon,
.hero-icon,
.icon-wrap,
.logo-icon,
brand-icon,
.task-icon,
.reward-icon,
.tx-icon,
.transaction-icon,
.badge-icon,
.btn-icon,
.chip-icon,
.filter-icon{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  line-height:1!important;
  vertical-align:middle!important;
  flex:0 0 auto!important;
  overflow:hidden!important;
}

.stat-icon,
.metric-icon,
.card-icon,
.task-icon,
.reward-icon,
.tx-icon,
.transaction-icon,
.icon-wrap{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  border-radius:10px!important;
  font-size:16px!important;
  margin:0 0 10px!important;
}

.nav-item .rwx-emoji-icon,
.sidebar-nav .rwx-emoji-icon,
.nav-icon,
.menu-icon{
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  font-size:15px!important;
  margin:0!important;
}

button .rwx-emoji-icon,
.btn .rwx-emoji-icon,
.chip .rwx-emoji-icon,
.filter-btn .rwx-emoji-icon,
.category-btn .rwx-emoji-icon{
  width:16px!important;
  height:16px!important;
  min-width:16px!important;
  font-size:14px!important;
  margin:0!important;
}

/* Ensure text never sits inside icon boxes */
.nav-item,
.sidebar-nav a,
.btn,
button,
.chip,
.filter-btn,
.category-btn{
  display:inline-flex!important;
  align-items:center!important;
}

.nav-item,
.sidebar-nav a{
  justify-content:flex-start!important;
}

.btn,
button,
.chip,
.filter-btn,
.category-btn{
  justify-content:center!important;
}

.stat-card .stat-icon + *,
.metric-card .metric-icon + *{
  clear:both!important;
}

/* Fix browser translate popup does not matter, but keep layout stable */
font{
  line-height:inherit!important;
}

/* Responsive */
@media (max-width: 1200px){
  :root{--rwx-sidebar-w:205px;}
  .content-area,
  .page-content,
  .dashboard-content,
  .main-area{padding:12px 14px!important;}
  .hero,.hero-card,.dashboard-hero,.profile-hero,.rewards-hero,.referral-hero{padding:16px 18px!important;}
  .stat-card,.metric-card,.summary-card,.info-card{min-height:94px!important;padding:14px!important;}
  .stat-value,.metric-value,.balance-big,.points-big{font-size:23px!important;}
}

@media (max-width: 900px){
  html{font-size:12.5px!important;}
  .sidebar{width:220px!important;min-width:220px!important;max-width:220px!important;}
  .stats-grid,.summary-grid,.cards-grid,.dashboard-stats,.metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}