:root {
  --ink: #111214;
  --muted: #707782;
  --line: #e7e9ee;
  --soft: #f6f7f9;
  --panel: #ffffff;
}

body {
  background: #fafafa;
  color: var(--ink);
  letter-spacing: 0;
}

a {
  text-decoration: none;
}

.navbar {
  box-shadow: 0 1px 0 rgba(17, 18, 20, 0.06);
}

.language-switcher {
  background-position: right 0.75rem center;
  border-radius: 999px;
  font-weight: 700;
  min-width: 88px;
  padding-left: 0.85rem;
  padding-right: 2rem;
  text-align: left;
}

.header-cta-group {
  align-items: center;
  display: flex;
  gap: 0.75rem;
}

.free-counter {
  align-items: baseline;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  display: inline-flex;
  font-size: 0.82rem;
  gap: 0.25rem;
  line-height: 1;
  padding: 0.58rem 0.75rem;
  white-space: nowrap;
}

.free-counter strong {
  color: var(--ink);
}

.eyebrow {
  color: #6d737c;
  display: inline-flex;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sector-toolbar {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.sector-map-wrap {
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

.sector-map {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 18px;
  display: grid;
  gap: 1px;
  grid-template-columns: 42px repeat(5, minmax(120px, 1fr));
  min-width: 660px;
  overflow: hidden;
  padding: 1px;
}

.clean-wall-map {
  border-radius: 0;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
}

.wall-home-inner {
  margin: 0;
  padding: 0;
}

.wall-map-wrap {
  padding-bottom: 0;
}

.wall-map-wrap .clean-wall-map {
  border-left: 0;
  border-right: 0;
  border-top: 0;
  min-width: 100%;
}

.sector-page-inner {
  margin: 0;
  padding: 0;
}

.sector-select-map-wrap {
  padding-bottom: 0;
}

.sector-select-home .sector-map {
  border-left: 0;
  border-radius: 0;
  border-right: 0;
  border-top: 0;
}

.sector-corner,
.sector-axis {
  align-items: center;
  background: #fbfbfc;
  color: #6d737c;
  display: flex;
  font-size: 0.82rem;
  font-weight: 800;
  justify-content: center;
  min-height: 34px;
}

.sector-cell {
  aspect-ratio: 1;
  background:
    linear-gradient(rgba(17, 18, 20, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 18, 20, 0.04) 1px, transparent 1px),
    #ffffff;
  background-size: 10px 10px;
  color: #2f3338;
  display: block;
  overflow: hidden;
  position: relative;
}

.sector-cell:hover {
  box-shadow: inset 0 0 0 2px #111214;
  z-index: 2;
}

.clean-sector-cell:hover {
  box-shadow: none;
}

.sector-code {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(17, 18, 20, 0.08);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  left: 0.4rem;
  padding: 0.12rem 0.42rem;
  position: absolute;
  top: 0.4rem;
  z-index: 2;
}

.sector-cell img,
.placement-existing {
  object-fit: cover;
  position: absolute;
}

.sector-cell img {
  min-height: 5px;
  min-width: 5px;
}

.wall-block-trigger {
  background: transparent;
  border: 0;
  cursor: pointer;
  display: block;
  padding: 0;
  position: absolute;
}

.wall-block-trigger:focus-visible {
  outline: 2px solid #111214;
  outline-offset: 2px;
  z-index: 3;
}

.wall-block-trigger img {
  display: block;
  height: 100%;
  inset: 0;
  object-fit: cover;
  width: 100%;
}

.wall-block-modal .modal-content {
  border: 0;
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(17, 18, 20, 0.22);
  overflow: hidden;
  position: relative;
}

.wall-modal-close {
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  padding: 0.7rem;
  position: absolute;
  right: 0.85rem;
  top: 0.85rem;
  z-index: 2;
}

.wall-modal-image {
  background: #f5f6f8;
  display: block;
  max-height: 58vh;
  object-fit: contain;
  width: 100%;
}

.submit-shell,
.sector-home {
  background: #fafafa;
}

.form-shell,
.success-panel,
.about-card,
.pricing-card,
.detail-layout,
.empty-state {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
}

.form-shell,
.empty-state {
  padding: 1.25rem;
}

.empty-state {
  max-width: 520px;
  text-align: center;
}

.minimal-form .form-control,
.minimal-form .form-select,
.form-control,
.form-select {
  border-color: #dfe2e8;
  border-radius: 14px;
  padding: 0.8rem 0.9rem;
}

.form-control:focus,
.form-select:focus {
  border-color: #111214;
  box-shadow: 0 0 0 0.18rem rgba(17, 18, 20, 0.08);
}

.form-label {
  color: #2d3035;
  font-size: 0.9rem;
  font-weight: 750;
}

.logo-preview-wrap {
  align-items: center;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 16px;
  display: flex;
  gap: 0.9rem;
  margin-bottom: 1rem;
  padding: 0.75rem;
}

.logo-preview-wrap img {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  height: 64px;
  object-fit: cover;
  width: 64px;
}

.logo-preview-wrap strong,
.logo-preview-wrap span {
  display: block;
}

.logo-preview-wrap span {
  color: var(--muted);
  font-size: 0.9rem;
}

.placement-board-wrap {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 0.65rem;
}

.placement-board {
  aspect-ratio: 1;
  background:
    linear-gradient(rgba(17, 18, 20, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 18, 20, 0.045) 1px, transparent 1px),
    #ffffff;
  background-size: 5% 5%;
  border: 1px solid var(--line);
  border-radius: 14px;
  cursor: crosshair;
  overflow: hidden;
  position: relative;
}

.placement-existing {
  border: 1px solid rgba(17, 18, 20, 0.22);
}

.placement-preview {
  background: rgba(17, 18, 20, 0.82);
  border: 1px solid #111214;
  min-height: 8px;
  min-width: 8px;
  position: absolute;
}

.placement-meta {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0.25rem 0.1rem;
}

.placement-meta span {
  color: var(--muted);
  font-size: 0.84rem;
}

.placement-meta strong {
  font-size: 0.88rem;
}

.success-panel {
  max-width: 620px;
  padding: 3rem 2rem;
}

.pricing-card,
.about-card {
  height: 100%;
  padding: 1.5rem;
}

.pricing-size-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
}

.pricing-size-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.9rem;
}

.pricing-size-card h2 {
  font-size: 0.95rem;
  font-weight: 800;
  margin: 0 0 0.25rem;
}

.pricing-size-card p {
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0;
}

.pricing-size-card span {
  color: var(--muted);
  font-size: 0.78rem;
}

.analytics-filters {
  align-items: end;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(180px, 220px) minmax(180px, 220px) auto;
}

.analytics-summary {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.analytics-total-card,
.analytics-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.analytics-total-card {
  padding: 1rem;
}

.analytics-total-card span {
  color: var(--muted);
  display: block;
  font-size: 0.82rem;
}

.analytics-total-card strong {
  display: block;
  font-size: 1.6rem;
  line-height: 1.1;
  margin-top: 0.25rem;
}

.analytics-panel {
  padding: 1rem;
}

.analytics-chart-meta {
  color: var(--muted);
  font-size: 0.82rem;
  margin-bottom: 0.75rem;
}

.pricing-card.featured {
  border-color: #cfd3da;
}

.price {
  font-size: 2rem;
  font-weight: 800;
  margin: 0.75rem 0;
}

.small-price {
  font-size: 1.1rem;
}

.detail-layout {
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(220px, 360px) 1fr;
  padding: 2rem;
}

.detail-logo {
  aspect-ratio: 1;
  background: var(--soft);
  border-radius: 18px;
  overflow: hidden;
}

.detail-logo img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.detail-meta {
  color: var(--muted);
  margin: 1.5rem 0;
}

@media (max-width: 992px) {
  .header-cta-group {
    align-items: flex-start;
    flex-direction: column;
    margin-top: 0.5rem;
  }

  .sector-toolbar,
  .placement-meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .detail-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 576px) {
  .analytics-filters {
    grid-template-columns: 1fr;
  }

  .sector-map {
    grid-template-columns: 34px repeat(5, 86px);
    min-width: 464px;
  }

  .clean-wall-map {
    grid-template-columns: repeat(5, 86px);
    min-width: 430px;
  }

  .sector-axis {
    min-height: 30px;
  }

  .form-shell,
  .detail-layout,
  .empty-state {
    padding: 1rem;
  }
}