/* When In Guam — styles. Palette: ocean blue, sunset coral, sand, white. */
:root{
  /* Palette sampled from the When In Guam logo */
  --red:#C74C40; --red-d:#A83B31; --red-l:#FBEAE8;
  --green:#6BA571; --green-d:#3C7244; --green-l:#E8F3EA;
  --blue:#65A0C8; --blue-d:#336E95; --blue-l:#E6F1F8;
  --brown:#8E5533; --brown-l:#F3EBE4;
  --mist:#F3F5F4; --line2:#DDE3E0; --ink:#1E2A30; --muted:#5E6A71;
  --white:#fff; --line:#E5EAE7; --radius:16px;
  --shadow:0 1px 2px rgba(30,42,48,.05),0 4px 14px rgba(30,42,48,.06);
  /* Theme tokens (light). Dark values: [data-theme="dark"] block at the end of this file. */
  --bg:#F3F5F4; --surface:#fff; --surface-2:var(--surface-2); --elev:#fff; --field:#fff;
  --text-2:#4B5563; --text-3:#3A474E; --tab-ico:#6b7280;
  --red-fg:var(--red); --red-h:#A83B31; --green-dbg:#3C7244; --blue-dbg:#336E95; --brown-fg:var(--brown);
  --blue-ink:#2C5F82; --green-ink:#2F5A35; --ink-fixed:#1E2A30;
  --topbar:rgba(255,255,255,.92); --float:rgba(255,255,255,.92); --bubble:#EEF2F0; --skeleton:#E8ECEE;
  --switch-off:#CBD3D7; --seen-ring:#C9D1CD; --inv-bg:var(--ink); --inv-fg:#fff; --toast-bg:#1E2A30;
  --shadow-pop:0 12px 40px rgba(31,42,55,.18); --shadow-hover:0 10px 28px rgba(30,42,48,.12); --backdrop:rgba(20,30,36,.5);
  --gm-sea:#E6F1F8; --gm-land:#E8F3EA; --gm-land-v:#D6EBD8; --gm-label:#4f6b55; --gm-wave:#65A0C8;
  color-scheme:light;
  --font:"Inter",system-ui,-apple-system,"Segoe UI","Hiragino Sans","Noto Sans CJK JP","Noto Sans JP","Apple SD Gothic Neo","Noto Sans CJK KR","Malgun Gothic","PingFang TC","Noto Sans CJK TC","Microsoft JhengHei",sans-serif; --display:"Poppins",var(--font);
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font);color:var(--ink);background:var(--bg);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
small{display:block;color:var(--muted);font-size:12.5px}
.muted{color:var(--muted)}
.ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Top nav ---------- */
.topnav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:20px;padding:10px 24px;background:var(--topbar);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);height:64px}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo{height:52px;width:auto;display:block}
.search{flex:1;max-width:460px;display:flex;align-items:center;gap:8px;background:var(--mist);border:1px solid var(--line);border-radius:999px;padding:0 14px;color:var(--muted)}
.search input{border:0;background:none;outline:none;width:100%;padding:10px 0}
.search:focus-within{border-color:var(--blue);background:var(--field);box-shadow:0 0 0 3px var(--blue-l)}
.nav-icons{margin-left:auto;display:flex;align-items:center;gap:6px}
.nav-btn{position:relative;display:flex;align-items:center;gap:6px;padding:9px 12px;border-radius:12px;color:var(--text-2);transition:.15s}
.nav-btn:hover{background:var(--mist)}
.nav-btn.active{color:var(--red-fg);background:var(--red-l)}
.nav-label{font-size:13px;font-weight:600}
.avatar-btn{padding:4px}
.badge{position:absolute;top:2px;left:24px;background:var(--red);color:#fff;font-size:10.5px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;border:2px solid var(--surface)}
.dropdown{position:absolute;right:24px;top:62px;width:340px;background:var(--elev);border-radius:var(--radius);box-shadow:var(--shadow-pop);padding:12px;border:1px solid var(--line)}
.dropdown h4{margin:4px 8px 8px;font-family:var(--display);font-size:17px}
.dropdown .note{align-items:flex-start}
.dropdown .note span{font-size:14px}

/* ---------- Layout ---------- */
.layout{display:grid;grid-template-columns:280px minmax(0,640px) 320px;gap:24px;justify-content:center;padding:24px}
.sidebar{position:sticky;top:88px;align-self:start;max-height:calc(100vh - 100px);max-height:calc(100dvh - 100px);overflow:auto;display:flex;flex-direction:column;gap:14px;scrollbar-width:thin}
.main{display:flex;flex-direction:column;gap:16px;outline:none;min-width:0}
.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--line)}
.side-section{padding:14px 16px}
.side-section h3{margin:0 0 10px;font-family:var(--display);font-size:15px;font-weight:600;display:flex;justify-content:space-between;align-items:center}
.see-all{font-family:var(--font);font-size:13px;color:var(--blue-d);font-weight:600}
.side-profile{display:flex;align-items:center;gap:12px;padding:14px 16px}
.side-profile:hover{background:var(--mist)}
.fine{font-size:12px;color:var(--muted);text-align:center;margin:4px}

.avatar{display:inline-grid;place-items:center;border-radius:50%;color:#fff;font-weight:700;flex-shrink:0;letter-spacing:.5px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}

.village-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.chip-btn{padding:5px 10px;background:var(--mist);border-radius:999px;font-size:13px;font-weight:500;transition:.15s}
.chip-btn:hover{background:var(--green-l);color:var(--green-d)}
.chip-btn.active{background:var(--green-dbg);color:#fff}
.village-list.big .chip-btn{padding:9px 14px;font-size:14.5px}
.link-list,.trend,.suggest,.event-mini{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.row-btn{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:7px 8px;border-radius:10px;font-weight:500;font-size:14px}
.row-btn:hover{background:var(--mist)}
.sq{width:34px;height:34px;border-radius:10px;background:var(--blue-l);display:grid;place-items:center;flex-shrink:0}
.rank{width:26px;height:26px;border-radius:8px;background:var(--blue-l);color:var(--blue-d);font-weight:700;display:grid;place-items:center;font-size:13px;flex-shrink:0}
.event-mini li{display:flex;gap:12px;align-items:center;padding:7px 0;border-bottom:1px dashed var(--line);font-size:14px}
.event-mini li:last-child{border-bottom:0}
.datebox{width:46px;flex-shrink:0;text-align:center;border-radius:10px;overflow:hidden;background:var(--surface);border:1px solid var(--line)}
.datebox span{display:block;background:var(--red);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:1px;padding:2px 0}
.datebox b{display:block;font-family:var(--display);font-size:18px;padding:2px 0}
.datebox.big{width:58px}.datebox.big b{font-size:24px}
.suggest li{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:14px}
.suggest li div{flex:1;min-width:0}
.suggest strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- Buttons ---------- */
.btn{background:var(--red);color:#fff;font-weight:600;padding:9px 18px;border-radius:999px;transition:.15s;white-space:nowrap}
.btn:hover{background:var(--red-h)}
.btn.sm{padding:6px 12px;font-size:13px}
.btn.ghost{background:var(--blue-l);color:var(--blue-d)}
.btn.light{background:#fff;color:var(--red-h)}
.link{color:var(--muted);font-size:13.5px}
.link:hover{text-decoration:underline}
.icon-btn{width:34px;height:34px;border-radius:50%;font-size:20px;color:var(--muted)}
.icon-btn:hover{background:var(--mist)}

/* ---------- Hero & composer ---------- */
.hero{position:relative;display:flex;justify-content:space-between;align-items:center;padding:20px 24px 28px;background:linear-gradient(110deg,var(--surface) 35%,var(--blue-l) 100%);color:var(--ink);overflow:hidden}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 16' preserveAspectRatio='none'%3E%3Cpath d='M0 8 Q50 0 100 8 T200 8 T300 8 T400 8 V16 H0Z' fill='%2365A0C8' opacity='.35'/%3E%3Cpath d='M0 12 Q50 6 100 12 T200 12 T300 12 T400 12 V16 H0Z' fill='%236BA571' opacity='.45'/%3E%3C/svg%3E") bottom/100% 100% no-repeat}
.hero::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--red)}
.hero h1{margin:0;font-family:var(--display);font-size:24px}
.hero p{margin:2px 0 0;color:var(--muted)}
.hero-wave{font-size:44px}
.composer{padding:14px 16px}
.composer-row{display:flex;gap:12px}
.composer textarea{flex:1;resize:vertical;border:1px solid var(--line);background:var(--mist);border-radius:14px;padding:11px 14px;outline:none;min-height:48px}
.composer textarea:focus{background:var(--field);border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-l)}
.composer-tools{display:flex;align-items:center;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);flex-wrap:wrap}
.composer-tools select{border:1px solid var(--line);border-radius:999px;padding:6px 10px;background:var(--field);font-size:13px}
.tool{padding:6px 10px;border-radius:999px;font-size:13px;font-weight:500;color:var(--text-2)}
.tool:hover{background:var(--mist)}
.composer-tools .btn{margin-left:auto}
.filter-bar{padding:10px 16px;display:flex;align-items:center;gap:8px;font-size:14px}
.filter-bar .btn{margin-left:auto}
.empty{padding:32px;text-align:center;color:var(--muted)}

/* ---------- Posts ---------- */
#feed{display:flex;flex-direction:column;gap:16px}
.post{padding:16px 16px 6px}
.post.new{animation:slideIn .4s ease}
@keyframes slideIn{from{opacity:0;transform:translateY(-8px)}}
.post-head{display:flex;align-items:center;gap:12px}
.post-head div{flex:1}
.post-head strong{font-size:15px}
.post-text{margin:12px 2px;white-space:normal;overflow-wrap:anywhere}
.hashtag{color:var(--blue-d);font-weight:600;cursor:pointer}
.hashtag:hover{text-decoration:underline}
.banner{margin:4px -16px 10px;padding:28px 24px;color:#fff;display:flex;align-items:center;gap:16px;min-height:150px}
.banner b{font-family:var(--display);font-size:22px;display:block;text-shadow:0 1px 8px rgba(0,0,0,.15)}
.banner small{color:rgba(255,255,255,.92);font-size:14px}
.b-emoji{font-size:56px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.15))}
.post-stats{display:flex;justify-content:space-between;color:var(--muted);font-size:13.5px;padding:4px 2px 8px;border-bottom:1px solid var(--line)}
.post-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px 0}
.act{padding:9px;border-radius:10px;font-weight:600;color:var(--text-2);font-size:14px;transition:.15s}
.act:hover{background:var(--mist)}
.act.liked{color:var(--red-d)}
.act.pop{animation:pop .35s ease}
@keyframes pop{50%{transform:scale(1.12)}}
.comments{border-top:1px solid var(--line);padding:10px 0 8px;display:flex;flex-direction:column;gap:8px}
.comments.collapsed .comment{display:none}
.comment{display:flex;gap:8px;align-items:flex-start}
.bubble{background:var(--mist);border-radius:14px;padding:7px 12px;font-size:14px}
.bubble strong{display:block;font-size:13px}
.comment-form{display:flex;gap:8px;align-items:center}
.comment-form input{flex:1;border:1px solid var(--line);border-radius:999px;padding:8px 14px;background:var(--mist);outline:none;min-width:0}
.comment-form input:focus{border-color:var(--blue);background:var(--field)}

/* ---------- Profile ---------- */
.profile{overflow:hidden}
.cover svg{display:block;width:100%;height:180px}
.profile-info{display:flex;align-items:flex-end;gap:18px;padding:0 24px}
.profile-info .avatar{margin-top:-56px}
.profile-info .avatar{border:5px solid var(--surface);font-size:38px!important}
.pi-text{flex:1;padding-bottom:6px}
.pi-text h1{margin:0;font-family:var(--display);font-size:26px}
.pi-text p{margin:0}
.pi-actions{padding-bottom:10px}
.tabs{display:flex;gap:4px;padding:12px 18px 0;border-top:1px solid var(--line);margin-top:16px}
.tab{padding:10px 14px;font-weight:600;color:var(--muted);border-bottom:3px solid transparent}
.tab.active{color:var(--red-fg);border-color:var(--red)}
.profile-grid{display:grid;grid-template-columns:1fr;gap:16px}
#profileTab{display:flex;flex-direction:column;gap:16px}
.intro p{margin:0 0 10px}
.facts{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;font-size:14px}
.friend-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.friend{display:flex;flex-direction:column;align-items:center;text-align:center;padding:12px;border-radius:12px;background:var(--mist);gap:6px;font-size:13.5px}

/* ---------- Events ---------- */
.events-hero{background:linear-gradient(110deg,var(--surface) 35%,var(--green-l) 100%)}
.filter-pills{display:flex;gap:8px;flex-wrap:wrap}
.pill{padding:7px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-weight:600;font-size:13.5px}
.pill.active{background:var(--red);color:#fff;border-color:var(--red)}
.event-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.event-card{overflow:hidden;display:flex;flex-direction:column}
.event-card[hidden]{display:none}
.ev-banner{height:100px;background:linear-gradient(135deg,var(--blue-l),var(--green-l));display:flex;justify-content:space-between;align-items:flex-start;padding:14px;position:relative}
.ev-banner::after{content:"";position:absolute;inset:auto 0 0 0;height:30px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 30' preserveAspectRatio='none'%3E%3Cpath d='M0 15 Q50 0 100 15 T200 15 V30 H0Z' fill='%2365A0C8' opacity='.3'/%3E%3C/svg%3E") bottom/100% 100% no-repeat}
.ev-tag{background:var(--surface);color:var(--red-d);font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px}
.ev-body{padding:14px 16px;display:flex;flex-direction:column;flex:1}
.ev-body h3{margin:0 0 6px;font-family:var(--display);font-size:16px;line-height:1.3}
.ev-body p{margin:0 0 12px;font-size:13.5px}
.ev-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center}

/* ---------- Toast & mobile tabs ---------- */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:var(--toast-bg);color:#fff;padding:10px 18px;border-radius:999px;font-size:14px;font-weight:500;opacity:0;pointer-events:none;transition:.25s;z-index:100}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast{width:max-content;max-width:calc(100vw - 32px);text-align:center}
.bottom-tabs{display:none}

/* ---------- Responsive ---------- */
@media (max-width:1200px){
  .layout{grid-template-columns:260px minmax(0,1fr)}
  .sidebar.right{display:none}
}
@media (max-width:820px){
  .layout{grid-template-columns:1fr;padding:12px;gap:12px}
  .sidebar.left{display:none}
  .topnav{padding:8px 12px;gap:10px;height:58px}
  .logo{height:40px}
  .search{display:none}
  .nav-label,.nav-btn[data-view="home"],.nav-btn[data-view="events"],.nav-btn[data-view="marketplace"]{display:none}
  .dropdown{left:8px;right:8px;width:auto;top:58px}
  .bottom-tabs{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;bottom:0;left:0;right:0;background:var(--surface);border-top:1px solid var(--line);z-index:60;padding:6px 0 calc(6px + env(safe-area-inset-bottom))}
  .bottom-tabs a{display:flex;flex-direction:column;align-items:center;font-size:20px;color:var(--muted)}
  .bottom-tabs a span{font-size:11px;font-weight:600}
  .bottom-tabs a.active{color:var(--red-fg)}
  .bottom-tabs a.active span{color:var(--red-fg)}
  body{padding-bottom:70px}
  .toast{bottom:84px}
  .hero{padding:16px 18px}.hero h1{font-size:20px}.hero-wave{font-size:34px}
  .banner{min-height:120px;padding:20px}
  .b-emoji{font-size:44px}
  .profile-info{flex-direction:column;align-items:flex-start;gap:8px;padding:0 16px}
  .profile-info .avatar{margin-top:-48px}
  .profile-info .avatar{width:96px!important;height:96px!important}
  .pi-actions{padding-bottom:0}
  .composer-tools select{flex:1 1 100%}
  .event-grid{grid-template-columns:1fr}
}
@media (min-width:821px){ .mobile-search{display:none} }

/* ---------- Village chips with "Join chat" ---------- */
.village-list .chip{display:flex;border-radius:999px;background:var(--mist);overflow:hidden}
.village-list .chip .chip-btn{border-radius:999px 0 0 999px;background:none}
.village-list .chip .chip-btn.active{background:var(--blue);color:#fff}
.chip-chat{display:grid;place-items:center;padding:0 9px 0 7px;font-size:12px;border-left:1px solid var(--line2);transition:.15s}
.chip-chat:hover{background:var(--red-l)}
.village-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.village-card{padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.vc-top strong{font-family:var(--display);font-weight:600}
.vc-actions{display:flex;gap:8px;margin-top:auto}
.join-chat{display:inline-flex;align-items:center;gap:6px}
.unread{background:var(--red);color:#fff;font-size:11px;font-weight:700;min-width:20px;height:20px;padding:0 6px;border-radius:10px;display:inline-grid;place-items:center;flex-shrink:0}
.unread.inv{background:#fff;color:var(--red-h)}

/* ---------- Chat view ---------- */
body[data-view="chat"] .layout{grid-template-columns:280px minmax(0,984px)}
body[data-view="chat"] .sidebar.right{display:none}
.chat{display:grid;grid-template-columns:320px minmax(0,1fr);height:calc(100vh - 64px - 48px);height:calc(100dvh - 64px - 48px);min-height:480px;overflow:hidden}
.chat-list{border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;background:var(--surface-2)}
.chat-list-head{padding:16px 16px 10px;border-bottom:1px solid var(--line)}
.chat-list-head h2{margin:0;font-family:var(--display);font-size:19px}
.chat-search{max-width:none;margin-top:10px;background:var(--surface)}
.chat-search input{padding:8px 0}
.room-list{list-style:none;margin:0;padding:6px;overflow-y:auto;flex:1;scrollbar-width:thin}
.room-empty{padding:20px;text-align:center;color:var(--muted);font-size:14px}
.room-item{display:flex;gap:10px;align-items:center;padding:10px;border-radius:12px;transition:.12s}
.room-item:hover{background:var(--mist)}
.room-item.active{background:var(--red-l)}
.room-ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:17px;flex-shrink:0}
.room-ico.lg{background:var(--red-l);font-size:20px}
.room-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.room-top,.room-bottom{display:flex;justify-content:space-between;align-items:center;gap:8px}
.room-top strong{font-size:14.5px}
.room-top small{flex-shrink:0;font-size:11.5px}
.preview{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.room-item:has(.unread) .preview{color:var(--ink);font-weight:500}
.chat-room{display:flex;flex-direction:column;min-height:0;min-width:0;background:var(--surface)}
.chat-head{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line)}
.chat-head .back{display:none;font-size:22px;place-items:center}
.ch-text{flex:1;min-width:0}
.ch-text strong{font-family:var(--display);font-weight:600;font-size:16px}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);margin-right:4px;vertical-align:1px}
.chat-msgs{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:14px;background:linear-gradient(180deg,var(--surface),var(--blue-l) 260%);scrollbar-width:thin}
.msg{display:flex;gap:10px;align-items:flex-end;max-width:78%}
.msg.new{animation:slideIn .3s ease}
.msg.mine{align-self:flex-end;flex-direction:row-reverse}
.msg-body{min-width:0}
.msg-meta{display:flex;gap:8px;align-items:baseline;margin:0 4px 3px;font-size:12.5px}
.msg-meta time{color:var(--muted);font-size:11.5px}
.msg.mine .msg-meta{justify-content:flex-end}
.msg-bubble{background:var(--bubble);padding:9px 14px;border-radius:18px 18px 18px 6px;font-size:14.5px;overflow-wrap:anywhere}
.msg.mine .msg-bubble{background:var(--red);color:#fff;border-radius:18px 18px 6px 18px}
.chat-empty,.chat-pick{margin:auto;text-align:center;max-width:340px;color:var(--muted);padding:24px}
.chat-pick{display:flex;flex-direction:column;justify-content:center;height:100%}
.chat-empty h3,.chat-pick h3{color:var(--ink);font-family:var(--display);margin:8px 0 4px}
.chat-empty p{margin:0 0 14px}
.ce-emoji{font-size:48px}
.typing{display:flex;align-items:center;gap:8px;padding:4px 20px 6px;font-size:13px;color:var(--muted)}
.typing[hidden]{display:none}
.dots{display:inline-flex;gap:3px}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:blink 1.2s infinite}
.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.chat-composer{display:flex;gap:10px;align-items:flex-end;padding:12px 16px;border-top:1px solid var(--line)}
.chat-composer textarea{flex:1;resize:none;border:1px solid var(--line);background:var(--mist);border-radius:20px;padding:10px 16px;outline:none;max-height:120px;line-height:1.4}
.chat-composer textarea:focus{background:var(--field);border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-l)}
.bottom-tabs a{position:relative}
.tab-badge{position:absolute;top:-2px;left:calc(50% + 6px);background:var(--red);color:#fff;font-size:10px;font-weight:700;min-width:17px;height:17px;padding:0 4px;border-radius:9px;display:grid;place-items:center;border:2px solid var(--surface)}
.tab-badge[hidden],.badge[hidden]{display:none}

@media (max-width:1200px){ body[data-view="chat"] .layout{grid-template-columns:240px minmax(0,1fr)} .chat{grid-template-columns:280px minmax(0,1fr)} }
@media (max-width:820px){
  body[data-view="chat"] .layout{grid-template-columns:1fr}
  .nav-btn[data-view="chat"]{display:none}
  .bottom-tabs{grid-template-columns:repeat(7,minmax(0,1fr))}
  .chat{display:block;height:auto;min-height:0;overflow:visible}
  .chat-search{display:flex}
  .chat-list{border-right:0;background:var(--surface);border-radius:var(--radius)}
  .room-list{overflow:visible}
  .chat-room{display:none}
  .chat.has-room .chat-room{display:flex;position:fixed;inset:0;z-index:90}
  .chat-head{padding:10px 12px;padding-top:calc(10px + env(safe-area-inset-top))}
  .chat-head .back{display:grid}
  .chat-head .btn{display:none}
  .msg{max-width:88%}
  .chat-msgs{padding:14px 12px}
  .chat-composer{padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
  body.chat-room-open{overflow:hidden}
}

/* ---------- Nav density ---------- */
@media (max-width:1180px) and (min-width:821px){ .nav-label{display:none} .search{max-width:320px} }
.sq.red{background:var(--red-l);color:var(--red-fg);font-weight:700}
.room-group{padding:10px 10px 4px;font-size:11.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--muted)}
.room-ico.dm{background:none;width:auto;height:auto}
.dm-listing{display:flex;align-items:center;gap:8px;padding:5px 10px 5px 5px;border:1px solid var(--line);border-radius:12px;max-width:260px;font-size:13px}
.dm-listing:hover{background:var(--mist)}
.dm-listing span{min-width:0}
.dm-listing b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.dm-listing small{color:var(--red-fg);font-weight:700}

/* ---------- Placeholder tiles ---------- */
.tile{position:relative;display:grid;place-items:center;aspect-ratio:4/3;background:linear-gradient(var(--ang,150deg),var(--t1),var(--t2));color:var(--tink);overflow:hidden}
.tile-deco{position:absolute;inset:0;width:100%;height:100%}
.tile-emoji{position:relative;font-size:clamp(34px,5vw,58px);filter:drop-shadow(0 6px 10px rgba(30,42,48,.15))}
.tile.photo{background:var(--mist)}
.tile.photo img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0}
.tile.big{aspect-ratio:4/3;border-radius:14px}.tile.big .tile-emoji{font-size:110px}
.tile.thumb{border-radius:10px}.tile.thumb .tile-emoji{font-size:26px}
.tile.mini{width:40px;height:40px;aspect-ratio:auto;border-radius:9px;flex-shrink:0}.tile.mini .tile-emoji{font-size:20px}
.tile.sq-tile{width:34px;height:34px;aspect-ratio:auto;border-radius:10px;flex-shrink:0}.tile.sq-tile .tile-emoji{font-size:18px;filter:none}

/* ---------- Marketplace ---------- */
body[data-view="marketplace"] .layout{grid-template-columns:280px minmax(0,984px)}
body[data-view="marketplace"] .sidebar.right{display:none}
.mk-head{padding:18px 20px 0}
.mk-title-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.mk-title-row h1{margin:0;font-family:var(--display);font-size:24px;display:flex;align-items:center;gap:8px}
.mk-title-row h1::before{content:"";width:6px;height:24px;border-radius:3px;background:var(--red)}
.mk-title-row p{margin:2px 0 0}
.mk-searchrow{display:flex;gap:10px;margin-top:14px}
.mk-search{max-width:none;flex:1}
.filter-toggle{display:none}
.mk-tabs{margin-top:12px;padding:0;border-top:0}
.mk-cats{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 4px;scrollbar-width:none}
.mk-cats::-webkit-scrollbar{display:none}
.cat-chip{flex-shrink:0;padding:8px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-weight:600;font-size:13.5px;white-space:nowrap;transition:.15s}
.cat-chip:hover{border-color:var(--blue);color:var(--blue-d)}
.cat-chip.active{background:var(--red);border-color:var(--red);color:#fff}
.mk-filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;padding:12px 16px}
.mk-filters label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:var(--muted)}
.mk-filters select,.mk-filters input{border:1px solid var(--line2);border-radius:10px;padding:8px 10px;background:var(--field);font-size:14px;color:var(--ink);min-width:0}
.mk-filters select:focus,.mk-filters input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-l)}
.range{display:flex;align-items:center;gap:6px}.range input{width:86px}
#fClear{margin-left:auto}
.mk-count{display:flex;justify-content:space-between;align-items:center;font-size:13.5px;color:var(--muted);padding:0 4px}
.mk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.mk-card{overflow:hidden;cursor:pointer;transition:transform .15s,box-shadow .15s;display:flex;flex-direction:column}
.mk-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.mk-card:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.mk-card.new{animation:slideIn .45s ease;box-shadow:0 0 0 3px var(--green)}
.mk-media{position:relative}
.heart{position:absolute;top:8px;right:8px;width:36px;height:36px;border-radius:50%;background:var(--float);display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.12);transition:.15s}
.heart svg{width:19px;height:19px;fill:none;stroke:var(--ink);stroke-width:2}
.heart:hover{transform:scale(1.08)}
.heart.on svg{fill:var(--red);stroke:var(--red)}
.sold-tag{position:absolute;top:10px;left:10px;background:var(--ink-fixed);color:#fff;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;letter-spacing:.5px;text-transform:uppercase}
.mk-info{padding:10px 12px 12px;display:flex;flex-direction:column;gap:1px;flex:1}
.mk-price{font-family:var(--display);font-weight:700;font-size:17px}
.mk-price.free,.d-price.free{color:var(--green-d)}
.mk-title{font-size:14px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:2px}
.mk-manage{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.btn.danger{background:var(--red-l);color:var(--red-d)}
.mk-empty{grid-column:1/-1;text-align:center;padding:40px 20px;color:var(--muted)}
.mk-empty h3{color:var(--ink);font-family:var(--display);margin:6px 0 4px}
.mk-empty p{margin:0 0 14px}

/* ---------- Modals (listing detail + sell form) ---------- */
.modal-root{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:28px}
.modal-root[hidden]{display:none}
body.modal-open{overflow:hidden}
.modal-backdrop{position:absolute;inset:0;background:var(--backdrop);backdrop-filter:blur(2px);animation:fade .2s}
@keyframes fade{from{opacity:0}}
.modal{position:relative;background:var(--elev);border-radius:20px;width:min(1040px,100%);max-height:calc(100vh - 56px);max-height:calc(100dvh - 56px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;box-shadow:0 24px 70px rgba(0,0,0,.3);animation:rise .22s ease}
@keyframes rise{from{opacity:0;transform:translateY(12px)}}
.modal.sell{width:min(920px,100%)}
.modal-bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--topbar);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.modal-bar strong{font-family:var(--display);font-weight:600}
.modal-bar .icon-btn{display:grid;place-items:center;font-size:18px;color:var(--ink)}
.modal-bar .icon-btn:first-child{visibility:hidden}
.detail-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;padding:22px 26px 28px}
.gallery{display:flex;flex-direction:column;gap:10px;position:sticky;top:70px;align-self:start}
.g-main{position:relative}
.g-count{position:absolute;bottom:10px;right:10px;background:rgba(30,42,48,.7);color:#fff;font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px}
.g-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.g-thumb{padding:0;border-radius:12px;border:2px solid transparent;overflow:hidden}
.g-thumb.active{border-color:var(--red)}
.gallery .fine{text-align:left;margin:0}
.d-price{font-family:var(--display);font-weight:700;font-size:28px;color:var(--red-fg)}
.d-info h2{margin:2px 0 10px;font-family:var(--display);font-size:22px;line-height:1.3}
.d-meta{display:flex;flex-wrap:wrap;gap:6px}
.tag{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;background:var(--blue-l);color:var(--blue-d);font-size:12.5px;font-weight:600}
.tag.green{background:var(--green-l);color:var(--green-d)}
.tag.plain{background:var(--mist);color:var(--muted)}
.d-actions{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 6px}
.d-actions .btn:first-child{flex:1 1 100%;padding:12px 18px;font-size:15px}
.save-btn.on{background:var(--red-l);color:var(--red-fg)}
.report-box{margin-top:10px;padding:12px;border-radius:12px;background:var(--mist);font-size:14px}
.report-box div{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.d-sec{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.d-sec h3{margin:0 0 6px;font-family:var(--display);font-size:15px}
.d-sec p{margin:0;font-size:14.5px}
.seller-card{display:flex;align-items:center;gap:12px}
.seller-card div{flex:1;min-width:0}
.stars{color:#9A6B10;font-weight:700}
[data-theme="dark"] .stars{color:#E3AE45}
.map-card{display:flex;gap:14px;align-items:center;background:var(--blue-l);border-radius:14px;padding:10px}
.map{width:112px;height:140px;border-radius:10px;flex-shrink:0;background:var(--surface)}
.ex-detail .map{width:136px;height:170px}
/* Shared Guam map (js/guam-map.js) */
.gmap{display:block}
.gm-sea{fill:var(--gm-sea)}
.gm-wave{stroke:var(--gm-wave);stroke-width:2;fill:none;opacity:.55;stroke-linecap:round}
.gm-land{fill:var(--gm-land);stroke:#6BA571;stroke-width:1.6;stroke-linejoin:round}
.gm-dot{fill:#6BA571;opacity:.65}
.gm-halo{fill:#C74C40;opacity:.16}
.gm-pin{fill:#C74C40;stroke:var(--surface);stroke-width:2.5}
.gm-label{font:600 9px/1 system-ui,sans-serif;fill:var(--gm-label)}
.gm-n path{fill:#65A0C8}.gm-n text{font:700 8px/1 system-ui,sans-serif;fill:#65A0C8}
.ex-src{font-size:13px;color:var(--muted,#6b6b6b);margin:10px 4px 0}
.ex-src a{color:var(--blue-d,#3F7FA9);font-weight:600}
.map-card small{margin-top:4px}

/* Sell form */
.sell-grid{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:24px;padding:20px 24px 24px}
.sell-form{display:flex;flex-direction:column;gap:14px}
.field{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600;color:var(--text-3);min-width:0}
.flabel{font-size:13px;font-weight:600;color:var(--text-3);display:flex;gap:8px;align-items:baseline}
.flabel small{font-weight:500}
.field input,.field select,.field textarea{border:1px solid var(--line2);border-radius:12px;padding:10px 12px;font-size:14.5px;font-weight:400;background:var(--field);outline:none;width:100%}
.field textarea{resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-l)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.price-input{display:flex;align-items:center;border:1px solid var(--line2);border-radius:12px;padding-left:12px;background:var(--field)}
.price-input:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-l)}
.price-input span{color:var(--muted);font-weight:600}
.price-input input{border:0;box-shadow:none!important}
.price-input input:disabled{background:none;color:var(--muted)}
.check{display:flex;align-items:center;gap:6px;font-weight:500;color:var(--muted)}
.check input{width:auto;accent-color:var(--red)}
.check label{cursor:pointer}
.photo-row{display:flex;flex-wrap:wrap;gap:10px}
.photo-add,.ph{width:96px;height:96px;border-radius:14px;position:relative;overflow:hidden}
.photo-add{border:2px dashed var(--line2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;color:var(--muted);font-size:22px;transition:.15s}
.photo-add:hover{border-color:var(--red);color:var(--red-fg);background:var(--red-l)}
.photo-add input{position:absolute;inset:0;opacity:0;cursor:pointer}
.photo-add small{font-size:11.5px;font-weight:600;color:inherit}
.ph img{width:100%;height:100%;object-fit:cover}
.ph-x{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;background:rgba(30,42,48,.75);color:#fff;font-size:12px}
.form-error{margin:0;padding:10px 12px;border-radius:10px;background:var(--red-l);color:var(--red-d);font-size:14px;font-weight:500}
.form-error[hidden]{display:none}
.sell-foot{display:flex;justify-content:flex-end;gap:8px;padding-top:6px}
.sell-preview{display:flex;flex-direction:column;gap:8px;position:sticky;top:70px;align-self:start}
.sell-preview .mk-card{cursor:default}
.sell-preview .fine{text-align:left}

@media (max-width:1200px){ body[data-view="marketplace"] .layout{grid-template-columns:240px minmax(0,1fr)} }
@media (max-width:820px){
  body[data-view="marketplace"] .layout{grid-template-columns:1fr}
  .mk-head{padding:14px 14px 0}
  .mk-title-row h1{font-size:20px}
  .mk-title-row p{display:none}
  .mk-title-row .btn{padding:8px 14px;font-size:14px}
  .mk-search{display:flex}
  .filter-toggle{display:block;padding:8px 14px}
  .mk-tabs{overflow-x:auto;scrollbar-width:none}
  .mk-tabs .tab{white-space:nowrap;padding:10px 8px;font-size:13.5px}
  .mk-filters:not(.open){display:none}
  .mk-filters{display:grid;grid-template-columns:1fr 1fr}
  .mk-filters label:nth-child(2){grid-column:1/-1}
  .range input{width:100%}
  #fClear{grid-column:1/-1;margin:0}
  .mk-grid{grid-template-columns:1fr 1fr;gap:10px}
  .mk-info{padding:8px 10px 10px}
  .mk-price{font-size:15.5px}
  .mk-title{font-size:13.5px}
  .heart{width:32px;height:32px}
  .modal-root{padding:0}
  .modal{width:100%;height:100%;max-height:none;border-radius:0}
  .modal-bar .icon-btn:first-child{visibility:visible}
  .modal-bar .icon-btn:last-child{visibility:hidden}
  .detail-grid,.sell-grid{grid-template-columns:1fr;padding:14px 16px 32px;gap:16px}
  .gallery,.sell-preview{position:static}
  .tile.big{border-radius:12px}.tile.big .tile-emoji{font-size:84px}
  .sell-preview{order:-1;display:none}
  .field-row{grid-template-columns:1fr}
  .dm-listing{display:none}
}

/* ---------- Explore Guam ---------- */
body[data-view="explore"] .layout{grid-template-columns:280px minmax(0,984px)}
body[data-view="explore"] .sidebar.right{display:none}
.ex-head .mk-title-row h1::before{background:var(--green)}
.ex-head{background:linear-gradient(110deg,var(--surface) 45%,var(--green-l) 100%)}
.ex-hero-emoji{font-size:40px;line-height:1}
.ex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.ex-card{overflow:hidden;cursor:pointer;transition:transform .15s,box-shadow .15s;display:flex;flex-direction:column}
.ex-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.ex-card:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.ex-tile{position:relative;display:grid;place-items:center;aspect-ratio:16/9;background:linear-gradient(135deg,var(--c1),var(--c2));overflow:hidden}
.ex-tile::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 25% 20%,rgba(255,255,255,.35),transparent 55%)}
.ex-emoji{position:relative;z-index:1;font-size:46px;filter:drop-shadow(0 6px 10px rgba(30,42,48,.25))}
.ex-tile.big{aspect-ratio:4/3;border-radius:14px}.ex-tile.big .ex-emoji{font-size:110px}
/* Real photos: cover the tile; a soft top/bottom shade keeps the category tag and heart readable */
.ex-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;display:block}
.ex-tile.has-photo::after{z-index:1;background:linear-gradient(180deg,rgba(20,28,32,.34) 0%,rgba(20,28,32,0) 38%,rgba(20,28,32,0) 78%,rgba(20,28,32,.14) 100%)}
.ex-detail .ex-tile.has-photo::after{background:linear-gradient(180deg,rgba(20,28,32,0) 70%,rgba(20,28,32,.12) 100%)}
.ex-credit{font-size:12px;line-height:1.45}
.ex-credit a{color:var(--blue-d);text-decoration:underline;text-decoration-color:rgba(63,127,169,.35);text-underline-offset:2px}
.ex-credit a:hover{text-decoration-color:currentColor}
.ex-tag-pos{position:absolute;top:10px;left:10px;z-index:2}
.ex-tag{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;background:var(--tb);color:var(--tc);font-size:12px;font-weight:700;white-space:nowrap}
.ex-tag-pos .ex-tag{background:var(--float);box-shadow:0 2px 6px rgba(0,0,0,.12)}
.ex-card .heart{z-index:2}
.ex-info{padding:12px 14px 14px;display:flex;flex-direction:column;gap:4px;flex:1}
.ex-name{margin:0;font-family:var(--display);font-size:16px;font-weight:600;line-height:1.3}
.ex-area{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ex-desc{margin:2px 0 4px;font-size:13.5px;color:var(--text-3);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ex-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:auto;padding-top:4px}
.ex-chips span{background:var(--mist);border:1px solid var(--line);border-radius:999px;padding:2px 9px;font-size:12px;font-weight:600;color:var(--text-2)}
.ex-chips span:first-child{background:var(--green-l);border-color:transparent;color:var(--green-d)}
.ex-map{align-self:flex-start;margin-top:8px;font-size:13px;font-weight:600;color:var(--blue-d)}
.ex-map:hover{text-decoration:underline}
.ex-fine{text-align:left;margin:4px}
.ex-detail .d-info > .ex-tag{margin-bottom:6px}
.ex-detail .d-actions .btn{text-align:center}
.ex-about{margin-top:8px!important;color:var(--text-3)}
.ex-facts{margin:0;display:grid;grid-template-columns:1fr;gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ex-facts div{display:grid;grid-template-columns:130px 1fr;gap:10px;padding:8px 12px;font-size:14px}
.ex-facts div:nth-child(odd){background:var(--surface-2)}
.ex-facts dt{font-weight:600;color:var(--muted);font-size:13px}
.ex-facts dd{margin:0}
.ex-facts dd{overflow-wrap:anywhere;min-width:0}
.ex-contact a{color:var(--ink-link,#336E95);font-weight:600;text-decoration:none}
.ex-contact a:hover{text-decoration:underline}
[data-theme="dark"] .ex-contact a{color:#8FC0E2}
.ex-approx{font-weight:600;color:#B4473B}
[data-theme="dark"] .ex-approx{color:#E58B80}
.ex-tip{display:flex;gap:8px;background:var(--green-l);color:var(--green-ink);border-radius:12px;padding:10px 12px;font-size:14px}
.map-card .ex-map{display:inline-block;margin-top:6px}

@media (max-width:1200px){ body[data-view="explore"] .layout{grid-template-columns:240px minmax(0,1fr)} }
@media (max-width:820px){
  body[data-view="explore"] .layout{grid-template-columns:1fr}
  .nav-btn[data-view="explore"]{display:none}
  .ex-hero-emoji{font-size:30px}
  .ex-grid{grid-template-columns:1fr;gap:12px}
  .ex-tile{aspect-ratio:auto;height:150px}
  .ex-emoji{font-size:40px}
  .ex-desc{-webkit-line-clamp:2}
  .ex-tile.big{height:auto;aspect-ratio:16/10}.ex-tile.big .ex-emoji{font-size:84px}
  .ex-facts div{grid-template-columns:100px 1fr}
  /* 7 tabs in the mobile bottom bar: tighter icons + labels */
  .bottom-tabs{grid-template-columns:repeat(7,minmax(0,1fr))}
  .bottom-tabs a{font-size:19px;min-width:0}
  .bottom-tabs a span{font-size:10px;letter-spacing:-.1px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media (min-width:560px) and (max-width:820px){ .ex-grid{grid-template-columns:1fr 1fr} .ex-tile{height:auto;aspect-ratio:16/9} }

/* ---------- Stories ---------- */
.stories{position:relative;padding:12px 4px 10px}
.stories-row{list-style:none;margin:0;padding:0 10px;display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:10px;scrollbar-width:none;overscroll-behavior-x:contain}
.stories-row::-webkit-scrollbar{display:none}
.story-item{position:relative;flex:0 0 auto;scroll-snap-align:start}
.story-btn{display:flex;flex-direction:column;align-items:center;gap:5px;width:76px;padding:2px 0;border-radius:12px}
.story-btn:focus-visible{outline:3px solid var(--blue);outline-offset:1px}
.story-ring{display:grid;place-items:center;width:68px;height:68px;border-radius:50%;padding:3px;background:conic-gradient(from 200deg,#C74C40,#8E5533,#6BA571,#65A0C8,#C74C40);transition:transform .15s}
.story-btn:hover .story-ring{transform:scale(1.04)}
.story-ring .avatar{width:100%!important;height:100%!important;border:3px solid var(--surface);box-shadow:none}
.story-ring.seen{background:var(--seen-ring)}
.story-ring.none{background:none;padding:0}
.story-ring.none .avatar{border:0}
.story-name{font-size:12px;font-weight:600;line-height:1.2;max-width:74px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.story-spon{font-size:10px;font-weight:700;color:var(--muted);margin-top:-4px;letter-spacing:.2px}
.story-add{position:absolute;top:48px;left:52px;width:24px;height:24px;border-radius:50%;background:var(--red);color:#fff;font-size:18px;font-weight:700;line-height:1;display:grid;place-items:center;border:2.5px solid var(--surface);box-shadow:0 2px 6px rgba(0,0,0,.18);transition:.15s}
.story-add:hover{background:var(--red-h);transform:scale(1.08)}
.stories-scroll{position:absolute;top:30px;z-index:2;width:32px;height:32px;border-radius:50%;background:var(--surface);box-shadow:0 2px 10px rgba(30,42,48,.2);font-size:22px;line-height:1;display:grid;place-items:center;color:var(--ink)}
.stories-scroll.prev{left:6px}.stories-scroll.next{right:6px}
.stories-scroll[hidden]{display:none}
@media (hover:none),(max-width:820px){ .stories-scroll{display:none!important} }

/* Story media (shared by the viewer and the create preview; sizes scale with the card via container units) */
.sv-card,.sc-preview{position:relative;overflow:hidden;container-type:size;background:#111;color:#fff;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.sv-media{position:absolute;inset:0}
.sv-text{display:grid;place-items:center}
.sv-waves{position:absolute;left:0;right:0;bottom:0;width:100%;height:24%}
.sv-text-inner{position:relative;text-align:center;padding:0 9cqw;display:flex;flex-direction:column;align-items:center;gap:2.5cqw}
.sv-emoji{font-size:24cqw;line-height:1.1;filter:drop-shadow(0 6px 14px rgba(0,0,0,.2))}
.sv-big{margin:0;font-family:var(--display);font-weight:700;font-size:8.2cqw;line-height:1.2;text-shadow:0 2px 12px rgba(0,0,0,.18);overflow-wrap:anywhere}
.sv-sub{margin:0;font-size:4.4cqw;font-weight:500;opacity:.95;line-height:1.35}
.sv-photo{background:#1B2328}
.sv-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.sv-sticker{position:absolute;left:50%;top:58%;transform:translate(-50%,-50%) rotate(-2deg);margin:0;max-width:84%;background:rgba(255,255,255,.95);color:var(--ink-fixed);font-family:var(--display);font-weight:700;font-size:5.4cqw;line-height:1.25;padding:2.2cqw 4cqw;border-radius:3cqw;text-align:center;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.sv-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0) 70%,rgba(0,0,0,.5) 100%)}
.sv-top{position:absolute;left:0;right:0;top:0;z-index:2;padding:10px 10px 0;pointer-events:none}
.sv-top button{pointer-events:auto}
.sv-bars{display:flex;gap:4px}
.sv-bar{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.38);overflow:hidden}
.sv-bar i{display:block;height:100%;background:#fff;border-radius:2px}
.sv-head{display:flex;align-items:center;gap:10px;margin-top:10px}
.sv-head .avatar{border:2px solid rgba(255,255,255,.9);box-shadow:none}
.sv-who{flex:1;min-width:0;line-height:1.25;text-shadow:0 1px 4px rgba(0,0,0,.35)}
.sv-who strong{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-who small{color:rgba(255,255,255,.88);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-spon{display:inline-block;background:rgba(255,255,255,.92);color:var(--ink-fixed);font-weight:700;font-size:10.5px;padding:0 6px;border-radius:4px;text-shadow:none;letter-spacing:.2px}
.sv-btn{width:36px;height:36px;border-radius:50%;color:#fff;font-size:15px;font-weight:700;display:grid;place-items:center;flex-shrink:0;text-shadow:0 1px 4px rgba(0,0,0,.4)}
.sv-btn:hover{background:rgba(255,255,255,.16)}
.sv-x{font-size:20px}
.sv-tap{position:absolute;inset:0;z-index:1;touch-action:none;cursor:pointer}
.sv-bottom{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:10px 12px calc(12px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px;align-items:stretch;pointer-events:none}
.sv-bottom>*{pointer-events:auto}
.sv-caption{margin:0;align-self:center;max-width:100%;text-align:center;font-size:15px;font-weight:500;padding:6px 12px;border-radius:12px;background:rgba(0,0,0,.38);overflow-wrap:anywhere}
.sv-credit{margin:0;align-self:flex-end;font-size:10px;line-height:1.3;color:rgba(255,255,255,.82);background:rgba(0,0,0,.35);padding:2px 7px;border-radius:6px;max-width:100%;text-align:right}
.sv-credit a{color:inherit;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4)}
.sv-cta{align-self:stretch;background:#fff;color:var(--ink-fixed);font-weight:700;font-size:14px;padding:11px 16px;border-radius:12px;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.sv-cta:hover{background:#E6F1F8}
.sv-reply{display:flex;align-items:center;gap:8px}
.sv-reply input{flex:1;min-width:0;background:rgba(0,0,0,.25);border:1.5px solid rgba(255,255,255,.75);border-radius:999px;padding:10px 16px;color:#fff;outline:none;font-size:14.5px}
.sv-reply input::placeholder{color:rgba(255,255,255,.85)}
.sv-reply input:focus{background:rgba(0,0,0,.45);border-color:#fff}
.sv-heart,.sv-send{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;color:#fff;font-size:18px}
.sv-heart svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:2;transition:transform .15s}
.sv-heart.on svg{fill:var(--red);stroke:var(--red);animation:pop .35s ease}
.sv-heart:hover,.sv-send:hover{background:rgba(255,255,255,.15)}
.sv-mine{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;font-weight:500;text-shadow:0 1px 4px rgba(0,0,0,.4)}
.sv-pill{background:rgba(255,255,255,.95);color:var(--ink-fixed);font-weight:700;font-size:13px;padding:7px 14px;border-radius:999px;text-shadow:none}
.sv-burst{position:absolute;left:50%;top:45%;z-index:3;font-size:96px;transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events:none}
.sv-burst.go{animation:burst .8s ease forwards}
@keyframes burst{30%{transform:translate(-50%,-50%) scale(1.15);opacity:1}60%{transform:translate(-50%,-50%) scale(.95);opacity:1}100%{transform:translate(-50%,-70%) scale(1);opacity:0}}
.sv-card.paused .sv-top,.sv-card.paused .sv-bottom{opacity:0;transition:opacity .2s}
.sv-card.sponsored .sv-bar i{background:#fff}

/* Viewer shell: full-screen on phones; a centred phone-sized card on a dark backdrop on larger screens */
body.story-open{overflow:hidden}
body.story-open .toast{z-index:260}
.sv{position:fixed;inset:0;z-index:250;display:flex;align-items:center;justify-content:center;gap:18px;background:rgba(12,16,18,.96);animation:fade .2s}
.sv-card{height:min(calc(100vh - 40px),880px);height:min(calc(100dvh - 40px),880px);aspect-ratio:9/16;max-width:calc(100vw - 130px);border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.5);transition:transform .2s,opacity .2s}
.sv-arrow{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink-fixed);font-size:26px;line-height:1;display:grid;place-items:center;flex-shrink:0;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.sv-arrow:hover{background:#fff}
.sv-arrow:disabled{opacity:.3;cursor:default}
@media (max-width:560px){
  .sv{background:#000;gap:0}
  .sv-arrow{display:none}
  .sv-card{width:100vw;height:100vh;height:100dvh;max-width:none;aspect-ratio:auto;border-radius:0;box-shadow:none}
  .sv-top{padding-top:calc(8px + env(safe-area-inset-top))}
}

/* Create story */
.modal.story-create{width:min(780px,100%)}
.sc-grid{display:grid;grid-template-columns:250px minmax(0,1fr);gap:24px;padding:20px 24px 24px}
.sc-side{display:flex;flex-direction:column;gap:8px;position:sticky;top:70px;align-self:start}
.sc-preview{width:100%;aspect-ratio:9/16;border-radius:16px;box-shadow:var(--shadow)}
.sc-preview .sv-top{padding:7px 7px 0}.sc-preview .sv-head{margin-top:7px;gap:7px}
.sc-preview .sv-who strong{font-size:11.5px}.sc-preview .sv-who small{font-size:10px}
.sc-preview .sv-caption{font-size:12px}
.sc-preview.is-empty .sv-big{opacity:.6}
.sc-side .fine{margin:0}
.sc-modes{display:flex;gap:8px}
.sc-modes .cat-chip{flex:1}
.sc-swatches,.sc-stickers{display:flex;flex-wrap:wrap;gap:8px}
.sc-swatch{width:40px;height:40px;border-radius:50%;border:3px solid var(--surface);box-shadow:0 0 0 1px var(--line2);transition:.15s}
.sc-swatch.active{box-shadow:0 0 0 2.5px var(--ink)}
.sc-sticker{width:40px;height:40px;border-radius:12px;background:var(--mist);font-size:21px;display:grid;place-items:center;border:2px solid transparent;color:var(--muted)}
.sc-sticker.active{border-color:var(--red);background:var(--red-l)}
#scPhotoFields[hidden],#scTextFields[hidden]{display:none}
.photo-add.sc-big{width:100%}
@media (max-width:820px){
  .stories{padding:10px 0 8px}
  .stories-row{padding:0 8px;gap:2px;scroll-padding-inline:8px}
  .sc-grid{grid-template-columns:1fr;padding:14px 16px 32px;gap:14px}
  .sc-side{position:static;align-items:center}
  .sc-preview{width:min(150px,42vw)}
  .sc-swatch,.sc-sticker{width:38px;height:38px}
}

/* Story reply reference in chat bubbles */
.msg-ref{font-size:12px;color:var(--muted);margin:0 4px 4px;padding-left:8px;border-left:3px solid var(--line2)}
.msg.mine .msg-ref{text-align:right;border-left:0;border-right:3px solid var(--line2);padding:0 8px 0 0}
body.story-open .toast{top:calc(84px + env(safe-area-inset-top));bottom:auto}
.sv button,.stories button{-webkit-tap-highlight-color:transparent}
@media (hover:none){ .sv-btn:hover,.sv-heart:hover,.sv-send:hover{background:none} }

/* ---------- Demo sign-up / log-in (js/auth.js) ---------- */
html.auth-pending .topnav,html.auth-pending .layout,html.auth-pending .bottom-tabs{display:none!important}
body.auth-mode{padding-bottom:0!important;background:var(--surface)}
.avatar.has-photo{overflow:hidden;background:var(--line2)!important}
.avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.acct-panel{width:300px}
.acct-head{display:flex;gap:12px;align-items:center;padding:8px;border-radius:12px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.acct-head:hover{background:var(--mist)}
.acct-head b{display:block;font-size:15px}
.acct-head small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}
.acct-panel .row-btn{width:100%}
.acct-note{margin-top:8px}
.pi-actions{display:flex;gap:8px;flex-wrap:wrap}
.profile-info{flex-wrap:wrap}
@media (min-width:821px){ .pi-text{flex:1 1 220px;min-width:0} .pi-actions{margin-left:auto} }
.interest-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.interest-tags .tag{background:var(--green-l);color:var(--green-d);padding:4px 10px;border-radius:999px;font-size:12.5px;font-weight:600}

.auth{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(420px,1fr);background:var(--surface)}
.auth-art{position:relative;overflow:hidden;background:linear-gradient(180deg,#5B97C2 0%,#8FB3CC 35%,#E9B49A 72%,#F6D6B8 100%);color:#fff;display:flex;flex-direction:column;padding:28px 40px;min-height:100%}
.auth-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%;display:block}
.auth-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,32,48,.22) 0%,rgba(12,32,48,.1) 40%,rgba(12,32,48,.14) 62%,rgba(12,32,48,.32) 100%);pointer-events:none}
.auth-art>*:not(.auth-scene):not(.auth-shade){position:relative}
.auth-logo{display:inline-flex;background:transparent;border-radius:0;padding:0;box-shadow:none}
.auth-logo img{height:60px;width:auto;display:block}
.auth-art-copy{margin-top:auto;margin-bottom:40px;padding:18px 20px 20px;max-width:520px;background:rgba(8,22,34,.72);border-radius:18px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 8px 28px rgba(8,24,36,.35)}
.auth-art-copy h2{font-family:var(--display);font-size:44px;line-height:1.1;margin:0 0 12px;text-shadow:0 1px 3px rgba(8,24,36,.45)}
.auth-art-copy p{font-size:17px;margin:0;max-width:440px;font-weight:600;color:#fff;text-shadow:0 1px 2px rgba(8,24,36,.4)}
.auth-polaroids{display:flex;gap:0;margin-top:30px;padding-left:6px}
.pol{margin:0 -14px 0 0;background:#fff;padding:7px 7px 6px;border-radius:10px;box-shadow:0 10px 28px rgba(30,42,48,.25);width:150px;transform:rotate(-5deg)}
.pol.p1{transform:rotate(3deg) translateY(-12px);z-index:1}.pol.p2{transform:rotate(-2deg) translateY(4px)}
.pol img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;display:block}
.pol figcaption{font-size:11.5px;color:var(--ink-fixed);font-weight:600;text-align:center;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.auth-credit{position:absolute!important;left:0;right:0;bottom:0;padding:26px 40px 10px;background:linear-gradient(180deg,rgba(20,40,55,0),rgba(20,40,55,.6));margin:0;font-size:10.5px;color:#fff;line-height:1.4}
.auth-credit a{text-decoration:underline;text-underline-offset:2px}
.auth-credit.in-card{display:none}
.auth-panel{display:flex;align-items:center;justify-content:center;padding:40px 32px;background:var(--surface)}
.auth-card{width:100%;max-width:420px}
.auth-card h1{font-family:var(--display);font-size:30px;line-height:1.15;margin:6px 0 8px}
.auth-lede{color:var(--muted);margin:0 0 18px;font-size:15px}
.auth-brand{height:64px;width:auto;display:block;margin-bottom:4px}
.auth-feats{list-style:none;padding:0;margin:0 0 22px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.auth-feats li{background:var(--mist);border-radius:12px;padding:9px 12px;font-size:13.5px;font-weight:600}
.auth-actions{display:flex;flex-direction:column;gap:10px}
.auth-btn{display:block;width:100%;text-align:center;padding:13px 18px;font-size:15.5px}
.btn:disabled{opacity:.6;cursor:progress}
.auth-demo-btn{margin-top:6px;padding:10px;border-radius:12px;border:1.5px dashed var(--line2);color:var(--green-d);font-weight:700;text-align:center;width:100%}
.auth-demo-btn:hover{background:var(--green-l);border-color:var(--green)}
.auth-demo-btn small{font-weight:500;margin-top:2px}
.auth-demo{display:flex;gap:8px;align-items:flex-start;margin:24px 0 0;font-size:12px;color:var(--muted);line-height:1.45}
.auth-demo span{flex-shrink:0;background:var(--brown-l);color:var(--brown-fg);font-weight:700;font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;padding:2px 7px;border-radius:999px;margin-top:1px}
.auth-back{display:inline-block;color:var(--muted);font-weight:600;font-size:14px;padding:4px 0;margin-bottom:8px}
.auth-back:hover{color:var(--ink)}
.auth-topline{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.auth-topline .auth-back{margin:0}
.auth-steps{display:flex;gap:5px;flex:1}
.auth-steps span{flex:1;height:5px;border-radius:999px;background:var(--line)}
.auth-steps span.on{background:var(--red)}
.auth-stepnum{margin:0;font-size:12px;color:var(--muted);font-weight:600;white-space:nowrap}
.auth-form{display:flex;flex-direction:column;gap:14px}
.auth-form .field input,.auth-form .field textarea{font-size:16px;padding:12px 14px}
.flabel-row{display:flex;justify-content:space-between;align-items:center}
.flabel-row .link,.auth-switch a,.auth-skip{color:var(--blue-d);font-weight:600}
.link{cursor:pointer}
.pw-wrap{position:relative;display:block}
.pw-wrap input{padding-right:78px!important}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:4px;padding:6px 9px;border-radius:9px;font-size:12.5px;font-weight:600;color:var(--muted)}
.pw-toggle .ico{width:17px;height:17px}
.pw-toggle:hover,.pw-toggle.on{background:var(--mist);color:var(--ink)}
.pw-meter{height:4px;border-radius:999px;background:var(--line);overflow:hidden;margin-top:2px}
.pw-meter i{display:block;height:100%;width:0;background:var(--red);transition:.25s}
.pw-meter[data-score="2"] i{background:#D9A23A}.pw-meter[data-score="3"] i{background:var(--green)}
.pw-hint{font-weight:500}
.f-err{color:var(--red-d);font-weight:600}
.f-err:empty{display:none}
.field.invalid input{border-color:var(--red);box-shadow:0 0 0 3px var(--red-l)}
.form-error{background:var(--red-l);color:var(--red-d);border-radius:12px;padding:10px 12px;font-size:13.5px;font-weight:600;margin:0}
.form-error a{text-decoration:underline}
.form-error[hidden]{display:none}
.auth-info{background:var(--blue-l);color:var(--blue-ink);border-radius:12px;padding:10px 12px;font-size:13.5px}
.auth-info b{display:block}
.auth-oauth{display:flex;flex-direction:column;gap:10px;margin:0 0 2px}
.auth-oauth .oauth-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px 18px;font-size:15px;font-weight:700;background:var(--surface);color:var(--ink);border:1.5px solid var(--line2);border-radius:999px;box-shadow:none}
.auth-oauth .oauth-btn:hover{background:var(--mist);border-color:var(--ink)}
.auth-oauth .oauth-btn:disabled{opacity:.6;cursor:progress}
.auth-oauth .oauth-ico{width:20px;height:20px;flex-shrink:0;display:block}
.auth-oauth .form-error{margin:0}
.auth-or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12.5px;font-weight:600;margin:4px 0 14px;text-transform:lowercase}
.auth-or span{flex-shrink:0}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--line)}
[data-theme="dark"] .auth-oauth .oauth-btn{background:var(--surface);border-color:var(--line2);color:var(--ink)}
[data-theme="dark"] .auth-oauth .oauth-btn:hover{background:var(--mist);border-color:var(--ink)}
.auth-switch{text-align:center;font-size:14px;color:var(--muted);margin:18px 0 0}
.auth-nav{display:flex;gap:10px}
.auth-nav .btn{flex:1;padding:12px 18px;font-size:15px}
.auth-nav .btn.ghost{flex:0 0 auto}
.auth-skip{align-self:center;padding:4px 8px}
.opt{font-weight:500;color:var(--muted);font-size:12px;margin-left:4px}
.count{text-align:right}
/* village picker */
.vh-row{display:flex;gap:14px;align-items:flex-start}
.vh-row h1{margin-top:6px}
.vmap{width:88px;height:110px;flex-shrink:0;margin-top:8px;border-radius:10px}
.auth-vsearch{display:flex;align-items:center;gap:8px;border:1px solid var(--line2);border-radius:999px;padding:0 14px;color:var(--muted);margin-bottom:12px;background:var(--surface)}
.auth-vsearch input{border:0;background:none;outline:none;width:100%;padding:10px 0;font-size:16px}
.auth-vsearch:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-l)}
.village-pick{display:flex;flex-direction:column;gap:12px;max-height:46vh;overflow:auto;padding:2px 4px 2px 2px;margin:0 -4px 0 -2px}
.vp-group{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.vp-region{grid-column:1/-1;font-size:11.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.vp{display:flex;align-items:center;gap:6px;text-align:left;border:1.5px solid var(--line2);border-radius:12px;padding:10px 10px;font-size:14px;font-weight:600;background:var(--surface);min-width:0;line-height:1.25}
.vp:hover{border-color:var(--blue)}
.vp.on{border-color:var(--red);background:var(--red-l);color:var(--red-d)}
.vp-pin{font-size:13px}
.vp-check{margin-left:auto;font-weight:800}
.vp-empty{margin:8px 0}
/* photo + bio */
.av-edit{display:flex;gap:18px;align-items:center}
.auth-av{font-size:38px;box-shadow:0 0 0 4px var(--surface),0 0 0 6px var(--line);overflow:hidden}
.auth-av img{width:100%;height:100%;object-fit:cover}
.av-tools{display:flex;flex-direction:column;gap:8px;align-items:flex-start;min-width:0}
.file-btn{position:relative;overflow:hidden;cursor:pointer}
.file-btn input{position:absolute;inset:0;opacity:0;cursor:pointer}
.av-colors .flabel{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:4px}
.av-colors div{display:flex;gap:6px;flex-wrap:wrap}
.av-swatch{width:24px;height:24px;border-radius:50%;box-shadow:inset 0 -2px 0 rgba(0,0,0,.15)}
.av-swatch.on{outline:3px solid var(--ink);outline-offset:2px}
/* interests */
.auth-hello{display:flex;gap:14px;align-items:center;margin:4px 0 12px}
.auth-hello h1{margin:0}
.auth-hello .auth-lede{margin:0}
.auth-hello .auth-av{box-shadow:none;font-size:24px}
.auth-q{margin:0 0 12px;font-size:14.5px}
.interest-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.interest{display:flex;align-items:center;gap:8px;text-align:left;border:1.5px solid var(--line2);border-radius:14px;padding:10px 12px;font-size:13.5px;font-weight:600;background:var(--surface);line-height:1.25}
.interest span{font-size:20px}
.interest.on{border-color:var(--green);background:var(--green-l);color:var(--green-d)}
.interest.on::after{content:"";margin-left:auto;width:16px;height:16px;flex-shrink:0;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.4%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M20 6 9 17l-5-5%27/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.4%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M20 6 9 17l-5-5%27/%3E%3C/svg%3E") center/contain no-repeat}

/* compact art (forms) on desktop keeps the full scene; on mobile it becomes a slim header band */
@media (max-width:820px){
  .auth{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .auth-art{padding:18px 20px 0;min-height:0}
  .welcome .auth-art{min-height:46vh;min-height:46dvh}
  .auth-logo{padding:0;border-radius:0}
  .auth-logo img{height:42px}
  .auth-art-copy{padding:14px 16px 16px;margin:0}
  .welcome .auth-art{min-height:50vh;min-height:50dvh;padding:18px 16px 10px;display:flex;flex-direction:column}
  .welcome .auth-art .auth-art-copy{position:static;margin-top:auto;margin-bottom:4px;padding:12px 14px 14px;max-width:none;z-index:2}
  .auth-art-copy h2{font-size:28px}
  .auth-art-copy p{font-size:14.5px;max-width:330px}
  .auth-polaroids{display:none}
  .pol{width:104px;padding:5px 5px 4px}
  .pol figcaption{font-size:10px}
  .auth-art .auth-credit{display:none}
  .auth-credit.in-card{display:none}
  .auth-art.compact{height:118px;padding:14px 18px}
  .auth-art.compact .auth-art-copy,.auth-art.compact .auth-credit{display:none}
  .auth-panel{align-items:flex-start;padding:22px 20px 32px;border-radius:24px 24px 0 0;margin-top:-22px;position:relative;z-index:1}
  .auth-card h1{font-size:25px}
  .welcome .auth-card h1{font-size:24px}
  .auth-brand{display:none}
  .village-pick{max-height:none;overflow:visible}
  .vp{font-size:13.5px;padding:10px 8px}
}
@media (max-width:360px){ .vp-group,.interest-grid{grid-template-columns:1fr} }

/* ==========================================================================
   Settings & privacy, online status, groups, event attendees, news (Oct 2026)
   ========================================================================== */
.av-status{position:relative;display:inline-flex;flex-shrink:0}
.sdot{position:absolute;right:2%;bottom:2%;width:26%;height:26%;min-width:9px;min-height:9px;max-width:22px;max-height:22px;border-radius:50%;background:#3BB55C;border:2px solid var(--surface);box-sizing:border-box}
.avatar-btn .sdot{border-width:2px}
.pi-status{margin:4px 0 0;font-size:13px;color:var(--ink);display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.pi-status small{display:inline;color:var(--muted);font-size:11.5px}
.sec-h{font-family:var(--display);font-size:17px;margin:4px 2px 10px;display:flex;align-items:center;gap:8px}
.sec-h small{font-family:var(--font);font-size:12px;background:var(--red-l);color:var(--red-d);padding:1px 8px;border-radius:999px;font-weight:700}
.main .inline-search,.modal .inline-search{display:flex}
.inline-search{max-width:none;padding:0 14px;margin:0 0 10px;background:var(--surface)}
.inline-search input{flex:1;border:0;background:none;outline:none;padding:10px 0;font-size:14.5px;min-width:0}
.cat-chips{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 4px;scrollbar-width:none}
.cat-chips::-webkit-scrollbar{display:none}
.link-list .sq{display:grid;place-items:center}

/* Settings */
.set-card{padding:18px 20px}
.set-card h2{font-family:var(--display);font-size:18px;margin:0 0 6px}
.set-row{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line);cursor:pointer}
.set-text b{display:block;font-size:15px}
.set-text small{font-size:13px;margin-top:2px}
.switch{position:relative;flex-shrink:0;width:50px;height:30px}
.switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.switch i{position:absolute;inset:0;border-radius:999px;background:var(--switch-off);transition:.2s}
.switch i::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.25);transition:.2s}
.switch input:checked+i{background:var(--green)}
.switch input:checked+i::after{transform:translateX(20px)}
.switch input:focus-visible+i{outline:3px solid var(--blue);outline-offset:2px}
.set-preview{margin-top:14px;background:var(--mist);border-radius:14px;padding:12px 14px}
.sp-label{text-transform:uppercase;letter-spacing:.6px;font-weight:700;font-size:11px;margin-bottom:8px}
.sp-card{display:flex;gap:12px;align-items:center;background:var(--surface);border-radius:12px;padding:10px 12px;border:1px solid var(--line)}
.set-actions{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 6px}
.set-card .facts small{display:inline;margin-left:4px}

/* Mobile top tabs (Home / News / Groups / Privacy) */
.home-tabs{display:none}
@media (max-width:820px){
  .home-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:-2px -12px 0;padding:0 12px 2px}
  .home-tabs::-webkit-scrollbar{display:none}
  .home-tabs a{flex-shrink:0;padding:7px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-weight:600;font-size:13.5px;color:var(--text-3)}
  .home-tabs a.active{background:var(--inv-bg);border-color:var(--inv-bg);color:var(--inv-fg)}
  .nav-btn[data-view="news"],.nav-btn[data-view="groups"]{display:none}
}
@media (max-width:1360px) and (min-width:821px){ .nav-label{display:none} }

/* Post menu */
.more-wrap{margin-left:auto;position:relative}
.post-menu{position:absolute;right:0;top:36px;z-index:20;background:var(--elev);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;min-width:190px;animation:rise .15s ease}
.post-menu .row-btn{width:100%;font-size:14px;padding:8px 10px}
.hidden-post{padding:16px;font-size:14px}

/* Groups */
.gr-hero .btn{flex-shrink:0}
.gr-chips{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 6px}
.gr-chips::-webkit-scrollbar{display:none}
.gr-chip{display:flex;gap:10px;align-items:center;padding:10px 14px 10px 10px;min-width:210px;max-width:260px;flex-shrink:0}
.gr-chip b{display:block;font-size:14px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.gr-chip-ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:22px;flex-shrink:0}
.gr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-top:10px}
.gr-card{overflow:hidden;display:flex;flex-direction:column}
.gr-cover{height:96px;display:grid;place-items:center;font-size:40px;position:relative}
.gr-cover span{filter:drop-shadow(0 3px 6px rgba(0,0,0,.2))}
.gr-info{padding:12px 14px 14px;display:flex;flex-direction:column;gap:4px;flex:1}
.gr-name{font-family:var(--display);font-weight:600;font-size:15.5px;line-height:1.3}
.gr-desc{margin:4px 0 8px;font-size:13.5px;color:var(--text-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gr-info .btn{margin-top:auto;align-self:flex-start}
.gr-empty{padding:20px}
.gd-head{overflow:hidden}
.gd-cover{height:170px;display:grid;place-items:center;font-size:64px;position:relative}
.gd-back{position:absolute;left:12px;top:12px;background:var(--float);display:grid;place-items:center;color:var(--ink);font-size:18px}
.gd-info{padding:14px 18px 0}
.gd-info h1{font-family:var(--display);font-size:24px;margin:0;line-height:1.2}
.gd-info p{margin:4px 0 10px;font-size:14px}
.gd-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.gd-head .tabs{margin-top:14px}
.gd-locked,.gd-join-cta{display:flex;flex-direction:column;gap:12px;align-items:center;padding:24px}
.gd-join-cta{flex-direction:row;justify-content:center;padding:14px}
#grFeed{display:flex;flex-direction:column;gap:16px}
#grTab{display:flex;flex-direction:column;gap:16px}
.gd-rules{margin:0;padding-left:20px;font-size:14px;display:flex;flex-direction:column;gap:4px}
.gd-about p{margin:0 0 12px}
.av-stack{display:inline-flex;align-items:center;flex-shrink:0}
.av-stack .avatar{border:2px solid var(--surface);box-sizing:content-box;margin-left:-8px;box-shadow:none}
.av-stack .avatar:first-child{margin-left:0}
.gd-stack{margin-left:2px}
.person-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.person-row{display:flex;align-items:center;gap:12px;padding:9px 2px;border-bottom:1px solid var(--line)}
.person-row:last-child{border-bottom:0}
.pr-main{min-width:0;flex:1}
.pr-main b{font-size:14.5px}
.pr-main small{font-size:12.5px}
.you-tag,.admin-tag{display:inline-block;margin-left:6px;font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px;background:var(--green-l);color:var(--green-d);vertical-align:1px}
.admin-tag{background:var(--blue-l);color:var(--blue-d)}
.pl-more,.pl-empty{list-style:none;padding:12px 2px;font-size:13px;text-align:center}
.gc-form{padding:18px 22px 22px;display:flex;flex-direction:column;gap:14px}
.gc-cover{height:110px;border-radius:14px;display:grid;place-items:center;font-size:44px}
.gc-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gc-priv{border:0;padding:0;margin:0}
.gc-priv legend{padding:0;margin-bottom:6px}
.gc-priv label{display:flex;gap:8px;align-items:center;font-weight:500;font-size:14px;padding:4px 0}
.gc-colors{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px}
.swatch{width:32px;height:32px;border-radius:50%;border:3px solid var(--surface);box-shadow:0 0 0 1px var(--line2)}
.swatch.on{box-shadow:0 0 0 3px var(--ink)}
.gc-upload{cursor:pointer}
.gc-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
.modal.gr-create,.modal.ev-create{width:min(560px,100%)}
.f-err{color:var(--red-d);font-weight:600}

/* Events: attendees */
.ev-people{display:flex;align-items:center;gap:10px;text-align:left;margin:0 0 12px;padding:8px 10px;border-radius:12px;background:var(--mist);width:100%}
.ev-people:hover{background:var(--blue-l)}
.ev-ptext{min-width:0;font-size:13px;line-height:1.3}
.ev-ptext small{font-size:12px}
.ev-foot{gap:8px;justify-content:flex-start}
.btn.ghost.on{background:var(--green-l);color:var(--green-d)}
.ev-mine{position:absolute;right:14px;bottom:12px;font-size:11px;font-weight:700;background:var(--surface);color:var(--red-d);padding:2px 8px;border-radius:999px}
.modal.att-modal{width:min(520px,100%)}
.att-body{padding:14px 18px 22px}
.att-ev{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.att-ev strong{display:block;line-height:1.3}
.att-rsvp{display:flex;gap:8px;margin-bottom:6px}
.att-tabs{border-top:0;padding:0;margin:6px 0 12px;border-bottom:1px solid var(--line)}
.att-tabs .tab.active,.gd-head .tab.active{color:var(--red-fg);border-bottom-color:var(--red)}

/* News */
.news-hero .btn{flex-shrink:0}
.news-status{margin:-4px 2px 0;font-size:13px;min-height:1em}
.news-list{display:flex;flex-direction:column;gap:12px}
.news-card{display:flex;gap:14px;padding:14px;color:var(--ink);transition:.15s}
.news-card:hover{border-color:var(--blue);transform:translateY(-1px)}
.nc-img{flex-shrink:0;width:132px;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:var(--mist)}
.nc-img img{width:100%;height:100%;object-fit:cover;display:block}
.nc-body{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}
.nc-meta{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.nc-title{font-family:var(--display);font-weight:600;font-size:16px;line-height:1.3}
.nc-snip{font-size:13.5px;color:var(--text-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nc-link{color:var(--blue-d);font-weight:600;font-size:12.5px}
.src-badge{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;letter-spacing:.2px;color:#fff;background:var(--muted)}
.src-pdn{background:var(--red)}.src-postguam{background:var(--blue-dbg)}.src-kuam{background:var(--green-dbg)}
.src-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:0}
.news-card.skeleton{pointer-events:none}
.news-card.skeleton i{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,var(--mist),var(--skeleton),var(--mist));background-size:200% 100%;animation:shimmer 1.2s infinite}
.news-card.skeleton i:nth-child(2){height:18px;width:85%}.news-card.skeleton i:nth-child(3){width:60%}
@keyframes shimmer{to{background-position:-200% 0}}
.news-fine{text-align:left;margin:4px 2px}
.nw-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.nw-list li{border-bottom:1px dashed var(--line)}
.nw-list li:last-child{border-bottom:0}
.nw-list a{display:block;padding:8px 0;font-size:13.5px;line-height:1.35;color:var(--ink)}
.nw-list a:hover b{color:var(--blue-d)}
.nw-list b{font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nw-empty{padding:6px 0;font-size:13px}
.home-news{display:none}
@media (max-width:1200px){ .home-news{display:block} }
@media (max-width:820px){
  .gr-hero,.news-hero,.events-hero{gap:12px}
  .gr-grid{grid-template-columns:1fr}
  .gd-cover{height:130px;font-size:52px}
  .gd-info h1{font-size:21px}
  .gc-row{grid-template-columns:1fr}
  .gc-form{padding:16px}
  .nc-img{width:96px}
  .news-card{padding:12px;gap:12px}
  .nc-title{font-size:15px}
  .nc-snip{-webkit-line-clamp:2}
  .modal.att-modal,.modal.gr-create,.modal.ev-create{width:100%}
  .pi-status{justify-content:center}
}
.nc-img{align-self:flex-start}
@media (max-width:820px){
  .gr-hero,.news-hero{flex-wrap:wrap;align-items:flex-start}
  .gr-hero .btn,.news-hero .btn{position:relative;z-index:1}
  .vmap{width:100px;height:125px}
}
.gc-priv label input{width:auto;margin:0;padding:0;flex:0 0 auto}
.gc-priv{display:flex;flex-direction:column}

/* ==========================================================================
   Language picker, visitor sign-up / badges, CJK fit (Oct 2026)
   ========================================================================== */
.auth{position:relative}
.lang-wrap{position:relative;z-index:30}
.auth-lang{position:absolute;top:18px;right:20px}
.lang-btn{display:inline-flex;align-items:center;gap:6px;background:var(--float);border:1px solid var(--line2);border-radius:999px;padding:7px 12px 7px 10px;font-size:13.5px;font-weight:600;color:var(--ink);box-shadow:0 4px 14px rgba(30,42,48,.10)}
.lang-btn .ico{width:18px;height:18px;color:var(--blue-d)}
.lang-btn:hover,.lang-btn[aria-expanded="true"]{border-color:var(--blue);background:var(--surface)}
.lang-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;background:var(--elev);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-pop);padding:6px;display:flex;flex-direction:column;gap:2px}
.lang-menu[hidden]{display:none}
.lang-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;padding:9px 12px;border-radius:10px;font-size:14.5px;font-weight:600}
.lang-opt small{display:inline;font-weight:500;font-size:12px}
.lang-opt:hover,.lang-opt:focus-visible{background:var(--mist);outline:none}
.lang-opt.on{background:var(--red-l);color:var(--red-d)}
.lang-menu.inline{position:static;box-shadow:none;border:0;padding:0 0 4px 46px;min-width:0}
.lang-menu.inline .lang-opt{padding:7px 10px;font-size:14px}
.acct-lang .row-btn small{display:block;font-size:12px}
.acct-chev{margin-left:auto;color:var(--muted);font-size:18px;transition:transform .15s}
.acct-lang [aria-expanded="true"] .acct-chev{transform:rotate(90deg)}
.lang-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;margin:8px 0 10px}
.lang-row{display:flex;align-items:center;gap:8px;text-align:left;border:1.5px solid var(--line2);border-radius:12px;padding:10px 12px;font-weight:600;font-size:14.5px;background:var(--surface);min-width:0}
.lang-row small{display:inline;font-weight:500;font-size:11.5px;margin-left:auto}
.lang-row b{margin-left:auto;color:var(--red-d)}
.lang-row.on small{display:none}
.lang-row:hover{border-color:var(--blue)}
.lang-row.on{border-color:var(--red);background:var(--red-l);color:var(--red-d)}
.fine .link,.fine a{color:var(--blue-d)}
@media (max-width:820px){
  .auth-lang{top:14px;right:14px}
  .lang-btn{padding:6px 10px 6px 8px;font-size:13px}
}

/* sign-up step 2: local vs visitor */
.who-pick{display:flex;flex-direction:column;gap:8px;margin:2px 0 14px}
.who-opt{display:flex;align-items:center;gap:12px;text-align:left;border:1.5px solid var(--line2);border-radius:14px;padding:11px 14px;background:var(--surface);cursor:pointer;min-width:0}
.who-opt:hover{border-color:var(--blue)}
.who-opt.on{border-color:var(--red);background:var(--red-l)}
.who-opt.on .who-txt b{color:var(--red-d)}
.who-opt input{position:absolute;opacity:0;pointer-events:none}
.who-opt:focus-within{box-shadow:0 0 0 3px var(--blue-l)}
.who-ico{font-size:24px;line-height:1;flex-shrink:0;width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--mist)}
.who-opt[data-who="visitor"] .who-ico,.who-opt:has(input[value="visitor"]) .who-ico{background:var(--blue-l)}
.who-txt{display:flex;flex-direction:column;min-width:0}
.who-txt b{font-size:15px;line-height:1.3}
.who-txt small{font-size:12.5px;line-height:1.35}
.vmap-wrap{position:relative;flex-shrink:0}
.vmap-wrap.visitor .gm-land{fill:var(--gm-land-v);stroke:var(--blue-d)}
.vmap-wrap.visitor .gm-dot{fill:var(--red);opacity:.8}
.vmap-plane{position:absolute;top:2px;left:-6px;font-size:22px;animation:wig-fly 2.6s ease-in-out infinite;filter:drop-shadow(0 2px 3px rgba(30,42,48,.25))}
.vmap-tag{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);white-space:nowrap;background:var(--blue-dbg);color:#fff;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:999px}
@keyframes wig-fly{0%,100%{transform:translate(0,0) rotate(-8deg)}50%{transform:translate(8px,-5px) rotate(-2deg)}}
@media (prefers-reduced-motion:reduce){.vmap-plane{animation:none}}
.visitor-field input{font-size:16px;padding:12px 14px}
.home-sugg{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 2px}
.home-chip{display:inline-flex;align-items:center;gap:5px;border:1.5px solid var(--line2);border-radius:999px;padding:6px 11px;font-size:13px;font-weight:600;background:var(--surface)}
.home-chip:hover{border-color:var(--blue)}
.home-chip.on{border-color:var(--blue-d);background:var(--blue-l);color:var(--blue-ink)}
#homeHint{margin-top:6px;line-height:1.45}

/* Plane "Visitor from …" badge (profile, posts, comments, stories, listings, attendees, members) */
.visitor-badge{display:inline-flex;align-items:center;gap:3px;max-width:100%;background:var(--blue-l);color:var(--blue-ink);font-weight:600;border-radius:999px;padding:0 8px;line-height:1.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.visitor-badge.sm{font-size:11px;margin:0 0 0 6px;padding:0 6px}
.bubble .visitor-badge.sm{display:inline-flex}
.sv-who .visitor-badge{background:rgba(255,255,255,.22);color:#fff}
.auth-lede .visitor-badge{font-size:14px}

/* Settings: local / visitor + language */
.set-sub{margin:0 0 10px;font-size:13.5px}
.set-who{margin-bottom:10px}
.set-field{max-width:420px}
.set-field select,.set-field input{width:100%}

/* CJK + long-word languages: wrap instead of overflowing at 390px */
html:lang(ja) body,html:lang(zh) body{line-break:strict;overflow-wrap:anywhere}
html:lang(ko) body{word-break:keep-all;overflow-wrap:anywhere}
html:lang(ja) .auth-art-copy h2,html:lang(ko) .auth-art-copy h2,html:lang(zh) .auth-art-copy h2{font-size:38px;line-height:1.25}
html:lang(ja) .auth-card h1,html:lang(ko) .auth-card h1,html:lang(zh) .auth-card h1{line-height:1.3}
html:lang(tl) .nav-label,html:lang(ch) .nav-label{font-size:12px}
.nav-label,.bottom-tabs a span{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.bottom-tabs a{min-width:0}
@media (max-width:820px){
  html:lang(ja) .auth-art-copy h2,html:lang(ko) .auth-art-copy h2,html:lang(zh) .auth-art-copy h2{font-size:25px}
  .bottom-tabs a span{font-size:10.5px}
}

/* ---------- Line icons: mobile bottom bar, Home top tabs, Filters button ---------- */
.tab-ico,.ht-ico{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.btn-ico{width:17px;height:17px;vertical-align:-3px;margin-right:6px}
@media (max-width:820px){
  .bottom-tabs{padding:7px 0 calc(6px + env(safe-area-inset-bottom))}
  .bottom-tabs a{font-size:0;gap:3px;color:var(--tab-ico);-webkit-tap-highlight-color:transparent}
  .bottom-tabs a span{font-size:10.5px;font-weight:600;line-height:1.2;color:inherit}
  .bottom-tabs .tab-ico{width:24px;height:24px;stroke-width:1.8;transition:stroke-width .15s}
  .bottom-tabs a.active{color:var(--red-fg)}
  .bottom-tabs a.active .tab-ico{stroke-width:2.2;fill:currentColor;fill-opacity:.12}
  .bottom-tabs a.active span{color:var(--red-fg)}
  .tab-badge{top:-4px;left:calc(50% + 5px);line-height:1}
  .home-tabs a{display:inline-flex;align-items:center;gap:6px}
  .ht-ico{width:16px;height:16px;stroke-width:2;color:var(--tab-ico)}
  .home-tabs a.active .ht-ico{color:var(--inv-fg)}
}
@media (max-width:379px){ .bottom-tabs a span{font-size:9.5px;letter-spacing:-.3px} html:lang(ja) .bottom-tabs a span,html:lang(tl) .bottom-tabs a span{font-size:9px;letter-spacing:-.4px} }

/* ---------- Line icons (js/icons.js): Lucide-style 24px strokes, currentColor, round caps ----------
   Replace every emoji in site chrome. Inline icons scale with text (1.15em); "emoji slots" below size them
   to the slot's font-size (1em) so the old emoji containers keep their layout. */
.i{display:inline-block;vertical-align:-.22em;flex-shrink:0;overflow:visible}
.i.ext{width:.95em;height:.95em;vertical-align:-.14em;opacity:.85}
.h-ico{color:var(--red-fg);width:.92em;height:.92em;vertical-align:-.1em;stroke-width:2}
.toast{display:flex;align-items:center;justify-content:center;gap:8px}
.toast-ico{color:#F4A79D}
/* neutral grey in meta lines, facts, chips */
.facts .i,.tag.plain .i,.ex-area .i,.muted .i,.room-group .i,.post-menu .i,.where .i,.pi-status .i,.msg-ref .i,.cat-chip .i,.tool .i:not([style]),.chip-btn .i{color:var(--muted)}
.cat-chip.active .i,.chip-btn.active .i{color:inherit}
.chip-btn:hover .i{color:inherit}
.visitor-badge .i{color:inherit;width:1.05em;height:1.05em;vertical-align:-.18em}
.where{white-space:nowrap}
/* post actions + reactions */
.act{display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;min-width:0}
.act .i{width:19px;height:19px}
.act.liked .i{color:var(--red-fg)}
.react-ico{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--red);color:#fff;vertical-align:-4px}
.react-ico .i{vertical-align:0}
.stars .i{vertical-align:-.16em}
/* square row icons (sidebars, account menu) */
.sq{color:var(--text-2)}
.sq .i{width:18px;height:18px}
.sq.red .i{color:var(--red-fg)}
.chip-chat .i{width:15px;height:15px;color:var(--blue-d)}
.icon-btn{display:inline-grid;place-items:center}
.icon-btn .i,.modal-bar .icon-btn .i{width:22px;height:22px}
.gd-back .i{width:20px;height:20px}
.ph-x{display:grid;place-items:center}.ph-x .i{width:14px;height:14px}
.photo-add .i{width:26px;height:26px}
.acct-chev{display:grid;place-items:center}.acct-chev .i{width:18px;height:18px}
.lang-opt b .i,.lang-row b .i,.vp-check .i{width:16px;height:16px;stroke-width:2.4}
.vp-pin .i{width:15px;height:15px;color:var(--red-fg)}
.ex-tip .i{flex-shrink:0;width:18px;height:18px;margin-top:1px;color:var(--green-d)}
.empty .lead{display:block;margin:0 auto 10px;width:34px;height:34px;color:var(--muted);stroke-width:1.6}
.interest-tags .tag .i{color:inherit}
/* emoji slots -> icons sized by the slot's font-size */
.hero-wave{color:var(--green);line-height:1;display:grid}
.hero-wave .i,.ex-hero-emoji .i,.ce-emoji .i,.b-emoji .i,.tile-emoji .i,.ex-emoji .i,.sv-emoji .i,.sv-burst .i,.gr-cover .i,.gd-cover .i,.gc-cover .i,.gr-chip-ico .i,.room-ico .i,.who-ico .i,.interest span .i,.sc-sticker .i,.vmap-plane .i{width:1em;height:1em;vertical-align:0;display:block}
.hero-wave .i{stroke-width:1.6}
.ex-hero-emoji{color:var(--red-fg);display:grid}.ex-hero-emoji .i{stroke-width:1.7}
.ce-emoji{display:inline-grid;place-items:center;width:84px;height:84px;border-radius:50%;background:var(--red-l);color:var(--red-fg);font-size:38px}
.ce-emoji .i{stroke-width:1.7}
.b-emoji{color:#fff;display:grid}.b-emoji .i{stroke-width:1.5}
.tile-emoji{display:grid;color:var(--tink);opacity:.9}.tile-emoji .i{stroke-width:1.5}
.tile.big .tile-emoji .i{stroke-width:1.2}
.tile.thumb .tile-emoji .i,.tile.mini .tile-emoji .i,.tile.sq-tile .tile-emoji .i{stroke-width:1.9}
.ex-emoji{display:grid;color:#fff;opacity:.94}.ex-emoji .i{stroke-width:1.5}
.ex-tile.big .ex-emoji .i{stroke-width:1.2}
.sv-emoji{display:inline-grid;color:#fff}.sv-emoji .i{stroke-width:1.4;margin:0 auto}
.sv-burst{color:var(--red-fg);filter:drop-shadow(0 6px 18px rgba(0,0,0,.3))}
.gr-cover,.gd-cover,.gc-cover,.gr-chip-ico{color:#fff}
.gr-cover span,.gd-cover span,.gc-cover span{display:grid}
.gr-cover .i,.gd-cover .i,.gc-cover .i{stroke-width:1.6}
.room-ico.lg{color:var(--red-fg)}
.who-ico{color:var(--green-d)}.who-ico .i{width:22px;height:22px}
.who-opt[data-who="visitor"] .who-ico,.who-opt:has(input[value="visitor"]) .who-ico{color:var(--blue-d)}
.interest span{display:grid;color:var(--muted)}.interest.on span{color:inherit}
.interest span .i{stroke-width:1.8}
.sc-sticker .i{width:22px;height:22px}
.sc-sticker.active{color:var(--red-fg)}
.vmap-plane{color:var(--blue-d)}
.sv-btn .i{width:20px;height:20px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.45))}
.sv-btn .i-fill{width:16px;height:16px}
.sv-send .i{width:20px;height:20px}
.sv-cta .i{vertical-align:-.25em}
.ex-facts dt{display:flex;align-items:flex-start;gap:6px}
.ex-facts dt .i{width:16px;height:16px;margin-top:1px;color:var(--blue-d);stroke-width:2}
.tile-emoji{font-size:clamp(50px,9vw,72px)}
.tile.big .tile-emoji{font-size:110px}
.tile.thumb .tile-emoji{font-size:26px}.tile.mini .tile-emoji{font-size:20px}.tile.sq-tile .tile-emoji{font-size:18px}
@media (max-width:820px){ .tile.big .tile-emoji{font-size:84px} }

/* ==========================================================================
   Appearance: Light / Dark / Auto (js/theme.js; preference applied in <head> before first paint)
   Brand colours stay; tints, surfaces and text flip. Everything above uses the tokens from :root.
   ========================================================================== */
[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0f1115; --surface:#171a21; --surface-2:#1a1e26; --elev:#1e222b; --field:#12151b;
  --mist:#242933; --line:#2a2f39; --line2:#383e4a;
  --ink:#e8eaed; --text-2:#b8bec8; --text-3:#c5cad2; --muted:#9aa1ad; --tab-ico:#9aa1ad;
  --red-l:#3a2220; --red-d:#F3A49A; --red-fg:#EE8478; --brown-l:#33261d; --brown-fg:#E2B28F;
  --green-l:#1b3021; --green-d:#8FCC96; --blue-l:#1a2b3a; --blue-d:#8EC1E4;
  --blue-ink:#AFD2EC; --green-ink:#AEDBB3;
  --topbar:rgba(23,26,33,.92); --float:rgba(30,34,43,.9); --bubble:#262b35; --skeleton:#30363f;
  --switch-off:#4a515e; --seen-ring:#4a515e; --inv-bg:#C74C40; --inv-fg:#fff; --toast-bg:#2c323d;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 4px 14px rgba(0,0,0,.22);
  --shadow-pop:0 14px 44px rgba(0,0,0,.55); --shadow-hover:0 10px 28px rgba(0,0,0,.45); --backdrop:rgba(4,6,9,.66);
  --gm-sea:#14273a; --gm-land:#1d3a25; --gm-land-v:#24452d; --gm-label:#AEDBB3; --gm-wave:#4f86ad;
  scrollbar-color:#3d4450 transparent;
}
html[data-theme="dark"]{background:#0f1115}
[data-theme="dark"] ::placeholder{color:#8a919d;opacity:1}
[data-theme="dark"] ::-webkit-scrollbar{width:10px;height:10px}
[data-theme="dark"] ::-webkit-scrollbar-track{background:transparent}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#3d4450;border-radius:10px;border:2px solid transparent;background-clip:padding-box}
[data-theme="dark"] .card{border-color:var(--line)}
[data-theme="dark"] .toast{border:1px solid #3a414d;box-shadow:0 10px 30px rgba(0,0,0,.5)}
[data-theme="dark"] .toast-ico{color:#F4A79D}
[data-theme="dark"] .badge,[data-theme="dark"] .tab-badge{border-color:var(--surface)}
[data-theme="dark"] .btn.ghost{background:#20354a;color:#B5D7F0}
[data-theme="dark"] .btn.ghost:hover{background:#264059}
[data-theme="dark"] .btn.ghost.on{background:var(--green-l);color:var(--green-d)}
[data-theme="dark"] .btn.danger{background:var(--red-l);color:var(--red-d)}
[data-theme="dark"] .chip-btn:hover{background:var(--green-l);color:var(--green-d)}
[data-theme="dark"] .hero{background:linear-gradient(110deg,var(--surface) 35%,#1a2a38 100%)}
[data-theme="dark"] .events-hero{background:linear-gradient(110deg,var(--surface) 35%,#1b2e22 100%)}
[data-theme="dark"] .ex-head{background:linear-gradient(110deg,var(--surface) 45%,#1b2e22 100%)}
[data-theme="dark"] .cover svg{filter:brightness(.78) saturate(.95)}
[data-theme="dark"] .tile:not(.photo){background:linear-gradient(var(--ang,150deg),color-mix(in srgb,var(--tink) 34%,#171a21),color-mix(in srgb,var(--tink) 16%,#13161c))}
[data-theme="dark"] .tile:not(.photo) .tile-emoji{color:color-mix(in srgb,var(--tink) 45%,#fff)}
[data-theme="dark"] .tile-deco circle{opacity:.12}
[data-theme="dark"] .tile-deco path{color:color-mix(in srgb,var(--tink) 60%,#fff)}
[data-theme="dark"] .ex-tag{background:color-mix(in srgb,var(--tc) 30%,#171a21);color:color-mix(in srgb,var(--tc) 38%,#fff)}
[data-theme="dark"] .ex-tag-pos .ex-tag{background:rgba(18,21,27,.86);color:color-mix(in srgb,var(--tc) 38%,#fff);box-shadow:0 2px 8px rgba(0,0,0,.35)}
[data-theme="dark"] .sq.tinted,[data-theme="dark"] .room-ico.tinted{background:color-mix(in srgb,var(--tc) 26%,#171a21)!important;color:color-mix(in srgb,var(--tc) 40%,#fff)!important}
[data-theme="dark"] .ex-chips span{color:var(--text-2)}
[data-theme="dark"] .ev-tag,[data-theme="dark"] .ev-mine{background:var(--surface);color:var(--red-d)}
[data-theme="dark"] .gm-n path{fill:#8EC1E4}[data-theme="dark"] .gm-n text{fill:#8EC1E4}
[data-theme="dark"] .gm-dot{fill:#8FCC96;opacity:.55}
[data-theme="dark"] .gm-halo{opacity:.3}
[data-theme="dark"] .map{background:var(--gm-sea)}
[data-theme="dark"] .ex-credit a{text-decoration-color:rgba(142,193,228,.45)}
[data-theme="dark"] .sdot{border-color:var(--surface)}
[data-theme="dark"] .avatar{box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
[data-theme="dark"] .stories-scroll{background:var(--elev);box-shadow:0 2px 10px rgba(0,0,0,.5)}
[data-theme="dark"] .switch i::after{background:#e8eaed}
[data-theme="dark"] .msg-bubble{color:var(--ink)}
[data-theme="dark"] .msg.mine .msg-bubble{color:#fff}
[data-theme="dark"] .chat-msgs{background:linear-gradient(180deg,var(--surface),#16202b 260%)}
[data-theme="dark"] .auth-feats li .i{filter:brightness(1.15)}
[data-theme="dark"] .auth-art{color:#fff}
[data-theme="dark"] .auth-demo-btn{color:var(--green-d)}
[data-theme="dark"] .modal-bar .icon-btn{color:var(--ink)}
[data-theme="dark"] .vmap-tag{background:var(--blue-dbg)}
[data-theme="dark"] .src-badge{color:#fff}
[data-theme="dark"] .home-chip.on{border-color:#5f9fcc}
[data-theme="dark"] .sc-swatch,[data-theme="dark"] .swatch{border-color:var(--elev)}
[data-theme="dark"] img.logo{filter:drop-shadow(0 0 1px rgba(0,0,0,.4))}

/* Theme controls */
.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}
.theme-seg{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;border-radius:14px;background:var(--mist);border:1px solid var(--line)}
.theme-opt{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 14px;border-radius:10px;font-weight:600;font-size:14px;color:var(--text-2);transition:background .15s,color .15s;white-space:nowrap}
.theme-opt .i{width:18px;height:18px}
.theme-opt:hover{color:var(--ink)}
.theme-opt.on{background:var(--surface);color:var(--red-fg);box-shadow:0 1px 3px rgba(0,0,0,.14)}
[data-theme="dark"] .theme-opt.on{background:#323946;color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.4)}
[data-theme="dark"] .theme-opt.on .i{color:var(--red-fg)}
.theme-opt:focus-visible{outline:3px solid var(--blue);outline-offset:1px}
.set-theme{display:flex;flex-direction:column;gap:8px;align-items:flex-start;margin:4px 0 6px}
.set-theme .theme-seg{width:100%;max-width:420px}
.theme-now{font-size:13px}
.acct-theme{display:flex;align-items:center;gap:10px;padding:5px 8px;font-weight:500;font-size:14px}
.acct-theme > span:nth-child(2){flex:1;min-width:0}
.theme-seg.compact{padding:3px;gap:2px;border-radius:12px}
.theme-seg.compact .theme-opt{padding:6px 9px;border-radius:9px}
.theme-seg.compact .theme-opt .i{width:17px;height:17px}
.auth-corner{position:absolute;top:18px;right:20px;z-index:30;display:flex;align-items:center;gap:8px}
.auth-corner .lang-wrap{position:relative}
.theme-btn{width:38px;height:38px;display:inline-grid;place-items:center;border-radius:50%;background:var(--float);border:1px solid var(--line2);color:var(--ink);box-shadow:0 4px 14px rgba(30,42,48,.10)}
.theme-btn .i{width:18px;height:18px;color:var(--blue-d)}
.theme-btn:hover{border-color:var(--blue)}
@media (max-width:820px){ .auth-corner{top:14px;right:14px;gap:6px} .theme-btn{width:34px;height:34px} }
[data-theme="dark"] .ex-tile:not(.has-photo){filter:brightness(.82) saturate(.95)}
.theme-opt{min-width:0}
.theme-opt span:not(.sr-only){min-width:0;overflow:hidden;text-overflow:ellipsis}
@media (max-width:420px){ .set-theme .theme-opt{padding:9px 8px;gap:5px;font-size:13.5px} }

/* ---------- Supabase-backed states (loading, empty panels, uploads) ---------- */
@keyframes wig-spin{to{transform:rotate(360deg)}}
.spin{animation:wig-spin 1s linear infinite}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}
.loading-card{color:var(--muted)}
.post-media{margin:4px 0 8px;background:var(--mist)}
.post-media img{display:block;width:100%;max-height:520px;object-fit:cover}
.panel-empty{margin:6px 8px 10px;font-size:14px;line-height:1.45}
.dropdown .unread-note{background:var(--mist)}
.dropdown .note q{color:var(--muted)}
.dropdown .panel-all{justify-content:center;font-weight:600;margin-top:4px}
.ev-desc{font-size:13.5px;margin:6px 0 0;color:var(--ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pr-actions{display:flex;gap:6px;margin-left:auto;flex-shrink:0}
.gd-pending-h{margin-top:4px}
.gd-pending{margin-bottom:14px}
.set-profile{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:6px 0 12px}
.set-photo{position:relative;display:flex;align-items:center;gap:12px;cursor:pointer}
.set-photo input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.set-photo-btn{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:14px;padding:7px 12px;border-radius:999px;border:1px solid var(--line2);background:var(--surface)}
.set-photo:focus-within .set-photo-btn{outline:2px solid currentColor;outline-offset:2px}
.set-field textarea{width:100%;font:inherit}
.chat-empty .spin{width:28px;height:28px;color:var(--muted);margin-bottom:6px}

/* ---------- Verified badge, social links, business pages, verification & admin ---------- */
.vbadge{display:inline-flex;vertical-align:-.14em;margin-left:4px;font-size:1.05em;line-height:1;flex-shrink:0}
.vbadge svg{display:block;width:1em;height:1em}
.who-link{color:inherit}
.who-link:hover{text-decoration:underline}
.social-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.soc-btn{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--mist);color:var(--text-3);border:1px solid var(--line);transition:background .15s,color .15s,transform .15s}
.soc-btn:hover{background:var(--blue-l);color:var(--blue-d);transform:translateY(-1px)}
.soc-btn:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.soc-add{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:13px;font-weight:600;color:var(--blue-d)}
.soc-fields{border:1px solid var(--line);border-radius:14px;padding:12px 14px 6px;margin:14px 0 4px;display:grid;grid-template-columns:1fr 1fr;gap:4px 14px}
.soc-fields legend{font-weight:600;font-size:14px;padding:0 6px;display:flex;align-items:center;gap:6px}
.soc-fields .set-sub{grid-column:1/-1;margin:0 0 6px}
.soc-field{display:flex;flex-direction:column;gap:4px;margin-bottom:8px;min-width:0}
.soc-field label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--text-3)}
.soc-ico{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--mist);color:var(--text-3)}
.soc-field input{border:1px solid var(--line2);border-radius:12px;padding:9px 12px;font-size:14.5px;background:var(--field);outline:none;width:100%}
.soc-field input:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-l)}
@media (max-width:820px){ .soc-fields{grid-template-columns:1fr} .soc-field input{font-size:16px} }

body[data-view="biz"] .layout,body[data-view="admin"] .layout{grid-template-columns:280px minmax(0,984px)}
body[data-view="biz"] .sidebar.right,body[data-view="admin"] .sidebar.right{display:none}
@media (max-width:1200px){ body[data-view="biz"] .layout,body[data-view="admin"] .layout{grid-template-columns:240px minmax(0,1fr)} }
@media (max-width:820px){ body[data-view="biz"] .layout,body[data-view="admin"] .layout{grid-template-columns:1fr} }

.st-tag{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;background:var(--mist);color:var(--muted);vertical-align:middle;white-space:nowrap}
.st-tag.st-pending{background:var(--brown-l);color:var(--brown-fg)}
.st-tag.st-approved{background:var(--green-l);color:var(--green-d)}
.st-tag.st-rejected,.st-tag.st-suspended{background:var(--red-l);color:var(--red-d)}
.st-tag.st-featured{background:var(--blue-l);color:var(--blue-d)}

.biz-logo{display:grid;place-items:center;flex-shrink:0;border-radius:22%;color:#fff;font-weight:700;overflow:hidden;border:2px solid var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.biz-logo img{width:100%;height:100%;object-fit:cover;display:block}
.biz-head{overflow:hidden;padding-bottom:16px}
.biz-cover{position:relative;height:200px;background:linear-gradient(135deg,var(--c1),var(--c2));display:grid;place-items:center;color:rgba(255,255,255,.85)}
.biz-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.biz-cover-ico{font-size:72px;display:grid}
.biz-cover-ico .i{width:1em;height:1em;stroke-width:1.3}
.biz-id{display:flex;align-items:flex-end;gap:16px;padding:0 22px;margin-top:-42px;position:relative}
.biz-id .biz-logo{border-width:4px;border-color:var(--surface)}
.biz-title{flex:1;min-width:0;padding-top:46px}
.biz-title h1{margin:0;font-family:var(--display);font-size:25px;line-height:1.25}
.biz-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:6px 0 0;color:var(--muted);font-size:13.5px}
.biz-meta>span{display:inline-flex;align-items:center;gap:4px}
.price{font-weight:700;color:var(--green-d);letter-spacing:.5px}
.open-line{display:flex;align-items:center;gap:6px;margin:6px 0 0;font-weight:600;font-size:13.5px}
.open-line .odot{width:8px;height:8px;border-radius:50%;background:currentColor}
.open-line.is-open{color:var(--green-d)}
.open-line.is-closed{color:var(--red-fg)}
.biz-status{display:flex;gap:12px;align-items:flex-start;margin:14px 22px 0;padding:12px 14px;border-radius:12px;background:var(--brown-l);color:var(--brown-fg)}
.biz-status b{display:block}
.biz-status small{color:inherit;opacity:.9}
.biz-status.st-rejected,.biz-status.st-suspended{background:var(--red-l);color:var(--red-d)}
.biz-actions{display:flex;flex-wrap:wrap;gap:8px;padding:14px 22px 0}
.biz-actions .btn{display:inline-flex;align-items:center;gap:6px}
.biz-actions .btn[disabled]{opacity:.55;cursor:not-allowed}
.biz-socials{padding:0 22px}
.biz-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
.biz-main,.biz-side{display:flex;flex-direction:column;gap:16px;min-width:0}
.biz-side h3 .i,.biz-main h3 .i{margin-right:2px}
.biz-side h3,.biz-main h3{justify-content:flex-start;gap:6px}
.biz-desc{margin:0 0 10px;color:var(--text-3)}
.biz-side .facts a{color:var(--blue-d);font-weight:600}
.hours-table{margin:0;display:flex;flex-direction:column;gap:2px;font-size:14px}
.hours-table div{display:flex;justify-content:space-between;gap:10px;padding:5px 8px;border-radius:8px}
.hours-table dt{font-weight:500}
.hours-table dd{margin:0;text-align:right}
.hours-table .today{background:var(--blue-l);color:var(--blue-ink);font-weight:600}
.biz-map .gmap{width:100%;height:auto;max-height:260px;display:block}
.biz-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.biz-photos img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;display:block}
.biz-dash{padding:16px 20px}
.biz-dash h3{margin:0 0 12px;font-family:var(--display);font-size:16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.biz-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.biz-stats>div{background:var(--mist);border-radius:12px;padding:10px 12px}
.biz-stats b{display:flex;align-items:center;gap:4px;font-size:20px;font-family:var(--display)}
.biz-stats small{font-size:12px}
.biz-dash .set-actions{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
.biz-composer form{display:flex;flex-direction:column;gap:10px}
.seg-row{display:flex;gap:6px;flex-wrap:wrap}
.seg-opt{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;border:1px solid var(--line2);font-size:13.5px;font-weight:600;cursor:pointer;color:var(--text-2);background:var(--surface)}
.seg-opt input{position:absolute;opacity:0;pointer-events:none}
.seg-opt.on{background:var(--blue-l);border-color:transparent;color:var(--blue-d)}
.seg-opt:focus-within{outline:3px solid var(--blue);outline-offset:1px}
.bp-title{border:1px solid var(--line2);border-radius:12px;padding:9px 12px;background:var(--field);outline:none;font-weight:600}
.bp-ends{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.bp-ends input{border:1px solid var(--line2);border-radius:10px;padding:5px 8px;background:var(--field)}
.file-tool{cursor:pointer}
.biz-post{padding:12px 0;border-top:1px solid var(--line)}
.biz-post:first-child{border-top:0;padding-top:2px}
.biz-post header{display:flex;align-items:center;gap:10px}
.biz-post header>div{flex:1;min-width:0}
.biz-post header b{display:flex;align-items:center;font-size:14px}
.biz-post h4{margin:8px 0 2px;font-size:15.5px}
.biz-post p{margin:6px 0 0;white-space:normal}
.biz-post.deal{background:linear-gradient(90deg,var(--red-l),transparent 70%);margin:0 -16px;padding:12px 16px;border-radius:0}
.biz-post.expired{opacity:.6}
.deal-tag{display:inline-flex;align-items:center;gap:3px;color:var(--red-fg);font-weight:700}
.bp-photo{width:100%;max-height:340px;object-fit:cover;border-radius:12px;margin-top:8px;display:block}
.icon-btn.sm{width:30px;height:30px;font-size:16px;display:grid;place-items:center}

.biz-card .biz-card-top{display:flex;align-items:center;gap:8px}
.biz-card .biz-card-top .ex-name{margin:0;display:flex;align-items:center;min-width:0}
.biz-card.featured{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-l),var(--shadow)}
.feat-tag{position:absolute;right:10px;top:10px;z-index:2;display:inline-flex;align-items:center;gap:4px;background:var(--float);color:var(--blue-d);font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px}
.biz-chip{display:inline-flex;align-items:center;gap:4px}
.open-chip{color:var(--green-d)!important;background:var(--green-l)!important}
.closed-chip{color:var(--red-d)!important;background:var(--red-l)!important}
.ex-biz-cta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0 2px;padding:10px 12px;border-radius:12px;background:var(--surface);border:1px dashed var(--line2);font-size:13.5px;color:var(--text-2)}
.ex-biz-cta span{flex:1 1 200px}
.ex-biz-cta .btn{display:inline-flex;align-items:center;gap:6px}
.ex-claim{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:var(--mist);color:var(--text-2)}
.ex-claim span{flex:1;min-width:0}
.ex-claim b{display:flex;align-items:center;color:var(--ink)}
.ex-claim.official:hover{background:var(--blue-l)}

.bf-head{padding:16px 20px}
.bf-title{display:flex;gap:10px;align-items:flex-start}
.bf-title .icon-btn{display:grid;place-items:center;flex-shrink:0;color:var(--ink)}
.bf-title h1{margin:0;font-family:var(--display);font-size:22px}
.bf-title p{margin:2px 0 0}
.bf-claim{display:flex;gap:10px;margin-top:12px;padding:10px 12px;border-radius:12px;background:var(--blue-l);color:var(--blue-ink);font-size:13.5px}
.stepper{list-style:none;display:flex;gap:6px;margin:16px 0 0;padding:0;counter-reset:s}
.stepper li{flex:1;min-width:0}
.step-btn{width:100%;display:flex;align-items:center;gap:8px;padding:8px;border-radius:12px;font-size:13px;font-weight:600;color:var(--muted);background:var(--mist);text-align:left}
.step-btn[disabled]{cursor:default}
.step-n{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line2);flex-shrink:0;font-size:12px}
.step-l{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stepper li.on .step-btn{background:var(--red-l);color:var(--red-fg)}
.stepper li.on .step-n{background:var(--red);color:#fff;border-color:transparent}
.stepper li.done .step-n{background:var(--green);color:#fff;border-color:transparent}
.bf-form{padding:18px 20px;display:flex;flex-direction:column;gap:12px}
.bf-form h2{margin:0;font-family:var(--display);font-size:18px}
.bf-form .hint{font-weight:400}
.bf-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bf-price{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.bf-price legend{font-size:13px;font-weight:600;color:var(--text-3);margin-bottom:6px;padding:0}
.bf-map{border-radius:14px;overflow:hidden;border:1px solid var(--line);max-width:360px;margin:0 auto;width:100%;cursor:crosshair;touch-action:manipulation}
.bf-map .gmap{display:block;width:100%;height:auto}
.bf-coords{margin:0;text-align:center;font-size:13px;color:var(--muted);display:flex;justify-content:center;align-items:center;gap:4px}
.bf-map-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.bf-hours{border:1px solid var(--line);border-radius:14px;padding:10px 14px 14px;margin:0;display:flex;flex-direction:column;gap:6px}
.bf-hours legend{font-weight:600;font-size:14px;padding:0 6px;display:flex;align-items:center;gap:6px}
.bf-hours legend small{display:inline}
.hours-row{display:grid;grid-template-columns:minmax(80px,1fr) auto 1fr auto 1fr;align-items:center;gap:8px;font-size:14px}
.hours-row input[type=time]{border:1px solid var(--line2);border-radius:10px;padding:6px 8px;background:var(--field);min-width:0;width:100%}
.hours-row input[disabled]{opacity:.45}
.hr-open-toggle{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--muted)}
.bf-hours>.btn{align-self:flex-start;margin-top:4px;display:inline-flex;align-items:center;gap:6px}
.bf-up{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.bf-up label.btn,.bf-up .btn{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.bf-logo-prev{width:84px;height:84px;border-radius:22%;background:var(--mist);display:grid;place-items:center;overflow:hidden;color:var(--muted)}
.bf-cover-prev{width:100%;aspect-ratio:16/7;border-radius:12px;background:linear-gradient(135deg,var(--c1),var(--c2));display:grid;place-items:center;overflow:hidden;color:#fff}
.bf-logo-prev img,.bf-cover-prev img{width:100%;height:100%;object-fit:cover}
.bf-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;width:100%}
.bf-thumb{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--mist)}
.bf-thumb img{width:100%;height:100%;object-fit:cover}
.bf-thumb .icon-btn{position:absolute;top:4px;right:4px;background:var(--float);color:var(--ink)}
.bf-thumb.add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:1.5px dashed var(--line2);color:var(--muted);font-size:12px;font-weight:600;cursor:pointer}
.bf-review{background:var(--mist);border-radius:14px;padding:12px 14px}
.bf-review h3{margin:0 0 8px;font-size:15px}
.bf-review .social-row{margin:0}
.bf-nav{display:flex;justify-content:space-between;gap:10px}
.bf-nav .btn{display:inline-flex;align-items:center;gap:6px}
.bf-form .f-err{margin:0}

.biz-mine li{display:flex;align-items:center;gap:8px}
.biz-mine .row-btn{flex:1;min-width:0}
.biz-mine .row-btn>span{min-width:0}
.biz-mine small{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.set-card .set-actions .btn{display:inline-flex;align-items:center;gap:6px}
.ver-ok{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--blue-l);color:var(--blue-ink);margin-bottom:10px;font-size:22px}
.ver-ok span{font-size:14px}
.vr-list{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:8px}
.vr-item{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--line);border-radius:12px;font-size:14px}
.vr-item>span:nth-child(2){flex:1 1 200px;min-width:0}
.vr-form{display:flex;flex-direction:column;gap:2px}
.file-drop{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1.5px dashed var(--line2);border-radius:14px;cursor:pointer;margin:8px 0;color:var(--text-2)}
.file-drop:hover,.file-drop:focus-within{border-color:var(--blue);background:var(--blue-l)}
.file-drop input{position:absolute;opacity:0;width:1px;height:1px}
.file-drop span{min-width:0}

.user-cover{height:150px;background:linear-gradient(135deg,var(--blue-l),var(--green-l))}
.user-page .profile-info{padding-bottom:16px}
.user-bio{margin:8px 0 0!important;color:var(--text-3)}
.vtype-line{display:flex;align-items:center;gap:4px;margin:4px 0 0!important;font-size:13.5px;font-weight:600;color:var(--blue-d)}
.vtype-line .vbadge{margin:0}

.sys-av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--blue-l);color:var(--blue-d);flex-shrink:0}
.adm-tabs{display:flex;gap:4px;padding:6px;overflow-x:auto;scrollbar-width:none}
.adm-tab{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:10px;font-weight:600;font-size:13.5px;color:var(--muted);white-space:nowrap}
.adm-tab:hover{background:var(--mist)}
.adm-tab.active{background:var(--red-l);color:var(--red-fg)}
.adm-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.adm-row{padding:12px 14px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.adm-row.resolved{opacity:.7}
.adm-main{flex:1 1 320px;display:flex;gap:12px;align-items:flex-start;min-width:0}
.adm-main>span{min-width:0;display:flex;flex-direction:column;gap:3px}
.adm-main b{display:flex;align-items:center;flex-wrap:wrap}
.adm-main small{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.adm-main a:not(.adm-main){color:var(--blue-d);font-weight:600}
.adm-desc{color:var(--text-2)!important}
.claim-note{color:var(--brown-fg)!important;font-weight:600}
.adm-quote{display:block;font-size:14px;color:var(--text-3);quotes:none;background:var(--mist);border-radius:10px;padding:8px 10px;margin:4px 0}
.adm-links a{display:inline-flex;align-items:center;gap:2px}
.adm-act{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.adm-act .btn{display:inline-flex;align-items:center;gap:5px}
.adm-act select,.adm-feature select{border:1px solid var(--line2);border-radius:999px;padding:5px 10px;background:var(--field);font-size:13px}
.adm-feature{display:inline-flex;gap:6px;align-items:center}
.adm-reason,.adm-resolve{flex:1 1 100%;display:flex;gap:8px}
.adm-reason[hidden]{display:none}
.adm-reason input,.adm-resolve input{flex:1;min-width:0;border:1px solid var(--line2);border-radius:999px;padding:7px 12px;background:var(--field)}
.adm-search{display:flex;gap:8px;align-items:center}
.adm-search .search{max-width:none}
.adm-hint{margin:2px 4px}
.adm-filter{padding:0 4px}
.adm-filter .set-row.inline{display:inline-flex;gap:8px;align-items:center;font-size:14px;cursor:pointer}
#admBody{display:flex;flex-direction:column;gap:10px}

@media (max-width:820px){
  .biz-grid{grid-template-columns:1fr}
  .biz-cover{height:150px}
  .biz-id{padding:0 16px;margin-top:-34px;gap:12px}
  .biz-id .biz-logo{width:72px!important;height:72px!important}
  .biz-title{padding-top:38px}
  .biz-title h1{font-size:21px}
  .biz-actions,.biz-socials{padding-left:16px;padding-right:16px}
  .biz-status{margin:12px 16px 0}
  .biz-stats{grid-template-columns:1fr 1fr}
  .bf-two{grid-template-columns:1fr}
  .stepper .step-l{display:none}
  .stepper li.on .step-l{display:inline}
  .stepper li.on{flex:3}
  .hours-row{grid-template-columns:1fr auto;row-gap:4px}
  .hours-row .hr-day{grid-column:1}
  .hours-row input[type=time]{grid-column:auto}
  .hours-row>span[aria-hidden]{display:none}
  .hours-row input[type=time]{width:auto}
  .bf-form,.bf-head{padding:14px 16px}
  .bf-form input,.bf-form select,.bf-form textarea{font-size:16px}
  .adm-main{flex-basis:100%}
}
[data-theme="dark"] .biz-cover{filter:brightness(.9)}
[data-theme="dark"] .feat-tag{color:var(--blue-d)}
[data-theme="dark"] .soc-btn{background:var(--surface-2);border-color:var(--line2)}
[data-theme="dark"] .soc-btn:hover{background:var(--blue-l);color:var(--blue-d)}

/* ---------- Instagram-style profiles, follows, covers, Following feed, official account (migrations 015-016) ---------- */
.cover-wrap{position:relative;height:200px;overflow:hidden;background:var(--blue-l);border-radius:var(--radius) var(--radius) 0 0;user-select:none}
.cover-wrap .cover-art{display:block;width:100%;height:100%}
.cover-wrap .cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cover-tools{position:absolute;right:10px;top:10px;display:flex;gap:6px;z-index:2}
.cover-tools[hidden]{display:none}
.cover-btn{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:6px 12px;border-radius:999px;background:rgba(20,30,36,.62);color:#fff;font-size:13px;font-weight:600;cursor:pointer;backdrop-filter:blur(4px);border:0}
.cover-btn:hover{background:rgba(20,30,36,.8)}
.cover-btn:focus-within,.cover-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.cover-btn .i{width:16px;height:16px}
.cover-pos{position:absolute;left:0;right:0;top:0;z-index:3;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 12px 16px;background:linear-gradient(rgba(10,16,20,.72),transparent);color:#fff;font-size:13px}
.cover-pos[hidden]{display:none}
.cover-pos input[type=range]{flex:1 1 140px;accent-color:var(--red)}
.cp-hint{display:inline-flex;align-items:center;gap:5px;font-weight:600}
.cp-btns{display:flex;gap:6px;margin-left:auto}
.cover-wrap.repositioning .cover-img{cursor:ns-resize;touch-action:none}
.cover-wrap.repositioning{outline:2px dashed rgba(255,255,255,.85);outline-offset:-6px}
.cover-busy{position:absolute;inset:0;display:grid;place-content:center;grid-auto-flow:column;gap:8px;align-items:center;background:rgba(10,16,20,.45);color:#fff;font-weight:600;z-index:4}
.cover-busy[hidden]{display:none}
.biz-cover .cover-wrap{position:absolute;inset:0;height:auto;border-radius:0}
.biz-cover .gd-back{z-index:3}
[data-theme="dark"] .cover-wrap .cover-art{filter:brightness(.72) saturate(.9)}
[data-theme="dark"] .cover-wrap{background:#1b2733}
[data-theme="dark"] .biz-cover{filter:none}

.igp{overflow:visible;padding-bottom:0}
.igp-top{display:flex;align-items:flex-end;gap:20px;padding:0 24px;margin-top:-46px;position:relative;z-index:2;pointer-events:none}
.igp-top>*{pointer-events:auto}
.igp-av .avatar{border:4px solid var(--surface);box-shadow:0 2px 10px rgba(0,0,0,.12);font-size:34px!important}
.igp-av .av-status .sdot{width:18px;height:18px;right:6px;bottom:6px;border-width:3px}
.igp-stats{list-style:none;margin:0;padding:0;display:flex;flex:1;justify-content:space-around;max-width:420px;margin-left:auto}
.igp-stats li{flex:1;text-align:center}
.igp-stats button{display:flex;flex-direction:column;align-items:center;width:100%;padding:6px 4px;border-radius:12px;line-height:1.2}
.igp-stats button:hover{background:var(--mist)}
.igp-stats b{font-family:var(--display);font-size:20px;font-weight:700;color:var(--ink)}
.igp-stats span{font-size:13px;color:var(--muted)}
.igp-id{padding:10px 24px 0}
.igp-name{margin:0;font-family:var(--display);font-size:22px;line-height:1.25;display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
.igp-name .vbadge{font-size:.9em}
.igp-name .visitor-badge.sm{margin:0;font-size:12px;font-family:var(--font)}
.igp-meta{margin:2px 0 0;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;color:var(--muted);font-size:13.5px}
.igp-handle{font-weight:600;color:var(--text-2)}
.follows-you{font-size:11.5px;font-weight:700;padding:1px 8px;border-radius:999px;background:var(--mist);color:var(--text-2)}
.igp-bio{margin:8px 0 0;white-space:pre-line;color:var(--ink)}
.igp-id .vtype-line{margin:4px 0 0}
.igp-id .social-row{margin-top:8px}
.igp-id .pi-status{margin-top:8px;justify-content:flex-start}
.igp-actions{display:flex;gap:8px;padding:14px 24px 4px;flex-wrap:wrap}
.igp-actions>.btn{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;max-width:240px}
.igp-actions>.btn.icon-only{flex:0 0 42px;padding:0}
.follow-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.follow-btn .i{width:15px;height:15px}
.follow-btn.is-following{background:var(--mist);color:var(--ink)}
[data-theme="dark"] .follow-btn.is-following{background:#262b33;color:#E6EAEE}
.igp-tabs{display:flex;justify-content:center;gap:28px;border-top:1px solid var(--line);margin-top:14px}
.igp-tabs button{display:inline-flex;align-items:center;gap:6px;padding:12px 4px;font-size:13px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:var(--muted);border-top:2px solid transparent;margin-top:-1px}
.igp-tabs button.active{color:var(--ink);border-top-color:var(--ink)}
.igp-pages{margin-top:12px}
#igPanel{margin-top:12px;scroll-margin-top:76px}
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.ig-tile{position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:6px;background:var(--mist);display:block;padding:0;text-align:left;cursor:pointer}
.ig-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s}
.ig-tile:hover img{transform:scale(1.03)}
.ig-tile.text{display:flex;align-items:center;justify-content:center;padding:14px;color:#fff}
.ig-tile.text .tt{font-weight:600;font-size:14px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;text-align:center;word-break:break-word}
.ig-tile.tone-red{background:linear-gradient(140deg,#C74C40,#A83B31)}
.ig-tile.tone-green{background:linear-gradient(140deg,#6BA571,#3C7244)}
.ig-tile.tone-blue{background:linear-gradient(140deg,#65A0C8,#336E95)}
.ig-tile.tone-brown{background:linear-gradient(140deg,#8E5533,#6B3E24)}
.tile-meta{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:16px;background:rgba(10,16,20,.45);color:#fff;font-weight:700;font-size:14px;opacity:0;transition:opacity .15s}
.tile-meta span{display:inline-flex;align-items:center;gap:4px}
.ig-tile:hover .tile-meta,.ig-tile:focus-visible .tile-meta{opacity:1}
.ig-tile:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.ig-tile.skel{background:linear-gradient(90deg,var(--skeleton),var(--mist),var(--skeleton));background-size:200% 100%;animation:shimmer 1.2s infinite;cursor:default}
.ig-empty h3{margin:6px 0 2px}
.modal.post-modal{width:min(620px,100%)}
.pm-body{padding:12px}
.pm-body .post{margin:0;box-shadow:none}
.modal.fl-modal{width:min(460px,100%);max-height:min(640px,calc(100vh - 56px));max-height:min(640px,calc(100dvh - 56px));display:flex;flex-direction:column}
.fl-body{padding:6px 16px 18px;overflow-y:auto}
.fl-body .att-tabs{display:flex}
.fl-body .att-tabs .tab{flex:1}
.fl-body .inline-search{max-width:none;margin:0 0 6px}
.fl-row .follow-btn,.person-row .follow-btn{flex-shrink:0}
.sheet-grip{display:none}
.feed-switch{display:flex;gap:4px;padding:4px;margin:0 0 12px;background:var(--surface);border:1px solid var(--line);border-radius:999px;box-shadow:var(--shadow)}
.feed-switch button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 12px;border-radius:999px;font-weight:600;font-size:14px;color:var(--muted)}
.feed-switch button.active{background:var(--red);color:#fff}
.feed-switch button:not(.active):hover{background:var(--mist);color:var(--ink)}
.feed-empty{text-align:center}
.feed-empty .fe-sub{margin:14px 0 4px;text-align:left;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.feed-empty .fe-people{text-align:left;margin-bottom:12px}
.people-hits{margin-bottom:12px}
.off-tag{display:inline-block;margin-left:6px;font-size:11px;font-weight:700;padding:1px 8px;border-radius:999px;background:var(--red);color:#fff;vertical-align:2px;letter-spacing:.3px;font-family:var(--font)}
.igp-name .off-tag{margin-left:0;vertical-align:0;font-size:12px}
.avatar.is-official{background:#fff!important;box-shadow:inset 0 0 0 1px var(--line)}
.avatar.is-official img{object-fit:contain;padding:9%;border-radius:50%}
.post.official-post{border-left:4px solid var(--red)}
.post.pinned-post{background:linear-gradient(180deg,var(--red-l),var(--surface) 90px)}
.pin-line{margin:0 0 8px;display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--red-fg);text-transform:uppercase;letter-spacing:.4px}
#composerAs{max-width:220px}
[data-theme="dark"] .post.pinned-post{background:linear-gradient(180deg,#3a1f1c,var(--surface) 90px)}
[data-theme="dark"] .igp-stats button:hover,[data-theme="dark"] .feed-switch button:not(.active):hover{background:#262b33}
@media (max-width:820px){
  .cover-wrap{height:150px;border-radius:0}
  .igp{border-radius:0}
  .igp-top{padding:0 14px;gap:12px;margin-top:-44px}
  .igp-av .avatar{width:86px!important;height:86px!important;font-size:30px!important}
  .igp-stats{margin-bottom:0}
  .igp-stats b{font-size:17px}
  .igp-stats span{font-size:12px}
  .igp-id{padding:8px 14px 0}
  .igp-name{font-size:19px}
  .igp-actions{padding:12px 14px 2px}
  .igp-actions>.btn{max-width:none}
  .igp-tabs{margin-top:10px}
  .ig-grid{gap:2px}
  .ig-tile{border-radius:0}
  .ig-tile.text{padding:8px}
  .ig-tile.text .tt{font-size:12px;-webkit-line-clamp:5}
  .cover-btn span{display:none}
  .cover-btn{padding:6px 9px}
  .modal-root[data-kind="follows"]{place-items:end stretch}
  .modal.fl-modal{height:82vh;max-height:82vh;height:82dvh;max-height:82dvh;border-radius:18px 18px 0 0;animation:sheetUp .24s ease}
  .sheet-grip{display:block;width:40px;height:4px;border-radius:4px;background:var(--line2);margin:8px auto 0}
  .feed-switch{margin:0 0 10px}
}
@media (max-width:380px){ .igp-stats span{font-size:11px} .igp-actions>.btn{font-size:13px;padding:8px 10px} }
@keyframes sheetUp{from{transform:translateY(40%);opacity:.4}}
.igp-actions{flex-wrap:nowrap}
.igp-actions>.btn{min-width:0;overflow:hidden;text-overflow:ellipsis}
.fl-row .pr-main b,.person-row .pr-main b{overflow-wrap:anywhere}
@media (max-width:820px){
  .fl-row .follow-btn .i,.person-row .follow-btn .i{display:none}
  .fl-row .follow-btn,.person-row .follow-btn{padding:6px 12px}
  .igp-actions>.btn{font-size:14px;padding:8px 10px}
}

/* Explore category chips: many categories, so mobile scrolls sideways with room at both ends (no edge-touching) and a soft fade;
   wider screens wrap onto rows so every category is visible without a hidden scrollbar. */
#exCats{scroll-snap-type:x proximity;scroll-padding-inline:12px;padding:4px 12px 8px;margin-inline:-12px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 20px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 20px),transparent)}
#exCats .cat-chip{scroll-snap-align:start;display:inline-flex;align-items:center;gap:6px}
@media (min-width:768px){#exCats{flex-wrap:wrap;overflow:visible;margin-inline:0;padding:2px 0 4px;-webkit-mask-image:none;mask-image:none}}

/* ---------- My Guam List (bucket list) ---------- */
.ex-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}
.ex-foot .ex-map{margin-top:0}
.bl-btns{display:inline-flex;gap:6px;flex-shrink:0}
.bl-btn{width:36px;height:36px;border-radius:50%;display:inline-grid;place-items:center;border:1px solid var(--line);background:var(--surface);color:var(--muted);transition:background .15s,color .15s,border-color .15s,transform .15s}
.bl-btn .ico{width:18px;height:18px}
.bl-btn:hover{color:var(--ink);border-color:var(--muted)}
.bl-btn.on{color:var(--blue-d);border-color:var(--blue);background:var(--blue-l)}
.bl-btn.bl-check.on{color:#fff;background:var(--green);border-color:var(--green)}
.bl-btn.btn{width:auto;height:auto;border-radius:999px;display:inline-flex;gap:6px;padding:9px 14px}
.bl-btn.btn span{white-space:nowrap}
.d-actions .bl-btns{display:contents}
.bl-pop{animation:blPop .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes blPop{0%{transform:scale(1)}35%{transform:scale(1.28)}100%{transform:scale(1)}}
.bl-celebrate{position:fixed;left:50%;top:45%;width:96px;height:96px;margin:-48px 0 0 -48px;z-index:9999;pointer-events:none;animation:blFade 1.2s ease forwards}
.bl-celebrate svg{width:96px;height:96px;fill:none;stroke-linecap:round;stroke-linejoin:round}
.bl-celebrate circle{fill:var(--green);stroke:none;transform-origin:center;animation:blScale .45s cubic-bezier(.2,1.5,.4,1)}
.bl-celebrate path{stroke:#fff;stroke-width:5;stroke-dasharray:40;stroke-dashoffset:40;animation:blDraw .35s .25s ease forwards}
.bl-celebrate i{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px;border-radius:50%;background:#E3A33A;transform:rotate(var(--a)) translateY(0);animation:blBurst .7s .15s ease-out forwards;opacity:0}
.bl-celebrate i:nth-child(3n){background:var(--red)} .bl-celebrate i:nth-child(3n+1){background:var(--blue)}
@keyframes blScale{from{transform:scale(.2)}to{transform:scale(1)}}
@keyframes blDraw{to{stroke-dashoffset:0}}
@keyframes blBurst{0%{opacity:1;transform:rotate(var(--a)) translateY(0)}100%{opacity:0;transform:rotate(var(--a)) translateY(-70px)}}
@keyframes blFade{0%,70%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.bl-pop{animation:none}}
.bl-sheet-wrap{position:fixed;inset:0;z-index:9000;display:flex;align-items:flex-end;justify-content:center}
.bl-sheet-bd{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.bl-sheet{position:relative;width:min(460px,100%);max-height:92vh;max-height:92dvh;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;border-radius:18px 18px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom));display:grid;gap:14px}
@media (min-width:700px){.bl-sheet-wrap{align-items:center}.bl-sheet{border-radius:18px}}
.bl-sheet-head{display:flex;align-items:center;gap:12px}
.bl-sheet-head h2{margin:0;font-size:20px} .bl-sheet-head p{margin:2px 0 0;color:var(--muted);font-size:14px}
.bl-sheet-head .icon-btn{margin-left:auto}
.bl-sheet-ok{width:42px;height:42px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;flex-shrink:0}
.bl-field{display:grid;gap:6px;font-size:14px} .bl-field>span{font-weight:600;color:var(--text-2)}
.bl-field input,.bl-field textarea{font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);width:100%;box-sizing:border-box}
.bl-rate{display:flex;gap:6px}
.bl-rate button{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;color:var(--muted);border:1px solid var(--line);background:var(--surface)}
.bl-rate button.on{color:#E3A33A;border-color:#E3A33A}
.bl-sheet-actions{display:flex;gap:10px;flex-wrap:wrap}
.bl-sheet-actions .btn{flex:1 1 140px;justify-content:center}
.bl-stars{display:inline-flex;gap:1px;vertical-align:-2px;color:var(--line)} .bl-stars .on{color:#E3A33A}
.bl-status{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:12px 0 0;padding:10px 12px;border-radius:12px;background:var(--blue-l);color:var(--blue-d);font-size:14px;font-weight:600}
.bl-status.done{background:var(--green-l);color:var(--green-d)}
.bl-status a,.bl-status .link{color:inherit;text-decoration:underline;font-weight:600}
.bl-note{flex-basis:100%;margin:2px 0 0;font-weight:400;color:var(--text-2);font-size:13.5px;overflow-wrap:anywhere}
.bl-prof{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:14px;color:var(--green-d);font-weight:600;margin:6px 0 0}
.bl-prof small{color:var(--muted);font-weight:400}
.bl-prof .ico{width:16px;height:16px}
.ex-mylist-link{margin-left:auto;display:inline-flex;align-items:center;gap:6px;color:var(--green-d)}
.ex-mylist-link small{font-weight:700;background:var(--green-l);border-radius:999px;padding:1px 7px}
/* Home card */
.bl-widget{padding:0;overflow:hidden;margin-bottom:12px}
.bl-w-body{padding:14px 16px;display:grid;gap:10px}
.bl-w-head{display:flex;align-items:center;gap:8px} .bl-w-head .see-all{margin-left:auto}
.bl-w-ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--green-l);color:var(--green-d);flex-shrink:0}
.bl-w-ico .ico{width:17px;height:17px} .bl-w-ico.lg{width:44px;height:44px;border-radius:12px} .bl-w-ico.lg .ico{width:24px;height:24px}
.bl-prog{display:grid;gap:6px;font-size:13.5px;color:var(--text-2)}
.bl-bar{display:block;height:8px;border-radius:999px;background:var(--line);overflow:hidden}
.bl-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--green),#7DB783);transition:width .4s}
.bl-bar.sm{height:6px}
.bl-w-items{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.bl-w-items li{display:flex;align-items:center;gap:8px;min-width:0}
.bl-w-items li>a{display:flex;align-items:center;gap:10px;flex:1;min-width:0;color:inherit}
.bl-w-cat{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex-shrink:0} .bl-w-cat .ico{width:16px;height:16px}
.bl-w-txt{min-width:0;display:grid} .bl-w-txt b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bl-w-txt small{color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bl-w-fine{margin:0;font-size:13px;color:var(--muted)}
.bl-w-start{display:flex;align-items:center;gap:12px;padding:14px 16px;color:inherit}
.bl-w-start>span:nth-child(2){display:grid;flex:1;min-width:0} .bl-w-start small{color:var(--muted);font-size:13px}
.bl-w-start>.ico{color:var(--muted)}
/* Page */
.bl-page-head{padding:18px}
.bl-ph-top{display:flex;gap:12px;align-items:flex-start} .bl-ph-top h1{margin:0;font-size:24px} .bl-ph-top p{margin:4px 0 0;color:var(--text-2);font-size:14px}
#blSummary:not(:empty){margin-top:16px;display:grid;gap:14px}
.bl-prog.lg{font-size:15px} .bl-prog.lg .bl-bar{height:10px}
.bl-cats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.bl-cats li{display:grid;grid-template-columns:auto 1fr;gap:4px 8px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:12px}
.bl-cat-ico{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--tint);color:var(--ink)} .bl-cat-ico .ico{width:15px;height:15px}
[data-theme="dark"] .bl-cat-ico{background:rgba(255,255,255,.08);color:#e8eaed}
.bl-cat-txt{display:grid;min-width:0} .bl-cat-txt b{font-size:13px} .bl-cat-txt small{font-size:12px;color:var(--muted)}
.bl-cats .bl-bar{grid-column:1/-1}
.bl-tabs{border-top:0;margin:4px 0 8px;padding:0 4px}
.bl-rows{display:grid;gap:10px}
.bl-row{display:flex;gap:12px;align-items:center;padding:10px;cursor:pointer;min-width:0}
.bl-thumb{width:64px;height:64px;border-radius:12px;overflow:hidden;flex-shrink:0;position:relative;display:block}
.bl-thumb>*{width:100%!important;height:100%!important}
.bl-thumb img{width:100%;height:100%;object-fit:cover}
.bl-row-txt{flex:1;min-width:0;display:grid;gap:2px}
.bl-row-name{font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bl-row-txt>small{color:var(--muted);font-size:12.5px}
.bl-row-txt .bl-done-line{color:var(--green-d);font-weight:600;display:block;line-height:1.5}
.bl-done-line .ico{width:14px;height:14px;vertical-align:-2px;margin-right:2px}
.bl-done-line .bl-stars{margin-left:4px}
[data-theme="dark"] .bl-row-txt .bl-done-line,[data-theme="dark"] .bl-prof,[data-theme="dark"] .ex-mylist-link{color:#8FCB95}
.bl-row-act{display:flex;gap:6px;align-items:center;flex-shrink:0}
.bl-privacy{margin-top:12px;padding:4px 6px}
@media (max-width:420px){.bl-row-act .bl-btn{width:34px;height:34px}}

/* ---------- Overlays never hide behind the bottom nav or the iOS Safari toolbar ----------
   --topnav-h / --bnav-h are measured in JS (syncOverlayVars) and fall back to these values. dvh tracks Safari's dynamic toolbar. */
:root{--topnav-h:64px;--bnav-h:0px}
.dropdown{z-index:70;max-height:calc(100vh - var(--topnav-h) - var(--bnav-h) - 16px);max-height:calc(100dvh - var(--topnav-h) - var(--bnav-h) - 16px);
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
@media (max-width:820px){
  :root{--topnav-h:58px;--bnav-h:calc(62px + env(safe-area-inset-bottom))}
  .dropdown{position:fixed;top:calc(var(--topnav-h) + 4px);left:8px;right:8px;width:auto;
    max-height:calc(100vh - var(--topnav-h) - var(--bnav-h) - 12px);max-height:calc(100dvh - var(--topnav-h) - var(--bnav-h) - 12px)}
  body.panel-open .topnav{z-index:65}   /* above .bottom-tabs (60), below modals (120) */
  .bl-sheet{max-height:92vh;max-height:92dvh;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
}
html.scroll-locked,html.scroll-locked body{overflow:hidden;overscroll-behavior:none}
.post-menu.up{top:auto;bottom:36px}
.comment .post-menu.up{top:auto;bottom:28px}

/* Reels teaser (coming soon) */
.reels-entry{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.soon-badge{font-size:10.5px;font-weight:700;letter-spacing:.02em;line-height:1;padding:3px 7px;border-radius:999px;background:var(--red-l);color:var(--red-fg,var(--red-d))}
.ex-reels-link{color:var(--text-2)}
.reels-wrap{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-end;justify-content:center;padding:16px 16px calc(16px + env(safe-area-inset-bottom))}
.reels-backdrop{position:absolute;inset:0;background:rgba(15,20,18,.5);opacity:0;transition:opacity .2s}
.reels-card{position:relative;width:100%;max-width:400px;max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:20px;box-shadow:0 12px 40px rgba(0,0,0,.25);padding:28px 24px 22px;text-align:center;transform:translateY(24px);opacity:0;transition:transform .22s ease,opacity .22s ease}
.reels-wrap.in .reels-backdrop{opacity:1}
.reels-wrap.in .reels-card{transform:none;opacity:1}
.reels-x{position:absolute;top:10px;right:10px}
.reels-ico{width:64px;height:64px;margin:4px auto 14px;border-radius:18px;display:grid;place-items:center;background:var(--red-l);color:var(--red)}
.reels-card h2{font-size:20px;line-height:1.3;margin:0 8px 8px}
.reels-card p{margin:0 4px 20px;color:var(--text-2);line-height:1.5}
.reels-ok{width:100%;min-height:46px;padding:12px 20px;justify-content:center}
@media (min-width:768px){.reels-wrap{align-items:center}}
@media (prefers-reduced-motion:reduce){.reels-card,.reels-backdrop{transition:none}}
[data-theme="dark"] .reels-ico,[data-theme="dark"] .soon-badge{background:rgba(199,76,64,.18);color:#F08A80}
@media (max-width:767px){.reels-wrap{padding-bottom:calc(var(--bnav-h,64px) + 12px + env(safe-area-inset-bottom))}.reels-card{max-height:calc(100dvh - var(--topnav-h,56px) - var(--bnav-h,64px) - 24px)}}