/* ============================================
   IMGBAZAAR MARKETPLACE — LIGHT THEME
   Ivory + Deep Gold luxury palette
   ============================================ */
:root {
  --bg: #f6f3ec;
  --surface: #ffffff;
  --surface2: #f0ece3;
  --border: #e7e1d5;
  --border2: #d6cebd;
  --accent: #97793d;        /* deep gold — readable on white */
  --accent-dim: #b89a5e;
  --accent-glow: rgba(151,121,61,0.10);
  --text: #2a2620;          /* warm near-black body */
  --muted: #8c8475;         /* warm gray */
  --white: #16130e;         /* darkest — headings (name kept for compatibility) */
  --green: #2f7d57;
  --red: #b8492e;
  --blue: #3f6b8f;
}

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Syne', sans-serif;
  overflow-x: hidden;
  cursor: none;
}

/* CURSOR */
.cursor { position: fixed; width: 10px; height: 10px; background: var(--accent); border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%,-50%); transition: width .3s, height .3s; }
.cursor-ring { position: fixed; width: 36px; height: 36px; border: 1px solid var(--accent); border-radius: 50%; pointer-events: none; z-index: 9998; transform: translate(-50%,-50%); transition: width .3s, height .3s, opacity .3s; opacity: .5; }
.cursor.hov { width: 24px; height: 24px; } .cursor-ring.hov { width: 60px; height: 60px; opacity: .3; }
@media (hover: none) { .cursor, .cursor-ring { display: none; } body { cursor: auto; } }

/* TYPOGRAPHY */
.serif { font-family: 'Cormorant Garamond', serif; }
.mono { font-family: 'DM Mono', monospace; }

/* NAV */
.topnav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 40px; height: 64px;
  background: rgba(246,243,236,.92); backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
.logo { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 400; letter-spacing: .3em; color: var(--white); text-decoration: none; }
.logo span { color: var(--accent); }
.nav-links { display: flex; gap: 28px; list-style: none; }
.nav-links a { color: var(--muted); text-decoration: none; font-size: 11px; letter-spacing: .15em; text-transform: uppercase; font-weight: 600; transition: color .3s; }
.nav-links a:hover, .nav-links a.active { color: var(--accent); }
.nav-right { display: flex; align-items: center; gap: 14px; }
.icon-btn { width: 36px; height: 36px; border: 1px solid var(--border2); background: transparent; color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: none; transition: all .3s; position: relative; }
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.badge-dot { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; background: var(--accent); color: #fff; border-radius: 8px; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; font-family: 'DM Mono', monospace; }
.btn-cta { background: var(--accent); color: #fff; padding: 9px 22px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; text-decoration: none; transition: all .3s; border: none; cursor: none; }
.btn-cta:hover { background: var(--white); }
.btn-outline { background: transparent; border: 1px solid var(--border2); color: var(--text); padding: 9px 22px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; text-decoration: none; transition: all .3s; cursor: none; }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #efe7d4, #e3d6b8); border: 1px solid var(--border2); display: flex; align-items: center; justify-content: center; font-family: 'Cormorant Garamond', serif; color: var(--accent); font-size: 16px; cursor: none; }

/* PAGE STRUCTURE */
.page-wrap { padding: 40px; max-width: 1600px; margin: 0 auto; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: 16px; }
.page-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(32px,4vw,48px); font-weight: 400; color: var(--white); }
.page-title em { font-style: italic; color: var(--accent); }
.page-sub { font-size: 13px; color: var(--muted); margin-top: 6px; }
.eyebrow { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }

/* CARDS / PANELS */
.panel { background: var(--surface); border: 1px solid var(--border); padding: 28px; box-shadow: 0 1px 3px rgba(40,34,24,.03); }
.panel-pad-sm { padding: 20px; }
.stat-card { background: var(--surface); border: 1px solid var(--border); padding: 24px; position: relative; overflow: hidden; transition: all .3s; box-shadow: 0 1px 3px rgba(40,34,24,.03); }
.stat-card:hover { border-color: var(--border2); box-shadow: 0 6px 20px rgba(40,34,24,.06); }
.stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0; transition: opacity .3s; }
.stat-card:hover::before { opacity: 1; }
.stat-label { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-family: 'DM Mono', monospace; margin-bottom: 12px; }
.stat-value { font-family: 'Cormorant Garamond', serif; font-size: 40px; font-weight: 400; color: var(--white); line-height: 1; }
.stat-value.accent { color: var(--accent); }
.stat-value.green { color: var(--green); }
.stat-delta { font-size: 11px; margin-top: 8px; font-family: 'DM Mono', monospace; }
.stat-delta.up { color: var(--green); } .stat-delta.down { color: var(--red); }

/* GRID HELPERS */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }

/* BUTTONS */
.btn { padding: 12px 28px; font-size: 11px; letter-spacing: .15em; text-transform: uppercase; font-weight: 700; cursor: none; transition: all .3s; border: none; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; justify-content: center; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--white); transform: translateY(-1px); }
.btn-ghost { background: transparent; border: 1px solid var(--border2); color: var(--text); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-sm { padding: 8px 18px; font-size: 10px; }
.btn-block { width: 100%; }

/* FORMS */
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.field-label { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); font-family: 'DM Mono', monospace; }
.input, .select, .textarea { background: var(--surface); border: 1px solid var(--border2); color: var(--text); padding: 13px 16px; font-family: 'Syne', sans-serif; font-size: 14px; outline: none; transition: border-color .3s; width: 100%; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--accent); }
.input::placeholder, .textarea::placeholder { color: var(--muted); }
.select { appearance: none; cursor: none; background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238c8475' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
.select option { background: var(--surface); }
.textarea { resize: vertical; min-height: 100px; }

/* TABLE */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); font-family: 'DM Mono', monospace; padding: 14px 16px; border-bottom: 1px solid var(--border2); text-align: left; }
.tbl td { padding: 16px; font-size: 13px; color: var(--text); border-bottom: 1px solid var(--border); }
.tbl tr:hover td { background: var(--surface2); }
.tbl .muted { color: var(--muted); font-size: 12px; }

/* BADGES */
.badge { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; padding: 4px 10px; font-family: 'DM Mono', monospace; display: inline-flex; align-items: center; gap: 5px; }
.badge-live { background: rgba(47,125,87,.12); color: var(--green); border: 1px solid rgba(47,125,87,.3); }
.badge-pending { background: rgba(151,121,61,.12); color: var(--accent); border: 1px solid rgba(151,121,61,.3); }
.badge-rejected { background: rgba(184,73,46,.10); color: var(--red); border: 1px solid rgba(184,73,46,.3); }
.badge-draft { background: rgba(140,132,117,.12); color: var(--muted); border: 1px solid var(--border2); }
.badge-exclusive { background: var(--accent); color: #fff; }
.badge-new { background: transparent; border: 1px solid var(--accent); color: var(--accent); }

/* IMAGE PLACEHOLDERS — kept rich; they stand in for real photographs */
.imgph { width: 100%; position: relative; overflow: hidden; }
.imgph-inner { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.ar-t { aspect-ratio: 2/3; } .ar-w { aspect-ratio: 16/10; } .ar-s { aspect-ratio: 1/1; } .ar-l { aspect-ratio: 3/4; } .ar-x { aspect-ratio: 4/3; }
.g1 { background: linear-gradient(155deg,#c9a86a,#8a6a35 45%,#b89455 70%,#d8c089); }
.g2 { background: linear-gradient(140deg,#9fb3cc,#4f6f96 50%,#aebfd4); }
.g3 { background: linear-gradient(150deg,#a8c39a,#5e7d4f 50%,#bcd2af); }
.g4 { background: linear-gradient(135deg,#c9a6c0,#7a4d72 50%,#d8bcd2); }
.g5 { background: linear-gradient(155deg,#d4cf9a,#a09a4e 50%,#e0dcb0); }
.g6 { background: linear-gradient(140deg,#a6a6c6,#5a5a86 50%,#bcbcd6); }
.g7 { background: linear-gradient(135deg,#d8a878,#a0623a 50%,#e6c09a); }
.g8 { background: linear-gradient(145deg,#8fc4b4,#3f7d6a 50%,#aed8c9); }
.g9 { background: linear-gradient(160deg,#b49ad0,#6a4d92 50%,#cdbce0); }
.g10 { background: linear-gradient(135deg,#d6b48a,#a06f3a 50%,#e6cda6); }
.g11 { background: linear-gradient(145deg,#9ec0d0,#4f7f96 50%,#bcd6e0); }
.g12 { background: linear-gradient(150deg,#c6a0c0,#7a4d72 50%,#d8bcd2); }
.imgicon { opacity: .25; }

/* SIDEBAR (dashboard layout) */
.dash { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.sidebar { background: var(--surface); border-right: 1px solid var(--border); padding: 24px 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.sidebar-logo { padding: 0 24px 24px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.side-section { padding: 8px 0; }
.side-label { font-size: 9px; letter-spacing: .25em; text-transform: uppercase; color: var(--muted); font-family: 'DM Mono', monospace; padding: 12px 24px 8px; }
.side-link { display: flex; align-items: center; gap: 14px; padding: 12px 24px; color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 500; transition: all .25s; border-left: 2px solid transparent; cursor: none; }
.side-link:hover { color: var(--text); background: var(--surface2); }
.side-link.active { color: var(--accent); border-left-color: var(--accent); background: var(--accent-glow); }
.side-icon { width: 18px; height: 18px; flex-shrink: 0; }
.dash-main { overflow-y: auto; background: var(--bg); }
.dash-topbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 32px; border-bottom: 1px solid var(--border); background: rgba(246,243,236,.8); position: sticky; top: 0; z-index: 50; backdrop-filter: blur(12px); }
.dash-content { padding: 32px; }

/* PROGRESS BAR */
.pbar { height: 4px; background: var(--border2); border-radius: 2px; overflow: hidden; }
.pbar-fill { height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--accent-dim), var(--accent)); }

/* TOAST */
.toast { position: fixed; bottom: 32px; right: 32px; background: var(--surface); border: 1px solid var(--accent); padding: 16px 24px; z-index: 500; display: flex; align-items: center; gap: 12px; transform: translateY(120px); opacity: 0; transition: all .4s cubic-bezier(.16,1,.3,1); box-shadow: 0 12px 40px rgba(40,34,24,.12); }
.toast.show { transform: translateY(0); opacity: 1; }
.toast-icon { color: var(--accent); }
.toast-text { font-size: 12px; color: var(--text); }

/* NOISE — very subtle on light */
body::before { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); opacity: .015; pointer-events: none; z-index: 1000; mix-blend-mode: multiply; }

/* REVEAL */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s, transform .7s; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* UTIL */
.flex { display: flex; } .flex-col { flex-direction: column; }
.items-center { align-items: center; } .justify-between { justify-content: space-between; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; }
.mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; }
.text-muted { color: var(--muted); } .text-accent { color: var(--accent); }
.text-sm { font-size: 12px; } .text-xs { font-size: 11px; }
.w-full { width: 100%; }

/* BREADCRUMB */
.breadcrumb { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--muted); margin-bottom: 20px; font-family: 'DM Mono', monospace; letter-spacing: .05em; }
.breadcrumb a { color: var(--muted); text-decoration: none; transition: color .3s; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .sep { color: var(--border2); }

/* TABS */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 28px; }
.tab { padding: 12px 24px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); cursor: none; border-bottom: 2px solid transparent; transition: all .3s; font-weight: 600; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }