/* ex2hand / Mist Glass — atmospheric backdrop, frosted panels, condensed display type. Loads last. */
@import url('https://fonts.googleapis.com/css2?family=Antonio:wght@100..700&display=swap');

/* ---------- Tokens ---------- */
:root,:root[data-theme="light"],:root:not([data-theme]){
 color-scheme:light;
 --bg:#bcc4be;--surface:rgba(255,255,255,.5);--surface2:rgba(255,255,255,.36);
 --ink:#141819;--ink2:#394244;--ink3:#576062;--line:rgba(20,30,30,.13);
 --accent:#151a1b;--accent-ink:#f6f5f1;--accent2:#e0743a;--good:#2c6a4c;--warn:#94571a;--bad:#b0372f;
 --glass:rgba(255,255,255,.3);--glass-strong:rgba(249,249,245,.62);--glass-border:rgba(255,255,255,.62);--glass-highlight:inset 0 1px 0 rgba(255,255,255,.75);
 --shadow:0 30px 70px -24px rgba(24,34,34,.42);--shadow2:0 14px 36px -16px rgba(24,34,34,.32);
 --sky:linear-gradient(180deg,#8ea3a5 0%,#b5c0bb 38%,#d4ccbf 70%,#c3ab94 100%);
 --display:'Antonio','Manrope',sans-serif;--r:26px;--rs:16px;--pa:#3d4b4a;
}
:root[data-theme="dark"]{
 color-scheme:dark;
 --bg:#20292a;--surface:rgba(30,37,38,.62);--surface2:rgba(255,255,255,.07);
 --ink:#eff1ec;--ink2:#c3c9c4;--ink3:#969e99;--line:rgba(255,255,255,.12);
 --accent:#f1efe9;--accent-ink:#151a1b;--accent2:#f08a50;--good:#8ccaa6;--warn:#f0b878;--bad:#ff9b8f;
 --glass:rgba(26,32,33,.42);--glass-strong:rgba(27,33,34,.74);--glass-border:rgba(255,255,255,.13);--glass-highlight:inset 0 1px 0 rgba(255,255,255,.08);
 --shadow:0 30px 70px -24px rgba(0,0,0,.65);--shadow2:0 14px 36px -16px rgba(0,0,0,.5);
 --sky:linear-gradient(180deg,#1b2426 0%,#253031 42%,#2e2c28 78%,#3b2f26 100%);
}

/* ---------- Atmosphere ---------- */
html{background:var(--bg)}
body{background:radial-gradient(110% 60% at 78% 0%,rgba(255,255,255,.34),transparent 62%),radial-gradient(70% 55% at 0% 100%,rgba(150,105,78,.32),transparent 70%),var(--sky);background-attachment:fixed;color:var(--ink)}
:root[data-theme="dark"] body{background:radial-gradient(90% 55% at 80% 0%,rgba(140,170,170,.16),transparent 65%),radial-gradient(70% 55% at 0% 100%,rgba(170,110,70,.18),transparent 70%),var(--sky);background-attachment:fixed}
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.22;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#liveBoot{background:var(--sky);color:#151a1b;font:600 13px Manrope,sans-serif;letter-spacing:.12em;text-transform:uppercase}
#liveBoot:before{border-color:rgba(255,255,255,.5);border-top-color:#151a1b}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Glass primitives ---------- */
.glass{background:var(--glass);border:1px solid var(--glass-border);box-shadow:var(--glass-highlight),var(--shadow2);backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%)}
.card,.stat-card,.filter-panel,.chat-list,.chat-panel,.settings-grid>.card,.empty,.filters,.category-drawer{background:var(--glass-strong);border:1px solid var(--glass-border);box-shadow:var(--glass-highlight),var(--shadow2);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);border-radius:var(--r)}
.card.clickable:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.85);box-shadow:var(--glass-highlight),var(--shadow)}
.overline,.route-kicker,.tile-kicker{font:700 10px/1.5 Manrope,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.muted{color:var(--ink2)}

/* ---------- Buttons ---------- */
button,.primary,.soft,.ghost{border-radius:999px}
.primary,button.primary{background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent);box-shadow:0 12px 26px -12px rgba(0,0,0,.55);font-weight:700}
.primary:hover,button.primary:hover{background:color-mix(in srgb,var(--accent) 86%,var(--accent2));box-shadow:0 16px 30px -12px rgba(0,0,0,.6)}
.soft,button.soft,.light-pill{background:rgba(255,255,255,.55);color:var(--ink);border:1px solid var(--glass-border);box-shadow:var(--glass-highlight);font-weight:600}
:root[data-theme="dark"] .soft,:root[data-theme="dark"] .light-pill{background:rgba(255,255,255,.08)}
.soft:hover,.light-pill:hover{background:rgba(255,255,255,.8)}
:root[data-theme="dark"] .soft:hover,:root[data-theme="dark"] .light-pill:hover{background:rgba(255,255,255,.16)}
.ghost{background:transparent;border:1px solid var(--line);color:var(--ink2)}
.danger,button.danger{background:transparent;border:1px solid color-mix(in srgb,var(--bad) 45%,transparent);color:var(--bad);border-radius:999px}
.danger:hover{background:color-mix(in srgb,var(--bad) 10%,transparent)}
.light-pill{min-height:40px;padding:8px 16px;font-size:13px}
.dark-circle,.circle-arrow{display:grid;place-items:center;flex:0 0 auto;padding:0;border-radius:50%}
.dark-circle{width:46px;height:46px;min-height:46px;background:#151a1b;color:#fff;border:3px solid rgba(255,255,255,.85);font-size:20px;box-shadow:0 10px 20px -8px rgba(0,0,0,.6)}
.dark-circle:hover{background:#000}
input,select,textarea{background:rgba(255,255,255,.62);border:1px solid var(--glass-border);border-radius:14px;color:var(--ink);box-shadow:inset 0 1px 2px rgba(20,30,30,.08)}
:root[data-theme="dark"] input,:root[data-theme="dark"] select,:root[data-theme="dark"] textarea{background:rgba(0,0,0,.22)}
input:focus,select:focus,textarea:focus{border-color:var(--ink);box-shadow:0 0 0 4px rgba(20,26,27,.1)}

/* ---------- Header & bottom nav ---------- */
.topbar{background:rgba(255,255,255,.26);border:1px solid var(--glass-border);box-shadow:var(--glass-highlight),0 18px 40px -22px rgba(20,30,30,.4);border-radius:999px}
:root[data-theme="dark"] .topbar{background:rgba(22,28,29,.5)}
.brand .mark{background:#151a1b;color:#fff;border:0;border-radius:50%;box-shadow:0 8px 18px -8px rgba(0,0,0,.6)}
.brand strong{font-family:Manrope,sans-serif;font-weight:800;letter-spacing:-.04em;color:var(--ink)}
.brand strong em{color:var(--accent2);font-style:normal}
.head-actions .icon-btn{background:rgba(255,255,255,.4);border:1px solid var(--glass-border);border-radius:50%}
.badge-count{background:var(--accent2);color:#fff}
.bottom-nav{background:rgba(255,255,255,.3);border:1px solid var(--glass-border);border-radius:30px;box-shadow:var(--glass-highlight),0 24px 50px -20px rgba(20,30,30,.5);backdrop-filter:blur(26px) saturate(160%);-webkit-backdrop-filter:blur(26px) saturate(160%)}
:root[data-theme="dark"] .bottom-nav{background:rgba(22,28,29,.55)}
.bottom-nav button{color:var(--ink2);border-radius:20px;background:transparent;box-shadow:none}
.bottom-nav button.active{background:rgba(255,255,255,.78);color:var(--ink);box-shadow:0 8px 18px -10px rgba(0,0,0,.45),inset 0 1px 0 #fff}
:root[data-theme="dark"] .bottom-nav button.active{background:rgba(255,255,255,.16);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.15)}
.bottom-nav .nav-label{font-weight:600}

/* ---------- Home: 3D stage ---------- */
.mist-home .explore-stage{background:none;border:0;overflow:hidden}
.mist-home .mega-word{position:absolute;z-index:0;pointer-events:none;user-select:none;font-family:var(--display);line-height:.78;color:rgba(255,255,255,.88);white-space:nowrap;text-transform:uppercase}
.mist-home .mega-top{top:3%;left:3.4%;font-weight:100;font-size:clamp(110px,15.5vw,290px);letter-spacing:-.01em;text-shadow:0 2px 30px rgba(255,255,255,.25)}
.mist-home .mega-mid{top:47%;left:50%;transform:translateX(-50%);font-weight:700;font-size:clamp(130px,22vw,400px);letter-spacing:-.02em;color:rgba(255,255,255,.5)}
:root[data-theme="dark"] .mist-home .mega-top{color:rgba(255,255,255,.72)}
:root[data-theme="dark"] .mist-home .mega-mid{color:rgba(255,255,255,.1)}
.mist-home #pcModel{position:absolute;inset:0;width:100%;height:100%;z-index:1;border:0;background:transparent;pointer-events:none}
.mist-home .scene-rail{position:absolute;z-index:3;left:3.4%;top:52%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:30px;width:92px}
.mist-home .scene-rail button{display:grid;place-items:center;gap:0;min-height:0;height:70px;padding:6px;border-radius:20px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);color:var(--ink);box-shadow:none}
.mist-home .scene-rail button b{font:300 26px/1 var(--display)}
.mist-home .scene-rail button span{font:700 8.5px/1.2 Manrope,'IBM Plex Sans Thai',sans-serif;letter-spacing:.02em;text-align:center}
.mist-home .scene-rail button.active{background:rgba(255,255,255,.82);border:2px solid #fff;box-shadow:0 10px 22px -10px rgba(0,0,0,.5)}
.mist-home .scene-rail .rail-arrow{height:34px;background:transparent;border:0;font-size:18px;color:var(--ink2)}
:root[data-theme="dark"] .mist-home .scene-rail button{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
:root[data-theme="dark"] .mist-home .scene-rail button.active{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.5)}
:root[data-theme="dark"] .mist-home .scene-rail .rail-arrow{background:transparent;border:0}
.mist-home .scene-card{position:absolute;z-index:3;right:3.4%;bottom:118px;width:min(390px,32vw);padding:26px 26px 22px;border-radius:30px;background:rgba(255,255,255,.28)}
:root[data-theme="dark"] .mist-home .scene-card{background:rgba(22,28,29,.5)}
.mist-home .scene-chapter{margin:0 0 10px;font:700 10px/1.4 Manrope,sans-serif;letter-spacing:.12em;color:var(--ink2)}
.mist-home .scene-card h1{margin:0 0 12px;font:600 clamp(28px,2.6vw,40px)/1.18 'IBM Plex Sans Thai',sans-serif;letter-spacing:-.02em;color:var(--ink)}
.mist-home .scene-card h1 em{font-style:normal;color:var(--ink);background:linear-gradient(transparent 62%,color-mix(in srgb,var(--accent2) 45%,transparent) 62%)}
.mist-home .scene-description{margin:0 0 18px;font-size:14px;line-height:1.75;color:var(--ink2)}
.mist-home #sceneShop{width:100%;min-height:58px;justify-content:space-between;padding:10px 12px 10px 24px;font-size:15px;border-radius:22px;display:flex;align-items:center}
.mist-home #sceneShop span{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.14)}
.mist-home .quick-dock{position:absolute;z-index:3;right:3.4%;top:26px;display:flex;gap:6px;padding:8px;border-radius:26px}
.mist-home .quick-dock button{width:54px;height:54px;min-height:54px;padding:0;display:grid;place-items:center;border-radius:18px;background:transparent;border:0;color:var(--ink);box-shadow:none}
.mist-home .quick-dock button.active{background:rgba(255,255,255,.8);box-shadow:0 8px 18px -10px rgba(0,0,0,.5),inset 0 1px 0 #fff}
:root[data-theme="dark"] .mist-home .quick-dock button.active{background:rgba(255,255,255,.16)}
.mist-home .quick-dock .ui-icon{width:22px;height:22px}
.mist-home .model-buttons{position:absolute;z-index:3;right:3.4%;top:112px;display:grid;gap:6px;padding:7px;border-radius:24px}
.mist-home .model-buttons button{width:42px;height:42px;min-height:42px;border-radius:50%;background:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.5);color:var(--ink);box-shadow:none;backdrop-filter:none}
.mist-home .model-tag{position:absolute;z-index:3;left:50%;transform:translateX(-50%);top:26px;right:auto;bottom:auto;display:flex;align-items:center;gap:10px;padding:6px 16px 6px 6px;border-radius:999px;background:rgba(255,255,255,.26);border:1px solid var(--glass-border);backdrop-filter:blur(16px);font:700 10px Manrope,sans-serif;letter-spacing:.12em;color:var(--ink)}
.mist-home .model-tag>span{display:grid;place-items:center;width:30px;height:30px;padding:0;border-radius:50%;background:#151a1b;color:#fff;border:0;font:500 13px var(--display);box-shadow:none}
.mist-home .progress-chip{position:absolute;z-index:3;right:3.4%;bottom:30px;display:flex;align-items:baseline;gap:6px;padding:12px 18px;border-radius:20px;font-family:var(--display)}
.mist-home .progress-chip b{font-weight:300;font-size:28px;line-height:1}
.mist-home .progress-chip small{font-size:12px;color:var(--ink2)}
.mist-home .progress-chip i{align-self:center;width:90px;height:3px;border-radius:3px;background:rgba(20,26,27,.15);overflow:hidden;margin-left:6px}
.mist-home .progress-chip em{display:block;height:100%;width:0;background:var(--ink)}
.mist-home .stage-foot{position:absolute;z-index:3;left:3.4%;bottom:34px;display:flex;align-items:center;gap:22px;font:300 22px/1 Manrope,sans-serif;color:#fff;letter-spacing:-.01em;text-shadow:0 1px 16px rgba(0,0,0,.18)}
.mist-home .stage-foot i{display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;vertical-align:middle;margin:0 2px}
.mist-home .long-arrow{width:86px;min-height:30px;padding:0;background:transparent;border:0;box-shadow:none;position:relative}
.mist-home .long-arrow i{position:absolute;left:0;right:0;top:50%;height:2px;background:#fff}
.mist-home .long-arrow i::after{content:'';position:absolute;right:0;top:-5px;width:10px;height:10px;border-top:2px solid #fff;border-right:2px solid #fff;transform:rotate(45deg)}

/* ---------- Home: editorial board ---------- */
.mist-home .home-content{padding-top:56px}
.board{padding:26px;border-radius:38px;background:rgba(255,255,255,.3)}
:root[data-theme="dark"] .board{background:rgba(22,28,29,.5)}
.board-head{display:grid;grid-template-columns:auto auto 1fr auto;align-items:start;gap:34px}
.board-brand{font:800 26px/1 Manrope,sans-serif;letter-spacing:-.05em;color:var(--ink)}
.board-brand sup{font-size:11px;font-weight:600}
.board-num{font:300 118px/.78 var(--display);letter-spacing:-.04em;color:var(--ink)}
.board-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:4px 0 0}
.board-meta dt{font:800 9.5px/1.4 Manrope,sans-serif;letter-spacing:.06em;color:var(--ink)}
.board-meta dd{margin:4px 0 0;font:600 11.5px/1.55 Manrope,'IBM Plex Sans Thai',sans-serif;color:var(--ink2)}
.board-actions{display:flex;align-items:center;gap:6px;padding:4px;border-radius:999px;background:rgba(255,255,255,.65);box-shadow:0 10px 26px -14px rgba(0,0,0,.5)}
:root[data-theme="dark"] .board-actions{background:rgba(255,255,255,.1)}
.board-actions .light-pill{background:transparent;border:0;box-shadow:none;padding-inline:20px}
.board-grid{display:grid;grid-template-columns:minmax(260px,330px) 1fr;gap:22px;margin-top:28px}
.board-tile{position:relative;display:flex;flex-direction:column;gap:14px;padding:24px;border-radius:30px;background:linear-gradient(160deg,rgba(255,255,255,.55),rgba(255,255,255,.18));border:1px solid var(--glass-border)}
:root[data-theme="dark"] .board-tile{background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03))}
.board-tile h2{margin:0;font:600 34px/1.15 'IBM Plex Sans Thai',sans-serif;letter-spacing:-.02em}
.board-tile .discovery-search{margin:0;padding:0;background:none;border:0;box-shadow:none}
.board-tile .discovery-search>div{display:flex;align-items:center;gap:6px;padding:5px 5px 5px 18px;border-radius:999px;background:rgba(255,255,255,.75);border:1px solid var(--glass-border)}
:root[data-theme="dark"] .board-tile .discovery-search>div{background:rgba(0,0,0,.25)}
.board-tile .discovery-search input{flex:1;min-width:0;min-height:40px;border:0;background:transparent;box-shadow:none;padding:0;font-size:14px}
.tile-cats{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.tile-cats .light-pill{min-height:34px;padding:6px 13px;font-size:12px}
.board-feature{position:relative;min-height:400px;border-radius:32px;overflow:hidden;background:radial-gradient(70% 70% at 55% 45%,rgba(255,255,255,.75),rgba(255,255,255,0) 70%),linear-gradient(180deg,#9fb2b3,#cfc6b9 75%,#bba189);isolation:isolate}
:root[data-theme="dark"] .board-feature{background:radial-gradient(70% 70% at 55% 45%,rgba(255,255,255,.12),transparent 70%),linear-gradient(180deg,#2c3638,#3a342e)}
.board-feature::before{content:'';position:absolute;top:28px;right:32px;width:150px;height:2px;background:linear-gradient(90deg,#fff 30%,rgba(255,255,255,.35) 30%);z-index:2}
.feature-visual{position:absolute;inset:0;display:grid;place-items:center;cursor:pointer}
.feature-visual .product-art{width:min(78%,560px);height:auto;aspect-ratio:210/130;background:none;margin:0;filter:drop-shadow(0 40px 40px rgba(0,0,0,.25))}
.feature-visual .product-art small{display:none}
.feature-visual img{width:100%;height:100%;object-fit:cover}
.feature-visual:has(img)::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,15,.55),transparent 34%,transparent 62%,rgba(10,14,15,.45));pointer-events:none}
.feature-label{position:absolute;z-index:2;left:28px;top:24px;display:grid;gap:4px;max-width:60%;color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.22)}
.feature-label small{font:800 10px Manrope,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.feature-label b{font:700 26px/1.15 Manrope,'IBM Plex Sans Thai',sans-serif;letter-spacing:-.02em}
.feature-label .promo-badge{position:static;justify-self:start;margin-bottom:4px}
.price-chip{position:absolute;z-index:2;left:28px;top:50%;display:flex;align-items:center;gap:16px;padding:10px 10px 10px 16px;border-radius:999px;background:rgba(20,26,27,.42);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(16px);color:#fff}
.price-chip span{display:grid;font:800 10px/1.3 Manrope,'IBM Plex Sans Thai',sans-serif;letter-spacing:.04em}
.price-chip small{font-weight:500;opacity:.75}
.price-chip b{font:400 17px Manrope,sans-serif}
.price-chip i{width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.18)}
.feature-cta{position:absolute;z-index:2;right:26px;bottom:24px;min-height:52px;padding:6px 6px 6px 22px;display:flex;align-items:center;gap:14px;background:#151a1b!important;color:#fff!important;border-color:#151a1b!important}
.feature-cta span{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.3);font-size:18px}
.feature-empty{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:10px;text-align:center;padding:30px}
.feature-empty h3{margin:0;font-size:24px}
.pill-bar{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:34px;margin-top:20px;padding:10px 12px 10px 10px;border-radius:999px;background:rgba(40,36,33,.32);color:#fff}
:root[data-theme="dark"] .pill-bar{background:rgba(255,255,255,.06)}
.pill-thumb{width:118px;height:118px;border-radius:50%;overflow:hidden;border:2px solid rgba(255,255,255,.5)}
.pill-thumb>*,.pill-thumb svg,.pill-thumb img{width:100%;height:100%;object-fit:cover;margin:0;border-radius:0}
.pill-thumb .post-art{height:100%}
.pill-bar h2{margin:0;font:400 clamp(28px,3vw,42px)/1.05 Manrope,sans-serif;letter-spacing:-.01em;color:#fff}
.pill-bar dl{display:flex;gap:40px;margin:0}
.pill-bar dt{font:800 9.5px/1.4 Manrope,sans-serif;letter-spacing:.06em}
.pill-bar dd{margin:2px 0 0;font:500 12px 'IBM Plex Sans Thai',sans-serif;opacity:.8}
.circle-arrow{width:92px;height:92px;min-height:92px;background:transparent;border:1.5px solid rgba(255,255,255,.75);color:#fff;font-size:34px;font-weight:200}
.circle-arrow:hover{background:rgba(255,255,255,.15)}
.mist-home .section-head h2{font-family:'IBM Plex Sans Thai',sans-serif;font-weight:600;letter-spacing:-.02em}
.mist-home .help-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:40px}
.mist-home .help-grid article{padding:26px;border-radius:30px}
.mist-home .help-grid article>span{font:700 10px Manrope,sans-serif;letter-spacing:.12em;color:var(--ink3)}
.mist-home .help-grid h3{font-size:22px;margin:10px 0 6px}

/* ---------- Product & post cards ---------- */
.product-visual,.product-visual .product-art{background:radial-gradient(60% 70% at 50% 40%,rgba(255,255,255,.85),rgba(255,255,255,.25))}
:root[data-theme="dark"] .product-visual,:root[data-theme="dark"] .product-visual .product-art{background:radial-gradient(60% 70% at 50% 40%,rgba(255,255,255,.12),rgba(255,255,255,.02))}
.market-card,.post-card{position:relative}
.market-card .price{font-family:Manrope,sans-serif;font-weight:700;letter-spacing:-.03em}
.promo-badge{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font:800 10px/1.4 Manrope,'IBM Plex Sans Thai',sans-serif;letter-spacing:.04em}
.product-visual .promo-badge{left:10px;bottom:10px}
.post-card>.promo-badge{left:16px;top:16px}
.post-card>.promo-badge+.promo-badge{left:auto;right:16px}
.promo-badge.pin{background:#151a1b;color:#fff}
.promo-badge.pin::before{content:'●';font-size:7px;color:var(--accent2)}
.promo-badge.boost{background:var(--accent2);color:#fff}
.promo-badge.hidden-badge{background:rgba(255,255,255,.85);color:var(--bad)}
.admin-item .promo-badge{position:static}
.is-hidden{opacity:.66}
.post-card.is-pinned{border-color:rgba(255,255,255,.95);box-shadow:var(--glass-highlight),0 0 0 2px rgba(21,26,27,.6),var(--shadow2)}
.seller-line small{color:var(--ink3)}
.seller-trust{margin-left:auto;font-size:12px;font-weight:700;color:var(--ink2)}

/* ---------- Modals & login ---------- */
.modal{background:var(--glass-strong);border:1px solid var(--glass-border);border-radius:30px;box-shadow:var(--glass-highlight),var(--shadow);backdrop-filter:blur(30px) saturate(150%);-webkit-backdrop-filter:blur(30px) saturate(150%)}
.modal::backdrop{background:rgba(18,24,25,.32);backdrop-filter:blur(8px)}
#authModal{width:min(400px,calc(100vw - 24px));max-height:min(700px,calc(100dvh - 24px));border-radius:32px;overflow:visible;background:linear-gradient(165deg,rgba(255,255,255,.82),rgba(255,255,255,.55));border:1px solid rgba(255,255,255,.85);box-shadow:inset 0 1px 0 #fff,0 18px 0 -9px rgba(255,255,255,.42),0 34px 0 -18px rgba(255,255,255,.24),0 60px 90px -30px rgba(15,22,23,.6);transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .3s cubic-bezier(.2,.8,.2,1)}
:root[data-theme="dark"] #authModal{background:linear-gradient(165deg,rgba(40,48,49,.9),rgba(24,30,31,.82));border-color:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 18px 0 -9px rgba(255,255,255,.07),0 34px 0 -18px rgba(255,255,255,.04),0 60px 90px -30px rgba(0,0,0,.8)}
#authModal .modal-head{padding:22px 22px 6px;border:0;background:transparent;align-items:flex-start}
#authModal .modal-head>div::before{content:'ex2';display:grid;place-items:center;width:48px;height:48px;margin-bottom:14px;border-radius:16px;background:linear-gradient(150deg,#2b3335,#0f1314);color:#fff;font:800 13px Manrope,sans-serif;letter-spacing:-.02em;box-shadow:0 14px 22px -10px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.22)}
#authModal .modal-head h2{margin:0;font:700 23px/1.3 'IBM Plex Sans Thai',sans-serif;letter-spacing:-.02em}
#authModal .modal-head .muted{margin:4px 0 0;font-size:12.5px;color:var(--ink2)}
#authModal .close{width:38px;height:38px;min-height:38px;border-radius:50%;background:rgba(255,255,255,.55);border:1px solid var(--glass-border)}
#authModal .modal-body{padding:12px 22px 22px;overflow-y:auto}
#authModal .social-list{gap:8px}
#authModal .social-login{min-height:44px;border-radius:999px;background:rgba(255,255,255,.7);border:1px solid var(--glass-border);box-shadow:0 6px 14px -10px rgba(0,0,0,.35);font-size:13.5px;font-weight:600}
:root[data-theme="dark"] #authModal .social-login{background:rgba(255,255,255,.07)}
#authModal .social-mark{border-radius:50%;border:0;background:#151a1b;color:#fff;font-size:13px;width:24px;height:24px}
#authModal .auth-divider{margin:16px 0;font-size:11px;letter-spacing:.06em;color:var(--ink3)}
#liveAuthForm{gap:11px}
#liveAuthForm label{font-size:12px;font-weight:600;color:var(--ink2);gap:6px}
#liveAuthForm input{min-height:44px;font-size:14px;border-radius:14px;background:rgba(255,255,255,.72)}
:root[data-theme="dark"] #liveAuthForm input{background:rgba(0,0,0,.25)}
#authModal .password-input button{border-radius:999px;font-size:11px;font-weight:700}
#authModal .auth-submit{min-height:48px;margin-top:4px;border-radius:16px;font-size:14.5px;letter-spacing:.01em}
#authModal .auth-links{margin-top:12px;gap:8px;flex-wrap:wrap}
#authModal .auth-links button{min-height:32px;font-size:12px;font-weight:600;color:var(--ink2)}
#authModal .auth-privacy{margin-top:10px;font-size:11px;line-height:1.6;color:var(--ink3)}
#authModal .notice{font-size:12px;margin-bottom:12px}
@media(prefers-reduced-motion:reduce){#authModal{transform:none;transition:none}}

/* ---------- Profile ---------- */
.profile-topline{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.profile-topline .row{gap:8px;flex-wrap:wrap}
.profile-topline:has(>.route-kicker){justify-content:space-between}
.profile-hero{position:relative;margin-bottom:22px}
.profile-cover{position:relative;height:clamp(190px,24vw,300px);border-radius:34px;overflow:hidden;background:radial-gradient(90% 120% at 85% 0%,color-mix(in srgb,var(--pa) 25%,white),transparent 60%),linear-gradient(150deg,color-mix(in srgb,var(--pa) 75%,white),var(--pa) 55%,color-mix(in srgb,var(--pa) 65%,black));box-shadow:var(--shadow2)}
.profile-hero .profile-cover{margin:0;padding:0;display:block}
.profile-hero .profile-cover::after{content:'';position:absolute;inset:0;width:auto;height:auto;border:0;border-radius:0;box-shadow:none;background:linear-gradient(180deg,transparent 45%,color-mix(in srgb,var(--pa) 55%,transparent));pointer-events:none}
.profile-cover-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.profile-cover .profile-cover-tag{position:absolute;font-size:10px;z-index:1;left:26px;top:22px;font:800 10px Manrope,sans-serif;letter-spacing:.14em;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.3)}
.profile-card{position:relative;z-index:2;display:grid;grid-template-columns:auto 1fr auto;gap:8px 26px;align-items:start;margin:-86px 22px 0;padding:22px 26px;border-radius:30px;background:var(--glass-strong);border:1px solid var(--glass-border);box-shadow:var(--glass-highlight),var(--shadow);backdrop-filter:blur(26px) saturate(150%);-webkit-backdrop-filter:blur(26px) saturate(150%)}
.profile-card::before{content:'';position:absolute;left:30px;right:30px;top:-1px;height:3px;border-radius:0 0 4px 4px;background:var(--pa)}
.profile-avatar-wrap{position:relative;z-index:1;margin-top:-64px}
.profile-avatar-wrap .avatar,.profile-avatar-wrap .live-avatar-image{width:112px!important;height:112px!important;min-width:112px;border-radius:50%!important;border:4px solid #fff;box-shadow:0 0 0 3px var(--pa),0 16px 30px -12px rgba(0,0,0,.5);object-fit:cover;font-size:40px;display:grid;place-items:center;background:color-mix(in srgb,var(--pa) 18%,white);color:var(--pa)}
.profile-ident h2{margin:2px 0 8px;font:700 30px/1.2 'IBM Plex Sans Thai',sans-serif;letter-spacing:-.02em}
.profile-facts{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.profile-facts span{padding:4px 12px;border-radius:999px;background:color-mix(in srgb,var(--pa) 12%,rgba(255,255,255,.6));border:1px solid color-mix(in srgb,var(--pa) 22%,transparent);font-size:12.5px;font-weight:600;color:var(--ink)}
:root[data-theme="dark"] .profile-facts span{background:color-mix(in srgb,var(--pa) 30%,rgba(0,0,0,.2))}
.profile-bio{margin:0;color:var(--ink2);font-size:14px;line-height:1.75;max-width:640px}
.profile-score{display:grid;justify-items:end;text-align:right;gap:2px;min-width:130px}
.profile-score b{font:300 64px/.9 var(--display);color:color-mix(in srgb,var(--pa) 80%,var(--ink));letter-spacing:-.02em}
.profile-score small{font-size:11.5px;color:var(--ink3);line-height:1.5}
.score-stars{color:#c9932e;letter-spacing:2px;font-size:15px}
.profile-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.profile-screen .primary{background:color-mix(in srgb,var(--pa) 82%,black);border-color:color-mix(in srgb,var(--pa) 82%,black);color:#fff}
.profile-screen .stat{font:300 44px/1 var(--display);color:color-mix(in srgb,var(--pa) 80%,var(--ink))}
.profile-screen .tabs button[aria-selected="true"]{background:color-mix(in srgb,var(--pa) 85%,black);border-color:transparent;color:#fff}
.tab-count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--accent2);color:#fff;font-size:11px;font-weight:800}
.trust-banner{display:grid;gap:2px;margin:14px 22px 0;padding:14px 18px;border-radius:20px;border:1px solid;font-size:13px}
.trust-banner b{font-size:14px}
.trust-banner.scam{background:rgba(176,55,47,.14);border-color:rgba(176,55,47,.45);color:var(--bad)}
.trust-banner.warning{background:rgba(224,148,58,.14);border-color:rgba(176,110,40,.4);color:var(--warn)}
.modal-body>.trust-banner{margin:0 0 14px}
.review-list,.trade-list,.admin-list{display:grid;gap:12px}
.review-card{display:grid;gap:8px;padding:18px 20px}
.review-card p{margin:0}
.trade-intro{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px;flex-wrap:wrap}
.trade-intro h3{margin:0 0 4px}
.trade-item{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;padding:18px 22px}
.trade-item h3{margin:4px 0}
.trade-item p{margin:0}
.trade-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;align-items:center}
.chat-tools{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.chat-tools button{min-height:36px;padding:6px 13px;font-size:12px}

/* Profile editor */
.form-lead{margin:0 0 14px;color:var(--ink2);font-size:13.5px;line-height:1.7}
.profile-editor-preview{position:relative;height:74px;margin-bottom:16px;border-radius:20px;overflow:hidden;background:linear-gradient(150deg,color-mix(in srgb,var(--pa) 70%,white),var(--pa) 60%,color-mix(in srgb,var(--pa) 60%,black));transition:background .3s}
.profile-editor-preview span{position:absolute;left:18px;bottom:-18px;width:58px;height:58px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px var(--pa)}
.profile-editor-preview i{position:absolute;right:18px;top:18px;width:90px;height:8px;border-radius:8px;background:rgba(255,255,255,.6)}
label.check{display:flex!important;flex-direction:row!important;align-items:center;gap:10px;font-size:13px;color:var(--ink)}
label.check input{width:20px;height:20px;min-height:0;margin:0;accent-color:var(--ink)}
.swatches{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 0;padding:14px;border:1px solid var(--glass-border);border-radius:18px;background:rgba(255,255,255,.3)}
.swatches legend{padding:0 6px;font-size:12px;font-weight:700;color:var(--ink2)}
.swatch{display:grid!important;justify-items:center;gap:4px;font-size:10.5px;color:var(--ink2);cursor:pointer}
.swatch input[type=radio]{appearance:none;-webkit-appearance:none;width:34px;height:34px;min-height:0;margin:0;padding:0;border-radius:50%;background:var(--sw);border:3px solid #fff;box-shadow:0 0 0 1px var(--line);cursor:pointer}
.swatch input[type=radio]:checked{box-shadow:0 0 0 3px var(--ink)}
.swatch input[type=radio]:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.swatch.custom input[type=radio]{background:conic-gradient(#e0743a,#c9932e,#3e5a3a,#2f4a5f,#5b3d57,#e0743a)}
.swatch.custom input[type=color]{width:34px;height:22px;min-height:0;padding:0;border:0;border-radius:6px;background:none;box-shadow:none}
.star-input{border:0;margin:0 0 12px;padding:0}
.star-input legend{font-size:12px;font-weight:700;color:var(--ink2);margin-bottom:6px}
.stars-row{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px}
.stars-row input{position:absolute;opacity:0;width:1px;height:1px}
.stars-row label{font-size:38px;line-height:1;color:rgba(20,26,27,.18);cursor:pointer;transition:color .15s,transform .15s}
:root[data-theme="dark"] .stars-row label{color:rgba(255,255,255,.2)}
.stars-row input:checked~label,.stars-row label:hover,.stars-row label:hover~label{color:#d39a2c}
.stars-row label:hover{transform:scale(1.08)}
.stars-row input:focus-visible+label{outline:2px solid var(--ink);outline-offset:2px;border-radius:6px}

/* ---------- Admin ---------- */
.admin-tabs{flex-wrap:wrap}
.admin-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:18px 22px}
.admin-item h3{margin:8px 0 4px;font-size:16px}
.admin-item p{margin:0}
.admin-item-main .row{gap:6px;flex-wrap:wrap;align-items:center}
.admin-item-actions,.admin-actions{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.admin-item-actions button,.admin-actions button{min-height:36px;padding:6px 13px;font-size:12px}
.admin-item.is-done{opacity:.6}
.admin-strip{display:grid;gap:10px;margin-top:18px;padding:16px;border-radius:20px;border:1px dashed var(--line);background:rgba(255,255,255,.3)}
.admin-strip .admin-actions{justify-content:flex-start}
.pill.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,transparent)}
.feature-note{font-size:13px}

/* ---------- Tablet ---------- */
@media(max-width:1100px){
 .mist-home .scene-card{width:min(360px,40vw)}
 .board-head{grid-template-columns:auto 1fr auto}
 .board-num{display:none}
 .board-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
 .board-meta>div:nth-child(3){display:none}
 .pill-bar{grid-template-columns:auto 1fr auto;gap:22px}
 .pill-bar dl{display:none}
}

/* ---------- Mobile ---------- */
@media(max-width:800px){
 .mist-home .mega-top{top:58px;left:4%;font-size:29vw}
 .mist-home .mega-mid{top:35%;font-size:34vw}
 .mist-home #pcModel{inset:40px 0 auto 0;height:62%}
 .mist-home .scene-rail{left:10px;right:10px;top:10px;transform:none;width:auto;flex-direction:row;gap:4px;padding:5px;border-radius:22px;overflow-x:auto;scrollbar-width:none}
 .mist-home .scene-rail::-webkit-scrollbar{display:none}
 .mist-home .scene-rail .rail-arrow{display:none}
 .mist-home .scene-rail button{flex:1 0 auto;height:auto;min-height:38px;display:flex;gap:5px;padding:6px 10px;border-radius:16px}
 .mist-home .scene-rail button b{font-size:15px}
 .mist-home .scene-rail button span{font-size:10.5px;white-space:nowrap}
 .mist-home .scene-card{left:10px;right:10px;bottom:104px;width:auto;padding:16px 16px 14px;border-radius:24px}
 .mist-home .scene-chapter{font-size:9px;margin-bottom:6px}
 .mist-home .scene-card h1{font-size:23px;margin-bottom:6px}
 .mist-home .scene-card h1 br{display:none}
 .mist-home .scene-description{font-size:12.5px;line-height:1.6;margin-bottom:10px;max-height:3.2em;min-height:0;padding:0;overflow:hidden}
 .mist-home #sceneShop{min-height:46px;font-size:14px;border-radius:16px}
 .mist-home #sceneShop span{width:30px;height:30px}
 .mist-home .quick-dock,.mist-home .progress-chip,.mist-home .stage-foot,.mist-home .model-tag{display:none}
 .mist-home .model-buttons{top:auto;bottom:calc(104px + 196px);right:14px;padding:5px}
 .mist-home .model-buttons button{width:36px;height:36px;min-height:36px}
 .mist-home .home-content{padding-top:34px}
 .board{padding:16px;border-radius:28px}
 .board-head{grid-template-columns:1fr auto;gap:14px}
 .board-meta{grid-column:1/-1;grid-row:2;gap:14px}
 .board-grid{grid-template-columns:1fr;gap:14px;margin-top:16px}
 .board-tile{padding:18px;border-radius:24px}
 .board-tile h2{font-size:26px}
 .board-feature{min-height:330px;border-radius:24px}
 .board-feature::before{display:none}
 .feature-label{left:18px;top:16px;max-width:85%}
 .feature-label b{font-size:20px}
 .price-chip{left:16px;top:auto;bottom:84px}
 .feature-cta{right:14px;bottom:14px}
 .pill-bar{grid-template-columns:auto 1fr auto;gap:12px;padding:8px;border-radius:30px}
 .pill-thumb{width:70px;height:70px}
 .pill-bar h2{font-size:20px}
 .circle-arrow{width:56px;height:56px;min-height:56px;font-size:22px}
 .mist-home .help-grid{grid-template-columns:1fr}
 .profile-cover{border-radius:26px;height:170px}
 .profile-card{grid-template-columns:1fr auto;margin:-60px 10px 0;padding:18px;gap:6px 14px;border-radius:24px}
 .profile-avatar-wrap{grid-column:1/-1;margin-top:-62px}
 .profile-avatar-wrap .avatar,.profile-avatar-wrap .live-avatar-image{width:88px!important;height:88px!important;min-width:88px}
 .profile-ident{grid-column:1/2}
 .profile-ident h2{font-size:24px}
 .profile-score{grid-column:2/3;grid-row:2;min-width:0}
 .profile-score b{font-size:46px}
 .trust-banner{margin:12px 10px 0}
 .profile-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
 .profile-tabs button{flex:0 0 auto}
 .trade-item,.admin-item{grid-template-columns:1fr}
 .trade-actions,.admin-item-actions{justify-content:flex-start}
 #authModal{border-radius:28px}
 #authModal .modal-head{padding:18px 18px 4px}
 #authModal .modal-head>div::before{width:42px;height:42px;margin-bottom:10px;border-radius:14px}
 #authModal .modal-head h2{font-size:21px}
 #authModal .modal-body{padding:10px 18px 18px}
}
@media(max-width:800px) and (max-height:700px){
 .mist-home .scene-description{display:none}
}
.modal-body input:not([type=checkbox]):not([type=radio]):not([type=color]),.modal-body select,.modal-body textarea{background:rgba(255,255,255,.72);border:1px solid var(--glass-border);border-radius:14px}
:root[data-theme="dark"] .modal-body input:not([type=checkbox]):not([type=radio]):not([type=color]),:root[data-theme="dark"] .modal-body select,:root[data-theme="dark"] .modal-body textarea{background:rgba(0,0,0,.25)}
.admin-item .pill,.admin-item .tiny,.trade-item .overline{font-size:11.5px}
.modal-body .admin-actions{justify-content:flex-start}

/* Wide screens: full-bleed stage, panels aligned to the same centered column as the header */
.mist-home.home-screen{max-width:none;width:100%;margin-inline:0}
.mist-home .explore-stage{--edge:max(3.4%,calc((100% - 1360px)/2))}
.mist-home .scene-rail,.mist-home .stage-foot,.mist-home .mega-top{left:var(--edge)}
.mist-home .scene-card,.mist-home .quick-dock,.mist-home .model-buttons,.mist-home .progress-chip{right:var(--edge)}
.mist-home #pcModel{left:var(--edge);right:auto;width:calc(100% - 2 * var(--edge))}
.mist-home .home-content{width:min(1320px,calc(100% - 96px));max-width:none;margin-inline:auto}
@media(max-width:1100px){.mist-home .home-content{width:calc(100% - 56px)}}
@media(max-width:800px){
 .mist-home .explore-stage{--edge:10px}
 .mist-home #pcModel{left:0;width:100%}
 .mist-home .mega-top{left:4%}
 .mist-home .model-buttons{right:14px}
 .mist-home .home-content{width:calc(100% - 24px)}
}

/* ---------- Multi-photo picker ---------- */
.photo-picker{display:grid;gap:10px;padding:14px;border:1px dashed color-mix(in srgb,var(--ink) 22%,transparent);border-radius:20px;background:rgba(255,255,255,.28);transition:background .2s,border-color .2s}
.photo-picker.is-dragging{background:rgba(255,255,255,.6);border-color:var(--ink)}
.photo-picker-head{display:flex;justify-content:space-between;align-items:baseline;font-size:13px}
.photo-picker-head small{font-weight:700;color:var(--ink2)}
.photo-picker .tiny{margin:0;color:var(--ink3);font-size:11.5px}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.photo-tile{position:relative;margin:0;aspect-ratio:1;border-radius:14px;overflow:hidden;background:rgba(0,0,0,.06);box-shadow:0 6px 14px -10px rgba(0,0,0,.5)}
.photo-tile img{width:100%;height:100%;object-fit:cover;display:block}
.photo-cover{position:absolute;left:6px;top:6px;z-index:1;padding:2px 8px;border-radius:999px;background:#151a1b;color:#fff;font-size:10.5px;font-weight:800}
.photo-remove{position:absolute;right:5px;top:5px;z-index:1;width:26px;height:26px;min-height:26px;padding:0;border-radius:50%;background:rgba(20,26,27,.72);color:#fff;border:0;font-size:16px;line-height:1}
.photo-front{position:absolute;left:5px;right:5px;bottom:5px;z-index:1;min-height:26px;padding:2px 6px;border-radius:999px;background:rgba(255,255,255,.85);border:0;color:#151a1b;font-size:10.5px;font-weight:700;opacity:0;transition:opacity .2s}
.photo-tile:hover .photo-front,.photo-front:focus-visible{opacity:1}
@media(hover:none){.photo-front{opacity:1}}
.photo-add{aspect-ratio:1;min-height:0;display:grid;place-content:center;gap:2px;border-radius:14px;border:1.5px dashed color-mix(in srgb,var(--ink) 30%,transparent);background:rgba(255,255,255,.45);color:var(--ink)}
.photo-add span{font-size:28px;font-weight:300;line-height:1}
.photo-add small{font-size:11.5px;font-weight:700}
:root[data-theme="dark"] .photo-picker,:root[data-theme="dark"] .photo-add{background:rgba(255,255,255,.05)}

/* ---------- Detail gallery ---------- */
.modal-body .listing-gallery{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;border-radius:20px;scrollbar-width:none;background:rgba(0,0,0,.05)}
.modal-body .listing-gallery::-webkit-scrollbar{display:none}
.modal-body .listing-gallery>img{flex:0 0 100%;width:100%;max-height:min(62vh,520px);object-fit:contain;scroll-snap-align:center;border-radius:0;margin:0}
.gallery-bar{display:flex;align-items:center;justify-content:center;gap:14px;margin:10px 0 4px;font-size:12.5px;font-weight:700;color:var(--ink2)}
.gallery-nav{width:36px;height:36px;min-height:36px;padding:0;border-radius:50%;background:rgba(255,255,255,.7);border:1px solid var(--glass-border);font-size:20px;line-height:1}

/* ---------- Photo count & views on cards ---------- */
.photo-count{position:absolute;z-index:3;right:10px;bottom:10px;padding:3px 9px;border-radius:999px;background:rgba(20,26,27,.6);color:#fff;font:700 10.5px/1.4 Manrope,'IBM Plex Sans Thai',sans-serif;backdrop-filter:blur(8px)}
.post-card>.photo-count{top:16px;right:16px;bottom:auto}
.view-line{margin-top:6px;font-size:12px;color:var(--ink3)}
.view-line::before,.view-count::before{content:'◉ ';font-size:9px;vertical-align:1px}
.card-member-link{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.view-count{font-size:12px;color:var(--ink3)}
#modalSub [data-view-count]{white-space:nowrap}
.filters input,.filters select{background:rgba(255,255,255,.62)}
:root[data-theme="dark"] .filters input,:root[data-theme="dark"] .filters select{background:rgba(0,0,0,.22)}

/* ---------- Sold listings & owner tools ---------- */
.sold-ribbon{position:absolute;z-index:3;left:10px;top:10px;padding:4px 11px;border-radius:999px;background:#151a1b;color:#fff;font:800 10.5px/1.4 Manrope,'IBM Plex Sans Thai',sans-serif;letter-spacing:.02em}
.market-card.is-sold .product-visual img,.market-card.is-sold .product-visual .product-art{filter:grayscale(.85) contrast(.95);opacity:.8}
.market-card.is-sold .condition-label{display:none}
.product-chat.owner-tool,.post-delete{color:var(--bad)!important;border-color:color-mix(in srgb,var(--bad) 35%,transparent)!important;font-size:12px;font-weight:700}
.post-delete{margin-left:auto}
.sold-head{margin-top:44px}
.sold-list{display:grid;gap:10px}
.sold-row{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:16px;align-items:center;padding:10px 18px 10px 10px;border-radius:22px;background:var(--glass-strong);border:1px solid var(--glass-border);box-shadow:var(--glass-highlight),var(--shadow2);cursor:pointer;transition:transform .2s,box-shadow .2s}
.sold-row:hover{transform:translateY(-2px);box-shadow:var(--glass-highlight),var(--shadow)}
.sold-row:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.sold-thumb{width:72px;height:72px;border-radius:16px;overflow:hidden;background:rgba(255,255,255,.5);display:grid;place-items:center}
.sold-thumb img{width:100%;height:100%;object-fit:cover;filter:grayscale(.6)}
.sold-thumb .product-art{width:100%;height:100%;margin:0;background:none}
.sold-thumb .product-art svg{width:92%;height:auto}
.sold-thumb .product-art small{display:none}
.sold-main{display:grid;gap:2px;min-width:0}
.sold-main small{font:800 10px/1.4 Manrope,'IBM Plex Sans Thai',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.sold-main b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sold-main em{font-style:normal;font-size:12px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sold-price{display:grid;justify-items:end;text-align:right}
.sold-price small{font-size:10.5px;font-weight:700;color:var(--ink3)}
.sold-price b{font:700 20px/1.2 Manrope,sans-serif;letter-spacing:-.02em}
.sold-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;padding:12px 18px;border-radius:18px;background:#151a1b;color:#fff}
.sold-banner span{font-size:13px;font-weight:700}
.sold-banner b{font:700 20px Manrope,sans-serif}
@media(max-width:560px){.sold-row{grid-template-columns:56px minmax(0,1fr);gap:12px}.sold-thumb{width:56px;height:56px}.sold-price{grid-column:2;justify-items:start;text-align:left;display:flex;gap:8px;align-items:baseline}.sold-price b{font-size:17px}}

/* ---------- Form dialogs (ลงประกาศ / โพสต์ / แก้ไข ...) share the login card look ---------- */
#modal[data-form]{width:min(480px,calc(100vw - 24px));max-height:min(820px,calc(100dvh - 24px));border-radius:32px;overflow:visible;background:linear-gradient(165deg,rgba(255,255,255,.84),rgba(255,255,255,.58));border:1px solid rgba(255,255,255,.85);box-shadow:inset 0 1px 0 #fff,0 18px 0 -9px rgba(255,255,255,.42),0 34px 0 -18px rgba(255,255,255,.24),0 60px 90px -30px rgba(15,22,23,.6);transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .3s cubic-bezier(.2,.8,.2,1)}
#modal[data-form="listing"],#modal[data-form="post"],#modal[data-form="question"],#modal[data-form="profile"],#modal[data-form="trade"]{width:min(580px,calc(100vw - 24px))}
:root[data-theme="dark"] #modal[data-form]{background:linear-gradient(165deg,rgba(40,48,49,.92),rgba(24,30,31,.85));border-color:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 18px 0 -9px rgba(255,255,255,.07),0 34px 0 -18px rgba(255,255,255,.04),0 60px 90px -30px rgba(0,0,0,.8)}
#modal[data-form] .modal-head{padding:22px 24px 8px;border:0;background:transparent;align-items:flex-start}
#modal[data-form] .modal-head>div::before{content:'ex2';display:grid;place-items:center;width:48px;height:48px;margin-bottom:14px;border-radius:16px;background:linear-gradient(150deg,#2b3335,#0f1314);color:#fff;font:800 13px Manrope,sans-serif;letter-spacing:-.02em;box-shadow:0 14px 22px -10px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.22)}
#modal[data-form="listing"] .modal-head>div::before{content:'+';font:300 26px/1 Manrope,sans-serif}
#modal[data-form="post"] .modal-head>div::before{content:'✎';font-size:20px}
#modal[data-form="review"] .modal-head>div::before{content:'★';font-size:20px;color:#e7b54a}
#modal[data-form="report"] .modal-head>div::before,#modal[data-form="ban"] .modal-head>div::before{content:'!';font:800 22px Manrope,sans-serif;background:linear-gradient(150deg,#b0372f,#6e1d18)}
#modal[data-form="confirm"] .modal-head>div::before{content:'?';font:800 22px Manrope,sans-serif}
#modal[data-form] .modal-head h2{margin:0;font:700 23px/1.3 'IBM Plex Sans Thai',sans-serif;letter-spacing:-.02em}
#modal[data-form] .modal-head .muted:empty{display:none}
#modal[data-form] .close{width:38px;height:38px;min-height:38px;border-radius:50%;background:rgba(255,255,255,.55);border:1px solid var(--glass-border)}
#modal[data-form] .modal-body{padding:10px 24px 8px;overflow-y:auto}
#modal[data-form] #liveForm{display:grid;gap:12px}
#modal[data-form] .form-grid{gap:12px}
#modal[data-form] label{font-size:12px;font-weight:600;color:var(--ink2);gap:6px}
#modal[data-form] .modal-body input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),#modal[data-form] .modal-body select{min-height:44px;font-size:14px;border-radius:14px;background:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.9);box-shadow:inset 0 1px 2px rgba(20,30,30,.08)}
#modal[data-form] .modal-body textarea{min-height:110px;font-size:14px;border-radius:16px;background:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.9)}
:root[data-theme="dark"] #modal[data-form] .modal-body input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),:root[data-theme="dark"] #modal[data-form] .modal-body select,:root[data-theme="dark"] #modal[data-form] .modal-body textarea{background:rgba(0,0,0,.25);border-color:rgba(255,255,255,.12)}
#modal[data-form] .location-field,#modal[data-form] .photo-picker,#modal[data-form] .swatches{background:rgba(255,255,255,.42);border-radius:20px}
#modal[data-form] .modal-foot{display:grid;grid-template-columns:1fr;gap:6px;padding:12px 24px 22px;border:0;background:transparent}
#modal[data-form] #liveSubmit{order:-1;width:100%;min-height:50px;border-radius:16px;font-size:15px;letter-spacing:.01em}
#modal[data-form] #liveCancel{min-height:36px;background:transparent;border:0;color:var(--ink2);font-size:13px;font-weight:600;box-shadow:none}
#modal[data-form] #liveCancel:hover{color:var(--ink)}
#modal[data-form="confirm"] #liveSubmit,#modal[data-form="ban"] #liveSubmit{background:var(--bad);border-color:var(--bad);color:#fff}
@media(max-width:800px){
 #modal[data-form]{border-radius:28px}
 #modal[data-form] .modal-head{padding:18px 18px 4px}
 #modal[data-form] .modal-head>div::before{width:42px;height:42px;margin-bottom:10px;border-radius:14px}
 #modal[data-form] .modal-head h2{font-size:21px}
 #modal[data-form] .modal-body{padding:8px 18px 6px}
 #modal[data-form] .modal-foot{padding:10px 18px 18px}
 #modal[data-form] .form-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){#modal[data-form]{transform:none;transition:none}}