:root {
  --bg: #000000;
  --surface: #080808;
  --surface-hover: #101010;
  --border: #1c1c1c;
  --border-hover: #303030;
  --text: #f5f5f5;
  --text-secondary: #a1a1a1;
  --text-muted: #666666;
  --accent: #ffffff;
  --accent-hover: #e0e0e0;
  --accent-glow: rgba(255, 255, 255, 0.06);
  --radius: 6px;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'SF Mono', 'JetBrains Mono', monospace;
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: #ffffff;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.container { max-width:1200px; margin:0 auto; padding:0 16px; }

::-webkit-scrollbar { width:3px; height:3px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

.navbar {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 0;
  position: sticky;
  top:0;
  z-index:100;
  height: 48px;
  display: flex;
  align-items: center;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width:100%;
}
.brand {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  color: #ffffff;
}
.brand-mark { color: #ffffff; font-weight: 600; }
.brand-name span { color: var(--text-secondary); font-weight: 400; }

.nav-links {
  display: flex;
  gap: 20px;
  align-items: center;
}
.nav-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 12px;
}
.nav-links a:hover { color: #ffffff; }
.nav-links a.active { color: #ffffff; }

.nav-right { display: flex; align-items: center; gap: 8px; }

.kbd-search {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #080808;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 4px 10px;
  font-size: 11px;
  color: var(--text-secondary);
  cursor: pointer;
}
.kbd-search:hover { border-color: var(--text-muted); }
.kbd-hint kbd {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 0 4px;
  font-size: 8px;
  color: var(--text-muted);
}

.hero {
  padding: 32px 0 20px;
  border-bottom: 1px solid var(--border);
}
.hero-content { max-width: 640px; }
.hero-content h1 {
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.5px;
  margin: 4px 0 4px;
}
.hero-content h1 span { color: #ffffff; font-weight: 500; }
.hero-sub {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 16px;
  font-weight: 300;
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.eyebrow .dot {
  width: 5px; height: 5px; border-radius: 50%; background: #a1a1a1;
  display: inline-block;
}

.search-wrap { margin: 12px 0 16px; }
.search-box {
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 2px 2px 12px;
  max-width: 520px;
}
.search-box:focus-within { border-color: var(--text-muted); }
.search-box i { color: var(--text-muted); font-size: 12px; }
.search-box input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 8px 10px;
  font-size: 13px;
  outline: none;
  color: var(--text);
  font-family: var(--font);
}
.search-box input::placeholder { color: var(--text-muted); font-weight: 300; }
.search-box .btn {
  background: var(--text);
  color: var(--bg);
  border: 1px solid var(--text);
  padding: 5px 14px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
}
.search-box .btn:hover { border-color: var(--text-muted); }

.pill-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  overflow-x: auto;
  padding: 4px 0 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.pill-row::-webkit-scrollbar { display:none; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 11px;
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
}
.pill:hover { border-color: var(--text-muted); color: #ffffff; }
.pill.active {
  background: #080808;
  border-color: #ffffff;
  color: #ffffff;
}
.pill .count {
  background: var(--bg);
  padding: 0 5px;
  border-radius: 2px;
  font-size: 9px;
  color: var(--text-muted);
}
.pill.active .count { background: rgba(0,0,0,0.1); color: var(--bg); }

.status-console {
  background: var(--surface);
  padding: 12px 0;
  margin-top: 16px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.console-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.console-cell { text-align: center; }
.console-cell .n {
  font-size: 18px;
  font-weight: 400;
  color: #ffffff;
}
.console-cell .l {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-top: 1px;
}

.section { padding: 24px 0 32px; }
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 6px;
}
.section-head h2 {
  font-size: 16px;
  font-weight: 500;
}
.count-label {
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 300;
}
.sort-select {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: #080808;
  color: #ffffff;
  font-size: 11px;
  cursor: pointer;
}
.sort-select:hover { border-color: var(--text-muted); }

.api-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.api-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 20px 22px;
  transition: border-color 0.2s;
  cursor: pointer;
}
.api-card:hover { border-color: var(--text-muted); }

.card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 6px;
}
.card-icon {
  font-size: 16px;
  color: #ffffff;
  background: var(--bg);
  width: 30px; height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
}
.card-body h3 {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 1px;
  color: #ffffff;
}
.card-path {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--mono);
}
.card-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 4px 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 11px;
  color: var(--text-muted);
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.card-meta .method {
  font-weight: 600;
  color: #ffffff;
  font-size: 10px;
}
.card-meta .endpoint {
  font-family: var(--mono);
  color: var(--text-secondary);
  font-size: 11px;
}
.card-meta .rating { color: #eab308; }

.card-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.card-actions .btn {
  padding: 9px 14px;
  font-size: 11px;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: #080808;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font);
  transition: all 0.2s;
  min-height: 36px;
}
.card-actions .btn-primary {
  background: #080808;
  border-color: #ffffff;
  color: #ffffff;
}
.card-actions .btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #ffffff;
}
.card-actions .btn:hover {
  border-color: var(--text-muted);
  color: #ffffff;
}
.card-actions .btn-copy {
  font-size: 10px;
  background: #080808;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 3px;
}

.skeleton-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 20px 22px;
}
.sk { background: var(--border); border-radius: 3px; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 0.3; } 50% { opacity: 0.6; } }

@media (min-width: 600px) {
  .api-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 599px) {
  .hero-content h1 { font-size: 20px; }
  .console-inner { grid-template-columns: 1fr 1fr; gap: 6px; }
  .nav-links { display: none; }
  .card-actions .btn { font-size: 9px; padding: 3px 8px; }
}

/* Subpage header layout — search/detail/category only */
body.subpage .navbar .nav-inner {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  gap: 12px;
}

body.subpage .navbar .brand {
  flex: 0 0 auto;
  min-width: 0;
  white-space: nowrap;
}

body.subpage .navbar .nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex: 1 1 auto;
  min-width: 0;
}

body.subpage .navbar .nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin-left: auto;
  white-space: nowrap;
}

body.subpage .navbar .nav-right .btn {
  white-space: nowrap;
}

@media (max-width: 700px) {
  body.subpage .navbar {
    height: 48px;
  }

  body.subpage .navbar .nav-inner {
    gap: 8px;
  }

  body.subpage .navbar .nav-links {
    display: none;
  }

  body.subpage .navbar .brand {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.subpage .navbar .nav-right {
    margin-left: auto;
  }

  body.subpage .navbar .nav-right .btn {
    padding: 4px 8px;
    font-size: 10px;
  }
}

/* FINAL MOBILE HEADER FIX — subpages only */
@media (max-width: 700px) {
  body.subpage .navbar .nav-inner {
    padding-left: 12px;
    padding-right: 12px;
    gap: 6px;
  }

  body.subpage .navbar .brand {
    font-size: 11px;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
  }

  body.subpage .navbar .brand-name {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.subpage .navbar .nav-right {
    flex: 0 0 auto;
  }

  body.subpage .navbar .nav-right .btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 7px;
    font-size: 10px;
  }
}

/* API card images */
.card-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 4px;
}

.card-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Selected category pages — pure black */

/* =========================================================
   CATEGORY PAGE — FINAL UI
   ========================================================= */

/* =========================================================
   CATEGORY PAGE — CLEAN RESPONSIVE SYSTEM
   ========================================================= */

/* =========================================================
   CATEGORY PAGES — CLEAN UI
   ========================================================= */

/* Header area */

/* Content */

/* Category directory */

/* Selected category */

/* API cards */

/* Icon + title */

/* Description */

/* Endpoint + View */

/* Empty state */

/* Footer */

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (min-width: 900px) {
}

@media (max-width: 700px) {

}

@media (max-width: 480px) {

}

@media (max-width: 360px) {

}

/* =========================================================
   FINAL CATEGORY UI — DO NOT MIX WITH OLD CATEGORY RULES
   ========================================================= */

/* ---------- page header ---------- */

/* ---------- content ---------- */

/* ---------- category directory ---------- */

/* ---------- selected category heading ---------- */

/* ---------- API list ---------- */

/* ---------- API card ---------- */

/* icon + name */

/* description */

/* bottom row */

/* ---------- empty ---------- */

/* ---------- mobile ---------- */

@media (max-width: 700px) {

}

/* ---------- phones ---------- */

@media (max-width: 480px) {

}

/* ---------- tiny phones ---------- */

@media (max-width: 360px) {

}

/* =========================================================
   FINAL CATEGORY UI — CLEAN PRODUCT LAYOUT
   Matches the main page visual language
   ========================================================= */

/* ---------- CATEGORY HEADER ---------- */

/* ---------- CATEGORY DIRECTORY ---------- */

/* ---------- API CATEGORY RESULTS ---------- */

/* Header: AI · 10 APIs */

/* ---------- API CARD ---------- */

/* Icon + title */

/* Description */

/* Endpoint + View */

/* Empty state */

/* ---------- FOOTER ---------- */

/* ---------- TABLET ---------- */

/* ---------- MOBILE ---------- */

@media (max-width: 700px) {

}

/* ---------- SMALL PHONES ---------- */

@media (max-width: 430px) {

}

/* ---------- VERY SMALL PHONES ---------- */

@media (max-width: 360px) {

}

/* CATEGORY CLEAN REDESIGN */

/* =========================================================
   CATEGORY CLEAN REDESIGN
   Presentation only — does not affect API logic
   ========================================================= */

/* Header */

/* Category directory */

/* API results */

/* API grid */

/* API cards */

/* API title */

/* Description */

/* Endpoint */

/* View */

/* Empty */

/* Footer */

/* Tablet */

/* Mobile */

@media (max-width: 650px) {

}

/* Small phones */

@media (max-width: 400px) {

}

/* =========================================================
   CATEGORY PAGE — CLEAN UI
   ========================================================= */

/* Header */

/* Category directory */

/* Selected category */

/* API cards */

/* Empty */

/* Mobile */

@media (max-width: 800px) {

}

@media (max-width: 520px) {

}

@media (max-width: 380px) {

}

/* =========================================
   CATEGORY TYPOGRAPHY + HEADER REFINEMENT
   ========================================= */

/* Category header/content */

/* Category directory boxes */

/* Subcategory API cards */

/* Better mobile proportions */
@media (max-width: 700px) {

}

/* =========================================
   CATEGORY HEADER — CLEAN HORIZONTAL LAYOUT
   ========================================= */

/* =========================================================
   CU_RIOUS TECH — CATEGORY PAGES
   AESTHETIC / COMPACT / RESPONSIVE
   ========================================================= */

/* ---------- HEADER ---------- */

/* ---------- CATEGORY HERO ---------- */

/* ---------- CATEGORY DIRECTORY ---------- */

/* ---------- SUBCATEGORY RESULT HEADER ---------- */

/* ---------- API CARDS ---------- */

/* ---------- EMPTY ---------- */

/* ---------- MOBILE ---------- */

@media (max-width: 760px) {

}

@media (max-width: 480px) {

}

/* =========================================================
   CATEGORY PAGES — CLEAN UI
   ========================================================= */

/* Category directory */

/* API cards inside a selected category */

/* Mobile */

/* ---------- TOP NAV ---------- */

/* ---------- CATEGORY TITLE ---------- */

/* ---------- CONTENT ---------- */

/* ---------- CATEGORY DIRECTORY ---------- */

/* ---------- API GRID ---------- */

/* ---------- API CARD ---------- */

/* ---------- ICON + TITLE ---------- */

/* ---------- DESCRIPTION ---------- */

/* ---------- FOOTER ---------- */

/* ---------- TABLET ---------- */

@media (max-width: 800px) {

}

/* ---------- MOBILE ---------- */

@media (max-width: 600px) {

}

/* ---------- VERY SMALL PHONES ---------- */

@media (max-width: 380px) {

}

/* ==========================================================
   CATEGORY PAGE — SINGLE CLEAN LAYOUT
   Uses existing site colors. No API logic changes.
   ========================================================== */

/* HEADER */

/* CATEGORY TITLE */

/* RESULTS */

/* CATEGORY DIRECTORY */

/* API GRID */

/* API CARD */

/* TITLE + ICON */

/* DESCRIPTION */

/* FOOTER */

/* EMPTY */

/* TABLET */

@media (max-width: 800px) {

}

/* MOBILE */

@media (max-width: 600px) {

}

/* VERY SMALL */

@media (max-width: 380px) {

}

/* =========================================================
   CATEGORY PAGE — CLEAN UI
   ========================================================= */

/* ---------- Header ---------- */

/* ---------- Category heading ---------- */

/* ---------- Top section ---------- */

/* ---------- Category boxes ---------- */

/* ---------- API cards ---------- */

/* Icon + title */

/* Description */

/* Endpoint + View */

/* Empty */

/* ---------- Responsive ---------- */

/* =========================================================
   CU_RIOUS TECH — CATEGORY PAGES
   Clean, compact, responsive UI
   ========================================================= */

/* ================= HEADER ================= */

/* ================= HEADING ================= */

/* ================= CONTENT ================= */

/* ================= CATEGORY BOXES ================= */

/* ================= API GRID ================= */

/* ================= API CARD ================= */

/* Title + icon */

/* Description */

/* Bottom row */

/* Empty state */

/* ================= RESPONSIVE ================= */

@media (max-width: 800px) {

}

@media (max-width: 600px) {

}

@media (max-width: 420px) {

}

/* =========================================================
   CU_RIOUS TECH — FINAL CATEGORY PAGE UI
   One clean system. Do not mix with old category rules.
   ========================================================= */

body.category-page {
  background: #000;
  color: #e8e8e8;
}

body.category-page main {
  width: 100%;
  min-height: calc(100vh - 120px);
}

body.category-page .container {
  width: min(1120px, calc(100% - 32px));
  margin-left: auto;
  margin-right: auto;
}

/* Topbar */
body.category-page .category-hero {
  padding: 0;
}

body.category-page .category-topbar {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid #171717;
}

body.category-page .category-brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #eee;
  text-decoration: none;
  white-space: nowrap;
}

body.category-page .category-brand-mark {
  color: #888;
}

body.category-page .category-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
}

body.category-page .category-nav a {
  color: #777;
  text-decoration: none;
  font-size: 11px;
  transition: color .2s ease;
}

body.category-page .category-nav a:hover,
body.category-page .category-nav a.active {
  color: #fff;
}

body.category-page .category-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #777;
  text-decoration: none;
  font-size: 11px;
  white-space: nowrap;
}

body.category-page .category-back:hover {
  color: #fff;
}

/* Heading */
body.category-page .category-heading {
  margin: 0;
  padding: 25px 0 24px;
}

body.category-page .category-breadcrumb {
  margin: 0 0 9px;
  color: #555;
  font-size: 11px;
  line-height: 1.4;
}

body.category-page .category-title-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
}

body.category-page .category-title-line h1 {
  margin: 0;
  padding: 0;
  color: #f5f5f5;
  font-size: 23px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.4px;
}

body.category-page .category-title-line #categoryCount {
  margin: 0;
  padding: 0;
  color: #666;
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
}

/* Content */
body.category-page .category-content {
  padding: 0 0 50px;
}

body.category-page #categoryDirectory {
  margin: 0 0 22px;
}

body.category-page #apiResults {
  width: 100%;
  margin: 0;
}

/* Category directory grid */
body.category-page .category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
}

body.category-page .category-item {
  min-width: 0;
  min-height: 70px;
  box-sizing: border-box;
  padding: 14px;
  background: #0a0a0a;
  border: 1px solid #181818;
  border-radius: 6px;
  text-decoration: none;
  color: #eee;
  transition: border-color .2s ease, background .2s ease;
}

body.category-page .category-item:hover {
  background: #0d0d0d;
  border-color: #303030;
}

/* API grid */
body.category-page .category-api-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 12px;
  margin: 0;
  padding: 0;
}

/* API card */
body.category-page .category-api-card {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 16px;
  background: #0a0a0a;
  border: 1px solid #1c1c1c;
  border-radius: 8px;
  overflow: hidden;
  transition: border-color .18s ease, transform .18s ease;
}

body.category-page .category-api-card:hover {
  border-color: #303030;
  transform: translateY(-1px);
}

/* Title row */
body.category-page .category-api-title-row {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  margin: 0;
}

body.category-page .category-api-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
  background: #111;
  border: 1px solid #202020;
  border-radius: 6px;
  font-size: 12px;
}

body.category-page .category-api-icon img {
  width: 21px;
  height: 21px;
  object-fit: contain;
  border-radius: 4px;
}

body.category-page .category-api-title-row h3 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #eee;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: -0.1px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Description */
body.category-page .category-api-description {
  margin: 10px 0 0;
  min-height: 34px;
  color: #777;
  font-size: 11px;
  line-height: 1.55;
  font-weight: 400;
}

/* Footer */
body.category-page .category-api-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 13px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid #181818;
}

body.category-page .category-api-endpoint {
  min-width: 0;
  overflow: hidden;
  color: #666;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  line-height: 1.4;
  white-space: nowrap;
  text-overflow: ellipsis;
}

body.category-page .category-api-method {
  margin-right: 5px;
  color: #999;
  font-weight: 600;
  font-size: 9px;
  letter-spacing: .3px;
}

body.category-page .category-api-view {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #ddd;
  text-decoration: none;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

body.category-page .category-api-view:hover {
  color: #fff;
}

/* Empty state */
body.category-page .category-empty {
  padding: 40px 20px;
  border: 1px solid #181818;
  border-radius: 7px;
  background: #0a0a0a;
  color: #666;
  text-align: center;
  font-size: 12px;
}

/* Mobile */
@media (max-width: 700px) {
  body.category-page .container {
    width: calc(100% - 24px);
  }

  body.category-page .category-topbar {
    gap: 10px;
  }

  body.category-page .category-brand {
    font-size: 10px;
  }

  body.category-page .category-nav {
    gap: 10px;
  }

  body.category-page .category-nav a,
  body.category-page .category-back {
    font-size: 10px;
  }

  body.category-page .category-heading {
    padding: 20px 0 18px;
  }

  body.category-page .category-title-line h1 {
    font-size: 20px;
  }

  body.category-page .category-title-line #categoryCount {
    font-size: 10px;
  }

  body.category-page .category-api-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body.category-page .category-api-card {
    padding: 14px;
  }

  body.category-page .category-api-title-row h3 {
    font-size: 13px;
  }

  body.category-page .category-api-description {
    font-size: 11px;
    min-height: 0;
  }

  body.category-page .category-api-footer {
    margin-top: 12px;
    padding-top: 9px;
    gap: 8px;
  }

  body.category-page .category-api-endpoint {
    font-size: 9px;
  }

  body.category-page .category-api-view {
    font-size: 10px;
  }

  body.category-page .category-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  body.category-page .category-item {
    padding: 14px;
  }
}

@media (max-width: 420px) {
  body.category-page .category-topbar {
    flex-wrap: wrap;
  }

  body.category-page .category-back {
    margin-left: auto;
  }

  body.category-page .category-grid {
    grid-template-columns: 1fr;
  }
}

/* Mobile nav dropdown fix */
.navbar { position: relative; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  cursor: pointer;
}

.mobile-panel {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 4px 0;
  z-index: 50;
}
.mobile-panel.open { display: flex; }
.mobile-panel a {
  padding: 12px 20px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.mobile-panel a:last-child { border-bottom: none; }
.mobile-panel a:hover { color: var(--text); background: var(--surface-hover); }

@media (max-width: 700px) {
  .nav-toggle { display: flex; }
}

/* Consistent keyboard focus state */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.api-card:focus-visible,
.category-api-card:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
  border-radius: 2px;
}

/* ================= AUTH NAVIGATION ================= */

.account-nav-wrap{
  position:relative;
}

.nav-signin{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:30px;
  padding:0 10px;
  border:1px solid var(--border);
  border-radius:4px;
  color:#fff;
  text-decoration:none;
  font-size:11px;
  transition:.15s ease;
}

.nav-signin:hover{
  border-color:#555;
  background:#0d0d0d;
}

.account-nav-button{
  display:none;
  align-items:center;
  gap:5px;
  height:30px;
  padding:0 9px;
  border:1px solid var(--border);
  border-radius:4px;
  background:transparent;
  color:#fff;
  font-family:inherit;
  font-size:11px;
  cursor:pointer;
}

.account-nav-button:hover{
  border-color:#555;
  background:#0d0d0d;
}

.account-nav-chevron{
  color:#777;
  font-size:9px;
}

.account-dropdown{
  position:absolute;
  top:38px;
  right:0;
  width:180px;
  padding:6px;
  display:none;
  z-index:300;
  border:1px solid #252525;
  border-radius:6px;
  background:#080808;
  box-shadow:0 15px 40px rgba(0,0,0,.55);
}

.account-dropdown.open{
  display:block;
}

.account-dropdown a,
.account-dropdown button{
  display:block;
  width:100%;
  padding:10px;
  border:0;
  border-radius:4px;
  background:transparent;
  color:#aaa;
  text-align:left;
  text-decoration:none;
  font:inherit;
  font-size:11px;
  cursor:pointer;
}

.account-dropdown a:hover,
.account-dropdown button:hover{
  background:#111;
  color:#fff;
}

.account-dropdown-divider,
.mobile-menu-divider{
  height:1px;
  margin:5px 0;
  background:#202020;
}

.mobile-auth-links{
  display:contents;
}

.account-mobile-menu button{
  display:block;
  width:100%;
  padding:12px;
  border:0;
  border-radius:4px;
  background:transparent;
  color:#aaa;
  text-align:left;
  font-family:inherit;
  font-size:11px;
  cursor:pointer;
}

.account-mobile-menu button:hover{
  background:#111;
  color:#fff;
}

@media (min-width:701px){
  .account-nav-button{
    display:inline-flex;
  }

  .account-mobile-toggle,
  .account-mobile-menu{
    display:none !important;
  }
}

@media (max-width:700px){

  .site-navbar .nav-search{
    display:none;
  }

  .site-navbar .nav-right{
    margin-left:auto;
  }

  .site-navbar .account-nav-wrap{
    display:none;
  }

  .site-navbar .account-mobile-toggle{
    display:flex;
    width:38px;
    height:34px;
    align-items:center;
    justify-content:center;
    border:1px solid #252525;
    border-radius:5px;
    background:#080808;
    color:#fff;
    cursor:pointer;
  }

  .site-navbar .account-mobile-menu{
    position:absolute;
    left:12px;
    right:12px;
    top:55px;
    z-index:200;
    padding:7px;
    border:1px solid #252525;
    border-radius:6px;
    background:#080808;
    box-shadow:0 15px 40px rgba(0,0,0,.6);
  }

  .site-navbar .account-mobile-menu a{
    display:block;
    padding:12px;
    border-radius:4px;
    color:#aaa;
    text-decoration:none;
    font-size:11px;
  }

  .site-navbar .account-mobile-menu a:hover,
  .site-navbar .account-mobile-menu a.active{
    background:#111;
    color:#fff;
  }

  .site-navbar .account-mobile-menu.open{
    display:block;
  }
}


/* API access onboarding */
.api-setup-notice{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:0 auto 24px;
  padding:14px 16px;
  max-width:1100px;
  border:1px solid #252525;
  border-radius:6px;
  background:#090909;
}

.api-setup-title{
  color:#fff;
  font-size:12px;
  font-weight:600;
  margin-bottom:4px;
}

.api-setup-text{
  color:#777;
  font-size:11px;
  line-height:1.5;
}

.api-setup-button{
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:0 12px;
  border:1px solid #444;
  border-radius:4px;
  color:#fff;
  background:#111;
  text-decoration:none;
  font-size:11px;
}

.api-setup-button:hover{
  background:#181818;
  border-color:#666;
}

/* Mobile navigation */
@media (max-width:700px){
  .site-navbar .nav-links{
    display:none !important;
  }

  .site-navbar .nav-search{
    display:none !important;
  }

  .site-navbar .account-nav-wrap{
    display:none !important;
  }

  .site-navbar .account-mobile-toggle{
    display:flex !important;
  }

  .site-navbar .account-mobile-menu{
    display:none !important;
    position:absolute;
    left:12px;
    right:12px;
    top:55px;
    z-index:500;
    padding:7px;
    border:1px solid #252525;
    border-radius:6px;
    background:#080808;
    box-shadow:0 15px 40px rgba(0,0,0,.6);
  }

  .site-navbar .account-mobile-menu.open{
    display:block !important;
  }

  .api-setup-notice{
    align-items:flex-start;
    flex-direction:column;
  }

  .api-setup-button{
    width:100%;
  }
}


/* First-visit welcome screen */
.welcome-gate{
  position:fixed;
  inset:0;
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:#000;
}

.welcome-card{
  width:min(560px,100%);
  padding:42px 32px;
  text-align:center;
  border:1px solid #242424;
  border-radius:10px;
  background:#080808;
  box-shadow:0 24px 80px rgba(0,0,0,.55);
}

.welcome-mark{
  font-size:28px;
  margin-bottom:22px;
}

.welcome-eyebrow{
  color:#777;
  font-size:11px;
  letter-spacing:.14em;
  margin-bottom:16px;
}

.welcome-card h1{
  margin:0 0 14px;
  font-size:32px;
  line-height:1.15;
  font-weight:500;
  color:#fff;
}

.welcome-card p{
  max-width:450px;
  margin:0 auto;
  color:#999;
  font-size:14px;
  line-height:1.7;
}

.welcome-actions{
  display:flex;
  gap:10px;
  justify-content:center;
  margin-top:28px;
}

.welcome-primary,
.welcome-secondary{
  min-height:42px;
  padding:0 20px;
  border-radius:6px;
  font:inherit;
  font-size:13px;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
}

.welcome-primary{
  border:1px solid #fff;
  background:#fff;
  color:#000;
}

.welcome-primary:hover{
  background:#ddd;
}

.welcome-secondary{
  border:1px solid #333;
  background:#0d0d0d;
  color:#fff;
}

.welcome-secondary:hover{
  border-color:#666;
}

@media (max-width:600px){
  .welcome-card{
    padding:34px 22px;
  }

  .welcome-card h1{
    font-size:27px;
  }

  .welcome-actions{
    flex-direction:column;
  }

  .welcome-primary,
  .welcome-secondary{
    width:100%;
  }
}

/* Native hidden attribute must override welcome overlay display */
.welcome-gate[hidden] {
  display: none !important;
}


/* Account welcome notification */
.account-welcome-notice{
  position:fixed;
  top:76px;
  right:20px;
  z-index:1200;
  width:min(380px,calc(100vw - 32px));
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border:1px solid #242424;
  border-radius:12px;
  background:#0b0b0b;
  color:#fff;
  box-shadow:0 14px 40px rgba(0,0,0,.28);
  animation:accountNoticeIn .25s ease;
  transition:opacity .3s ease,transform .3s ease;
}

.account-welcome-notice.hide{
  opacity:0;
  transform:translateY(-8px);
}

.account-welcome-icon{
  width:32px;
  height:32px;
  flex:0 0 32px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#fff;
  color:#000;
  font-size:15px;
  font-weight:700;
}

.account-welcome-content{
  min-width:0;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.account-welcome-content strong{
  font-size:14px;
}

.account-welcome-content span{
  color:#a7a7a7;
  font-size:12px;
  line-height:1.4;
}

.account-welcome-notice button{
  border:0;
  background:transparent;
  color:#888;
  font-size:20px;
  cursor:pointer;
  padding:2px 4px;
}

.account-welcome-notice button:hover{
  color:#fff;
}

/* Plan expiry modal */
.plan-expiry-overlay{
  position:fixed;
  inset:0;
  z-index:1300;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(0,0,0,.68);
  backdrop-filter:blur(5px);
  animation:planOverlayIn .2s ease;
}

.plan-expiry-overlay.closing{
  opacity:0;
  transition:opacity .18s ease;
}

.plan-expiry-modal{
  position:relative;
  width:min(430px,100%);
  padding:28px;
  border:1px solid #292929;
  border-radius:16px;
  background:#0b0b0b;
  color:#fff;
  box-shadow:0 24px 80px rgba(0,0,0,.45);
  text-align:center;
}

.plan-expiry-close{
  position:absolute;
  top:12px;
  right:14px;
  border:0;
  background:transparent;
  color:#777;
  font-size:22px;
  cursor:pointer;
}

.plan-expiry-close:hover{
  color:#fff;
}

.plan-expiry-icon{
  width:44px;
  height:44px;
  margin:0 auto 14px;
  display:grid;
  place-items:center;
  border:1px solid #444;
  border-radius:50%;
  font-size:18px;
  font-weight:700;
}

.plan-expiry-modal h3{
  margin:0 0 8px;
  font-size:19px;
}

.plan-expiry-modal p{
  margin:0 auto;
  max-width:340px;
  color:#a7a7a7;
  font-size:13px;
  line-height:1.6;
}

.plan-expiry-actions{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:22px;
}

.plan-expiry-primary,
.plan-expiry-later{
  min-height:40px;
  padding:10px 16px;
  border-radius:8px;
  font-size:13px;
  cursor:pointer;
  text-decoration:none;
}

.plan-expiry-primary{
  background:#fff;
  color:#000;
  border:1px solid #fff;
  font-weight:600;
}

.plan-expiry-later{
  background:transparent;
  color:#aaa;
  border:1px solid #333;
}

.plan-expiry-primary:hover{
  opacity:.9;
}

.plan-expiry-later:hover{
  color:#fff;
  border-color:#555;
}

@keyframes accountNoticeIn{
  from{
    opacity:0;
    transform:translateY(-10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes planOverlayIn{
  from{
    opacity:0;
  }
  to{
    opacity:1;
  }
}

@media (max-width:600px){
  .account-welcome-notice{
    top:68px;
    right:16px;
    width:calc(100vw - 32px);
  }

  .plan-expiry-modal{
    padding:24px 20px;
  }

  .plan-expiry-actions{
    flex-direction:column;
  }

  .plan-expiry-primary,
  .plan-expiry-later{
    width:100%;
  }
}


/* =========================================================
   CU_RIOUS TECH — DIVINE UI SYSTEM
   ========================================================= */

:root {
  --bg: #030303;
  --surface: #080808;
  --surface-2: #0d0d0d;
  --surface-3: #121212;

  --border: rgba(255,255,255,.085);
  --border-hover: rgba(255,255,255,.18);

  --text: #f7f7f5;
  --text-secondary: #a8a8a3;
  --text-muted: #666662;

  --accent: #f4f1e8;
  --accent-hover: #ffffff;

  --gold: #d6b56d;
  --gold-soft: rgba(214,181,109,.12);
  --gold-border: rgba(214,181,109,.28);

  --shadow-soft: 0 12px 40px rgba(0,0,0,.35);
  --shadow-deep: 0 24px 80px rgba(0,0,0,.55);

  --radius: 9px;
  --radius-sm: 6px;

  --font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  --font-heading: Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono: "SF Mono","JetBrains Mono","Fira Code",monospace;
}

html {
  background: var(--bg);
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(circle at 50% -15%, rgba(255,255,255,.045), transparent 34rem),
    radial-gradient(circle at 85% 35%, rgba(214,181,109,.025), transparent 28rem),
    var(--bg);
  color: var(--text);
}

::selection {
  background: rgba(214,181,109,.22);
  color: #fff;
}

.navbar {
  height: 56px;
  background: rgba(3,3,3,.82);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.brand {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -.2px;
}

.brand-mark {
  color: var(--gold);
  text-shadow: 0 0 18px rgba(214,181,109,.25);
}

.brand-name span {
  color: #858580;
}

.nav-links {
  gap: 24px;
}

.nav-links a {
  position: relative;
  padding: 19px 0;
  color: #858580;
  transition: color .2s ease;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform .2s ease;
}

.nav-links a:hover,
.nav-links a.active {
  color: #fff;
}

.nav-links a.active::after {
  transform: scaleX(1);
}

.kbd-search {
  min-height: 32px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.025);
  border-color: var(--border);
  transition: all .2s ease;
}

.kbd-search:hover {
  background: rgba(255,255,255,.055);
  border-color: var(--border-hover);
  transform: translateY(-1px);
}

.kbd-hint kbd {
  background: #111;
  border-color: #292929;
}

.hero {
  position: relative;
  padding: 58px 0 34px;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  top: -260px;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(
    circle,
    rgba(214,181,109,.055),
    transparent 68%
  );
  pointer-events: none;
}

.hero-content {
  position: relative;
}

.hero-content h1 {
  font-size: clamp(28px,4vw,42px);
  font-weight: 500;
  letter-spacing: -1.5px;
  line-height: 1.08;
}

.hero-sub {
  max-width: 620px;
  margin-top: 10px;
  color: #8e8e89;
  font-size: 14px;
  line-height: 1.7;
}

.eyebrow {
  color: var(--gold);
  letter-spacing: 1.8px;
  font-weight: 600;
}

.eyebrow .dot {
  width: 5px;
  height: 5px;
  background: var(--gold);
  box-shadow: 0 0 12px rgba(214,181,109,.45);
}

.search-box {
  max-width: 620px;
  min-height: 46px;
  padding-left: 14px;
  background: rgba(255,255,255,.025);
  border-color: var(--border);
  border-radius: var(--radius);
  box-shadow: inset 0 1px rgba(255,255,255,.025);
  transition: all .2s ease;
}

.search-box:focus-within {
  border-color: rgba(214,181,109,.38);
  box-shadow:
    0 0 0 3px rgba(214,181,109,.045),
    inset 0 1px rgba(255,255,255,.03);
}

.search-box .btn {
  min-height: 34px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #080808;
  font-weight: 650;
}

.search-box .btn:hover {
  background: #fff;
  transform: translateY(-1px);
}

.pill {
  padding: 5px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.025);
  border-color: var(--border);
  transition: all .18s ease;
}

.pill:hover {
  background: rgba(255,255,255,.06);
  border-color: var(--border-hover);
  transform: translateY(-1px);
}

.pill.active {
  background: var(--gold-soft);
  border-color: var(--gold-border);
  color: #f3e5c5;
}

.status-console {
  background: rgba(255,255,255,.018);
  border-color: var(--border);
}

.console-cell .n {
  font-weight: 600;
  letter-spacing: -.5px;
}

.section {
  padding: 34px 0 46px;
}

.section-head {
  margin-bottom: 20px;
}

.section-head h2 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.3px;
}

.count-label {
  color: #777773;
}

/* Generic cards */
.card,
.api-card,
.category-card,
.endpoint-card {
  background: rgba(255,255,255,.018);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 1px rgba(255,255,255,.015);
  transition:
    border-color .2s ease,
    background .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}

.card:hover,
.api-card:hover,
.category-card:hover,
.endpoint-card:hover {
  background: rgba(255,255,255,.032);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
}

/* Inputs */
input,
textarea,
select {
  transition:
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}

input:focus,
textarea:focus,
select:focus {
  border-color: rgba(214,181,109,.4) !important;
  box-shadow: 0 0 0 3px rgba(214,181,109,.045);
  outline: none;
}

/* Buttons */
button,
.btn,
a.btn {
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    color .18s ease;
}

button:hover,
.btn:hover,
a.btn:hover {
  transform: translateY(-1px);
}

/* Code */
pre,
code,
.code-block {
  font-family: var(--mono);
}

pre {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(255,255,255,.025), transparent),
    #050505;
  box-shadow: inset 0 1px rgba(255,255,255,.025);
}

/* Gold status accents */
.rating,
.rating-value,
.premium,
.price-accent {
  color: var(--gold);
}

/* Mobile */
@media (max-width: 700px) {
  .navbar {
    height: 54px;
  }

  .nav-links,
  .nav-search {
    display: none;
  }

  .hero {
    padding: 42px 0 28px;
  }

  .hero-content h1 {
    font-size: 30px;
  }

  .hero-sub {
    font-size: 13px;
  }

  .section {
    padding: 28px 0 38px;
  }
}

/* =========================================================
   CU_RIOUS TECH — CINEMATIC UI
   ========================================================= */

:root {
  --cine-bg: #020202;
  --cine-panel: rgba(10, 10, 10, .78);
  --cine-line: rgba(255,255,255,.085);
  --cine-soft: rgba(255,255,255,.045);
  --cine-gold: #d8b46a;
  --cine-gold-soft: rgba(216,180,106,.18);
}

/* cinematic base */
html {
  background: var(--cine-bg);
}

body {
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% -10%, rgba(255,255,255,.075), transparent 34%),
    radial-gradient(circle at 0% 55%, rgba(216,180,106,.045), transparent 25%),
    radial-gradient(circle at 100% 45%, rgba(255,255,255,.035), transparent 25%),
    #020202;
}

/* cinematic side atmosphere */
body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -2;
  pointer-events: none;
}

body::before {
  width: 38vw;
  height: 110vh;
  left: -18vw;
  top: -5vh;
  background:
    linear-gradient(
      115deg,
      transparent 20%,
      rgba(255,255,255,.018) 42%,
      rgba(216,180,106,.035) 50%,
      transparent 64%
    );
  transform: skewX(-12deg);
  filter: blur(2px);
}

body::after {
  width: 38vw;
  height: 110vh;
  right: -18vw;
  top: -5vh;
  background:
    linear-gradient(
      65deg,
      transparent 20%,
      rgba(255,255,255,.018) 42%,
      rgba(216,180,106,.025) 50%,
      transparent 64%
    );
  transform: skewX(12deg);
  filter: blur(2px);
}

/* subtle cinematic grain */
body > * {
  position: relative;
}

body::marker {
  display: none;
}

/* viewport vignette */
body::selection {
  background: rgba(216,180,106,.25);
}

main {
  position: relative;
}

/* vertical cinematic rails */
main::before,
main::after {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  width: 1px;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(255,255,255,.08) 20%,
    rgba(216,180,106,.14) 50%,
    rgba(255,255,255,.05) 80%,
    transparent
  );
}

main::before {
  left: 4.5vw;
}

main::after {
  right: 4.5vw;
}

/* navbar */
.navbar {
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  background: rgba(2,2,2,.72) !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
}

.navbar::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 120px;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(
    90deg,
    transparent,
    var(--cine-gold),
    transparent
  );
  opacity: .65;
}

/* brand */
.brand,
.logo,
.nav-brand {
  letter-spacing: -.035em;
}

.brand:first-letter,
.logo:first-letter,
.nav-brand:first-letter {
  color: var(--cine-gold);
}

/* hero cinematic composition */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 430px;
  display: flex;
  align-items: center;
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  right: -170px;
  top: -120px;
  border: 1px solid rgba(216,180,106,.10);
  border-radius: 50%;
  box-shadow:
    0 0 100px rgba(216,180,106,.035),
    inset 0 0 80px rgba(255,255,255,.018);
  z-index: -1;
}

.hero::after {
  content: "";
  position: absolute;
  right: 5%;
  top: 18%;
  width: 180px;
  height: 260px;
  border: 1px solid rgba(255,255,255,.055);
  transform: perspective(500px) rotateY(-18deg) rotateX(8deg);
  box-shadow:
    0 30px 100px rgba(0,0,0,.8),
    inset 0 0 50px rgba(255,255,255,.02);
  opacity: .8;
  z-index: -1;
}

/* cinematic eyebrow */
.hero .eyebrow,
.hero .kicker {
  color: var(--cine-gold);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 700;
}

/* stronger headings */
.hero h1 {
  max-width: 850px;
  font-size: clamp(42px, 7vw, 82px);
  line-height: .94;
  letter-spacing: -.065em;
  font-weight: 800;
  text-wrap: balance;
}

.hero h1::after {
  content: "";
  display: block;
  width: 90px;
  height: 2px;
  margin-top: 24px;
  background: linear-gradient(90deg, var(--cine-gold), transparent);
}

/* atmospheric hero copy */
.hero p {
  max-width: 650px;
  color: rgba(255,255,255,.58);
  line-height: 1.8;
}

/* search becomes cinematic */
.search-box,
.search-wrap,
.search-container {
  position: relative;
}

.search-box input,
.search-wrap input,
.search-container input {
  background: rgba(255,255,255,.035) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow:
    0 20px 60px rgba(0,0,0,.35),
    inset 0 1px rgba(255,255,255,.025);
  backdrop-filter: blur(18px);
}

.search-box input:focus,
.search-wrap input:focus,
.search-container input:focus {
  border-color: rgba(216,180,106,.55) !important;
  box-shadow:
    0 0 0 3px rgba(216,180,106,.055),
    0 20px 70px rgba(0,0,0,.45);
}

/* API/category cards */
.card,
.api-card,
.category-card,
.endpoint-card,
.plan-card,
.stat-card {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.012) 55%,
      rgba(216,180,106,.012)
    ) !important;
  border: 1px solid var(--cine-line) !important;
  box-shadow:
    0 18px 55px rgba(0,0,0,.28),
    inset 0 1px rgba(255,255,255,.025);
  backdrop-filter: blur(16px);
  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.card::before,
.api-card::before,
.category-card::before,
.endpoint-card::before,
.plan-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 45%;
  height: 1px;
  background: linear-gradient(90deg, rgba(216,180,106,.55), transparent);
  opacity: .45;
}

.card:hover,
.api-card:hover,
.category-card:hover,
.endpoint-card:hover,
.plan-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.16) !important;
  box-shadow:
    0 28px 80px rgba(0,0,0,.48),
    0 0 40px rgba(216,180,106,.025);
}

/* API card titles */
.api-card h3,
.api-card h4,
.card h3,
.card h4 {
  letter-spacing: -.025em;
}

/* small metadata */
.muted,
.text-muted,
.secondary,
.description {
  color: rgba(255,255,255,.52);
}

/* gold status / ratings */
.rating,
.rating-value,
.badge-gold,
.status-active {
  color: var(--cine-gold) !important;
}

/* buttons */
.btn,
button {
  transition:
    transform .2s ease,
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}

.btn-primary,
.btn-accent {
  background: #f2f2f2 !important;
  color: #050505 !important;
  border-color: #f2f2f2 !important;
  box-shadow: 0 8px 30px rgba(255,255,255,.08);
}

.btn-primary:hover,
.btn-accent:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(255,255,255,.13);
}

.btn-outline:hover,
.btn-secondary:hover {
  border-color: rgba(216,180,106,.5) !important;
  color: var(--cine-gold) !important;
}

/* code blocks */
pre,
.code,
.code-block,
.api-code {
  background:
    radial-gradient(circle at 80% 0%, rgba(216,180,106,.035), transparent 35%),
    #050505 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.025),
    0 20px 60px rgba(0,0,0,.35);
}

/* section headings */
section h2,
.section-title {
  letter-spacing: -.045em;
  font-weight: 750;
}

/* dividers */
hr {
  border: 0 !important;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.10),
    transparent
  );
}

/* pills */
.pill,
.tag,
.badge {
  background: rgba(255,255,255,.035) !important;
  border-color: rgba(255,255,255,.08) !important;
  backdrop-filter: blur(10px);
}

.pill.active,
.tag.active,
.badge.active {
  color: var(--cine-gold) !important;
  border-color: rgba(216,180,106,.3) !important;
  background: rgba(216,180,106,.07) !important;
}

/* footer */
footer {
  position: relative;
  margin-top: 100px;
  border-top: 1px solid rgba(255,255,255,.07);
}

footer::before {
  content: "CU_RIOUS TECH";
  position: absolute;
  left: 50%;
  top: -13px;
  transform: translateX(-50%);
  padding: 0 16px;
  background: #020202;
  color: rgba(216,180,106,.55);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .22em;
}

/* cinematic mobile */
@media (max-width: 700px) {
  main::before,
  main::after {
    display: none;
  }

  .hero {
    min-height: 390px;
  }

  .hero h1 {
    font-size: clamp(40px, 13vw, 62px);
  }

  .hero::before {
    width: 330px;
    height: 330px;
    right: -180px;
    top: -50px;
  }

  .hero::after {
    right: -40px;
    opacity: .4;
  }

  body::before {
    left: -45vw;
    opacity: .5;
  }

  body::after {
    right: -45vw;
    opacity: .5;
  }

  .card,
  .api-card,
  .category-card {
    backdrop-filter: blur(10px);
  }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}


/* =========================================================
   CU_RIOUS TECH — RESPONSIVE / UX PASS
   Mobile • Tablet • Desktop
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  width: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

/* ---------- GLOBAL CONTAINER ---------- */

.container,
main,
.page-container,
.content-container {
  width: min(1180px, calc(100% - 40px));
  margin-left: auto;
  margin-right: auto;
}

/* Prevent long content from breaking layouts */
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
button,
span,
div {
  overflow-wrap: break-word;
}

img,
svg,
video,
iframe {
  max-width: 100%;
}

/* ---------- DESKTOP ---------- */

@media (min-width: 1200px) {

  .container,
  main,
  .page-container,
  .content-container {
    width: min(1180px, calc(100% - 64px));
  }

  .hero {
    min-height: 520px;
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .hero h1 {
    max-width: 900px;
    font-size: clamp(60px, 6vw, 82px);
  }

  .hero p {
    font-size: 16px;
    max-width: 650px;
  }

  section {
    margin-top: 72px;
    margin-bottom: 72px;
  }

  .api-grid,
  .cards-grid,
  .category-grid,
  .plans-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }

}

/* ---------- LAPTOP ---------- */

@media (min-width: 901px) and (max-width: 1199px) {

  .container,
  main,
  .page-container,
  .content-container {
    width: min(100% - 48px, 1080px);
  }

  .hero {
    min-height: 460px;
    padding: 55px 0;
  }

  .hero h1 {
    font-size: clamp(50px, 6vw, 70px);
  }

  section {
    margin-top: 58px;
    margin-bottom: 58px;
  }

  .api-grid,
  .cards-grid,
  .category-grid,
  .plans-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
}

/* ---------- TABLET ---------- */

@media (min-width: 601px) and (max-width: 900px) {

  .container,
  main,
  .page-container,
  .content-container {
    width: calc(100% - 40px);
  }

  .hero {
    min-height: 430px;
    padding: 50px 0;
  }

  .hero h1 {
    max-width: 720px;
    font-size: clamp(44px, 8vw, 64px);
    line-height: .97;
  }

  .hero p {
    max-width: 600px;
    font-size: 15px;
  }

  section {
    margin-top: 50px;
    margin-bottom: 50px;
  }

  .api-grid,
  .cards-grid,
  .category-grid,
  .plans-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .card,
  .api-card,
  .category-card,
  .plan-card {
    min-width: 0;
  }

  /* Two-column layouts collapse only when necessary */
  .two-column,
  .content-grid,
  .detail-layout {
    grid-template-columns: 1fr;
  }

}

/* ---------- MOBILE ---------- */

@media (max-width: 600px) {

  html {
    font-size: 15px;
  }

  body {
    font-size: 14px;
  }

  .container,
  main,
  .page-container,
  .content-container {
    width: calc(100% - 28px);
    max-width: none;
  }

  /* NAV */

  .navbar {
    min-height: 56px;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .nav-brand,
  .brand,
  .logo {
    max-width: 190px;
    font-size: 15px;
    white-space: nowrap;
  }

  /* HERO */

  .hero {
    min-height: 430px;
    padding: 46px 0 42px;
    display: flex;
    align-items: center;
  }

  .hero h1 {
    max-width: 100%;
    font-size: clamp(38px, 12vw, 54px);
    line-height: .95;
    letter-spacing: -.055em;
  }

  .hero h1::after {
    width: 65px;
    margin-top: 18px;
  }

  .hero p {
    max-width: 100%;
    margin-top: 18px;
    font-size: 14px;
    line-height: 1.7;
  }

  .hero .eyebrow,
  .hero .kicker {
    font-size: 9px;
    letter-spacing: .18em;
  }

  /* SEARCH */

  .search-box,
  .search-wrap,
  .search-container {
    width: 100%;
    margin-top: 22px;
  }

  .search-box input,
  .search-wrap input,
  .search-container input {
    width: 100%;
    min-height: 48px;
    font-size: 14px;
    padding: 0 15px;
  }

  /* SECTIONS */

  section {
    margin-top: 42px;
    margin-bottom: 42px;
  }

  section h2,
  .section-title {
    font-size: 25px;
    line-height: 1.05;
    letter-spacing: -.04em;
  }

  /* GRIDS */

  .api-grid,
  .cards-grid,
  .category-grid,
  .plans-grid,
  .grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  /* CARDS */

  .card,
  .api-card,
  .category-card,
  .endpoint-card,
  .plan-card,
  .stat-card {
    width: 100%;
    min-width: 0;
    border-radius: 9px;
    padding: 16px;
  }

  .card:hover,
  .api-card:hover,
  .category-card:hover,
  .endpoint-card:hover,
  .plan-card:hover {
    transform: none;
  }

  /* BUTTONS */

  button,
  .btn {
    min-height: 44px;
    font-size: 13px;
  }

  .btn {
    padding: 10px 15px;
  }

  /* Button groups wrap instead of overflowing */

  .button-group,
  .actions,
  .hero-actions,
  .card-actions,
  .form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
  }

  .button-group .btn,
  .actions .btn,
  .hero-actions .btn {
    flex: 1 1 auto;
  }

  /* PILLS */

  .pills,
  .filters,
  .category-pills,
  .tabs {
    display: flex;
    gap: 7px;
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 5px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .pills::-webkit-scrollbar,
  .filters::-webkit-scrollbar,
  .category-pills::-webkit-scrollbar,
  .tabs::-webkit-scrollbar {
    display: none;
  }

  .pill,
  .tag,
  .badge {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* TWO COLUMNS */

  .two-column,
  .content-grid,
  .detail-layout,
  .dashboard-grid,
  .account-grid {
    grid-template-columns: 1fr !important;
  }

  /* TABLES */

  table {
    width: 100%;
    min-width: 620px;
  }

  .table-wrapper,
  .table-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* CODE */

  pre,
  .code,
  .code-block,
  .api-code {
    max-width: 100%;
    overflow-x: auto;
    font-size: 12px;
    line-height: 1.65;
    padding: 14px;
    -webkit-overflow-scrolling: touch;
  }

  /* FORMS */

  input,
  textarea,
  select {
    max-width: 100%;
    min-height: 44px;
    font-size: 16px !important;
  }

  textarea {
    min-height: 120px;
  }

  /* IMAGES */

  .api-card img,
  .card img,
  .category-card img {
    max-width: 100%;
    height: auto;
  }

  /* STATS */

  .stats,
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px;
  }

  .stat-card {
    padding: 13px;
  }

  .stat-card strong,
  .stat-value {
    font-size: 22px;
  }

  /* MODALS */

  .modal,
  .modal-content,
  .dialog {
    width: calc(100% - 24px) !important;
    max-width: none !important;
    margin: 12px;
  }

  /* FOOTER */

  footer {
    margin-top: 65px;
    padding-bottom: 30px;
  }

  /* REMOVE DESKTOP DECORATION ON SMALL SCREENS */

  main::before,
  main::after {
    display: none;
  }

  body::before,
  body::after {
    opacity: .35;
  }

}

/* ---------- VERY SMALL PHONES ---------- */

@media (max-width: 380px) {

  .container,
  main,
  .page-container,
  .content-container {
    width: calc(100% - 22px);
  }

  .hero {
    min-height: 400px;
    padding-top: 38px;
  }

  .hero h1 {
    font-size: 37px;
  }

  .hero p {
    font-size: 13px;
  }

  section h2,
  .section-title {
    font-size: 22px;
  }

  .stats,
  .stats-grid {
    grid-template-columns: 1fr !important;
  }

  .button-group .btn,
  .actions .btn,
  .hero-actions .btn {
    width: 100%;
    flex: 1 1 100%;
  }
}

/* ---------- TOUCH DEVICES ---------- */

@media (hover: none) and (pointer: coarse) {

  .card:hover,
  .api-card:hover,
  .category-card:hover,
  .endpoint-card:hover,
  .plan-card:hover {
    transform: none;
  }

  button,
  a,
  .btn,
  .pill {
    -webkit-tap-highlight-color: transparent;
  }

  .btn,
  button {
    min-height: 44px;
  }
}

/* ---------- ACCESSIBILITY ---------- */

:focus-visible {
  outline: 2px solid rgba(216,180,106,.7);
  outline-offset: 3px;
}

/* Don't allow accidental horizontal page scrolling */
@media (max-width: 900px) {
  .row,
  .flex-row {
    flex-wrap: wrap;
  }
}


/* =========================================================
   CU_RIOUS TECH — PLANS UI
   ========================================================= */

.plans-page {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  padding: 72px 0 120px;
}

.plans-hero {
  max-width: 760px;
  margin-bottom: 64px;
}

.plans-eyebrow,
.plans-label {
  display: block;
  color: rgba(216,180,106,.9);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  margin-bottom: 12px;
}

.plans-hero h1 {
  margin: 0;
  font-size: clamp(42px, 6vw, 72px);
  line-height: .98;
  letter-spacing: -.055em;
  font-weight: 800;
}

.plans-hero p {
  max-width: 610px;
  margin: 22px 0 0;
  color: rgba(255,255,255,.52);
  font-size: 16px;
  line-height: 1.7;
}

.plans-section,
.plans-current,
.subscription-section,
.history-section {
  margin-top: 58px;
}

.plans-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.plans-section-head h2 {
  margin: 0;
  font-size: 25px;
  letter-spacing: -.035em;
}

.plans-section-head p {
  margin: 7px 0 0;
  color: rgba(255,255,255,.45);
  font-size: 13px;
}

.plans-link {
  color: rgba(255,255,255,.72);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
}

.plans-link:hover {
  color: #fff;
}

/* Current plan */

.current-plan-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  padding: 28px;
  min-height: 130px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  background:
    radial-gradient(circle at 0% 0%, rgba(216,180,106,.08), transparent 38%),
    linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  box-shadow:
    0 25px 80px rgba(0,0,0,.32),
    inset 0 1px rgba(255,255,255,.025);
  overflow: hidden;
}

.current-plan-card::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 180px;
  height: 1px;
  background: linear-gradient(90deg, rgba(216,180,106,.8), transparent);
}

.current-plan-main {
  display: flex;
  align-items: center;
  gap: 18px;
}

.current-plan-mark {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(216,180,106,.28);
  border-radius: 16px;
  color: #e7c77f;
  background: rgba(216,180,106,.06);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -.04em;
}

.current-plan-caption {
  display: block;
  color: rgba(255,255,255,.36);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .16em;
  margin-bottom: 5px;
}

.current-plan-name {
  font-size: 25px;
  font-weight: 800;
  text-transform: capitalize;
  letter-spacing: -.035em;
}

.current-plan-meta {
  margin-top: 5px;
  color: rgba(255,255,255,.45);
  font-size: 12px;
}

.current-plan-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  color: rgba(255,255,255,.62);
  font-size: 11px;
  white-space: nowrap;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d6b56d;
  box-shadow: 0 0 12px rgba(216,180,106,.5);
}

/* Pricing */

.plans-grid-new {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
}

.plan-ui-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 25px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 20px;
  background: linear-gradient(
    145deg,
    rgba(255,255,255,.045),
    rgba(255,255,255,.012)
  );
  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
  overflow: hidden;
}

.plan-ui-card:hover {
  transform: translateY(-4px);
  border-color: rgba(216,180,106,.25);
  box-shadow: 0 25px 70px rgba(0,0,0,.38);
}

.plan-ui-card.is-current {
  border-color: rgba(216,180,106,.42);
  box-shadow:
    0 20px 65px rgba(0,0,0,.35),
    0 0 35px rgba(216,180,106,.035);
}

.plan-ui-card.is-current::before {
  content: "CURRENT";
  position: absolute;
  top: 15px;
  right: 15px;
  color: #d6b56d;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .15em;
}

.plan-ui-name {
  font-size: 17px;
  font-weight: 800;
  text-transform: capitalize;
}

.plan-ui-price {
  margin-top: 18px;
  font-size: 31px;
  font-weight: 850;
  letter-spacing: -.045em;
}

.plan-ui-price span {
  color: rgba(255,255,255,.38);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
}

.plan-ui-description {
  min-height: 38px;
  margin-top: 7px;
  color: rgba(255,255,255,.43);
  font-size: 11px;
  line-height: 1.55;
}

.plan-ui-limits {
  display: grid;
  gap: 8px;
  margin: 23px 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.07);
}

.plan-ui-limit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
}

.plan-ui-limit span {
  color: rgba(255,255,255,.42);
}

.plan-ui-limit strong {
  color: rgba(255,255,255,.88);
  font-size: 12px;
}

.plan-ui-button {
  width: 100%;
  min-height: 43px;
  margin-top: auto;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 11px;
  background: rgba(255,255,255,.045);
  color: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.plan-ui-button:hover:not(:disabled) {
  border-color: rgba(216,180,106,.45);
  background: rgba(216,180,106,.08);
}

.plan-ui-button.primary {
  background: #f2f2f2;
  color: #050505;
  border-color: #f2f2f2;
}

.plan-ui-button:disabled {
  opacity: .45;
  cursor: default;
}

.plans-loading,
.plans-empty {
  padding: 28px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  color: rgba(255,255,255,.42);
  background: rgba(255,255,255,.018);
}

.plans-loading {
  grid-column: 1 / -1;
}

/* Subscription */

.subscription-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.018);
}

.subscription-item {
  min-width: 0;
  padding: 22px;
  border-right: 1px solid rgba(255,255,255,.07);
}

.subscription-item:last-child {
  border-right: 0;
}

.subscription-item span {
  display: block;
  color: rgba(255,255,255,.38);
  font-size: 10px;
  margin-bottom: 8px;
}

.subscription-item strong {
  font-size: 14px;
  font-weight: 750;
  text-transform: capitalize;
}

/* Payments */

.payment-history-card {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.018);
}

.payment-row {
  display: grid;
  grid-template-columns: 1fr 150px 100px;
  align-items: center;
  gap: 20px;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.payment-row:last-child {
  border-bottom: 0;
}

.payment-plan {
  font-size: 12px;
  font-weight: 800;
  text-transform: capitalize;
}

.payment-date {
  margin-top: 4px;
  color: rgba(255,255,255,.36);
  font-size: 10px;
}

.payment-amount {
  font-size: 12px;
  font-weight: 700;
}

.payment-status {
  color: rgba(255,255,255,.55);
  font-size: 10px;
  text-transform: capitalize;
}

/* Payment notices */

.plans-page #paymentResult {
  margin-bottom: 25px;
}

.payment-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  background: rgba(255,255,255,.035);
}

.payment-notice strong {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
}

.payment-notice p {
  margin: 0;
  color: rgba(255,255,255,.45);
  font-size: 12px;
  line-height: 1.5;
}

.payment-notice-actions {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}

/* Responsive */

@media (max-width: 1050px) {
  .plans-grid-new {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .plans-page {
    width: calc(100% - 28px);
    padding: 42px 0 100px;
  }

  .plans-hero {
    margin-bottom: 45px;
  }

  .plans-hero h1 {
    font-size: clamp(38px, 12vw, 55px);
  }

  .plans-hero p {
    font-size: 14px;
  }

  .plans-section,
  .plans-current,
  .subscription-section,
  .history-section {
    margin-top: 42px;
  }

  .plans-section-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .current-plan-card {
    align-items: flex-start;
    flex-direction: column;
    padding: 22px;
  }

  .current-plan-status {
    align-self: flex-start;
  }

  .plans-grid-new {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .plan-ui-card {
    padding: 22px;
  }

  .subscription-grid {
    grid-template-columns: 1fr;
  }

  .subscription-item {
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.07);
  }

  .subscription-item:last-child {
    border-bottom: 0;
  }

  .payment-row {
    grid-template-columns: 1fr auto;
    gap: 8px 15px;
  }

  .payment-status {
    grid-column: 2;
    grid-row: 1;
  }

  .payment-amount {
    grid-column: 1;
    grid-row: 2;
  }

  .payment-notice {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* Shared footer (mounted by account.js) */
.app-footer{
  margin-top:64px;
  padding:20px 16px;
  border-top:1px solid #222;
  background:#0a0a0a;
  color:#777;
  font-size:12px;
}
.app-footer-inner{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}
.app-footer nav{display:flex;gap:16px}
.app-footer a{color:#aaa;text-decoration:none}
.app-footer a:hover{color:#fff}

/* Mobile bottom navigation (mounted by account.js) */
.bottom-nav{
  display:none;
}

@media (max-width:768px){
  .bottom-nav{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:1000;
    display:flex;
    background:#0a0a0a;
    border-top:1px solid #222;
    padding-bottom:env(safe-area-inset-bottom);
  }

  .bn-item{
    flex:1;
    min-width:0;
    height:56px;
    padding:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    border-top:2px solid transparent;
    color:#777;
    font-size:11px;
    font-weight:500;
    text-decoration:none;
    -webkit-tap-highlight-color:transparent;
  }

  .bn-item svg{
    width:22px;
    height:22px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.75;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .bn-item.active{
    color:#fff;
    border-top-color:#fff;
  }

  .bn-item:focus-visible{
    outline:2px solid #fff;
    outline-offset:-4px;
  }

  body.has-bottom-nav{
    padding-bottom:calc(56px + env(safe-area-inset-bottom));
  }

  .account-mobile-toggle,
  .account-mobile-menu,
  .account-nav-wrap{
    display:none !important;
  }
}

.bn-item[hidden]{
  display:none !important;
}