:root { color-scheme:dark; --bg:#202225; --surface:#292c30; --surface-raised:#30343a; --category-bg:#17191c; --text:#f5f6f7; --muted:#a1a6ad; --line:rgba(255,255,255,.10); --blue:#5b98ff; --blue-strong:#367dff; --shadow:0 14px 38px rgba(0,0,0,.18); }
:root[data-theme="light"] { color-scheme:light; --bg:#f6f7f8; --surface:#fff; --surface-raised:#f0f1f3; --category-bg:#f3f3f3; --text:#17191c; --muted:#747980; --line:rgba(17,18,19,.10); --blue:#2878fb; --blue-strong:#1269f8; --shadow:0 12px 30px rgba(31,38,50,.10); }
@media (prefers-color-scheme:light) { :root:not([data-theme]) { color-scheme:light; --bg:#f6f7f8; --surface:#fff; --surface-raised:#f0f1f3; --category-bg:#f3f3f3; --text:#17191c; --muted:#747980; --line:rgba(17,18,19,.10); --blue:#2878fb; --blue-strong:#1269f8; --shadow:0 12px 30px rgba(31,38,50,.10); } }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--bg); color:var(--text); font-family:"DM Sans",system-ui,sans-serif; -webkit-font-smoothing:antialiased; } button,input { font:inherit; } button { color:inherit; cursor:pointer; border:0; } .app-shell { width:min(100%,860px); margin:auto; padding:24px 20px 120px; }
.topbar { display:flex;align-items:center;gap:10px; }.app-name { margin-right:auto;font-family:"Plus Jakarta Sans",sans-serif;font-size:20px;font-weight:800;letter-spacing:-1px; }.location-button { display:flex;align-items:center;gap:5px;padding:9px 11px;background:var(--surface);border:1px solid var(--line);border-radius:99px;font-size:13px;font-weight:600; }.location-button svg{width:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.avatar-button,.profile-avatar{display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#e9c9a0,#8d5f4a);color:#271910;font-size:11px;font-weight:800}.avatar-button{width:38px;height:38px}
.search-box { height:57px;display:flex;align-items:center;gap:11px;margin-top:26px;padding:0 15px;background:var(--surface);border:1px solid var(--line);border-radius:17px;box-shadow:var(--shadow); }.search-box:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 20%,transparent)}.search-box svg{width:20px;fill:none;stroke:var(--muted);stroke-width:2}.search-box input{width:100%;border:0;outline:0;background:transparent;color:var(--text);font-size:15px}.search-box input::placeholder{color:var(--muted)}kbd{padding:4px 6px;border:1px solid var(--line);border-radius:5px;color:var(--muted);font-size:10px;white-space:nowrap}
.category-section{padding-top:29px}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.section-heading h1,.section-heading h2{margin:0;font-family:"Plus Jakarta Sans",sans-serif;font-size:18px;letter-spacing:-.7px}.section-subtitle{margin:4px 0 0;color:var(--muted);font-size:12px}.text-button{padding:4px 0;background:transparent;color:var(--blue);font-size:13px;font-weight:700}.category-row{display:flex;gap:10px;overflow-x:auto;padding:3px 0 8px;scrollbar-width:none}.category-row::-webkit-scrollbar{display:none}.category{position:relative;flex:0 0 144px;height:120px;overflow:hidden;padding:0;border-radius:20px;background:var(--category-bg);color:var(--text);font-size:12px;font-weight:700;text-align:center;transition:transform .18s,box-shadow .18s}.category:hover,.category:focus-visible{transform:translateY(-2px);box-shadow:var(--shadow)}.category > span{position:absolute;z-index:1;bottom:10px;left:0;right:0;text-align:center;text-shadow:0 1px 6px rgba(0,0,0,.35)}.category-art{position:absolute;top:-12px;left:50%;width:100px;height:100px;background-image:url('assets/category-sprite-dark.png');background-size:300% 200%;background-repeat:no-repeat;pointer-events:none;transform:translateX(-50%)}.category-art-1{background-position:0 0}.category-art-2{background-position:50% 0}.category-art-3{background-position:100% 0}.category-art-4{background-position:0 100%}.category-art-5{background-position:50% 100%}.category-art-6{background-position:100% 100%}@media (prefers-color-scheme:light){:root:not([data-theme]) .category-art{background-image:url('assets/category-sprite.png')}}:root[data-theme="light"] .category-art{background-image:url('assets/category-sprite.png')}
.listing-section{padding-top:29px}.listing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.card{min-width:0;cursor:pointer}.card-image{position:relative;aspect-ratio:1.07;border-radius:16px 16px 0 0;overflow:hidden;background:var(--surface-raised);box-shadow:var(--shadow)}.slide-track,.listing-slide{position:absolute;inset:0;width:100%;height:100%}.listing-slide{display:block;object-fit:cover;opacity:0;transition:opacity .16s ease}.listing-slide.active{opacity:1}.card-details{padding:9px 10px 11px;border:1px solid var(--line);border-top:0;border-radius:0 0 16px 16px;background:var(--surface)}.heart,.more-button{position:absolute;right:8px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(20,22,25,.58);backdrop-filter:blur(9px)}.heart{top:8px}.more-button{top:44px;gap:2px;padding:7px}.more-button span{display:block;width:3px;height:3px;border-radius:50%;background:#fff}.heart svg{width:15px;fill:none;stroke:#fff;stroke-width:2}.heart.saved svg{fill:#ff6379;stroke:#ff6379}.slide-dots{position:absolute;right:10px;bottom:9px;display:flex;gap:4px}.slide-dots i{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.56);transition:width .15s,background .15s}.slide-dots i.active{width:10px;background:#fff}.recommendation-menu{position:absolute;z-index:2;right:8px;top:79px;width:192px;padding:5px;background:color-mix(in srgb,var(--surface) 92%,transparent);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 28px rgba(0,0,0,.25);backdrop-filter:blur(15px)}.recommendation-menu button{width:100%;padding:9px 8px;border-radius:8px;background:transparent;text-align:left;color:var(--text);font-size:11px}.recommendation-menu button:hover{background:var(--surface-raised)}.card-title{margin:0 0 3px;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-info{margin:0;color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-price{display:block;margin-top:7px;font-family:"Plus Jakarta Sans",sans-serif;font-size:14px;font-weight:800;letter-spacing:-.4px}.empty-state{padding:32px 0;text-align:center;color:var(--muted)}
.bottom-dock{position:fixed;z-index:5;left:50%;bottom:18px;transform:translateX(-50%);display:grid;grid-template-columns:repeat(5,1fr);align-items:center;width:min(calc(100% - 28px),510px);height:68px;padding:7px;background:color-mix(in srgb,var(--surface) 68%,transparent);border:1px solid var(--line);border-radius:23px;backdrop-filter:blur(22px) saturate(150%);box-shadow:0 16px 42px rgba(0,0,0,.20)}.bottom-dock::before{content:"";position:absolute;z-index:0;left:50%;top:-28px;width:78px;height:78px;border-radius:50%;background:var(--bg);transform:translateX(-50%)}.dock-indicator{position:absolute;z-index:-1;top:7px;left:7px;width:calc((100% - 14px)/5);height:54px;border-radius:17px;background:var(--surface-raised);transform:translateX(0);transition:transform .28s cubic-bezier(.2,.8,.2,1)}.bottom-dock[data-active="search"] .dock-indicator{transform:translateX(100%)}.bottom-dock[data-active="liked"] .dock-indicator{transform:translateX(300%)}.bottom-dock[data-active="chat"] .dock-indicator{transform:translateX(400%)}.bottom-dock[data-active="create"] .dock-indicator{opacity:0}.dock-item{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:54px;background:transparent;color:var(--muted);font-size:10px;font-weight:700;transition:color .2s}.dock-item svg,.create-button svg{width:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.dock-item.active{color:var(--text)}.create-button{position:relative;z-index:2;grid-column:3;display:grid;place-items:center;width:58px;height:58px;min-width:58px;min-height:58px;margin:auto;transform:translateY(-29px);border:0;border-radius:50%;background:var(--blue);color:white;box-shadow:none;aspect-ratio:1}.create-button svg{width:23px;stroke-width:2.2}
dialog{width:min(420px,calc(100% - 32px));padding:29px;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:25px;box-shadow:0 24px 70px rgba(0,0,0,.4)}dialog::backdrop{background:rgba(0,0,0,.46);backdrop-filter:blur(3px)}dialog h2{margin:0 0 8px;font-family:"Plus Jakarta Sans",sans-serif;font-size:22px;letter-spacing:-.8px}dialog p:not(.eyebrow){margin:0;color:var(--muted);line-height:1.5}code{font:inherit;color:var(--text)}.eyebrow{margin:0 0 11px;color:var(--blue);font-size:10px;font-weight:800;letter-spacing:1.3px}.close-dialog{position:absolute;right:15px;top:12px;background:transparent;color:var(--muted);font-size:25px}.dialog-action{width:100%;margin-top:22px;padding:13px;border-radius:13px;background:var(--blue);color:white;font-weight:800}.listing-form{display:grid;gap:13px;margin-top:20px}.listing-form label{display:grid;gap:6px;font-size:12px;font-weight:700}.listing-form input,.listing-form select{width:100%;padding:12px;border:1px solid var(--line);border-radius:11px;background:var(--surface-raised);color:var(--text);outline:0}.listing-form .dialog-action{margin-top:4px}.profile-head{display:flex;align-items:center;gap:13px}.profile-avatar{width:52px;height:52px;font-size:14px}.profile-head .eyebrow{margin-bottom:3px}.profile-head h2{margin:0}.profile-head p:not(.eyebrow){font-size:13px}.rating-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px;padding:13px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}.rating-row strong{color:var(--text)}.theme-setting{display:flex;justify-content:space-between;width:100%;margin-top:14px;padding:12px;border-radius:11px;background:var(--surface-raised);font-size:13px;font-weight:700}.theme-setting span:last-child{color:var(--muted);font-weight:500}.map-ui{position:relative;height:180px;margin:20px 0 12px;overflow:hidden;border-radius:18px;background:linear-gradient(145deg,#b8d6d0 0 28%,#d5ded3 28% 55%,#bfcdc1 55%);color:#205c68}.map-ui::before,.map-ui::after{content:"";position:absolute;width:220px;height:45px;border-radius:30px;background:#f1e6cd;transform:rotate(-20deg)}.map-ui::before{top:42px;left:-30px}.map-ui::after{right:-35px;bottom:25px;transform:rotate(27deg)}.map-road{position:absolute;background:#fff8e9;border-radius:30px}.road-one{width:250px;height:18px;top:80px;left:-20px;transform:rotate(35deg)}.road-two{width:230px;height:14px;top:64px;right:-40px;transform:rotate(-48deg)}.map-pin{position:absolute;z-index:1;left:47%;top:45%;width:26px;height:26px;border:6px solid #fff;border-radius:50% 50% 50% 0;background:var(--blue);box-shadow:0 4px 12px rgba(0,0,0,.18);transform:rotate(-45deg)}.map-ui b{position:absolute;z-index:1;top:67%;left:36%;font-size:13px}.location-list{display:grid;gap:6px}.location-list button{display:flex;justify-content:space-between;padding:12px;border-radius:11px;background:var(--surface-raised);text-align:left;font-weight:700}.location-list small{color:var(--muted);font-size:11px;font-weight:500}
dialog{width:min(420px,calc(100% - 32px));padding:29px;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:25px;box-shadow:0 24px 70px rgba(0,0,0,.4)}dialog::backdrop{background:rgba(0,0,0,.46);backdrop-filter:blur(3px)}dialog h2{margin:0 0 8px;font-family:"Plus Jakarta Sans",sans-serif;font-size:22px;letter-spacing:-.8px}dialog p:not(.eyebrow){margin:0;color:var(--muted);line-height:1.5}code{font:inherit;color:var(--text)}.eyebrow{margin:0 0 11px;color:var(--blue);font-size:10px;font-weight:800;letter-spacing:1.3px}.close-dialog{position:absolute;right:15px;top:12px;background:transparent;color:var(--muted);font-size:25px}.dialog-action{width:100%;margin-top:22px;padding:13px;border-radius:13px;background:var(--blue);color:white;font-weight:800}.listing-form{display:grid;gap:13px;margin-top:20px}.listing-form label{display:grid;gap:6px;font-size:12px;font-weight:700}.listing-form input,.listing-form select{width:100%;padding:12px;border:1px solid var(--line);border-radius:11px;background:var(--surface-raised);color:var(--text);outline:0}.listing-form .dialog-action{margin-top:4px}.profile-head{display:flex;align-items:center;gap:13px}.profile-avatar{width:52px;height:52px;font-size:14px}.rating-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px;padding:13px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}.rating-row strong{color:var(--text)}.map-ui{position:relative;height:180px;margin:20px 0 12px;overflow:hidden;border-radius:18px;background:linear-gradient(145deg,#b8d6d0 0 28%,#d5ded3 28% 55%,#bfcdc1 55%);color:#205c68}.map-ui::before,.map-ui::after{content:"";position:absolute;width:220px;height:45px;border-radius:30px;background:#f1e6cd;transform:rotate(-20deg)}.map-ui::before{top:42px;left:-30px}.map-ui::after{right:-35px;bottom:25px;transform:rotate(27deg)}.map-road{position:absolute;background:#fff8e9;border-radius:30px}.road-one{width:250px;height:18px;top:80px;left:-20px;transform:rotate(35deg)}.road-two{width:230px;height:14px;top:64px;right:-40px;transform:rotate(-48deg)}.map-pin{position:absolute;z-index:1;left:47%;top:45%;width:26px;height:26px;border:6px solid #fff;border-radius:50% 50% 50% 0;background:var(--blue);box-shadow:0 4px 12px rgba(0,0,0,.18);transform:rotate(-45deg)}.map-ui b{position:absolute;z-index:1;top:67%;left:36%;font-size:13px}.location-list{display:grid;gap:6px}.location-list button{display:flex;justify-content:space-between;padding:12px;border-radius:11px;background:var(--surface-raised);text-align:left;font-weight:700}.location-list small{color:var(--muted);font-size:11px;font-weight:500}.screen-dialog{width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:var(--bg)}.screen-top{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;height:68px;padding:0 16px;border-bottom:1px solid var(--line)}.screen-top h2{margin:0;text-align:center;font-size:18px}.back-button,.compose-button,.more-top{display:grid;place-items:center;width:38px;height:38px;background:transparent;border-radius:50%;font-size:23px}.compose-button{margin-left:auto;background:var(--blue);color:white;font-size:25px}.more-top{font-size:15px}.screen-content{width:min(100%,620px);margin:auto;padding:22px 20px 110px}.screen-caption{font-size:13px}.mini-search{display:flex;align-items:center;gap:9px;margin-bottom:18px;padding:11px 12px;border-radius:13px;background:var(--surface);border:1px solid var(--line)}.mini-search svg{width:17px;fill:none;stroke:var(--muted);stroke-width:2}.mini-search input{width:100%;border:0;outline:0;background:transparent;color:var(--text)}.chat-list{display:grid;gap:4px}.chat-row{display:grid;grid-template-columns:45px 1fr auto;gap:11px;align-items:center;padding:12px 5px;background:transparent;text-align:left}.chat-avatar{display:grid;place-items:center;width:43px;height:43px;border-radius:50%;color:white;font-size:11px;font-weight:800}.chat-avatar.blue{background:#4d88ef}.chat-avatar.tan{background:#c88b68}.chat-avatar.violet{background:#8e70d2}.chat-row strong,.chat-row small{display:block}.chat-row small{margin-top:3px;color:var(--muted);font-size:12px}.chat-row time{align-self:start;color:var(--muted);font-size:11px}.account-card{display:flex;align-items:center;gap:14px}.account-card .profile-avatar{width:70px;height:70px;font-size:17px}.account-card h2{margin:0}.account-card p{margin:3px 0 8px;font-size:13px}.edit-profile{padding:7px 10px;border-radius:9px;background:var(--surface-raised);font-size:11px;font-weight:700}.settings-group{margin-top:24px}.settings-label{margin:0 0 7px;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:1px}.setting-row{display:grid;grid-template-columns:1fr auto 14px;gap:8px;align-items:center;width:100%;padding:14px 2px;border-bottom:1px solid var(--line);background:transparent;text-align:left;font-size:14px}.setting-row em{color:var(--muted);font-style:normal;font-size:12px}.setting-row b{color:var(--muted);font-size:20px;font-weight:400}.saved-list{display:grid;gap:10px}
@media (max-width:620px){.app-shell{padding:18px 15px 112px}.location-button{font-size:0;padding:10px}.location-button svg{width:18px}.listing-grid{grid-template-columns:repeat(2,1fr);gap:18px 12px}.bottom-dock{bottom:10px;height:66px;border-radius:22px}.dock-indicator{height:52px}.search-box kbd{display:none}}