:root {

  --forest: #123f32;

  --forest-deep: #0b2d24;

  --forest-soft: #eaf2ee;

  --orange: #f36b16;

  --orange-dark: #d9570b;

  --cream: #fffaf0;

  --cream-soft: #f6ecdc;

  --white: #ffffff;

  --text: #20352e;

  --muted: #6a7771;

  --border: rgba(18, 63, 50, 0.12);

  --shadow: 0 18px 45px rgba(28, 53, 44, 0.1);

}

* {

  box-sizing: border-box;

}

html {

  scroll-behavior: smooth;

}

body {

  margin: 0;

  min-width: 320px;

  min-height: 100vh;

  font-family: Arial, Helvetica, sans-serif;

  color: var(--text);

  background:

    radial-gradient(

      circle at top left,

      rgba(255, 255, 255, 0.98),

      transparent 32%

    ),

    linear-gradient(

      180deg,

      #fffdf8,

      #f5ecdd

    );

}

button,

input,

select {

  font: inherit;

}

button,

a {

  -webkit-tap-highlight-color: transparent;

}

button {

  touch-action: manipulation;

}

a {

  color: inherit;

}

/* ==========================================

   MAIN SHELL

========================================== */

.command-shell {

  min-height: 100vh;

  display: grid;

  grid-template-columns: 282px minmax(0, 1fr);

}

.command-page {

  min-width: 0;

}

/* ==========================================

   MOBILE HEADER

========================================== */

.mobile-header {

  display: none;

}

/* ==========================================

   SIDEBAR

========================================== */

.command-sidebar {

  position: sticky;

  top: 0;

  width: 282px;

  height: 100vh;

  display: flex;

  flex-direction: column;

  padding: 24px 18px;

  overflow-y: auto;

  background:

    radial-gradient(

      circle at bottom,

      rgba(34, 116, 88, 0.34),

      transparent 44%

    ),

    linear-gradient(

      180deg,

      #0d4938,

      #073126

    );

  color: white;

  box-shadow: 16px 0 45px rgba(7, 37, 29, 0.12);

}

.sidebar-brand {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 14px;

  margin-bottom: 24px;

  padding: 4px 4px 20px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.12);

}

.sidebar-brand img {

  display: block;

  width: 205px;

  height: auto;

  padding: 9px 11px;

  border-radius: 15px;

  background: white;

}

.sidebar-close {

  display: none;

}

.sidebar-nav {

  display: grid;

  gap: 6px;

}

.sidebar-link {

  position: relative;

  min-height: 48px;

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 0 14px;

  border-radius: 13px;

  color: rgba(255, 255, 255, 0.86);

  font-size: 14px;

  font-weight: 700;

  text-decoration: none;

  transition:

    background 170ms ease,

    color 170ms ease,

    transform 170ms ease;

}

.sidebar-link > span:first-child {

  width: 24px;

  font-size: 19px;

  text-align: center;

}

.sidebar-link:hover,

.sidebar-link.active {

  background:

    linear-gradient(

      135deg,

      rgba(34, 155, 111, 0.52),

      rgba(21, 112, 80, 0.75)

    );

  color: white;

  transform: translateX(2px);

}

.nav-count,

.new-badge {

  margin-left: auto;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  color: white;

  background: var(--orange);

  font-size: 11px;

  font-weight: 900;

}

.nav-count {

  width: 24px;

  height: 24px;

  border-radius: 50%;

}

.new-badge {

  min-height: 22px;

  padding: 0 8px;

  border-radius: 999px;

  text-transform: uppercase;

}

.sidebar-community-card {

  margin-top: 24px;

  padding: 20px 17px;

  border: 1px solid rgba(255, 255, 255, 0.15);

  border-radius: 20px;

  background:

    linear-gradient(

      180deg,

      rgba(255, 255, 255, 0.09),

      rgba(255, 255, 255, 0.035)

    );

}

.sidebar-community-kicker {

  margin: 0 0 10px;

  color: #a9d4c3;

  font-size: 11px;

  font-weight: 900;

  letter-spacing: 0.12em;

}

.sidebar-community-card h2 {

  margin: 0 0 10px;

  color: white;

  font-family: Georgia, "Times New Roman", serif;

  font-size: 20px;

  line-height: 1.18;

}

.sidebar-community-card p:not(.sidebar-community-kicker) {

  margin: 0;

  color: rgba(255, 255, 255, 0.7);

  font-size: 13px;

  line-height: 1.55;

}

.community-illustration {

  margin-top: 18px;

  padding: 18px 12px;

  border-radius: 16px;

  background:

    linear-gradient(

      180deg,

      rgba(255, 255, 255, 0.06),

      rgba(255, 255, 255, 0.02)

    );

  font-size: 29px;

  letter-spacing: 4px;

  text-align: center;

}

.create-pad-button {

  min-height: 54px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  margin-top: 18px;

  padding: 0 18px;

  border-radius: 14px;

  color: white;

  background:

    linear-gradient(

      135deg,

      var(--orange),

      var(--orange-dark)

    );

  font-size: 14px;

  font-weight: 900;

  text-decoration: none;

  box-shadow: 0 15px 30px rgba(243, 107, 22, 0.22);

}

/* ==========================================

   DESKTOP TOP BAR

========================================== */

.command-topbar {

  min-height: 88px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 24px;

  padding: 16px 34px;

  border-bottom: 1px solid rgba(18, 63, 50, 0.09);

  background: rgba(255, 255, 255, 0.92);

  backdrop-filter: blur(14px);

}

.topbar-weather {

  display: flex;

  align-items: center;

  gap: 11px;

}

.weather-icon {

  font-size: 30px;

}

.topbar-weather strong,

.topbar-weather small {

  display: block;

}

.topbar-weather strong {

  margin-bottom: 2px;

  color: var(--forest);

}

.topbar-weather small {

  color: var(--muted);

  font-size: 12px;

}

.topbar-actions {

  display: flex;

  align-items: center;

  gap: 12px;

}

.topbar-icon-button {

  position: relative;

  width: 44px;

  height: 44px;

  display: grid;

  place-items: center;

  border: 1px solid var(--border);

  border-radius: 13px;

  background: white;

  color: var(--forest);

  font-size: 19px;

  text-decoration: none;

  cursor: pointer;

}

.topbar-icon-button span {

  position: absolute;

  top: -5px;

  right: -5px;

  width: 21px;

  height: 21px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  color: white;

  background: var(--orange);

  font-size: 10px;

  font-weight: 900;

}

.host-profile-chip {

  display: flex;

  align-items: center;

  gap: 11px;

  margin-left: 5px;

  color: var(--forest);

  text-decoration: none;

}

.host-avatar {

  width: 43px;

  height: 43px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  color: white;

  background:

    linear-gradient(

      135deg,

      var(--forest),

      #2b785f

    );

  font-family: Georgia, "Times New Roman", serif;

  font-size: 20px;

  font-weight: 900;

}

.host-profile-chip strong,

.host-profile-chip small {

  display: block;

}

.host-profile-chip strong {

  margin-bottom: 2px;

  font-size: 14px;

}

.host-profile-chip small {

  color: var(--muted);

  font-size: 11px;

}

/* ==========================================

   MAIN CONTENT

========================================== */

.command-main {

  width: min(1480px, 100%);

  margin: 0 auto;

  padding: 34px;

}

.welcome-row {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 24px;

  margin-bottom: 24px;

}

.command-kicker,

.section-kicker {

  margin: 0 0 8px;

  color: var(--muted);

  font-size: 11px;

  font-weight: 900;

  letter-spacing: 0.12em;

  text-transform: uppercase;

}

.welcome-row h1 {

  margin: 0 0 8px;

  color: var(--forest);

  font-family: Georgia, "Times New Roman", serif;

  font-size: clamp(34px, 4vw, 50px);

  line-height: 1;

}

.welcome-row p:not(.command-kicker) {

  margin: 0;

  color: var(--muted);

  font-size: 16px;

}

.secondary-action {

  min-height: 46px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 0 18px;

  border: 1px solid var(--border);

  border-radius: 13px;

  background: white;

  color: var(--forest);

  font-size: 13px;

  font-weight: 800;

  text-decoration: none;

}

/* ==========================================

   DASHBOARD GRID

========================================== */

.dashboard-layout {

  display: grid;

  grid-template-columns: minmax(0, 1fr) 300px;

  gap: 22px;

  align-items: start;

}

.dashboard-primary {

  min-width: 0;

  display: grid;

  gap: 22px;

}

.dashboard-secondary {

  min-width: 0;

  display: grid;

  gap: 18px;

}

/* ==========================================

   SUMMARY CARDS

========================================== */

.summary-grid {

  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 14px;

}

.summary-card {

  min-height: 215px;

  display: flex;

  flex-direction: column;

  padding: 21px;

  border: 1px solid var(--border);

  border-radius: 20px;

  background:

    linear-gradient(

      180deg,

      rgba(255, 255, 255, 0.98),

      rgba(247, 234, 213, 0.36)

    );

  box-shadow: 0 12px 30px rgba(30, 53, 45, 0.07);

}

.urgent-card {

  background:

    linear-gradient(

      180deg,

      #fff7f2,

      #fffdfa

    );

}

.earnings-card {

  background:

    linear-gradient(

      180deg,

      #fff9e9,

      #fffdfa

    );

}

.summary-card-icon {

  width: 42px;

  height: 42px;

  display: grid;

  place-items: center;

  margin-bottom: 16px;

  border-radius: 14px;

  background: rgba(18, 63, 50, 0.07);

  font-size: 21px;

}

.urgent-card .summary-card-icon {

  background: rgba(243, 107, 22, 0.11);

}

.earnings-card .summary-card-icon {

  background: rgba(232, 174, 40, 0.16);

}

.summary-number,

.summary-date,

.summary-money {

  color: var(--forest);

  font-family: Georgia, "Times New Roman", serif;

  font-weight: 800;

  line-height: 1;

}

.summary-number {

  font-size: 42px;

}

.summary-date {

  font-size: 29px;

}

.summary-money {

  font-size: 32px;

}

.summary-eyebrow {

  margin: 0 0 8px;

  color: var(--muted);

  font-size: 12px;

  font-weight: 800;

}

.summary-card h2 {

  margin: 9px 0 4px;

  color: var(--forest);

  font-size: 15px;

}

.summary-card p:not(.summary-eyebrow):not(.positive-change) {

  margin: 0;

  color: var(--muted);

  font-size: 12px;

  line-height: 1.4;

}

.summary-card a {

  margin-top: auto;

  padding-top: 18px;

  color: var(--orange-dark);

  font-size: 12px;

  font-weight: 900;

  text-decoration: none;

}

.positive-change {

  color: #138249;

}

.warm-change {

  color: var(--orange-dark);

}

/* ==========================================

   GENERAL CARDS

========================================== */

.dashboard-card,

.side-card {

  border: 1px solid var(--border);

  background: rgba(255, 255, 255, 0.95);

  box-shadow: var(--shadow);

}

.dashboard-card {

  padding: 24px;

  border-radius: 22px;

}

.side-card {

  padding: 19px;

  border-radius: 19px;

}

.dashboard-section-header,

.side-card-header {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 16px;

}

.dashboard-section-header {

  margin-bottom: 20px;

}

.dashboard-section-header h2,

.side-card h2 {

  margin: 0;

  color: var(--forest);

  font-family: Georgia, "Times New Roman", serif;

}

.dashboard-section-header h2 {

  font-size: 28px;

}

.dashboard-section-header h2 span {

  color: var(--muted);

  font-family: Arial, Helvetica, sans-serif;

  font-size: 15px;

}

.dashboard-section-header p:not(.section-kicker) {

  margin: 7px 0 0;

  color: var(--muted);

  font-size: 13px;

}

.side-card h2 {

  font-size: 19px;

}

.dashboard-section-header select,

.radar-header-actions select {

  min-height: 42px;

  padding: 0 14px;

  border: 1px solid var(--border);

  border-radius: 12px;

  background: white;

  color: var(--forest);

  font-size: 12px;

  font-weight: 800;

}

.section-link,

.side-card-header a {

  color: var(--forest);

  font-size: 11px;

  font-weight: 900;

  text-decoration: none;

}

/* ==========================================

   RADAR

========================================== */

.radar-header-actions {

  display: flex;

  gap: 8px;

}

.icon-action {

  width: 42px;

  height: 42px;

  display: grid;

  place-items: center;

  border: 1px solid var(--border);

  border-radius: 12px;

  background: white;

  color: var(--forest);

  cursor: pointer;

}

.radar-tabs {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-bottom: 16px;

}

.radar-tab {

  min-height: 39px;

  padding: 0 17px;

  border: 1px solid var(--border);

  border-radius: 11px;

  background: white;

  color: var(--forest);

  font-size: 12px;

  font-weight: 800;

  cursor: pointer;

}

.radar-tab.active {

  color: white;

  background: var(--forest);

  border-color: var(--forest);

}

.radar-map {

  position: relative;

  min-height: 470px;

  overflow: hidden;

  border: 1px solid rgba(18, 63, 50, 0.1);

  border-radius: 20px;

  background:

    linear-gradient(

      rgba(255, 255, 255, 0.68),

      rgba(255, 255, 255, 0.68)

    ),

    repeating-linear-gradient(

      0deg,

      transparent 0 48px,

      rgba(18, 63, 50, 0.055) 48px 50px

    ),

    repeating-linear-gradient(

      90deg,

      transparent 0 62px,

      rgba(18, 63, 50, 0.05) 62px 64px

    ),

    linear-gradient(

      135deg,

      #e9f1e9,

      #f7ead5

    );

}

.map-road {

  position: absolute;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.9);

  box-shadow: 0 0 0 3px rgba(229, 196, 142, 0.22);

}

.road-one {

  width: 120%;

  height: 8px;

  top: 31%;

  left: -10%;

  transform: rotate(-7deg);

}

.road-two {

  width: 115%;

  height: 8px;

  top: 67%;

  left: -6%;

  transform: rotate(8deg);

}

.road-three {

  width: 8px;

  height: 120%;

  top: -10%;

  left: 43%;

  transform: rotate(5deg);

}

.road-four {

  width: 8px;

  height: 115%;

  top: -8%;

  left: 72%;

  transform: rotate(-9deg);

}

.radar-radius {

  position: absolute;

  top: 50%;

  left: 50%;

  width: 310px;

  height: 310px;

  display: grid;

  place-items: center;

  border: 3px dashed rgba(18, 99, 70, 0.66);

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.13);

  transform: translate(-50%, -50%);

}

.my-pad-pin {

  width: 62px;

  height: 62px;

  display: grid;

  place-items: center;

  border: 7px solid white;

  border-radius: 50%;

  background: var(--forest);

  font-size: 27px;

  box-shadow: 0 12px 28px rgba(18, 63, 50, 0.28);

}

.radar-centre-label {

  position: absolute;

  top: calc(50% + 48px);

  left: 50%;

  padding: 6px 10px;

  border-radius: 999px;

  background: white;

  color: var(--forest);

  font-size: 11px;

  font-weight: 900;

  transform: translateX(-50%);

}

.demand-bubble {

  position: absolute;

  width: 134px;

  height: 134px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 5px;

  padding: 18px;

  border: 1px solid rgba(18, 63, 50, 0.13);

  border-radius: 50%;

  color: var(--forest);

  background: rgba(255, 255, 255, 0.82);

  backdrop-filter: blur(8px);

  box-shadow: 0 14px 30px rgba(30, 53, 45, 0.12);

  text-align: center;

  cursor: pointer;

}

.demand-bubble strong {

  font-family: Georgia, "Times New Roman", serif;

  font-size: 27px;

}

.demand-bubble span {

  font-size: 11px;

  font-weight: 800;

  line-height: 1.25;

}

.bubble-one {

  top: 9%;

  left: 6%;

  background: rgba(232, 223, 255, 0.88);

  color: #4f318b;

}

.bubble-two {

  top: 10%;

  right: 7%;

  background: rgba(220, 235, 255, 0.9);

  color: #174c9c;

}

.bubble-three {

  bottom: 7%;

  left: 9%;

  background: rgba(255, 237, 202, 0.92);

  color: #a45500;

}

.bubble-four {

  right: 7%;

  bottom: 8%;

  background: rgba(224, 244, 226, 0.92);

  color: #17652c;

}

.other-host-pin {

  position: absolute;

  width: 36px;

  height: 36px;

  display: grid;

  place-items: center;

  border: 4px solid white;

  border-radius: 50%;

  background: var(--orange);

  font-size: 16px;

  box-shadow: 0 8px 18px rgba(243, 107, 22, 0.25);

}

.host-pin-one {

  top: 31%;

  left: 27%;

}

.host-pin-two {

  top: 55%;

  right: 26%;

}

.host-pin-three {

  bottom: 19%;

  left: 58%;

}

.radar-legend {

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 16px;

  margin-top: 16px;

  color: var(--muted);

  font-size: 11px;

  font-weight: 700;

}

.radar-legend span {

  display: inline-flex;

  align-items: center;

  gap: 7px;

}

.legend-marker {

  width: 11px;

  height: 11px;

  display: inline-block;

  border-radius: 50%;

}

.your-pad-marker {

  background: var(--forest);

}

.host-marker {

  background: var(--orange);

}

.demand-marker {

  background: #6847ac;

}

.tonight-marker {

  background: #2d68bc;

}

.ev-marker {

  background: #e79a21;

}

.radar-privacy-note {

  margin: 18px 0 0;

  padding: 13px 15px;

  border-radius: 13px;

  background: rgba(18, 63, 50, 0.055);

  color: var(--forest);

  font-size: 12px;

  font-weight: 700;

  line-height: 1.45;

}

/* ==========================================

   PERFORMANCE

========================================== */

.performance-grid {

  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 12px;

}

.performance-card {

  padding: 18px;

  border: 1px solid var(--border);

  border-radius: 17px;

  background:

    linear-gradient(

      180deg,

      white,

      rgba(247, 234, 213, 0.3)

    );

}

.performance-card > span {

  display: block;

  color: var(--muted);

  font-size: 12px;

  font-weight: 700;

}

.performance-card > strong {

  display: inline-block;

  margin-top: 8px;

  color: var(--forest);

  font-family: Georgia, "Times New Roman", serif;

  font-size: 31px;

}

.performance-card > small {

  margin-left: 7px;

  font-size: 11px;

  font-weight: 900;

}

.mini-chart {

  height: 44px;

  display: flex;

  align-items: flex-end;

  gap: 5px;

  margin-top: 15px;

}

.mini-chart i {

  flex: 1;

  min-width: 4px;

  border-radius: 999px 999px 2px 2px;

  background: #2a9a60;

}

.orange-chart i {

  background: var(--orange);

}

/* ==========================================

   PAD CARD

========================================== */

.pad-card {

  display: grid;

  grid-template-columns: 210px minmax(0, 1fr) 126px;

  gap: 22px;

  padding: 18px;

  border: 1px solid var(--border);

  border-radius: 20px;

  background:

    linear-gradient(

      180deg,

      #fff,

      #fffaf4

    );

}

.pad-image {

  position: relative;

  min-height: 190px;

  overflow: hidden;

  border-radius: 16px;

  background:

    linear-gradient(

      135deg,

      #dbe7db,

      #f3dcb6

    );

}

.pad-image-placeholder {

  height: 100%;

  display: grid;

  place-items: center;

  font-size: 64px;

}

.live-badge {

  position: absolute;

  z-index: 2;

  top: 11px;

  left: 11px;

  padding: 6px 9px;

  border-radius: 999px;

  color: white;

  background: #248950;

  font-size: 10px;

  font-weight: 900;

  text-transform: uppercase;

}

.pad-location {

  margin: 0 0 6px;

  color: var(--muted);

  font-size: 12px;

}

.pad-information h3 {

  margin: 0 0 15px;

  color: var(--forest);

  font-family: Georgia, "Times New Roman", serif;

  font-size: 26px;

}

.pad-amenities {

  display: flex;

  flex-wrap: wrap;

  gap: 8px 14px;

  color: var(--muted);

  font-size: 12px;

  font-weight: 700;

}

.pad-metrics {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 12px;

  margin-top: 22px;

}

.pad-metrics div {

  padding: 13px;

  border: 1px solid var(--border);

  border-radius: 13px;

  background: rgba(255, 255, 255, 0.75);

}

.pad-metrics strong,

.pad-metrics span {

  display: block;

}

.pad-metrics strong {

  margin-bottom: 5px;

  color: var(--forest);

  font-family: Georgia, "Times New Roman", serif;

  font-size: 22px;

}

.pad-metrics span {

  color: var(--muted);

  font-size: 10px;

}

.pad-actions {

  display: grid;

  align-content: start;

  gap: 8px;

}

.pad-actions a,

.pad-actions button {

  min-height: 43px;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 1px solid var(--border);

  border-radius: 12px;

  background: white;

  color: var(--forest);

  font-size: 12px;

  font-weight: 800;

  text-decoration: none;

  cursor: pointer;

}

.add-pad-banner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  margin-top: 16px;

  padding: 16px 18px;

  border: 1px dashed rgba(243, 107, 22, 0.4);

  border-radius: 16px;

  background: #fffaf5;

}

.add-pad-banner > div {

  display: flex;

  align-items: center;

  gap: 12px;

}

.add-pad-banner > div > span {

  font-size: 26px;

}

.add-pad-banner strong,

.add-pad-banner small {

  display: block;

}

.add-pad-banner strong {

  margin-bottom: 3px;

  color: var(--forest);

  font-size: 14px;

}

.add-pad-banner small {

  color: var(--muted);

  font-size: 11px;

}

.add-pad-banner a {

  min-height: 42px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 0 17px;

  border: 1px solid rgba(243, 107, 22, 0.38);

  border-radius: 12px;

  color: var(--orange-dark);

  background: white;

  font-size: 12px;

  font-weight: 900;

  text-decoration: none;

}

/* ==========================================

   OPPORTUNITY

========================================== */

.opportunity-banner {

  display: grid;

  grid-template-columns: 110px minmax(0, 1fr) auto;

  align-items: center;

  gap: 18px;

  padding: 21px;

  border: 1px solid rgba(243, 107, 22, 0.2);

  border-radius: 20px;

  background:

    linear-gradient(

      135deg,

      #fff8ec,

      #fffefb

    );

  box-shadow: 0 12px 28px rgba(243, 107, 22, 0.08);

}

.opportunity-art {

  min-height: 82px;

  display: grid;

  place-items: center;

  border-radius: 16px;

  background: rgba(18, 63, 50, 0.07);

  font-size: 33px;

  text-align: center;

}

.opportunity-banner h2 {

  margin: 0 0 5px;

  color: var(--forest);

  font-family: Georgia, "Times New Roman", serif;

  font-size: 23px;

}

.opportunity-banner p:not(.section-kicker) {

  margin: 0;

  color: var(--muted);

  font-size: 12px;

  line-height: 1.45;

}

.opportunity-banner a {

  min-height: 48px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 0 20px;

  border-radius: 13px;

  color: white;

  background:

    linear-gradient(

      135deg,

      var(--orange),

      var(--orange-dark)

    );

  font-size: 12px;

  font-weight: 900;

  text-decoration: none;

}

/* ==========================================

   RIGHT SIDEBAR CARDS

========================================== */

.glance-list {

  margin-top: 12px;

}

.glance-list > div {

  padding: 14px 0;

  border-bottom: 1px solid var(--border);

}

.glance-list > div:last-child {

  border-bottom: 0;

}

.glance-list span,

.glance-list strong,

.glance-list small {

  display: block;

}

.glance-list span {

  color: var(--muted);

  font-size: 11px;

}

.glance-list strong {

  margin-top: 5px;

  color: var(--forest);

  font-family: Georgia, "Times New Roman", serif;

  font-size: 25px;

}

.glance-list small {

  margin-top: 5px;

  color: var(--muted);

  font-size: 10px;

}

.attention-number {

  color: var(--orange-dark) !important;

}

.stay-row,

.request-preview,

.message-preview {

  border-bottom: 1px solid var(--border);

}

.stay-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  padding: 15px 0;

}

.stay-row strong,

.stay-row span {

  display: block;

}

.stay-row strong {

  margin-bottom: 4px;

  color: var(--forest);

  font-size: 12px;

}

.stay-row > div span {

  color: var(--muted);

  font-size: 11px;

}

.status-badge {

  padding: 6px 8px;

  border-radius: 999px;

  font-size: 9px;

  font-weight: 900;

}

.status-badge.confirmed {

  color: #17623a;

  background: #e5f4e9;

}

.status-badge.pending {

  color: #926106;

  background: #fff1c8;

}

.request-count {

  min-width: 26px;

  height: 26px;

  display: inline-grid;

  place-items: center;

  border-radius: 50%;

  color: white;

  background: var(--orange);

  font-size: 11px;

  font-weight: 900;

}

.request-preview {

  display: grid;

  grid-template-columns: 39px minmax(0, 1fr);

  gap: 11px;

  padding: 15px 0;

}

.request-avatar,

.message-avatar {

  display: grid;

  place-items: center;

  border-radius: 50%;

  color: white;

  background: var(--forest);

  font-weight: 900;

}

.request-avatar {

  width: 39px;

  height: 39px;

}

.request-preview strong,

.request-preview span,

.request-preview small {

  display: block;

}

.request-preview strong {

  margin-bottom: 3px;

  color: var(--forest);

  font-size: 12px;

}

.request-preview span {

  margin-bottom: 3px;

  color: var(--muted);

  font-size: 11px;

}

.request-preview small {

  color: var(--orange-dark);

  font-size: 10px;

  font-weight: 800;

}

.message-preview {

  display: grid;

  grid-template-columns: 39px minmax(0, 1fr) auto;

  gap: 10px;

  padding: 15px 0;

}

.message-avatar {

  width: 39px;

  height: 39px;

}

.message-preview strong,

.message-preview span {

  display: block;

}

.message-preview strong {

  margin-bottom: 3px;

  color: var(--forest);

  font-size: 12px;

}

.message-preview span {

  color: var(--muted);

  font-size: 10px;

  line-height: 1.4;

}

.message-preview > small {

  color: var(--muted);

  font-size: 9px;

}

.full-width-side-button {

  width: 100%;

  min-height: 42px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-top: 14px;

  border: 1px solid var(--border);

  border-radius: 12px;

  background: white;

  color: var(--forest);

  font-size: 11px;

  font-weight: 900;

  text-decoration: none;

  cursor: pointer;

}

.reputation-score {

  display: grid;

  justify-items: center;

  gap: 5px;

  padding: 18px 0;

}

.reputation-score strong {

  color: var(--forest);

  font-family: Georgia, "Times New Roman", serif;

  font-size: 47px;

}

.reputation-score span {

  letter-spacing: 2px;

}

.reputation-score small {

  color: var(--muted);

  font-size: 11px;

}

.reputation-details {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 9px;

}

.reputation-details div {

  padding: 12px;

  border: 1px solid var(--border);

  border-radius: 12px;

  background: #fffaf5;

}

.reputation-details span,

.reputation-details strong {

  display: block;

}

.reputation-details span {

  margin-bottom: 5px;

  color: var(--muted);

  font-size: 9px;

}

.reputation-details strong {

  color: var(--forest);

  font-size: 15px;

}

.quick-actions-card a,

.quick-actions-card button {

  width: 100%;

  min-height: 47px;

  display: grid;

  grid-template-columns: 30px minmax(0, 1fr) auto;

  align-items: center;

  gap: 8px;

  padding: 0;

  border: 0;

  border-bottom: 1px solid var(--border);

  color: var(--forest);

  background: transparent;

  font-size: 11px;

  font-weight: 800;

  text-align: left;

  text-decoration: none;

  cursor: pointer;

}

.quick-actions-card a:last-child,

.quick-actions-card button:last-child {

  border-bottom: 0;

}

.quick-actions-card a > span,

.quick-actions-card button > span {

  text-align: center;

  font-size: 18px;

}

/* ==========================================

   BACKDROP

========================================== */

.sidebar-backdrop {

  position: fixed;

  z-index: 998;

  inset: 0;

  background: rgba(7, 37, 29, 0.58);

  backdrop-filter: blur(4px);

}

.sidebar-backdrop[hidden] {

  display: none;

}

/* ==========================================

   TABLET

========================================== */

@media (max-width: 1180px) {

  .command-shell {

    grid-template-columns: 232px minmax(0, 1fr);

  }

  .command-sidebar {

    width: 232px;

  }

  .sidebar-brand img {

    width: 172px;

  }

  .dashboard-layout {

    grid-template-columns: 1fr;

  }

  .dashboard-secondary {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }

  .summary-grid,

  .performance-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }

}

/* ==========================================

   MOBILE

========================================== */

@media (max-width: 820px) {

  .command-shell {

    display: block;

  }

  .mobile-header {

    position: sticky;

    z-index: 996;

    top: 0;

    min-height: 76px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;

    padding: 10px 17px;

    border-bottom: 1px solid var(--border);

    background: rgba(255, 255, 255, 0.95);

    backdrop-filter: blur(14px);

  }

  .mobile-brand img {

    display: block;

    width: 190px;

    height: auto;

  }

  .mobile-menu-button {

    width: 46px;

    height: 46px;

    display: grid;

    place-items: center;

    border: 1px solid var(--border);

    border-radius: 13px;

    background: white;

    color: var(--forest);

    font-size: 24px;

    cursor: pointer;

  }

  .command-sidebar {

    position: fixed;

    z-index: 999;

    top: 0;

    left: 0;

    width: min(310px, 87vw);

    height: 100dvh;

    transform: translateX(-105%);

    transition: transform 220ms ease;

  }

  .command-sidebar.open {

    transform: translateX(0);

  }

  .sidebar-close {

    width: 40px;

    height: 40px;

    display: grid;

    place-items: center;

    border: 1px solid rgba(255, 255, 255, 0.18);

    border-radius: 12px;

    color: white;

    background: transparent;

    font-size: 27px;

    cursor: pointer;

  }

  .command-topbar {

    display: none;

  }

  .command-main {

    padding: 22px 14px 40px;

  }

  .welcome-row {

    display: grid;

    gap: 17px;

  }

  .welcome-row h1 {

    font-size: 38px;

  }

  .secondary-action {

    width: 100%;

  }

  .summary-grid,

  .performance-grid,

  .dashboard-secondary {

    grid-template-columns: 1fr;

  }

  .summary-card {

    min-height: 190px;

  }

  .dashboard-card {

    padding: 18px 14px;

    border-radius: 20px;

  }

  .dashboard-section-header {

    align-items: stretch;

    flex-direction: column;

  }

  .radar-header-actions {

    width: 100%;

  }

  .radar-header-actions select {

    flex: 1;

  }

  .radar-map {

    min-height: 550px;

  }

  .radar-radius {

    width: 245px;

    height: 245px;

  }

  .demand-bubble {

    width: 112px;

    height: 112px;

    padding: 12px;

  }

  .demand-bubble strong {

    font-size: 23px;

  }

  .demand-bubble span {

    font-size: 9px;

  }

  .bubble-one {

    top: 5%;

    left: 4%;

  }

  .bubble-two {

    top: 6%;

    right: 4%;

  }

  .bubble-three {

    bottom: 5%;

    left: 4%;

  }

  .bubble-four {

    right: 4%;

    bottom: 5%;

  }

  .pad-card {

    grid-template-columns: 1fr;

  }

  .pad-image {

    min-height: 230px;

  }

  .pad-metrics {

    grid-template-columns: 1fr;

  }

  .pad-actions {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }

  .pad-actions button {

    grid-column: 1 / -1;

  }

  .add-pad-banner,

  .opportunity-banner {

    align-items: stretch;

    grid-template-columns: 1fr;

  }

  .add-pad-banner {

    flex-direction: column;

  }

  .add-pad-banner a,

  .opportunity-banner a {

    width: 100%;

  }

  .opportunity-art {

    min-height: 74px;

  }

}

/* ==========================================

   SMALL MOBILE

========================================== */

@media (max-width: 430px) {

  .mobile-brand img {

    width: 165px;

  }

  .welcome-row h1 {

    font-size: 34px;

  }

  .radar-map {

    min-height: 510px;

  }

  .radar-radius {

    width: 205px;

    height: 205px;

  }

  .my-pad-pin {

    width: 54px;

    height: 54px;

    font-size: 23px;

  }

  .demand-bubble {

    width: 99px;

    height: 99px;

  }

  .other-host-pin {

    width: 32px;

    height: 32px;

  }

  .radar-legend {

    justify-content: flex-start;

  }

  .pad-information h3 {

    font-size: 23px;

  }

}
/* ==========================================

   STRIPE PAYOUT STATUS

========================================== */

.payout-status-card {

  position: relative;

  overflow: hidden;

}

.payout-status-card::before {

  content: "";

  position: absolute;

  top: -70px;

  right: -70px;

  width: 170px;

  height: 170px;

  border-radius: 50%;

  background:

    radial-gradient(

      circle,

      rgba(243, 107, 22, 0.12),

      transparent 68%

    );

  pointer-events: none;

}

.payout-status-card > * {

  position: relative;

  z-index: 1;

}

.payout-status-badge {

  min-height: 25px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 0 9px;

  border-radius: 999px;

  font-size: 9px;

  font-weight: 900;

  text-transform: uppercase;

}

.payout-status-badge.checking {

  color: #6f5d22;

  background: #fff1c8;

}

.payout-status-badge.ready {

  color: #17623a;

  background: #e3f3e8;

}

.payout-status-badge.action-required {

  color: #9a470f;

  background: #ffe1cf;

}

.payout-status-badge.restricted {

  color: #8c2f25;

  background: #fbe0dc;

}

.payout-status-body {

  display: grid;

  grid-template-columns: 48px minmax(0, 1fr);

  align-items: flex-start;

  gap: 13px;

  margin-top: 17px;

  padding: 16px;

  border: 1px solid var(--border);

  border-radius: 15px;

  background:

    linear-gradient(

      180deg,

      rgba(255, 255, 255, 0.98),

      rgba(247, 234, 213, 0.36)

    );

}

.payout-status-icon {

  width: 48px;

  height: 48px;

  display: grid;

  place-items: center;

  border-radius: 14px;

  background: rgba(18, 63, 50, 0.075);

  font-size: 23px;

}

.payout-status-body strong {

  display: block;

  margin-bottom: 5px;

  color: var(--forest);

  font-size: 14px;

}

.payout-status-body p {

  margin: 0;

  color: var(--muted);

  font-size: 11px;

  line-height: 1.45;

}

.payout-action-button {

  margin-top: 13px;

}

.payout-details-link {

  display: block;

  margin-top: 13px;

  color: var(--forest);

  font-size: 11px;

  font-weight: 900;

  text-align: center;

  text-decoration: none;

}
.payout-action-button[hidden] {

  display: none !important;

}