/* =========================================================
   AQAR LINK - ULTRA PREMIUM COMPACT MODE
   Compact layout, premium look, more data visible
   ========================================================= */

:root {
  --rail: 252px;
}

body {
  font-size: 14px;
}

/* Sidebar */
.side-rail {
  padding: 14px;
  gap: 14px;
}

.brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  font-size: 20px;
}

.brand b {
  font-size: 16px;
}

.brand span {
  font-size: 11px;
}

.rail-nav {
  gap: 4px;
}

.rail-nav button {
  padding: 8px 10px;
  border-radius: 14px;
  font-size: 13px;
}

.rail-nav button i {
  width: 30px;
  height: 30px;
  border-radius: 12px;
  font-size: 14px;
}

.rail-card {
  padding: 14px;
  border-radius: 20px;
}

.rail-card b {
  font-size: 18px;
}

.rail-card p {
  font-size: 12px;
  line-height: 1.45;
}

/* Main */
.main,
.main-shell {
  padding: 16px 20px 34px;
}

.topbar {
  min-height: 58px;
  margin-bottom: 14px;
  gap: 12px;
}

.topbar h1 {
  font-size: 21px;
}

.topbar p {
  font-size: 12px;
}

.top-search {
  height: 44px;
  border-radius: 14px;
}

.top-search input {
  font-size: 13px;
}

.top-actions {
  gap: 7px;
}

.btn {
  padding: 9px 12px;
  border-radius: 13px;
  font-size: 13px;
}

.icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 14px;
}

/* Hero */
.hero,
.hero-premium {
  min-height: 430px;
  border-radius: 30px;
}

.hero-content {
  min-height: 430px;
  padding: 28px;
  gap: 20px;
}

.hero-copy h2,
.hero h2 {
  font-size: clamp(34px, 4.2vw, 56px);
  letter-spacing: -2px;
  margin: 14px 0 12px;
}

.hero-copy p,
.hero p {
  font-size: 15px;
  line-height: 1.6;
  max-width: 620px;
}

.eyebrow {
  padding: 8px 11px;
  font-size: 12px;
}

.hero-actions {
  margin-top: 16px;
  gap: 8px;
}

.phone-preview,
.hero-device {
  max-width: 320px;
  border-radius: 34px;
}

.phone-head,
.device-top {
  padding: 15px;
  border-radius: 25px 25px 14px 14px;
}

.phone-img,
.device-img {
  height: 160px;
}

.phone-body,
.device-body {
  padding: 12px;
}

/* Search / Filters */
.search-card,
.quick-search,
.quick-search-card,
.filter-bar,
.filters {
  margin: 14px 0;
  padding: 10px;
  border-radius: 20px;
  gap: 9px;
}

.search-card input,
.search-card select,
.quick-search input,
.quick-search select,
.quick-search-card input,
.quick-search-card select,
.filter-bar input,
.filter-bar select,
.filters input,
.filters select,
.map-search {
  height: 44px;
  border-radius: 14px;
  font-size: 13px;
}

/* KPIs */
.kpis,
.kpi-strip {
  gap: 10px;
  margin: 14px 0;
}

.kpis div,
.kpi-strip div {
  padding: 13px;
  border-radius: 18px;
}

.kpis b,
.kpi-strip b {
  font-size: 22px;
}

.kpis span,
.kpi-strip span {
  font-size: 10px;
}

/* Section headers */
.section-head {
  margin: 22px 0 12px;
}

.section-head h2 {
  font-size: 26px;
}

.section-head p {
  font-size: 13px;
}

.segmented,
.tabs {
  padding: 5px;
}

.segmented button,
.tabs button {
  padding: 8px 11px;
  font-size: 12px;
}

/* Property cards */
.property-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.property-card {
  border-radius: 24px;
}

.property-img {
  height: 178px;
}

.badges {
  top: 10px;
  left: 10px;
  gap: 5px;
}

.badge {
  padding: 6px 8px;
  font-size: 10px;
}

.heart {
  width: 36px;
  height: 36px;
  border-radius: 13px;
  top: 10px;
  right: 10px;
  font-size: 17px;
}

.img-meta {
  left: 10px;
  right: 10px;
  bottom: 10px;
}

.img-meta span {
  padding: 6px 8px;
  font-size: 10px;
}

.property-body {
  padding: 13px;
}

.property-top h3 {
  font-size: 15px;
}

.price {
  font-size: 14px;
}

.location {
  margin: 6px 0 10px;
  font-size: 12px;
}

.features,
.more-row {
  gap: 6px;
  margin-bottom: 8px;
}

.features div,
.more-row div {
  padding: 7px 5px;
  border-radius: 12px;
}

.features b,
.more-row b {
  font-size: 13px;
}

.features span,
.more-row span {
  font-size: 9px;
}

.reward-line {
  padding: 9px 10px;
  border-radius: 14px;
  font-size: 12px;
  margin-bottom: 10px;
}

.card-actions {
  gap: 6px;
}

.card-actions .btn {
  padding: 8px 7px;
  font-size: 12px;
}

/* Projects */
.project-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.project-card {
  height: 190px;
  border-radius: 24px;
}

.project-card-content {
  left: 14px;
  right: 14px;
  bottom: 14px;
}

.project-card h3 {
  font-size: 18px;
}

/* Map */
.map-layout {
  grid-template-columns: 320px 1fr;
  gap: 14px;
}

.map-panel,
.studio-tools {
  border-radius: 24px;
  padding: 15px;
}

.map-panel h2,
.studio-tools h2 {
  font-size: 23px;
}

.map-panel p,
.studio-tools p {
  font-size: 12px;
  line-height: 1.5;
}

.mini-stats {
  gap: 7px;
  margin: 10px 0;
}

.mini-stats div {
  padding: 9px;
  border-radius: 14px;
}

.mini-stats b {
  font-size: 18px;
}

.map-list {
  max-height: 610px;
  gap: 7px;
}

.map-list-card {
  grid-template-columns: 70px 1fr;
  gap: 8px;
  padding: 7px;
  border-radius: 15px;
}

.map-list-img {
  height: 64px;
  border-radius: 12px;
}

.map-list-card h3 {
  font-size: 12px;
}

.map-list-card p {
  font-size: 10px;
}

.map-list-card strong {
  font-size: 12px;
}

.map-stage {
  min-height: 720px;
  border-radius: 28px;
}

.map-floating,
.map-floating-card {
  padding: 14px;
  border-radius: 20px;
  width: min(390px, calc(100% - 34px));
}

.map-floating h3,
.map-floating-card h3 {
  font-size: 17px;
}

.map-floating p,
.map-floating-card p {
  font-size: 12px;
}

.map-tools,
.map-layer-tools {
  gap: 7px;
}

.map-tools button,
.map-layer-tools button {
  padding: 9px 11px;
  border-radius: 13px;
  font-size: 12px;
}

/* Studio */
.studio-layout {
  grid-template-columns: 1fr 310px;
  gap: 14px;
}

.studio-stage {
  min-height: 690px;
  border-radius: 28px;
}

.tool-block {
  margin: 13px 0;
}

.tool-block h3 {
  font-size: 14px;
}

.tool-row button {
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 12px;
}

.color-row button {
  width: 33px;
  height: 33px;
  border-radius: 12px;
}

/* Tables */
.table-card {
  border-radius: 22px;
  margin-top: 14px;
}

th,
td {
  padding: 10px 12px;
  font-size: 12px;
}

/* Wallet / Showcase */
.wallet-hero,
.showcase-hero {
  border-radius: 28px;
  padding: 24px;
}

.wallet-hero h2,
.showcase-hero h2 {
  font-size: 32px;
}

.wallet-hero p,
.showcase-hero p {
  font-size: 13px;
}

.wallet-grid {
  gap: 10px;
}

.wallet-grid div {
  padding: 14px;
  border-radius: 18px;
}

.wallet-grid b {
  font-size: 23px;
}

.showcase-grid,
.payment-grid,
.compare-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.showcase-card,
.compare-card,
.payment-grid div,
.profile-card,
.support-card {
  border-radius: 22px;
  padding: 15px;
}

.showcase-card h3,
.compare-card h3 {
  font-size: 17px;
}

.showcase-card p {
  font-size: 12px;
}

.showcase-card li {
  font-size: 12px;
}

/* Details modal stays rich but cleaner */
.modal-panel {
  border-radius: 28px;
}

.modal-head {
  padding: 16px 20px;
}

.modal-head h2 {
  font-size: 24px;
}

.modal-body {
  padding: 18px 20px;
}

.detail-image {
  height: 360px;
  border-radius: 24px;
}

.thumbs {
  gap: 7px;
}

.thumb {
  height: 70px;
  border-radius: 14px;
}

.detail-info div,
.advanced-info div,
.reward-preview div {
  padding: 9px 10px;
  border-radius: 13px;
  font-size: 12px;
}

/* Responsive */
@media (max-width: 1500px) {
  .property-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .project-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1200px) {
  :root {
    --rail: 230px;
  }

  .property-grid,
  .project-grid,
  .showcase-grid,
  .payment-grid,
  .compare-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .map-layout,
  .studio-layout {
    grid-template-columns: 1fr;
  }

  .map-stage,
  .studio-stage {
    min-height: 600px;
  }
}

@media (max-width: 900px) {
  .main,
  .main-shell {
    padding: 12px 12px 86px;
  }

  .hero-content {
    padding: 22px;
  }

  .property-grid,
  .project-grid,
  .showcase-grid,
  .payment-grid,
  .compare-grid,
  .kpis,
  .kpi-strip,
  .search-card,
  .quick-search,
  .quick-search-card,
  .filter-bar,
  .filters {
    grid-template-columns: 1fr;
  }

  .property-img {
    height: 230px;
  }
}