:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #e5e7eb;
  background: #080d18;
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body { margin: 0; min-width: 320px; min-height: 100vh; background: radial-gradient(circle at 50% 0, #172033 0, #0b1120 42%, #080d18 100%); }
button, input { font: inherit; }
button { cursor: pointer; }

.topbar {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 max(24px, calc((100vw - 1120px) / 2));
  border-bottom: 1px solid #202b3d;
  background: rgb(7 11 20 / 92%);
  color: white;
  box-shadow: 0 1px 0 rgb(255 255 255 / 8%);
}

.brand { display: flex; gap: 12px; align-items: center; color: inherit; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: #ffb020; color: #111827; font-weight: 900; font-size: 22px; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 15px; letter-spacing: .01em; }
.brand small { margin-top: 2px; color: #94a3b8; font-size: 11px; }
.local-badge { display: flex; align-items: center; gap: 8px; color: #cbd2dc; font-size: 12px; }
.local-badge span { width: 7px; height: 7px; border-radius: 50%; background: #42c47b; box-shadow: 0 0 0 4px rgb(66 196 123 / 12%); }
.topbar-actions { display: flex; align-items: center; gap: 18px; }
.logout-button { padding: 7px 11px; border: 1px solid rgb(255 255 255 / 18%); border-radius: 8px; background: transparent; color: #d9e0e9; font-size: 12px; }
.logout-button:hover { border-color: #ffb020; color: #ffca6a; }

main { width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 52px 0 80px; }
.login-layout { display: grid; min-height: calc(100vh - 72px); place-items: center; padding: 40px 0; }
.login-card { width: min(430px, 100%); padding: 38px; border: 1px solid #263247; border-radius: 20px; background: rgb(17 24 39 / 92%); box-shadow: 0 24px 70px rgb(0 0 0 / 35%); backdrop-filter: blur(12px); }
.login-icon { display: grid; width: 52px; height: 52px; margin-bottom: 24px; place-items: center; border-radius: 15px; background: #ffb020; color: #111827; font-size: 28px; font-weight: 900; }
.login-card h1 { margin-bottom: 10px; color: #f8fafc; font-size: 32px; }
.login-copy { margin-bottom: 27px; color: #9ca9bc; font-size: 14px; line-height: 1.55; }
.login-button { width: 100%; margin-top: 4px; }
.hero { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 28px; }
.eyebrow { margin: 0 0 9px; color: #ffb020; font-size: 11px; font-weight: 800; letter-spacing: .14em; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 10px; color: #f8fafc; font-size: clamp(30px, 4vw, 43px); line-height: 1.08; letter-spacing: -.035em; }
.hero-copy { max-width: 610px; margin-bottom: 0; color: #9ca9bc; font-size: 16px; line-height: 1.6; }

.primary-button, .secondary-button, .text-button, .icon-button { border: 0; border-radius: 10px; font-weight: 700; }
.primary-button { display: inline-flex; justify-content: center; align-items: center; gap: 9px; min-height: 46px; padding: 0 19px; background: #ffb020; color: #1d2638; box-shadow: 0 4px 12px rgb(179 108 0 / 18%); }
.primary-button:hover { background: #f3a310; transform: translateY(-1px); }
.primary-button:disabled { opacity: .6; cursor: wait; transform: none; }
.secondary-button { min-height: 42px; padding: 0 17px; background: #3a2b12; color: #ffca6a; }
.text-button { min-height: 42px; padding: 0 16px; background: transparent; color: #a5b1c2; }
.icon-button { width: 38px; height: 38px; background: #202a3a; color: #a5b1c2; font-size: 22px; }

.summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 22px; padding: 14px 18px; border: 1px solid #263247; border-radius: 14px; background: rgb(17 24 39 / 72%); }
.summary-card { display: flex; align-items: center; gap: 12px; }
.summary-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: #3a2b12; color: #ffbd45; font-size: 22px; }
.summary-card strong, .summary-card small { display: block; }
.summary-card strong { font-size: 20px; line-height: 1; }
.summary-card small { margin-top: 4px; color: #8e9bad; }
.summary-meta { display: flex; align-items: center; justify-content: end; gap: 20px; }
.summary-meta > p { margin: 0; color: #8e9bad; font-size: 12px; }
.push-settings { display: grid; grid-template-columns: auto auto; align-items: center; justify-items: end; gap: 4px 10px; }
.notification-button, .push-disable-button { border: 0; background: transparent; font-size: 12px; font-weight: 750; }
.notification-button { min-height: 34px; padding: 0 12px; border: 1px solid #5b451d; border-radius: 8px; background: #302510; color: #ffca6a; }
.notification-button:hover { border-color: #ffb020; background: #3a2b12; }
.notification-button:disabled { opacity: .55; cursor: wait; }
.push-disable-button { padding: 5px; color: #8e9bad; }
.push-disable-button:hover { color: #ff9aa2; }
.push-settings small { grid-column: 1 / -1; color: #7f8da2; font-size: 10px; }
.push-settings small.success { color: #61d895; }
.push-settings small.error { max-width: 330px; color: #ff9aa2; }
code { padding: 3px 6px; border-radius: 5px; background: #202a3a; color: #c3ccda; }

.content-card { overflow: hidden; border: 1px solid #263247; border-radius: 18px; background: rgb(17 24 39 / 90%); box-shadow: 0 18px 55px rgb(0 0 0 / 24%); }
.section-heading { padding: 23px 26px; border-bottom: 1px solid #273245; }
.section-heading h2 { margin-bottom: 5px; font-size: 19px; }
.section-heading p { margin: 0; color: #8e9bad; font-size: 13px; }
.state-message { padding: 48px; color: #8e9bad; text-align: center; }
.empty-state { padding: 64px 24px 70px; text-align: center; }
.empty-icon { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 18px; border-radius: 18px; background: #3a2b12; color: #ffbd45; font-size: 27px; }
.empty-state h3 { margin-bottom: 7px; }
.empty-state p { margin-bottom: 20px; color: #8e9bad; }

.product-row { display: grid; grid-template-columns: minmax(0, 1fr) 180px 96px; gap: 18px; align-items: center; padding: 20px 26px; border-bottom: 1px solid #273245; }
.product-row:last-child { border-bottom: 0; }
.product-row:hover { background: #151e2e; }
.product-main { min-width: 0; }
.product-title { margin: 0 0 7px; overflow: hidden; color: #e5e7eb; font-size: 14px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.product-link { display: flex; gap: 8px; min-width: 0; color: #8e9bad; font-size: 12px; }
.product-link span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asin { padding: 4px 7px; border-radius: 6px; background: #202a3a; color: #b7c1d0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 700; }
.target { text-align: right; }
.target small { display: block; margin-bottom: 4px; color: #8b95a5; font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.target strong { color: #f8fafc; font-size: 17px; }
.target strong.unset { color: #ffbd45; font-size: 13px; }
.row-actions { display: flex; justify-content: end; gap: 6px; }
.row-button { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #344157; border-radius: 9px; background: #151e2e; color: #a5b1c2; }
.row-button:hover { border-color: #ffb020; color: #9c6000; }
.row-button.delete:hover { border-color: #8f3f47; background: #351b22; color: #ff858e; }

dialog { width: min(540px, calc(100% - 28px)); padding: 0; border: 1px solid #344157; border-radius: 18px; background: #111827; color: #e5e7eb; box-shadow: 0 28px 90px rgb(0 0 0 / 55%); }
dialog::backdrop { background: rgb(15 23 42 / 60%); backdrop-filter: blur(3px); }
#product-form { padding: 28px; }
.dialog-heading { display: flex; justify-content: space-between; align-items: start; margin-bottom: 25px; }
.dialog-heading h2 { margin-bottom: 0; font-size: 23px; }
label { display: block; margin-bottom: 19px; color: #cbd5e1; font-size: 13px; font-weight: 700; }
label > input, .price-input { width: 100%; height: 47px; margin-top: 8px; border: 1px solid #344157; border-radius: 10px; background: #0d1422; color: #f8fafc; box-shadow: 0 1px 2px rgb(0 0 0 / 14%); }
label > input { padding: 0 13px; }
input:focus, .price-input:focus-within { outline: 0; border-color: #e79a22; box-shadow: 0 0 0 3px rgb(255 176 32 / 16%); }
label small { display: block; margin-top: 6px; color: #8492a6; font-size: 11px; font-weight: 400; line-height: 1.45; }
.price-input { display: flex; align-items: center; }
.price-input span { padding-left: 13px; color: #9c6000; font-weight: 800; }
.price-input input { width: 100%; height: 100%; padding: 0 13px 0 8px; border: 0; outline: 0; background: transparent; color: #f8fafc; }
.form-error { margin: -4px 0 18px; padding: 10px 12px; border-radius: 8px; background: #351b22; color: #ff9aa2; font-size: 12px; }
.dialog-actions { display: flex; justify-content: end; gap: 8px; margin-top: 26px; padding-top: 20px; border-top: 1px solid #273245; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 20; max-width: min(360px, calc(100% - 48px)); padding: 13px 17px; border-radius: 10px; background: #172033; color: white; box-shadow: 0 12px 30px rgb(16 24 40 / 20%); font-size: 13px; opacity: 0; transform: translateY(12px); pointer-events: none; transition: .2s ease; }
.toast.visible { opacity: 1; transform: translateY(0); }
.toast.error { background: #a92b2b; }

@media (max-width: 700px) {
  .topbar { padding: 0 20px; }
  .local-badge { display: none; }
  .login-card { padding: 27px 22px; }
  main { width: min(100% - 24px, 1120px); padding-top: 34px; }
  .hero { align-items: stretch; flex-direction: column; }
  .hero .primary-button { align-self: start; }
  .summary { align-items: start; flex-direction: column; }
  .summary-meta { width: 100%; align-items: start; flex-direction: column; }
  .push-settings { justify-items: start; }
  .product-row { grid-template-columns: minmax(0, 1fr) auto; }
  .target { grid-row: 2; text-align: left; }
  .row-actions { grid-column: 2; grid-row: 1 / 3; }
  .section-heading, .product-row { padding-left: 18px; padding-right: 18px; }
  #product-form { padding: 22px; }
}