/* the shared look of every user-facing page: light, rounded, violet + teal (the "Wein H5" design) */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&display=swap');

body {background: #FBFAFF; margin: 0; color: #1E1A33; -webkit-font-smoothing: antialiased;
    font-family: Manrope, 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;}
a {color: #6E56F8; text-decoration: none;}
input, button, select, textarea {font-family: inherit;}
input:focus, select:focus, textarea:focus, button:focus {outline: none;}
#wrap {padding-bottom: 90px; max-width: 640px; margin: 0 auto;}

/* page header: title on the page itself, actions as pills */
.topbar {height: 56px; line-height: 56px; color: #1E1A33; padding: 0 16px; position: relative; display: flex; align-items: center;}
.topbar a {color: #4B3BD6; text-decoration: none;}
.topbar .title {font-size: 20px; font-weight: 800; letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0;}
.topbar .right {margin-left: auto; flex: none; line-height: 1; font-size: 12px; font-weight: 800; border: 1.5px solid #E0DAF6; background: #fff; border-radius: 999px; padding: 7px 12px; box-shadow: 0 4px 12px rgba(46,32,105,.08);}
.topbar .right ~ .right {margin-left: 8px;}
.topbar .right.btn {border: none; color: #fff; padding: 8px 13px; background: linear-gradient(135deg, #6E56F8, #4B3BD6); box-shadow: 0 8px 18px rgba(90,66,230,.28);}
.topbar .back {margin-right: 10px; font-size: 28px; line-height: 1; width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 1px solid #EAE5FA; box-shadow: 0 4px 12px rgba(46,32,105,.10); display: inline-flex; align-items: center; justify-content: center; flex: none; padding-bottom: 3px; box-sizing: border-box;}

.card {background: #fff; margin: 10px 16px; padding: 16px 18px; border-radius: 20px; border: 1px solid #EFECFB; box-shadow: 0 10px 26px rgba(46,32,105,.08);}
.card h2 {font-size: 20px; font-weight: 800; margin: 0 0 6px 0;}
.row {display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap;}
.row > * {flex: 1;}
input[type=text], input[type=number], input[type=password], input[type=email], input[type=tel], input[type=date], input[type=time], input[type=datetime-local], select, textarea {
    width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1.5px solid #E6E2F5; border-radius: 13px; font-size: 14px; font-weight: 500; background: #FBFAFF; color: #1E1A33; transition: border-color .15s, background .15s;}
input:focus, select:focus, textarea:focus {border-color: #6E56F8; background: #fff;}
input::placeholder, textarea::placeholder {color: #B3AEC8;}
textarea {min-height: 120px;}
label.field {display: block; font-size: 11px; font-weight: 700; color: #6B6585; letter-spacing: .06em; text-transform: uppercase; margin: 12px 0 6px;}
.btn {display: inline-block; padding: 11px 16px; border-radius: 13px; border: 0; background: linear-gradient(135deg, #6E56F8, #4B3BD6); color: #fff; font-size: 14px; font-weight: 800; cursor: pointer; text-decoration: none; box-shadow: 0 8px 18px rgba(90,66,230,.28); line-height: 1.2;}
.btn:active {transform: translateY(1px);}
.btn.secondary {background: #fff; color: #4B3BD6; border: 1.5px solid #E0DAF6; box-shadow: none;}
.btn.danger {background: #fff; color: #c0392b; border: 1.5px solid #F3C9C4; box-shadow: none;}
.btn.block {display: block; width: 100%; text-align: center; box-sizing: border-box;}
.muted {color: #8C86A6; font-size: 12px; font-weight: 500;}

/* the brand: the ring mark next to the wordmark, whose Canadian u is teal */
.brand {display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit;}
.brand img {width: 40px; height: 40px; flex: none;}
.brand.small img {width: 30px; height: 30px;}
.wordmark {font-size: 26px; font-weight: 800; letter-spacing: -.035em; line-height: 1; color: #1E1A33;}
.brand.small .wordmark {font-size: 20px;}
.wordmark .u {color: #16D3BE;}

.ad-item {display: flex; background: #fff; margin: 0 16px 10px; padding: 10px; border-radius: 16px; border: 1px solid #EFECFB; box-shadow: 0 6px 18px rgba(46,32,105,.06); text-decoration: none; color: #1E1A33;}
.ad-item img {width: 96px; height: 72px; object-fit: cover; border-radius: 10px; margin-right: 12px; flex: none; background: #EFECFB;}
.ad-item .body {flex: 1; min-width: 0;}
.ad-item .title {font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.ad-item .price {color: #4B3BD6; font-size: 17px; font-weight: 800; margin: 3px 0;}
.ad-item .meta {font-size: 12px; color: #8C86A6;}
.badge {display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #F2F0FB; color: #6B6585; margin-left: 6px; vertical-align: middle;}
.badge.active {background: #E3FAF6; color: #0FA58F;}
.badge.sold {background: #F4F1FF; color: #4B3BD6;}
.badge.expired, .badge.removed {background: #F2F0FB; color: #A29CBB;}

.gallery img.main {width: 100%; aspect-ratio: 4 / 3; max-height: 360px; object-fit: cover; display: block; background: #EFECFB;}
.gallery .thumbs {display: flex; gap: 6px; padding: 8px 16px 0; overflow-x: auto;}
.gallery .thumbs img {width: 64px; height: 48px; object-fit: cover; border-radius: 8px; border: 2px solid transparent; cursor: pointer;}
.gallery .thumbs img.on {border-color: #6E56F8;}
.detail .price {color: #4B3BD6; font-size: 22px; font-weight: 800;}
.detail .desc {white-space: pre-wrap; line-height: 1.55; font-size: 14px;}
.kv {display: flex; border-top: 1px solid #F0EDFA; padding: 9px 0; font-size: 14px;}
.kv:first-child {border-top: 0;}
.kv .k {color: #8C86A6; width: 110px; flex: none;}
.kv a {color: #4B3BD6; font-weight: 700;}

.uploads {display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px;}
.uploads .thumb {position: relative; width: 72px; height: 54px;}
.uploads img {width: 72px; height: 54px; object-fit: cover; border-radius: 8px;}
.uploads .rm {position: absolute; top: -6px; right: -6px; background: #c0392b; color: #fff; border-radius: 50%; width: 18px; height: 18px; line-height: 18px; text-align: center; font-size: 12px; cursor: pointer;}

#footer {position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid #F0EDFA; padding: 10px 6px calc(10px + env(safe-area-inset-bottom)); z-index: 10;}
#footer ul {display: flex; margin: 0 auto; padding: 0; list-style: none; max-width: 640px;}
#footer li {flex: 1; text-align: center; position: relative;}
#footer .bottom_btn {display: flex; flex-direction: column; align-items: center; gap: 5px; color: #A29CBB; text-decoration: none; font-size: 10px; font-weight: 600;}
#footer .bottom_btn::before {content: ''; width: 22px; height: 22px; background: #B3AEC8; -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain;}
#footer .nav-home::before {-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-8 9 8v9a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-8 9 8v9a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");}
#footer .nav-discover::before {-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M14.8 9.2l-1.9 5.7-5.7 1.9 1.9-5.7z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M14.8 9.2l-1.9 5.7-5.7 1.9 1.9-5.7z'/%3E%3C/svg%3E");}
#footer .nav-classifieds::before {-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12V4a1 1 0 0 1 1-1h8l9 9-9 9z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12V4a1 1 0 0 1 1-1h8l9 9-9 9z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E");}
#footer .nav-messages::before {-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E");}
#footer .nav-me::before {-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E");}
#footer .bottom_btn.active {color: #6E56F8; font-weight: 700;}
#footer .bottom_btn.active::before {background: #6E56F8;}
#footer .unread {position: absolute; top: -4px; left: calc(50% + 6px); background: #6E56F8; color: #fff; border-radius: 9px; font-size: 11px; line-height: 16px; min-width: 16px; padding: 0 4px;}

.heart {background: #fff; color: #4B3BD6; border: 1.5px solid #E0DAF6; padding: 7px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; cursor: pointer;}
.heart.on {background: linear-gradient(135deg, #6E56F8, #4B3BD6); color: #fff; border-color: transparent;}
.tabs {display: flex; margin: 10px 16px 0; background: #F2F0FB; border-radius: 14px; padding: 4px; overflow-x: auto; scrollbar-width: none;}
.tabs::-webkit-scrollbar {display: none;}
.tabs a {flex: 1 0 auto; white-space: nowrap; text-align: center; padding: 10px 12px; border-radius: 11px; color: #6B6585; font-size: 13px; font-weight: 700; text-decoration: none; border-bottom: 0;}
.tabs a.on {color: #1E1A33; background: #fff; box-shadow: 0 4px 12px rgba(46,32,105,.12);}
.conv {display: flex; background: #fff; margin: 0 16px 10px; padding: 12px; border-radius: 16px; border: 1px solid #EFECFB; box-shadow: 0 6px 18px rgba(46,32,105,.06); text-decoration: none; color: #1E1A33;}
.conv img {width: 56px; height: 42px; object-fit: cover; border-radius: 10px; margin-right: 12px; background: #EFECFB; flex: none;}
.conv .body {flex: 1; min-width: 0;}
.conv .top {display: flex; justify-content: space-between; font-size: 14px; font-weight: 700;}
.conv .last {font-size: 13px; color: #8C86A6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px;}
.conv .unread {background: #6E56F8; color: #fff; border-radius: 9px; font-size: 11px; line-height: 16px; min-width: 16px; padding: 0 4px; text-align: center;}
.thread {padding: 10px 16px; padding-bottom: 140px;}
.bubble {max-width: 78%; padding: 9px 13px; border-radius: 16px; margin-bottom: 8px; font-size: 14px; white-space: pre-wrap; word-wrap: break-word;}
.bubble.me {background: linear-gradient(135deg, #6E56F8, #4B3BD6); color: #fff; margin-left: auto; border-bottom-right-radius: 4px;}
.bubble.them {background: #fff; border: 1px solid #EFECFB; margin-right: auto; border-bottom-left-radius: 4px;}
.bubble .t {display: block; font-size: 10px; opacity: 0.7; margin-top: 3px;}
.composer {position: fixed; left: 0; right: 0; bottom: 66px; background: #fff; border-top: 1px solid #F0EDFA; padding: 8px 16px; display: flex; gap: 8px; z-index: 10;}
.composer textarea {flex: 1; min-height: 44px; max-height: 120px; resize: none;}
.empty {text-align: center; color: #A29CBB; padding: 40px 0; font-weight: 500;}

/* storefront themes: a shop page dressed by its merchant takes its accent from one of these */
.sf-violet {--sf-accent: #6E56F8; --sf-accent2: #4B3BD6; --sf-tint: #F4F1FF; --sf-ink: #3A2FA6;}
.sf-teal {--sf-accent: #16D3BE; --sf-accent2: #0FA58F; --sf-tint: #E3FAF6; --sf-ink: #0B5F53;}
.sf-sunset {--sf-accent: #FF8C42; --sf-accent2: #E4572E; --sf-tint: #FFEDE4; --sf-ink: #9A3A1B;}
.sf-forest {--sf-accent: #3E9C6D; --sf-accent2: #1F5F45; --sf-tint: #E6F4EC; --sf-ink: #1F5F45;}
.sf-graphite {--sf-accent: #6E7490; --sf-accent2: #3A3E55; --sf-tint: #EEEFF4; --sf-ink: #3A3E55;}
.sf .sf-announce {margin: 10px 16px 0; padding: 12px 16px; border-radius: 16px; background: linear-gradient(135deg, var(--sf-accent), var(--sf-accent2)); color: #fff; font-size: 13px; font-weight: 700; box-shadow: 0 10px 22px rgba(0,0,0,.10);}
.sf .sf-tagline {margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--sf-ink);}
.sf .sf-highlights {display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px;}
.sf .sf-highlights span {background: var(--sf-tint); color: var(--sf-ink); border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 700;}
.sf .sf-story {white-space: pre-wrap; line-height: 1.6; font-size: 14px;}
.sf .sf-gallery {display: flex; gap: 8px; overflow-x: auto; padding: 0 16px 4px; scrollbar-width: none;}
.sf .sf-gallery::-webkit-scrollbar {display: none;}
.sf .sf-gallery img {width: 150px; height: 110px; object-fit: cover; border-radius: 14px; flex: none; background: #EFECFB;}
.sf .rating, .sf .tag {background: var(--sf-tint); color: var(--sf-ink);}
.sf .detail .price, .sf .trail a {color: var(--sf-accent2);}
.sf .stars span[data-v].on {color: var(--sf-accent);}
.sf .btn:not(.secondary):not(.danger) {background: linear-gradient(135deg, var(--sf-accent), var(--sf-accent2));}