:root{
  --bg:#0b0f14; --surface:#0f141d; --elev:#121a26; --border:#223042;
  --fg:#f5f7fb; --muted:#b7c2d4; --accent:#ff6a00; --accent-2:#ff8a2a;
  --danger:#ff5d5f; --success:#2ecc9a; --shadow:0 10px 30px rgba(0,0,0,.28);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial;
  background:
    radial-gradient(1100px 700px at 0% -10%, #152030 0%, var(--bg) 45%),
    radial-gradient(1400px 900px at 100% 10%, #101826 0%, var(--bg) 55%);
}

/* Header */
.header{ position:sticky; top:0; z-index:20; background:rgba(12,16,22,.85); backdrop-filter: blur(10px); border-bottom:1px solid var(--border); }
.header__inner{ max-width:1100px; margin:0 auto; padding:8px 12px; display:flex; align-items:center; gap:12px; }
.brand, .header__brand{display:flex; align-items:center; gap:6px; font-weight:900; letter-spacing:.1px}
.brand span, .header__brand span{color:var(--accent)}
.brand img, .header__brand img{ width:24px; height:24px; display:block }
/* Navigation removed intentionally */

/* Main */
.container{max-width:1100px; margin:0 auto; padding:18px}

/* Hero */
.hero{ background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:16px; box-shadow:var(--shadow); }
.hero__title{margin:0 0 4px; font-size:28px}
.hero__sub{margin:0; color:var(--muted)}
.searchbar{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap}
.input{ flex: 1 1 360px; min-width:240px; background:#0e1520; color:var(--fg); border:1px solid var(--border); padding:14px 14px; border-radius:12px; font-size:16px; outline:none; }

/* Buttons */
.btn{ background:var(--accent); color:#fff; border:none; padding:14px 16px; border-radius:12px; font-weight:800; font-size:15px; cursor:pointer; transition:filter .15s ease, transform .05s ease }
.btn:hover{filter:brightness(1.06)} .btn:active{transform:translateY(1px)}
/* New toned theme button for table contact actions */
.btn-tonal{ background:#172235; color:var(--fg); border:1px solid var(--border); }
.btn-tonal:hover{ filter:brightness(1.05) }
.btn-outline{ background:transparent; color:var(--fg); border:1px solid var(--border); }
.btn-sm{ padding:8px 10px; font-size:12px; border-radius:10px; }
.btn-group{ display:flex; gap:8px; flex-wrap:wrap }

/* Controls */
.controls{ position:sticky; top:64px; z-index:10; display:flex; gap:10px; align-items:center; flex-wrap:wrap; background:var(--elev); border:1px solid var(--border); border-radius:14px; padding:10px; margin-top:16px; }
.select, .toggle{ background:#0e1520; color:var(--fg); border:1px solid var(--border); padding:10px 12px; border-radius:12px; font-size:14px; }
.toggle{display:flex; align-items:center; gap:8px} .toggle input{accent-color:var(--accent)}
.status{margin-left:auto; color:var(--muted); font-size:14px}
.status .ok{color:var(--success); font-weight:800} .status .err{color:var(--danger); font-weight:800}

/* Info strip */
.infostrip{
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:12px; margin-top:14px;
}
@media (max-width:900px){
  .infostrip{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.info{
  background:var(--elev); border:1px solid var(--border); border-radius:14px; padding:12px;
  display:flex; flex-direction:column; gap:2px;
}
.info__label{color:var(--muted); font-size:12px}
.info__value{font-weight:900; font-size:18px}

/* Results table */
.tablecard{ background:var(--surface); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow); margin-top:14px; overflow:hidden; }
.tablewrap{overflow:auto}
table{width:100%; border-collapse:separate; border-spacing:0}
th,td{padding:12px 14px; border-bottom:1px solid var(--border); text-align:left; font-size:14px}
th{ position:sticky; top:0; background:#121a28; z-index:1; color:#d7dfec; font-weight:800; text-transform:uppercase; letter-spacing:.5px; user-select:none; cursor:pointer; }
th .sort{opacity:.65; font-size:12px; margin-left:6px}
tbody tr:nth-child(even) td{background:rgba(255,255,255,.01)}
tbody tr:hover td{background:rgba(255,255,255,.03)}

/* Skeleton rows */
.skel{height:18px; border-radius:8px; background: linear-gradient(90deg, #0d1422 25%, #1a2436 37%, #0d1422 63%); background-size:400% 100%; animation:shimmer 1.2s infinite}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
.skel-row td{padding:16px 14px}

/* Footer */
.footer{margin:36px 0 12px; text-align:center; color:var(--muted); font-size:12px}

a{color:#9ecbff} a:hover{text-decoration:underline}


/* --- Visual polish tweaks --- */
.brand__name { padding-left: 6px; } /* tighter brand spacing */
.tablewrap table td { vertical-align: middle; }
.tablewrap table td:nth-child(2) strong { font-size: 15px; letter-spacing: .2px; }
.btn-tonal { box-shadow: 0 0 0 0 rgba(0,0,0,0); transition: box-shadow .15s ease, filter .15s ease; }
.btn-tonal:hover { box-shadow: 0 6px 14px rgba(0,0,0,.25); }
.infostrip .info__value { font-weight: 800; }
.controls { backdrop-filter: saturate(130%) blur(6px); }


/* --- Table stability tweaks (surgical) --- */
.tablewrap table { width: 100%; border-collapse: separate; border-spacing: 0; }
.tablewrap table th, .tablewrap table td { vertical-align: middle; }
.tablewrap table td.c-name { width: 60%; }
.tablewrap table td.c-price { width: 15%; white-space: nowrap; }
.tablewrap table td.c-updated { width: 15%; white-space: nowrap; }
.tablewrap table td.c-min { width: 10%; white-space: nowrap; }

.tablewrap .name { font-weight: 800; margin-bottom: 6px; }
.tablewrap .btn-group { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.tablewrap .btn.btn-sm { padding: 6px 8px; font-size: 12px; border-radius: 10px; }

.tablewrap .muted { color: var(--colorMuted); }


/* Keep buttons on same line as name */
.tablewrap td.c-name .name-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.tablewrap td.c-name .name{
  font-weight:800;
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.tablewrap td.c-name .btn-group{
  display:inline-flex;
  gap:8px;
  flex-shrink:0;
  white-space:nowrap;
}


/* Contact column alignment and widths */
.tablewrap table td.c-name { width: 40%; }
.tablewrap table td.c-price { width: 15%; white-space: nowrap; }
.tablewrap table td.c-updated { width: 15%; white-space: nowrap; }
.tablewrap table td.c-min { width: 10%; white-space: nowrap; }
.tablewrap table td.c-contact { width: 20%; white-space: nowrap; }

.tablewrap .btn-group { display:inline-flex; gap:8px; flex-shrink:0; white-space:nowrap; justify-content:flex-end; }
.tablewrap td.c-contact { text-align: right; }
.tablewrap .name { font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }