:root { --ink:#0a0a0a; --ink-soft:#2a2925; --paper:#fff; --paper-2:#f8f6f1; --gold:#c9a227; --gold-deep:#a8861b; --line:#e7e3da; --muted:#6e6a62; --danger:#b3261e; --ok:#2e7d4f;
  --serif:"Cormorant Garamond",Georgia,serif; --sans:"Manrope","Helvetica Neue",Arial,sans-serif; --ease:cubic-bezier(.22,.61,.36,1); }
* { box-sizing:border-box } body { margin:0; font:15px/1.55 var(--sans); color:var(--ink); background:var(--paper-2); -webkit-font-smoothing:antialiased }
h1,h2,h3 { font-family:var(--serif); font-weight:500; margin:0 0 .4em; line-height:1.1 } h1 { font-size:2.4rem } h2 { font-size:1.5rem; margin-top:.2em } 
.muted { color:var(--muted) } .small { font-size:.85rem } p { margin:0 0 1em }
.eyebrow { font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; font-weight:700; color:var(--gold-deep) }
.brand-name { font-family:var(--serif); font-size:1.5rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; display:block; line-height:1 }
.brand-sub { font-size:.58rem; letter-spacing:.38em; text-transform:uppercase; color:var(--gold); font-weight:700; display:block; margin-top:6px }

/* auth */
.auth-body { min-height:100vh; display:grid; place-items:center; background:var(--ink); padding:24px }
.auth-card { width:min(440px,100%); background:var(--paper); padding:40px 38px; border-top:3px solid var(--gold); box-shadow:0 40px 80px -40px rgba(0,0,0,.8) }
.auth-brand { margin-bottom:26px } .auth-brand .brand-sub { color:var(--gold-deep) }

/* buttons + forms */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--ink); color:#fff; border:1px solid var(--ink); padding:12px 22px; font:700 .74rem/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; cursor:pointer; border-radius:2px; transition:background .25s,color .25s,border-color .25s; text-decoration:none }
.btn:hover { background:var(--gold); border-color:var(--gold); color:var(--ink) } .btn.ghost { background:transparent; color:var(--ink) } .btn.ghost:hover { background:var(--ink); color:#fff }
.btn.danger { background:transparent; color:var(--danger); border-color:var(--danger) } .btn.danger:hover { background:var(--danger); color:#fff }
.btn.sm { padding:8px 14px; font-size:.66rem } .btn-block { width:100% } .btn[disabled] { opacity:.5; cursor:progress }
.form { display:grid; gap:18px } .row { display:grid; grid-template-columns:1fr 1fr; gap:18px } @media (max-width:760px) { .row { grid-template-columns:1fr } }
.field { display:grid; gap:6px } .field label { font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--ink-soft) } .field label small { text-transform:none; letter-spacing:0; font-weight:400; color:var(--muted) }
.field input, .field textarea, .field select { font:inherit; color:var(--ink); border:1px solid var(--line); background:#fff; padding:11px 12px; border-radius:2px; width:100%; transition:border-color .2s, box-shadow .2s }
.field input:focus, .field textarea:focus, .field select:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,162,39,.2) }
.field textarea { resize:vertical; min-height:80px }
.alert { padding:12px 14px; border-left:3px solid var(--gold); background:var(--paper-2); font-size:.92rem } .alert.err { border-color:var(--danger) }
.actions { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:6px }

/* shell */
.shell { display:grid; grid-template-columns:250px minmax(0,1fr); min-height:100vh }
.side { background:var(--ink); color:#fff; padding:28px 22px; display:flex; flex-direction:column; gap:28px; position:sticky; top:0; height:100vh }
.side-nav { display:grid; gap:2px } .side-nav a { color:rgba(255,255,255,.75); text-decoration:none; padding:11px 12px; font-size:.82rem; letter-spacing:.08em; font-weight:600; border-left:2px solid transparent; display:flex; justify-content:space-between; align-items:center; transition:all .2s }
.side-nav a:hover { color:#fff; background:rgba(255,255,255,.05) } .side-nav a.active { color:var(--gold); border-left-color:var(--gold); background:rgba(201,162,39,.08) }
.pill { background:var(--gold); color:var(--ink); font-size:.66rem; padding:2px 8px; border-radius:20px; font-weight:700 }
.side-foot { margin-top:auto; display:grid; gap:6px } .side-link { color:rgba(255,255,255,.6); text-decoration:none; font-size:.78rem; padding:6px 12px } .side-link:hover { color:var(--gold) } .as-btn { background:none; border:0; cursor:pointer; font:inherit; text-align:left; width:100% }
.content { padding:36px 40px 80px; max-width:1240px; width:100%; min-width:0 }
.tab-head { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:24px; flex-wrap:wrap }
.next-chip { background:#fff; border:1px solid var(--line); border-left:3px solid var(--gold); padding:10px 16px; font-size:.9rem } .next-chip b { font-family:var(--serif); font-size:1.15rem }
.panel { min-width:0; background:#fff; border:1px solid var(--line); padding:26px 28px; margin-bottom:22px; box-shadow:0 12px 40px -30px rgba(10,10,10,.3) }
.two { display:grid; grid-template-columns:1fr 1fr; gap:22px } @media (max-width:980px) { .two { grid-template-columns:1fr } }
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:22px } @media (max-width:900px) { .stat-grid { grid-template-columns:repeat(2,1fr) } }
.stat { background:#fff; border:1px solid var(--line); padding:20px 22px; display:grid; gap:4px; border-top:2px solid var(--ink) }
.stat span { font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); font-weight:700 } .stat b { font-family:var(--serif); font-size:2.6rem; line-height:1; font-weight:500 } .stat small { color:var(--muted); font-size:.8rem }
.stat.gold { border-top-color:var(--gold) } .stat.gold b { color:var(--gold-deep) }
.stat.edit input { font:600 1.6rem/1 var(--serif); border:1px solid var(--line); padding:8px 10px; width:100%; border-radius:2px } .stat.edit input:focus { outline:none; border-color:var(--gold) }
.reg-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:16px } @media (max-width:900px) { .reg-grid { grid-template-columns:repeat(2,1fr) } }
.chart-box { position:relative; height:260px } .chart-box.tall { height:320px }
.tbl { width:100%; border-collapse:collapse; font-size:.9rem } .tbl th { text-align:left; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); padding:8px 10px; border-bottom:1px solid var(--ink) } .tbl td { padding:10px; border-bottom:1px solid var(--line); vertical-align:top } .tbl .r { text-align:right } .tbl tr.clickable { cursor:pointer } .tbl tr.clickable:hover td { background:var(--paper-2) }
.badge { display:inline-block; font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; padding:3px 8px; border-radius:2px; background:var(--paper-2); border:1px solid var(--line) }
.badge.new { background:var(--gold); border-color:var(--gold); color:var(--ink) } .badge.replied, .badge.accepted { background:#e5f2ea; border-color:#bfe0cb; color:var(--ok) } .badge.closed, .badge.declined { color:var(--muted) }
.badge.buyer { background:var(--ink); color:#fff; border-color:var(--ink) } .badge.seller { background:#fff; border-color:var(--gold); color:var(--gold-deep) }
.filters { display:flex; gap:6px; flex-wrap:wrap } .chip { background:#fff; border:1px solid var(--line); padding:7px 14px; font:600 .72rem var(--sans); letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:20px } .chip.active { background:var(--ink); color:#fff; border-color:var(--ink) }
.toast { position:fixed; right:24px; top:24px; z-index:50; background:var(--ink); color:#fff; padding:14px 20px; border-left:3px solid var(--gold); box-shadow:0 20px 40px -20px rgba(0,0,0,.6); font-size:.9rem; max-width:360px } .toast.err { border-color:var(--danger) }

/* inbox */
.inbox { display:grid; grid-template-columns:360px 1fr; gap:22px; align-items:start } @media (max-width:980px) { .inbox { grid-template-columns:1fr } }
.inbox-list { display:grid; gap:8px; max-height:75vh; overflow:auto }
.enq { background:#fff; border:1px solid var(--line); padding:14px 16px; cursor:pointer; display:grid; gap:4px; border-left:3px solid transparent } .enq:hover { border-color:var(--gold) } .enq.active { border-left-color:var(--gold); background:#fffdf5 }
.enq .top { display:flex; justify-content:space-between; gap:10px; align-items:center } .enq b { font-weight:600 } .enq .sub { font-size:.86rem; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .enq .meta { font-size:.74rem; color:var(--muted) }
.thread { display:grid; gap:14px; margin:18px 0 } .msg { padding:16px 18px; border:1px solid var(--line); background:var(--paper-2); white-space:pre-wrap } .msg.reply { background:#fff; border-left:3px solid var(--gold) } .msg .who { font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:6px; white-space:normal }
.msg .warn { font-size:.78rem; color:var(--danger); margin-top:8px; white-space:normal }
.detail-head { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:flex-start } .detail-head dl { margin:0; display:grid; grid-template-columns:auto 1fr; gap:4px 14px; font-size:.9rem } .detail-head dt { color:var(--muted) } .detail-head dd { margin:0 }

/* images */
.uploader { border:1px dashed var(--gold); background:var(--paper-2); padding:26px; text-align:center; position:relative; margin-bottom:16px; color:var(--muted); font-size:.9rem; transition:background .2s } .uploader:hover, .uploader.drag { background:#fdf8e6 }
.uploader input { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100% }
.img-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px }
.img { border:1px solid var(--line); background:#fff; display:grid; gap:6px; padding:6px; cursor:grab } .img.dragging { opacity:.4 } .img img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block }
.img input { font:inherit; font-size:.82rem; border:1px solid var(--line); padding:6px 8px; width:100% } .img button { background:none; border:0; color:var(--danger); cursor:pointer; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; padding:4px }
.empty { color:var(--muted); padding:20px; text-align:center; border:1px solid var(--line); font-size:.9rem }
@media (max-width:820px) { .shell { grid-template-columns:1fr } .side { position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; gap:14px; padding:16px } .side-nav { display:flex; flex-wrap:wrap; gap:0 } .side-nav a { padding:8px 10px; border-left:0; border-bottom:2px solid transparent } .side-nav a.active { border-bottom-color:var(--gold) } .side-foot { margin:0; display:flex } .content { padding:22px 18px 60px } }

.notice { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; background:#fff; border:1px solid var(--gold); border-left:4px solid var(--gold); padding:14px 18px; margin-bottom:22px; font-size:.92rem }