@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');

:root {
  --bg: #101112;
  --surface: #17191a;
  --surface2: #1d2021;
  --text: #e9e9e7;
  --muted: #858b88;
  --border: #292d2c;
  --green: #8fbd9b;
  --green-dark: #26372c;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
}

.app {
  max-width: 1180px;
  margin: auto;
  padding: 46px 28px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 42px;
  padding-bottom: 25px;
  border-bottom: 1px solid var(--border);
}

.eyebrow {
  color: var(--green);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  margin: 0 0 10px;
}

h1 {
  font-family: 'Manrope', sans-serif;
  font-size: 36px;
  letter-spacing: -1.8px;
  margin: 0;
  font-weight: 800;
}

.subtitle {
  color: var(--muted);
  font-size: 13px;
  margin-top: 9px;
}

.status {
  border: 1px solid #39433c;
  color: var(--green);
  padding: 7px 11px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
}

.layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 27px;
}

h2 {
  font-family: 'Manrope', sans-serif;
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 25px;
  letter-spacing: -0.3px;
}

label {
  display: block;
  color: #a2a8a4;
  font-size: 11px;
  font-weight: 600;
  margin-top: 19px;
}

input {
  width: 100%;
  margin-top: 8px;
  padding: 12px 13px;
  background: #111314;
  color: var(--text);
  border: 1px solid #303534;
  border-radius: 5px;
  outline: none;
  font: inherit;
  font-size: 13px;
  transition: border-color .15s, background .15s;
}

input:hover {
  border-color: #444b47;
}

input:focus {
  border-color: #729b7d;
  background: #151918;
}

button {
  background: #779c80;
  color: #101712;
  border: 1px solid #779c80;
  border-radius: 5px;
  padding: 12px 17px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: .15s;
}

button:hover {
  background: #91b69a;
  border-color: #91b69a;
}

#calculate {
  width: 100%;
  margin-top: 27px;
}

.section-title {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.main-result {
  background: #1b2520;
  border: 1px solid #34443a;
  border-radius: 6px;
  padding: 24px;
  margin: 20px 0 25px;
}

.main-result span {
  display: block;
  color: #a4b9a9;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
}

.main-result strong {
  display: block;
  color: #a1d2ac;
  font-family: 'Manrope', sans-serif;
  font-size: 40px;
  letter-spacing: -2px;
  margin: 13px 0 8px;
}

.main-result small {
  color: #8caa95;
  font-size: 11px;
}

.result-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 0;
  border-bottom: 1px solid #282d2b;
  font-size: 12px;
}

.result-row span {
  color: #929995;
}

.result-row strong {
  color: #dedfdd;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.suggestion {
  background: #131716;
  border: 1px solid #303a33;
  border-radius: 5px;
  padding: 19px;
  margin-top: 23px;
}

.suggestion span {
  display: block;
  color: #929d94;
  font-size: 11px;
}

.suggestion strong {
  display: block;
  color: #c2d7c6;
  font-family: 'Manrope', sans-serif;
  font-size: 26px;
  letter-spacing: -1px;
  margin-top: 9px;
}

.projects {
  margin-top: 18px;
}

.save-area {
  display: flex;
  align-items: center;
  gap: 10px;
}

.save-area input {
  flex: 1;
}

.save-area button {
  white-space: nowrap;
  margin-top: 8px;
}

#projectList {
  margin-top: 18px;
  color: var(--muted);
  font-size: 12px;
}

.project-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.project-item strong {
  color: var(--text);
  font-size: 12px;
}

.project-actions {
  display: flex;
  gap: 7px;
}

.project-actions button {
  padding: 8px 11px;
  font-size: 10px;
}

.project-actions .delete {
  background: transparent;
  color: #c78d8d;
  border-color: #493333;
}

.project-actions .delete:hover {
  background: #352424;
}

footer {
  color: #656d68;
  text-align: center;
  padding: 32px 0 10px;
  font-size: 10px;
  letter-spacing: .3px;
}

@media (max-width: 750px) {
  .app {
    padding: 25px 14px;
  }

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

  .save-area {
    flex-direction: column;
    align-items: stretch;
  }

  .save-area button {
    margin-top: 0;
  }

  h1 {
    font-size: 31px;
  }

  .panel {
    padding: 20px;
  }
}

.brand-name {
  display: flex;
  align-items: center;
  gap: 0;
  font-family: 'Manrope', sans-serif;
  font-size: 37px;
  font-weight: 800;
  letter-spacing: -2px;
}

.brand-accent {
  color: #8fbd9b;
}

.brand-dot {
  width: 7px;
  height: 7px;
  background: #8fbd9b;
  border-radius: 50%;
  margin: 19px 0 0 5px;
}

.brand-tagline {
  color: #78827b;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  margin: 7px 0 0;
}

.brand .subtitle {
  margin-top: 10px;
}

@media (max-width: 750px) {
  .brand-name {
    font-size: 32px;
  }
}