@font-face { font-family:'PP Neue Montreal'; src:url('../fonts/PPNeueMontreal-Regular-5.otf') format('opentype'); font-weight:400; font-display:swap; }
@font-face { font-family:'PP Neue Montreal'; src:url('../fonts/PPNeueMontreal-Regular-5.otf') format('opentype'); font-weight:500; font-display:swap; }
@font-face { font-family:'Ivory'; src:url('../fonts/IvoryLLWeb-Light.woff2') format('woff2'), url('../fonts/IvoryLLWeb-Light.woff') format('woff'); font-weight:300; font-display:swap; }
:root { --ink:#0A0A0A; --grey:#9A9794; --mid:#6B6B6B; --fill:#F1F0EE; --line:rgba(10,10,10,.12); --bg:#FFFFFF; --side:#FAFAF9; --danger:#8B1F1F; --ui:'PP Neue Montreal',-apple-system,system-ui,sans-serif; --dsp:'Ivory',Georgia,serif; }
* { box-sizing:border-box; }
html, body { margin:0; height:100%; }
body { font:400 14px/1.4 var(--ui); color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; display:flex; }
a { color:inherit; }
button, input, select, textarea { font:inherit; color:inherit; }
[hidden] { display:none !important; }

/* sidebar */
.sb { width:240px; flex-shrink:0; height:100vh; position:sticky; top:0; display:flex; flex-direction:column; background:var(--side); border-right:0.5px solid var(--line); padding:24px 16px; }
.sb-logo img { height:22px; display:block; margin:0 8px; filter:brightness(0); }
.sb-co { display:flex; align-items:center; gap:12px; margin:24px 0 16px; padding:0 8px; }
.sb-co b { display:block; font-weight:500; font-size:14px; line-height:1.2; }
.sb-co i { display:block; font-style:normal; font-size:12px; color:var(--grey); margin-top:2px; }
.av { width:32px; height:32px; border-radius:50%; background:var(--ink); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; }
.sb-nav { display:flex; flex-direction:column; gap:2px; overflow-y:auto; flex:1; }
.sb-nav a { display:flex; align-items:center; justify-content:space-between; height:36px; padding:0 12px; border-radius:999px; text-decoration:none; color:var(--mid); font-size:14px; }
.sb-nav a:hover { color:var(--ink); }
.sb-nav a.on { background:var(--fill); color:var(--ink); }
.sb-nav em { margin-left:6px; font-style:normal; font-size:12px; color:var(--grey); }
.sb-h { font-size:12px; color:var(--grey); margin:24px 12px 8px; }
.sb-ft { padding-top:16px; }

/* main */
.mn { flex:1; min-width:0; height:100vh; overflow-y:auto; }
#view { padding:40px 48px 80px; max-width:1360px; }
.demo { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:24px 48px 0; padding:12px 12px 12px 20px; background:var(--fill); border-radius:16px; font-size:14px; max-width:1264px; }
.ph { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:24px; }
.ph h1 { margin:0; font:300 40px/1 var(--dsp); letter-spacing:-0.02em; }
.ph p { margin:8px 0 0; color:var(--grey); font-size:14px; }
.ph .act { display:flex; gap:8px; flex-shrink:0; }
h2.sh { margin:40px 0 12px; font:500 14px/1.2 var(--ui); display:flex; justify-content:space-between; align-items:baseline; }
h2.sh a, h2.sh button { font-weight:400; color:var(--mid); text-decoration:none; background:none; border:0; cursor:pointer; padding:0; }

/* buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:36px; padding:0 16px; border-radius:999px; border:0.5px solid var(--line); background:#fff; cursor:pointer; text-decoration:none; font-size:14px; white-space:nowrap; }
.btn:hover { border-color:rgba(10,10,10,.3); }
.btn.k { background:var(--ink); color:#fff; border-color:var(--ink); }
.btn.sm { height:32px; padding:0 14px; font-size:13px; }
.btn.wide { width:100%; }
.btn.dg { color:var(--danger); }
.btn:disabled { opacity:.4; cursor:default; }

/* stats */
.kp { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.kp div { background:var(--fill); border-radius:16px; padding:20px; }
.kp i { display:block; font-style:normal; font-size:12px; color:var(--grey); }
.kp b { display:block; font:300 32px/1 var(--dsp); letter-spacing:-0.02em; margin-top:12px; }
.kp s { display:block; text-decoration:none; font-size:12px; color:var(--grey); margin-top:8px; }

/* cards */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:24px; }
.sc { text-decoration:none; cursor:pointer; display:block; }
.sc .im { aspect-ratio:4/3; border-radius:16px; overflow:hidden; background:var(--fill); }
.sc .im img { width:100%; height:100%; object-fit:cover; display:block; }
.sc h3 { margin:12px 0 0; font:400 16px/1.25 var(--ui); }
.sc p { margin:4px 0 0; font-size:12px; color:var(--grey); }
.two { display:grid; grid-template-columns:3fr 2fr; gap:40px; }

/* pills */
.pt { display:flex; gap:4px; flex-wrap:wrap; }
.pt button { height:32px; padding:0 14px; border-radius:999px; border:0; background:none; color:var(--grey); cursor:pointer; font-size:14px; }
.pt button.on { background:var(--fill); color:var(--ink); }
.pt button b { font-weight:400; margin-left:4px; font-size:12px; color:var(--grey); }
.st { display:inline-flex; align-items:center; height:22px; padding:0 9px; border-radius:999px; background:var(--fill); font-size:12px; white-space:nowrap; }
.st.sold { background:var(--ink); color:#fff; }
.st.hold { background:#fff; border:0.5px solid var(--line); }

/* toolbar */
.tb { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.tb .sp { flex:1; }
.se { display:flex; align-items:center; gap:8px; height:36px; padding:0 14px; border-radius:999px; background:var(--fill); min-width:260px; }
.se input { border:0; background:none; outline:none; flex:1; font-size:14px; }
.dd { height:36px; padding:0 30px 0 14px; border-radius:999px; border:0.5px solid var(--line); background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%230A0A0A' fill='none'/%3E%3C/svg%3E") no-repeat right 12px center; -webkit-appearance:none; appearance:none; cursor:pointer; font-size:14px; }

/* table */
.tw { border-top:0.5px solid var(--line); }
table.t { width:100%; border-collapse:collapse; }
.t th { text-align:left; font-weight:400; font-size:12px; color:var(--grey); padding:12px 12px; border-bottom:0.5px solid var(--line); position:sticky; top:0; background:#fff; z-index:1; white-space:nowrap; cursor:default; }
.t th[data-s] { cursor:pointer; }
.t th[data-s]:hover { color:var(--ink); }
.t td { padding:8px 12px; border-bottom:0.5px solid var(--line); vertical-align:middle; }
.t tr.r { cursor:pointer; }
.t tr.r:hover td { background:#FAFAF9; }
.t tr.sel td { background:var(--fill); }
.t .th { width:44px; height:44px; border-radius:8px; background:var(--fill); overflow:hidden; display:block; }
.t .th img { width:100%; height:100%; object-fit:cover; display:block; }
.t .nm { font-size:14px; max-width:320px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.t .mt { font-size:12px; color:var(--grey); margin-top:2px; max-width:320px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.t .g { color:var(--mid); white-space:nowrap; }
.t .n { text-align:right; white-space:nowrap; }
.t input.pr { width:96px; height:32px; border:0.5px solid transparent; border-radius:8px; padding:0 8px; text-align:right; background:none; font-size:14px; }
.t input.pr:hover { border-color:var(--line); }
.t input.pr:focus { border-color:var(--ink); outline:none; background:#fff; }
.t select.ss { height:30px; border:0; background:var(--fill); border-radius:999px; padding:0 10px; font-size:12px; cursor:pointer; -webkit-appearance:none; appearance:none; }
.ck { width:16px; height:16px; accent-color:var(--ink); cursor:pointer; margin:0; }
.more { display:flex; justify-content:center; margin-top:24px; }
.empty { padding:40px 0; color:var(--grey); text-align:center; }
.np { color:var(--danger); font-size:12px; }

/* bulk bar */
.bb { position:sticky; bottom:24px; margin-top:24px; display:flex; align-items:center; gap:8px; padding:8px 8px 8px 20px; background:var(--ink); color:#fff; border-radius:999px; width:max-content; max-width:100%; box-shadow:0 8px 24px rgba(0,0,0,.18); z-index:5; }
.bb span { margin-right:8px; white-space:nowrap; }
.bb .btn { background:transparent; color:#fff; border-color:rgba(255,255,255,.3); height:32px; font-size:13px; }
.bb .btn:hover { border-color:#fff; }
.bb .btn.dg { color:#fff; background:var(--danger); border-color:var(--danger); }

/* lists */
.ls { border-top:0.5px solid var(--line); }
.li { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:0.5px solid var(--line); text-decoration:none; }
.li .th { width:44px; height:44px; border-radius:8px; overflow:hidden; background:var(--fill); flex-shrink:0; }
.li .th img { width:100%; height:100%; object-fit:cover; display:block; }
.li .tx { flex:1; min-width:0; }
.li .tx b { display:block; font-weight:400; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.li .tx i { display:block; font-style:normal; font-size:12px; color:var(--grey); margin-top:2px; }
.li .v { white-space:nowrap; }

/* bars */
.bars { display:flex; flex-direction:column; gap:12px; }
.bar { display:grid; grid-template-columns:160px 1fr 90px; gap:12px; align-items:center; }
.bar .tk { height:8px; border-radius:4px; background:var(--fill); overflow:hidden; }
.bar .tk i { display:block; height:100%; background:var(--ink); border-radius:4px; }
.bar span:last-child { text-align:right; }
.days { display:flex; align-items:flex-end; gap:8px; height:160px; padding-top:12px; }
.days div { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:8px; }
.days div i { display:block; width:100%; max-width:56px; background:var(--ink); border-radius:8px 8px 2px 2px; min-height:2px; }
.days div span { font-size:12px; color:var(--grey); white-space:nowrap; }
.days div b { font-weight:400; font-size:12px; }

/* callout */
.co { background:var(--fill); border-radius:16px; padding:20px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.co p { margin:0; }
.co p i { display:block; font-style:normal; color:var(--grey); font-size:12px; margin-top:4px; }

/* drawer */
.scrim { position:fixed; inset:0; background:rgba(10,10,10,.2); opacity:0; pointer-events:none; transition:opacity .2s; z-index:20; }
.scrim.on { opacity:1; pointer-events:auto; }
.dr { position:fixed; top:0; right:0; bottom:0; width:480px; max-width:100vw; background:#fff; z-index:21; transform:translateX(100%); transition:transform .25s ease; display:flex; flex-direction:column; border-left:0.5px solid var(--line); }
.dr.on { transform:none; }
.dr-h { display:flex; align-items:center; justify-content:space-between; padding:16px 24px; border-bottom:0.5px solid var(--line); }
.dr-h b { font-weight:500; }
.dr-b { flex:1; overflow-y:auto; padding:24px; }
.dr-f { display:flex; gap:8px; padding:16px 24px; border-top:0.5px solid var(--line); }
.dr-f .sp { flex:1; }
.dr .hero { aspect-ratio:1; border-radius:16px; overflow:hidden; background:var(--fill); margin-bottom:24px; }
.dr .hero img { width:100%; height:100%; object-fit:cover; display:block; }
.x { width:32px; height:32px; border-radius:50%; border:0; background:var(--fill); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.fm { display:grid; grid-template-columns:1fr 1fr; gap:16px 12px; }
.fm label { display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--grey); }
.fm label.f { grid-column:1/-1; }
.fm input, .fm select, .fm textarea { height:40px; border:0.5px solid var(--line); border-radius:12px; padding:0 12px; font-size:14px; color:var(--ink); background:#fff; outline:none; }
.fm textarea { height:auto; min-height:88px; padding:10px 12px; resize:vertical; line-height:1.4; }
.fm select { -webkit-appearance:none; appearance:none; padding-right:30px; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%230A0A0A' fill='none'/%3E%3C/svg%3E") no-repeat right 12px center; cursor:pointer; }
.fm input:focus, .fm select:focus, .fm textarea:focus { border-color:var(--ink); }

/* app frame */
.af { display:flex; gap:40px; align-items:flex-start; }
.af .fr { width:402px; height:calc(100vh - 160px); min-height:600px; max-height:874px; border-radius:24px; overflow:hidden; border:0.5px solid var(--line); flex-shrink:0; background:#fff; }
.af iframe { width:100%; height:100%; border:0; display:block; }
.af .side { max-width:360px; padding-top:8px; }
.af .side p { margin:0 0 16px; color:var(--mid); }

/* modal frame (sign in) */
.mf { position:fixed; inset:0; z-index:30; display:flex; align-items:center; justify-content:center; background:rgba(10,10,10,.3); }
.mf .fr { width:402px; height:min(820px,92vh); border-radius:24px; overflow:hidden; background:#fff; position:relative; }
.mf iframe { width:100%; height:100%; border:0; }
.mf .x { position:absolute; top:12px; right:12px; z-index:2; }

.toast { position:fixed; left:50%; bottom:32px; transform:translate(-50%,12px); background:var(--ink); color:#fff; padding:11px 18px; border-radius:999px; opacity:0; pointer-events:none; transition:all .2s; z-index:40; font-size:14px; }
.toast.on { opacity:1; transform:translate(-50%,0); }

.drop { border:1px dashed rgba(10,10,10,.25); border-radius:16px; padding:32px; text-align:center; color:var(--mid); margin-bottom:24px; }
.drop.on { background:var(--fill); border-color:var(--ink); }
.drop b { display:block; color:var(--ink); font-weight:500; margin-bottom:4px; }
.prog { margin-bottom:24px; }

.narrow { display:none; }
@media (max-width: 900px) {
  body { flex-direction:column; }
  .sb { width:100%; height:auto; position:static; padding:16px; border-right:0; border-bottom:0.5px solid var(--line); }
  .sb-co, .sb-ft, .sb-h { display:none; }
  .sb-nav { flex-direction:row; overflow-x:auto; margin-top:12px; scrollbar-width:none; }
  .sb-nav a { flex-shrink:0; }
  .mn { height:auto; overflow:visible; }
  #view { padding:24px 16px 80px; }
  .demo { margin:16px 16px 0; }
  .ph { flex-direction:column; align-items:flex-start; }
  .ph .act { flex-wrap:wrap; }
  .tw { overflow-x:auto; }
  .af { flex-direction:column; }
  .af .fr { width:100%; max-width:402px; }
  .dr { width:100vw; }
  .kp { grid-template-columns:1fr 1fr; }
  .two { grid-template-columns:1fr; }
}