@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ink:#16262e; --ink-soft:#3a5460; --paper:#eee4cf; --paper-light:#f7f0e2;
  --stamp:#c1443c; --stamp-dark:#9c332c; --mustard:#d9a441; --sage:#6b7c63;
  --line: rgba(22,38,46,0.18); --radius:4px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:var(--paper); color:var(--ink); font-family:'IBM Plex Sans',sans-serif; -webkit-font-smoothing:antialiased; min-height:100vh;}
h1,h2,h3,.display{font-family:'Zilla Slab',serif; font-weight:700; color:var(--ink); margin:0;}
.mono{font-family:'IBM Plex Mono',monospace;}
a{color:inherit;} button{font-family:inherit; cursor:pointer;}
:focus-visible{outline:3px solid var(--stamp); outline-offset:2px;}

.app{max-width:1100px; margin:0 auto; padding:0 24px;}

nav.topbar{border-bottom:2px solid var(--ink); background:var(--paper-light); position:sticky; top:0; z-index:40;}
.topbar-inner{max-width:1100px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;}
.brand{display:flex; align-items:center; gap:10px;}
.brand-mark{width:34px; height:34px; border:2px solid var(--ink); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Zilla Slab',serif; font-weight:700; font-size:15px; background:var(--stamp); color:var(--paper-light); transform:rotate(-8deg);}
.brand-name{font-family:'Zilla Slab',serif; font-weight:700; font-size:19px;}
.tabs{display:flex; gap:2px;}
.tab-btn{background:none; border:none; padding:8px 12px; font-size:14px; font-weight:500; color:var(--ink-soft); border-bottom:2px solid transparent; text-decoration:none; display:inline-block;}
.tab-btn.active{color:var(--ink); border-bottom-color:var(--stamp); font-weight:600;}
.tab-btn:hover{color:var(--ink);}
.auth-area{display:flex; align-items:center; gap:10px;}
.user-chip{display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600;}
.user-chip .avatar{width:26px; height:26px; border-radius:50%; background:var(--sage); color:var(--paper-light); display:flex; align-items:center; justify-content:center; font-size:12px; font-family:'Zilla Slab',serif;}
.small-link{font-size:12.5px; color:var(--ink-soft); background:none; border:none; text-decoration:underline;}

main{padding:44px 0 80px;}

.btn{border:2px solid var(--ink); border-radius:var(--radius); padding:10px 20px; font-size:14px; font-weight:600; background:var(--ink); color:var(--paper-light); transition:transform .12s ease; text-decoration:none; display:inline-block;}
.btn:hover{transform:translateY(-2px);}
.btn.ghost{background:transparent; color:var(--ink);}
.btn.small{padding:7px 14px; font-size:12.5px;}
.btn.wide{width:100%; text-align:center;}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none;}

.hero{display:grid; grid-template-columns:1.15fr .85fr; gap:44px; align-items:center; padding-bottom:52px; border-bottom:2px dashed var(--line);}
.eyebrow{font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--stamp-dark); margin-bottom:12px; display:block;}
.hero h1{font-size:42px; line-height:1.1; letter-spacing:-.5px;}
.hero p.lead{font-size:16.5px; line-height:1.55; color:var(--ink-soft); max-width:48ch; margin-top:16px;}
.hero-ctas{display:flex; gap:12px; margin-top:26px; flex-wrap:wrap;}

.pinboard{position:relative; height:300px;}
.pin-card{position:absolute; width:170px; background:var(--paper-light); border:2px solid var(--ink); border-radius:var(--radius); box-shadow:5px 6px 0 var(--line); padding:10px;}
.pin-card .swatch{height:80px; border-radius:2px; margin-bottom:7px;}
.pin-card .t{font-size:12px; font-weight:600;}
.pin-card .p{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--stamp-dark); margin-top:3px;}
.pin1{top:0; left:8%; transform:rotate(-6deg); z-index:3;}
.pin2{top:56px; left:42%; transform:rotate(4deg); z-index:2;}
.pin3{top:8px; left:68%; transform:rotate(-2deg); z-index:1;}

.section{padding:52px 0; border-bottom:2px dashed var(--line);}
.section:last-child{border-bottom:none;}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:24px; gap:16px; flex-wrap:wrap;}
.section-head h2{font-size:26px;}
.section-head .num{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-soft);}

.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.step{border:2px solid var(--ink); border-radius:var(--radius); padding:16px; background:var(--paper-light);}
.step .n{font-family:'IBM Plex Mono',monospace; color:var(--stamp); font-weight:600; font-size:12.5px;}
.step h3{font-size:15.5px; margin:7px 0 5px;}
.step p{font-size:13px; color:var(--ink-soft); line-height:1.45; margin:0;}

.seller-cta{display:grid; grid-template-columns:1.2fr .8fr; gap:24px; align-items:center; background:var(--paper-light); border:2px solid var(--ink); border-radius:var(--radius); padding:28px; box-shadow:5px 6px 0 var(--line);}
.seller-cta h2{font-size:24px; margin-bottom:8px;}
.seller-cta p{font-size:14px; color:var(--ink-soft); line-height:1.5; max-width:52ch;}
.benefit-list{list-style:none; padding:0; margin:14px 0 0; font-size:13.5px;}
.benefit-list li{padding:5px 0; color:var(--ink-soft);}
.benefit-list li:before{content:"— "; color:var(--stamp-dark); font-weight:700;}

.catalog-head{display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:26px; flex-wrap:wrap;}
.search-wrap{position:relative; flex:1; max-width:360px;}
.search-wrap input{width:100%; padding:11px 14px 11px 36px; border:2px solid var(--ink); border-radius:var(--radius); background:var(--paper-light); font-family:inherit; font-size:14px;}
.search-icon{position:absolute; left:12px; top:50%; transform:translateY(-50%); font-size:14px; opacity:.6;}
.result-count{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-soft);}

.filter-bar{display:flex; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:26px; padding-bottom:20px; border-bottom:2px dashed var(--line);}
.filter-group{display:flex; flex-direction:column; gap:6px;}
.filter-label{font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--ink-soft);}
.filter-chips{display:flex; gap:6px; flex-wrap:wrap;}
.filter-chip{font-family:'IBM Plex Mono',monospace; font-size:12px; border:1.5px solid var(--ink); border-radius:20px; padding:5px 12px; background:var(--paper-light); color:var(--ink);}
.filter-chip.active{background:var(--ink); color:var(--paper-light);}
.price-inputs{display:flex; align-items:center; gap:6px;}
.price-inputs input{width:90px; padding:8px 10px; border:2px solid var(--ink); border-radius:var(--radius); font-family:inherit; font-size:13px; background:var(--paper-light);}
.price-inputs span{color:var(--ink-soft);}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:20px;}
.ticket{background:var(--paper-light); border:2px solid var(--ink); border-radius:var(--radius); overflow:hidden; text-align:left; padding:0; display:flex; flex-direction:column; box-shadow:4px 4px 0 var(--line); transition:transform .12s ease, box-shadow .12s ease;}
.ticket:hover{transform:translate(-2px,-3px); box-shadow:6px 7px 0 var(--line);}
.ticket .swatch{height:110px; position:relative; overflow:hidden;}
.ticket .swatch .initials{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'Zilla Slab',serif; font-size:32px; font-weight:700; color:rgba(255,255,255,.85);}
.ticket .swatch img{width:100%; height:100%; object-fit:cover; display:block;}
.perf{height:0; border-top:2px dashed var(--ink);}
.ticket-body{padding:13px 13px 15px;}
.ticket-body .cat{font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--stamp-dark);}
.ticket-body h3{font-size:15.5px; margin:5px 0 6px;}
.seller-line{font-size:12px; color:var(--ink-soft); margin-bottom:8px; display:flex; align-items:center; gap:5px;}
.seller-line .stars{color:var(--mustard); font-size:11.5px;}
.formats-row{display:flex; gap:4px; flex-wrap:wrap; margin-bottom:8px;}
.fmt-chip{font-family:'IBM Plex Mono',monospace; font-size:10px; border:1.5px solid var(--ink); border-radius:20px; padding:2px 7px; background:var(--paper);}
.price-from{font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--stamp-dark); font-weight:500;}
.empty-state{padding:56px 20px; text-align:center; color:var(--ink-soft);}

.seller-card{background:var(--paper-light); border:2px solid var(--ink); border-radius:var(--radius); padding:18px; box-shadow:4px 4px 0 var(--line); text-align:left;}
.seller-top{display:flex; align-items:center; gap:12px; margin-bottom:10px;}
.seller-avatar{width:44px; height:44px; border-radius:50%; background:var(--sage); color:var(--paper-light); display:flex; align-items:center; justify-content:center; font-family:'Zilla Slab',serif; font-weight:700; font-size:17px; border:2px solid var(--ink);}
.seller-name{font-size:15px; font-weight:600;}
.seller-user{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--ink-soft);}
.badge-premium{display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:10px; background:var(--mustard); color:var(--ink); padding:2px 7px; border-radius:20px; margin-left:6px; border:1.5px solid var(--ink);}
.stars-row{font-size:13px; color:var(--mustard); margin-bottom:8px;}
.stars-row .count{color:var(--ink-soft); font-family:'IBM Plex Mono',monospace; font-size:11.5px; margin-left:4px;}
.seller-bio{font-size:13px; color:var(--ink-soft); line-height:1.45; margin-bottom:10px;}

.back-btn{background:none; border:none; font-size:13px; color:var(--ink-soft); margin-bottom:20px; display:flex; align-items:center; gap:5px; text-decoration:none;}
.profile-head{display:flex; gap:20px; align-items:flex-start; margin-bottom:30px; flex-wrap:wrap;}
.profile-avatar{width:74px; height:74px; border-radius:50%; background:var(--sage); color:var(--paper-light); display:flex; align-items:center; justify-content:center; font-family:'Zilla Slab',serif; font-weight:700; font-size:28px; border:2px solid var(--ink); flex-shrink:0;}
.review-item{border-bottom:1px dashed var(--line); padding:14px 0;}
.review-item:last-child{border-bottom:none;}
.review-stars{color:var(--mustard); font-size:13px; margin-bottom:4px;}
.review-item .author{font-size:12.5px; font-weight:600; margin-right:8px;}
.review-item .comment{font-size:13.5px; color:var(--ink-soft); margin-top:3px;}

.account-tabs{display:flex; gap:8px; margin-bottom:26px; border-bottom:2px solid var(--line);}
.acc-tab{background:none; border:none; padding:9px 4px; margin-right:18px; font-size:14px; font-weight:600; color:var(--ink-soft); border-bottom:3px solid transparent; position:relative; top:2px;}
.acc-tab.active{color:var(--ink); border-bottom-color:var(--stamp);}
.stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:30px;}
.stat-box{border:2px solid var(--ink); background:var(--paper-light); border-radius:var(--radius); padding:14px; box-shadow:3px 3px 0 var(--line);}
.stat-box .lbl{font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--ink-soft);}
.stat-box .val{font-family:'IBM Plex Mono',monospace; font-size:20px; font-weight:600; margin-top:4px;}
table.data-table{width:100%; border-collapse:collapse; font-size:13px;}
table.data-table th{text-align:left; font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--ink-soft); padding:8px 10px; border-bottom:2px solid var(--ink);}
table.data-table td{padding:9px 10px; border-bottom:1px dashed var(--line);}
.table-wrap{overflow-x:auto; border:2px solid var(--ink); border-radius:var(--radius); background:var(--paper-light);}

.contact-card{max-width:520px; border:2px solid var(--ink); background:var(--paper-light); border-radius:var(--radius); padding:32px; box-shadow:5px 6px 0 var(--line);}
.contact-card .stamp-mark{width:52px; height:52px; border:2px solid var(--ink); border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--stamp); color:var(--paper-light); font-family:'Zilla Slab',serif; font-weight:700; font-size:22px; margin-bottom:18px; transform:rotate(-6deg);}
.contact-row{display:flex; align-items:center; justify-content:space-between; gap:12px; border:1.5px solid var(--ink); border-radius:var(--radius); padding:12px 14px; margin-top:16px; background:var(--paper);}
.copy-btn{background:none; border:1.5px solid var(--ink); border-radius:var(--radius); padding:6px 10px; font-size:12px; font-weight:600;}
.copy-btn:hover{background:var(--ink); color:var(--paper-light);}

.overlay{position:fixed; inset:0; background:rgba(22,38,46,.55); z-index:100; display:none; align-items:flex-start; justify-content:center; padding:36px 16px; overflow-y:auto;}
.overlay.active{display:flex;}
.modal{background:var(--paper-light); border:2px solid var(--ink); border-radius:var(--radius); max-width:560px; width:100%; box-shadow:8px 9px 0 rgba(22,38,46,.3);}
.modal-head{display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:2px dashed var(--line);}
.modal-head h2{font-size:18px;}
.close-x{background:none; border:none; font-size:20px; color:var(--ink); line-height:1;}
.modal-body{padding:20px;}
.modal-swatch{height:230px; border-radius:2px; margin-bottom:14px; position:relative; overflow:hidden;}
.modal-swatch .initials{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'Zilla Slab',serif; font-size:42px; font-weight:700; color:rgba(255,255,255,.85);}
.modal-desc{font-size:13.5px; color:var(--ink-soft); line-height:1.55; margin-bottom:14px;}
.seller-link{display:inline-flex; align-items:center; gap:6px; background:var(--paper); border:1.5px solid var(--ink); border-radius:20px; padding:5px 10px; font-size:12.5px; margin-bottom:16px;}
.fmt-label{font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--ink-soft); margin-bottom:8px;}
.fmt-options{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px;}
.fmt-option{border:2px solid var(--ink); border-radius:var(--radius); padding:8px 12px; background:var(--paper); font-size:13px; display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-width:80px;}
.fmt-option .fp{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--stamp-dark);}
.fmt-option.selected{background:var(--ink); color:var(--paper-light);}
.fmt-option.selected .fp{color:var(--mustard);}
.total-row{display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-top:2px dashed var(--line); margin-top:4px;}
.total-row .lbl{font-size:13px; color:var(--ink-soft);}
.total-row .amt{font-family:'IBM Plex Mono',monospace; font-size:21px; font-weight:600;}

.field{margin-bottom:15px;}
.field label{display:block; font-size:12px; font-weight:600; margin-bottom:5px; color:var(--ink-soft);}
.field input, .field textarea, .field select{width:100%; padding:9px 11px; border:2px solid var(--ink); border-radius:var(--radius); font-family:inherit; font-size:13.5px; background:var(--paper);}
.field textarea{resize:vertical; min-height:60px;}
.check-row{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:6px;}
.check-item{display:flex; align-items:center; gap:6px; font-size:13px;}
.form-error{font-size:12.5px; color:var(--stamp-dark); margin:-6px 0 12px;}
.order-summary{background:var(--paper); border:1.5px solid var(--ink); border-radius:var(--radius); padding:13px; margin-bottom:16px;}
.order-summary .row{display:flex; justify-content:space-between; font-size:13px; margin-bottom:4px;}
.order-summary .row:last-child{margin-bottom:0; padding-top:7px; border-top:1px dashed var(--line); font-weight:600;}
.demo-note{font-size:11.5px; color:var(--ink-soft); background:rgba(217,164,65,.18); border:1px dashed var(--mustard); border-radius:var(--radius); padding:9px 11px; margin-bottom:16px; line-height:1.5;}
.success-box{text-align:center; padding:8px 0 4px;}
.success-mark{width:52px; height:52px; border-radius:50%; background:var(--sage); color:var(--paper-light); display:flex; align-items:center; justify-content:center; font-size:24px; margin:0 auto 14px;}
.download-link{display:block; margin:14px 0; padding:11px; background:var(--paper); border:1.5px dashed var(--ink); border-radius:var(--radius); font-family:'IBM Plex Mono',monospace; font-size:12px; word-break:break-all;}
.spinner{width:32px; height:32px; border:3px solid var(--line); border-top-color:var(--stamp); border-radius:50%; animation:spin .8s linear infinite; margin:18px auto;}
@keyframes spin{to{transform:rotate(360deg);}}
.star-picker{display:flex; gap:4px; font-size:26px; margin:6px 0 14px; cursor:pointer;}
.star-picker span{color:var(--line); transition:color .1s;}
.star-picker span.on{color:var(--mustard);}
.auth-tabs{display:flex; gap:0; margin-bottom:18px; border:2px solid var(--ink); border-radius:var(--radius); overflow:hidden;}
.auth-tab-btn{flex:1; background:var(--paper); border:none; padding:9px; font-size:13px; font-weight:600; color:var(--ink-soft);}
.auth-tab-btn.active{background:var(--ink); color:var(--paper-light);}
.tier-card{border:2px solid var(--ink); border-radius:var(--radius); padding:16px; background:var(--paper); margin-bottom:16px;}
.tier-card h3{font-size:16px; margin-bottom:8px;}

footer{text-align:center; padding:24px; font-size:12px; color:var(--ink-soft); font-family:'IBM Plex Mono',monospace;}

@media (max-width:760px){
  .hero{grid-template-columns:1fr;} .pinboard{display:none;}
  .steps{grid-template-columns:1fr 1fr;} .seller-cta{grid-template-columns:1fr;}
  .stat-row{grid-template-columns:1fr 1fr;} .hero h1{font-size:32px;}
}