/* ===========================================================
   CanvasGuru UI — unified mobile-first stylesheet (v2)
   One source of truth for tokens, components, and utilities.
   =========================================================== */

/* ---------- Design tokens ---------- */
:root{
  /* Colors */
  --bg:#0b0f14;
  --panel:#0f141b;
  --soft:#0d1218;
  --text:#e7ecef;
  --muted:#a2adb8;
  --line:rgba(255,255,255,.10);
  --line-soft:rgba(255,255,255,.07);
  --accent:#caa03a; /* brand gold */

  /* Elevation and shape */
  --radius:16px;
  --shadow:0 10px 28px rgba(0,0,0,.28);

  /* Spacing */
  --gap:clamp(14px,2.2vw,22px);

  /* Content width */
  --container:1120px;
}

/* ---------- Base reset ---------- */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--text); }
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height:1.5;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* ---------- Layout ---------- */
.container{ max-width:var(--container); margin:0 auto; padding:0 16px; }
section{ margin-block: clamp(18px,4vw,40px); }
.section{ padding:24px 0 40px; }
.section__header{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px; }
.section__header h1, .section__header h2{ margin:0; }

/* ---------- Header / Nav ---------- */
header.site{ position:sticky; top:0; z-index:50; backdrop-filter:saturate(1.2) blur(8px); background:rgba(11,15,20,.82); border-bottom:1px solid var(--line-soft); }
.nav{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px; }
.brand{ display:flex; align-items:center; gap:10px; }
.logo{ width:32px; height:32px; border-radius:8px; display:block; }
.brand h1{ font-size:18px; margin:0; letter-spacing:.4px; }
nav.primary{ display:flex; gap:10px; flex-wrap:wrap; }
nav.primary a{ color:var(--text); text-decoration:none; padding:8px 10px; border-radius:10px; }
nav.primary a:hover{ background:#131a22; }

/* ---------- Typography helpers ---------- */
.kicker{ letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-size:.78rem; }
.lead{ color:#c9d3dd; max-width:65ch; }
.small{ font-size:.88rem; color:var(--muted); }
.price{ color:#f2f6fa; font-weight:800; }

/* ---------- Buttons ---------- */
.btn{
  background:var(--accent); color:#11161d; border:1px solid transparent;
  padding:.6rem .9rem; border-radius:12px; font-weight:800;
  display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
  transition:filter .18s ease, transform .18s ease;
}
.btn:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.btn.ghost{ background:transparent; color:var(--text); border-color:var(--line); }
.btn.block{ display:flex; width:100%; justify-content:center; }

/* ---------- Forms ---------- */
.input, input[type], select, textarea{
  width:100%; background:#0f151d; color:var(--text);
  border:1px solid var(--line-soft); border-radius:12px; padding:.68rem .8rem;
}
label{ display:block; margin:.4rem 0 .3rem; color:#dfe6ee; }
.help{ color:var(--muted); font-size:.85rem; }

/* ---------- Chips / pills / tags ---------- */
.chip, .pill{
  display:inline-flex; align-items:center;
  padding:.28rem .6rem; border-radius:999px; font-size:.78rem;
  background:#151b22; color:#c3ced8; border:1px solid var(--line-soft);
}
.chiprow{ display:flex; gap:8px; flex-wrap:wrap; }

/* ---------- Cards ---------- */
.card{
  background:var(--panel); border:1px solid var(--line-soft);
  border-radius:18px; padding:12px;
}
.card.hover:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,.16); box-shadow:var(--shadow); transition:.18s ease; }

/* ---------- Art cards (support both class names) ---------- */
.art-card, .artcard{
  position:relative; overflow:hidden; border-radius:18px;
  border:1px solid var(--line-soft); background:#101720;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  cursor:pointer;
}
.art-card:hover, .artcard:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,.16); box-shadow:var(--shadow); }
.art-card img, .artcard__img, .thumb{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  background:linear-gradient(180deg,#18202a,#0b0f14); border-bottom:1px solid var(--line-soft);
}
.art-meta, .artcard__body{ padding:12px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.art-title, .artcard__title{ font-weight:700; line-height:1.2; }
.art-creator{ color:var(--muted); font-size:.9rem; }
.badge{
  position:absolute; top:10px; left:10px; background:rgba(0,0,0,.55);
  backdrop-filter:blur(6px); color:#fff; padding:.35rem .55rem;
  border-radius:999px; border:1px solid rgba(255,255,255,.12); font-size:.78rem;
}

/* ---------- Grid utilities ---------- */
.grid{ display:grid; gap:var(--gap); }
.grid.cols-2{ grid-template-columns:1fr; }
.grid.cols-3{ grid-template-columns:1fr; }
.grid.cols-4{ grid-template-columns:1fr; }
.grid.autofit-230{ grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); }
@media (min-width:720px){
  .grid.cols-2{ grid-template-columns:repeat(2,1fr); }
  .grid.cols-3{ grid-template-columns:repeat(3,1fr); }
  .grid.cols-4{ grid-template-columns:repeat(4,1fr); }
}

/* ---------- Hero ---------- */
.hero{ padding:20px 0 8px; }
.hero.split{ display:grid; gap:var(--gap); grid-template-columns:1fr; align-items:center; }
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:12px; }
.hero-points{ list-style:none; padding:0; margin:12px 0 0; display:grid; gap:8px; }
.hero-points .dot{ display:inline-block; width:8px; height:8px; margin-right:8px; border-radius:50%; background:var(--accent); vertical-align:middle; }
.hero-art .frame{ border-radius:16px; overflow:hidden; background:var(--panel); border:1px solid var(--line-soft); }
@media (min-width:900px){ .hero.split{ grid-template-columns:1.1fr .9fr; } }

/* ---------- Tables ---------- */
.table{ width:100%; border-collapse:separate; border-spacing:0 10px; }
.table th, .table td{ padding:12px 10px; text-align:left; }
.table tr{ background:#0f151d; border:1px solid var(--line-soft); }
.table tr td:first-child, .table tr th:first-child{ border-top-left-radius:12px; border-bottom-left-radius:12px; }
.table tr td:last-child, .table tr th:last-child{ border-top-right-radius:12px; border-bottom-right-radius:12px; }

/* ---------- Modal ---------- */
.modal{
  position:fixed; inset:0; display:none; place-items:center;
  background:rgba(0,0,0,.55); z-index:80; padding:20px;
}
.modal.open{ display:grid; }
.modal-card{
  width:min(900px, 96vw); background:var(--panel);
  border:1px solid var(--line-soft); border-radius:18px; overflow:hidden;
}
.modal-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-bottom:1px solid var(--line);
}
.modal-body{ display:grid; grid-template-columns:1fr; gap:16px; padding:16px; }
.modal-body .thumb{ height:auto; }
.close{ background:transparent; color:var(--text); border:1px solid var(--line); border-radius:10px; padding:.42rem .7rem; cursor:pointer; }
@media (min-width:820px){
  .modal-body{ grid-template-columns:1fr 1.2fr; padding:18px; gap:18px; }
  .modal-body .thumb{ height:100%; object-fit:cover; }
}

/* ---------- Alerts ---------- */
.alert{ background:#0f151d; border:1px dashed var(--line); padding:14px; border-radius:12px; color:var(--muted); }

/* ---------- Footer ---------- */
.footer{ border-top:1px solid var(--line-soft); padding:18px 0 26px; color:var(--muted); display:flex; gap:16px; justify-content:space-between; flex-wrap:wrap; }

/* ---------- Accessibility helpers ---------- */
.skip{ position:absolute; left:-9999px; top:auto; }
.skip:focus{ left:16px; top:12px; z-index:9999; background:#fff; color:#111; padding:.5rem .7rem; border-radius:.5rem; }

/* ---------- Misc utilities ---------- */
.hr, hr.sep{ border:none; border-top:1px solid var(--line); margin:24px 0; }
.hide{ display:none !important; }
.muted{ color:var(--muted); }
.nowrap{ white-space:nowrap; }
.center{ text-align:center; }
.max-60ch{ max-width:60ch; }

/* ---------- Responsive polish ---------- */
@media (min-width:1000px){
  .container{ padding:0 20px; }
}
@media (max-width:360px){
  .btn{ padding:.55rem .75rem; }
  nav.primary a{ padding:6px 8px; }
}