/* ============== AVNue · NEON — forms, filters, browse, dashboard patterns */

/* ----------------------------------------------------------------- BROWSE */
.browse{ display:grid; grid-template-columns:264px 1fr; gap:26px; align-items:start; }
.filters{ position:sticky; top:84px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:6px 18px 14px; }
.fgroup{ padding:16px 0; border-bottom:1px solid var(--border); }
.fgroup:last-child{ border-bottom:0; }
.fgroup h4{ font-size:12px; font-family:var(--fmono); letter-spacing:.08em; text-transform:uppercase;
  color:var(--faint); margin-bottom:12px; }
.fopt{ display:flex; align-items:center; gap:10px; padding:6px 0; cursor:pointer; font-size:13.5px; color:var(--muted); }
.fopt:hover{ color:var(--ink); }
.fopt .cb{ width:18px; height:18px; border-radius:5px; border:1.5px solid var(--border2); flex:0 0 auto;
  display:grid; place-items:center; color:transparent; transition:.12s; }
.fopt.on{ color:var(--ink); } .fopt.on .cb{ background:var(--primary); border-color:var(--primary); color:#fff; box-shadow:var(--glow); }
.fopt .cnt{ margin-left:auto; font-size:11.5px; color:var(--faint); font-family:var(--fmono); }
.fswitch{ display:flex; align-items:center; justify-content:space-between; padding:7px 0; font-size:13.5px; color:var(--muted); cursor:pointer; }
.fswitch .sw{ width:38px; height:21px; border-radius:99px; background:var(--surface2); border:1px solid var(--border2); position:relative; transition:.18s; flex:0 0 auto; }
.fswitch .sw::after{ content:""; position:absolute; width:15px; height:15px; border-radius:50%; background:var(--faint); top:2px; left:2px; transition:.18s; }
.fswitch.on{ color:var(--ink); } .fswitch.on .sw{ background:var(--primary); border-color:transparent; }
.fswitch.on .sw::after{ left:auto; right:2px; background:#fff; }
.frate{ display:flex; gap:6px; flex-wrap:wrap; }
.frate .rc{ font-size:12.5px; font-weight:600; padding:5px 11px; border-radius:var(--pill); border:1px solid var(--border2); color:var(--muted); cursor:pointer; }
.frate .rc.on{ background:var(--primary-soft); border-color:var(--primary); color:var(--ink); }

.browse-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.browse-head h1{ font-size:26px; } .browse-head .cnt{ color:var(--faint); font-size:13.5px; margin-top:4px; }
.sortsel{ display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 14px; border-radius:var(--pill);
  border:1px solid var(--border2); background:var(--surface); color:var(--muted); font-size:13px; font-weight:600; cursor:pointer; }
.active-filters{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.afchip{ display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 11px; border-radius:var(--pill);
  background:var(--primary-soft); border:1px solid var(--primary); color:var(--ink); font-size:12.5px; font-weight:600; cursor:pointer; }
.afchip .x{ opacity:.6; } .afchip:hover .x{ opacity:1; }
.results{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.results .empty{ grid-column:1/-1; text-align:center; color:var(--faint); padding:60px 0; font-size:14px; }
.rprice{ font-family:var(--fmono); font-weight:700; font-size:13px; }

/* ------------------------------------------------------------------ FORMS */
.post-wrap{ max-width:760px; margin:0 auto; }
.stepper{ display:flex; align-items:center; margin:6px 0 28px; }
.stp{ display:flex; align-items:center; flex:1; }
.stp:last-child{ flex:0 0 auto; }
.stp .sdot{ width:30px; height:30px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
  font-family:var(--fdisp); font-weight:700; font-size:13px; background:var(--surface2); color:var(--faint);
  border:1px solid var(--border2); transition:.2s; }
.stp.now .sdot{ background:var(--primary); color:#fff; border-color:transparent; box-shadow:var(--glow); }
.stp.done .sdot{ background:var(--accent); color:#04201c; border-color:transparent; }
.av.light .stp.done .sdot{ color:#fff; }
.stp .slabel{ font-size:13px; font-weight:600; color:var(--muted); margin-left:10px; white-space:nowrap; }
.stp.now .slabel,.stp.done .slabel{ color:var(--ink); }
.stp .sline{ flex:1; height:2px; background:var(--border2); margin:0 14px; }
.stp.done .sline{ background:var(--accent); }

.form-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:30px; }
.form-card .fh{ font-size:21px; font-family:var(--fdisp); } .form-card .fsub{ color:var(--muted); font-size:14px; margin-top:6px; }
.frow{ margin-top:22px; } .frow:first-of-type{ margin-top:24px; }
.flabel{ font-size:13.5px; font-weight:700; display:block; margin-bottom:8px; }
.flabel .opt{ color:var(--faint); font-weight:500; font-family:var(--fmono); font-size:11.5px; margin-left:6px; }
.fhint{ color:var(--faint); font-size:12px; margin-top:7px; }
.input,.textarea{ width:100%; background:var(--surface2); border:1px solid var(--border2); border-radius:var(--radius-sm);
  padding:12px 14px; color:var(--ink); font-family:var(--fbody); font-size:14.5px; outline:none; transition:.15s; }
.input::placeholder,.textarea::placeholder{ color:var(--faint); }
.input:focus,.textarea:focus{ border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft); }
.textarea{ resize:vertical; min-height:104px; line-height:1.55; }
.fgrid2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.selchips{ display:flex; flex-wrap:wrap; gap:9px; }
.selchip{ padding:9px 15px; border-radius:var(--pill); border:1px solid var(--border2); background:var(--surface2);
  color:var(--muted); font-size:13.5px; font-weight:600; cursor:pointer; transition:.12s; display:inline-flex; align-items:center; gap:8px; }
.selchip:hover{ color:var(--ink); } .selchip.on{ background:var(--primary-soft); border-color:var(--primary); color:var(--ink); }
/* check icon inside a selchip shows only when selected */
.selchip .ck{ display:none; align-items:center; }
.selchip.on .ck{ display:inline-flex; }
.seg{ display:inline-flex; padding:4px; gap:3px; background:var(--surface2); border:1px solid var(--border); border-radius:var(--pill); }
.seg button{ border:0; background:transparent; color:var(--muted); font-family:var(--fbody); font-weight:600; font-size:13px;
  padding:8px 16px; border-radius:var(--pill); cursor:pointer; transition:.12s; }
.seg button.on{ background:var(--primary); color:#fff; box-shadow:var(--glow); }
.uploads{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.uploads image-slot{ width:100%; height:92px; border-radius:var(--radius-sm); border:1px solid var(--border2); }
.form-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:26px; }
.review-line{ display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--border); font-size:14px; }
.review-line:last-child{ border-bottom:0; }
.review-line .rk{ width:140px; flex:0 0 auto; color:var(--faint); font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; font-weight:600; padding-top:2px; }
.review-line .rv{ flex:1; line-height:1.5; } .review-line .rv b{ font-family:var(--fmono); }

/* -------------------------------------------------------------- DASHBOARD */
.dash-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:4px; }
.dash-head h1{ font-size:28px; } .dash-head .sub{ color:var(--muted); font-size:14px; margin-top:6px; }
.tabs{ display:inline-flex; gap:4px; padding:5px; background:var(--surface2); border:1px solid var(--border); border-radius:var(--pill); margin:20px 0 18px; }
.tabs button,.tabs a{ border:0; background:transparent; color:var(--muted); font-family:var(--fbody); font-weight:600; font-size:13.5px;
  padding:9px 18px; border-radius:var(--pill); cursor:pointer; transition:.12s; text-decoration:none; display:inline-block; }
.tabs button.on,.tabs a.on{ background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm); }
.nstats{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:8px; }
.nstat{ padding:16px 18px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--border); }
.nstat b{ font-family:var(--fdisp); font-size:26px; display:block; line-height:1; }
.nstat span{ color:var(--faint); font-size:12px; font-weight:600; }
.nstat.hot b{ color:var(--accent2); }
.qhead{ display:flex; align-items:center; gap:12px; margin:24px 0 14px; }
.qhead h3{ font-size:16px; font-family:var(--fdisp); } .qhead .qf{ margin-left:auto; display:flex; gap:8px; }

.dcomm{ padding:20px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--border); margin-bottom:12px; cursor:pointer; transition:.15s; }
.dcomm:hover{ border-color:var(--primary); }
.dcomm.flag{ border-color:var(--accent2); }
.dcomm .r1{ display:flex; align-items:flex-start; gap:14px; }
.dcomm .ttl{ font-family:var(--fdisp); font-weight:600; font-size:17px; }
.dcomm .who{ color:var(--muted); font-size:13px; margin-top:3px; display:flex; align-items:center; gap:8px; }
.dcomm .scope{ color:var(--muted); font-size:13.5px; margin-top:10px; max-width:600px; }
.mini{ display:flex; align-items:center; margin-top:16px; gap:4px; }
.mini .seg2{ flex:1; height:5px; border-radius:99px; background:var(--surface2); }
.mini .seg2.done{ background:var(--primary); } .mini .seg2.now{ background:var(--accent); box-shadow:var(--glow-accent); }
.mini-labels{ display:flex; justify-content:space-between; margin-top:8px; font-size:10.5px; color:var(--faint); font-family:var(--fmono); }
.dmeta{ display:flex; gap:22px; margin-top:16px; padding-top:15px; border-top:1px solid var(--border); color:var(--muted); font-size:13px; align-items:center; }
.dmeta b{ color:var(--ink); font-weight:700; font-family:var(--fmono); }
.dmeta .warn,.dmeta .warn b{ color:var(--accent2); }
.cap-inline{ display:flex; align-items:center; gap:12px; padding:10px 16px; border-radius:var(--pill); background:var(--surface); border:1px solid var(--border); color:var(--ink); font-family:var(--fbody); font-size:14px; font-weight:600; }
.cap-inline .sw{ width:38px; height:22px; border-radius:99px; background:var(--primary); position:relative; flex:0 0 auto; }
.cap-inline .sw::after{ content:""; position:absolute; width:16px; height:16px; border-radius:50%; background:#fff; top:3px; right:3px; }