/* Amazon Trend Finder AI — APP Styles (dark theme, final) */
:root {
  --bg: #0b1120;
  --panel: #0f172a;
  --text: #e5edf5;
  --muted: #93a4b8;
  --stroke: #1e293b;
  --brand: #0ea5e9;
  --radius: 12px;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

/* --- Top 3 blue dots (static horizontal) --- */
.top-dots{
  display:flex;
  gap:6px;
  padding:10px 18px 6px;
}
.top-dots span{
  width:8px; height:8px; border-radius:50%;
  background: linear-gradient(180deg, #38bdf8, #0ea5e9);
  box-shadow: 0 0 10px rgba(56,189,248,.65), 0 0 2px rgba(56,189,248,.6) inset;
}

/* Header */
header{
  padding:12px 18px;
  border-top:1px solid var(--stroke);
  border-bottom:1px solid var(--stroke);
  display:flex; align-items:center; gap:10px;
}
header h1{
  margin:0; font-size:16px; font-weight:700; letter-spacing:.2px;
}

/* Controls (filters) */
.controls{
  display:grid; gap:12px;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  padding:14px 18px;
}
.controls label{
  display:block; font-size:12px; color:var(--muted); margin-bottom:4px;
}
.controls input,.controls select{
  width:100%; padding:10px; border-radius:10px;
  border:1px solid var(--stroke); background:#0b1220; color:var(--text);
}
.actions{ display:flex; align-items:end; gap:8px; }
.btn{
  padding:10px 14px; border-radius:10px; border:1px solid #134e6f;
  background:var(--brand); color:#041320; font-weight:700; cursor:pointer;
  transition:opacity .2s ease;
}
.btn:disabled{ opacity:.6; cursor:not-allowed; }

/* Summary */
.summary{
  padding:6px 18px; display:flex; gap:10px; align-items:center; color:var(--muted);
}
.pill{
  padding:3px 10px; border-radius:999px; background:#0a192f;
  border:1px solid var(--stroke); color:#c8d7ea; font-size:13px;
}

/* Inline loading (table fetch) — animated, unrelated to top dots */
.loading{ display:inline-flex; align-items:center; gap:7px; }
.loading .dot{
  width:6px; height:6px; border-radius:999px; background:var(--brand);
  animation:b 1s infinite alternate;
}
.loading .dot:nth-child(2){ animation-delay:.2s; }
.loading .dot:nth-child(3){ animation-delay:.4s; }
@keyframes b{ from{transform:translateY(0)} to{transform:translateY(-4px)} }

/* Table */
table{ width:100%; border-collapse:collapse; }
thead th{
  text-align:left; font-weight:700; font-size:13px; color:#c7d2df;
  border-bottom:1px solid var(--stroke); padding:10px 14px; user-select:none; cursor:pointer;
}
tbody td{
  border-bottom:1px solid #0e1a2b; padding:12px 14px; font-size:14px; color:#e2e8f0;
}
tbody tr{ transition:background .12s; }
tbody tr:hover{ background:#0d1728; }

/* Empty state */
#empty{ padding:12px 18px; color:var(--muted); }

/* Modal */
.modal{
  position:fixed; inset:0; background:rgba(3,12,24,.55);
  display:flex; align-items:center; justify-content:center; padding:16px;
}
.modal-card{
  background:#0a1424; border:1px solid var(--stroke); border-radius:16px;
  width:min(820px,96vw); max-height:92vh; display:flex; flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.modal-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-bottom:1px solid var(--stroke);
}
.modal-header h3{ margin:0; font-size:15px; }
.modal-header .btn{ background:#0b1220; color:#e5edf5; border:1px solid var(--stroke); }
.chart{ padding:10px 12px 16px; overflow:auto; }
.hidden{ display:none!important; }

/* Chart SVG */
svg .axis line{ stroke:#2a3b52; stroke-width:1; }
svg .axis text{ fill:#96a8bd; font-size:11px; }
svg .line{ fill:none; stroke:#38bdf8; stroke-width:2; }
svg .dot{ fill:#38bdf8; }

/* Toast */
.toast{
  position:fixed; right:12px; bottom:12px; background:#0b1220; color:#e5edf5;
  padding:10px 12px; border-radius:10px; font-size:13px; border:1px solid var(--stroke);
}

/* --------- TOP DOTS: tek kaynak (A harfine kilitli) --------- */

/* Eski kuralları tamamen etkisiz kıl (özellikle padding/gap kalıntıları) */
.top-dots { all: unset; }
.top-dots span { all: unset; }

/* Başlık kutusu */
.app-header{
  position: relative;
  /* soldaki 18px padding genel layout’unla aynı; üstte 22px alan bırakıyoruz */
  padding: 22px 18px 12px 18px;
}

.app-title{
  position: relative;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .2px;
}

/* Noktalar artık H1’in içinde; sol kenarı A ile birebir aynı */
.app-title .top-dots{
  position: absolute;
  top: -6px;   /* yükseklik (gerekirse -13 / -15 deneyebilirsin) */
  left: 0;      /* A harfinin tam başlangıcı */
  display: flex;
  gap: 6px;
  padding: 0;
  margin: 0;
}

.app-title .top-dots > span{
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(180deg, #3abef8, #139be3);
  box-shadow: 0 0 4px rgba(56,189,248,.55), 0 0 1px rgba(56,189,248,.40) inset;
  opacity: .95;
}

/* Demo banner */
.upgrade-banner{
  margin: 10px 18px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px dashed #1e293b;
  background: #0b1220;
  color: #c8d7ea;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}
.upgrade-banner .btn.small{
  padding: 8px 10px;
  font-size: 13px;
  background: #0ea5e9;
  color:#041320;
  border-radius: 8px;
  text-decoration: none;
}