:root {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color: #20372f;
  background: #f5f6f2;
  font-synthesis: none;
  --ink: #20372f;
  --muted: #748078;
  --green: #39725b;
  --border: #e4e8e0;
  --panel: #fff
}
* {
  box-sizing: border-box
}
body {
  margin: 0
}
button,input,a {
  -webkit-tap-highlight-color: transparent
}
button,input {
  font: inherit
}
button,a {
  touch-action: manipulation
}
button {
  cursor: pointer
}
a {
  color: inherit
}
button:focus-visible,a:focus-visible,input:focus-visible,svg:focus-visible {
  outline: 3px solid #80b69c;
  outline-offset: 4px
}
[hidden] {
  display: none!important
}
.topbar {
  height: 82px;
  display: flex;
  align-items: center;
  padding: 0 5%;
  border-bottom: 1px solid var(--border);
  gap: 32px;
  background: #fbfcf8
}
.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.7px;
  gap: 10px
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: var(--ink);
  color: #d5ed9e;
  border-radius: 9px;
  font-size: 25px
}
.brand-dot {
  color: #79a14e;
  margin-left: -9px
}
.top-note {
  font-size: 13px;
  color: var(--muted)
}
.connection {
  margin-left: auto;
  font-size: 12px;
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--muted)
}
.connection:before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #aab4aa
}
.connection.online:before {
  background: #68976b
}
.connection.offline {
  color: #a15c37
}
.connection.offline:before {
  background: #bd7751
}
main {
  max-width: 1460px;
  margin: auto;
  padding: 48px 5% 22px
}
.page-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px
}
.eyebrow {
  font-size: 10px;
  letter-spacing: 1.8px;
  font-weight: 700;
  color: #7d897c;
  margin: 0 0 14px
}
h1 {
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -1.6px;
  margin: 0 0 12px;
  font-weight: 650
}
h1 span {
  color: #81a25e
}
.muted {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  margin: 0
}
.cadence {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  margin-right: 2px
}
.cadence small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 5px
}
.clock {
  font-size: 29px;
  font-weight: 300;
  color: #748b76
}
.workspace {
  display: grid;
  grid-template-columns: 260px minmax(0,1fr);
  gap: 32px;
  align-items: start
}
.sidebar {
  padding-top: 4px
}
.section-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 16px
}
h2,h3 {
  margin: 0
}
h2 {
  font-size: 17px;
  font-weight: 600
}
h3 {
  font-size: 14px;
  font-weight: 600
}
.count {
  font-size: 11px;
  background: #e9eee4;
  border: 1px solid #dfe6d9;
  min-width: 23px;
  height: 22px;
  padding: 2px 7px;
  border-radius: 6px;
  display: inline-grid;
  place-items: center
}
.watch-list {
  display: grid;
  gap: 10px
}
.watch-card {
  width: 100%;
  padding: 19px;
  text-align: left;
  background: #fbfcf8;
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: border-color .15s,background .15s;
  color: var(--ink);
  position: relative
}
.watch-card:hover {
  border-color: #a6b89c
}
.watch-card[aria-pressed=true] {
  background: #eef2e8;
  border-color: #9bb18b;
  box-shadow: inset 3px 0 #688657
}
.watch-market {
  display: block;
  font-size: 9px;
  letter-spacing: 1.4px;
  color: #7f8f74;
  font-weight: 700;
  margin-bottom: 12px
}
.watch-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 8px
}
.watch-city {
  font-size: 11px;
  color: var(--muted);
  display: block;
  margin-bottom: 18px
}
.watch-price {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.4px
}
.watch-status {
  font-size: 10px;
  color: #6a8663;
  display: block;
  margin-top: 8px
}
.watch-status.problem {
  color: #a16a3e
}
.sidebar-note {
  font-size: 11px;
  line-height: 1.7;
  color: #8c958a;
  padding: 17px 5px
}
.product-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px
}
.product-heading .eyebrow {
  font-size: 9px;
  letter-spacing: 1.3px;
  margin-bottom: 8px
}
.slash {
  padding: 0 6px;
  color: #bdc4b8
}
.product-heading h2 {
  font-size: 20px;
  letter-spacing: -.4px;
  line-height: 1.5;
  margin-bottom: 7px;
  max-width: 720px
}
.product-heading .muted {
  font-size: 11px
}
.external-link {
  font-size: 11px;
  text-decoration: none;
  white-space: nowrap;
  padding: 10px 0;
  border-bottom: 1px solid #b9c5b4;
  align-self: start;
  margin-top: 21px
}
.external-link span {
  margin-left: 8px
}
.overview {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 18px;
  margin-bottom: 20px
}
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 13px
}
.price-panel,.target-panel {
  padding: 24px
}
.panel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px
}
.status {
  font-size: 9px;
  line-height: 1.5;
  color: #648357;
  background: #edf3e6;
  border-radius: 4px;
  padding: 4px 7px
}
.status.problem {
  color: #9e663b;
  background: #faf0e4
}
.current-price {
  font-size: 42px;
  letter-spacing: -1.8px;
  line-height: 1.15;
  font-weight: 600;
  margin: 28px 0 12px;
  font-variant-numeric: tabular-nums
}
.price-panel .muted {
  font-size: 11px
}
.price-footer {
  border-top: 1px solid #edf0e9;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  margin-top: 22px;
  padding-top: 16px;
  font-size: 10px;
  color: #8b9589
}
.payment-tag {
  font-size: 9px;
  border: 1px solid #e4e7e0;
  padding: 3px 7px;
  border-radius: 4px;
  white-space: nowrap;
  color: #6e7f67
}
.target-panel .panel-top>span {
  font-size: 23px;
  color: #8ca478;
  line-height: 20px
}
.target-input {
  display: flex;
  align-items: center;
  border: 1px solid #d8dfd1;
  border-radius: 7px;
  background: #fcfdf9;
  margin: 20px 0 12px;
  overflow: hidden
}
.target-input:focus-within {
  border-color: #699272
}
.target-input input {
  width: 100%;
  min-width: 0;
  border: none;
  background: none;
  padding: 13px 14px;
  font-size: 20px;
  letter-spacing: -.5px;
  color: var(--ink);
  outline: none
}
.target-input input::placeholder {
  font-size: 16px;
  color: #b0b7a8
}
.target-input>span {
  padding: 0 14px;
  color: #85937d
}
.target-actions {
  display: flex;
  align-items: center;
  gap: 15px
}
.primary {
  background: #365e48;
  border: 1px solid #365e48;
  color: #fff;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 500
}
.primary:hover {
  background: #284d39
}
.primary:disabled {
  opacity: .5;
  cursor: wait
}
.text-button {
  background: none;
  border: none;
  color: #7a8874;
  padding: 8px 0;
  font-size: 11px
}
.text-button:disabled {
  opacity: .4;
  cursor: default
}
.form-message {
  font-size: 10px;
  line-height: 1.7;
  color: #8a9584;
  margin: 13px 0 0;
  min-height: 17px
}
.form-message.saved {
  color: #3c7b51
}
.form-message.invalid {
  color: #a85c36
}
.chart-panel {
  padding: 24px;
  margin-bottom: 20px
}
.chart-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center
}
.chart-heading .muted {
  font-size: 10px;
  margin-top: 6px
}
.periods {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: #f5f6f2;
  border-radius: 6px
}
.periods button {
  border: none;
  background: none;
  padding: 6px 9px;
  font-size: 10px;
  border-radius: 4px;
  color: #88927e;
  white-space: nowrap
}
.periods button[aria-pressed=true] {
  background: white;
  color: #3a563b;
  box-shadow: 0 1px 4px #24371b10
}
.chart-stats {
  display: flex;
  gap: 22px;
  font-size: 10px;
  color: #8b9585;
  margin: 27px 0 15px
}
.chart-stats strong {
  color: #52614a;
  font-weight: 500;
  margin-left: 7px
}
.chart-stats>span:last-child {
  margin-left: auto;
  font-size: 9px
}
.chart-wrap {
  width: 100%;
  overflow: hidden;
  min-height: 150px
}
#chart {
  width: 100%;
  height: auto;
  display: block;
  touch-action: pan-y
}
#chart text {
  font-family: inherit;
  font-size: 10px;
  fill: #99a18f
}
#chart .grid {
  stroke: #eef0e9;
  stroke-width: 1
}
#chart .price-path {
  fill: none;
  stroke: #60845c;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round
}
#chart .target-line {
  stroke: #b69961;
  stroke-width: 1.3;
  stroke-dasharray: 5 5
}
#chart .point {
  fill: #60845c;
  stroke: #fff;
  stroke-width: 3
}
#chart .cursor {
  stroke: #b8c7ab;
  stroke-dasharray: 4 4;
  stroke-width: 1
}
.chart-reading {
  font-size: 11px;
  color: #6c7c62;
  min-height: 18px;
  margin: 0 0 12px;
  font-variant-numeric: tabular-nums
}
.chart-legend {
  display: flex;
  align-items: center;
  gap: 22px;
  color: #94a087;
  font-size: 9px
}
.chart-legend>span {
  display: flex;
  align-items: center;
  gap: 7px
}
.legend-line {
  width: 17px;
  height: 2px;
  background: #60845c
}
.legend-target {
  width: 17px;
  border-top: 1px dashed #b69961
}
.chart-legend .chart-hint {
  margin-left: auto;
  color: #a8b09e
}
.events-panel {
  padding: 24px
}
.events-panel .panel-top .muted {
  font-size: 10px;
  margin-top: 6px
}
.events {
  list-style: none;
  margin: 18px 0 0;
  padding: 0
}
.events li {
  border-top: 1px solid #edf0e9;
  padding: 14px 0;
  display: flex;
  gap: 13px;
  align-items: start
}
.event-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8ca377;
  margin-top: 6px;
  flex-shrink: 0
}
.event-dot.warning {
  background: #c19d70
}
.event-copy {
  flex: 1;
  min-width: 0
}
.event-copy strong {
  font-size: 11px;
  font-weight: 500;
  display: block
}
.event-copy p {
  font-size: 10px;
  color: #8c9685;
  margin: 5px 0 0;
  line-height: 1.5;
  overflow-wrap: anywhere
}
.event-time {
  font-size: 9px;
  color: #9ca590;
  white-space: nowrap;
  line-height: 1.7
}
.events .no-events {
  font-size: 11px;
  color: #94a087;
  padding: 24px 0 10px
}
.empty {
  padding: 60px 30px;
  text-align: center;
  color: #7b8d70
}
.empty h2 {
  margin: 12px 0
}
.empty p {
  font-size: 13px;
  line-height: 1.6
}
.empty-symbol {
  font-size: 40px
}
.error-box {
  border: 1px solid #e7ceb4;
  background: #fff7ec;
  color: #8e613d;
  border-radius: 8px;
  font-size: 12px;
  padding: 14px;
  margin-bottom: 20px
}
.toasts {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: grid;
  gap: 10px;
  width: min(380px,calc(100vw - 32px));
  z-index: 10
}
.toast {
  background: #263f2f;
  color: #f5f9ef;
  border: 1px solid #53724d;
  border-radius: 10px;
  padding: 16px 18px;
  box-shadow: 0 8px 30px #1b332c25;
  font-size: 12px;
  display: flex;
  align-items: start;
  gap: 12px;
  line-height: 1.6
}
.toast button {
  background: none;
  color: #c8d6bd;
  border: none;
  font-size: 20px;
  margin-left: auto;
  line-height: 1;
  padding: 3px
}
footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 9px;
  line-height: 1.6;
  color: #9ba48e
}
.visually-hidden {
  position: absolute;
  clip: rect(0,0,0,0);
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap
}
@media(min-width:1500px) {
  main {
    padding-left: 32px;
    padding-right: 32px
  }
}
@media(max-width:1100px) {
  .workspace {
    grid-template-columns: 210px minmax(0,1fr);
    gap: 22px
  }
  .overview {
    grid-template-columns: 1fr
  }
  .current-price {
    margin-top: 20px
  }
  .price-panel,.target-panel,.chart-panel,.events-panel {
    padding: 21px
  }
  .price-panel {
    display: flex;
    flex-direction: column
  }
  .price-footer {
    margin-top: 16px
  }
  .product-heading {
    align-items: start
  }
  .external-link {
    font-size: 10px
  }
  .chart-stats {
    gap: 12px
  }
}
@media(max-width:720px) {
  .topbar {
    height: 67px;
    padding: 0 20px;
    gap: 15px
  }
  .brand {
    font-size: 18px
  }
  .brand-mark {
    width: 29px;
    height: 29px
  }
  .top-note {
    display: none
  }
  .connection {
    font-size: 10px
  }
  main {
    padding: 30px 18px 20px
  }
  .page-heading {
    margin-bottom: 27px;
    align-items: start
  }
  .eyebrow {
    font-size: 8px;
    letter-spacing: 1.4px;
    margin-bottom: 12px
  }
  h1 {
    font-size: 30px;
    letter-spacing: -1.1px
  }
  .page-heading>.cadence {
    display: none
  }
  .workspace {
    display: block
  }
  .section-label {
    margin-bottom: 12px
  }
  .section-label h2 {
    font-size: 13px
  }
  .watch-list {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding: 0 0 5px
  }
  .watch-card {
    min-width: 230px;
    max-width: 260px;
    padding: 16px
  }
  .watch-title {
    -webkit-line-clamp: 1;
    font-size: 13px
  }
  .watch-city {
    margin-bottom: 12px
  }
  .watch-market {
    font-size: 8px;
    margin-bottom: 8px
  }
  .watch-price {
    font-size: 18px
  }
  .watch-status {
    display: none
  }
  .sidebar-note {
    font-size: 10px;
    padding: 9px 0 19px;
    margin: 0
  }
  .product-heading {
    gap: 8px;
    margin: 3px 0 18px
  }
  .product-heading h2 {
    font-size: 18px;
    line-height: 1.45
  }
  .product-heading .eyebrow {
    font-size: 8px;
    letter-spacing: 1px
  }
  .external-link {
    font-size: 9px;
    flex-shrink: 0;
    padding-top: 6px;
    margin-top: 17px
  }
  .overview {
    gap: 12px;
    margin-bottom: 14px
  }
  .current-price {
    font-size: 40px
  }
  .price-panel,.target-panel,.chart-panel,.events-panel {
    padding: 20px
  }
  .panel-top h3,.chart-heading h3 {
    font-size: 13px
  }
  .target-input input {
    font-size: 22px
  }
  .primary {
    font-size: 12px;
    padding: 11px 16px
  }
  .text-button {
    font-size: 12px
  }
  .form-message {
    font-size: 11px
  }
  .chart-heading {
    align-items: start;
    flex-wrap: wrap;
    gap: 15px
  }
  .periods {
    margin-left: auto
  }
  .periods button {
    padding: 7px 8px
  }
  .chart-stats {
    gap: 10px;
    font-size: 9px;
    margin-top: 21px;
    flex-wrap: wrap
  }
  .chart-stats strong {
    margin-left: 4px
  }
  .chart-stats>span:last-child {
    font-size: 8px
  }
  .chart-panel {
    margin-bottom: 14px
  }
  .chart-wrap {
    min-height: 110px
  }
  .chart-legend {
    font-size: 8px;
    gap: 12px
  }
  .chart-hint {
    display: none!important
  }
  .chart-reading {
    font-size: 10px
  }
  .events-panel .panel-top .muted {
    font-size: 9px
  }
  .event-time {
    font-size: 8px
  }
  .toasts {
    right: 16px;
    bottom: 16px
  }
  footer {
    font-size: 8px;
    display: block;
    margin-top: 24px
  }
  footer>span {
    display: block;
    margin-bottom: 7px
  }
}

.add-panel { margin-bottom: 24px; padding: 24px; }
.add-fields { display: flex; align-items: end; gap: 16px; }
.add-fields>div:first-child { flex: 1; min-width: 0; }
.add-fields label { display: block; font-size: 13px; margin-bottom: 8px; }
.add-fields input,.add-fields select { width: 100%; min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--ink); font: inherit; }
.add-panel .muted { font-size: 13px; line-height: 1.6; }
.add-preview { padding: 16px; margin: 12px 0; border: 1px solid var(--border); border-radius: 8px; overflow-wrap: anywhere; }
.add-preview p { margin: 6px 0; }
button:disabled { opacity: .55; cursor: wait; }
@media (max-width: 650px) {
  .add-panel { padding: 16px; }
  .add-fields { flex-direction: column; align-items: stretch; }
}

.auth-page { max-width: 480px; margin: 10vh auto; padding: 20px; }
.auth-panel { padding: 32px; }
.auth-panel h1 { font-size: 30px; margin: 16px 0; }
.auth-panel .muted { font-size: 14px; line-height: 1.6; }
.auth-form label { display: block; margin: 16px 0 8px; }
.auth-form input { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 12px; }
.auth-form button { width: 100%; }
.current-user { font-size: 12px; overflow-wrap: anywhere; }
@media (max-width: 650px) {
  .topbar { height: auto; min-height: 82px; flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; gap: 12px; }
  .auth-panel { padding: 24px; }
}

.users-list { display: grid; gap: 16px; margin-top: 16px; }
.user-row { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(160px, 2fr); gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: 8px; }
.user-row .muted { margin: 0; }
.user-controls,.user-password-form { display: flex; align-items: center; gap: 12px; min-width: 0; }
.user-row input,.user-row select { min-width: 0; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--ink); font: inherit; }
.user-password-form input { flex: 1; width: 100%; }
.user-password-form button { flex-shrink: 0; }
@media (max-width: 800px) {
  .user-row { grid-template-columns: minmax(0, 1fr); }
  #create-user-form .add-fields { flex-direction: column; align-items: stretch; }
  .user-password-form { flex-wrap: wrap; }
}

#create-user-form .add-fields>div { flex: 1; min-width: 0; }