:root {
  color-scheme: dark;
  --bg: #090d15;
  --surface: #111724;
  --surface-2: #171f2f;
  --surface-3: #0c121d;
  --line: #283449;
  --line-soft: #202b3d;
  --text: #f3f6fb;
  --muted: #8d9bb0;
  --blue: #3e9cff;
  --green: #34d49b;
  --orange: #ff9b3d;
  --red: #ff6376;
}
[hidden] { display: none !important; }
.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.auth-card { width: min(460px, 100%); display: grid; gap: 18px; padding: 34px; border: 1px solid var(--line); border-radius: 24px; background: var(--panel); }
.auth-card label { display: grid; gap: 8px; color: var(--muted); }
.auth-card input { min-height: 50px; border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; background: #09111e; color: var(--text); }
.account-actions { display: flex; align-items: center; gap: 10px; }
.button.small { padding: 9px 12px; font-size: 12px; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 4% -10%, rgba(50, 116, 224, .16), transparent 30rem),
    var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input { font: inherit; }
.app-shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 30px 0 60px; }
.app-header { padding: 24px 28px 0; border: 1px solid var(--line); border-radius: 22px 22px 0 0; background: rgba(17, 23, 36, .94); }
.brand-row, .panel-heading, .subheading, .toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.eyebrow { margin: 0 0 7px; color: var(--blue); font-size: 11px; font-weight: 850; letter-spacing: .16em; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(25px, 4vw, 38px); letter-spacing: -.035em; }
h2 { margin-bottom: 5px; font-size: 24px; letter-spacing: -.02em; }
h3 { margin: 0; font-size: 16px; }
.search-icon { color: var(--blue); }
.system-pill { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 12px; }
.system-pill span, .live i { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(52, 212, 155, .1); }
.world-clocks { display: flex; gap: 22px; margin-top: 22px; color: var(--muted); font-size: 12px; }
.world-clocks div { display: flex; gap: 7px; }
.world-clocks strong { color: #cbd5e2; font-variant-numeric: tabular-nums; }
.tabs { display: flex; gap: 6px; margin-top: 18px; border-bottom: 1px solid var(--line); }
.tabs button { padding: 12px 14px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); cursor: default; }
.tabs button.active { border-bottom-color: var(--orange); color: var(--text); }
.tabs button span { margin-left: 4px; padding: 2px 7px; border-radius: 999px; background: rgba(255, 155, 61, .15); color: var(--orange); font-size: 11px; }

.toolbar { min-height: 66px; padding: 12px 20px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 22px 22px; background: #0e1420; }
.button { border: 0; border-radius: 10px; padding: 11px 15px; color: white; font-weight: 760; cursor: pointer; }
.primary { background: #187dd8; }
.cart-toggle { margin-left: auto; background: #28364d; color: #dbe5f2; }
.cart-toggle.enabled { border-color: rgba(255, 155, 61, .55); background: rgba(255, 155, 61, .15); color: var(--orange); }
.toolbar-stat { display: grid; gap: 2px; padding-left: 18px; border-left: 1px solid var(--line); }
.toolbar-stat span { color: var(--muted); font-size: 10px; }
.toolbar-stat strong { color: #dbe5f2; font-size: 13px; }

.panel { margin-top: 16px; padding: 26px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(145deg, rgba(19, 27, 42, .97), rgba(13, 19, 30, .97)); box-shadow: 0 20px 55px rgba(0, 0, 0, .2); }
.panel-heading p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 13px; }
.limit { color: var(--muted); font-size: 12px; }
.rule-composer { margin-top: 22px; padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface-3); }
.rule-composer > label { display: block; margin-bottom: 9px; color: var(--muted); font-size: 12px; }
.composer-row { display: grid; grid-template-columns: minmax(180px, 1fr) auto auto; gap: 10px; align-items: stretch; }
input[type="text"], #keyword { width: 100%; min-width: 0; border: 1px solid #34455f; border-radius: 11px; padding: 12px 14px; background: #080e18; color: var(--text); outline: none; }
#keyword:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(62, 156, 255, .12); }
.cart-choice { display: flex !important; align-items: center; gap: 9px; min-width: 168px; margin: 0 !important; padding: 8px 12px; border: 1px solid var(--line); border-radius: 11px; color: var(--text) !important; cursor: pointer; }
.cart-choice input { width: 17px; height: 17px; accent-color: var(--orange); }
.cart-choice span { display: grid; }
.cart-choice strong { font-size: 12px; }
.cart-choice small { color: var(--muted); font-size: 10px; }
.add { background: #2e4668; }
.safety-note, #form-message { margin: 9px 0 0; font-size: 11px; }
.safety-note { color: var(--muted); }
#form-message { min-height: 15px; color: var(--green); }

.empty-state { display: grid; place-items: center; min-height: 210px; margin-top: 18px; border: 1px dashed #334158; border-radius: 15px; text-align: center; background: rgba(8, 14, 24, .3); }
.empty-state > * { margin-left: 18px; margin-right: 18px; }
.empty-state h3 { margin-top: 9px; }
.empty-state p { max-width: 400px; margin-bottom: 0; color: var(--muted); font-size: 13px; }
.empty-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(62, 156, 255, .11); color: var(--blue); font-size: 25px; }
.subheading { margin-top: 22px; padding: 0 2px 12px; border-bottom: 1px solid var(--line-soft); }
.subheading > div { display: flex; align-items: center; gap: 9px; }
.subheading > span { color: var(--muted); font-size: 11px; }
.new-mark { padding: 3px 5px; border-radius: 5px; background: rgba(62, 156, 255, .12); color: var(--blue); font-size: 9px; font-weight: 850; }
.cart-mark { font-size: 15px; }
.keyword-rules { display: grid; gap: 9px; margin-top: 12px; }
.keyword { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 13px; background: #121a28; }
.keyword > span:first-child { font-weight: 760; }
.keyword button { border: 1px solid #344157; border-radius: 8px; padding: 6px 10px; background: transparent; color: var(--muted); cursor: pointer; font-size: 12px; }
.keyword button.keyword-mode { border-color: rgba(52, 212, 155, .25); background: rgba(52, 212, 155, .07); color: var(--green); font-weight: 750; }
.keyword button.keyword-mode.auto { border-color: rgba(255, 155, 61, .28); background: rgba(255, 155, 61, .08); color: var(--orange); }
.results-section { margin-top: 26px; }
.results-heading { margin-top: 0; }
.products { display: grid; gap: 9px; margin-top: 12px; }
.product { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 15px 16px; border: 1px solid var(--line); border-radius: 13px; background: #0c121d; }
.product h3 { margin-bottom: 7px; }
.meta { display: flex; gap: 11px; flex-wrap: wrap; color: var(--muted); font-size: 12px; }
.product-action { color: var(--green); }
.product a { color: var(--blue); text-decoration: none; }
.status { white-space: nowrap; font-size: 12px; font-weight: 750; }
.status.in-stock { color: var(--green); }
.status.out-of-stock { color: var(--red); }
.empty-results { margin-top: 12px; padding: 28px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); text-align: center; font-size: 13px; }

.activity-panel { padding-bottom: 12px; }
.panel-heading.compact { padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.live { color: var(--muted); font-size: 11px; }
.timeline { margin-top: 0; }
.event { display: grid; grid-template-columns: 90px 80px 1fr; gap: 14px; padding: 14px 2px; border-bottom: 1px solid var(--line-soft); color: var(--muted); font-size: 12px; }
.event strong { color: var(--text); }
.event-out_of_stock { color: var(--red) !important; }
.event-in_stock { color: var(--green) !important; }
.event-cart { color: var(--orange) !important; }
.event p { margin: 0; }

@media (max-width: 760px) {
  .app-shell { width: min(100% - 18px, 680px); padding-top: 9px; }
  .app-header { padding: 19px 17px 0; }
  .brand-row { align-items: flex-start; }
  .system-pill { display: none; }
  .world-clocks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px 15px; }
  .tabs { overflow-x: auto; }
  .tabs button { white-space: nowrap; padding: 11px 9px; font-size: 12px; }
  .toolbar { display: grid; grid-template-columns: 1fr 1fr; }
  .toolbar-stat { padding-left: 10px; }
  .cart-toggle { margin-left: 0; }
  .panel { padding: 18px 16px; }
  .panel-heading { align-items: flex-start; }
  .composer-row { grid-template-columns: 1fr; }
  .cart-choice { min-height: 53px; }
  .keyword { grid-template-columns: 1fr auto; }
  .keyword button.keyword-mode { grid-column: 2; grid-row: 1; }
  .keyword button.remove-rule { grid-column: 2; grid-row: 2; }
  .product { grid-template-columns: 1fr; }
  .status { justify-self: start; }
  .event { grid-template-columns: 70px 1fr; }
  .event p { grid-column: 1 / -1; }
}