:root {
  --ink: #272237;
  --muted: #7d778d;
  --line: #e8e4ed;
  --paper: #fbfafc;
  --lilac: #7762df;
  --lilac-dark: #5845c3;
  --lavender: #eeeafd;
  --peach: #ffdcca;
  --mint: #ddf2e9;
  --sidebar: #f5f1f8;
  --shadow: 0 18px 50px rgba(51, 40, 85, .10);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--paper); }
body { min-height: 100%; margin: 0; color: var(--ink); font-family: "DM Sans", system-ui, sans-serif; font-size: 15px; background: var(--paper); }
button, input, select { font: inherit; }
button { color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(119, 98, 223, .32); outline-offset: 2px; }

.app-shell { display: flex; min-height: 100vh; }
.sidebar { position: fixed; z-index: 5; inset: 0 auto 0 0; width: 252px; padding: 33px 18px 23px; background: var(--sidebar); border-right: 1px solid rgba(80, 58, 105, .05); display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 9px; padding-left: 10px; color: var(--ink); font-family: "Fraunces", Georgia, serif; font-size: 27px; font-weight: 700; letter-spacing: -1.5px; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 28px; height: 28px; color: white; background: var(--lilac); border-radius: 10px 12px 10px 4px; font-family: "Fraunces", serif; font-size: 19px; transform: rotate(-6deg); }
.main-nav { display: grid; gap: 7px; margin-top: 57px; }
.nav-link { width: 100%; min-height: 47px; padding: 0 13px; display: flex; align-items: center; gap: 15px; border: 0; border-radius: 13px; color: #5d576d; background: transparent; font-size: 15px; font-weight: 600; text-align: left; transition: .18s ease; }
.nav-link > span { width: 18px; color: #696178; font-family: "DM Mono", monospace; font-size: 22px; font-weight: 400; text-align: center; }
.nav-link b { margin-left: auto; padding: 2px 7px; color: white; background: #ed6e89; border-radius: 99px; font-size: 11px; }
.nav-link:hover { background: rgba(255,255,255,.65); color: var(--lilac-dark); }
.nav-link.active { color: var(--lilac-dark); background: #e8e1ff; }
.nav-link.active > span { color: var(--lilac); }
.sidebar-bottom { margin-top: auto; display: grid; gap: 18px; }
.create-button { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 47px; border: 0; border-radius: 13px; color: white; background: var(--lilac); box-shadow: 0 8px 18px rgba(100, 78, 198, .22); font-weight: 700; transition: .18s ease; }
.create-button:hover, .primary-button:hover { background: var(--lilac-dark); transform: translateY(-1px); }
.create-button span { font-size: 20px; font-weight: 400; }
.profile-pill { display: flex; align-items: center; gap: 9px; padding: 7px; width: 100%; border: 0; border-radius: 13px; background: rgba(255,255,255,.6); text-align: left; }
.profile-pill strong, .profile-pill small { display: block; }
.profile-pill strong { font-size: 13px; }
.profile-pill small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.profile-pill i { margin-left: auto; color: var(--muted); font-style: normal; }
.avatar { display: grid; flex: 0 0 auto; place-items: center; width: 36px; height: 36px; color: white; border: 2px solid rgba(255,255,255,.92); border-radius: 50%; box-shadow: 0 2px 6px rgba(48,32,83,.15); font-family: "Fraunces", serif; font-size: 16px; font-weight: 700; }
.avatar-me { background: linear-gradient(145deg, #f09aa0, #c25e92); }
.avatar-lune { background: linear-gradient(145deg, #252c58, #ec8ead 63%, #f3cd79); }
.avatar-iyo { background: linear-gradient(145deg, #d473d7, #5c4ba3 65%, #fea66e); }
.avatar-mika { background: linear-gradient(145deg, #90c7e5, #4c73b2 64%, #e9e7b5); }

main { width: calc(100% - 252px); margin-left: 252px; min-width: 0; }
.view { display: none; max-width: 1330px; min-height: 100vh; margin: 0 auto; padding: 34px 52px 54px; animation: appear .28s ease; }
.view.active { display: block; }
@keyframes appear { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.topbar, .page-header, .messages-header { display: flex; justify-content: space-between; align-items: center; }
.eyebrow { margin: 0 0 7px; color: var(--lilac); font-family: "DM Mono", monospace; font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-family: "Fraunces", Georgia, serif; font-size: clamp(30px, 3vw, 41px); line-height: 1.05; letter-spacing: -1.6px; }
h1 > span { color: #f4b048; font-size: .8em; }
.top-actions { display: flex; gap: 10px; }
.round-button { display: grid; position: relative; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; color: #59516c; background: white; font-size: 18px; transition: .18s ease; }
.round-button:hover { border-color: #bfb5de; color: var(--lilac); transform: translateY(-1px); }
.notification i { position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; background: #ef6b87; border: 1px solid white; border-radius: 50%; }
.feed-switch { display: flex; align-items: center; gap: 23px; height: 58px; margin-top: 24px; border-bottom: 1px solid var(--line); }
.feed-tab { height: 100%; padding: 0 1px; border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: transparent; font-size: 14px; font-weight: 600; }
.feed-tab.active { color: var(--ink); border-bottom-color: var(--lilac); }
.feed-status { display: flex; align-items: center; gap: 7px; margin-left: auto; color: #5b8673; font-size: 12px; font-weight: 600; }
.feed-status i { width: 8px; height: 8px; background: #79c1a3; border-radius: 50%; }
.feed-layout { display: grid; grid-template-columns: minmax(480px, 1.26fr) minmax(260px, .74fr); gap: 27px; padding-top: 30px; }
.feed-scroller { height: 620px; overflow-y: auto; overscroll-behavior-y: contain; border-radius: 23px; box-shadow: var(--shadow); scroll-behavior: smooth; scroll-snap-type: y mandatory; scrollbar-width: none; background: #402c59; }
.feed-scroller::-webkit-scrollbar { display: none; }
.feed-post { position: relative; height: 620px; min-height: 620px; overflow: hidden; background: #402c59; scroll-snap-align: start; scroll-snap-stop: always; }
.post-visual { position: absolute; inset: 0; overflow: hidden; transition: .4s ease; }
.art-aurora { background: radial-gradient(circle at 82% 16%, #f6b3d3 0 4%, transparent 4.4%), radial-gradient(circle at 18% 82%, #7d67bc 0 13%, transparent 13.4%), radial-gradient(ellipse at 52% 65%, #ff7fb4 0 14%, transparent 14.4%), linear-gradient(142deg, #1e2d5b 0%, #5d4086 43%, #e68cb1 100%); }
.art-aurora:before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 23px, rgba(255,255,255,.07) 24px 25px, transparent 26px 50px); mix-blend-mode: screen; }
.spark { position: absolute; width: 12px; height: 12px; background: #ffe9ae; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }
.spark-one { top: 20%; left: 22%; transform: scale(1.6); }.spark-two { top: 41%; left: 75%; }.spark-three { top: 75%; left: 16%; transform: scale(.5); }
.moon { position: absolute; top: 10%; right: 11%; width: 110px; height: 110px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; box-shadow: 0 0 0 18px rgba(255,255,255,.06), 0 0 0 39px rgba(255,255,255,.04); }
.portrait-shape { position: absolute; left: 34%; bottom: -8%; width: 36%; height: 75%; background: linear-gradient(110deg, #edc0d2, #c373a1 55%, #683e78); border-radius: 52% 51% 28% 39% / 46% 39% 42% 53%; box-shadow: -37px 38px 0 -11px #2f3165, 60px 70px 0 -10px #f6c5a5; transform: rotate(-7deg); }
.portrait-shape:after { content: ""; position: absolute; top: 31%; left: 19%; width: 28%; height: 7%; background: #5a315f; border-radius: 50%; box-shadow: 69px 14px 0 -1px #5a315f, 31px 64px 0 -4px #bd5c8f; }
.ribbon { position: absolute; width: 70%; height: 14%; bottom: 18%; left: -12%; border-top: 25px solid #e686c1; border-radius: 50%; transform: rotate(18deg); opacity: .68; }
.visual-stamp { position: absolute; right: 26px; bottom: 23px; color: rgba(255,255,255,.75); font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: .09em; text-transform: uppercase; transform: rotate(-8deg); }
.post-overlay { position: absolute; display: flex; left: 23px; right: 23px; z-index: 1; }
.post-overlay.top { top: 22px; justify-content: space-between; align-items: center; }
.post-overlay.bottom { bottom: 22px; flex-direction: column; align-items: flex-start; gap: 13px; }
.content-label { padding: 7px 10px; color: white; background: rgba(24,17,48,.24); border: 1px solid rgba(255,255,255,.25); border-radius: 99px; backdrop-filter: blur(9px); font-size: 11px; font-weight: 600; }
.ghost-icon { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; color: white; background: rgba(24,17,48,.2); backdrop-filter: blur(9px); font-weight: 700; }
.artist-chip { display: flex; align-items: center; gap: 8px; padding: 0; border: 0; color: white; background: transparent; text-align: left; }
.artist-chip .avatar { width: 38px; height: 38px; }
.artist-chip b, .artist-chip small { display: block; }.artist-chip b { font-size: 13px; }.artist-chip small { margin-top: 1px; color: rgba(255,255,255,.76); font-size: 11px; }
.post-caption { color: white; text-shadow: 0 1px 10px rgba(22,10,37,.32); }.post-caption strong, .post-caption span { display: block; }.post-caption strong { font-family: "Fraunces", serif; font-size: 21px; line-height: 1.1; }.post-caption span { margin-top: 5px; color: rgba(255,255,255,.8); font-size: 12px; }
.post-actions { position: absolute; z-index: 2; right: 23px; bottom: 23px; display: flex; gap: 8px; }
.post-action { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border: 1px solid rgba(255,255,255,.27); border-radius: 20px; color: white; background: rgba(29,15,49,.25); backdrop-filter: blur(8px); font-size: 11px; font-weight: 600; }.post-action > span { font-size: 17px; line-height: 1; }.post-action.liked { color: #ffcfdb; background: rgba(146,40,72,.36); }.post-action.saved { color: #ffebb6; }
.next-art { position: absolute; z-index: 2; left: 50%; bottom: 23px; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; color: white; background: rgba(29,15,49,.2); transform: translateX(-50%); }
.scroll-cue { position: absolute; z-index: 2; top: 53px; right: 24px; color: rgba(255,255,255,.84); font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: .03em; text-transform: uppercase; }.scroll-cue i { display: inline-block; margin-left: 3px; font-style: normal; font-size: 15px; animation: bounce 1.7s infinite; }@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }.gallery-sun { position: absolute; top: 14%; right: 15%; width: 100px; height: 100px; border: 3px solid rgba(255,237,180,.58); border-radius: 50%; box-shadow: 0 0 0 18px rgba(255,255,255,.08); }.gallery-flower { position: absolute; width: 43px; height: 43px; background: #ffdaa6; clip-path: polygon(50% 0, 61% 31%, 90% 10%, 70% 40%, 100% 50%, 70% 60%, 90% 90%, 61% 69%, 50% 100%, 39% 69%, 10% 90%, 30% 60%, 0 50%, 30% 40%, 10% 10%, 39% 31%); }.gallery-flower.one { left: 14%; top: 18%; }.gallery-flower.two { right: 11%; bottom: 18%; transform: scale(.7); }.gallery-moon { position: absolute; top: 14%; right: 15%; width: 100px; height: 100px; border-radius: 50%; background: #ddd5ff; box-shadow: inset -22px -6px #8793cb, 0 0 0 17px rgba(255,255,255,.07); }.gallery-star { position: absolute; width: 13px; height: 13px; background: #fff2bf; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }.gallery-star.s1 { top: 26%; left: 19%; }.gallery-star.s2 { top: 46%; right: 25%; transform: scale(.63); }.gallery-star.s3 { bottom: 21%; left: 28%; transform: scale(1.4); }
.feed-aside { display: grid; align-content: start; gap: 17px; }
.mini-card { padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: white; }
.mini-card-title { display: flex; align-items: center; gap: 7px; color: #625b72; font-size: 11px; font-weight: 700; }.mini-icon { display: grid; place-items: center; width: 21px; height: 21px; color: var(--lilac); background: #eeeafd; border-radius: 7px; }
.match-card { background: linear-gradient(141deg, #f6f2ff, #fff 74%); }.match-card h2 { margin: 16px 0 6px; font-family: "Fraunces", serif; font-size: 25px; letter-spacing: -1px; }.match-card p { margin-bottom: 15px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }.tag-row button, .profile-tags span { padding: 5px 8px; border: 0; border-radius: 6px; color: #6451ac; background: #e9e4fb; font-size: 11px; font-weight: 600; }
.text-button { margin-top: 20px; padding: 0; border: 0; color: var(--lilac-dark); background: transparent; font-size: 12px; font-weight: 700; }.text-button span { margin-left: 3px; font-size: 16px; }
.artist-of-day { overflow: hidden; }.daily-artist { display: flex; align-items: center; width: 100%; margin: 16px 0 16px; padding: 0; border: 0; background: transparent; text-align: left; }.daily-artist > span:nth-child(2) { margin-left: 9px; }.daily-artist b, .daily-artist small { display: block; }.daily-artist b { font-size: 13px; }.daily-artist small { margin-top: 3px; color: var(--muted); font-size: 11px; }.daily-artist > i { margin-left: auto; color: var(--lilac); font-style: normal; font-size: 20px; }
.mini-art { position: relative; height: 79px; overflow: hidden; border-radius: 12px; }.art-lilac { background: radial-gradient(circle at 70% 34%, #ffe4c2 0 7%, transparent 7.5%), radial-gradient(circle at 30% 76%, #7b64a9 0 13%, transparent 13.5%), linear-gradient(135deg, #a889cd, #e7a0c2 58%, #f0c496); }.art-lilac span:first-child { position: absolute; left: 31%; bottom: -15%; width: 20%; height: 72%; background: #e9b4b0; border-radius: 50% 50% 30% 30%; }.art-lilac span:last-child { position: absolute; left: 27%; bottom: 23%; width: 31%; height: 40%; background: #343059; border-radius: 55% 46% 50% 50%; }.safety-card { display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-color: #d7eee3; background: #f3faf6; }.shield { display: grid; flex: 0 0 auto; place-items: center; width: 27px; height: 27px; color: #4b9b77; border-radius: 10px; background: #d9f0e5; font-weight: 700; }.safety-card b { color: #4c6d5e; font-size: 11px; }.safety-card p { margin: 2px 0 0; color: #6d887c; font-size: 10px; line-height: 1.3; }.safety-card button { margin-left: auto; border: 0; color: #4b9b77; background: transparent; font-size: 17px; }

.search-hero { padding: 16px 0 37px; text-align: center; }.search-hero h1 { margin-bottom: 25px; }.big-search { display: flex; align-items: center; max-width: 714px; height: 58px; margin: 0 auto; padding-left: 19px; border: 1px solid #cfc7da; border-radius: 15px; background: white; box-shadow: 0 7px 18px rgba(48,35,80,.05); }.big-search > span { color: #70677d; font-size: 23px; }.big-search input { min-width: 0; flex: 1; height: 100%; padding: 0 14px; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 16px; }.big-search button { height: 42px; margin-right: 8px; padding: 0 17px; border: 0; border-radius: 10px; color: white; background: var(--lilac); font-size: 13px; font-weight: 700; }.popular-searches { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 13px; color: var(--muted); font-size: 11px; }.popular-searches button { padding: 0; border: 0; color: #6451ac; background: transparent; text-decoration: underline; text-underline-offset: 2px; }
.search-content { display: grid; grid-template-columns: 228px minmax(0,1fr); gap: 43px; }.filters { align-self: start; padding: 3px 0; }.filter-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }.filter-heading h2 { margin: 0; font-size: 16px; }.filter-heading button { padding: 0; border: 0; color: var(--lilac); background: transparent; font-size: 11px; font-weight: 600; }details { padding: 16px 0; border-bottom: 1px solid var(--line); }summary { display: flex; justify-content: space-between; cursor: pointer; list-style: none; font-size: 13px; font-weight: 700; }summary::-webkit-details-marker { display: none; }summary span { color: var(--muted); }.range-values { display: flex; justify-content: space-between; margin: 15px 0 7px; color: var(--muted); font-size: 11px; }.price-range { width: 100%; accent-color: var(--lilac); }.check, .radio { display: flex; align-items: center; gap: 8px; margin-top: 11px; color: #595366; font-size: 12px; cursor: pointer; }.check input, .radio input { position: absolute; opacity: 0; }.check > span { width: 15px; height: 15px; border: 1px solid #bcb4c7; border-radius: 4px; background: white; }.check input:checked + span { border-color: var(--lilac); background: var(--lilac); box-shadow: inset 0 0 0 3px white; }.check em { margin-left: auto; color: #a19aa9; font-size: 10px; font-style: normal; }.radio > span { width: 15px; height: 15px; border: 1px solid #bcb4c7; border-radius: 50%; background: white; }.radio input:checked + span { border: 4px solid var(--lilac); }.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }.filter-chips button { padding: 6px 8px; border: 1px solid #dfd9e6; border-radius: 7px; color: #696175; background: white; font-size: 11px; }.filter-chips button.selected { border-color: #c9bdf3; color: #614db0; background: #eeeafd; }
.results-top { display: flex; align-items: center; justify-content: space-between; min-height: 38px; margin-bottom: 19px; }.results-top p { margin: 0; color: #696375; font-size: 13px; }.results-top strong { color: var(--ink); }.results-top b { color: var(--ink); }.sort-select { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11px; }.sort-select select { border: 0; color: var(--ink); background: transparent; font-size: 11px; font-weight: 700; outline: 0; }.artist-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }.artist-result { overflow: hidden; border-radius: 15px; background: white; box-shadow: 0 4px 16px rgba(46,35,72,.05); transition: .18s ease; }.artist-result:hover { transform: translateY(-3px); box-shadow: 0 12px 25px rgba(46,35,72,.10); }.result-art { position: relative; height: 180px; overflow: hidden; }.result-art:after { content: ""; position: absolute; inset: auto 13px 10px auto; width: 25px; height: 25px; border: 2px solid rgba(255,255,255,.58); border-radius: 50%; }.art-poppy { background: radial-gradient(circle at 24% 22%, #ffdcac 0 5%, transparent 5.4%), radial-gradient(circle at 74% 67%, #df5483 0 16%, transparent 16.3%), linear-gradient(140deg, #f4a172, #e96f90 55%, #7354a1); }.art-poppy:before { content: ""; position: absolute; left: 35%; top: 18%; width: 31%; height: 75%; background: #684069; border-radius: 50% 50% 39% 39%; box-shadow: 11px 32px 0 -4px #f7c3ab; }.art-bluebell { background: radial-gradient(circle at 70% 20%, #e1d1ff 0 7%, transparent 7.4%), linear-gradient(146deg, #3e4a8d, #74a6dc 51%, #e7cee7); }.art-bluebell:before { content: ""; position: absolute; right: 24%; bottom: -5%; width: 34%; height: 78%; background: #f0c3bd; border-radius: 51% 51% 30% 30%; box-shadow: -25px 5px 0 -2px #3c416f; }.art-garden { background: radial-gradient(circle at 19% 19%, #ffe7a7 0 5%, transparent 5.4%), radial-gradient(circle at 77% 25%, #dd8fb7 0 7%, transparent 7.4%), linear-gradient(135deg, #44656a, #77aa91 58%, #efcf9d); }.art-garden:before { content: ""; position: absolute; left: 37%; bottom: -12%; width: 27%; height: 82%; background: #f4c0a6; border-radius: 52% 52% 35% 35%; box-shadow: -33px 15px 0 -7px #2e5650; }.art-sunset { background: radial-gradient(circle at 72% 30%, #ffd493 0 10%, transparent 10.3%), linear-gradient(160deg, #6a467f, #e27b83 58%, #f3c986); }.art-sunset:before { content: ""; position: absolute; left: 28%; bottom: -10%; width: 40%; height: 78%; background: #7d3f61; border-radius: 54% 54% 35% 35%; }.result-info { padding: 12px 13px 14px; }.result-artist { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }.result-artist .avatar { width: 27px; height: 27px; font-size: 12px; }.result-artist b { font-size: 12px; }.result-artist small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; }.result-info h3 { margin: 0 0 7px; font-family: "Fraunces", serif; font-size: 17px; letter-spacing: -.5px; }.result-meta { display: flex; justify-content: space-between; align-items: center; color: #777084; font-size: 10px; }.availability { color: #4c9b76; font-weight: 700; }.result-price { color: var(--ink); font-weight: 700; }.result-tags { display: flex; gap: 5px; margin-top: 11px; }.result-tags span { padding: 4px 6px; color: #746a89; background: #f4f1f7; border-radius: 5px; font-size: 9px; }

.back-link { margin-bottom: 18px; padding: 0; border: 0; color: var(--lilac); background: transparent; font-size: 13px; font-weight: 700; }.artist-cover { position: relative; height: 188px; overflow: hidden; border-radius: 21px; background: linear-gradient(118deg, #6b5186, #f1a9bf 45%, #f4d1a3); }.artist-cover:before, .artist-cover:after { content: ""; position: absolute; border-radius: 50%; }.artist-cover:before { top: -73px; left: 8%; width: 290px; height: 290px; background: rgba(255,255,255,.23); }.artist-cover:after { right: 11%; bottom: -79px; width: 360px; height: 210px; border: 30px solid rgba(98,66,138,.25); }.artist-cover span { position: absolute; width: 20px; height: 20px; background: #fff3c5; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }.artist-cover span:nth-child(1) { top: 34px; right: 34%; }.artist-cover span:nth-child(2) { top: 78px; right: 16%; transform: scale(.55); }.artist-cover span:nth-child(3) { bottom: 31px; left: 41%; transform: scale(.7); }.artist-profile-head { display: flex; align-items: center; gap: 17px; margin: -47px 29px 24px; position: relative; }.profile-avatar { width: 91px; height: 91px; border-width: 5px; font-size: 39px; }.artist-profile-head h1 { font-size: 33px; }.artist-profile-head .eyebrow { margin-bottom: 3px; }.handle { margin: 5px 0 0; color: #777184; font-size: 12px; }.verified { display: inline-grid; place-items: center; width: 18px; height: 18px; color: white; background: #70b6e4; border-radius: 50%; font-family: sans-serif; font-size: 11px; vertical-align: middle; }.profile-actions { display: flex; gap: 9px; margin-left: auto; }.primary-button, .secondary-button { min-height: 40px; padding: 0 15px; border-radius: 10px; font-size: 12px; font-weight: 700; transition: .18s ease; }.primary-button { border: 0; color: white; background: var(--lilac); }.secondary-button { border: 1px solid #ddd8e4; color: #5d5669; background: white; }.secondary-button:hover { border-color: #b9add5; color: var(--lilac-dark); }.artist-body { display: grid; grid-template-columns: 236px minmax(0,1fr); gap: 40px; margin: 0 29px; }.artist-info { color: #6e6779; font-size: 13px; line-height: 1.55; }.artist-info > p { margin-bottom: 20px; }.info-line { display: flex; gap: 8px; margin: 10px 0; color: #645d70; font-size: 11px; }.info-line span { color: var(--lilac); }.profile-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 20px 0 16px; }.artist-info a { color: var(--lilac-dark); font-size: 12px; font-weight: 700; text-decoration: none; }.profile-tabs { display: flex; gap: 25px; height: 40px; border-bottom: 1px solid var(--line); }.profile-tabs button { padding: 0 1px 11px; border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: transparent; font-size: 12px; font-weight: 700; }.profile-tabs button.active { color: var(--ink); border-color: var(--lilac); }.profile-tabs b { padding: 2px 5px; color: #5f4aaa; background: #eeeafd; border-radius: 6px; font-size: 9px; }.portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }.portfolio-card { position: relative; min-height: 170px; overflow: hidden; border-radius: 12px; }.portfolio-card > span { position: absolute; top: 11px; right: 11px; color: rgba(255,255,255,.8); font-size: 17px; }.portfolio-card.small .portrait-shape, .portfolio-card.small .ribbon, .portfolio-card.small .moon, .portfolio-card.small .spark, .portfolio-card.small .visual-stamp { transform: scale(.45); transform-origin: center; }.portfolio-card.small .portrait-shape { bottom: -17%; }.portfolio-card.small .moon { top: -12%; right: -4%; }.portfolio-card.small .ribbon { bottom: -7%; }

.page-header { align-items: flex-end; padding: 11px 0 31px; border-bottom: 1px solid var(--line); }.page-header p:last-child { max-width: 330px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }.order-tabs { display: flex; gap: 23px; height: 63px; }.order-tabs button { padding: 0 1px; border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: transparent; font-size: 13px; font-weight: 700; }.order-tabs button.active { color: var(--ink); border-color: var(--lilac); }.order-tabs b { padding: 2px 6px; border-radius: 10px; color: #6755af; background: #eeeafd; font-size: 10px; }.order-card { display: flex; align-items: center; gap: 20px; margin-top: 18px; padding: 18px; border: 1px solid var(--line); border-radius: 17px; background: white; }.order-art { flex: 0 0 auto; width: 114px; height: 114px; border-radius: 12px; }.order-info { min-width: 0; flex: 1; }.status { display: inline-block; margin-bottom: 7px; padding: 4px 7px; border-radius: 6px; font-size: 10px; font-weight: 700; }.status.progress { color: #5b4bac; background: #eeeafd; }.status.pending { color: #b87644; background: #fff0db; }.order-info h2 { margin: 0 0 5px; font-family: "Fraunces", serif; font-size: 21px; letter-spacing: -.8px; }.order-info p { margin: 0; color: var(--muted); font-size: 12px; }.progress-track { height: 5px; margin: 17px 0 8px; overflow: hidden; background: #eeeaf2; border-radius: 10px; }.progress-track span { display: block; width: 59%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8170df, #b49aee); }.progress-steps { display: flex; justify-content: space-between; color: #aaa3b0; font-size: 10px; }.progress-steps .done, .progress-steps .current { color: #6252ad; }.progress-steps .current { font-weight: 700; }.order-side { display: grid; justify-items: end; gap: 5px; min-width: 150px; }.order-side span { color: var(--muted); font-size: 10px; }.order-side > b { font-size: 13px; }.order-side .secondary-button { margin-top: 13px; }.compact .order-art { width: 75px; height: 75px; }.compact { margin-top: 14px; }

.messages-header { padding: 0 0 21px; }.messages-layout { display: grid; grid-template-columns: 280px minmax(0,1fr); height: calc(100vh - 146px); min-height: 500px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: white; }.conversation-list { padding: 14px 10px; border-right: 1px solid var(--line); }.message-search { display: flex; align-items: center; gap: 7px; height: 35px; padding: 0 10px; border-radius: 9px; color: #8e8797; background: #f5f3f7; }.message-search input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 11px; }.conversation { display: flex; align-items: center; gap: 9px; width: 100%; padding: 13px 9px; border: 0; border-radius: 10px; background: transparent; text-align: left; }.conversation:hover { background: #f8f7fa; }.conversation.active { background: #eeeafd; }.conversation b, .conversation small { display: block; }.conversation b { font-size: 12px; }.conversation small { max-width: 145px; margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.conversation time { align-self: flex-start; margin-left: auto; color: #9891a0; font-size: 9px; }.chat-panel { display: flex; flex-direction: column; min-width: 0; }.chat-head { display: flex; align-items: center; gap: 8px; height: 64px; padding: 0 20px; border-bottom: 1px solid var(--line); }.chat-head b, .chat-head small { display: block; }.chat-head b { font-size: 13px; }.chat-head small { margin-top: 3px; color: #7d778d; font-size: 10px; }.chat-head small i { display: inline-block; width: 6px; height: 6px; margin-right: 3px; background: #6fc29a; border-radius: 50%; }.chat-head button { margin-left: auto; border: 0; color: var(--muted); background: transparent; font-weight: 700; }.order-context { display: flex; align-items: center; gap: 9px; margin: 14px 18px 0; padding: 8px; border-radius: 10px; background: #f6f3fb; }.order-context .mini-art { width: 41px; height: 41px; }.order-context small, .order-context b, .order-context em { display: block; }.order-context small { margin-bottom: 3px; color: #7360bd; font-family: "DM Mono", monospace; font-size: 8px; }.order-context b { font-size: 11px; }.order-context em { margin-top: 2px; color: var(--muted); font-size: 9px; font-style: normal; }.order-context button { margin-left: auto; border: 0; color: var(--lilac-dark); background: transparent; font-size: 10px; font-weight: 700; }.chat-log { flex: 1; padding: 24px 21px; overflow: auto; }.chat-date { margin: 0 0 17px; color: #a09aa8; font-size: 10px; text-align: center; }.bubble { max-width: 54%; margin-bottom: 12px; padding: 10px 12px; border-radius: 12px 12px 12px 3px; color: #514a5b; background: #f4f1f7; font-size: 12px; line-height: 1.4; }.bubble.mine { margin-left: auto; border-radius: 12px 12px 3px 12px; color: white; background: var(--lilac); }.bubble time { display: block; margin-top: 4px; color: #a19aa9; font-size: 8px; text-align: right; }.bubble.mine time { color: #d9d2ff; }.chat-compose { display: flex; align-items: center; gap: 9px; padding: 13px 17px; border-top: 1px solid var(--line); }.chat-compose button { width: 28px; height: 28px; border: 0; border-radius: 50%; color: #7f788a; background: #f3f0f6; font-size: 17px; }.chat-compose input { flex: 1; height: 32px; border: 0; outline: 0; color: var(--ink); font-size: 12px; }.chat-compose .send-button { color: white; background: var(--lilac); }

.collection-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-top: 26px; }.collection { position: relative; min-height: 230px; padding: 20px; overflow: hidden; border-radius: 16px; color: white; box-shadow: var(--shadow); }.collection:after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(24,14,43,.55), transparent 64%); }.collection h2, .collection > span { position: relative; z-index: 1; }.collection > span { padding: 5px 7px; border: 1px solid rgba(255,255,255,.3); border-radius: 7px; background: rgba(32,21,49,.15); font-size: 10px; }.collection h2 { position: absolute; right: 20px; bottom: 16px; left: 20px; margin: 0; font-family: "Fraunces", serif; font-size: 24px; line-height: 1; }.creator-dash { display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: 15px; margin-top: 28px; }.creator-dash > section { min-height: 170px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: white; }.creator-dash h2 { margin: 11px 0 2px; font-family: "Fraunces", serif; font-size: 24px; }.creator-dash p { color: var(--muted); font-size: 12px; }.creator-dash .secondary-button { margin-top: 6px; }.avatar.large { width: 50px; height: 50px; font-size: 22px; }.dash-stat { display: flex; flex-direction: column; justify-content: flex-end; }.dash-stat b { color: var(--lilac-dark); font-family: "Fraunces", serif; font-size: 37px; letter-spacing: -1px; }.dash-stat span { margin-top: 4px; color: var(--muted); font-size: 11px; }

.modal-backdrop { display: none; position: fixed; z-index: 20; inset: 0; place-items: center; padding: 20px; background: rgba(32,24,49,.52); backdrop-filter: blur(5px); }.modal-backdrop.open { display: grid; }.modal { position: relative; width: min(100%, 550px); max-height: calc(100vh - 40px); overflow: auto; padding: 32px; border-radius: 22px; background: white; box-shadow: 0 22px 80px rgba(26,16,47,.32); animation: modalIn .2s ease; }.modal h2 { margin-bottom: 7px; font-family: "Fraunces", serif; font-size: 30px; letter-spacing: -1px; }.modal-close { position: absolute; top: 15px; right: 17px; width: 31px; height: 31px; border: 0; border-radius: 50%; color: #6b6476; background: #f3f0f6; font-size: 22px; line-height: 1; }.modal-avatar { width: 47px; height: 47px; margin-bottom: 17px; font-size: 20px; }.modal-intro { margin-bottom: 20px; color: var(--muted); font-size: 13px; line-height: 1.45; }.commission-options { display: grid; gap: 9px; margin-bottom: 20px; }.commission-option { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px; border: 1px solid #e3dfea; border-radius: 12px; background: white; text-align: left; }.commission-option.selected { border-color: var(--lilac); box-shadow: inset 0 0 0 1px var(--lilac); }.option-art { width: 45px; height: 45px; overflow: hidden; border-radius: 8px; }.commission-option b, .commission-option small { display: block; }.commission-option b { font-size: 12px; }.commission-option small { margin-top: 3px; color: var(--muted); font-size: 10px; }.commission-option strong { margin-left: auto; color: var(--lilac-dark); font-size: 11px; }.full { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; }.publish-modal-content label { display: block; margin: 19px 0; color: #504a5c; font-size: 12px; font-weight: 700; }.publish-modal-content label input { display: block; width: 100%; height: 42px; margin-top: 7px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; outline: 0; color: var(--ink); }.upload-drop { display: grid; place-items: center; gap: 5px; min-height: 135px; margin-top: 20px; padding: 20px; border: 1px dashed #b9add6; border-radius: 13px; color: #665a76; background: #faf8fd; text-align: center; }.upload-drop span { color: var(--lilac); font-size: 27px; }.upload-drop b { font-size: 13px; }.upload-drop small { color: var(--muted); font-size: 10px; }.content-settings { display: flex; align-items: center; gap: 7px; margin-bottom: 21px; }.content-settings > span { margin-right: auto; font-size: 12px; font-weight: 700; }.content-settings button { padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; color: #766f80; background: white; font-size: 10px; }.content-settings button.selected { border-color: #9dd4b9; color: #4d8f70; background: #edf9f2; }.toast { position: fixed; z-index: 30; bottom: 24px; left: 50%; max-width: calc(100% - 30px); padding: 11px 15px; border-radius: 10px; color: white; background: #332d43; box-shadow: 0 10px 25px rgba(24,16,40,.25); font-size: 12px; opacity: 0; pointer-events: none; transform: translate(-50%, 20px); transition: .22s ease; }.toast.show { opacity: 1; transform: translate(-50%, 0); }@keyframes modalIn { from { opacity: 0; transform: scale(.96) translateY(7px); } to { opacity: 1; transform: scale(1) translateY(0); } }

body.dark { --ink: #f3eff9; --muted: #aea7bb; --line: #393345; --paper: #211c2b; --sidebar: #292332; --lavender: #372e4d; --shadow: 0 18px 50px rgba(0,0,0,.25); }.dark .mini-card, .dark .artist-result, .dark .order-card, .dark .creator-dash > section, .dark .messages-layout, .dark .modal, .dark .big-search, .dark .profile-pill, .dark .round-button, .dark .secondary-button, .dark .commission-option, .dark .filter-chips button { background: #2b2535; }.dark .filters .check > span, .dark .filters .radio > span { background: #2b2535; }.dark .artist-result .result-tags span, .dark .message-search { background: #37313f; }.dark .match-card { background: linear-gradient(141deg, #302841, #2b2535); }.dark .safety-card { background: #24362e; border-color: #385447; }.dark .nav-link:hover, .dark .nav-link.active { background: #39304d; }.dark .order-context { background: #342b46; }.dark .chat-compose { background: #2b2535; }.dark .chat-compose input { background: #2b2535; color: var(--ink); }.dark .conversation.active { background: #3b3150; }.dark .bubble.other { background: #393240; color: #eee9f5; }.dark .upload-drop { background: #292331; }

@media (max-width: 1050px) { .sidebar { width: 206px; }.brand { font-size: 24px; }.nav-link { gap: 11px; }.app-shell main { width: calc(100% - 206px); margin-left: 206px; }.view { padding: 30px; }.feed-layout { grid-template-columns: minmax(420px,1fr) 275px; }.artist-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }.artist-body { margin: 0; }.artist-profile-head { margin-left: 0; margin-right: 0; }.portfolio-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 780px) { .sidebar { position: fixed; inset: auto 0 0; width: 100%; height: 63px; padding: 7px 11px; flex-direction: row; background: rgba(245,241,248,.96); border-top: 1px solid var(--line); border-right: 0; backdrop-filter: blur(14px); }.brand, .sidebar-bottom .create-button, .profile-pill { display: none; }.main-nav { display: flex; justify-content: space-between; width: 100%; gap: 0; margin: 0; }.nav-link { display: grid; place-items: center; flex: 1; min-height: 48px; padding: 2px 0; border-radius: 11px; font-size: 9px; }.nav-link > span { width: auto; font-size: 18px; }.nav-link b { position: absolute; margin: -28px 0 0 23px; }.sidebar-bottom { margin: 0; }.app-shell main { width: 100%; margin-left: 0; }.view { min-height: calc(100vh - 63px); padding: 20px 17px 85px; }.topbar { align-items: flex-start; }.topbar h1 { font-size: 32px; }.feed-switch { gap: 15px; overflow-x: auto; }.feed-status { display: none; }.feed-layout { display: block; padding-top: 18px; }.feature-post { min-height: 540px; border-radius: 19px; }.feed-aside { grid-template-columns: 1fr; margin-top: 17px; }.artist-of-day { display: none; }.search-hero { padding-top: 11px; }.search-hero h1 { font-size: 32px; }.big-search { height: 52px; }.big-search button { padding: 0 11px; }.search-content { display: block; }.filters { display: none; }.artist-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }.result-art { height: 145px; }.result-info { padding: 10px; }.result-info h3 { font-size: 15px; }.result-tags { display: none; }.results-top { margin-top: 9px; }.artist-cover { height: 145px; }.artist-profile-head { flex-wrap: wrap; gap: 11px; margin-top: -38px; }.profile-avatar { width: 74px; height: 74px; font-size: 32px; }.artist-profile-head h1 { font-size: 27px; }.profile-actions { width: 100%; margin: 5px 0 0; }.profile-actions button { flex: 1; }.artist-body { grid-template-columns: 1fr; gap: 22px; }.artist-info { border-bottom: 1px solid var(--line); padding-bottom: 16px; }.portfolio-grid { grid-template-columns: repeat(2, 1fr); }.portfolio-card { min-height: 140px; }.page-header { display: block; }.page-header p:last-child { margin-top: 14px; }.order-card { flex-wrap: wrap; gap: 14px; padding: 13px; }.order-art { width: 75px; height: 75px; }.order-side { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 2px; }.order-side .secondary-button { margin: 0; }.progress-steps { overflow: hidden; gap: 14px; justify-content: flex-start; white-space: nowrap; }.messages-layout { grid-template-columns: 1fr; height: auto; }.conversation-list { display: none; }.chat-panel { min-height: 500px; }.collection-row { grid-template-columns: 1fr; }.creator-dash { grid-template-columns: repeat(2,1fr); }.creator-dash > section:first-child { grid-column: 1/-1; }.modal { padding: 28px 19px; }.commission-option { align-items: flex-start; }.commission-option strong { max-width: 66px; text-align: right; }.dark .sidebar { background: rgba(41,35,50,.96); } }