/* === Creabundalo Design Tokens (v2.1.0) ===
Color tokens (dark theme):
  --surface-1 / --surface-2  : panel backgrounds (tone-1 / tone-2)
  --border                   : subtle borders
  --accent-blue              : links & secondary CTAs
  --accent-mint / --accent-ink : primary CTA pill
Layout tokens:
  --container-max, --space-*
Components (CSS classes):
  .topnav (with .dropdown), .pills/.pill, .button(.--primary/--ghost),
  .block, .grid-3, .layout-ai (+ .sidebar), .input
This file is the single source of truth for the house style.
*/ 


/* === Creabundalo v2.0.0 base === */
:root{
  --container-max: 1080px;
  --space-xl: 2rem;
  --space-md: 1.25rem;
  --border: 1px solid rgba(255,255,255,0.14);

  /* palette aligned to your screenshots */
  --surface-1: rgba(255,255,255,0.08);
  --surface-2: rgba(255,255,255,0.06);
  --tone-1: var(--surface-1);
  --tone-2: var(--surface-2);

  --accent-blue: #7ab0ff;
  --accent-blue-hover: #9cc2ff;

  --accent-mint: #b8f6d2;
  --accent-ink: #0a1512;
}

html,body{ margin:0; background:#0f1620; color:#e9eef3; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif; }

.container{ max-width: var(--container-max); margin:0 auto; padding: var(--space-xl) var(--space-md); }

/* Header background and inner card */
header{ background: linear-gradient(180deg, rgba(11,17,23,0.78), rgba(11,17,23,0.84)); }
header .container{
  background: radial-gradient(120% 120% at 50% 10%, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 60%),
              linear-gradient(180deg, rgba(7,26,28,0.65), rgba(7,26,28,0.55));
  border: var(--border);
  border-radius: 22px;
  box-shadow: 0 18px 36px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.22);
}
header .container h1{ margin:0 0 .4rem 0; color:#fff; font-size: clamp(2rem, 5vw, 3.5rem); font-weight:800; }
header .container p{ margin:0 0 1rem 0; color:#e9eef3; opacity:.95; }

/* Pills & buttons */
.pills{ display:flex; gap:.5rem; flex-wrap:wrap; margin: 0 0 1rem 0; }
.pill{ display:inline-flex; align-items:center; gap:.5rem; padding:.45rem .7rem; border-radius:999px; border:var(--border); background: rgba(255,255,255,0.06); font-size:.9rem; }

.button{ display:inline-block; padding:.8rem 1rem; border-radius:14px; border:1px solid rgba(255,255,255,.12); text-decoration:none; }
.button--primary{ background: var(--accent-mint); color: var(--accent-ink); }
.button--ghost{ background: rgba(255,255,255,0.06); color:#e9eef3; }

/* Blocks & cards */
.block{ border: var(--border); border-radius: 14px; margin:0 auto 1rem; padding: 1rem; background: var(--surface-2); }
.block h2{ margin:0 0 .5rem 0; color:#fff; }
.block p, .block li{ color:#e9eef3; }
.block:has(> h2){ background: var(--surface-1); }

.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 960px){ .grid-3{ grid-template-columns:1fr; } }

/* Links */
a{ color: var(--accent-blue); }
a:hover{ color: var(--accent-blue-hover); }

/* AI layout */
.layout-ai{ display:grid; grid-template-columns: 280px 1fr; gap: 1rem; align-items:start; }
@media (max-width: 960px){ .layout-ai{ grid-template-columns:1fr; } }
.sidebar{ position: sticky; top: 1rem; }
.input{ width:100%; padding:.9rem 1rem; border-radius:12px; border:var(--border); background: rgba(255,255,255,0.04); color:#e9eef3; }



/* === v2.0.1 Top Navigation with dropdown === */
.topnav{
  position: sticky; top: 0; z-index: 1000;
  background: #0d141c;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.topnav .bar{ max-width: var(--container-max); margin:0 auto; padding:.6rem var(--space-md); display:flex; align-items:center; gap:1rem; }
.topnav .brand{ display:flex; align-items:center; gap:.6rem; margin-right: .5rem; }
.topnav .brand .logo{ width:18px; height:18px; border-radius:50%; background: radial-gradient(circle at 30% 30%, #eaffff, #9ee7ff 60%, #74f4d2); box-shadow:0 0 10px rgba(116,244,210,.75); }
.topnav .brand a{ color:#dff9ff; font-weight:700; text-decoration:none; }
.topnav .brand small{ color:#cfe7ec; opacity:.8; }

.topnav nav{ display:flex; align-items:center; gap:1rem; margin-left:auto; }
.topnav nav a{ color:#e9eef3; text-decoration:none; padding:.4rem .6rem; border-radius:10px; }
.topnav nav a:hover{ background: rgba(255,255,255,0.06); }

/* Dashboard pill */
.topnav .pill{ background: var(--accent-mint); color: var(--accent-ink); border-radius:14px; padding:.45rem .7rem; text-decoration:none; border:1px solid rgba(255,255,255,.12); }

/* Dropdown */
.dropdown{ position: relative; }
.dropdown > a{ display:inline-flex; align-items:center; gap:.35rem; }
.dropdown > a::after{ content:"▾"; font-size:.8rem; opacity:.8; }
.dropdown-menu{
  position:absolute; top: 100%; left:0;
  background:#0f1620; border:1px solid rgba(255,255,255,0.12);
  border-radius:12px; padding:.4rem; width: 240px; display:none;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}
.dropdown-menu a{
  display:block; padding:.5rem .6rem; border-radius:8px; color:#e9eef3; text-decoration:none;
}
.dropdown-menu a:hover{ background: rgba(255,255,255,0.06); }
.dropdown:hover .dropdown-menu{ display:block; }

/* Responsive */
@media (max-width: 880px){
  .topnav nav{ gap:.5rem; }
  .topnav .brand small{ display:none; }
}



/* === v2.1.0 Marketplace layout === */
.layout-market{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap: 1rem;
  align-items: start;
}
@media (max-width: 1024px){
  .layout-market{ grid-template-columns: 1fr; }
}
.panel{
  border: var(--border);
  border-radius: 14px;
  background: var(--surface-2);
  padding: 1rem;
}
.panel h2{ margin:0 0 .5rem 0; color:#fff; }

.item-card{
  border: var(--border);
  border-radius: 14px;
  background: var(--surface-2);
  padding: 1rem;
  margin-bottom: 1rem;
}
.item-card h3{ margin:.2rem 0 .25rem 0; color:#fff; }
.item-meta{ opacity:.85; font-size:.9rem; margin-bottom:.5rem; }
.price{ float:right; font-weight:700; color:#fff; }
.chips{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.5rem; }
.chip{ padding:.25rem .5rem; border-radius:999px; border: var(--border); background: rgba(255,255,255,0.06); font-size:.85rem; }
.actions a{ margin-right:.5rem; }
.searchbar{
  width:100%; padding:.9rem 1rem; border-radius:12px; border: var(--border);
  background: rgba(255,255,255,0.04); color:#e9eef3;
}



/* === v2.1.6 Marketplace: item thumbnails === */
.item-card{
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 1rem;
  align-items: start;
}
.item-thumb{
  width: 100%;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
  border: var(--border);
  background: rgba(255,255,255,0.04);
}
.item-content{ position: relative; }
.item-content .price{ position: absolute; top: 0; right: 0; }
@media (max-width: 560px){
  .item-card{ grid-template-columns: 1fr; }
  .item-content .price{ position: static; float: right; }
}


/* === v2.1.25: Header search panel === */
.search-panel{position:sticky; top:56px; z-index:50; display:none; padding:0 .75rem .5rem;}
.search-panel.open{display:block; animation:spSlide .18s ease-out;}
.search-panel .inner{max-width:1100px; margin:0 auto; background: var(--surface-2); border: var(--border); border-radius:16px; box-shadow: 0 12px 40px rgba(0,0,0,.35); padding:.75rem;}
.search-panel .search-input{width:100%; padding:.85rem 1rem; border-radius:12px; border: var(--border); background: rgba(255,255,255,.04); color:#e9eef3;}
.search-panel .search-results{margin-top:.5rem; display:grid; gap:.35rem;}
.search-panel .search-item{display:block; padding:.6rem .7rem; border-radius:10px; border: var(--border); background: var(--surface-1); text-decoration:none; color:inherit;}
.search-panel .search-item:hover{background: rgba(255,255,255,.06);}
.search-panel .chip{padding:.3rem .6rem; border-radius:999px; border: var(--border); background: var(--surface-1); text-decoration:none; color:inherit;}
@keyframes spSlide{from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:translateY(0);}}