/* --- Self-hosted Plus Jakarta Sans (Latin + Latin-ext), v=20260531l --- */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:300;font-display:swap;src:url('/assets/fonts/plus-jakarta-sans/pjs-300-latin-ext.woff2?v=20260603c') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:300;font-display:swap;src:url('/assets/fonts/plus-jakarta-sans/pjs-300-latin.woff2?v=20260603c') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/plus-jakarta-sans/pjs-400-latin-ext.woff2?v=20260603c') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/plus-jakarta-sans/pjs-400-latin.woff2?v=20260603c') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/plus-jakarta-sans/pjs-500-latin-ext.woff2?v=20260603c') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/plus-jakarta-sans/pjs-500-latin.woff2?v=20260603c') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/plus-jakarta-sans/pjs-600-latin-ext.woff2?v=20260603c') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/plus-jakarta-sans/pjs-600-latin.woff2?v=20260603c') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/plus-jakarta-sans/pjs-700-latin-ext.woff2?v=20260603c') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/plus-jakarta-sans/pjs-700-latin.woff2?v=20260603c') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/plus-jakarta-sans/pjs-800-latin-ext.woff2?v=20260603c') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/plus-jakarta-sans/pjs-800-latin.woff2?v=20260603c') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* --- Doto (subset: wordmark + numerics), inlined base64, v=20260531l --- */
@font-face{font-family:'Doto';font-style:normal;font-weight:100 900;font-display:swap;src:url(data:font/woff2;base64,d09GMgABAAAAAAmcABAAAAAA1ZAAAAk7AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhYGYD9TVEFUgTQnFgCBKC9sEQgKgehMgfxBMIGyRAE2AiQDgQ4LgQwABCAFhVoHIBvi3aIoCZIEuBywiUyD2QstKQ4XzPwzN1+RCzWib7uwL/rq4uH/dZb3fUmWQcbdANohgA7IrkLQIfp4QoAVAHdLZYCqqSZtPHE/f9nNSRk2LH40sPEG2rQ+H//q88irNb0LCJloYHZE9mmfcC8tq07hq78V33yyzHo3v2Zh1wNPOIwg0Hiedr5/SQmFaWLhcDgMhwO16XCZWirjDWYxTdM0m/k819Q7kZzur8JkBpm25orn1QYDHx+N5gPKxihDH/xXq5rtcWPscihTe6mRhpajkLqi++2dcEuExQqEEv2zciMqi1uCkQiHjaEWzc9hzULWgZ2YQAVIQjgcladJBihIt6UPd3x9On61S1K9mVrNRkpZPZUIP05y55mwgjZGhmU+J9lCbEACYil9jBGQEOoSlsNgc5DjjzlsKIjLt4oULCwnouMSc8MxvfsTSNECIYjkrP/pzPeO/Nh8mZCkuIf0MbfHarFU6TJN2uv9qEY2EuiXhcWAkH3uc3CwBUJChuWgAsvBPIAeEihG5AzcctDnP2/V1jIJ47Ft5MDD/HPmPwhQGQDZFAi7E1Cyimnw85GRcnMRM+Di4RMSkZBTUFHT0NLRMzKzc3DyAqMHIiyHVqe0n0hj5PB7YYiIhLOQyPA9kRPbA0VB3EPUiCWiJE2QqJM+JhpkI6BoQq2/HDTmc0RwBILbyG5h/8oBHwioAD1UeAMUBF19WC0dLX1kJEQDFEQtXW0DeE1dHT1YuR6CPpwBggGCQkOlramj0lVp6yEqNPSgVVq6qHR1VRoqDT14Vf/HD5bBoyk3TFt1+zTW6bRJ46/FKsZ69DKuwp/cZds81cFDV0v/Hr170ohzop884j9L1FegyB2peammrzKAdeNKZdzD5upbZQMa2VX99HndXmdNQRtjwH4QPpPmIk0dwisE/aJIJPHN+KI/enwvfTefX/33yfhVX1S/Yppp+Kqvdgx6fHHK64M8vJGzqPq9/EdseBEaX2f9qSGUfwmACYedZ14x8TrVaRhoLlsn4MfQ5ZyW0DL62i6fYqj8FVtPQTzf9a0hLLE9p3VInW/kpVu1otWnbBF+LoIWpHM4oK4gBYIAgj7Z2BWL4XnEf38K7wVXnow8utii/OvnG7sLr/KBFdmAqD4c5eGG/maUyvBe/Y3ZGJfXQwk0NvJ2u14FtD/SqC93+mt3QDieJQTP5ZyTTnWUEQCbDScAQ4ImfBVIUAPFw/wJriCVMa5zAH77ZBxTONHjSSH1c8HxunASk1/FU3L6c0AScHKCvuEQNLPCaUL3T+XDri7NvfDg/rO8AHz+f1eIye83fnRm640XPNw861bc+8L/sa6K/T/n96kV7z7ePDxYccW9Z90kj86P0vs6n5w8lz38uNVub5rr8wzfjWcRSeoZVG/0wS5h1sbVMZVit8Im8UqHt8P6pprvxvNM+aMexq0P/tF45/zlMpbbgmnIs+zqhulhLzihupcLWOPlniTPS7KGRkGRPPQFeqN4QY4LdI0osTpcQZsEK/S2gBEX6CYAI8SJ5b+Pp7jWJRLnmWOrNBAX8cZaXy8ZtEZbVA3RNcHQ7xHARmQ33yEiIKd0TfDReDN6HdiOdpVFHdb7z0aOzzE4d6G8AuN18NJIBNAqgTs/wvmvoQR0p1wIz7wKF9Q1wtpnmHUFVuX5AdAhCtmhg375crm4vZ8HmaR+kk5EA8xX8GuqC1ZevfGgQB8nTzPRo/PRcx5FHj8qAthIIfWnaXFyjCHutMuqY1mHJwITOYhED68kB1HB2QwVz/jvl/HQ6Z63VVYdz7X4XdYq0ZrgwXNkdAafeq3XxazDKznRAO5Axkn9A4rFuqFRjEPxmdb5ut1Xlrwnro+elvPzbzo8E6ULIwfeV+S1jP3QfSRl0v+AksEsBw1MulCMl/MTQObQFWvt6tv9kX45nu0thojJ8zAapZr0VUaXY6CbYJahB95V80GXMuYjcMP6CGZ3MIvYZh0HFVlwqZ2tFJ00IwED6laRFycBfxLw11XN4havqs/Z7JdhLk5tmWYA0TWnnABFk4VVw+QJFnMbQCuv4HTvJr1Bwbjux/8jEALPOALBc+D7mKUjc+fr5z8UQO2sPZTduqD+auNuZlrc1qpq0X46e+eqO+5NyHzyhnIQ5ZuK5tF+6dG/GZi/LDrrnT3nn9vl9rhvvCk/w58ILoJX4QuisehK/JKEl0ykcemV7DjZi/xiheHnFzgqb1CNVWf1EeoLzTFapnatO2/cEEs9cm644fqALhnT3y8P2rju7pAC76TSvFql6xFjstsz9yPLoNYZrEFlFO+U9cXo/itawXmbClWOCc+FbJaR3Za571kG05WNwVgmvkF6FPf+/KtecFM3Ide5BRd6M4WfL3HF46wzlvOdsOKvZ1t2a+e+ZRlEaVMGIVtyXTIyvf1LTs7FKxe1mIakTLRYqzbjuwC0JkFm90MpUhkxOOXRZ/wrXiI0jYY2gila+CgslxcAsrD3wi917PGwwYRyDHpUcZHDjaV4VYPih+nQg0b9XsP3b2+VisCwAUE2m+Tka067HEPxfXf21DfQZiAiQ/fHXoYuMGRk7/gPsvV4WOMuKKtG3KYHfomj17LRabZh4tvEfyw7LlB1I2K1oLoPUUvxafzY3VjKNgXM/MAYwZaxpHPCOaLh0YyHeJ0t7SkuilfsHjB+extqh5jPXDno/4ci6gyAfGkbW0AxgXkm2Ls99IPt+w+Vsn/h98cbL/yx6Ydjxf8rUiYDUJNAkL07J2kiqkgnZC8AgBRLdu1R+VMX54v2PL/d8Nz/+b0Jtda7BI5IUwwI4YFvmTeZyBt4gf8Rlpsi6Xgfmb2dkNvcPwrrZ1NhzabZXykY5BSEKi5AUo9rkFmeBeSa8QgKHe+jpornUOrlLdTV41M0DPItmpqxZryWTvzuMA7XB59GoUIJFqbfMRv9R0AkezsJ0x/jQI6EJJ9DB0QoIYxBKocvkKDSgZArMGJk1KZBKkZQU+ew1HWZNC/AZ+Jrhq3uaO3F4zoiPYaJDBdAwdqKfU0Gpp8O71+ZhDbvtuVPXaql9t67JZ5DD3BVgzQOW+J4jR6DvMQZm1RLQSDwBNTW01VaY9t6z/h4u9vL/xttD0g0jOUKWDQrynmkj7K9mFvLzkt+A8j426IwMH/CrtwP) format('woff2');}
/* SoReel shared.css */
:root{
 --fs-xs:10px;
 --fs-sm:11px;
 --fs-body:13px;
 --fs-md:14px;
 --fs-lg:16px;
 --fs-xl:18px;
 --fs-2xl:20px;
 --fs-3xl:24px;
 --fs-4xl:32px;
 --fs-5xl:40px;
 --text-10:10px;
 --text-11:11px;
 --text-12:12px;
 --text-13:13px;
 --text-14:14px;
 --text-16:16px;
 --text-18:18px;
 --text-20:20px;
 --text-24:24px;
 --text-32:32px;
 --text-40:40px;
  --green:#16a34a;
  --greenDark:#15803d;
  --greenLight:#dcfce7;
 --white:#ffffff;
 --bg:#ffffff;
 --bg2:#f8f8f8;
 --bg3:#f2f2f2;
 --bg4:#ebebeb;
 --bg5:#e0e0e0;
 --ink:#111111;
 --ink2:#333333;
 /* v=20260518gn9 mirror — WCAG AA contrast for secondary copy */
 --ink3:#525252;
 --ink4:#525252;
 --border:#e8e5e0;
 --border2:#d4d4d4;

 --violet:#5700ff;
 --violet-on-dark:#b9a3ff;
 --violet2:#4500cc;
 --violet3:#3800a3;
 --violetLight:#ede6ff;
 --violetMid:rgba(87,0,255,.10);
 --violetSoft:rgba(87,0,255,.06);

 --yellow:#faef7c;
 --yellow2:#f5e84a;
 --yellow3:#ede040;
 --yellowLight:#fefde8;
 --yellowInk:var(--bizInk,#3a3500);

  --biz:#faef7c;
  --biz2:#f5e84a;
  --biz3:#ede040;
  --bizLight:#fefde8;
  --bizMid:rgba(245,232,74,.25);
  --bizSoft:rgba(245,232,74,.12);
  --bizInk:#3a3500;

 --lavender:#f4ddf7;
 --lavender2:#ead4ee;
 --lavenderInk:#6b3d72;
 --lavenderMid:rgba(244,221,247,.6);

 --ff:'Plus Jakarta Sans','IBM Plex Sans Arabic','Cairo',system-ui,-apple-system,sans-serif;
 --nav:68px;
 --r-xs:4px;
 --r-8:8px;
 --r-sm:10px;
 --r-12:12px;
 --r-md:16px;
 --r-lg:24px;
 --r-xl:32px;
 --r-2xl:40px;
 --r-pill:999px;
 /* Type scale (v=20260517v) — modular 12/14/16/20/24/32 + display 40 */
 --t-xs:12px;
 --t-sm:14px;
 --t-base:16px;
 --t-lg:20px;
 --t-xl:24px;
 --t-2xl:32px;
 --t-display:40px;
 /* Role-aware spinner token (v=20260517v). */
 --spinnerInk:var(--violet,#5700ff);
 --ease:cubic-bezier(.16,1,.3,1);
 --snap:cubic-bezier(.34,1.56,.64,1);
 --shadow-sm:0 1px 8px rgba(0,0,0,.07);
 --shadow-md:0 4px 16px rgba(0,0,0,.10);
 --shadow-lg:0 8px 32px rgba(0,0,0,.12);
 --shadow-overlay:0 20px 60px rgba(0,0,0,.5);
 --shadow-drawer:0 -4px 20px rgba(0,0,0,.06);
 --sp-sm:72px;
 --sp-md:96px;
 --sp-lg:128px;

 --r-card:16px;
 --fs-page-title:20px;
 --r-btn:12px;
 /* v=20260518gn9 UI/UX guideline tokens — canonical scales.
    SPACING (8pt grid): --sp-1=4 sp-2=8 sp-3=16 sp-4=24 sp-5=32 sp-6=48 sp-7=64 sp-8=96
    TYPE: --type-small=12 --type-body=14 --type-h3=16 --type-h2=20 --type-h1=24 --type-display=32
    See shared.css head for full guidance. New code MUST use these. */
 --sp-0:0;
 --sp-1:4px;
 --sp-2:8px;
 --sp-3:16px;
 --sp-4:24px;
 --sp-5:32px;
 --sp-6:48px;
 --sp-7:64px;
 --sp-8:96px;

 --type-small:12px;
 --type-body:14px;
 --type-h3:16px;
 --type-h2:20px;
 --type-h1:24px;
 --type-display:32px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-family:'Plus Jakarta Sans','IBM Plex Sans Arabic','Cairo',system-ui,-apple-system,sans-serif}
body{font-family:var(--ff);background:var(--bg);color:var(--ink2);overflow-x:hidden;-webkit-font-smoothing:antialiased}

img{display:block;max-width:100%}

input, select, textarea {
  font-size: 16px;
}

button,input,select,textarea{font-family:inherit}

.nav-logo, .i-logo, .ft-logo, .al-logo, .ph-logo {
 font-family: 'Doto', monospace !important;
 font-variation-settings: "ROND" 50, "MONO" 1;
 letter-spacing: 2px !important;
}
.nav-logo .ts, .nav-logo .ts-brand,
.i-logo .ts, .i-logo .ts-brand,
.ft-logo .ts, .ft-logo .ts-brand,
.al-logo .ts, .al-logo .ts-white,
.ph-logo .ts, .ph-logo .ts-brand {
 font-family: 'Doto', monospace !important;
 font-variation-settings: "ROND" 50, "MONO" 1;
 -webkit-background-clip: unset !important;
 background: none !important;
 -webkit-text-fill-color: unset !important;
 color: var(--ink) !important;
}

.nav-logo span[style*="yellow"],
.i-logo span[style*="yellow"],
.ft-logo span[style*="yellow"],
.al-logo span[style*="yellow"],
.ph-logo span[style*="yellow"] {
 -webkit-text-fill-color: var(--yellow) !important;
 color: var(--yellow) !important;
 font-family: 'Doto', monospace !important;
 font-variation-settings: "ROND" 50, "MONO" 1;
}

.logo-arabic {
 font-family: 'IBM Plex Sans Arabic', 'Cairo', system-ui, sans-serif;
 font-weight: 900;
 font-size: 0.7em;
 color: var(--yellow);
 letter-spacing: 1px;
 display: block;
 line-height: 1;
 margin-top: 2px;
 opacity: 0.85;
}

.d-badge, .deal-badge {
 font-family: var(--ff) !important;
 font-weight: 900;
 letter-spacing: 1px;
}

/* ge audit (2026-05-27, Priority 5): Brand standard reserves Doto for the
   `soreel.ae` wordmark only. .hero-stat-num and .stat-n use Doto for the
   dot-matrix counter aesthetic in hero stat displays — deliberate exception
   pending Abdulla review. If switching to IBM Plex Mono breaks the
   visual intention, document this exception in brand_guidelines.md instead. */
.hero-stat-num {
 font-family: "Doto", monospace;
 font-variation-settings: "ROND" 50;
 letter-spacing: 1px;
}

.sb-stat-n, .stat-n {
 font-family: "Doto", monospace;
 font-variation-settings: "ROND" 50;
}

.pc-price {
 font-family: var(--ff) !important;
 letter-spacing: -1px !important;
}

.kpi-n {
 font-family: "Doto", monospace !important;
 font-variation-settings: "ROND" 50 !important;
 letter-spacing: 1px !important;
}

.redemption-code, .redeem-code {
 font-family: "Doto", monospace !important;
 font-variation-settings: "ROND" 50 !important;
 letter-spacing: 3px !important;
 font-size: 13px !important;
}

.sb-n {
 font-family: "Doto", monospace !important;
 font-variation-settings: "ROND" 50 !important;
}

.page{display:none}
.page.active{display:block;animation:pgIn .35s var(--ease) both}
@keyframes pgIn{from{opacity:0}to{opacity:1}}

#nav{
 position:fixed;top:0;left:0;right:0;z-index:900;height:var(--nav);
 display:flex;align-items:center;padding:0 48px;gap:24px;
 background:rgba(255,255,255,.97);
 border-bottom:1px solid var(--border);transition:box-shadow .3s
}
#nav.scrolled{box-shadow:var(--shadow-sm)}
/* v=20260518gn9 (D-8-001 nav shell consistency): /pricing/ and /how-it-works/
   override #nav inline to get a dark sticky design. Moved to a shared class
   so both pages style identically through CSS, not inline duplicates. */
#nav.nav-dark-sticky{
 background:#0a0a0a;border-bottom:1px solid rgba(255,255,255,.07);
 padding:0 24px;height:56px;
 display:flex;align-items:center;justify-content:space-between;
 position:sticky;top:0;z-index:200
}
.nav-logo{font-size:20px;font-weight:900;letter-spacing:2px;cursor:pointer;flex-shrink:0;color:var(--ink);font-family:"Doto",monospace;font-variation-settings:"ROND" 50}
.nav-logo span{color:var(--violet)}
.nav-type-tabs{display:flex;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-pill);padding:3px;gap:2px;margin-right:auto}
.ntt{padding:7px 18px;border-radius:var(--r-pill);font-size:12.5px;font-weight:700;color:var(--ink3);cursor:pointer;border:none;background:none;transition:all .15s;white-space:nowrap}
.ntt.on{background:var(--violet);color:#fff}#ntt-b.on{background:var(--bizInk,#3a3500);color:var(--biz,#faef7c)}
.ntt:not(.on):hover{color:var(--ink);background:var(--bg3)}
.nav-links-r{display:flex;align-items:center;gap:4px;margin-inline-start:auto}
.nav-link{font-size:13px;font-weight:600;color:var(--ink3);padding:7px 13px;border-radius:var(--r-pill);cursor:pointer;border:none;background:none;transition:all .15s;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}
.nav-link:hover{color:var(--ink);background:var(--bg2)}
.nav-divider{width:1px;height:16px;background:var(--border2);margin:0 2px;flex-shrink:0}
.nav-cta{display:inline-flex;align-items:center;gap:7px;padding:10px 22px;border-radius:var(--r-pill);background:var(--violet);color:#fff;font-size:13px;font-weight:800;cursor:pointer;border:none;transition:all .18s var(--ease);white-space:nowrap;box-shadow:0 2px 12px rgba(87,0,255,.25)}
.nav-cta:hover{background:var(--violet2);transform:translateY(-1px);box-shadow:0 4px 20px rgba(87,0,255,.35)}
@keyframes dot{0%,100%{opacity:1}50%{opacity:.3}}

.vcr{display:inline-flex;flex-wrap:wrap;white-space:pre-wrap}
.vcr.lines{flex-direction:column}

.vcr-word{display:inline-flex;overflow:hidden;line-height:inherit}

.vcr-char{
 display:inline-block;
 transform:translateY(110%);
 transition:transform var(--vcr-dur,.65s) var(--vcr-ease,cubic-bezier(.16,1,.3,1));
 transition-delay:var(--vcr-delay,0s)
}
.vcr-char.visible{transform:translateY(0)}

.vcr-space{display:inline-block;width:.3em}

.vcr-line{overflow:hidden;display:block}
.vcr-line-inner{
 display:block;
 transform:translateY(110%);
 transition:transform var(--vcr-dur,.6s) cubic-bezier(.16,1,.3,1);
 transition-delay:var(--vcr-delay,0s)
}
.vcr-line-inner.visible{transform:translateY(0)}

.vcr.reverse .vcr-char{transform:translateY(-110%)}
.vcr.reverse .vcr-char.visible{transform:translateY(0)}

.ut-header{max-width:1400px;width:100%;margin:0 auto 64px;padding:0 48px}

.ut-curly{
 position:absolute;font-size:96px;font-weight:300;line-height:1;
 color:var(--ink);opacity:.05;pointer-events:none;user-select:none;
 font-family:Georgia,serif
}
.ut-curly-open{left:-8px;top:-32px}
.ut-curly-close{right:-8px;bottom:-48px}

.ut-quote{
 font-size:clamp(20px,2.5vw,30px);font-weight:300;
 color:var(--ink);line-height:1.65;text-align:center;
 transition:opacity .25s ease,filter .25s ease,transform .25s ease
}

.ut-role{
 font-size:11px;letter-spacing:.18em;text-transform:uppercase;
 color:var(--ink4);margin-top:28px;margin-bottom:24px;
 text-align:center;
 transition:opacity .3s ease,transform .3s ease
}
.ut-role.animating{opacity:0;transform:translateY(6px)}
.ut-avatars{display:flex;align-items:center;justify-content:center;gap:8px}
.ut-pill{
 display:inline-flex;align-items:center;
 border-radius:999px;cursor:pointer;border:none;
 background:transparent;padding:2px;
 transition:background .4s cubic-bezier(.4,0,.2,1),
 padding .4s cubic-bezier(.4,0,.2,1),
 box-shadow .3s ease;
 outline:none
}
.ut-pill.active{
 background:var(--ink);
 padding:8px 16px 8px 8px;
 box-shadow:0 4px 20px rgba(17,17,17,.18)
}
.ut-pill.hovered:not(.active){
 background:var(--bg3);
 padding:8px 16px 8px 8px
}
.ut-av{
 width:32px;height:32px;border-radius:50%;
 object-fit:cover;flex-shrink:0;display:block;
 transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s ease
}
.ut-pill.active .ut-av{box-shadow:0 0 0 2px rgba(255,255,255,.25)}
.ut-pill:not(.active):hover .ut-av{transform:scale(1.06)}
.ut-name-clip{
 display:grid;overflow:hidden;
 transition:grid-template-columns .4s cubic-bezier(.4,0,.2,1),
 opacity .4s cubic-bezier(.4,0,.2,1),
 margin-left .4s cubic-bezier(.4,0,.2,1);
 grid-template-columns:0fr;opacity:0;margin-left:0
}
.ut-pill.active .ut-name-clip,
.ut-pill.hovered .ut-name-clip{grid-template-columns:1fr;opacity:1;margin-left:8px}
.ut-name-inner{overflow:hidden}
.ut-name{
 font-size:13.5px;font-weight:600;white-space:nowrap;
 color:var(--white);display:block;
 transition:color .25s ease
}
.ut-pill:not(.active) .ut-name{color:var(--ink)}

.asb-wrap{position:relative;width:100%}
.asb-label{font-size:10px;font-weight:800;letter-spacing:2px;text-transform:uppercase;
 color:var(--ink4);margin-bottom:7px;display:block}
.asb-field{
 width:100%;padding:11px 44px 11px 18px;
 background:var(--white);border:1.5px solid var(--border);border-radius:var(--r-pill);
 font-family:var(--ff);font-size:14px;color:var(--ink);outline:none;
 transition:border-color .2s,box-shadow .2s;
 box-shadow:var(--shadow-sm)
}
.asb-field:focus{border-color:var(--violet);box-shadow:0 0 0 3px rgba(87,0,255,.10)}
.asb-field::placeholder{color:var(--ink4)}
.asb-icon{
 position:absolute;right:14px;top:50%;transform:translateY(-50%);
 width:18px;height:18px;pointer-events:none;
 transition:opacity .2s,transform .2s cubic-bezier(.34,1.56,.64,1)
}
.asb-icon svg{width:16px;height:16px;stroke:var(--ink4);fill:none;stroke-width:2;
 stroke-linecap:round;stroke-linejoin:round}
.asb-icon.send-mode{transform:translateY(-50%) rotate(-45deg)}

.asb-dropdown{
 position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:400;
 background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);
 box-shadow:var(--shadow-lg);overflow:hidden;
 opacity:0;transform:translateY(-8px) scaleY(.96);transform-origin:top center;
 transition:opacity .25s var(--ease),transform .3s var(--ease);
 pointer-events:none;max-height:0
}
.asb-dropdown.open{
 opacity:1;transform:none;pointer-events:auto;max-height:400px;
 transition:opacity .25s var(--ease),transform .3s var(--ease),max-height .35s var(--ease)
}
.asb-list{padding:6px}
.asb-item{
 display:flex;align-items:center;justify-content:space-between;
 padding:9px 12px;border-radius:var(--r-md);cursor:pointer;
 opacity:0;transform:translateY(10px);
 transition:background .12s,opacity .28s var(--ease),transform .28s var(--ease)
}
.asb-item.visible{opacity:1;transform:none}
.asb-item:hover{background:var(--bg2)}
.asb-item:active{transform:scale(.98)}
.asb-item-left{display:flex;align-items:center;gap:10px}
.asb-item-icon{width:28px;height:28px;border-radius:var(--r-8);background:var(--bg2);
 display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.asb-item-label{font-size:13.5px;font-weight:700;color:var(--ink)}
.asb-item-desc{font-size:11px;color:var(--ink4);margin-left:4px}
.asb-item-right{display:flex;align-items:center;gap:8px}
.asb-item-short{font-size:10.5px;color:var(--ink4);
 background:var(--bg3);padding:2px 7px;border-radius:5px;font-family:monospace}
.asb-item-end{font-size:11px;color:var(--ink4)}
.asb-footer{padding:9px 14px;border-top:1px solid var(--border);
 display:flex;justify-content:space-between;font-size:11px;color:var(--ink4)}

.ico-search{} .ico-send{}

@keyframes shimmer-sweep{
 0%{background-position:200% center}
 100%{background-position:-200% center}
}

.ts{
 display:inline-block;
 background-clip:text;
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
 background-size:200% auto;
 animation:shimmer-sweep var(--ts-dur,1.4s) linear infinite;
 }

.ts-brand{
 background-image:linear-gradient(
 90deg,
 var(--violet) 0%,
 var(--violet) 30%,
 #b78bff 45%,
 var(--lavender) 55%,
 #b78bff 65%,
 var(--violet) 80%,
 var(--violet) 100%
 );
 --ts-dur:2.2s
}

.ts-yellow{
 background-image:linear-gradient(
 90deg,
 var(--yellow) 0%,
 var(--yellow) 25%,
 #fff9c4 42%,
 #ffffff 50%,
 #fff9c4 58%,
 var(--yellow) 75%,
 var(--yellow) 100%
 );
 --ts-dur:1.8s
}

.ts-white{
 background-image:linear-gradient(
 90deg,
 #ffffff 0%,
 #ffffff 25%,
 var(--yellow) 42%,
 #fff 50%,
 var(--yellow) 58%,
 #ffffff 75%,
 #ffffff 100%
 );
 --ts-dur:2.0s
}

.stat-num.ts,
.kpi-n.ts,
.ts.ts-brand,
.ts.ts-yellow,
.ts.ts-hero,
.ts.ts-white,
.ts.ts-subtle {
 color:transparent;
 -webkit-text-fill-color:transparent;
}

.stat-num.ts { display:inline-block }
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--yellow);display:inline-block;animation:dot 2.5s ease-in-out infinite;flex-shrink:0}

.product-strip{background:var(--bg);border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none}
.product-strip::-webkit-scrollbar{display:none}
.ps-inner{display:flex;max-width:1400px;margin:0 auto;padding:0 48px}
.ps-item{display:flex;align-items:center;gap:7px;padding:14px 18px;font-size:13px;font-weight:600;color:var(--ink4);cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;white-space:nowrap;flex-shrink:0}
.ps-item:hover{color:var(--ink)}
.ps-item.on{color:var(--violet);border-color:var(--violet)}
.ps-ico{display:inline-flex;align-items:center;line-height:0}

.inner-nav{height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;background:var(--white);border-bottom:1px solid var(--border);position:sticky;top:var(--nav,68px);z-index:90}
.i-logo{font-size:16px;font-weight:900;letter-spacing:2px;cursor:pointer;color:var(--ink);font-family:"Doto",monospace;font-variation-settings:"ROND" 50}.i-logo span{color:var(--violet)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--ff);font-weight:700;border-radius:var(--r-pill);cursor:pointer;border:none;outline:none;transition:background-color .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease),border-color .18s var(--ease),opacity .18s var(--ease);white-space:nowrap;overflow:hidden;position:relative;min-height:44px;text-decoration:none}
.btn-sm{padding:9px 18px;font-size:13px}
.btn-md{padding:13px 26px;font-size:14px}
.btn-lg{padding:16px 32px;font-size:15px}
.btn-xl{padding:19px 40px;font-size:17px}
.btn-full{width:100%}
.btn-violet{background:var(--violet);color:#fff;box-shadow:0 2px 12px rgba(87,0,255,.2)}.btn-violet:hover{background:var(--violet2);transform:translateY(-2px);box-shadow:0 6px 24px rgba(87,0,255,.3)}
.btn-yellow{background:var(--yellow);color:var(--ink)}.btn-yellow:hover{background:var(--yellow2);transform:translateY(-2px)}
.btn-biz{background:var(--biz);color:var(--bizInk);box-shadow:0 2px 12px rgba(245,232,74,.3)}.btn-biz:hover{background:var(--biz2);transform:translateY(-1px);box-shadow:0 4px 20px rgba(245,232,74,.4)}
.btn-outline{background:transparent;color:var(--ink);border:1.5px solid var(--border2)}.btn-outline:hover{border-color:var(--ink3);background:var(--bg2)}
.btn-ghost{background:var(--bg2);color:var(--ink3);border:1px solid var(--border)}.btn-ghost:hover{background:var(--bg3);color:var(--ink)}

.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:var(--r-pill);font-size:11.5px;font-weight:800;letter-spacing:.3px}
.badge-violet{background:var(--violetMid);color:var(--violet)}
.badge-yellow{background:#fef9c3;color:var(--yellowInk)}
.badge-lavender{background:var(--lavender);color:var(--lavenderInk)}
.badge-green{background:var(--greenLight);color:#166534}

.eyebrow{font-size:11px;font-weight:800;letter-spacing:3.5px;text-transform:uppercase;color:var(--violet);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.h-hero{font-size:clamp(52px,6vw,90px);font-weight:900;letter-spacing:clamp(-4px,-.05em,-3px);line-height:.92;color:var(--ink)}
.h1{font-size:clamp(38px,4.5vw,64px);font-weight:900;letter-spacing:-3px;line-height:.96;color:var(--ink)}
.h2{font-size:clamp(28px,3vw,44px);font-weight:800;letter-spacing:-2px;line-height:1;color:var(--ink)}
.h-allcaps{font-size:clamp(30px,4vw,58px);font-weight:900;letter-spacing:-2px;line-height:.98;text-transform:uppercase;color:var(--ink)}
.body-lg{font-size:18px;line-height:1.72;color:var(--ink3)}
.body-md{font-size:16px;line-height:1.68;color:var(--ink3)}
.body-sm{font-size:14px;line-height:1.65;color:var(--ink4)}
.t-link{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:800;color:var(--violet);cursor:pointer;transition:gap .2s}
.t-link:hover{gap:14px}
.t-link::after{content:'→'}

.wrap{max-width:1400px;margin:0 auto;padding:0 48px}
.section{padding:100px 48px;max-width:1400px;margin:0 auto}
.section-sm{padding:72px 48px;max-width:1400px;margin:0 auto}
.full-section{padding:100px 48px}
.divider{border:none;border-top:1px solid var(--border)}

.r{opacity:0;transform:translateY(24px);transition:opacity .65s var(--ease),transform .65s var(--ease);animation:r-fallback 0s 2.5s forwards}
.r.d1{transition-delay:.1s}.r.d2{transition-delay:.2s}.r.d3{transition-delay:.3s}.r.d4{transition-delay:.4s}
.r.in{opacity:1;transform:none;animation:none}
@keyframes r-fallback{to{opacity:1;transform:none}}

.marquee{overflow:hidden;background:var(--violet);padding:14px 0}marquee:hover .mq-track{animation-play-state:paused}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mq-track{display:flex;animation:mq 32s linear infinite;width:max-content}
.mq-track:hover{animation-play-state:paused}
.mq-item{flex-shrink:0;display:inline-flex;align-items:center;gap:8px;padding:0 28px;font-size:12px;font-weight:700;color:rgba(255,255,255,.7);letter-spacing:.5px;text-transform:uppercase}
.mq-item svg{opacity:.9}
.mq-sep{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.25);flex-shrink:0}

.phone-scene{position:relative;display:flex;justify-content:center;align-items:flex-start;perspective:1200px;perspective-origin:50% 30%}
.phone-scene .phone{transform:rotateY(-14deg) rotateX(4deg) rotate(1deg);transform-style:preserve-3d;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.phone-scene:hover .phone{transform:rotateY(-6deg) rotateX(2deg) rotate(0deg)}
.phone-scene .fn1{transform:rotateY(-8deg) rotateX(2deg)}
.phone-scene .fn2{transform:rotateY(-10deg) rotateX(3deg)}
.phone{width:280px;background:#09090b;border:1px solid rgba(255,255,255,.1);border-radius:44px;overflow:hidden;position:relative;z-index:2;box-shadow:0 40px 100px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06),inset 0 1px 0 rgba(255,255,255,.08),20px 20px 60px rgba(87,0,255,.15)}
.ph-bar{height:28px;display:flex;justify-content:center;align-items:center;background:#09090b}
.ph-pill{width:72px;height:5px;background:rgba(255,255,255,.12);border-radius:3px}
.ph-hdr{padding:14px 16px 12px;border-bottom:1px solid rgba(255,255,255,.07);background:#09090b}
.ph-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.ph-logo{font-size:14px;font-weight:900;letter-spacing:2px;color:#FFE832;font-family:"Doto",monospace;font-variation-settings:"ROND" 50}
.ph-av{width:30px;height:30px;border-radius:50%;background:#5700ff;display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;font-weight:900;border:1.5px solid rgba(255,255,255,.15)}
.ph-hi{font-size:10px;color:rgba(255,255,255,.4);margin-bottom:2px}
.ph-title{font-size:16px;font-weight:900;letter-spacing:-.4px;color:#fff;margin-bottom:10px}
.ph-search{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:50px;padding:9px 14px;font-size:10px;color:rgba(255,255,255,.4)}
.ph-cats{display:flex;gap:5px;padding:9px 14px 0;overflow:hidden;background:#09090b}
.ph-cat{flex-shrink:0;padding:5px 12px;border-radius:50px;font-size:9.5px;font-weight:700;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.5)}
.ph-cat.on{background:#5700ff;color:#FFE832;border-color:#5700ff}
.ph-cards{padding:8px 12px 16px;display:flex;flex-direction:column;gap:8px;background:#09090b}
.ph-card{display:flex;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-md);overflow:hidden;transition:background .2s}.ph-card:hover{background:rgba(87,0,255,.15)}
.ph-thumb{width:58px;height:58px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:20px;background:rgba(87,0,255,.25)}
.ph-info{padding:8px 11px}
.ph-iname{font-size:10.5px;font-weight:800;color:#fff;margin-bottom:2px}
.ph-iloc{font-size:8.5px;color:rgba(255,255,255,.35);margin-bottom:4px}
.ph-tag{display:inline-block;font-size:8px;font-weight:900;padding:3px 8px;border-radius:50px;letter-spacing:.5px}
.ph-tag-v{background:#5700ff;color:#FFE832}
.ph-tag-y{background:#FFE832;color:#2d2000}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.float-notif{position:absolute;background:rgba(15,15,20,.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-md);padding:10px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 16px 40px rgba(0,0,0,.4);z-index:4;white-space:nowrap}
.fn1{top:24px;right:-60px;animation:bob 4s ease-in-out infinite}
.fn2{bottom:60px;left:-64px;animation:bob 4s ease-in-out 2s infinite}
.fn-ico{font-size:20px}.fn-n{font-size:11px;font-weight:800;color:#fff}.fn-s{font-size:9.5px;color:rgba(255,255,255,.5);margin-top:1px}

.stat-band{background:var(--violet);padding:80px 48px}
.stat-row{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr 1fr}
.stat-col{padding:0 40px;text-align:center;border-right:1px solid rgba(255,255,255,.15)}
.stat-col:first-child{padding-left:0}
.stat-col:last-child{border-right:none;padding-right:0}
.stat-num{font-size:clamp(56px,7vw,96px);font-weight:900;letter-spacing:-5px;color:var(--yellow);line-height:1}
.stat-lbl{font-size:14px;color:rgba(255,255,255,.65);margin-top:10px;line-height:1.5;font-weight:500}

.pin-grid{display:grid;grid-template-columns:1fr 1fr}
.pin-left{position:sticky;top:var(--nav);height:calc(100vh - var(--nav));display:flex;flex-direction:column;justify-content:center;padding:60px 56px 60px 48px;border-right:1px solid var(--border);background:var(--bg)}
.pin-vis{background:var(--violetSoft);border:1px solid rgba(87,0,255,.12);border-radius:var(--r-xl);flex:1;max-height:260px;position:relative;overflow:hidden;margin-top:20px}
.pv-panel{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.pv-panel.show{opacity:1;transform:none}
.pv-lbl{font-size:12px;font-weight:700;color:var(--violet)}.pv-icon-wrap{width:68px;height:68px;border-radius:20px;background:var(--violet);border:none;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(87,0,255,.3)}
.pin-progress{display:flex;gap:6px;margin-top:16px}
.pp{flex:1;height:2px;border-radius:2px;background:var(--bg4);transition:background .3s}
.pp.on{background:var(--violet)}
.pin-right{padding:0 48px 0 56px;background:var(--bg)}
.pin-item{padding:44px 0;border-bottom:1px solid var(--border);opacity:.2;transition:opacity .4s var(--ease)}
.pin-item:last-child{border-bottom:none}
.pin-item.lit{opacity:1}
.pi-step{font-size:11px;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:var(--ink4);margin-bottom:10px;transition:color .3s}
.pin-item.lit .pi-step{color:var(--violet)}
.pi-h{font-size:clamp(20px,2.2vw,30px);font-weight:900;letter-spacing:-1px;margin-bottom:9px;line-height:1.06;color:var(--ink)}
.pi-b{font-size:15px;color:var(--ink3);line-height:1.72;max-width:400px}

.feat-grid{display:grid;grid-template-columns:1fr 1fr}
.feat-left{position:sticky;top:var(--nav);height:calc(100vh - var(--nav));display:flex;flex-direction:column;justify-content:center;padding:60px 56px 60px 48px;border-right:1px solid var(--border);background:var(--bg2)}
.feat-vis-box{background:var(--white);border:1px solid var(--border);border-radius:var(--r-xl);height:260px;position:relative;overflow:hidden;margin-top:20px;flex-shrink:0;box-shadow:var(--shadow-sm)}
.fv-panel{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.fv-panel.show{opacity:1;transform:none}
.fv-lbl{font-size:12px;font-weight:700;color:var(--violet)}
.feat-right{padding:40px 48px 40px 56px;background:var(--bg)}
.feat-item{display:flex;gap:16px;padding:30px 0;border-bottom:1px solid var(--border);opacity:.2;transition:opacity .4s}
.feat-item:first-child{padding-top:0}
.feat-item:last-child{border-bottom:none;padding-bottom:0}
.feat-item.on{opacity:1}
.fi-num{font-size:11px;font-weight:900;color:var(--violet);letter-spacing:2px;flex-shrink:0;padding-top:2px;min-width:24px}
.fi-h{font-size:18px;font-weight:800;letter-spacing:-.4px;margin-bottom:7px;color:var(--ink)}
.fi-p{font-size:14px;color:var(--ink3);line-height:1.65}

.three-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:44px}
.tc{background:var(--white);border:1px solid var(--border);border-radius:var(--r-xl);padding:30px 24px;transition:all .3s var(--ease);box-shadow:var(--shadow-sm)}
.tc:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--border2)}
.tc-thumb{width:100%;height:120px;background:var(--violet);border-radius:var(--r-lg);margin-bottom:18px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.tc-thumb::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle, rgba(255,255,255,.08) 1px, transparent 1px);background-size:12px 12px;pointer-events:none}
.tc-h{font-size:16px;font-weight:800;letter-spacing:-.3px;margin-bottom:7px;color:var(--ink)}
.tc-b{font-size:13.5px;color:var(--ink3);line-height:1.65}

.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:44px}
.pc{
  background:var(--white);
  border:1.5px solid var(--border);
  border-radius:20px;
  padding:32px 28px;
  position:relative;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
  box-shadow: var(--shadow-sm), 0 1px 3px rgba(0,0,0,.04);
}
.pc:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--border2)}
.pc.hot{
  border-color:var(--violet);
  border-width:2px;
  background:linear-gradient(155deg,rgba(87,0,255,.07) 0%,rgba(87,0,255,.03) 40%,var(--white) 70%);
  box-shadow:0 4px 24px rgba(87,0,255,.14),0 1px 4px rgba(87,0,255,.08);
}
.pc-tag{position:absolute;top:-1px;left:50%;transform:translateX(-50%);background:var(--violet);color:#fff;font-size:10px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;padding:5px 14px;border-radius:0 0 10px 10px}
.pc-plan{font-size:11px;font-weight:900;letter-spacing:2px;text-transform:uppercase;color:var(--ink3);margin-bottom:16px;display:flex;align-items:center;gap:8px}
.pc-price{font-size:clamp(38px,4vw,56px);font-weight:900;letter-spacing:-3px;line-height:1;margin-bottom:3px;color:var(--ink);font-family:var(--ff)}
.pc-price sup{font-size:16px;font-weight:700;letter-spacing:0;vertical-align:super;font-family:var(--ff)}
.pc-sub{font-size:12px;color:var(--ink4);margin-bottom:5px}
.pc-cond{font-size:12.5px;color:var(--ink3);line-height:1.55;margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid var(--border)}
.pc-cond strong{color:var(--violet)}
.pc-feats{display:flex;flex-direction:column;gap:10px;margin-bottom:24px}
.pc-feat{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--ink2);line-height:1.45;font-weight:500}
.pc-feat::before{
  content:'';
  display:inline-block;
  width:16px;height:16px;
  flex-shrink:0;
  margin-top:2px;
  background:var(--violetSoft);
  border-radius:50%;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%235700ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-size:10px;
  background-position:center;
  background-repeat:no-repeat;
}
/* v=20260518gn9 (P3 C-4-004): limit variant — lock icon, muted color. */
.pc-feat.pc-feat-limit{color:var(--ink4)}
.pc-feat.pc-feat-limit::before{
  background:transparent;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='7' width='10' height='6' rx='1' fill='%238a8a8a'/%3E%3Cpath d='M5 7V5a3 3 0 016 0v2' stroke='%238a8a8a' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size:12px;
}

.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:44px}
.trust-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-xl);padding:34px 26px;box-shadow:var(--shadow-sm)}
.trust-ico{width:52px;height:52px;border-radius:var(--r-md);background:var(--violet);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.trust-h{font-size:17px;font-weight:800;letter-spacing:-.3px;margin-bottom:9px;color:var(--ink)}
.trust-b{font-size:14px;color:var(--ink3);line-height:1.65}

.tcard{flex-shrink:0;width:300px;background:var(--white);border:1px solid var(--border);border-radius:var(--r-xl);padding:22px;box-shadow:var(--shadow-sm)}
.tcard-stars{color:var(--violet);font-size:13px;letter-spacing:2px;margin-bottom:10px}
.tcard-text{font-size:13.5px;color:var(--ink3);line-height:1.65;margin-bottom:16px}
.tcard-name{font-size:13px;font-weight:800;color:var(--ink)}
.tcard-role{font-size:11px;color:var(--ink4);margin-top:2px}

.cta-band{background:var(--violet);padding:var(--sp-lg) 48px;text-align:center}
.cta-kicker{display:inline-block;font-size:11px;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:18px}
.cta-h{font-size:clamp(48px,7vw,100px);font-weight:900;letter-spacing:-4px;line-height:.92;margin-bottom:18px;color:#fff}
.cta-h span{color:var(--yellow)}
.cta-sub{font-size:18px;color:rgba(255,255,255,.65);max-width:520px;margin:0 auto 44px;line-height:1.65}
.cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.app-strip{display:flex;gap:10px;justify-content:center;margin-top:20px;flex-wrap:wrap}
.app-pill{display:inline-flex;align-items:center;gap:7px;padding:10px 16px;border-radius:var(--r-md);background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);font-size:12px;font-weight:700;color:rgba(255,255,255,.7);cursor:pointer;transition:background .15s}
.app-pill:hover{background:rgba(255,255,255,.18)}

.collage{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cg{border-radius:var(--r-xl);height:185px;background:var(--bg2);border:1px solid var(--border);display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;gap:0;font-size:0;overflow:hidden;position:relative;transition:transform .65s var(--ease),opacity .65s var(--ease)}
.cg.tl{transform:translate(-18px,-18px);opacity:0}
.cg.tr{transform:translate(18px,-18px);opacity:0;transition-delay:.1s}
.cg.bl{transform:translate(-18px,18px);opacity:0;transition-delay:.2s}
.cg.br{transform:translate(18px,18px);opacity:0;transition-delay:.3s}
.cg.land{transform:none!important;opacity:1!important}
.cg-lbl{font-size:10px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:#fff;position:absolute;bottom:10px;left:12px;text-shadow:0 1px 4px rgba(0,0,0,.4);z-index:2}.cg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease}.cg-img.loaded{opacity:1}
.cg-yellow{background:var(--yellow)!important;border-color:var(--yellow2)!important}
.cg-yellow .cg-lbl{color:var(--yellowInk)!important}
.cg-violet{background:var(--violet)!important;border-color:var(--violet2)!important}
.cg-violet .cg-lbl{color:rgba(255,255,255,.7)!important}
.cg-lavender{background:var(--lavender)!important;border-color:var(--lavender2)!important}
.cg-lavender .cg-lbl{color:var(--lavenderInk)!important}

.hiw-tabs{display:inline-flex;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-pill);padding:4px;gap:2px;margin-bottom:40px}
.hiw-tab{padding:10px 24px;border-radius:var(--r-pill);font-size:13px;font-weight:800;cursor:pointer;color:var(--ink4);transition:all .2s;border:none;background:none}
.hiw-tab.on{background:var(--violet);color:#fff}
.hiw-tab:not(.on):hover{color:var(--ink)}

footer{background:var(--ink);padding:64px 48px 40px}
.ft-inner{max-width:1400px;margin:0 auto}
.ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
.ft-logo{font-size:19px;font-weight:900;letter-spacing:2px;margin-bottom:8px;color:#fff;font-family:"Doto",monospace;font-variation-settings:"ROND" 50}.ft-logo span{color:var(--yellow)}
.ft-desc{font-size:13px;color:rgba(255,255,255,.45);line-height:1.65;max-width:220px;margin-bottom:20px}
.ft-lang{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--r-pill);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);font-size:12px;font-weight:700;color:rgba(255,255,255,.45);cursor:pointer}
.ft-col-h{font-size:10px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:16px}
.ft-links{display:flex;flex-direction:column;gap:14px}
.ft-a{font-size:13.5px;color:rgba(255,255,255,.55);cursor:pointer;transition:color .15s;background:none;border:none;padding:0;font-family:inherit;text-align:left;display:block;line-height:inherit;text-decoration:none}
.ft-a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ft-bottom{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;padding-top:24px;border-top:1px solid rgba(255,255,255,.08)}
.ft-regulated{font-size:11.5px;color:rgba(255,255,255,.25);line-height:1.6;max-width:520px}
.ft-copy{font-size:12px;color:rgba(255,255,255,.25)}

.feed-hero{background:var(--bg);border-bottom:1px solid var(--border);padding:22px 22px 16px}

.feed-title{font-size:26px;font-weight:900;letter-spacing:-.7px;margin-bottom:14px;color:var(--ink)}
.feed-search{display:flex;align-items:center;gap:10px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-pill);padding:12px 18px;font-size:14px;color:var(--ink4);cursor:text;box-shadow:var(--shadow-sm)}
.chips{display:flex;gap:8px;padding:12px 20px;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,#000 0,#000 92%,transparent 100%);mask-image:linear-gradient(to right,#000 0,#000 92%,transparent 100%)}
.chips::-webkit-scrollbar{display:none}
html[dir="rtl"] .chips{-webkit-mask-image:linear-gradient(to left,#000 0,#000 92%,transparent 100%);mask-image:linear-gradient(to left,#000 0,#000 92%,transparent 100%)}
.chip{flex-shrink:0;padding:8px 16px;border-radius:var(--r-pill);font-size:12.5px;font-weight:700;background:var(--white);border:1.5px solid var(--border);color:var(--ink3);cursor:pointer;transition:background-color,color,border-color,transform .15s;display:inline-flex;align-items:center;gap:6px}
.chip.on{background:var(--violet);color:#fff;border-color:var(--violet)}
.chip:not(.on):hover{border-color:var(--ink3)}
.deals{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;padding:6px 20px 110px}
.deal{background:var(--white);border:0.5px solid var(--border);border-radius:var(--card-radius,16px);overflow:hidden;cursor:pointer;transition:transform,box-shadow .25s var(--ease);box-shadow:var(--shadow-sm)}
.deal:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--border2)}
.deal-banner{height:120px;position:relative;overflow:hidden;background:var(--violetSoft);display:block}
.d-badge{position:absolute;top:12px;right:12px;font-size:10px;font-weight:900;letter-spacing:1px;padding:5px 11px;border-radius:var(--r-pill);z-index:2;font-family:var(--ff)}
.db-violet{background:var(--violet);color:#fff}
.db-yellow{background:var(--yellow);color:var(--yellowInk)}
.deal-body{padding:14px 16px 16px}
.deal-venue{font-size:15px;font-weight:800;letter-spacing:-.3px;color:var(--ink);margin-bottom:2px}
.deal-cat{font-size:11px;color:var(--ink4);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.deal-offer{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:8px;line-height:1.4}
.deal-row{display:flex;align-items:center;justify-content:space-between;margin-top:auto}
.deal-req{font-size:11px;color:var(--ink4);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:8px}
.claim-btn{padding:8px 16px;background:var(--violet);color:#fff;border-radius:var(--r-pill);border:none;font-family:var(--ff);font-size:11.5px;font-weight:800;cursor:pointer;transition:all .15s}
.claim-btn:hover{background:var(--violet2);transform:translateY(-1px)}
.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:500;background:var(--white);border-top:1px solid var(--border);display:flex;justify-content:space-around;padding:10px 0 16px;box-shadow:var(--shadow-drawer)}

@media(min-width:769px){}

body[data-page^="biz"] #nav{display:none!important}

body[data-page^="biz"] .mob-menu{display:none!important}
.bn-item{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;opacity:.28;transition:opacity .15s;min-width:60px;padding:4px}
.bn-item.on{opacity:1}
.bn-ico{font-size:0;line-height:0;display:flex;align-items:center;justify-content:center}
.bn-lbl{font-size:10px;font-weight:700;color:var(--ink3)}
.bn-item.on .bn-lbl{color:var(--violet)}.bn-item.on .bn-ico svg path,.bn-item.on .bn-ico svg circle,.bn-item.on .bn-ico svg rect,.bn-item.on .bn-ico svg line{stroke:var(--violet)}.bn-item:not(.on) .bn-ico svg path,.bn-item:not(.on) .bn-ico svg circle,.bn-item:not(.on) .bn-ico svg rect,.bn-item:not(.on) .bn-ico svg line{stroke:var(--ink4)}

.ob-shell{max-width:480px;margin:0 auto;padding:28px 24px 100px}
.ob-prog{height:3px;background:var(--bg3);border-radius:2px;overflow:hidden;margin-bottom:32px}
.ob-prog-fill{height:100%;background:var(--violet);border-radius:2px;transition:width .4s var(--ease)}
.ob-eye{font-size:11px;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:var(--violet);margin-bottom:10px}
.ob-h{font-size:27px;font-weight:900;letter-spacing:-1px;line-height:1.1;margin-bottom:9px;color:var(--ink)}
.ob-sub{font-size:14px;color:var(--ink3);margin-bottom:22px;line-height:1.55}
.type-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:22px}
.ttile{background:var(--white);border:2px solid var(--border);border-radius:var(--r-xl);padding:26px 16px 20px;cursor:pointer;transition:all .2s;text-align:center;box-shadow:var(--shadow-sm)}
.ttile:hover{border-color:var(--border2)}.ttile.sel{border-color:var(--violet);background:var(--violetSoft)}
.tt-ico{font-size:0;margin-bottom:10px;display:flex;justify-content:center}.tt-n{font-size:15px;font-weight:900;letter-spacing:-.3px;margin-bottom:3px;color:var(--ink)}.tt-d{font-size:12px;color:var(--ink4);line-height:1.45}
.ob-field{margin-bottom:13px}
.ob-field label{display:block;font-size:10px;font-weight:800;color:var(--ink4);letter-spacing:1.2px;text-transform:uppercase;margin-bottom:6px}
.ob-input{width:100%;padding:14px 16px;background:var(--white);border:1.5px solid var(--border);border-radius:var(--r-md);color:var(--ink);font-family:var(--ff);font-size:13px;outline:none;transition:border-color .2s;box-shadow:var(--shadow-sm)}
.ob-input:focus{border-color:var(--violet)}
.ob-input::placeholder{color:var(--ink4)}
.soc-list{display:flex;flex-direction:column;gap:9px;margin-bottom:20px}
.soc-row{display:flex;align-items:center;gap:12px;background:var(--white);border:1.5px solid var(--border);border-radius:var(--r-md);padding:13px 15px;cursor:pointer;transition:all .2s;box-shadow:var(--shadow-sm)}
.soc-row:hover{border-color:var(--border2)}.soc-row.linked{border-color:var(--violet);background:var(--violetSoft)}
.sr-ico{font-size:22px;width:30px;text-align:center;flex-shrink:0}
.sr-n{font-size:14px;font-weight:800;color:var(--ink)}.sr-h{font-size:11px;color:var(--ink4)}
.sr-chk{margin-left:auto;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--border2);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;color:transparent;flex-shrink:0;transition:all .2s}
.soc-row.linked .sr-chk{background:var(--violet);border-color:var(--violet);color:#fff}
.info-box{background:var(--yellowLight);border:1px solid #fef08a;border-radius:var(--r-lg);padding:16px;display:flex;gap:12px;align-items:flex-start;margin-bottom:20px}
.ib-ico{font-size:24px;flex-shrink:0}.ib-h{font-size:14px;font-weight:800;margin-bottom:3px;color:var(--ink)}.ib-s{font-size:12px;color:var(--ink3);line-height:1.55}

.suc-wrap{min-height:calc(100vh - 62px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 24px;background:var(--bg)}
@keyframes popIn{from{opacity:0;transform:scale(.4) rotate(-12deg)}to{opacity:1;transform:scale(1) rotate(0deg)}}
.suc-ring{width:96px;height:96px;border-radius:50%;background:var(--violet);color:#fff;font-size:44px;display:flex;align-items:center;justify-content:center;margin:0 auto 28px;animation:popIn .65s var(--snap) both;box-shadow:0 8px 36px rgba(87,0,255,.35)}
.suc-h{font-size:40px;font-weight:900;letter-spacing:-2px;margin-bottom:10px;color:var(--ink)}
.suc-s{font-size:16px;color:var(--ink3);max-width:300px;margin:0 auto 32px;line-height:1.65}
.suc-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-xl);padding:22px;max-width:360px;width:100%;margin:0 auto 24px;text-align:left;box-shadow:var(--shadow-sm)}
.suc-row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid var(--border);font-size:14px}
.suc-row:last-child{border:none}.suc-lbl{color:var(--ink4)}.suc-val{font-weight:800;color:var(--ink)}
.suc-btns{display:flex;flex-direction:column;gap:10px;max-width:360px;width:100%}

.biz-hdr{background:var(--bizInk,#3a3500);padding:20px 20px 16px;color:#fff}
/* Mobile biz logo: shown inside biz-hdr when sidebar is hidden */
.biz-mob-logo {
  display: none;
  margin-bottom: 12px;
}
@media (max-width: 768px) {
  .biz-mob-logo {
    display: block;
  }
}

.biz-disc-hdr{background:var(--bizInk,#3a3500);padding:20px 20px 16px;color:#fff}
.biz-meta-lbl{font-size:12px;color:rgba(20,20,30,.65);margin-bottom:2px;font-weight:600}
.biz-venue{font-size:24px;font-weight:900;letter-spacing:-.6px;margin-bottom:16px}
/* v=20260517z AUDIT-NOTE kpi-row-width: this rule used to cap max-width
   at 760px, which caused widely inconsistent rendered widths across biz
   pages (Applications, Content, Offers, Venues) because the cap fired
   whenever the parent flex container offered more than 760px. The kpi-row
   is now allowed to fill its centered `.bento-hero-inner` parent
   (max-width 1240px - 16px*2 padding = 1208px effective). Width is set
   explicitly here so the inline `style=""` blocks on each kpi-row
   element don't need to repeat it. */
/* v=20260518gn9 AUDIT-NOTE kpi-row-width: third attempt.
   Enforce width:100% AND per-cell min-width via minmax(180px,1fr) so
   cells can't collapse below readable size regardless of parent.
   Card styling folded into the rule so the inline style="..." blocks
   on each page are now redundant. */
.kpi-row{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr)); /* v=20260530gn75: was minmax(min(180px,100%),1fr) — 3x180 mins overflowed narrow containers, pushing the 3rd stat column outside the white card */
  gap:12px;
  width:100%;
  max-width:1208px;
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box;
  background:#fff;
  border-radius:14px;
  padding:14px 16px;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
  text-align:center;
}
.kpi{background:#fff;border:1px solid rgba(20,20,30,.08);border-radius:var(--r-md);padding:13px}
.kpi-n{font-size:24px;font-weight:900;letter-spacing:-.6px;color:var(--ink,#1a1a1a)}.kpi-l{font-size:11px;color:rgba(20,20,30,.65);margin-top:2px;font-weight:600;letter-spacing:.3px}

.sec-label{font-size:14px;font-weight:900;letter-spacing:-.2px;margin-bottom:12px;color:var(--ink)}
.creator-list{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}
.cr-row{display:flex;align-items:center;gap:11px;background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:13px 15px;transition:all .15s;box-shadow:var(--shadow-sm)}
.cr-row:hover{border-color:var(--border2);box-shadow:var(--shadow-md)}
.cr-av{width:38px;height:38px;border-radius:50%;background:var(--violetSoft);display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.cr-n{font-size:13.5px;font-weight:800;color:var(--ink)}.cr-m{font-size:11px;color:var(--ink4);margin-top:1px}
.offer-card {
  display: block;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 0;
  margin-bottom: 0;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s, transform .15s;
  position: relative;
}
.offer-card:hover {
  border-color: var(--biz2,#f5e84a);
  box-shadow: 0 4px 16px rgba(58,53,0,.10);
  transform: translateY(-1px);
}

.oc-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 14px 10px;
}
.oc-icon {
  width: 36px;
  height: 36px;
  border-radius:var(--r-sm);
  background: var(--bizSoft,rgba(245,232,74,.12));
  border: 1px solid var(--biz2,#f5e84a);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1;
}
.oc-meta {
  flex: 1;
  min-width: 0;
}
.oc-badges {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.oc-aed {
  font-size: 11px;
  font-weight: 800;
  color: var(--bizInk,#3a3500);
  background: var(--bizSoft,rgba(245,232,74,.15));
  border: 1px solid var(--biz2,#f5e84a);
  padding: 1px 7px;
  border-radius:var(--r-pill);
}
.oc-vname {
  font-size: 10px;
  color: var(--ink4);
  font-weight: 600;
}
.oc-title {
  font-size: 14px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -.2px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.oc-desc {
  font-size: 12px;
  color: var(--ink3);
  line-height: 1.45;
  margin-top: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.oc-menu-btn {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  color: var(--ink4);
  transition: border-color .15s;
}
.oc-menu-btn:hover { border-color: var(--border2); }
.oc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 0 14px 10px;
}
.oc-footer {
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}
.oc-stat {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--ink4);
  padding: 7px 10px;
  border-right: 1px solid var(--border);
  white-space: nowrap;
}
.oc-stat:last-child { border-right: none; }
.oc-stat svg { flex-shrink: 0; opacity: .7; }
.oc-stat-applied--has { color: var(--bizInk,#3a3500); font-weight: 800; }

.oc-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}
.oc-n{font-size:15px;font-weight:900;letter-spacing:-.3px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 24px)}.oc-s{font-size:12px;color:var(--ink4);margin-top:2px}
.oc-body{font-size:13px;color:var(--ink3);line-height:1.8;border-top:1px solid var(--border);padding-top:12px}
.add-offer-btn{width:100%;padding:17px;background:var(--violet);color:#fff;border-radius:var(--r-lg);border:none;font-family:var(--ff);font-size:15px;font-weight:900;cursor:pointer;transition:all .15s;box-shadow:0 4px 20px rgba(87,0,255,.25)}
.add-offer-btn:hover{background:var(--violet2);transform:translateY(-2px);box-shadow:0 8px 28px rgba(87,0,255,.35)}

.band-yellow{background:var(--yellow);padding:100px 48px}
.band-lavender{background:var(--lavender);padding:100px 48px}
.band-violet{background:var(--violet);padding:100px 48px}

@media(max-width:900px){
  .nav-type-tabs,
  .nav-links-r .nav-link,
  .nav-divider { display: none; }
  .nav-links-r { gap: 8px; }
}

@media(max-width:768px){
 :root{--nav:62px}
 #nav{padding:0 20px;gap:14px}
 .nav-type-tabs,.nav-links-r .nav-link,.nav-divider{display:none}
 .nav-links-r{gap:8px}
 .section,.section-sm,.full-section,.wrap{padding-left:24px;padding-right:24px}
 .band-yellow,.band-lavender,.band-violet{padding:72px 24px}
 .stat-band{padding:52px 24px}
 .stat-row{grid-template-columns:1fr}
 .stat-col{padding:28px 0;border-right:none;border-bottom:1px solid rgba(255,255,255,.15)}
 .stat-col:last-child{border-bottom:none}
 .pin-grid,.feat-grid{grid-template-columns:1fr}
 .pin-left,.feat-left{position:static;height:auto;padding:48px 24px 0;border-right:none}
 .pin-right{padding:24px 24px 48px}
 .feat-right{padding:24px 24px 48px}
 .trust-grid,.three-cards,.pricing-grid{grid-template-columns:1fr}
 .ft-grid{grid-template-columns:1fr 1fr}
 .ps-inner{padding:0 20px}
 footer{padding:48px 24px 32px}
 .phone-scene{display:none}
}
@media(max-width:640px){
 .kpi-row{grid-template-columns:1fr 1fr 1fr}
 .ft-grid{grid-template-columns:1fr}
 .cta-btns{flex-direction:column;align-items:center}
 .type-tiles{grid-template-columns:1fr 1fr}
}

.dc-stack{position:relative}
.dc-card{
  position:absolute;
  width:320px;
  border-radius:18px;
  border:1.5px solid rgba(255,255,255,.1);
  background:rgba(12,12,18,.85);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  padding:20px 22px;
  transform-origin:left center;
  transition:transform .55s cubic-bezier(.16,1,.3,1), box-shadow .55s cubic-bezier(.16,1,.3,1), opacity .4s ease;
  cursor:default;
  overflow:hidden;
}
.dc-card::after{
  content:'';position:absolute;right:0;top:-5%;
  height:110%;width:140px;
  background:linear-gradient(to left, rgba(5,5,10,1) 0%, transparent 100%);
  pointer-events:none;z-index:1;
}
.dc-card:hover::after{opacity:0}
.dc-card-inner{position:relative;z-index:2}
.dc-card-1{
  transform: skewY(-8deg) translateY(0px) translateX(0px);
  box-shadow:0 8px 40px rgba(0,0,0,.5);
  opacity:.55;
  filter:grayscale(60%);
  z-index:1;
}
.dc-card-2{
  transform: skewY(-8deg) translateY(56px) translateX(24px);
  box-shadow:0 12px 48px rgba(0,0,0,.5);
  opacity:.75;
  filter:grayscale(30%);
  z-index:2;
}
.dc-card-3{
  transform: skewY(-8deg) translateY(112px) translateX(48px);
  box-shadow:0 12px 40px rgba(0,0,0,.5);
  opacity:1;
  filter:none;
  border-color:rgba(87,0,255,.4);
  z-index:3;
}
.dc-card-1:hover{transform:skewY(-8deg) translateY(-16px) translateX(0px);opacity:1;filter:none;z-index:10;box-shadow:var(--shadow-overlay)}
.dc-card-2:hover{transform:skewY(-8deg) translateY(40px) translateX(24px);opacity:1;filter:none;z-index:10;box-shadow:var(--shadow-overlay)}
.dc-card-3:hover{transform:skewY(-8deg) translateY(96px) translateX(48px);z-index:10;box-shadow:var(--shadow-overlay)}
.dc-card-top{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.dc-icon-wrap{width:26px;height:26px;border-radius:var(--r-8);background:rgba(87,0,255,.25);border:1px solid rgba(87,0,255,.3);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dc-icon-active{background:rgba(87,0,255,.5);border-color:rgba(87,0,255,.6);box-shadow:0 0 12px rgba(87,0,255,.4)}
.dc-card-label{font-size:13px;font-weight:800;color:rgba(255,255,255,.85);letter-spacing:-.2px}
.dc-card-desc{font-size:14px;color:rgba(255,255,255,.55);font-weight:500;line-height:1.4}
.dc-card-badge{margin:8px 0 6px}
.dc-card-meta{font-size:11px;color:rgba(255,255,255,.3);font-weight:600;margin-top:6px}

.nav-hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;z-index:1001min-width:44px;min-height:44px}
.nav-hamburger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:all .3s cubic-bezier(.16,1,.3,1)}
.nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mob-menu{position:fixed;top:var(--nav);left:0;right:0;background:var(--white);border-bottom:1px solid var(--border);z-index:999;transform:translateY(-8px);opacity:0;pointer-events:none;transition:all .3s cubic-bezier(.16,1,.3,1);box-shadow:var(--shadow-lg)}
.mob-menu.open{transform:none;opacity:1;pointer-events:all}
.mob-menu-inner{padding:16px 20px 24px;display:flex;flex-direction:column;gap:2px}
.mob-item{background:none;border:none;font-family:var(--ff);font-size:16px;font-weight:700;color:var(--ink);text-align:left;padding:12px 8px;cursor:pointer;border-radius:var(--r-sm);transition:background .15s}
.mob-item:hover{background:var(--bg2)}
.mob-divider{height:1px;background:var(--border);margin:8px 0}
.mob-cta{width:100%;padding:16px;background:var(--violet);color:#fff;border:none;border-radius:var(--r-pill);font-family:var(--ff);font-size:15px;font-weight:900;cursor:pointer;margin-top:4px;transition:all .15s}
.mob-cta:hover{background:var(--violet2)}
@media(max-width:768px){
  .nav-hamburger{display:flex}
  .nav-cta{display:none}
  /* v=20260518gn9 (mobile audit #1) — see shared.css */
  .ntt-about,
  .nav-auth-cluster,
  .nav-links-r { display: none !important; }
  /* v=20260518gn9 (mobile audit #4): iOS zoom prevention */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
  select,
  textarea { font-size: 16px !important; }
}
@media(min-width:769px){
  .mob-menu{display:none!important}
}

.auth-page{display:grid;grid-template-columns:1fr 1fr;min-height:100vh}
.auth-brand{background:#0a0a0a;display:flex;flex-direction:column;justify-content:center;padding:64px 56px;color:#fff;position:relative;overflow:hidden}
.auth-brand::before{content:'';position:absolute;inset:-40px;background:radial-gradient(ellipse 80% 60% at 40% 30%,rgba(87,0,255,.25) 0%,transparent 70%);pointer-events:none}
.auth-brand-logo{font-size:18px;font-weight:900;letter-spacing:-.5px;color:#fff;margin-bottom:48px;position:relative;z-index:1;text-decoration:none;display:block}
.auth-brand-h{font-size:clamp(36px,4vw,56px);font-weight:900;letter-spacing:-2px;line-height:.96;margin-bottom:16px;color:#fff;position:relative;z-index:1}
.auth-brand-accent{color:#faef7c}
.auth-brand-sub{font-size:15px;color:rgba(255,255,255,.45);line-height:1.65;max-width:340px;position:relative;z-index:1}
.auth-proof-pill{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-pill);padding:6px 14px;font-size:12px;font-weight:700;color:rgba(255,255,255,.6);margin-top:24px;position:relative;z-index:1}
.auth-bullet{display:flex;align-items:center;gap:12px;font-size:14px;color:rgba(255,255,255,.55);font-weight:500;position:relative;z-index:1}
.auth-bullet-ico{width:28px;height:28px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-8);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.auth-form-wrap{display:flex;align-items:center;justify-content:center;padding:48px 40px;background:var(--white)}
.auth-form-inner{width:100%;max-width:400px}
.auth-mobile-logo{display:none;font-size:18px;font-weight:900;letter-spacing:-.5px;color:var(--ink);margin-bottom:24px;text-decoration:none}
@media(max-width:768px){
  .auth-page{grid-template-columns:1fr}
  .auth-brand{display:none}
  .auth-form-wrap{padding:32px 20px;min-height:100vh;align-items:flex-start;padding-top:40px}
  .auth-mobile-logo{display:block}
}

@keyframes inputShake {
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(4px)}
}
.ob-input.error{border-color:#ef4444!important;box-shadow:0 0 0 3px rgba(239,68,68,.12)!important;animation:inputShake .4s ease}
.ob-input:focus.error{border-color:var(--violet)!important;box-shadow:0 0 0 3px rgba(87,0,255,.10)!important;animation:none}
.ob-input.error::placeholder{color:rgba(239,68,68,.6)}

@keyframes wordIn{from{opacity:0;transform:translateY(20px)}}
.wrd{display:inline-block;opacity:0;animation:wordIn .65s var(--ease) var(--d,0s) both}
.yword{color:var(--violet)}
.grid-2r{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;margin-top:0}
@media(max-width:768px){
 #hero-grid{grid-template-columns:1fr!important;padding-left:24px!important;padding-right:24px!important}
 .grid-2r{grid-template-columns:1fr;gap:40px}
 .section>div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
}

.deal-hero{height:260px;background-color:var(--violetSoft);display:flex;align-items:flex-end;padding:24px;position:relative;font-size:72px}

body[data-page="deal"] {
  background: var(--surface, #f5f3f0);
}

/* ── Shared eyebrow / section label ── */
.eyebrow-label{font-size:10px;font-weight:800;letter-spacing:1.2px;color:var(--ink4,#606060);text-transform:uppercase;font-family:var(--ff)}
.deal-hero-badge{position:absolute;top:20px;right:20px;background:var(--violet);color:#fff;font-size:13px;font-weight:900;padding:8px 18px;border-radius:var(--r-pill)}
.deal-body-wrap{padding:24px 20px}
.venue-row{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.venue-av{width:56px;height:56px;border-radius:var(--r-md);background:var(--violetMid);display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0;border:1px solid var(--border)}
.venue-name{font-size:22px;font-weight:900;letter-spacing:-.6px;color:var(--ink)}
.venue-cat{font-size:13px;color:var(--ink4);font-weight:600;margin-top:2px}
.detail-section{margin-bottom:24px}
.ds-label{font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--ink4);margin-bottom:10px}
.req-pills{display:flex;flex-wrap:wrap;gap:8px}
.req-pill{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;background:var(--violetMid);border:1px solid rgba(87,0,255,.15);border-radius:var(--r-pill);font-size:13px;font-weight:700;color:var(--violet)}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.info-tile{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-lg);padding:14px 16px}
.it-lbl{font-size:11px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink4);margin-bottom:3px}
.it-val{font-size:14px;font-weight:800;color:var(--ink)}
.claim-bar{position:fixed;bottom:0;left:0;right:0;padding:16px 20px 28px;background:var(--white);border-top:1px solid var(--border);display:flex;align-items:center;gap:10px;z-index:500}

.deal-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;cursor:pointer;transition:box-shadow .18s,transform .18s;box-shadow:var(--shadow-sm)}
.deal-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}

.claim-card{background:var(--white);border:0.5px solid var(--border);border-radius:var(--r-md);overflow:hidden;margin-bottom:12px;box-shadow:var(--shadow-sm)}
.cc-ico{width:48px;height:48px;border-radius:var(--r-md);background:var(--violetSoft);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.cc-venue{font-size:15px;font-weight:900;color:var(--ink)}
.cc-offer{font-size:12px;color:var(--ink3);margin-top:2px}
.collab-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.collab-venue{font-size:13px;font-weight:700;color:var(--ink)}
.collab-date{font-size:11px;color:var(--ink4);margin-top:1px}
.collab-status{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.collab-status.completed{color:var(--green)}
.collab-status.pending{color:#ca8a04}
.collab-status.active{color:var(--violet)}
.collab-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.empty-state{display:flex;flex-direction:column;align-items:center;padding:40px 20px;text-align:center;color:var(--ink4);gap:10px}

.settings-nav::-webkit-scrollbar{display:none}
.sn-item{flex-shrink:0;padding:9px 16px;border-radius:var(--r-pill);font-size:13px;font-weight:700;color:var(--ink4);cursor:pointer;transition:all .15s;white-space:nowrap;background:none;border:none;font-family:var(--ff)}
.sn-item.on{background:var(--bizSoft,rgba(245,232,74,.12));color:var(--bizInk,#3a3500);font-weight:800}

.settings-section.active{display:block}
.st-section-head {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink4);
  margin-bottom: 16px;
  padding-top: 4px;
}

.danger-zone{background:#fff5f5;border:1px solid #fecaca;border-radius:var(--r-xl);padding:20px;margin-top:8px}

.content-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;padding:16px 20px 100px}
.content-item{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .2s}
.content-item:hover{transform:translateY(-2px)}
.ci-thumb{height:110px;background:var(--bg3);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.ci-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ci-platform{position:absolute;top:8px;left:8px;font-size:10px;font-weight:900;padding:3px 8px;border-radius:var(--r-pill);background:rgba(0,0,0,.5);color:#fff}
.ci-body{padding:10px 12px}
.ci-handle{font-size:12px;font-weight:800;color:var(--ink)}
.ci-stats{font-size:11px;color:var(--ink4);margin-top:2px}

.disc-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-xl);padding:20px;margin-bottom:10px;box-shadow:var(--shadow-sm)}
.dc-top{display:flex;gap:14px;margin-bottom:14px}
.dc-av{width:52px;height:52px;border-radius:50%;background:var(--violetMid);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.dc-name{font-size:16px;font-weight:900;color:var(--ink)}
.dc-stat{flex:1;text-align:center}
.dc-sn{font-size:15px;font-weight:900;color:var(--violet)}
.dc-sl{font-size:10px;color:var(--ink4);margin-top:2px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}

.upload-area{border:2px dashed var(--border2);border-radius:var(--r-lg);padding:32px 20px;text-align:center;margin:0 20px 20px;cursor:pointer;transition:all .2s}
.upload-area:hover{border-color:var(--violet);background:var(--violetSoft)}

.nav-auth-cluster {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.nav-links-r {
  display: flex;
  align-items: center;
  gap: 4px;
}

body.logged-in .nav-marketing { display: none !important; }
body.logged-in .nav-type-tabs { display: none !important; }

.nav-dash-link { font-weight: 600; }

body.auth-loading #page-main > section,
body.auth-loading #page-main > .section,
body.auth-loading #page-main > [id="howcreat"],
body.auth-loading #page-main > [id="biz-feat"],
body.auth-loading #page-main > .pricing-hero {
  opacity: 0;
  transition: opacity 0.2s;
}
body.auth-ready #page-main > section,
body.auth-ready #page-main > .section,
body.auth-ready #page-main > [id="howcreat"],
body.auth-ready #page-main > [id="biz-feat"] {
  opacity: 1;
}

body.logged-in[data-page="home"] #page-main > section:not(.logged-in-dashboard),
body.logged-in[data-page="home"] #page-main > .section:not(.logged-in-dashboard),
body.logged-in[data-page="home"] #page-main > [id="howcreat"],
body.logged-in[data-page="home"] #page-main > [id="biz-feat"],
body.logged-in[data-page="home"] #page-main > [id="stat-band"],
body.logged-in[data-page="home"] #page-main > .pricing-hero {
  display: none !important;
}

.claim-confirm-overlay {
  display:none;position:fixed;inset:0;z-index:700;
  background:rgba(0,0,0,.5);backdrop-filter:blur(4px);
  align-items:center;justify-content:center;padding:20px;
}
.claim-confirm-overlay.show { display:flex; }
.claim-confirm-box {
  background:var(--white);border-radius:20px;
  padding:28px 24px;max-width:420px;width:100%;
  box-shadow:var(--shadow-overlay);
  animation:modalIn .2s ease both;
}
@keyframes modalIn {
  from { opacity:0;transform:scale(.95) translateY(10px); }
  to   { opacity:1;transform:none; }
}

/* gf: manual IG connect modal. Used while Meta App Review is pending.
   Same visual language as srConfirm (fade-backdrop, scale-in card) but
   wider to fit the handle-input → result-card → action-stack flow. */
.sr-modal-backdrop {
  position:fixed;inset:0;z-index:9998;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  background:rgba(0,0,0,.5);backdrop-filter:blur(4px);
  animation:fadeIn .15s ease;
  font-family:var(--ff,'Plus Jakarta Sans',sans-serif);
}
.sr-modal-card {
  background:var(--white,#fff);border-radius:20px;
  max-width:480px;width:100%;
  max-height:90vh;overflow-y:auto;overscroll-behavior:contain;
  box-shadow:var(--shadow-overlay,0 24px 80px rgba(0,0,0,.22));
  animation:modalIn .2s ease both;
}
.sr-modal-close {
  background:none;border:none;font-size:24px;cursor:pointer;
  color:var(--ink4,#767676);padding:4px 8px;line-height:1;
  border-radius:8px;transition:background .15s;
}
.sr-modal-close:hover { background:var(--bg2,#f5f3f0); }

.ccb-ico { display:block;text-align:center;margin-bottom:14px; }
.ccb-h { font-size:19px;font-weight:900;color:var(--ink);margin-bottom:8px;text-align:center; }
.ccb-s { font-size:13px;color:var(--ink3);line-height:1.6;text-align:center;margin-bottom:20px; }
.ccb-actions { display:flex;gap:10px; }

#upload-modal {
  display:none;position:fixed;inset:0;z-index:700;
  background:rgba(0,0,0,.5);backdrop-filter:blur(4px);
  align-items:flex-end;justify-content:center;
}
#upload-modal.show { display:flex; }
@media (min-width:600px) {
  #upload-modal { align-items:center; }
  .upload-sheet { border-radius:20px!important;max-width:460px; }
}
.upload-sheet {
  background:var(--white);border-radius:24px 24px 0 0;
  padding:24px;width:100%;max-height:80vh;overflow-y:auto;
  animation:slideUp .3s cubic-bezier(.16,1,.3,1) both;
}
@keyframes slideUp {
  from { transform:translateY(100%); }
  to   { transform:translateY(0); }
}
.us-h { font-size:18px;font-weight:900;color:var(--ink);margin-bottom:6px; }
.us-s { font-size:13px;color:var(--ink3);margin-bottom:20px;line-height:1.5; }
.url-input-row { display:flex;gap:8px;margin-bottom:12px; }

#share-sheet {
  display:none;position:fixed;inset:0;z-index:700;
  background:rgba(0,0,0,.5);backdrop-filter:blur(4px);
  align-items:flex-end;justify-content:center;
}
#share-sheet.show { display:flex; }
.share-sheet-inner {
  background:var(--white);border-radius:24px 24px 0 0;
  padding:24px;width:100%;max-width:460px;
  animation:slideUp .3s cubic-bezier(.16,1,.3,1) both;
}
.ssh { font-size:16px;font-weight:900;color:var(--ink);margin-bottom:16px; }
.share-options { display:grid;grid-template-columns:repeat(4,1fr);gap:10px; }
.so { display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer; }
.so-ico { width:52px;height:52px;border-radius:var(--r-md);background:var(--bg2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:22px;transition:background .15s; }
.so-ico:hover { background:var(--violetSoft); }
.so-lbl { font-size:11px;color:var(--ink3);font-weight:600; }

.nav-bell-btn{background:none;border:none;cursor:pointer;color:inherit;display:inline-flex;align-items:center;justify-content:center}
.nav-guest-only,.nav-loggedin-only,.mob-biz-only{transition:opacity .15s}
.skip-link{position:absolute;top:-44px;left:0;background:var(--violet);color:#fff;padding:12px 20px;z-index:10000;font-size:14px;font-weight:700;text-decoration:none;border-radius:0 0 8px 0;min-height:44px;display:inline-flex;align-items:center}
.skip-link:focus{top:0}

.pricing-hero{
  background: linear-gradient(135deg, #1a0040 0%, #3a00a0 40%, #5700ff 70%, #7c3aed 100%);
  padding: 90px 24px 72px;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.pricing-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 50%, rgba(245,232,74,.10) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 80% 30%, rgba(124,58,237,.35) 0%, transparent 70%),
    radial-gradient(ellipse 80% 40% at 50% 100%, rgba(87,0,255,.4) 0%, transparent 60%);
  pointer-events: none;
}
.pricing-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 200px;
  pointer-events: none;
  opacity: 0.6;
}
.pricing-hero > * { position: relative; z-index: 1; }
.ph-eyebrow{font-size:11px;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:16px}
.ph-h{font-size:clamp(40px,5vw,68px);font-weight:900;letter-spacing:-1.5px;line-height:1.05;letter-spacing:-3px;line-height:.94;color:#fff}
.ph-sub{font-size:17px;color:rgba(255,255,255,.65);max-width:480px;margin:14px auto 0;line-height:1.65}
.pricing-toggle{display:flex;align-items:center;gap:12px;justify-content:center;margin:32px 0 0;font-size:14px;font-weight:700}
.pt-label{color:rgba(255,255,255,.7)}
.pt-label.on{color:#fff}

.pricing-body{width:100%;padding:0;margin:0;overflow-x:hidden;}
.compare-table{background:var(--white);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-sm)}
.ct-head{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;background:var(--bg2);border-bottom:1px solid var(--border);padding:16px 20px}
.ct-th{font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink4);text-align:center}
.ct-th:first-child{text-align:left}
.ct-th.hot{color:var(--violet)}
.ct-row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;padding:14px 20px;border-bottom:1px solid var(--border);align-items:center;transition:background .15s}
.ct-row:last-child{border-bottom:none}
.ct-row:nth-child(odd){background:var(--bg2)}
.ct-feat{font-size:13.5px;color:var(--ink3)}
.ct-val{text-align:center;font-size:13px;font-weight:700;color:var(--ink4)}
.ct-val.yes{color:var(--violet)}
.ct-val.no{color:var(--border2)}

.faq-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font-family: var(--ff);
  font-size: inherit;
  cursor: pointer;
  padding: 0;
}
.faq-item{border-bottom:1px solid var(--border);overflow:hidden}
.faq-q{display:flex;justify-content:space-between;align-items:center;padding:18px 0;cursor:pointer;font-size:15px;font-weight:700;color:var(--ink);background:none;border:none;width:100%;text-align:left;font-family:var(--ff)}
.faq-icon{font-size:18px;color:var(--ink4);transition:transform .2s;flex-shrink:0}
.faq-item.open .faq-icon{transform:rotate(45deg)}
.faq-a{font-size:14px;color:var(--ink3);line-height:1.7;max-height:0;overflow:hidden;transition:max-height .35s var(--ease,cubic-bezier(.4,0,.2,1)),padding .35s;padding:0}
.faq-item.open .faq-a{max-height:2000px;padding-bottom:16px}

.share-box{position:fixed;inset:0;z-index:999;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .25s}
.share-box.show{opacity:1;pointer-events:all}
.share-grid{background:var(--white);border-radius:20px 20px 0 0;padding:24px 20px 40px;width:100%;max-width:480px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.sg-item{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;padding:12px 8px;border-radius:var(--r-12);border:none;background:none;font-family:var(--ff);transition:background .15s}
.sg-item:hover{background:var(--bg2)}
.sg-ico{width:48px;height:48px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:22px}
.sg-lbl{font-size:11px;font-weight:700;color:var(--ink3)}

.biz-sidebar{width:220px;min-width:220px;background:var(--white);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:14px 0 24px;min-height:100vh;position:sticky;top:0;height:100vh;overflow-y:auto}
.biz-sidebar-logo{font-size:20px;font-weight:900;letter-spacing:-.5px;color:var(--bizInk,#3a3500);padding:0 20px 16px;font-family:'Doto',monospace}
.biz-sidebar-venue{font-size:12px;font-weight:700;color:var(--ink4);padding:0 20px 16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-bottom:1px solid var(--border);margin-bottom:8px}
.biz-nav-items{display:flex;flex-direction:column;gap:2px;padding:0 12px;flex:0 0 auto}
.biz-nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-sm);font-size:13px;font-weight:600;color:var(--ink3);cursor:pointer;transition:background-color,color .15s;text-decoration:none;min-height:44px}
.biz-nav-item:hover{background:var(--bg2);color:var(--ink)}
.biz-nav-item.active,.biz-nav-item[aria-current="page"]{background:rgba(87,0,255,.07);color:var(--violet,#5700ff);font-weight:800}
.biz-nav-item.active svg,.biz-nav-item[aria-current="page"] svg{stroke:var(--violet,#5700ff)}
.biz-sidebar-bottom{border-top:1px solid var(--border,#e8e8e8);margin-top:auto;padding-top:12px;padding:12px;border-top:1px solid var(--border);margin-top:auto}
.biz-main-content{flex:1 1 0%;min-width:320px;display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto}
.biz-wrapper{display:flex;flex:1;min-height:100vh;}

.biz-col-left,.biz-col-right { min-width:0; width:100%; }
.biz-col-left { min-width:0;overflow-wrap:break-word }

.form-section{margin-bottom:28px}
.form-section-title{font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--ink4);margin-bottom:14px}
.offer-preview{background:var(--violet);border-radius:var(--r-xl);padding:20px;margin-bottom:24px;color:#fff}
.op-label{font-size:10px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:6px}
.op-val{font-size:20px;font-weight:900;letter-spacing:-.5px}
.op-sub{font-size:12px;color:rgba(255,255,255,.6);margin-top:3px}
.range-val{font-size:15px;font-weight:800;color:var(--violet);text-align:center;margin-bottom:4px}
.select-field{width:100%;padding:14px 16px;background:var(--white);border:1.5px solid var(--border);border-radius:var(--r-md);color:var(--ink);font-family:var(--ff);font-size:14px;outline:none;appearance:none;-webkit-appearance:none;transition:border-color .2s;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px;cursor:pointer}
.select-field:focus{border-color:var(--violet);box-shadow:0 0 0 3px rgba(87,0,255,.1)}
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--border)}
.toggle-row:last-child{border-bottom:none}
.tr-label{font-size:14px;font-weight:700;color:var(--ink)}
.tr-sub{font-size:12px;color:var(--ink4);margin-top:2px}

body[data-page^="biz"] input[type="range"] {
  accent-color: var(--biz3);
}
body[data-page^="biz"] input[type="range"]::-webkit-slider-thumb {
  background: var(--biz3);
  box-shadow: 0 0 0 3px var(--bizSoft);
}
body[data-page^="biz"] input[type="range"]::-moz-range-thumb {
  background: var(--biz3);
}

body[data-page^="biz"] .select-field:focus {
  border-color: var(--biz2) !important;
  outline: 2px solid var(--bizSoft) !important;
  box-shadow: 0 0 0 3px var(--bizSoft) !important;
}
body[data-page^="biz"] .ob-input:focus.error {
  border-color: var(--coral) !important;
  box-shadow: 0 0 0 3px rgba(255,80,80,.12) !important;
}

body[data-page^="biz"] a:not(.btn):not(.biz-nav-item):not(.nav-logo):not(.skip-link):not([class*="cr-pill"]) {
  color: var(--bizInk);
}
body[data-page^="biz"] a:not(.btn):not(.biz-nav-item):not(.nav-logo):not(.skip-link):not([class*="cr-pill"]):hover {
  opacity: .75;
}

body[data-page^="biz"] .cr-av {
  color: var(--bizInk) !important;
  background: var(--biz) !important;
}
body[data-page^="biz"] .claim-approved-badge {
  color: var(--bizInk) !important;
}
body[data-page^="biz"] .post-link {
  color: var(--bizInk) !important;
}

body[data-page^="biz"] .notif-mark-all-btn {
  color: var(--bizInk) !important;
}

body[data-page^="biz"] #nav-role-label {
  color: var(--bizInk);
  background: var(--biz);
  padding: 2px 7px;
  border-radius: 6px;
}

body[data-page^="biz"] .pu-ico path[fill="#5700ff"],
body[data-page^="biz"] .pu-ico path[stroke="#5700ff"] {
  fill: var(--bizInk) !important;
  stroke: var(--bizInk) !important;
}

body[data-page^="biz"] #setup-prog-bar {
  background: var(--biz3) !important;
}

body[data-page^="biz"] .offer-preview {
  background: var(--bizInk) !important;
  color: var(--biz) !important;
}
body[data-page^="biz"] .offer-preview * {
  color: var(--biz) !important;
}
body[data-page^="biz"] .offer-preview .badge {
  background: var(--biz) !important;
  color: var(--bizInk) !important;
}

body[data-page^="biz"] .content-stats-row {
  background: var(--bizInk) !important;
  color: var(--biz) !important;
}
body[data-page^="biz"] .content-stats-row * {
  color: var(--biz) !important;
}

body[data-page^="biz"] .range-val {
  color: var(--bizInk) !important;
}

body[data-page^="biz"] .nav-avatar {
  background: var(--bizInk) !important;
  color: var(--biz) !important;
}

body[data-page^="biz"] .ob-input:focus {
  border-color: var(--biz2) !important;
  box-shadow: 0 0 0 3px var(--bizSoft) !important;
}
body[data-page^="biz"] .ob-input[aria-invalid="true"] {
  border-color: var(--coral) !important;
}
body[data-page^="biz"] .form-section-title,
body[data-page^="biz"] .fs-title {
  color: var(--bizInk) !important;
}
body[data-page^="biz"] .ob-field > label {
  color: var(--bizInk) !important;
  opacity: .7;
}

body[data-page^="biz"] .add-offer-btn {
  background: var(--bizSoft) !important;
  border: 1.5px dashed var(--biz3) !important;
  color: var(--bizInk) !important;
  box-shadow: none !important;
}
body[data-page^="biz"] .add-offer-btn:hover {
  background: var(--bizMid) !important;
  border-color: var(--biz2) !important;
  transform: translateY(-1px);
}
body[data-page^="biz"] .add-offer-btn svg {
  stroke: var(--bizInk) !important;
}

#vs-form {
  padding-top: 110px !important;
}
@media (max-width: 768px) {

}
.ct-section-hdr { background: var(--bg2); }
.ct-row:not(.ct-section-hdr):hover { background: rgba(87,0,255,.035); }
.ct-row:not(.ct-section-hdr):nth-child(even) { background: var(--bg2); }
.ct-row:not(.ct-section-hdr):nth-child(even):hover { background: rgba(87,0,255,.05); }

.vs-sticky-nav {
  position: fixed;
  top: 0;
  left: 0; right: 0;
  z-index: 200;
  background: var(--white);
  border-bottom: 1px solid var(--biz2, #f5e84a);
  padding: 0;
}

@media (min-width: 769px) {
  .vs-sticky-nav {
    left: 220px;
  }
}

.vs-nav-row {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 16px;
}
.vs-nav-title {
  font-size: 15px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -.2px;
  white-space: nowrap;
}
.vs-nav-row .vs-stepper {
  flex: 1;
  justify-content: center;
  padding: 0;
  border-bottom: none;
  background: transparent;
}
.vs-nav-row .vs-step-name {
  display: none;
}
@media (min-width: 480px) {
  .vs-nav-row .vs-step-name {
    display: block;
  }
}

.vs-step-pill {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius:var(--r-pill);
  background: var(--biz, #faef7c);
  color: var(--bizInk, #3a3500);
  white-space: nowrap;
}

.vs-stepper {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8px 16px 10px;
  gap: 0;
  background: transparent;
  border-bottom: none;
}

.vs-step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.vs-step-name {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--ink4);
  transition: color .2s;
}

.vs-step-dot {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid var(--border2);
  background: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; color: var(--ink4);
  cursor: default; flex-shrink: 0;
  transition: background .2s, border-color .2s, color .2s, box-shadow .2s;
  position: relative;
}

.vs-step-dot.active {
  background: var(--biz, #faef7c);
  border-color: var(--biz3, #ede040);
  color: var(--bizInk, #3a3500);
  box-shadow: 0 0 0 4px var(--bizSoft, rgba(245,232,74,.25));
  animation: stepPulse 2s ease-in-out infinite;
}

.vs-step-dot.active + .vs-step-name,
.vs-step-item:has(.vs-step-dot.active) .vs-step-name {
  color: var(--bizInk, #3a3500);
  font-weight: 800;
}

.vs-step-dot.done {
  background: var(--biz3, #ede040);
  border-color: var(--biz3, #ede040);
  color: var(--bizInk, #3a3500);
}

.vs-step-item:has(.vs-step-dot.done) .vs-step-name {
  color: var(--bizInk, #3a3500);
}

.vs-step-line {
  flex: 1;
  height: 2px;
  margin-top: 12px;
  background: var(--border2);
  min-width: 16px;
  max-width: 48px;
  transition: background .3s;
}

.vs-step-line.done {
  background: var(--biz3, #ede040);
}

@keyframes stepPulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--bizSoft, rgba(245,232,74,.25)); }
  50%       { box-shadow: 0 0 0 6px var(--bizSoft, rgba(245,232,74,.1)); }
}

.setup-progress {
  padding: 0 16px 8px;
  background: transparent;
  border: none;
}

.vs-cover-upload {
  border: 2px dashed var(--border2, #ccc);
  border-radius: var(--r-xl);
  min-height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .15s, box-shadow .2s;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
  background: var(--bg2, #f7f7f7);
}

.vs-cover-upload:hover {
  border-color: var(--biz2, #f5e84a) !important;
  background: var(--bizSoft, rgba(245,232,74,.12)) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(245,232,74,.2);
}

.vs-cover-upload.uploaded {
  border-color: var(--biz2, #f5e84a) !important;
  background: var(--bizSoft, rgba(245,232,74,.12)) !important;
}

.vs-cover-upload.uploaded .pu-t {
  color: var(--bizInk, #3a3500) !important;
}

.vs-pu-ico {
  animation: iconBob 3s ease-in-out infinite;
}

.vs-cover-upload.uploaded .vs-pu-ico {
  animation: none;
}

@keyframes iconBob {

  50%       { transform: translateY(-5px); }
}

.pu-drag-hint {
  font-size: 11px;
  color: var(--ink4);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .2s, transform .2s;
}

.vs-cover-upload:hover .pu-drag-hint {
  opacity: 1;
  transform: none;
}

.vs-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.vs-pg-cell {
  aspect-ratio: 1;
  background: var(--bg2, #f5f5f5);
  border: 2px dashed var(--border, #e0e0e0);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color .2s, background .2s, transform .15s, box-shadow .15s;
  padding: 8px;
  gap: 4px;
  background-size: cover;
  background-position: center;
}

.vs-pg-cell:hover {
  border-color: var(--biz2, #f5e84a) !important;
  background: var(--bizSoft, rgba(245,232,74,.1)) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(245,232,74,.2);
}

.vs-pg-cell.filled {
  border-color: var(--biz2, #f5e84a) !important;
  border-style: solid !important;
}

.pg-badge {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .3px;
  text-transform: uppercase;
  background: var(--biz, #faef7c);
  color: var(--bizInk, #3a3500);
  padding: 2px 7px;
  border-radius:var(--r-pill);
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 1;
}

.pg-slot-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink4);
  position: absolute;
  top: 8px;
  left: 0; right: 0;
  text-align: center;
}

.pg-plus {
  color: var(--ink4);
  transition: transform .2s, color .2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vs-pg-cell:hover .pg-plus {
  transform: rotate(90deg) scale(1.15);
  color: var(--bizInk, #3a3500);
}

.pg-add-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--bizInk, #3a3500);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .2s, transform .2s;
}

.vs-pg-cell:hover .pg-add-label {
  opacity: 1;
  transform: none;
}

#vs-photo-count .vpc-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius:var(--r-pill);
  background: var(--bizMid, rgba(245,232,74,.25));
  color: var(--bizInk, #3a3500);
  border: 1px solid var(--biz2, #f5e84a);
}

.vs-photo-tips summary::-webkit-details-marker { display: none; }
.vs-photo-tips[open] .vs-tips-chevron { transform: rotate(180deg); }

.vs-continue-btn {
  background: var(--biz, #faef7c) !important;
  color: var(--bizInk, #3a3500) !important;
  border-color: var(--biz2, #f5e84a) !important;
  font-weight: 900 !important;
  letter-spacing: -.2px;
  box-shadow: 0 4px 20px rgba(245,232,74,.35) !important;
  transition: transform .15s, box-shadow .15s, background .15s !important;
}

.vs-continue-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(245,232,74,.45) !important;
  background: var(--biz2, #f5e84a) !important;
}

.vs-skip-btn {
  border-style: dashed !important;
  color: var(--ink4) !important;
}

.vs-cr-plat:hover,
.vs-cr-type-btn:hover {
  border-color: var(--biz2, #f5e84a) !important;
  background: var(--bizSoft, rgba(245,232,74,.08)) !important;
  color: var(--bizInk, #3a3500) !important;
}

body[data-page^="biz"] .biz-nav-item {
  transition: background .15s, color .15s, transform .1s;
}
body[data-page^="biz"] .biz-nav-item:hover {
  background: var(--bizSoft);
  color: var(--bizInk);
  transform: translateX(2px);
}
body[data-page^="biz"] .biz-nav-item:hover svg {
  stroke: var(--bizInk);
}
.biz-sidebar-cmd-hint:focus-visible{outline:2px solid var(--violet);outline-offset:2px;}

body[data-page^="biz"] .offer-card {
  transition: box-shadow .2s, transform .2s;
}
body[data-page^="biz"] .offer-card:hover {
  box-shadow: 0 4px 20px rgba(58,53,0,.08);
  transform: translateY(-1px);
}

body[data-page^="biz"] .btn-violet:active {
  transform: scale(.97);
}

body[data-page^="biz"] .kpi {
  transition: background .15s;
  cursor: default;
}
body[data-page^="biz"] .kpi:hover {
  background: var(--bizSoft);
}

.vs-cr-plat:focus-visible, .oc-cr-plat:focus-visible,
.vs-cr-type-btn:focus-visible, .oc-cr-type-btn:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
}

.vs-pg-cell {
  transition: border-color .15s, background .15s, transform .12s;
}
.vs-pg-cell:hover:not(.filled) {
  transform: scale(1.02);
}

body[data-page="settings"] .inner-nav {
  max-width: 680px;
  margin: 0 auto;
  left: 50%;
  transform: translateX(-50%);
}

.tl-wrap { position:relative;padding-left:28px; }
        .tl-wrap::before {
          content:'';position:absolute;left:10px;top:8px;bottom:8px;
          width:2px;background:var(--border);border-radius:2px;
        }
        /* v=zt: cap the vertical line at the last item's dot so it doesn't
           dangle past the last claim card. The last item paints a white
           rectangle over the lower portion of the line. */
        .tl-wrap .tl-item:last-child::after {
          content:'';position:absolute;left:-23px;top:28px;bottom:0;
          width:4px;background:var(--bg, #fafaf7);
          z-index:0;
        }
        .tl-item { position:relative;margin-bottom:20px;animation:tl-in .4s var(--ease,ease) both; }
        .tl-item:last-child { margin-bottom:0; }
        @keyframes tl-in { from{opacity:0;transform:translateX(-8px)} to{opacity:1;transform:none} }
        .tl-dot {
          position:absolute;left:-22px;top:14px;
          width:14px;height:14px;border-radius:50%;
          border:2px solid var(--white,#fff);
          box-shadow:0 0 0 1.5px var(--tl-color,#999);
          background:var(--tl-color,#999);
          display:flex;align-items:center;justify-content:center;
          font-size:7px;color:#fff;font-weight:900;
        }
        .tl-card {
          background:var(--white);border:1px solid var(--border);
          border-radius:var(--r-card,16px);padding:14px 16px;
        }
        .tl-card:hover { background: var(--bg2, #f8f8f8); }
        .tl-card-top { display:flex;align-items:flex-start;justify-content:space-between;gap:8px; }
        .tl-venue { font-size:14px;font-weight:800;color:var(--ink); }
        .tl-offer { font-size:12px;color:var(--ink3);margin-top:2px; }
        .tl-date { font-size:11px;color:var(--ink4);flex-shrink:0;margin-top:2px; }
        .tl-status {
          display:inline-flex;align-items:center;gap:5px;
          font-size:11px;font-weight:700;margin-top:8px;
          padding:3px 9px;border-radius:var(--r-pill);
          color:var(--tl-color,#999);
          background:color-mix(in srgb,var(--tl-color,#999) 10%,transparent);
        }
        .tl-code {
          margin-top:8px;padding:8px 12px;
          background:var(--violetSoft,rgba(87,0,255,.06));border-radius:var(--r-8);
          font-family:'Doto',monospace;font-size:18px;font-weight:900;
          letter-spacing:4px;color:var(--violet);text-align:center;
        }
        .tl-post-link {
          display:inline-flex;align-items:center;gap:5px;
          margin-top:8px;font-size:12px;font-weight:700;color:var(--violet);
          text-decoration:none;
        }
        .tl-post-link:hover { text-decoration:underline; }

#sr-page-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  transition: opacity .28s ease;
}
#sr-page-loader.hiding { opacity: 0; }

.sr-loader-ring {
  position: relative;
  width: 120px;
  height: 120px;
  margin-bottom: 24px;
}

.sr-loader-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  background: var(--violet, #5700ff);
  border-radius:var(--r-md);
  display: flex; align-items: center; justify-content: center;
  animation: srCenterPulse 2.4s ease-in-out infinite;
  z-index: 2;
}
@keyframes srCenterPulse {
  0%,100% { transform: translate(-50%,-50%) scale(1); box-shadow: 0 0 0 0 rgba(87,0,255,.3); }
  50%      { transform: translate(-50%,-50%) scale(1.08); box-shadow: 0 0 0 10px rgba(87,0,255,0); }
}

.sr-loader-orbit {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px dashed rgba(87,0,255,.18);
  animation: srOrbitSpin 8s linear infinite;
}

.sr-loader-orbit-2 {
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 1px solid rgba(237,224,64,.25);
  animation: srOrbitSpin 12s linear infinite reverse;
}
@keyframes srOrbitSpin { }

.sr-orbit-icon {
  position: absolute;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--white, #fff);
  border: 1.5px solid rgba(87,0,255,.15);
  box-shadow: 0 2px 8px rgba(87,0,255,.1);
  display: flex; align-items: center; justify-content: center;

  animation: srIconCounter 8s linear infinite;
}
@keyframes srIconCounter { to { transform: rotate(-360deg); } }

.sr-orbit-icon:nth-child(2) { top: -16px; left: calc(50% - 16px); }
.sr-orbit-icon:nth-child(3) { top: calc(50% - 16px); right: -16px; }
.sr-orbit-icon:nth-child(4) { bottom: -16px; left: calc(50% - 16px); }
.sr-orbit-icon:nth-child(5) { top: calc(50% - 16px); left: -16px; }

.sr-orbit-icon:nth-child(2) { animation-delay: 0s;    }
.sr-orbit-icon:nth-child(3) { animation-delay: -2s;   }
.sr-orbit-icon:nth-child(4) { animation-delay: -4s;   }
.sr-orbit-icon:nth-child(5) { animation-delay: -6s;   }

.sr-orbit-icon::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid rgba(87,0,255,.18);
  animation: srIconPing 2s ease-out infinite;
  opacity: 0;
}
.sr-orbit-icon:nth-child(2)::after { animation-delay: 0s;    }
.sr-orbit-icon:nth-child(3)::after { animation-delay: .5s;   }
.sr-orbit-icon:nth-child(4)::after { animation-delay: 1s;    }
.sr-orbit-icon:nth-child(5)::after { animation-delay: 1.5s;  }
@keyframes srIconPing {
  0%   { transform: scale(.8); opacity: .6; }
  100% { transform: scale(1.8); opacity: 0; }
}

.sr-loader-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink3, #666);
  letter-spacing: .2px;
  margin-bottom: 20px;
  animation: srLabelFade 1.8s ease-in-out infinite;
}
@keyframes srLabelFade {
  0%,100% { opacity: .5; }
  50%     { opacity: 1; }
}

#sr-loader-stuck {
  display: none;
  margin-top: 8px;
  text-align: center;
  animation: srFadeIn .4s ease;
}
@keyframes srFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.sr-loader-logo {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--ink);
  font-family: var(--ff);
}
.sr-loader-dots {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.sr-loader-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--violet, #5700ff);
  animation: srDotPulse 1.4s linear infinite;
  opacity: .2;
}
.sr-loader-dots span:nth-child(2) { animation-delay: .2s; }
.sr-loader-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes srDotPulse {
  0%   { opacity: .2; }
  20%  { opacity: 1; }
  100% { opacity: .2; }
}

.sr-btn-spin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.sr-btn-spin::before {
  content: '';
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: srSpin .6s linear infinite;
  flex-shrink: 0;
}
.sr-btn-spin-dark::before {
  border-color: rgba(87,0,255,.2);
  border-top-color: var(--violet, #5700ff);
}
@keyframes srSpin { }

.sr-skel {
  background: linear-gradient(90deg, var(--bg2) 25%, var(--bg3) 50%, var(--bg2) 75%);
  background-size: 200% 100%;
  animation: srShimmer 1.4s linear infinite;
  border-radius: 6px;
}
@keyframes srShimmer { to { background-position: -200% 0; } }

body[data-page="settings"].user-business .sn-item.on {
  background: var(--bizSoft, rgba(245,232,74,.12));
  color: var(--bizInk, #3a3500);
}
body[data-page="settings"].user-business .settings-nav {
  /* v=20260518gn61: mirror — see shared.css */
  border-bottom-color: var(--border, #e8e5e0);
}
body[data-page="settings"].user-business .inner-nav {
  border-bottom-color: var(--border, #e8e5e0);
}
body[data-page="settings"].user-business #billing-plan-card {
  border-color: var(--biz2, #f5e84a);
}
body[data-page="settings"].user-business .settings-section h2 {
  color: var(--bizInk, #3a3500);
}

body[data-page="settings"].user-business .settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}
.settings-row:last-child { border-bottom: none; }
.settings-row:hover {
  background: var(--bizSoft, rgba(245,232,74,.08));
}
.sr-info { flex: 1; min-width: 0; }
.sr-label { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.sr-desc  { font-size: 12px; color: var(--ink4); }

.pri-section { margin-bottom:64px; }
.pri-section-hdr { text-align:center;margin-bottom:36px; }
.pri-eyebrow {
  display:inline-block;font-size:10px;font-weight:800;letter-spacing:2px;
  text-transform:uppercase;color:var(--violet);padding:5px 14px;
  border-radius:var(--r-pill);border:1.5px solid rgba(87,0,255,.2);
  background:var(--violetSoft);margin-bottom:14px;
}
.pri-section-title {
  font-size:clamp(26px,4vw,36px);font-weight:900;letter-spacing:-.8px;
  color:var(--ink);line-height:1.15;margin-bottom:10px;
}
.pri-section-sub {
  font-size:15px;color:var(--ink3);max-width:440px;margin:0 auto;line-height:1.6;
}

.pri-cards-row {
  display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px;
}
@media(max-width:640px) { .pri-cards-row { grid-template-columns:1fr; } }

.pri-card {
  background:var(--white);border:1.5px solid var(--border);border-radius:20px;
  padding:28px 24px;display:flex;flex-direction:column;gap:20px;
  box-shadow:var(--shadow-sm);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease);
}
.pri-card:hover { transform:translateY(-4px);box-shadow:var(--shadow-lg); }
.pri-card-featured {
  border-color:var(--violet);border-width:2px;position:relative;
  background:linear-gradient(155deg,rgba(87,0,255,.05) 0%,var(--white) 60%);
  box-shadow:0 4px 24px rgba(87,0,255,.12);
}
.pri-card-biz {
  border-color:var(--biz3,#ede040);border-width:2px;
  background:linear-gradient(155deg,var(--bizLight,#fefde8) 0%,var(--white) 60%);
  box-shadow:0 4px 24px rgba(245,232,74,.25);
}
.pri-featured-badge {
  position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  background:var(--violet);color:#fff;font-size:9px;font-weight:900;
  letter-spacing:1.5px;text-transform:uppercase;padding:4px 14px;
  border-radius:0 0 10px 10px;white-space:nowrap;
}

.pri-card-hdr { display:flex;flex-direction:column;gap:6px; }
.pri-plan-name {
  font-size:11px;font-weight:900;letter-spacing:2px;text-transform:uppercase;
  color:var(--ink3);
}
.pri-price-block { display:flex;flex-wrap:wrap;align-items:baseline;gap:4px; }
.pri-price {
  font-size:clamp(36px,5vw,48px);font-weight:900;letter-spacing:-2px;
  color:var(--ink);line-height:1;font-family:var(--ff);
}
.pri-price-period { font-size:13px;color:var(--ink4);font-weight:600; }
.pri-card-desc { font-size:13px;color:var(--ink3);line-height:1.5; }

.pri-feats { display:flex;flex-direction:column;gap:9px;flex:1; }
.pri-feat {
  display:flex;align-items:flex-start;gap:9px;font-size:13px;
  color:var(--ink2);line-height:1.45;font-weight:500;
}
.pri-feat::before {
  content:'';display:inline-block;width:16px;height:16px;flex-shrink:0;
  margin-top:2px;border-radius:50%;
  background:var(--bg3);
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%23999' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-size:10px;background-position:center;background-repeat:no-repeat;
}
.pri-feat-plus::before {
  background-color:var(--violetSoft);
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%235700ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}
.pri-card-biz .pri-feat-plus::before {
  background-color:rgba(245,232,74,.3);
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%233a3500' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}

.pri-badge-soon {
  display:inline-block;font-size:9px;font-weight:700;background:var(--bg3);
  color:var(--ink4);padding:1px 6px;border-radius:var(--r-pill);vertical-align:middle;
  margin-left:4px;
}

.pri-cta { margin-top:auto; }

.pri-toggle-row {
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin-top:4px;
}
.pri-toggle-label { font-size:13px;color:var(--ink4);font-weight:600; }
.pri-save-badge {
  display:inline-block;font-size:9px;font-weight:800;background:var(--yellow);
  color:var(--yellowInk);padding:1px 6px;border-radius:var(--r-pill);margin-left:3px;
}

.pri-divider {
  display:flex;align-items:center;gap:16px;margin:8px 0 56px;
}
.pri-divider-line { flex:1;height:1px;background:var(--border); }
.pri-divider-label {
  font-size:11px;font-weight:700;color:var(--ink4);letter-spacing:.5px;
  text-transform:uppercase;white-space:nowrap;
}

.toggle-switch {
  width:38px;height:22px;
  background:var(--border2,#d0d0d0);
  border-radius:var(--r-pill);
  position:relative;cursor:pointer;
  transition:background .25s ease, box-shadow .25s ease;
  flex-shrink:0;
  border:none;padding:0;
  display:inline-flex;align-items:center;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.08);
}
.toggle-switch:focus-visible {
  outline: 2px solid var(--ink3);
  outline-offset: 2px;
}
body[data-page^="biz"] .toggle-switch:focus-visible,
body[data-page="settings"] .toggle-switch:focus-visible {
  outline-color: var(--biz3, #ede040);
}
.toggle-switch.on { background:var(--violet); box-shadow: inset 0 1px 2px rgba(0,0,0,.15); }

body[data-page^="biz"] .toggle-switch.on,
body[data-page="settings"].user-business .toggle-switch.on {
  background: var(--biz3, #ede040);
  /* v=20260518gn9: dropped 3px outer yellow glow */
  box-shadow: inset 0 1px 2px rgba(0,0,0,.12);
}

body[data-page^="biz"] .toggle-switch.on {
  background:var(--biz3,#ede040);
}

.toggle-knob {
  position:absolute;top:3px;left:3px;
  width:16px;height:16px;border-radius:50%;background:#fff;
  transition:transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease;
  box-shadow:0 1px 3px rgba(0,0,0,.25), 0 0 0 0 rgba(255,255,255,0);
  pointer-events:none;
}
.toggle-switch.on .toggle-knob { transform:translateX(16px); }

/* v=zt: knob fallback via ::before when .toggle-knob child is missing */
.toggle-switch:not(:has(.toggle-knob))::before {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform .28s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  pointer-events: none;
}
.toggle-switch.on:not(:has(.toggle-knob))::before {
  transform: translateX(16px);
}

/* v=20260518gn9: RTL toggle knob direction reversed
   v=20260518gn9: added transition to override (was missing → instant jump in AR) */
body.lang-ar .toggle-knob {
  left: auto;
  right: 2px;
  transition: transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease;
}
body.lang-ar .toggle-switch.on .toggle-knob {
  transform: translateX(-16px);
}
body.lang-ar .toggle-switch:not(:has(.toggle-knob))::before {
  left: auto;
  right: 2px;
  transition: transform .28s cubic-bezier(.34,1.56,.64,1);
}
body.lang-ar .toggle-switch.on:not(:has(.toggle-knob))::before {
  transform: translateX(-16px);
}
body.lang-ar .pri-toggle-knob {
  left: auto;
  right: 2px;
  transition: transform .22s;
}
body.lang-ar .pri-toggle[aria-checked="true"] .pri-toggle-knob {
  transform: translateX(-14px);
}


.pri-toggle {
  width:32px;height:18px;border-radius:var(--r-pill);
  background:var(--border2,#ccc);
  position:relative;cursor:pointer;
  transition:background .22s;flex-shrink:0;border:none;padding:0;
}
.pri-toggle[aria-checked="true"] { background:var(--violet); }

.pri-toggle[aria-checked="true"] .pri-toggle-knob { transform:translateX(14px); }

.pt-switch {
  width:32px;height:18px;background:rgba(255,255,255,.25);border-radius:var(--r-pill);
  position:relative;cursor:pointer;transition:background .22s;flex-shrink:0;
  border:1px solid rgba(255,255,255,.3);padding:0;
}
/* v=20260518gn60: mirror — see shared.css for full rationale */
.pt-switch.on { background:var(--violet,#5700ff); border-color:var(--violet,#5700ff); }

.pt-switch.on .pt-knob {
  position:absolute;top:2px;left:2px;
  width:14px;height:14px;border-radius:50%;background:#fff;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1);
  box-shadow:var(--shadow-sm);
  pointer-events:none;
}
.pt-knob { transform:translateX(14px); }

.pri-band {
  width:100%;
  padding:80px 0;
  box-sizing:border-box;
  position:relative;
}

.pri-band-creator {
  background:linear-gradient(160deg, #0d0020 0%, #1a0040 50%, #0f0030 100%);
}

.pri-band-biz {
  background:linear-gradient(160deg, #0f0e00 0%, #1c1a00 50%, #141200 100%);
}

.pri-band-inner {
  max-width:960px;
  margin:0 auto;
  padding:0 24px;
  display:flex;flex-direction:column;align-items:center;
  box-sizing:border-box;
}

.pri-band-hdr {
  text-align:center;margin-bottom:48px;
}
.pri-band-eyebrow {
  display:inline-block;
  font-size:11px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;
  color:rgba(255,255,255,.5);
  padding:5px 14px;border:1px solid rgba(255,255,255,.15);border-radius:var(--r-pill);
  margin-bottom:18px;
}
.pri-band-eyebrow-biz {
  color:rgba(237,224,64,.6);border-color:rgba(237,224,64,.2);
}
.pri-band-title {
  font-size:clamp(28px,4vw,42px);font-weight:900;letter-spacing:-.8px;
  color:#fff;line-height:1.15;margin:0 0 14px;
}
.pri-band-sub {
  font-size:15px;color:rgba(255,255,255,.65);line-height:1.65;margin:0;
}

.pri-band-cards {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;
  width:100%;
  margin-bottom:32px;
}
.pri-band-cards-2 {
  max-width:700px;
}

.pri-bcard {
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:20px;
  padding:28px;
  display:flex;flex-direction:column;
  position:relative;
  transition:border-color .2s,background .2s;
}
.pri-bcard:hover {
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.2);
}

.pri-bcard-featured {
  background:rgba(255,255,255,.12);
  border-color:rgba(87,0,255,.5);
  box-shadow:0 0 0 1px rgba(87,0,255,.3),0 20px 60px rgba(87,0,255,.15);
}
.pri-bcard-featured.pri-bcard-featured-biz {
  border-color:rgba(237,224,64,.4);
  box-shadow:0 0 0 1px rgba(237,224,64,.2),0 20px 60px rgba(237,224,64,.08);
}

.pri-bcard-badge {
  position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  font-size:9px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;
  background:var(--violet);color:#fff;
  padding:4px 12px;border-radius:0 0 8px 8px;
  white-space:nowrap;
}
.pri-bcard-badge-biz {
  background:var(--biz3,#ede040);color:var(--bizInk,#3a3500);
}

.pri-bcard-top { margin-bottom:24px; }
.pri-bcard-plan {
  font-size:13px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin-bottom:12px;
}
.pri-bcard-amount {
  font-size:clamp(36px,5vw,48px);font-weight:900;letter-spacing:-1px;color:#fff;
}
.pri-bcard-period {
  font-size:13px;font-weight:600;color:rgba(255,255,255,.6);margin-left:4px;
}
.pri-bcard-desc {
  font-size:13px;color:rgba(255,255,255,.65);margin-top:10px;line-height:1.5;
}

.pri-bcard-feats {
  list-style:none;padding:0;margin:0 0 24px;
  display:flex;flex-direction:column;gap:10px;
  flex:1;
}
.pri-bcard-feats li {
  display:flex;align-items:center;gap:10px;
  font-size:13px;color:rgba(255,255,255,.85);line-height:1.4;
}
.pri-bcard-feats li::before {
  content:'';
  width:16px;height:16px;border-radius:50%;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,.7)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-size:10px;background-repeat:no-repeat;background-position:center;
}
.pri-bcard-featured .pri-bcard-feats li::before {
  background-color:rgba(87,0,255,.3);border-color:rgba(87,0,255,.5);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23a78bfa' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}
.pri-bcard-featured-biz .pri-bcard-feats li::before {
  background-color:rgba(237,224,64,.15);border-color:rgba(237,224,64,.3);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23ede040' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}

.pri-bcard-cta {
  width:100%;padding:14px;border-radius:var(--r-pill,99px);
  font-size:14px;font-weight:800;cursor:pointer;
  font-family:var(--ff,'Plus Jakarta Sans',sans-serif);
  transition:all .2s;border:none;
}
.pri-bcard-cta-ghost {
  background:rgba(255,255,255,.08);color:rgba(255,255,255,.7);
  border:1px solid rgba(255,255,255,.15);
}
.pri-bcard-cta-ghost:hover { background:rgba(255,255,255,.14); color:#fff; }
.pri-bcard-cta-solid {
  background:var(--violet);color:#fff;
}
.pri-bcard-cta-solid:hover { background:#4500cc; transform:translateY(-1px); }
.pri-bcard-cta-biz {
  background:var(--biz3,#ede040);color:var(--bizInk,#3a3500);
}
.pri-bcard-cta-biz:hover { background:#f5ee50; transform:translateY(-1px); }

.pri-bcard-trust {
  text-align:center;font-size:11px;color:rgba(255,255,255,.3);margin-top:8px;
}

.pri-band-toggle-row {
  display:flex;align-items:center;gap:10px;
  margin-bottom:20px;
}
.pri-band-toggle-lbl {
  font-size:13px;font-weight:600;color:rgba(255,255,255,.7);
}
.pri-toggle-light {
  background:rgba(255,255,255,.2) !important;
  border:1px solid rgba(255,255,255,.25);
}
.pri-toggle-light[aria-checked="true"] {
  background:rgba(255,255,255,.9) !important;
}
.pri-toggle-light[aria-checked="true"] .pri-toggle-knob {
  background:var(--violet) !important;
}
.pri-band-save {
  display:inline-block;
  font-size:10px;font-weight:800;
  background:rgba(87,0,255,.35);color:rgba(180,150,255,.9);
  padding:2px 7px;border-radius:var(--r-pill);margin-left:4px;
}
.pri-band-biz .pri-band-save {
  background:rgba(237,224,64,.2);color:rgba(237,224,64,.8);
}

.pri-enterprise {
  font-size:13px;color:rgba(255,255,255,.35);text-align:center;margin-top:4px;
}
.pri-enterprise strong { color:rgba(255,255,255,.6); }
.pri-enterprise a { color:rgba(255,255,255,.5);text-decoration:underline;font-weight:700; }
.pri-enterprise a:hover { color:#fff; }

.pri-badge-soon {
  font-size:9px;font-weight:700;background:rgba(255,255,255,.1);
  color:rgba(255,255,255,.4);padding:1px 5px;border-radius:var(--r-pill);
  vertical-align:middle;margin-left:3px;
}

@media(max-width:600px){
  .pri-band { padding:56px 0; }
  .pri-band-inner { padding:0 16px; }
  .pri-band-cards { grid-template-columns:1fr; }
  .pri-band-cards-2 { max-width:100%; }
  .pri-bcard-badge { font-size:8px; }
}

.oc-tab {
  padding:5px 12px;border-radius:var(--r-pill);
  border:1px solid var(--border);background:var(--bg2);
  font-size:13px;font-weight:700;cursor:pointer;
  color:var(--ink3);font-family:var(--ff);
  transition:all .15s;white-space:nowrap;
  display:flex;align-items:center;gap:4px;
}
.oc-tab:hover { border-color:var(--border2);color:var(--ink); }
.oc-tab-active {
  background:var(--biz3,#ede040);
  border-color:var(--biz3,#ede040);
  color:var(--bizInk,#3a3500);
}

.offer-card {
  cursor:default;
  user-select:none;
  position:relative;
}
.offer-card.sortable-ghost {
  opacity:.4;
  background:var(--bizLight,#fefde8);
  border:2px dashed var(--biz3,#ede040);
}
.offer-card.sortable-chosen {
  box-shadow:0 8px 32px rgba(58,53,0,.18);
  transform:rotate(.8deg) scale(1.02);
  z-index:100;
  cursor:grabbing;
}
.offer-card.sortable-drag {
  opacity:1;
}

.oc-drag-handle {
  display:flex;align-items:center;justify-content:center;
  width:20px;height:20px;
  color:var(--border2);cursor:grab;
  flex-shrink:0;
  transition:color .15s;
  border-radius:4px;
}
.oc-drag-handle:hover { color:var(--ink4); background:var(--bg2); }
.oc-drag-handle:active { cursor:grabbing; }

.oc-status-dot {
  width:7px;height:7px;border-radius:50%;display:inline-block;flex-shrink:0;
}
.oc-status-dot.active  { background:#22c55e; }
.oc-status-dot.paused  { background:#f59e0b; }
.oc-status-dot.draft   { background:#94a3b8; }
.oc-status-dot.expired { background:#ef4444; }

.oc-empty-filter {
  padding:28px 16px;text-align:center;
  color:var(--ink4);font-size:13px;
}

#oc-search:focus {
  border-color:var(--biz3,#ede040);
  box-shadow:0 0 0 3px rgba(237,224,64,.2);
}

.oc-claims-chip {
  font-size:10px;font-weight:700;
  background:var(--bg2);color:var(--ink4);
  padding:2px 7px;border-radius:var(--r-pill);
  white-space:nowrap;
}
.oc-claims-chip.has-claims {
  background:var(--violetSoft);color:var(--violet);
}

.badge-yellow { background: var(--yellow,#faef7c);color: var(--yellowInk,#3a3500);border:none; }
.badge-red    { background:rgba(239,68,68,.10);color:#dc2626;border:1px solid rgba(239,68,68,.25); }
.badge-grey { background:var(--bg3);color:var(--ink4);border:1px solid var(--border); }
.badge-coral  { background:rgba(229,62,62,.08);color:#b03030;border:1px solid rgba(229,62,62,.18); }
.badge-amber  { background:rgba(245,158,11,.10);color:#92400e;border:1px solid rgba(245,158,11,.25); }

body[data-page="settings"] #page-main {
   }
/* Settings page for business users: needs flex-row layout so the
   .biz-sidebar (visible via .biz-only) lays out as a column beside
   content, matching biz pages. Without this, the sidebar stacks above
   #biz-main-content and pushes settings below the fold (audit-P0
   reported 2026-05-14). */
body[data-page="settings"].user-business #page-main,
body[data-page="settings"].is-biz #page-main {
  display: flex;
  flex-direction: row;
  min-height: 100vh;
  align-items: stretch;
}

/* v=20260517v re-audit fix: on mobile, the #page-main flex-row leaks an
   injected #biz-mob-logo-bar (added by shared.js) into a 123px sidebar
   column, leaving ~103px for actual settings content. At <=768px, switch
   to flex-column so the logo bar lays as a full-width top strip and the
   .biz-main-content gets full width. Also force the logo bar to full-
   width with display:block so it doesn't auto-shrink to intrinsic. */
@media (max-width: 768px) {
  body[data-page="settings"].user-business #page-main,
  body[data-page="settings"].is-biz #page-main,
  body[data-page^="biz"] #page-main {
    flex-direction: column !important;
  }
  body[data-page="settings"].user-business #page-main > #biz-mob-logo-bar,
  body[data-page="settings"].is-biz #page-main > #biz-mob-logo-bar,
  body[data-page^="biz"] #page-main > #biz-mob-logo-bar {
    display: block !important;
    width: 100% !important;
    flex: 0 0 auto !important;
  }
  body[data-page="settings"].user-business #page-main > .biz-main-content,
  body[data-page="settings"].is-biz #page-main > .biz-main-content,
  body[data-page^="biz"] #page-main > .biz-main-content {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
}

body[data-page^="biz"] #page-main { display:flex; flex-direction:row; min-height:100vh; align-items:stretch; }

.biz-body {
  padding: 20px 20px 110px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.biz-col-left, .biz-col-right { min-width: 0; width: 100%; }

.biz-applications-strip {

  display: none;
  background: var(--white);
  border: 1.5px solid var(--biz2,#f5e84a);
  border-radius:var(--r-md);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(58,53,0,.08);
  margin-bottom: 16px;
  width: 100%;
}
.biz-app-strip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 9px;
  background: var(--bizLight,#fefde8);
  border-bottom: 1px solid var(--biz2,#f5e84a);
}
.biz-app-strip-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--bizInk,#3a3500);
  display: flex;
  align-items: center;
  gap: 6px;
}
.biz-app-strip-count {
  color: var(--ink, #1a1a1a);
  font-weight: 900;
}
.biz-app-strip-link {
  font-size: 12px;
  font-weight: 700;
  color: var(--bizInk,#3a3500);
  text-decoration: none;
  opacity: .7;
}
.biz-app-strip-link:hover { opacity: 1; }
.biz-app-strip-scroll {
  display: flex;
  flex-direction: row;
  gap: 8px;
  padding: 10px 12px 12px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.biz-app-strip-scroll::-webkit-scrollbar { display: none; }

.biz-app-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white, #fff);
  border: 1px solid rgba(20,20,30,.08);
  border-radius: var(--r-12);
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s;
  text-decoration: none;
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
}
.biz-app-chip:hover {
  border-color: rgba(20,20,30,.18);
  background: rgba(20,20,30,.02);
}
.biz-app-chip.chip-pending,
.biz-app-chip.chip-approved,
.biz-app-chip.chip-post {
  border-color: rgba(20,20,30,.08);
}

/* v=zai: refined chip layout */
.biz-chip-av {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--bizSoft, rgba(245,232,74,.25));
  border: 1.5px solid var(--biz2, #f5e84a);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 900;
  color: var(--bizInk, #3a3500);
  flex-shrink: 0;
}
.biz-chip-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.biz-chip-name {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink, #1a1a1a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}
.biz-chip-deal {
  font-size: 11px;
  color: var(--ink4, #6e6e76);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}
.biz-chip-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.biz-chip-status {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.chip-pending  .biz-chip-status { background: rgba(245,232,74,.2); color: #92400e; }
.chip-approved .biz-chip-status { background: #dcfce7; color: #15803d; }
.chip-post     .biz-chip-status { background: #dbeafe; color: #1e40af; }

.biz-chip-action {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius:var(--r-pill);
  border: none;
  cursor: pointer;
  font-family: var(--ff);
  transition: opacity .12s;
  flex-shrink: 0;
}
.biz-chip-action:hover { opacity: .8; }
.biz-chip-action.act-approve {
  background: var(--biz3,#faef7c);
  color: var(--bizInk,#3a3500);
}
.biz-chip-action.act-decline {
  background: none;
  border: 1px solid var(--border2);
  color: var(--ink3);
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
  padding: 3px 8px;
  cursor: pointer;
  font-family: var(--ff);
  white-space: nowrap;
}
.act-decline:hover { border-color: var(--coral,#e53e3e); color: var(--coral,#e53e3e); }
.act-view {
  background: var(--bg2);
  color: var(--ink3);
}

.biz-offers-section { width: 100%; }

body[data-page="pricing"] #page-main { max-width:none; width:100%; padding:0; overflow-x:hidden; background:var(--bg2); }

.pri-faq-band {
  background:#0a0012;
  padding:64px 0;
  width:100%;
}
.pri-faq-inner {
  max-width:720px;
  margin:0 auto;
  padding:0 24px;
  box-sizing:border-box;
}
.pri-faq-title {
  font-size:22px;font-weight:900;letter-spacing:-.5px;
  color:#fff;margin:0 0 28px;
}

.pri-period-sel {
  display:flex;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-pill);
  padding:3px;
  gap:2px;
  margin-bottom:32px;
}
.pri-period-btn {
  padding:8px 20px;
  border-radius:var(--r-pill);
  border:none;
  font-size:13px;font-weight:700;
  cursor:pointer;
  font-family:var(--ff);
  color:rgba(255,255,255,.5);
  background:none;
  transition:all .2s;
  white-space:nowrap;
}
.pri-period-btn:hover { color:rgba(255,255,255,.8); }
.pri-period-active {
  background:var(--violet);
  color:#fff;
  box-shadow:0 2px 12px rgba(87,0,255,.4);
}

.pri-period-active-biz {
  background:var(--biz3,#ede040);
  color:var(--bizInk,#3a3500);
  box-shadow:0 2px 12px rgba(237,224,64,.25);
}
.pri-period-btn-biz { color:rgba(255,255,255,.5); }
.pri-period-btn-biz.pri-period-active-biz { color:var(--bizInk,#3a3500); }
.pri-period-save {
  display:inline-block;
  font-size:10px;font-weight:800;
  background:rgba(255,255,255,.15);
  padding:1px 6px;border-radius:var(--r-pill);
  margin-left:4px;vertical-align:middle;
}
.pri-period-active .pri-period-save {
  background:rgba(255,255,255,.25);
}
.pri-period-save-biz {
  display:inline-block;
  font-size:10px;font-weight:800;
  background:rgba(58,53,0,.15);
  padding:1px 6px;border-radius:var(--r-pill);
  margin-left:4px;vertical-align:middle;
}
.pri-period-active-biz .pri-period-save-biz {
  background:rgba(58,53,0,.2);
}

.pri-audience-tabs {
  display:flex;
  justify-content:center;
  gap:0;
  padding:24px 24px 0;
  background:transparent;
}
.pri-aud-tab {
  padding:12px 32px;
  border:none;
  font-size:14px;font-weight:700;
  cursor:pointer;
  font-family:var(--ff);
  color:rgba(255,255,255,.4);
  background:rgba(255,255,255,.06);
  border-bottom:2px solid transparent;
  transition:all .2s;
  letter-spacing:.3px;
}
.pri-aud-tab:first-child { border-radius:var(--r-12) 0 0 12px; }
.pri-aud-tab:last-child  { border-radius:0 12px 12px 0; }
.pri-aud-tab:hover { color:rgba(255,255,255,.75); background:rgba(255,255,255,.1); }
.pri-aud-active {
  color:#fff;
  background:rgba(255,255,255,.15);
  border-bottom-color:var(--violet);
}

.faq-item-wrap { margin-bottom:8px; }
.faq-item {
  width:100%;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-12);padding:0;
  cursor:pointer;text-align:left;
  font-family:var(--ff);
  transition:background .15s,border-color .15s;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;gap:12px;
}
.faq-item:hover { background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.15); }
.faq-item[aria-expanded="true"] {
  border-radius:var(--r-12) 12px 0 0;
  border-bottom-color:transparent;
  background:rgba(255,255,255,.08);
}
.faq-q-text {
  font-size:14px;font-weight:700;color:#fff;
  text-align:left;flex:1;
}
.faq-icon {
  font-size:20px;font-weight:300;color:rgba(255,255,255,.4);
  flex-shrink:0;transition:transform .2s;width:20px;text-align:center;
  line-height:1;
}
.faq-item[aria-expanded="true"] .faq-icon { color:rgba(255,255,255,.7); }
.faq-a {
  padding:4px 18px 18px;
  font-size:13px;line-height:1.7;color:rgba(255,255,255,.6);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  border-top:none;
  border-radius:0 0 12px 12px;
  margin-bottom:0;
}
.faq-a[hidden] { display:none; }

.pri-aud-active[id="aud-tab-biz"] {
  border-bottom-color:var(--biz3,#ede040);
}

body[data-page="settings"].user-business .biz-tab { display:block !important; }
body[data-page="settings"].user-business .biz-only-block { display:block !important; }
body[data-page="settings"].user-business .creator-only-block { display:none !important; }
body[data-page="settings"].user-business .biz-hide { display:none !important; }
body[data-page="settings"].user-creator .creator-only-block { display:block !important; }
body[data-page="settings"].user-creator .biz-only-block { display:none !important; }
body[data-page="settings"].user-creator .creator-hide { display:none !important; }
/* v=zs: pre-paint state — before is-biz is added, hide BOTH so we don't flash the wrong block */
body[data-page="settings"]:not(.user-business):not(.user-creator) .biz-only-block,
body[data-page="settings"]:not(.user-business):not(.user-creator) .creator-only-block {
  display:none !important;
}

body[data-page="settings"].user-business .sn-item.on,
body[data-page="settings"].user-business .sn-item[aria-selected="true"] {
  background: var(--biz3, #ede040) !important;
  color: var(--bizInk, #3a3500) !important;
  font-weight: 800;
}

body[data-page="settings"].user-business #billing-plan-card {
  background: var(--biz3, #ede040) !important;
  border-color: var(--biz3, #ede040) !important;
  box-shadow: 0 4px 20px rgba(237,224,64,.3);
}
body[data-page="settings"].user-business #billing-plan-card #billing-plan-name { color: var(--bizInk, #3a3500) !important; }
body[data-page="settings"].user-business #billing-plan-card #billing-plan-desc { color: rgba(58,53,0,.7) !important; }

body[data-page="settings"].user-business .btn-biz {
  background: var(--biz3, #ede040);
  color: var(--bizInk, #3a3500);
  border: none;
  font-weight: 800;
}
body[data-page="settings"].user-business .btn-biz:hover { background: var(--biz2, #f5e84a); }

/* v=20260518gn61: mirror — neutral border, no yellow nav underline */
body[data-page="settings"].user-business .settings-nav { border-bottom-color: var(--border, #e8e5e0); }
body[data-page="settings"].user-business .inner-nav    { border-bottom-color: var(--border, #e8e5e0); }

body[data-page^="biz"] .kpi {
  border-top: 3px solid var(--biz3, #ede040);
}
body[data-page^="biz"] .kpi:hover {
  box-shadow: 0 4px 16px rgba(237,224,64,.2);
}

body[data-page^="biz"] .offer-card {
  transition: box-shadow .15s, border-color .15s;
}
body[data-page^="biz"] .offer-card:hover {
  border-color: var(--biz2, #f5e84a);
  box-shadow: 0 2px 12px rgba(237,224,64,.15);
}

body[data-page^="biz"] .btn-violet,
body[data-page="settings"].user-business .btn-violet,
body[data-page="settings"].is-biz .btn-violet {
  background: var(--biz3, #ede040) !important;
  color: var(--bizInk, #3a3500) !important;
  box-shadow: 0 2px 12px rgba(237,224,64,.25) !important;
}
body[data-page^="biz"] .btn-violet:hover,
body[data-page="settings"].user-business .btn-violet:hover,
body[data-page="settings"].is-biz .btn-violet:hover {
  background: var(--biz2, #f5e84a) !important;
  box-shadow: 0 4px 20px rgba(237,224,64,.35) !important;
}
body[data-page^="biz"] .btn-violet:disabled,
body[data-page^="biz"] .btn-violet[disabled],
body[data-page="settings"].user-business .btn-violet:disabled,
body[data-page="settings"].user-business .btn-violet[disabled] {
  background: var(--biz3, #ede040) !important;
  opacity: .5;
}

.biz-sidebar-logo { color: var(--biz3, #ede040) !important; }

body[data-page^="biz"] .ob-input:focus,
body[data-page^="biz"] .ob-big-input:focus,
body[data-page^="biz"] input:focus,
body[data-page^="biz"] select:focus,
body[data-page^="biz"] textarea:focus {
  border-color: var(--biz2, #f5e84a) !important;
  box-shadow: 0 0 0 3px var(--bizSoft, rgba(245,232,74,.15)) !important;
}

body[data-page^="biz"] a.btn-violet,
body[data-page^="biz"] .biz-cta-link {
  background: var(--biz3, #ede040) !important;
  color: var(--bizInk, #3a3500) !important;
}

body[data-page="biz/venue"] .vs-step-dot.active {
  background: var(--biz3, #ede040) !important;
  border-color: var(--biz3, #ede040) !important;
  color: var(--bizInk, #3a3500) !important;
}
body[data-page="biz/venue"] .vs-step-dot.done {
  background: var(--biz3, #ede040) !important;
  border-color: var(--biz3, #ede040) !important;
  color: var(--bizInk, #3a3500) !important;
}

.auth-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
  background: var(--bg2);
  border-radius:var(--r-sm);
  padding: 4px;
}
.auth-tab {
  flex: 1;
  padding: 9px 16px;
  border-radius:var(--r-8);
  border: none;
  font-size: 13px;
  font-weight: 800;
  font-family: var(--ff);
  cursor: pointer;
  transition: background .15s, color .15s;
  min-height: 44px;
  background: none;
  color: var(--ink3);
}
.auth-tab.on,
.auth-tab[aria-pressed="true"] {
  background: var(--violet);
  color: #fff;
  box-shadow: 0 2px 8px rgba(87,0,255,.25);
}
.auth-tab[aria-pressed="false"] {
  background: none;
  color: var(--ink3);
  border: 1.5px solid transparent;
}
.auth-tab:not(.on):not([aria-pressed="true"]) {
  border: 1.5px solid var(--border);
}
.auth-tab:hover:not(.on):not([aria-pressed="true"]) {
  background: var(--border);
  color: var(--ink);
}

.auth-subtext a {
  color: var(--violet);
  font-weight: 700;
  text-decoration: none;
}
.auth-subtext a:hover {
  text-decoration: underline;
}

.auth-brand .auth-proof-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius:var(--r-pill);
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.85);
  margin-bottom: 32px;
  white-space: nowrap;
  width: fit-content;
}

.claims-tabs {
  display: flex;
  gap: 0;
  padding: 0 24px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.claims-tabs::-webkit-scrollbar { display: none; }
.claims-tab {
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--ff);
  color: var(--ink4);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
  min-height: 44px;
}
.claims-tab:hover { color: var(--ink); }
.claims-tab.on,
.claims-tab[aria-selected="true"] {
  color: var(--violet);
  border-bottom-color: var(--violet);
  font-weight: 800;
}

.ni-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  transition: background .1s;
}
.ni-row:last-child { border-bottom: none; }
.ni-unread {
  background: rgba(87,0,255,.06);
  position: relative;
}
.ni-unread::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--violet, #5700ff);
  border-radius: 0 99px 99px 0;
}
.ni-unread:hover { background: rgba(87,0,255,.12); }
.ni-ico {
  width: 36px; height: 36px;
  border-radius:var(--r-sm);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.ni-body { flex: 1; min-width: 0; }
.ni-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
  line-height: 1.3;
}
.ni-sub {
  font-size: 13px;
  color: var(--ink3);
  line-height: 1.4;
  margin-bottom: 4px;
}
.ni-time {
  font-size: 11px;
  color: var(--ink4);
  font-weight: 600;
}

@media (max-width: 768px) {

  .biz-sidebar {
    display: none !important;
  }

  body[data-page^="biz"] #page-main {
    flex-direction: column !important;
    padding-bottom: 80px;
  }

  .biz-main-content {
    min-width: 0 !important;
    width: 100% !important;
    flex: 1 !important;
    padding-bottom: 80px !important;
  }

  .biz-body {
    flex-direction: column !important;
    padding: 12px 14px 100px !important;
    gap: 0 !important;
  }

  .kpi-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px !important;
  }

  .inner-nav {
    top: 0 !important;
    padding: 0 14px !important;
    height: 52px !important;
  }

  .offer-card {
    padding: 14px !important;
    margin-bottom: 10px !important;
  }

  .oc-head {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .claim-card {
    padding: 14px !important;
  }

  #oc-filter-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
    gap: 6px !important;
  }
  #oc-filter-tabs::-webkit-scrollbar { display: none !important; }

  #oc-search {
    width: 100% !important;
    max-width: none !important;
  }

  .biz-offers-controls,
  [style*="display:flex"][style*="justify-content:space-between"] {
    flex-wrap: wrap !important;
  }

  .claims-tabs {
    padding: 0 14px !important;
  }

  .discovery-grid,
  .creator-grid {
    grid-template-columns: 1fr !important;
  }

  .content-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .settings-wrap {
    flex-direction: column !important;
  }
  .settings-sidebar {
    width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
  }

  body[data-page="biz/offer"] .ob-topbar,
  body[data-page="biz/venue"] .vb-topbar {
    padding: 0 14px !important;
  }

  body[data-page="biz/offer"] .ob-stage,
  body[data-page="biz/venue"] .vb-stage {
    padding: 70px 16px 110px !important;
  }

  body[data-page="biz/offer"] .ob-footer-inner,
  body[data-page="biz/venue"] .vb-footer-inner {
    padding: 0 !important;
  }

  body[data-page="biz/offer"] .ob-q-title,
  body[data-page="biz/venue"] .vb-q-title {
    font-size: 20px !important;
  }

  body[data-page="biz/offer"] .ob-platform-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
  body[data-page="biz/offer"] .ob-platform-pill {
    padding: 12px 6px !important;
    font-size: 11px !important;
  }

  .kpi-section-heading{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:rgba(255,255,255,.9);margin-bottom:10px}
.kpi-period-btn {
    padding: 5px 10px !important;
    font-size: 11px !important;
  }

  #add-venue-btn-wrap a,
  #add-venue-btn-wrap button {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  .ni-row {
    padding: 12px 14px !important;
  }

}

.biz-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 900;
  background: var(--white);
  border-top: 1px solid var(--border);
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px));
  box-shadow: var(--shadow-drawer);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.biz-bottom-nav-items {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.biz-bn-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 10px;
  border-radius:var(--r-sm);
  cursor: pointer;
  text-decoration: none;
  border: none;
  background: none;
  font-family: var(--ff);
  color: var(--ink4);
  min-width: 52px;
  min-height: 44px;
  transition: color .15s;
}

.biz-bn-item:hover { color: var(--ink); }

.biz-bn-item.active {
  color: var(--bizInk, #3a3500);
}

.biz-bn-item.active svg {
  stroke: var(--bizInk, #3a3500);
}

.biz-bn-item .biz-bn-icon {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}

.biz-bn-item.active .biz-bn-icon::after {
  content: '';
  position: absolute;
  inset: -4px;
  background: var(--biz3, #ede040);
  border-radius:var(--r-8);
  z-index: -1;
}

.biz-bn-item span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2px;
}

@media (max-width: 768px) {
  body[data-page^="biz"] .biz-bottom-nav {
    display: block;
  }
}

@media (min-width: 769px) {
  .biz-bottom-nav {
    display: none !important;
  }
}

body[data-page^="biz"] .sr-loader-center,
body.user-business .sr-loader-center {
  background: var(--biz3, #ede040);
}
body[data-page^="biz"] .sr-loader-center svg,
body.user-business .sr-loader-center svg {
  stroke: var(--bizInk, #3a3500);
}
body[data-page^="biz"] .sr-orbit-icon svg,
body.user-business .sr-orbit-icon svg {
  stroke: var(--bizInk, #3a3500);
}
body[data-page^="biz"] .sr-orbit-icon,
body.user-business .sr-orbit-icon {
  border-color: rgba(237,224,64,.35);
  box-shadow: 0 2px 8px rgba(237,224,64,.2);
}
body[data-page^="biz"] .sr-orbit-icon::after,
body.user-business .sr-orbit-icon::after {
  border-color: rgba(237,224,64,.4);
}

/* Role-aware spinner color override (v=20260517v) */
body[data-page^="biz"],
body.is-biz,
body.user-business {
  --spinnerInk: var(--biz3, #ede040);
}

body[data-page^="biz"] .biz-main-content > *:first-child {
  margin-top: 0;
}

.biz-page-header {
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--white);
  position: sticky;
  top: 0;
  z-index: 50;
}
.biz-page-header h1 {
  font-size: 20px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -.4px;
  margin-bottom: 2px;
}
.biz-page-header p {
  font-size: 12px;
  color: var(--ink4);
  margin: 0;
}
@media (max-width: 768px) {
  .biz-page-header {
    padding: 14px 14px 12px;
    position: sticky;
    top: 0;
    z-index: 50;
  }
  .biz-page-header h1 { font-size: 17px; }
}

:focus-visible {
  outline: 2px solid var(--violet, #5700ff);
  outline-offset: 2px;
  border-radius: 4px;
}
body[data-page^="biz"] :focus-visible {
  outline-color: var(--bizInk, #3a3500);
}

.btn:focus-visible {
  outline-offset: 3px;
}
.ob-next-btn:focus-visible,
.vb-next-btn:focus-visible {
  outline-color: var(--bizInk, #3a3500);
  outline-offset: 3px;
}

@media (min-width: 769px) {

  body[data-page^="biz"] #page-main {
    height: 100vh;
    overflow: hidden;
  }
  body[data-page^="biz"] .biz-main-content {
    height: 100vh;
    overflow-y: auto;
    padding-bottom: 40px;
  }
}

.btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn-loading::after {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  top: 50%; left: 50%;
  margin: -8px 0 0 -8px;
  border: 2.5px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btnSpin .65s linear infinite;
}
.btn-loading.btn-outline::after,
.btn-loading.btn-ghost::after {
  border-color: rgba(87,0,255,.2);
  border-top-color: var(--violet);
}
@keyframes btnSpin { }

.btn:focus-visible {
  outline: 2.5px solid var(--violet);
  outline-offset: 3px;
}

.page { animation: pgFadeIn .25s ease; }
@keyframes pgFadeIn {

}

.sr-skeleton {
  background: linear-gradient(90deg, var(--bg2) 25%, var(--bg3,#eaeaea) 50%, var(--bg2) 75%);
  background-size: 200% 100%;
  animation: srSkeleton 1.5s ease-in-out infinite;
  border-radius:var(--r-8);
}
@keyframes srSkeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.sr-skeleton-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-xl, 16px);
  padding: 20px;
  margin-bottom: 12px;
}
.sr-skeleton-line { height: 14px; margin-bottom: 10px; }
.sr-skeleton-line.wide  { width: 80%; }
.sr-skeleton-line.mid   { width: 55%; }
.sr-skeleton-line.short { width: 35%; }

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2.5px solid var(--violet);
  outline-offset: 0;
  border-color: var(--violet) !important;
  box-shadow: 0 0 0 3px rgba(87,0,255,.1) !important;
}
body[data-page^="biz"] input:focus-visible,
body[data-page^="biz"] select:focus-visible,
body[data-page^="biz"] textarea:focus-visible {
  outline-color: var(--biz2, #f5e84a);
  border-color: var(--biz2, #f5e84a) !important;
  box-shadow: 0 0 0 3px rgba(237,224,64,.15) !important;
}

#sr-scroll-top {
  position: fixed;
  bottom: 92px; right: 24px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--white);
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0; pointer-events: none;
  transform: translateY(8px);
  transition: opacity .2s, transform .2s;
  z-index: 400;
  font-size: 16px;
  color: var(--ink3);
}
#sr-scroll-top.visible {
  opacity: 1; pointer-events: all;
  transform: translateY(0);
}
#sr-scroll-top:hover { background: var(--bg2); }
@media (max-width: 768px) {
  #sr-scroll-top { bottom: 100px; right: 12px; width: 44px; height: 44px; }
}

.asb-wrap {
  transition: width .35s cubic-bezier(.34,1.56,.64,1);
}
.asb-wrap.focused {
  z-index: 200;
}
.asb-field {
  transition: border-color .2s, box-shadow .3s, background .3s !important;
}

.asb-field:focus {
  border-color: var(--violet) !important;
  box-shadow: 0 0 0 3px rgba(87,0,255,.1), 0 8px 32px rgba(87,0,255,.12) !important;
  background: linear-gradient(135deg, #fff 0%, rgba(87,0,255,.025) 100%) !important;
}

.asb-wrap.focused .asb-field::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, transparent 0%, rgba(87,0,255,.04) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: asbShimmer 2s linear infinite;
  pointer-events: none;
}
@keyframes asbShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.asb-field-wrap {
  position: relative;
}
.asb-field-wrap::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: calc(var(--r-pill) + 3px);
  background: transparent;
  border: 1.5px solid rgba(87,0,255,.0);
  transition: border-color .2s, box-shadow .3s;
  pointer-events: none;
}
.asb-wrap.focused .asb-field-wrap::before {
  border-color: rgba(87,0,255,.12);
  box-shadow: 0 0 0 6px rgba(87,0,255,.04);
  animation: asbPulseRing 2s ease-in-out infinite;
}
@keyframes asbPulseRing {
  0%, 100% { box-shadow: 0 0 0 4px rgba(87,0,255,.04); }
  50%       { box-shadow: 0 0 0 10px rgba(87,0,255,.0); }
}

.asb-dropdown {
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  backdrop-filter: blur(12px);
  background: rgba(255,255,255,.96) !important;
}
.asb-item {
  border-radius: var(--r-md);
  transition: background .12s, transform .15s, opacity .25s, color .12s !important;
}
.asb-item:hover {
  background: rgba(87,0,255,.05) !important;
  transform: translateX(2px) !important;
}
.asb-item:hover .asb-item-label { color: var(--violet) !important; }
.asb-item:hover .asb-item-icon  { background: rgba(87,0,255,.08) !important; }

.asb-clear {
  position: absolute;
  right: 40px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px;
  border-radius: 50%; border: none; cursor: pointer;
  background: var(--bg3); color: var(--ink4);
  font-size: 11px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .15s, background .12s, transform .15s;
}
.asb-clear.visible {
  opacity: 1; pointer-events: all;
}
.asb-clear:hover {
  background: var(--border2); color: var(--ink);
  transform: translateY(-50%) scale(1.1);
}

/* v=20260517v: filter row scrolls horizontally on overflow. */
.disc-filters {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  padding-bottom: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.disc-filters::-webkit-scrollbar { display: none; }
.disc-filters > * { flex-shrink: 0; }

.biz-hdr .oc-tab {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.25);
  color: rgba(255,255,255,.85);
}
.biz-hdr .oc-tab:hover {
  background: rgba(255,255,255,.25);
  border-color: rgba(255,255,255,.4);
  color: #fff;
}
.biz-hdr .oc-tab-active {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--bizInk,#3a3500) !important;
}
.disc-search-wrap {
  position: relative;
  width: 100%;
  max-width: 440px;
}
/* v=zai: legacy .disc-search-field rules removed — search input now uses .biz-search-input. */
.disc-search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  pointer-events: none; color: var(--ink4);
  transition: color .2s;
}
.biz-hdr .disc-search-icon { color: rgba(255,255,255,.6); }

.disc-search-field:focus + .disc-search-icon { color: var(--bizInk, #3a3500); }
.disc-search-field:focus ~ .disc-search-icon { color: var(--bizInk, #3a3500); }
.disc-search-clear {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px;
  border-radius: 50%; border: none; cursor: pointer;
  background: var(--bg3); color: var(--ink4);
  font-size: 10px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .15s;
}
.disc-search-clear.visible { opacity: 1; pointer-events: all; }

.disc-search-dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 200;
  background: rgba(255,255,255,.97);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  opacity: 0; transform: translateY(-6px) scaleY(.96); transform-origin: top;
  transition: opacity .2s, transform .25s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none; max-height: 0;
  backdrop-filter: blur(8px);
}
.disc-search-dropdown.open {
  opacity: 1; transform: none; pointer-events: auto; max-height: 300px;
  transition: opacity .2s, transform .25s cubic-bezier(.34,1.56,.64,1), max-height .3s ease;
}
.disc-search-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; cursor: pointer;
  opacity: 0; transform: translateY(6px);
  transition: opacity .2s, transform .2s, background .1s;
}
.disc-search-item.visible { opacity: 1; transform: none; }
.disc-search-item:hover { background: rgba(237,224,64,.1); }
.disc-search-item:hover .disc-si-name { color: var(--bizInk, #3a3500); }
.disc-si-av {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--violetSoft); display: flex; align-items: center;
  justify-content: center; font-size: 12px; font-weight: 800;
  color: var(--violet); flex-shrink: 0;
}
.disc-si-name { font-size: 13px; font-weight: 700; color: var(--ink); }
.disc-si-meta { font-size: 11px; color: var(--ink4); margin-left: auto; }

#oc-search {
  transition: border-color .2s, box-shadow .3s, background .3s !important;
  font-size: 12.5px !important;
}
#oc-search:focus {
  border-color: var(--biz2, #f5e84a) !important;
  box-shadow: 0 0 0 3px rgba(237,224,64,.15) !important;
  background: linear-gradient(135deg, #fff 0%, rgba(237,224,64,.03) 100%) !important;
  outline: none !important;
}

.sr-match { background: rgba(87,0,255,.12); border-radius: 3px; font-weight: 800; }
body[data-page^="biz"] .sr-match { background: rgba(237,224,64,.3); }

.asb-no-results, .disc-no-results {
  padding: 20px 16px; text-align: center;
  font-size: 13px; color: var(--ink4);
}
.asb-no-results strong, .disc-no-results strong { color: var(--ink); font-weight: 800; }

body[data-page="settings"].user-business .sn-item.on,
body[data-page="settings"].user-business .sn-item[aria-selected="true"] {
  background: var(--biz3, #ede040) !important;
  color: var(--bizInk, #3a3500) !important;
  font-weight: 800 !important;
}
body[data-page="settings"].user-business .sn-item:hover:not(.on):not([aria-selected="true"]) {
  background: var(--bizLight, #fefde8);
  color: var(--bizInk, #3a3500);
}

body[data-page="settings"].user-business .st-save-btn {
  background: var(--biz3, #ede040);
  color: var(--bizInk, #3a3500);
  border: none;
}
body[data-page="settings"].user-business .st-save-btn:hover {
  background: var(--biz2, #f5e84a);
}

.venue-selector {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}
.venue-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius:var(--r-md);
  border: 2px solid var(--border);
  background: var(--white);
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
  font-family: var(--ff);
  text-align: left;
  width: 100%;
}
.venue-chip:hover { border-color: var(--biz2, #f5e84a); background: var(--bizLight, #fefde8); }
.venue-chip.active {
  border-color: var(--biz3, #ede040);
  background: var(--bizLight, #fefde8);
  box-shadow: 0 2px 12px rgba(237,224,64,.2);
}
.venue-chip.active .vc-badge { display: flex; }
.venue-chip-icon {
  width: 40px; height: 40px;
  border-radius:var(--r-12);
  background: var(--bizSoft, rgba(245,232,74,.12));
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.venue-chip-info { flex: 1; }
.venue-chip-name { font-size: 14px; font-weight: 800; color: var(--ink); }
.venue-chip-sub  { font-size: 12px; color: var(--ink4); margin-top: 1px; }
.vc-badge {
  display: none;
  align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--biz3, #ede040);
  color: var(--bizInk, #3a3500);
  font-size: 11px; font-weight: 900;
  flex-shrink: 0;
}
.venue-chip-offers { font-size: 11px; color: var(--ink4); flex-shrink: 0; }

.plan-usage-wrap { margin-top: 16px; }
.usage-meter { margin-bottom: 12px; }
.usage-meter-head {
  display: flex; justify-content: space-between;
  font-size: 12px; font-weight: 700; color: var(--ink3);
  margin-bottom: 5px;
}
.usage-meter-bar {
  height: 6px; border-radius:var(--r-pill);
  background: var(--bg3, #eee);
  overflow: hidden;
}
.usage-meter-fill {
  height: 100%; border-radius:var(--r-pill);
  background: var(--biz3, #ede040);
  transition: width .5s cubic-bezier(.4,0,.2,1);
  min-width: 4px;
}
.usage-meter-fill.warning { background: var(--coral, #e53e3e); }
.usage-meter-fill.violet  { background: var(--violet); }

.ph-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.ph-table th {
  font-size: 10px; font-weight: 800; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--ink4);
  padding: 6px 0; border-bottom: 1.5px solid var(--border);
  text-align: left;
}
.ph-table td {
  font-size: 13px; color: var(--ink);
  padding: 12px 0; border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.ph-table tr:last-child td { border-bottom: none; }
.ph-table .ph-amount { font-weight: 800; font-family: 'Doto', monospace; }
.ph-badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius:var(--r-pill);
  font-size: 11px; font-weight: 800; letter-spacing: .4px;
}
.ph-badge.paid     { background: #dcfce7; color: #166534; }
.ph-badge.failed   { background: #fee2e2; color: #991b1b; }
.ph-badge.refunded { background: #e0f2fe; color: #075985; }
.ph-invoice-link {
  font-size: 11px; color: var(--violet); font-weight: 700;
  text-decoration: none;
  background: none; border: none; cursor: pointer;
  padding: 0; font-family: var(--ff); display: inline;
}
.ph-invoice-link:hover { text-decoration: underline; }
.ph-empty {
  padding: 32px 0; text-align: center;
  font-size: 13px; color: var(--ink4);
}

.st-input {
  width: 100%;
  padding: 13px 16px;
  font-size: 16px;
  font-weight: 500;
  font-family: var(--ff);
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
.st-input:focus {
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(87,0,255,.08);
}
.st-input::placeholder { color: var(--ink4); font-weight: 400; }
.st-input-locked {
  background: var(--bg2) !important;
  color: var(--ink4) !important;
  cursor: not-allowed !important;
  border-color: var(--border) !important;
  user-select: none;
}
.st-locked-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--ink4); background: var(--bg2);
  border: 1px solid var(--border);
  border-radius:var(--r-pill); padding: 2px 8px;
  margin-left: 8px;
}


#st-email-input { font-size: 16px !important; } /* v=20260518gn9: was 15px which triggered iOS auto-zoom on focus. Bumped to 16px to satisfy the iOS zoom-threshold rule. */
.settings-signout-section {
  margin-top: 24px;
  padding: 16px;
  background: var(--bg2);
  border-radius:var(--r-md);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.settings-signout-section .sso-info {
  font-size: 13px; font-weight: 700; color: var(--ink);
}
.settings-signout-section .sso-sub {
  font-size: 12px; color: var(--ink4); margin-top: 1px;
}

.danger-zone {
  margin-top: 32px !important;
  padding: 20px !important;
  border-radius:var(--r-md) !important;
  border: 1.5px solid #fecaca !important;
  background: #fff5f5 !important;
}
.dz-h {
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #991b1b !important;
  margin-bottom: 6px !important;
  display: flex; align-items: center; gap: 6px;
}
.dz-s {
  font-size: 13px; color: #7f1d1d;
  margin-bottom: 14px; line-height: 1.5;
}

.st-section-head svg { flex-shrink: 0; }

@media (max-width: 768px) {
  .settings-nav {
    padding: 0 14px !important;
    gap: 6px !important;
    top: 52px !important;

    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
    mask-image: linear-gradient(to right, black 85%, transparent 100%);
  }
  .sn-item { font-size: 12px !important; padding: 7px 12px !important; }
  .venue-selector { gap: 6px; }
  .ph-table th:last-child, .ph-table td:last-child { display: none; }
}

.notif-row-biz .toggle-switch.on {
  background: var(--biz3, #ede040) !important;
}
.notif-row-biz .toggle-knob {
  box-shadow: 0 1px 3px rgba(58,53,0,.2);
}
body[data-page="settings"].user-business .toggle-switch.on {
  background: var(--biz3, #ede040);
}

#st-controls .toggle-switch.on {
  background: var(--biz3, #ede040) !important;
}
#st-controls select.ob-input {
  border-color: var(--border);
  max-width: 140px;
}
#st-controls select.ob-input:focus {
  border-color: var(--biz2, #f5e84a);
  box-shadow: 0 0 0 3px rgba(237,224,64,.15);
}


#vb-step-6 .ob-field label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: var(--ink4);
}
#vb-step-6 input[type="date"].ob-input {
  border-color: var(--biz2, #f5e84a);
}
#vb-step-6 select.ob-input:focus {
  border-color: var(--biz2, #f5e84a);
  box-shadow: 0 0 0 3px rgba(237,224,64,.15);
}

#vb-step-6 .vb-step-lbl { color: var(--bizInk, #3a3500); }

.vb-venue-card:hover {
  border-color: var(--biz2, #f5e84a);
  box-shadow: 0 4px 16px rgba(237,224,64,.2);
  transform: translateY(-1px);
}
.vb-venue-card:hover { border-color: var(--biz3, #ede040); box-shadow: 0 2px 12px rgba(87,0,255,.08); }
.vb-venue-card.paused { opacity: .65; }
.vb-vc-icon {
  width: 48px; height: 48px;
  border-radius:var(--r-md);
  background: var(--bizSoft, rgba(245,232,74,.12));
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
}

.vb-vc-name { font-size: 15px; font-weight: 800; color: var(--ink); margin-bottom: 2px; }
.vb-vc-meta { font-size: 12px; color: var(--ink4); }
.vb-vc-badges { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; }
.vb-vc-badge {
  font-size: 10px; font-weight: 800; padding: 2px 7px;
  border-radius:var(--r-pill); letter-spacing: .3px;
}
.vb-vc-badge.verified { background: #dcfce7; color: #166534; }
.vb-vc-badge.pending  { background: rgba(245,232,74,.3); color: var(--bizInk,#3a3500); }
.vb-vc-badge.active   { background: var(--bizSoft,rgba(245,232,74,.12)); color: var(--bizInk,#3a3500); }
.vb-vc-badge.paused   { background: var(--bg3); color: var(--ink4); }
.vb-vc-badge.offers   { background: var(--bg2); color: var(--ink3); }
.vb-vc-actions {
  display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; align-items: flex-end;
}
.vb-vc-edit-btn {
  font-size: 12px; font-weight: 700; color: var(--violet);
  background: none; border: 1px solid rgba(87,0,255,.2);
  border-radius:var(--r-pill); padding: 5px 12px; cursor: pointer;
  font-family: var(--ff); transition: background .12s;
}
.vb-vc-edit-btn:hover { background: rgba(87,0,255,.06); }
.vb-vc-offers-count { font-size: 11px; color: var(--ink4); text-align: right; }

#vb-venues-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (min-width: 640px) {
  #vb-venues-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .vb-venue-card { flex-direction: column; align-items: flex-start; }
  .vb-vc-actions { width: 100%; flex-direction: row; align-items: center; margin-top: 8px; }
  .vb-vc-edit-btn { flex: 1; }
}

#vb-venues-list .back-nav { margin-bottom: 12px; }

.venue-picker-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius:var(--r-12);
  border: 1.5px solid var(--border);
  background: var(--white);
  cursor: pointer;
  font-family: var(--ff);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s, background .15s;
  white-space: nowrap;
  max-width: 200px;
}
.venue-picker-btn:hover {
  border-color: var(--biz2, #f5e84a);
  background: var(--bizLight, #fefde8);
}
.venue-picker-btn.open {
  border-color: var(--biz2, #f5e84a);
  background: var(--bizLight, #fefde8);
  box-shadow: 0 0 0 3px rgba(237,224,64,.15);
}
.venue-picker-btn .vp-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 130px;
}
.venue-picker-btn .vp-chevron {
  flex-shrink: 0;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
  color: var(--ink4);
}
.venue-picker-btn.open .vp-chevron {
  transform: rotate(180deg);
}

.venue-picker-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 500;
  min-width: 280px;
  max-width: 340px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px) scale(.97);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity .2s, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.venue-picker-panel.open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.vp-header {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border);
}
.vp-header-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink4);
}

.vp-all-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background .1s;
}
.vp-all-row:hover { background: var(--bg2); }
.vp-all-row.active { background: rgba(237,224,64,.1); }
.vp-all-label { font-size: 13px; font-weight: 700; color: var(--ink); }

.vp-venue-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background .12s, transform .15s;
  opacity: 0;
  transform: translateY(8px);
}
.vp-venue-row.visible {
  opacity: 1;
  transform: none;
}
.vp-venue-row:hover { background: var(--bizLight, #fefde8); }
.vp-venue-row.active {
  background: rgba(237,224,64,.1);
}
.vp-venue-row.active .vp-venue-name { color: var(--bizInk, #3a3500); }
.vp-venue-icon {
  width: 36px; height: 36px;
  border-radius:var(--r-sm);
  background: var(--bizSoft, rgba(245,232,74,.12));
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.vp-venue-info { flex: 1; min-width: 0; }
.vp-venue-name { font-size: 13px; font-weight: 800; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-venue-meta { font-size: 11px; color: var(--ink4); margin-top: 1px; }
.vp-venue-check {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--biz3, #ede040);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 900;
  color: var(--bizInk, #3a3500);
  opacity: 0; flex-shrink: 0;
  transition: opacity .15s;
}
.vp-venue-row.active .vp-venue-check { opacity: 1; }

.vp-footer {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: center;
}
.vp-add-btn {
  font-size: 12px; font-weight: 700;
  color: var(--violet);
  background: none; border: none;
  cursor: pointer; font-family: var(--ff);
  padding: 4px 8px;
  border-radius: 6px;
  transition: background .1s;
}
.vp-add-btn:hover { background: var(--violetSoft); }

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}

body[data-page^="biz"] .vb-vc-edit-btn {
  color: var(--bizInk, #3a3500);
  border-color: var(--biz2, #f5e84a);
  background: var(--bizSoft, rgba(245,232,74,.1));
}
body[data-page^="biz"] .vb-vc-edit-btn:hover {
  background: var(--biz3, #ede040);
  color: var(--bizInk, #3a3500);
}

.biz-venue-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--white);
}

.bvb-name {
  font-size: 16px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bvb-sub {
  font-size: 12px;
  color: var(--ink4);
  margin-top: 1px;
}

.bvb-settings-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius:var(--r-8);
  border: 1px solid var(--border);
  color: var(--ink3);
  text-decoration: none;
  transition: background .12s, border-color .12s;
}
.bvb-settings-btn:hover {
  background: var(--bg2);
  border-color: var(--border2);
}

#biz-upgrade-nudge,
#biz-verify-nudge {
  flex-wrap: wrap;
}

.biz-venue-bar .venue-picker-btn {
  height: 44px;
  padding: 0 12px;
  font-size: 13px;
  gap: 5px;
}

@media (max-width: 640px) {
  .biz-venue-bar { padding: 12px 16px; }
  .bvb-name { font-size: 15px; }
}

@media (max-width: 500px) {
  .vb-venue-card { flex-wrap: wrap; gap: 10px; }
  .vb-vc-icon { width: 36px; height: 36px; font-size: 18px; border-radius:var(--r-sm); }
  .vb-vc-body { width: calc(100% - 46px); min-width: 0; }

  .vb-vc-actions {
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 0;
    padding-top: 8px;
    border-top: 1px solid var(--border);
  }
  .vb-vc-edit-btn { font-size: 12px; padding: 6px 14px; }
  .vb-vc-offers-count { font-size: 11px; text-align: left; }
}

.ob-chip-dec, .ob-chip-inc, .ob-chip-rm {
  background: none; border: none; cursor: pointer;
  font-size: 13px; font-weight: 700; padding: 0 3px;
  color: var(--bizInk, #3a3500); opacity: .6; font-family: var(--ff);
}
.ob-chip-dec { margin-right: 2px; }
.ob-chip-rm  { margin-left: 4px; opacity: .5; }
.ob-chip-dec:hover, .ob-chip-rm:hover { opacity: 1; }
.ob-chip-lbl { vertical-align: middle; }

.ob-slider-ticks {
  position: relative;
  height: 22px;
  padding: 0;
  margin-top: 4px;
}
.ob-slider-ticks > span:nth-child(1) { left: 0%;   transform: translateX(0%); }
.ob-slider-ticks > span:nth-child(2) { left: 10%;  transform: translateX(-50%); }
.ob-slider-ticks > span:nth-child(3) { left: 20%;  transform: translateX(-50%); }
.ob-slider-ticks > span:nth-child(4) { left: 50%;  transform: translateX(-50%); }
.ob-slider-ticks > span:nth-child(5) { left: 100%; transform: translateX(-100%); }
.ob-slider-ticks span {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink4);
  letter-spacing: .3px;
  position: absolute;
  top: 0;
  white-space: nowrap;
}
.ob-slider-ticks span::before {
  content: '';
  display: block;
  width: 1px;
  height: 5px;
  background: var(--border2);
  margin: 0 auto 2px;
}

.ci-actions { position:absolute;top:6px;right:6px;display:flex;gap:4px;opacity:0;transition:opacity .15s; }
.content-item:hover .ci-actions { opacity:1; }
.ci-action-btn {
  width:44px;height:44px;border-radius:50%;
  background:rgba(0,0,0,.55);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:13px;font-family:var(--ff);
  text-decoration:none;transition:background .12s;
}
.ci-action-btn:hover { background:rgba(0,0,0,.8); }

.auth-field-err {
  display: none;
  font-size: 12px;
  color: var(--coral, #e53e3e);
  font-weight: 600;
  margin-top: 4px;
  line-height: 1.4;
}
.auth-field-err:not(:empty) { display: block; }

.creator-hdr {
  background: #fff;
  color: var(--ink, #111);
  padding: 16px 20px 0;
  border-bottom: 0.5px solid #e8e5e0;
}
.creator-hdr-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.creator-hdr-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 3px;
}
.creator-hdr-title {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -.4px;
  color: #fff;
  line-height: 1.2;
}
.creator-hdr-bell {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  transition: background .12s;
}
.creator-hdr-bell:hover { background: rgba(255,255,255,.2); }

.creator-hdr-stats {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
}
.creator-hdr-stats > [role="listitem"] {
  text-align: center;
  padding: 10px 8px;
  flex: 1 !important;
  min-width: 0 !important;
  border-right: 1px solid rgba(255,255,255,.15);
}
.creator-hdr-stats > [role="listitem"]:last-child { border-right: none; }

/* Dividers inside white stat card (claims page) use token border colour */
[style*="background:#fff"] > .creator-hdr-stats > [role="listitem"] {
  border-right-color: var(--border, #e8e5e0);
}
.creator-stat-n {
  font-size: 22px;
  font-weight: 900;
  color: var(--yellow);
  font-family: 'Doto', monospace;
  letter-spacing: 1px;
  line-height: 1;
  margin-bottom: 4px;
}
.creator-stat-l {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
}

.prof-av-lg {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.3);
}

.prof-page { padding: 0; }
.prof-panels {
  display: grid;
  gap: 0;
}
.prof-panel {
  padding: 20px;
  border-bottom: 1px solid var(--border);
}
.prof-panel-h {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.2px;
  margin-bottom: 12px;
}

/* v=20260518gn41: Connected Accounts cards (was flat text rows).
   Each connected platform is a card with branded icon chip, two-line
   meta (platform + handle), and right-aligned follower count.
   Verified is a pill, not a tick. */
.prof-soc-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg);
  transition: border-color .15s ease, transform .12s ease;
}
.prof-soc-card:hover { border-color: var(--border2); }
.prof-soc-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.prof-soc-icon.ig {
  background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}
.prof-soc-icon.tt {
  background: #000;
  position: relative;
}
.prof-soc-icon.tt::before,
.prof-soc-icon.tt::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .55;
}
.prof-soc-icon.tt::before { background: radial-gradient(circle at 25% 30%, #25F4EE 0%, transparent 55%); }
.prof-soc-icon.tt::after  { background: radial-gradient(circle at 75% 70%, #FE2C55 0%, transparent 55%); }
.prof-soc-icon.tt > svg   { position: relative; z-index: 1; }
.prof-soc-icon.yt {
  background: #FF0000;
}
.prof-soc-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.prof-soc-platform {
  font-size: 11px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: .2px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.prof-soc-handle {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink3);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--ff, sans-serif);
  background: none;
  border: none;
  padding: 0;
  line-height: 1.2;
}
a.prof-soc-handle:hover { color: var(--violet); text-decoration: underline; }
.prof-soc-followers {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  padding-inline-start: 8px;
}
.prof-soc-fnum {
  font-size: 16px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -.3px;
  line-height: 1;
}
.prof-soc-flbl {
  font-size: 9px;
  font-weight: 800;
  color: var(--ink4);
  letter-spacing: .5px;
  text-transform: uppercase;
  line-height: 1;
}
.prof-soc-verified {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  background: rgba(22,163,74,.1);
  color: #15803d;
  padding: 2px 7px;
  border-radius: 99px;
}
.prof-soc-empty {
  padding: 22px 16px;
  text-align: center;
  border: 1px dashed var(--border2);
  border-radius: 14px;
  font-size: 13px;
  color: var(--ink4);
  font-weight: 600;
  background: var(--bg2);
}

.chip.chip-feed{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.85);font-size:12px;padding:6px 14px}
.chip.chip-feed.on{background:#fff;color:var(--violet);border-color:#fff}
.chip.chip-feed:not(.on):hover{background:rgba(255,255,255,.25);border-color:rgba(255,255,255,.4)}

.chip-city{flex-shrink:0;padding:4px 12px;border-radius:var(--r-pill);font-size:11px;font-weight:700;background:none;border:1.5px solid var(--border);color:var(--ink4);cursor:pointer}
.chip-city.on{background:var(--violet);color:#fff;border-color:var(--violet)}

#feed-topbar{transition:box-shadow .2s}
#feed-topbar.scrolled{box-shadow:0 2px 16px rgba(87,0,255,.25)}

.claims-tabs {
  display: flex;
  gap: 0;
  padding: 0;
  border-bottom: none;
  overflow-x: auto;
}
.claims-tabs .oc-tab {
  border-radius: 0;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  padding: 10px 14px;
  flex-shrink: 0;
}
.claims-tabs .oc-tab-active {
  background: none !important;
  border-bottom-color: var(--violet);
  color: var(--violet) !important;
}

.bn-item.on .bn-lbl { color: var(--violet); }
.bn-lbl { font-size: 10px; font-weight: 700; color: var(--ink3); }

.claim-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-bottom: 10px;
  transition: border-color .15s, box-shadow .15s;
}
.claim-card:hover {
  border-color: rgba(87,0,255,.25);
  box-shadow: 0 2px 12px rgba(87,0,255,.08);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
.dismiss-btn{background:none;border:none;cursor:pointer;color:var(--ink4);font-size:16px;padding:2px 8px;line-height:1;border-radius:4px;flex-shrink:0;font-family:var(--ff)}
.dismiss-btn:hover{background:var(--bg2);color:var(--ink3)}

.biz-loading-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
}
.biz-spinner {
  position: relative;
  width: 44px;
  height: 44px;
}
.biz-spinner__outer {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid var(--border);
}
.biz-spinner__inner {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--spinnerInk, var(--violet));
  animation: biz-spin 0.8s linear infinite;
}
.biz-spinner__track-cover {
  display: none;
}
.biz-spinner__ball {
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  background: var(--spinnerInk, var(--violet));
  border-radius: 50%;
  animation: biz-spin 0.8s linear infinite;
}
@keyframes biz-spin {

}
.biz-spinner__ball {
  transform-origin: 50% calc(50% + 22px);
  left: calc(50% - 4px);
  top: -1px;
}

.user-biz-only { display: none !important; }
body.user-business .user-biz-only { display: flex !important; }

@media (min-width: 769px) {
  body[data-page="settings"].user-business .settings-nav {
    display: none;
  }
}

@media (min-width: 769px) {

  body[data-page="settings"].user-business #settings-biz-sidebar {
    display: flex !important;
    flex-direction: column;
    flex-shrink: 0;
    width: 220px;
    min-height: 100vh;
    background: var(--bg);
    border-right: 1px solid var(--border);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    flex-direction: column;
    padding-top: 16px;
  }

}
body[data-page="settings"].user-business #settings-biz-sidebar .biz-logo-wrap {
  padding: 0 20px 20px;
}

body[data-page="settings"].user-business .settings-content-wrap {
  flex: 1;
  min-width: 0;
  overflow-x: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0;
}
body[data-page="settings"] .settings-panels {
  flex: 1;
  min-width: 0;
  padding: 24px;
}
@media (max-width: 768px) {
  .settings-content-wrap { flex-direction: column; }
  body[data-page="settings"] .biz-sidebar-settings-nav {
    width: 100%; position: relative; top: 0; min-height: unset;
    border-right: none; border-bottom: 1px solid var(--border); order: 0;
  }
}

body[data-page="settings"].user-business .settings-nav {
  top: 0 !important;
}
body[data-page="settings"].user-business .inner-nav {
  top: 0 !important;
}

@media (max-width: 700px) {
  body[data-page="settings"].user-business body:not([data-page="settings"]) #settings-biz-sidebar { display: none !important; }

  body[data-page="settings"].user-business .settings-content-wrap { width: 100%; }
}

body.user-business .notif-row-creator { display: none !important; }
body.user-creator .notif-row-biz { display: none !important; }

/* v=20260518gn60: mirror — see shared.css for full rationale */
.tr-toggle[aria-checked="true"] { background:var(--violet,#5700ff) !important; }
.biz-bottom-nav::-webkit-scrollbar { display: none; }
.biz-bottom-nav { padding-bottom: env(safe-area-inset-bottom, 0px); }

#sr-toast-stack {
  position: fixed;
  /* v=20260518gn9 mirror — safe-area-aware bottom */
  bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 16px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20000;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  width: min(420px, calc(100vw - 32px));
}
@media (min-width: 769px) {
  #sr-toast-stack {
    bottom: 24px;
    left: auto;
    right: 24px;
    transform: none;
    align-items: flex-end;
  }
  /* v=20260518gn9 (audit P3): toast stack mirrored to reading-start in RTL. */
  html[dir="rtl"] #sr-toast-stack {
    right: auto;
    left: 24px;
    align-items: flex-start;
  }
}
.sr-toast {
  pointer-events: all;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px 11px 16px;
  background: var(--ink, #111);
  color: #fff;
  border-radius:var(--r-md);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--ff, 'Plus Jakarta Sans', sans-serif);
  line-height: 1.4;
  box-shadow: var(--shadow-lg);
  max-width: 100%;
  opacity: 0;
  transform: translateY(12px) scale(.97);
  transition: opacity .22s ease, transform .22s cubic-bezier(.34,1.4,.64,1);
  will-change: transform, opacity;
  cursor: default;
  min-width: 220px;
}
.sr-toast.sr-toast-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.sr-toast.sr-toast-out {
  opacity: 0;
  transform: translateX(18px) scale(.97);
  transition: opacity .18s ease, transform .18s ease;
}
.sr-toast.sr-toast-success { background: #1a7a4a; }
.sr-toast.sr-toast-error   { background: var(--coral, #e53e3e); }
.sr-toast.sr-toast-info    { background: var(--ink, #111); color: #fff; }
.sr-toast .sr-toast-msg    { flex: 1; min-width: 0; }
.sr-toast .sr-toast-icon   { flex-shrink: 0; width: 18px; height: 18px; }
.sr-toast-dismiss {
  background: none;
  border: none;
  color: inherit;
  opacity: .5;
  cursor: pointer;
  font-size: 16px;
  padding: 0 0 0 6px;
  line-height: 1;
  font-family: var(--ff);
  flex-shrink: 0;
  transition: opacity .12s;
}
.sr-toast-dismiss:hover { opacity: 1; }

.settings-section .btn-primary-action { background:var(--violet,#5700ff); color:#fff; border:none; font-weight:900; }
.settings-section .btn-secondary-action { background:transparent; color:var(--ink); border:1.5px solid var(--border); font-weight:700; }
.settings-section .btn-text-action { background:none; border:none; color:var(--violet); font-weight:700; padding:0; cursor:pointer; font-size:inherit; }
.settings-section .btn-danger-action { background:#fee2e2; color:#991b1b; border:1.5px solid #fecaca; font-weight:700; }

.badge-soon { font-size:9px; font-weight:800; background:var(--biz2,#f5e84a); color:var(--bizInk,#3a3500); padding:1px 6px; border-radius:var(--r-pill); letter-spacing:.3px; }
.badge-coming-soon { font-size:9px; font-weight:800; background:var(--bg3); color:var(--ink4); padding:2px 7px; border-radius:var(--r-pill); }

.settings-info-banner { background:var(--bizSoft,rgba(245,232,74,.1)); border:1px solid var(--biz2,#f5e84a); border-radius:var(--r-12); padding:14px 16px; font-size:13px; color:var(--ink3); line-height:1.6; }

.st-section-head svg { flex-shrink:0; opacity:.6; }

.settings-section label, .settings-section .ob-field label { font-size:10px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:var(--ink4); }

.ph-amount { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; letter-spacing: 0; }

.billing-plan-features { font-size:12px; color:var(--ink4); line-height:1.8; }

.auto-approve-warning {
  display: none;
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--bizSoft, rgba(245,232,74,.15));
  border: 1px solid var(--biz3, #ede040);
  border-radius:var(--r-8);
  font-size: 12px;
  color: var(--bizInk, #3a3500);
  font-weight: 600;
  line-height: 1.5;
}
.auto-approve-warning.visible { display: block; }

body.user-business .creator-only { display: none !important; }

/* Show creator-only elements on settings page for creator users.
   v=zt: exclude sections that are explicitly hidden by tab-switch state.
   Without :not([hidden]), #st-socials (creator-only) was rendering on
   every settings tab, causing the duplicate CONNECTED ACCOUNTS bug. */
body[data-page="settings"]:not(.is-biz):not(.user-business) .creator-only:not(#settings-section-tabs):not([hidden]):not([aria-hidden="true"]) {
  display: block !important;
}
/* Old tab bar is always hidden — JS and explicit rule both agree */
body[data-page="settings"] #settings-section-tabs {
  display: none !important;
}
/* snav-col hide now at [167091] — rule removed to avoid duplication */
body[data-page="settings"]:not(.is-biz):not(.user-business) a.creator-only,
body[data-page="settings"]:not(.is-biz):not(.user-business) button.creator-only {
  display: inline-flex !important;
}
/* Hide biz-only elements on settings page for creator users */
body[data-page="settings"]:not(.is-biz):not(.user-business) .biz-only {
  display: none !important;
}
body[data-page="settings"]:not(.is-biz):not(.user-business) .biz-sidebar {
  display: none !important;
}


body[data-page="settings"] #settings-biz-sidebar {
  position: fixed !important;
  top: 0; left: 0; bottom: 0;
  width: 220px;
  z-index: 100;
  overflow-y: auto;
  background: var(--white, #fff);
  border-right: 1px solid var(--border);
  display: none;
}
@media (min-width: 769px) {
  body[data-page="settings"].user-business body.is-biz .biz-sidebar,
  body.user-business .biz-sidebar {
    display: flex !important;
  }
}
body[data-page="settings"].user-business #settings-biz-sidebar {
  display: flex !important;
  flex-direction: column;
}

body[data-page="settings"].user-business .settings-content-wrap {
  display: block !important;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 0 24px 80px;
}
body[data-page="settings"].user-business .inner-nav {
  max-width: 100%;
  transform: none;
  left: auto;
  margin: 0;
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white,#fff);
}

body[data-page="settings"].user-business .settings-nav { display: none !important; }

@media (max-width: 768px) {
  body[data-page="settings"].user-business .biz-sidebar {
    display: none !important;
  }
  body[data-page="settings"].user-business #settings-biz-sidebar {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  body[data-page="settings"].user-business #page-main { margin-left: 0 !important; }
}

.srm-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 900;
  background: var(--white, #fff);
  border-top: 1px solid var(--border);
  box-shadow: var(--shadow-drawer);
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px));

  --srm-active: var(--violet, #5700ff);
  --srm-active-ink: var(--violet, #5700ff);
  --srm-inactive: var(--ink4);
  --srm-line: var(--violet, #5700ff);
}

.srm-items {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  padding: 0 4px;
}

.srm-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 8px 2px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--ff, 'Plus Jakarta Sans', sans-serif);
  color: var(--srm-inactive);
  text-decoration: none;
  position: relative;
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
  transition: color .2s;
  -webkit-tap-highlight-color: transparent;
}

.srm-item:focus-visible {
  outline: 2px solid var(--srm-active);
  border-radius:var(--r-8);
  outline-offset: 2px;
}

.srm-item.active {
  color: var(--srm-active-ink);
}

.srm-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}

.srm-item.active .srm-icon {
  transform: translateY(-2px);
  animation: srmIconBounce .5s cubic-bezier(.34,1.56,.64,1);
}

.srm-icon::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--srm-active);
  opacity: 0;
  transform: scale(0);
  transition: opacity .25s, transform .25s;
}

.srm-item.active .srm-icon::after {
  opacity: .18;
  transform: scale(1);
}

.srm-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  transition: color .2s;
  position: relative;
}

.srm-label::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -4px;
  transform: translateX(-50%) scaleX(0);
  width: 100%;
  height: 2px;
  border-radius:var(--r-pill);
  background: var(--srm-line);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
  transform-origin: center;
}

.srm-item.active .srm-label::after {
  transform: translateX(-50%) scaleX(1);
}

.srm-item.srm-cta {
  margin-top: -10px;
}
.srm-item.srm-cta .srm-icon {
  width: 44px;
  height: 44px;
  background: var(--biz3, #ede040);
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(237,224,64,.4);
  color: var(--bizInk, #3a3500);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
}
.srm-item.srm-cta.active .srm-icon,
.srm-item.srm-cta:hover .srm-icon {
  transform: scale(1.1) translateY(-2px);
  box-shadow: 0 6px 20px rgba(237,224,64,.5);
}
.srm-item.srm-cta .srm-label { color: var(--bizInk, #3a3500); font-weight: 800; }
.srm-item.srm-cta .srm-label::after { background: var(--bizInk, #3a3500); }
.srm-item.srm-cta .srm-icon::after { display: none; }

@keyframes srmIconBounce {
  0%   { transform: translateY(0); }
  20%  { transform: translateY(-5px); }
  45%  { transform: translateY(1px); }
  70%  { transform: translateY(-2px); }
  100% { transform: translateY(-2px); }
}

@media (max-width: 768px) {
  .srm-nav { display: block; }

  .biz-bottom-nav { display: none !important; }
}

@media (min-width: 769px) {
  .srm-nav { display: none !important; }
}

.ob-mf-display {
  text-align: center;
  margin-bottom: 24px;
}
.ob-mf-val-big {
  font-size: 42px;
  font-weight: 900;
  letter-spacing: -1.5px;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 6px;
  font-family: var(--ff);
  transition: color .2s;
}
.ob-mf-val-sub {
  font-size: 13px;
  color: var(--ink4);
  font-weight: 500;
  transition: color .2s;
}

.ob-mf-slider-wrap {
  position: relative;
  padding: 6px 0;
  margin-bottom: 10px;
}

.ob-mf-slider-wrap .ob-slider {
  width: 100%;
  position: relative;
  z-index: 2;
  background: transparent;
  margin: 0;
}

.ob-mf-track-fill {
  position: absolute;
  top: 50%;
  left: 0;
  height: 6px;
  transform: translateY(-50%);
  background: var(--biz3, #ede040);
  border-radius:var(--r-pill);
  pointer-events: none;
  z-index: 1;
  transition: width .1s;
}

.ob-mf-slider-wrap .ob-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--biz3, #ede040);
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.15), 0 0 0 2px var(--biz2,#f5e84a);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  position: relative;
  z-index: 3;
}
.ob-mf-slider-wrap .ob-slider::-webkit-slider-thumb:active {
  transform: scale(1.2);
  box-shadow: 0 4px 16px rgba(237,224,64,.4), 0 0 0 3px var(--biz2,#f5e84a);
}

.ob-mf-ticks {
  position: relative;
  height: 16px;
  margin-top: 4px;
}
.ob-mf-ticks span {
  position: absolute;
  font-size: 10px;
  font-weight: 700;
  color: var(--ink4);
  letter-spacing: .3px;
  transform: translateX(-50%);
  white-space: nowrap;
}

.ob-mf-ticks span:nth-child(1) { left:   0%; transform: translateX(0); }
.ob-mf-ticks span:nth-child(2) { left:  10%; }
.ob-mf-ticks span:nth-child(3) { left:  20%; }
.ob-mf-ticks span:nth-child(4) { left:  50%; }
.ob-mf-ticks span:nth-child(5) { left: 100%; transform: translateX(-100%); }

.vb-venue-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .15s;
  box-shadow: var(--shadow-sm);
}
.vb-venue-card:hover {
  border-color: var(--biz2, #f5e84a);
  box-shadow: 0 4px 20px rgba(237,224,64,.15);
  transform: translateY(-1px);
}
.vb-venue-card.paused {
  border-color: var(--border);
  opacity: .75;
}
.vb-venue-card.paused:hover { opacity: .95; }

.vb-vc-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 12px;
}

.vb-vc-icon {
  width: 48px;
  height: 48px;
  background: var(--bizSoft, rgba(245,232,74,.12));
  border: 1.5px solid var(--biz2, #f5e84a);
  border-radius:var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
}

.vb-vc-name {
  font-size: 16px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -.3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vb-vc-status-wrap { flex-shrink: 0; }
.vb-status-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius:var(--r-pill);
  border: none;
  cursor: pointer;
  font-family: var(--ff);
  font-size: 11px;
  font-weight: 800;
  transition: background .2s, color .2s, transform .15s;
  min-height: 34px;
  min-width: 72px;
  justify-content: center;
  letter-spacing: .3px;
}
.vb-status-toggle.active {
  background: rgba(16,185,129,.12);
  color: #065f46;
  border: 1.5px solid rgba(16,185,129,.3);
}
.vb-status-toggle.active:hover {
  background: rgba(229,62,62,.1);
  color: #991b1b;
  border-color: rgba(229,62,62,.3);
}
.vb-status-toggle.active:hover .vb-status-lbl::after { content: " → Pause"; font-weight:400; opacity:.7; }
.vb-status-toggle.active:hover .vb-status-lbl { overflow:visible; }
.vb-status-toggle.paused {
  background: var(--bg2);
  color: var(--ink4);
  border: 1.5px solid var(--border);
}
.vb-status-toggle.paused:hover {
  background: rgba(16,185,129,.1);
  color: #065f46;
  border-color: rgba(16,185,129,.3);
}
.vb-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.vb-status-toggle.active .vb-status-dot { background: #10b981; box-shadow: 0 0 0 2px rgba(16,185,129,.2); }
.vb-status-toggle.paused .vb-status-dot { background: var(--ink4); }
.vb-status-toggle:disabled { opacity: .5; cursor: not-allowed; }
.vb-status-lbl { white-space: nowrap; }

.vb-vc-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius:var(--r-pill);
  white-space: nowrap;
  letter-spacing: .3px;
}

.vb-vc-stats-row {
  display: flex;
  gap: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: var(--bg2);
}

.vb-vc-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 14px;
  flex: 1 0 auto;
  min-width: 72px;
  border-right: 1px solid var(--border);
}

.vb-vc-stat-n {
  font-size: 18px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -.4px;
  line-height: 1;
  white-space: nowrap;
}
.vb-vc-stat-l {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink4);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-top: 3px;
  white-space: nowrap;
}

.vb-vc-actions {
  display: flex;
  gap: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}
.vb-vc-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
  padding: 13px 8px;
  background: none;
  border: none;
  border-right: 1px solid var(--border);
  cursor: pointer;
  font-family: var(--ff);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink3);
  text-decoration: none;
  transition: background .12s, color .12s;
  min-height: 48px;
  white-space: nowrap;
}

.vb-vc-action-btn.primary { color: var(--bizInk, #3a3500); font-weight: 800; }
.vb-vc-action-btn.primary:hover { background: var(--bizSoft, rgba(245,232,74,.1)); }

.vb-vc-action-btn.danger:hover { background: #fff5f5; }

.vb-an-sheet {
  background: var(--white);
  border-radius: 24px 24px 0 0;
  width: 100%;
  max-width: 600px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 -8px 40px rgba(0,0,0,.2);
  animation: slideUpSheet .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes slideUpSheet {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.vb-an-handle {
  width: 36px; height: 4px;
  background: rgba(255,255,255,.3);
  border-radius:var(--r-pill);
  margin: 10px auto 0;
}
.vb-an-head {
  background: var(--bizInk, #3a3500);
  padding: 16px 20px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}
.vb-an-head .vb-vc-icon {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.2);
}
.vb-an-body {
  overflow-y: auto;
  flex: 1;
  -webkit-overflow-scrolling: touch;
}
.vb-an-body-inner { padding: 20px; display: flex; flex-direction: column; gap: 20px; }
.vb-an-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.vb-an-kpi {
  background: var(--bizInk, #3a3500);
  border-radius:var(--r-md);
  padding: 14px 16px;
  color: #fff;
}
.vb-an-kpi-n {
  font-size: 24px;
  font-weight: 900;
  color: var(--biz3, #ede040);
  letter-spacing: -.5px;
  line-height: 1;
}
.vb-an-kpi-l {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-top: 4px;
}
.vb-an-section { display: flex; flex-direction: column; gap: 10px; }
.vb-an-section-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink4);
}
.vb-an-stat-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius:var(--r-12);
  padding: 12px;
  text-align: center;
}
.vb-an-stat-n {
  font-size: 18px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -.3px;
}
.vb-an-stat-l {
  font-size: 9px;
  font-weight: 700;
  color: var(--ink4);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-top: 3px;
}
.vb-an-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius:var(--r-pill);
  letter-spacing: .3px;
}
.vb-an-badge.active  { background: rgba(16,185,129,.1); color: #065f46; border: 1px solid rgba(16,185,129,.3); }
.vb-an-badge.paused  { background: var(--bg3); color: var(--ink4); border: 1px solid var(--border); }
.vb-an-badge.neutral { background: var(--bizSoft,rgba(245,232,74,.12)); color: var(--bizInk,#3a3500); border: 1px solid var(--biz2,#f5e84a); }

@media (max-width: 600px) {
  .vb-an-kpi-n { font-size: 20px; }
  .vb-vc-stat-n { font-size: 16px; }
  .vb-vc-action-btn { font-size: 10px; padding: 12px 6px; gap: 4px; }
  .vb-vc-action-btn svg { width:14px; height:14px; }
  #vb-venues-list { padding-left:0 !important; padding-right:0 !important; }
  #vb-venues-list > div:last-child { padding: 12px 12px 100px; }
}

.va-period-btn:hover:not(.active) {
  background: var(--bg3) !important;
  color: var(--ink) !important;
}
.va-period-btn { transition: background .15s, color .15s; }

#va-content .va-bar {
  transition: width .7s cubic-bezier(.4,0,.2,1);
}

@media (max-width: 480px) {

  #va-body  { padding: 16px; }
}

@keyframes vaFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-3px); }
}

#va-sheet {
  --va-bg:     #fff;
  --va-bg2:    #f8f8f8;
  --va-bg3:    #f2f2f2;
  --va-ink:    #111;
  --va-sub:    #606060;
  --va-border: #e8e8e8;
  --va-ring-track: #e8e8e8;
  --biz3dark:  #b8920a;
}

.va-p-btn { transition: background .18s, color .18s; }
.va-p-btn:hover:not([style*="#ede040"]) { background: var(--va-bg3,#f2f2f2) !important; }

.va-tab-btn { transition: color .18s, font-weight .18s; }
.va-tab-btn:focus-visible { outline: 2px solid var(--biz3,#ede040); border-radius: 4px; outline-offset: 2px; }

#va-body::-webkit-scrollbar { width: 3px; }
#va-body::-webkit-scrollbar-track { background: transparent; }
#va-body::-webkit-scrollbar-thumb { background: var(--va-border,#e8e8e8); border-radius:var(--r-pill); }

#va-sheet { transform-style: preserve-3d; will-change: transform; }

/* v=20260518gn9 (T6 unblock): removed the touch-device translateY lock on
   #va-sheet. It was blocking the swipe-down-to-close gesture from working
   on the deal-detail sheet — the helper sets translateY during drag and
   that !important override froze it to 0. */

@media (max-width: 480px) {
  #va-sheet  { border-radius: 20px 20px 0 0; }
  #va-body   { padding: 0 !important; }
  #va-content { padding: 16px !important; }
}

.vb-drag-handle {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius:var(--r-8);
  color: var(--ink4);
  cursor: grab;
  transition: background .15s, color .15s, opacity .15s;
  opacity: 0;
  z-index: 10;
}
.vb-drag-handle:active { cursor: grabbing; }
.vb-venue-card:hover .vb-drag-handle {
  opacity: 1;
  background: var(--bg2);
  color: var(--ink3);
}
.vb-drag-handle:hover {
  background: var(--biz3, #ede040) !important;
  color: var(--bizInk, #3a3500) !important;
}

.vb-venue-card {
  background: var(--white, #fff);
  border: 1.5px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-sm);
  transition: border-color .2s, box-shadow .2s, transform .2s;

  animation: vbCardIn .35s cubic-bezier(.16,1,.3,1) both;
}
.vb-venue-card:nth-child(1) { animation-delay: .04s; }
.vb-venue-card:nth-child(2) { animation-delay: .08s; }
.vb-venue-card:nth-child(3) { animation-delay: .12s; }

@keyframes vbCardIn {
  from { opacity: 0; transform: translateY(10px); }

}

.vb-venue-card:hover {
  border-color: var(--biz2, #f5e84a);
  box-shadow: 0 6px 24px rgba(237,224,64,.14), 0 2px 8px rgba(0,0,0,.04);
  transform: translateY(-1px);
}
.vb-venue-card.paused {
  opacity: .72;
  border-style: dashed;
}
.vb-venue-card.paused:hover { opacity: .92; }

.vb-vc-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 14px;
  position: relative;
}
.vb-vc-icon-wrap { flex-shrink: 0; }
.vb-vc-icon {
  width: 48px;
  height: 48px;
  background: var(--bizSoft, rgba(245,232,74,.12));
  border: 1.5px solid var(--biz2, #f5e84a);
  border-radius:var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  transition: transform .2s, box-shadow .2s;
}
.vb-venue-card:hover .vb-vc-icon {
  transform: scale(1.06) rotate(-2deg);
  box-shadow: 0 4px 12px rgba(237,224,64,.25);
}
.vb-vc-body { flex: 1; min-width: 0; }
.vb-vc-name {
  font-size: 16px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -.3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}
.vb-vc-meta {
  font-size: 12px;
  color: var(--ink4);
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vb-vc-status-wrap { flex-shrink: 0; }

.vb-status-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius:var(--r-pill);
  border: 1.5px solid transparent;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  font-family: var(--ff);
  transition: all .2s;
  letter-spacing: .3px;
}
.vb-status-toggle.active {
  background: rgba(16,185,129,.1);
  border-color: rgba(16,185,129,.3);
  color: #065f46;
}
.vb-status-toggle.active:hover {
  background: rgba(16,185,129,.18);
}
.vb-status-toggle.paused {
  background: var(--bg2);
  border-color: var(--border);
  color: var(--ink4);
}
.vb-status-toggle.paused:hover {
  background: var(--bizSoft);
  border-color: var(--biz2);
  color: var(--bizInk);
}
.vb-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.vb-status-toggle.active .vb-status-dot {
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16,185,129,.2);
  animation: vbStatusPulse 2s ease-in-out infinite;
}
@keyframes vbStatusPulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(16,185,129,.2); }
  50%       { box-shadow: 0 0 0 5px rgba(16,185,129,.08); }
}

.vb-vc-stats-row {
  display: flex;
  gap: 0;
  border-top: 1px solid var(--border);
  background: var(--biz-dark, #1a1400);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.vb-vc-stats-row::-webkit-scrollbar { display: none; }
.vb-vc-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 11px 14px;
  flex: 1 0 auto;
  min-width: 72px;
  border-right: 1px solid rgba(255,255,255,.07);
}
.vb-vc-stat:last-child { border-right: none; }
.vb-vc-stat-n {
  font-size: 17px;
  font-weight: 900;
  color: var(--biz3, #ede040);
  letter-spacing: -.4px;
  line-height: 1;
  white-space: nowrap;
}
.vb-vc-stat-l {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.4);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-top: 3px;
  white-space: nowrap;
}
/* v=20260518gn9 (P1 D-2-001): narrow-viewport pin to prevent label merge */
@media (max-width: 414px) {
  .vb-vc-stat { min-width: 80px; flex-shrink: 0; padding: 10px 12px; }
  .vb-vc-stat-l { font-size: 10px; letter-spacing: .3px; }
}

.vb-vc-actions {
  display: flex;
  gap: 0;
  border-top: 1px solid var(--border);
}
.vb-vc-action-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 6px;
  border: none;
  border-right: 1px solid var(--border);
  background: none;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink3);
  cursor: pointer;
  font-family: var(--ff);
  text-decoration: none;
  letter-spacing: .2px;
  transition: background .12s, color .12s;
  -webkit-tap-highlight-color: transparent;
}
.vb-vc-action-btn:last-child { border-right: none; }
.vb-vc-action-btn:hover { background: var(--bg2); color: var(--ink); }
.vb-vc-action-btn.primary {
  color: var(--bizInk, #3a3500);
  font-weight: 900;
  background: var(--bizSoft, rgba(245,232,74,.08));
}
.vb-vc-action-btn.primary:hover {
  background: var(--bizLight, #fefde8);
  color: var(--bizInk);
}
.vb-vc-action-btn.danger { color: var(--coral, #e53e3e); }
.vb-vc-action-btn.danger:hover { background: #fff5f5; color: #c53030; }
.vb-vc-action-btn svg { flex-shrink: 0; }

.vb-vc-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius:var(--r-pill);
  white-space: nowrap;
  letter-spacing: .4px;
}
.vb-vc-badge.verified { background:var(--bizSoft,rgba(245,232,74,.2));color:var(--bizInk,#3a3500);border:1px solid var(--biz2,#f5e84a); }

@media (min-width: 500px) {
  #vb-venues-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
}
@media (max-width: 400px) {
  .vb-vc-action-btn { font-size: 8px; padding: 9px 4px; gap: 3px; }
  .vb-vc-stat-n { font-size: 15px; }
  .vb-vc-name { font-size: 14px; }
}

body[data-page^="biz"] :focus-visible {
  outline-color: var(--biz3, #ede040) !important;
}
body[data-page^="biz"] .btn:focus-visible,
body[data-page^="biz"] a:focus-visible {
  outline-color: var(--biz3, #ede040) !important;
}

body[data-page^="biz"] .btn-loading::after {
  border-color: rgba(237,224,64,.25) !important;
  border-top-color: var(--biz3, #ede040) !important;
}

body[data-page^="biz"] .btn-text-action {
  color: var(--bizInk, #3a3500) !important;
}
body[data-page^="biz"] .btn-text-action:hover {
  color: var(--biz3, #ede040) !important;
}

body[data-page^="biz"] a:not(.btn):not(.biz-nav-item):not(.nav-logo):not(.srm-item):not(.skip-link):not([class*="cr-pill"]) {
  color: var(--bizInk, #3a3500);
}

body[data-page^="biz"] .oc-tab-active,
body[data-page^="biz"] .oc-tab[aria-checked="true"] {
  background: var(--white) !important;
  color: var(--bizInk, #3a3500) !important;
  border-color: var(--biz3, #ede040) !important;
  box-shadow: 0 1px 4px rgba(237,224,64,.2) !important;
}

body[data-page="biz/offer"].ob-biz {
  --ob-accent:      var(--biz3, #ede040);
  --ob-accent2:     var(--biz2, #f5e84a);
  --ob-accent-mid:  var(--bizMid, rgba(245,232,74,.25));
  --ob-accent-soft: var(--bizSoft, rgba(245,232,74,.12));
  --ob-accent-ink:  var(--bizInk, #3a3500);
}

body[data-page^="biz"] .ob-step-dot-inner,
body[data-page^="biz"] .vs-step-dot {
  border-color: var(--biz3, #ede040) !important;
}
body[data-page^="biz"] .ob-step-dot.done .ob-step-dot-inner,
body[data-page^="biz"] .ob-step-dot.active .ob-step-dot-inner {
  background: var(--biz3, #ede040) !important;
  color: var(--bizInk, #3a3500) !important;
}

body[data-page^="biz"] .ob-toggle-row [data-plan-gate] .ob-pro-badge,
body[data-page^="biz"] .pro-badge {
  background: var(--biz3, #ede040) !important;
  color: var(--bizInk, #3a3500) !important;
}

body[data-page^="biz"] .disc-type-pill.active,
body[data-page^="biz"] [data-cr-type].active {
  border-color: var(--biz2, #f5e84a) !important;
  background: var(--bizSoft, rgba(245,232,74,.12)) !important;
  color: var(--bizInk, #3a3500) !important;
}

body[data-page^="biz"] .upgrade-sheet-check {
  color: var(--bizInk, #3a3500) !important;
  background: var(--bizSoft, rgba(245,232,74,.12)) !important;
  border-radius: 50%;
}

body[data-page="settings"] .btn-biz,
body[data-page="settings"] .settings-save-btn {
  background: var(--biz3, #ede040) !important;
  color: var(--bizInk, #3a3500) !important;
}

body[data-page^="biz"] .pu-browse-link {
  color: var(--bizInk, #3a3500) !important;
  font-weight: 700;
}

[data-swapy-slot][data-swapy-highlighted] {
  outline: 2px dashed var(--biz3, #ede040);
  outline-offset: 4px;
  border-radius: 22px;
  background: rgba(237,224,64,.04);
}
[data-swapy-item][data-swapy-dragging] .vbc-card {
  box-shadow: 0 24px 64px rgba(0,0,0,.2), 0 0 0 2px var(--biz3,#ede040) !important;
  transform: rotate(.7deg) scale(1.02) !important;
}

@media (max-width: 400px) {
  .vbc-name   { font-size: 15px; }
  .vbc-stat-n { font-size: 16px; }
  .vbc-btn    { font-size: 8.5px; padding: 9px 4px; }
  .vbc-emoji  { width: 44px; height: 44px; font-size: 22px; }
  .vbc-body   { padding: 14px 14px 12px; gap: 12px; }
}

.biz-hdr {
  background: var(--bizInk, #3a3500);
  padding: 20px 20px 18px;
  color: #fff;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.biz-hdr::after {
  content: '';
  position: absolute;
  top: -50px; right: -50px;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(237,224,64,.09) 0%, transparent 65%);
  pointer-events: none;
}
@media (max-width: 768px) {
  .biz-hdr { padding: 16px 16px 14px; }
}

.biz-venue-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--white);
  position: sticky;
  top: 0;
  z-index: 40;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .biz-venue-bar { padding: 10px 16px; }
}

.biz-body {
  flex: 1;
  padding: 20px 20px 100px;
  background: var(--bg, #fff);
}
@media (max-width: 768px) {
  .biz-body { padding: 16px 16px 100px; }
}

.biz-page-body {
  flex: 1;
  padding: 20px 20px 100px;
  background: var(--bg, #fff);
}
@media (max-width: 768px) {
  .biz-page-body { padding: 16px 16px 100px; }
}

.bvb-name {
  font-size: 15px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bvb-sub {
  font-size: 11px;
  color: var(--ink4);
  margin-top: 1px;
}
.biz-venue-bar-left { flex: 1; min-width: 0; }
.biz-venue-bar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.biz-hdr .biz-hdr-eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  margin-bottom: 4px;
}
.biz-hdr h1,
.biz-hdr .biz-hdr-title {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.5px;
  color: #fff;
  margin: 0;
  line-height: 1.1;
}
.biz-hdr .biz-hdr-sub {
  font-size: 12px;
  color: rgba(255,255,255,.45);
  margin-top: 4px;
  font-weight: 500;
}

.kpi-section-heading {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,.9);
  margin-bottom: 10px;
  margin: 0 0 10px;
}

.settings-biz-hdr {
  background: var(--bizInk, #3a3500);
  padding: 20px;
  color: #fff;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.settings-biz-hdr::after {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(237,224,64,.08) 0%, transparent 65%);
  pointer-events: none;
}
.settings-biz-hdr .biz-hdr-eyebrow {
  font-size: 10px; font-weight: 800;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(255,255,255,.4); margin-bottom: 4px;
}
.settings-biz-hdr h1 {
  font-size: 20px; font-weight: 900;
  letter-spacing: -.4px; color: #fff; margin: 0;
}
.settings-biz-hdr .biz-hdr-sub {
  font-size: 12px; color: rgba(255,255,255,.45); margin-top: 3px;
}
@media (max-width: 768px) {
  .settings-biz-hdr { padding: 16px; }
  .settings-biz-hdr h1 { font-size: 18px; }
}

/* v=zaa: biz mobile settings header — match the bento-topbar look from /biz/*
   pages so the visual language doesn't break when navigating into Settings. */
@media (max-width: 768px) {
  body[data-page="settings"].user-business .settings-biz-hdr {
    padding: 10px 16px !important;
    background: rgba(250, 246, 232, .92) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-bottom: 1px solid rgba(58,53,0,.06) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
  }
  body[data-page="settings"].user-business .settings-biz-hdr .biz-hdr-eyebrow {
    display: none !important;
  }
  body[data-page="settings"].user-business .settings-biz-hdr h1 {
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: -.3px !important;
    line-height: 1.2 !important;
  }
  body[data-page="settings"].user-business .settings-biz-hdr .biz-hdr-sub {
    display: none !important;
  }
}

/* ── Phase 2 (v=h+1): Settings chrome for biz users ──────────────────── */
body[data-page="settings"].user-business {
  background: #f4f4f6;
}
body[data-page="settings"].user-business .settings-biz-hdr {
  background: transparent;
  color: var(--ink, #1a1a1a);
  padding: 24px 20px 16px;
}
body[data-page="settings"].user-business .settings-biz-hdr::after {
  content: none;
}
body[data-page="settings"].user-business .settings-biz-hdr .biz-hdr-eyebrow {
  color: rgba(20,20,30,.55);
  margin-bottom: 6px;
}
body[data-page="settings"].user-business .settings-biz-hdr h1 {
  color: var(--ink, #1a1a1a);
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -.8px;
}
body[data-page="settings"].user-business .settings-biz-hdr .biz-hdr-sub {
  color: rgba(20,20,30,.72);
  font-size: 14px;
}
body[data-page="settings"].user-business .settings-biz-hdr .biz-only {
  background: rgba(87,0,255,.06) !important;
  border: 1px solid rgba(87,0,255,.2) !important;
  color: var(--violet, #5700ff) !important;
  border-radius: var(--r-pill, 99px) !important;
  padding: 6px 12px !important;
}
body[data-page="settings"].user-business .settings-tab-strip {
  border-bottom: 1px solid rgba(20,20,30,.06) !important;
}
body[data-page="settings"].user-business .settings-section.active {
  background: #fff;
  border-radius: var(--r-md, 14px);
  padding: 20px 20px 60px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  margin: 16px;
  margin-top: 12px;
}
@media (min-width: 769px) {
  body[data-page="settings"].user-business .settings-section.active {
    margin: 16px 28px;
  }
}

.disc-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--white);
  position: sticky;
  top: 0;
  z-index: 40;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .disc-filter-bar { padding: 10px 14px; }
}

.vb-venue-card {

  cursor: default;
}
.vb-venue-card:hover .vb-vc-icon {
  transform: scale(1.08) rotate(-2deg);
  box-shadow: 0 0 0 4px var(--bizSoft, rgba(245,232,74,.15));
}

.vb-vc-cat {
  color: var(--ink4);
  font-size: 11px;
}

.vb-vc-spark {
  margin-left: auto;
}

.vb-sec-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.vb-sec-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink4);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius:var(--r-pill);
  padding: 2px 10px;
}

#biz-offer-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}
@media (max-width: 700px) {
  #biz-offer-cards { grid-template-columns: 1fr; }
}
#biz-offer-cards .offer-card {
  margin-bottom: 0 !important;
  height: 100%;
  display: flex !important;
  flex-direction: column;
}

.oc-dark {
  display: block;
  background: linear-gradient(135deg, var(--bizInk,#3a3500) 0%, #1a1400 100%);
  border-radius: 20px;
  padding: 20px 20px 18px;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(58,53,0,.22);
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow .18s, transform .18s;
}
.oc-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(237,224,64,.13) 0%, transparent 60%);
  pointer-events: none;
}
.oc-dark:hover { box-shadow: 0 10px 36px rgba(58,53,0,.32); transform: translateY(-1px); }
.oc-dark .ob-summary-label  { font-size:10px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--biz3,#ede040);margin-bottom:10px; }
.oc-dark .ob-summary-title  { font-size:22px;font-weight:900;letter-spacing:-.4px;color:#fff;margin-bottom:10px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap; }
.oc-dark .ob-summary-rows   { display:flex;flex-direction:column;gap:5px; }
.oc-dark .ob-summary-row    { display:flex;align-items:flex-start;gap:7px;font-size:13px;color:rgba(255,255,255,.75);line-height:1.4; }
.oc-dark .ob-summary-row svg { flex-shrink:0;margin-top:1px; }
.oc-dark-aed {
  font-size:13px;font-weight:800;
  background:var(--biz3,#ede040);color:var(--bizInk,#3a3500);
  padding:3px 10px;border-radius:var(--r-pill);
  letter-spacing:0;flex-shrink:0;
}
.oc-menu-btn--dark {
  color:rgba(255,255,255,.5) !important;
  background:rgba(255,255,255,.08) !important;
  border:none !important;
}
.oc-menu-btn--dark:hover { background:rgba(255,255,255,.16) !important; color:#fff !important; }

.settings-content-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0;
  min-height: calc(100vh - 80px);
}

.settings-main-col {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  padding: 0;
}
.settings-section {
  display: none;
  padding: 24px 24px 60px;
  max-width: 600px;
}

@media (max-width: 768px) {

  .settings-section { padding: 16px 16px 60px; }
}

body[data-page="settings"] .settings-content-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
body[data-page="settings"] .settings-main-col {
  flex: 1;
  min-width: 0;
}
@media (max-width: 768px) {
  body[data-page="settings"] #page-main { height: auto; overflow: visible; }
  body[data-page="settings"] .settings-main-col { overflow-y: visible; }
}


.settings-tab-strip::-webkit-scrollbar { display: none; }

/* v=20260518gn9 mirror (mobile audit #3) */
@media (max-width: 768px) {
  .settings-tab-strip {
    position: relative;
    display: flex !important;
    gap: 4px;
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 92%, transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 92%, transparent 100%);
  }
  html[dir="rtl"] .settings-tab-strip {
    -webkit-mask-image: linear-gradient(to left, #000 0, #000 92%, transparent 100%);
            mask-image: linear-gradient(to left, #000 0, #000 92%, transparent 100%);
  }
  .settings-tab-strip > .settings-tab-btn {
    scroll-snap-align: start;
    flex-shrink: 0;
  }
}

.settings-tab-btn {
  display: inline-flex;
  align-items: center;
  padding: 11px 14px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink4);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: var(--ff);
  white-space: nowrap;
  transition: color .13s, border-color .13s;
  margin-bottom: -1.5px;
}
.settings-tab-btn:hover { color: var(--ink, #1a1a1a); }
.settings-tab-btn.active,
.settings-tab-btn[aria-selected="true"] {
  /* v=20260518gn61: mirror — see shared.css for full rationale */
  color: var(--violet, #5700ff);
  font-weight: 800;
  border-bottom-color: var(--violet, #5700ff);
}

.settings-content-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.settings-main-col {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}

.settings-section.active { display: block; }

@media (min-width: 769px) {
  .settings-main-col {
    padding: 0 16px;
  }
  .settings-section {
    margin: 0 auto;
    padding: 32px 0 80px;
  }
  .settings-card {
    border: 1px solid var(--border);
    border-radius:var(--r-md);
    padding: 20px 24px;
    margin-bottom: 16px;
    background: var(--white);
  }
  .settings-card + .settings-card { margin-top: 0; }
  .sc-title {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--ink4);
    margin-bottom: 14px;
  }
}

@media (max-width: 768px) {
  
  .settings-section   { padding: 16px 16px 80px; }
}

.biz-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.biz-search-ico {
  position: absolute;
  left: 10px;
  color: var(--ink4);
  pointer-events: none;
  flex-shrink: 0;
}
.biz-search-input {
  width: 100%;
  padding: 8px 12px 8px 32px;
  border: 1.5px solid var(--border);
  border-radius:var(--r-pill);
  font-size: 13px;
  font-family: var(--ff);
  background: var(--white);
  color: var(--ink);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  min-height: 36px;
}
.biz-search-input:focus {
  border-color: var(--biz3, #ede040);
  box-shadow: 0 0 0 3px var(--bizSoft, rgba(245,232,74,.15));
}
.biz-search-input::placeholder { color: var(--ink4); }

.biz-hdr {
  background: var(--bizInk, #3a3500) !important;
  padding: 20px 24px 18px !important;
  color: #fff !important;
  flex-shrink: 0;
}

.aw-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius:var(--r-12);
  padding: 12px 14px;
  transition: border-color .12s;
}
.aw-card:hover { border-color: var(--border2); }
.aw-av {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--violetMid, rgba(87,0,255,.12));
  color: var(--violet);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
  flex-shrink: 0;
}
.aw-info { flex: 1; min-width: 0; }
.aw-name { font-size: 13px; font-weight: 800; color: var(--ink); }
.aw-meta { font-size: 11px; color: var(--ink4); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aw-deadline { font-size: 11px; margin-top: 3px; }

.feed-city-btn.active {
  background: var(--ink) !important;
  color: #fff !important;
  border-color: var(--ink) !important;
}
.feed-city-btn:hover:not(.active) {
  border-color: var(--ink3) !important;
}

.settings-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  margin-bottom: 16px;
}
.sc-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 14px;
  letter-spacing: -.1px;
}

#billing-toggle-monthly.active,
#billing-toggle-annual.active {
  background: var(--biz3, #ede040) !important;
  color: var(--bizInk, #3a3500) !important;
  font-weight: 800;
  border: none !important;
}
#billing-toggle-monthly:not(.active),
#billing-toggle-annual:not(.active) {
  background: var(--bg2) !important;
  color: var(--ink3) !important;
  font-weight: 700;
  border: 1px solid var(--border) !important;
}

.settings-panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 20px;
}
.settings-panel-hdr {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
}
.settings-panel-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.1px;
}
.settings-panel-body {
  padding: 20px;
}

#sr-social-connect-overlay {
  animation: sr-fade-in .2s ease;
}
@keyframes sr-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (max-width: 768px) {
  body[data-page="settings"] #page-main { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 768px) {
  .biz-kpi-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 400px) {
  .biz-kpi-grid { grid-template-columns: 1fr; }
}

.sr-toggle-wrap { display: block; }

@keyframes spin { to { transform: rotate(360deg); } }

#sr-crop-modal { position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center; }
.sr-crop-box { background:#111;border-radius:var(--r-md);padding:0;overflow:hidden;width:min(420px,96vw);box-shadow:0 8px 40px rgba(0,0,0,.5); }
.sr-crop-header { padding:14px 18px;background:#1a1a1a;display:flex;align-items:center;justify-content:space-between; }
.sr-crop-header-title { font-size:14px;font-weight:800;color:#fff; }
.sr-crop-viewport { position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;background:#000;cursor:grab;touch-action:none; }
.sr-crop-viewport:active { cursor:grabbing; }
.sr-crop-viewport img { position:absolute;max-width:none;user-select:none;pointer-events:none; }
.sr-crop-hint { font-size:11px;color:rgba(255,255,255,.5);text-align:center;padding:8px; }
.sr-crop-footer { padding:12px 18px;display:flex;gap:10px;background:#1a1a1a; }

body[data-page="feed"] { background: #f5f3f0; }
body[data-page="feed"] #page-main { background: #f5f3f0; }

body[data-page="feed"] #feed-topbar {
  background: #fff !important;
  border-bottom: 0.5px solid #e8e5e0;
  padding: 12px 16px 0 !important;
}
body[data-page="feed"] #feed-topbar.scrolled { box-shadow: var(--shadow-sm); }

body[data-page="feed"] #feed-title-h { color: #111 !important; }

body[data-page="feed"] #feed-search-btn svg,
body[data-page="feed"] #feed-search-btn { stroke: #333 !important; color: #333 !important; }
body[data-page="feed"] #feed-search-btn { background: #f5f3f0 !important; }

body[data-page="feed"] #feed-plan-chip { background: #f0ebff; border-radius:var(--r-pill); padding: 4px 12px; }
body[data-page="feed"] #feed-plan-chip span:first-child { color: #5700ff !important; }

body[data-page="feed"] #verify-email-banner { background: #5700ff; }

body[data-page="feed"] #feed-search-drawer {
  background: #fff !important;
  border-bottom: 0.5px solid #e8e5e0;
}
body[data-page="feed"] .asb-input {
  background: #f5f3f0 !important;
  border-color: #e0ddd8 !important;
  color: #111 !important;
}
body[data-page="feed"] .asb-input::placeholder { color: #bbb; }
body[data-page="feed"] .asb-icon { color: #bbb !important; }

body[data-page="feed"] .chip-feed {
  background: #fff !important;
  border: 0.5px solid #e5e0da !important;
  color: #666 !important;
  font-size: 13px;
  padding: 7px 16px;
  border-radius:var(--r-pill) !important;
}
body[data-page="feed"] .chip.chip-feed.on,
body[data-page="feed"] .chip-feed.on {
  background: rgba(87,0,255,.12) !important;
  color: #5700ff !important;
  border-color: rgba(87,0,255,.4) !important;
  box-shadow: 0 0 0 2px rgba(87,0,255,.25) !important;  border-radius:var(--r-pill) !important;
}

body[data-page="feed"] #feed-result-count { color: var(--ink4); }
body[data-page="feed"] .feed-count-bar {
  background: #f5f3f0;
  border-bottom: none;
}

body[data-page="feed"] .deals {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 10px 12px 110px !important;
  background: #f5f3f0 !important;
}

body[data-page="feed"] .deals .deal:first-child {
  grid-column: span 2;
}
body[data-page="feed"] .deals .deal:first-child .deal-banner {
  height: 160px !important;
}
.deal-cat-tile { display: none; }
body[data-page="feed"] .deals .deal:first-child .deal-body {
  padding: 14px 16px !important;
}

body[data-page="feed"] .deal {
  display: flex !important; flex-direction: column !important;
  background: #fff !important;
  border: 0.5px solid #ece9e4 !important;
  border-radius: var(--card-radius,16px) !important;
  box-shadow: none !important;
}
body[data-page="feed"] .deal:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-md) !important;
}
body[data-page="feed"] .deal-banner {
  height: 110px !important;
  border-radius: 0 !important;
}
body[data-page="feed"] .deal-body {
  padding: 10px 12px 12px !important;
}

body[data-page="feed"] .deal:not(:first-child) .deal-venue-name {
  font-size: 13px !important;
}

body[data-page="feed"] .claim-btn {
  background: #5700ff !important;
  color: #fff !important;
  border-radius:var(--r-12) !important;
  font-size: 12px !important;
  padding: 9px 12px !important;
}
body[data-page="feed"] .deal:first-child .claim-btn {
  padding: 10px 18px !important;
  font-size: 13px !important;
}

body[data-page="feed"] .deal-req-pill {
  background: #f0ebff;
  color: #5700ff;
  border-radius:var(--r-pill);
  font-size: 9px;
  font-weight: 700;
  padding: 3px 8px;
}

body[data-page="feed"] .d-badge.db-violet {
  background: #5700ff !important;
  color: #fff !important;
}
body[data-page="feed"] .d-badge.db-yellow {
  background: #ede040 !important;
  color: #2a1f00 !important;
}

body[data-page="feed"] #chip-saved-btn.on {
  background: #5700ff !important;
  color: #fff !important;
  border-color: #5700ff !important;
}

body[data-page="feed"] #feed-av-link {
  background: #f0ebff !important;
  color: #5700ff !important;
}
body[data-page="feed"] #feed-av-initials { color: #5700ff !important; }
body[data-page="feed"] a[href="/notifications/"][aria-label="Notifications"] {
  background: #f0ebff !important;
}
body[data-page="feed"] a[href="/notifications/"] svg { stroke: #5700ff !important; }

body[data-page="feed"] details summary { color: #bbb !important; }

body[data-page="feed"] .sr-skel { background: #ece9e4 !important; }
body[data-page="feed"] .sr-skel-card { background: #f5f3f0 !important; }

body[data-page="feed"] .bottom-nav {
  background: #fff !important;
  border-top: 0.5px solid #ece9e4 !important;
}

body[data-page="feed"] .feed-search-embedded {
  padding: 0 16px 10px;
  background: #fff;
}
body[data-page="feed"] .feed-search-embedded .asb-input {
  background: #f5f3f0 !important;
  border-radius:var(--r-md) !important;
  border: 0.5px solid #e0ddd8 !important;
}

body[data-page="deal"] #nav,
body[data-page="login"] #nav,
body[data-page="onboard"] #nav,
body[data-page="onboard/business"] #nav,
body[data-page="welcome"] #nav,
body[data-page="success"] #nav {
  display: none !important;
}

body[data-page="feed"] .mob-menu,
body[data-page="claims"] .mob-menu,
body[data-page="profile"] .mob-menu,
body[data-page="notifications"] .mob-menu {
  display: none !important;
}

body[data-page="feed"] #page-main,
body[data-page="claims"] #page-main,
body[data-page="profile"] #page-main,
body[data-page="notifications"] #page-main,
body[data-page="settings"] #page-main {
  padding-top: var(--nav, 68px) !important;
  margin-top: 0 !important;
}

/* v=20260518gn42: kill the dead 62-68px gap at the top of /settings/ for biz
   users. See shared.css for the full rationale — short version: the rule
   above reserves space for the fixed #nav, but biz users have #nav hidden,
   so that space becomes a dead gap above the bento hero header. */
body[data-page="settings"].user-business #page-main,
body[data-page="settings"].is-biz #page-main {
  padding-top: 0 !important;
}

body[data-page="feed"] .feed-count-bar,
body[data-page="feed"] #feed-result-count {
  display: none !important;
}

@media (min-width: 769px) {
  body[data-page="feed"] #page-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
  }

  body[data-page="feed"] #feed-topbar {
    background: #fff !important;
    border-bottom: 0.5px solid #e8e5e0;
    padding: 16px 48px 0 !important;
    position: sticky;
    top: 0;
    z-index: 200;
  }

  body[data-page="feed"] .chips {
    padding: 0 48px 12px !important;
    margin: 0 !important;
  }

  body[data-page="feed"] .feed-count-bar { display: none !important; }

  @media (min-width: 769px) {

  body[data-page="feed"] .deals {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 12px !important;
    padding: 16px 48px 80px !important;
    max-width: 1200px;
    margin: 0 auto;
  }

  body[data-page="feed"] .deals .deal:first-child {
    grid-column: span 3;
  }
  body[data-page="feed"] .deals .deal:first-child .deal-banner {
    height: 220px !important;
  }
  body[data-page="feed"] .deals .deal:first-child .deal-body {
    padding: 16px 20px !important;
  }

  body[data-page="feed"] .deal:not(:first-child) .deal-banner {
    height: 140px !important;
  }

  body[data-page="feed"] .bottom-nav { display: none !important; }
}
/* v=zn CRITICAL FIX: this closing brace closes @media (min-width: 769px)
   opened at line 6577. Without it, every rule below (~6700 lines including
   bento layout, oc-carousel, biz-sidebar, profile/settings) was silently
   wrapped inside the desktop media query → invisible on iPhone. Found via
   stack-based brace audit (zn cycle). DO NOT REMOVE. */
}

@media (min-width: 769px) {
  body[data-page="claims"] .bottom-nav  { display: none !important; }
  body[data-page="claims"] #page-main   { max-width: 1200px; margin: 0 auto; padding: 0; }
}

@media (min-width: 769px) {
  body[data-page="profile"] .bottom-nav { display: none !important; }
  body[data-page="profile"] #page-main  { max-width: 1200px; margin: 0 auto; padding: 0; }
}

@media (min-width: 769px) {
  body[data-page="notifications"] .bottom-nav { display: none !important; }
  body[data-page="notifications"] #page-main  { max-width: 700px; margin: 0 auto; padding: 32px 24px 80px; }
}

body[data-page="deal"] .inner-nav {
  top: 0 !important;
}
body[data-page="deal"] #nav { display: none !important; }
body[data-page="deal"] .mob-menu { display: none !important; }
body[data-page="deal"] #page-main { padding-top: 0 !important; margin-top: 0 !important; padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important; }

@media (min-width: 769px) {

  body[data-page="settings"] .bottom-nav,
  body[data-page="settings"] .mob-menu { display: none !important; }

  /* v=zag: settings .biz-main-content width/padding constraint REMOVED so it
     matches sibling biz pages (content/scan/discovery/today/venue). */

  body[data-page="settings"] .settings-biz-hdr {
    margin-bottom: 0;
    padding: 12px 20px 10px;
  }

  /* v=20260518gn10: kill dead grey gap above settings header on desktop (see shared.css). */
  body[data-page="settings"] .settings-bento-hdr.bento-hero-inner {
    padding-top: 16px !important;
    padding-bottom: 8px !important;
  }

  body[data-page="settings"] .st-layout-body {
    display: grid;
    grid-template-columns: 192px 1fr;
    gap: 20px;
    align-items: start;
    width: 100%;
    /* v=zag: match bento-wrap horizontal alignment so tab content sits in
       the same column as the .bento-hero-inner header above. */
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 28px 80px;
    box-sizing: border-box;
  }
  body[data-page="settings"].user-business .st-layout-body,
  body[data-page="settings"].is-biz .st-layout-body {
    grid-template-columns: 1fr;
  }

  body[data-page="settings"] .settings-content-wrap {
    min-width: 0;
  }
  body[data-page="settings"] .inner-nav#settings-inner-nav {
    display: none !important;
  }
  body[data-page="settings"] .settings-main-col {
    padding: 0 !important;
    margin: 0 !important;
  }


  body[data-page="settings"] .settings-section > * {
    padding-left: 20px;
    padding-right: 20px;
  }

  body[data-page="settings"] .settings-card {
    border-radius:var(--r-md);
    border: 0.5px solid #e8e5e0;
    overflow: hidden;
    background: #fff;
    margin-bottom: 12px;
  }

  body[data-page="settings"] .st-section-head {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
    color: var(--ink4);
    
    border-bottom: 0.5px solid #f0ede8;
    margin: 0;
    display: block;
  }

  body[data-page="settings"] .settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 20px;
    border-bottom: 0.5px solid #f5f3f0;
  }
  body[data-page="settings"] .settings-row:last-child { border-bottom: none; }

  body[data-page="settings"] .ob-field input:not(#sr-phone-number),
  body[data-page="settings"] .ob-field textarea,
  body[data-page="settings"] .ob-field select {
    max-width: 400px;
  }

  body[data-page="settings"] .settings-signout-section {
    border-top: 0.5px solid #f0ede8;
    padding: 12px 20px;
  }
}

body[data-page="feed"] .bottom-nav,
body[data-page="claims"] .bottom-nav,
body[data-page="profile"] .bottom-nav,
body[data-page="notifications"] .bottom-nav,
body[data-page="deal"] .bottom-nav {
  display: flex !important;
}
@media (min-width: 769px) {
  body[data-page="feed"] .bottom-nav,
  body[data-page="claims"] .bottom-nav,
  body[data-page="profile"] .bottom-nav,
  body[data-page="notifications"] .bottom-nav,
  body[data-page="deal"] .bottom-nav {
    display: none !important;
  }
}

@media (min-width: 769px) {
  body[data-page="feed"] .deals .deal:first-child {
    grid-column: span 3 !important;
  }
  body[data-page="feed"] .deals .deal:first-child .deal-banner {
    height: 240px !important;
  }
  body[data-page="feed"] .deals .deal:first-child .deal-body {
    padding: 20px 24px !important;
  }
  body[data-page="feed"] .deals .deal:first-child .deal-venue-name {
    font-size: 18px !important;
  }
  body[data-page="feed"] .deals .deal:first-child .claim-btn {
    padding: 12px 24px !important;
    font-size: 14px !important;
  }
}

:root {
  --surface:    #f5f3f0;
  --card-bg:    #ffffff;
  --card-border:0.5px solid #e8e5e0;
  --card-radius:16px;
  --vi:         #5700ff;
  --vi-s:       #f0ebff;
  --biz-s:      rgba(250,239,124,.18);
}

body[data-page="feed"] #page-main,
body[data-page="claims"] #page-main,
body[data-page="profile"] #page-main,
body[data-page="notifications"] #page-main,
body[data-page="deal"] #page-main {
  background: #f5f3f0;
}

.auth-brand {
  background: #111 !important;
  padding: 56px 52px !important;
}
.auth-brand::before {
  background: radial-gradient(ellipse 70% 50% at 30% 40%, rgba(87,0,255,.2) 0%, transparent 70%) !important;
}
.auth-brand-logo {
  font-size: 20px !important;
  font-weight: 900 !important;
  letter-spacing: -.5px !important;
  color: #fff !important;
  margin-bottom: 40px !important;
}
.auth-brand-logo span { color: #5700ff !important; }
.auth-brand-h {
  font-size: clamp(30px, 3.2vw, 48px) !important;
  font-weight: 900 !important;
  letter-spacing: -1.5px !important;
  line-height: 1 !important;
  color: #fff !important;
  margin-bottom: 14px !important;
}
.auth-brand-accent { color: #faef7c !important; }
.auth-brand-sub {
  font-size: 14px !important;
  color: rgba(255,255,255,.5) !important;
  line-height: 1.6 !important;
  max-width: 320px !important;
}
.auth-proof-pill {
  background: rgba(255,255,255,.08) !important;
  border: 0.5px solid rgba(255,255,255,.12) !important;
  border-radius:var(--r-pill) !important;
  padding: 5px 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,.7) !important;
}
.auth-bullet { color: rgba(255,255,255,.6) !important; font-size: 13px !important; }
.auth-form-wrap {
  background: #fff !important;
  padding: 48px 44px !important;
}
.auth-form-inner { max-width: 380px !important; width: 100% !important; }

.ob-topbar {
  background: #fff !important;
  border-bottom: 0.5px solid #e8e5e0 !important;
  height: 58px !important;
}
.ob-topbar-logo { color: #111 !important; font-weight: 900 !important; }
.ob-topbar-logo span { color: #5700ff !important; }
.ob-progress-bar {
  background: #f0ede8 !important;
  height: 3px !important;
  border-radius: 0 !important;
}
.ob-progress-fill {
  background: #5700ff !important;
  border-radius: 0 !important;
  transition: width .4s cubic-bezier(.4,0,.2,1) !important;
}
.ob-stage {
  background: #f5f3f0 !important;
  min-height: calc(100vh - 58px) !important;
}
.ob-question {
  background: #fff !important;
  border-radius: 20px !important;
  border: 0.5px solid #e8e5e0 !important;
  padding: 32px !important;
  max-width: 520px !important;
  margin: 0 auto !important;
}
.ob-q-title {
  font-size: 20px !important;
  font-weight: 900 !important;
  color: #111 !important;
  letter-spacing: -.4px !important;
}
.ob-q-hint {
  font-size: 13px !important;
  color: #606060 !important;
  margin-top: 4px !important;
}
.ob-role-tile {
  background: #fff !important;
  border: 0.5px solid #e8e5e0 !important;
  border-radius:var(--r-md) !important;
  transition: border-color .15s, transform .15s !important;
}
.ob-role-tile:hover {
  border-color: #5700ff !important;
  transform: translateY(-1px) !important;
}
.ob-role-tile.selected {
  border: 2px solid #5700ff !important;
  background: #f0ebff !important;
}
/* FIX: biz tile must override the generic selected rule above. Both rules
   use !important, so this one wins by being more specific AND coming later.
   Without this, clicking Business produced the generic purple fill instead
   of the biz yellow. Inline <style> in onboard/index.html lost to the
   !important in this file. */
.ob-role-tile.biz.selected {
  border: 2px solid #ede040 !important;
  background: #fefde8 !important;
  box-shadow: 0 0 0 4px rgba(237,224,64,.25) !important;
}
/* v=20260518gn9: larger tile variant for the dedicated role-choice step */
.ob-role-tile-large {
  padding: 22px 18px !important;
  text-align: center !important;
  cursor: pointer !important;
  min-height: 140px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
}
.ob-role-tile-large .ob-role-icon { font-size: 32px !important; margin-bottom: 6px !important; }
.ob-role-tile-large .ob-role-name { font-size: 17px !important; font-weight: 800 !important; color: var(--ink, #1a1a1a) !important; margin-bottom: 4px !important; }
.ob-role-tile-large .ob-role-desc { font-size: 12.5px !important; font-weight: 500 !important; color: var(--ink3, #555) !important; line-height: 1.4 !important; }
.ob-role-grid-large { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
@media (max-width: 380px) {
  .ob-role-grid-large { grid-template-columns: 1fr !important; }
  .ob-role-tile-large {
    min-height: 100px !important; flex-direction: row !important; text-align: left !important;
    justify-content: flex-start !important; gap: 16px !important; padding: 18px 16px !important;
  }
  .ob-role-tile-large .ob-role-icon { margin-bottom: 0 !important; font-size: 28px !important; flex-shrink: 0 !important; }
}
.ob-next-btn-full { width: 100% !important; }
.ob-back-btn {
  color: #5700ff !important;
  font-weight: 700 !important;
}

.pp-hero {
  background: #f5f3f0 !important;
  padding: 64px 48px 48px !important;
}
.pp-hero-inner { max-width: 1100px !important; margin: 0 auto !important; }
.pp-eyebrow {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #5700ff !important;
}
.pp-h1 {
  font-size: clamp(32px, 4vw, 52px) !important;
  font-weight: 900 !important;
  letter-spacing: -1.5px !important;
  color: #111 !important;
  line-height: 1.05 !important;
  margin: 10px 0 12px !important;
}
.pp-sub {
  font-size: 16px !important;
  color: #606060 !important;
  max-width: 480px !important;
  line-height: 1.6 !important;
}

.pp-plan-card {
  background: #fff !important;
  border: 0.5px solid #e8e5e0 !important;
  border-radius: 20px !important;
  padding: 28px !important;
  transition: box-shadow .2s !important;
}
.pp-plan-card:hover {
  box-shadow: 0 4px 24px rgba(87,0,255,.06) !important;
}
.pp-plan-card.pp-featured {
  border: 2px solid #5700ff !important;
}
.pp-plan-name {
  font-size: 17px !important;
  font-weight: 900 !important;
  letter-spacing: -.4px !important;
  color: #111 !important;
}
.pp-plan-price {
  font-size: 36px !important;
  font-weight: 900 !important;
  letter-spacing: -1px !important;
  color: #111 !important;
}

.creator-hdr {
  background: #fff !important;
  border-bottom: 0.5px solid #e8e5e0 !important;
  color: #111 !important;
  padding: 16px 20px 0 !important;
}
.creator-hdr-label {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #5700ff !important;
}

.creator-hdr-bell {
  background: #f0ebff !important;
  border-radius: 50% !important;
}

.creator-stat-n { color: #111 !important; }
.creator-stat-l { color: #606060 !important; }

.creator-hdr-stats {
  border-top: 0.5px solid #f0ede8 !important;
  margin-top: 14px !important;
}

.prof-av-lg {
  border: 2.5px solid #5700ff !important;
  background: #5700ff !important;
  color: #fff !important;
}

.claims-tabs, .oc-tabs {
  background: #fff !important;
  border-bottom: 0.5px solid #e8e5e0 !important;
}
.oc-tab {
  color: var(--ink4, #606060) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  border-bottom: 2px solid transparent !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  border-radius: 0 !important;
  transition: color .15s !important;
}

.oc-tab.oc-tab-active, .oc-tab.on {
  color: #5700ff !important;
  border-bottom-color: #5700ff !important;
  background: transparent !important;
  font-weight: 700 !important;
}

.claim-card {
  background: #fff !important;
  border: 0.5px solid #e8e5e0 !important;
  border-radius:var(--r-md) !important;
  transition: border-color .15s !important;
}

.monthly-bar-fill { background: #5700ff !important; }

body[data-page="notifications"] {
  background: #f5f3f0 !important;
}

.ni-row {
  background: #fff !important;
  border: 0.5px solid #e8e5e0 !important;
  border-radius:var(--r-md) !important;
  margin-bottom: 6px !important;
  transition: border-color .15s !important;
}
.ni-row.ni-unread {
  border-color: #d4b8ff !important;
  background: #fff !important;
}
.ni-ico {
  border-radius:var(--r-sm) !important;
}
.ni-title { color: #111 !important; font-weight: 800 !important; }
.ni-sub   { color: #555 !important; }
.ni-time  { color: #606060 !important; font-weight: 600 !important; }

.deal-hero {
  background-color: #e8e0ff !important;
  min-height: 220px !important;
}
.deal-hero-badge {
  background: var(--violet, #5700ff) !important;
  border-radius: 6px !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: .5px !important;
  padding: 4px 8px !important;
}
.deal-body-wrap {
  background: #f5f3f0 !important;
  padding: 24px 20px !important;
}
.venue-row {
  background: #fff !important;
  border: 0.5px solid #e8e5e0 !important;
  border-radius:var(--r-md) !important;
  padding: 16px !important;
  margin-bottom: 16px !important;
}
.venue-av {
  background: #5700ff !important;
  border-radius:var(--r-12) !important;
  color: #fff !important;
  font-weight: 900 !important;
}
.venue-name { color: #111 !important; font-weight: 900 !important; }
.venue-cat  { color: #606060 !important; }
.detail-section {
  background: #fff !important;
  border: 0.5px solid #e8e5e0 !important;
  border-radius:var(--r-md) !important;
  padding: 16px !important;
  margin-bottom: 12px !important;
}
.ds-label {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  color: #606060 !important;
  margin-bottom: 10px !important;
  display: block !important;
}
.offer-value-text {
  border-radius:var(--r-12) !important;
  border-color: #fef08a !important;
}
.info-tile {
  background: #f9f8f6 !important;
  border: 0.5px solid #e8e5e0 !important;
  border-radius:var(--r-sm) !important;
}
.it-lbl { color: #606060 !important; font-size: 11px !important; font-weight: 700 !important; }
.it-val { color: #111 !important; font-weight: 800 !important; }
.req-pills .req-pill,
[class*="req-pill"] {
  background: #f0ebff !important;
  color: #5700ff !important;
  border-radius:var(--r-pill) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
.claim-bar {
  background: #fff !important;
  border-top: 0.5px solid #e8e5e0 !important;
  padding: 12px 20px !important;
}
.inner-nav {
  background: #fff !important;
  border-bottom: 0.5px solid #e8e5e0 !important;
}

#feed-topbar {
  background: #fff !important;
  border-bottom: 0.5px solid #e8e5e0 !important;
}
.chips {
  background: #fff !important;
  padding: 10px 20px 12px !important;
  border-bottom: 0.5px solid #f0ede8 !important;
}
.chip {
  background: #fff !important;
  border: 0.5px solid #e5e0da !important;
  color: #555 !important;
  border-radius:var(--r-sm) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  padding: 6px 14px !important;
  transition: all .15s !important;
}

.deals {
  background: #f5f3f0 !important;
  padding: 12px 16px 100px !important;
  gap: 10px !important;
}
.deal {
  background: #fff !important;
  border: 0.5px solid #e8e5e0 !important;
  border-radius: var(--card-radius,16px) !important;
  overflow: hidden !important;
  box-shadow: none !important;
  transition: border-color .15s, transform .15s !important;
}
.deal:hover {
  border-color: #d4b8ff !important;
  transform: translateY(-1px) !important;
}
.deal-body { padding: 12px 14px 14px !important; }
.deal-venue-name { font-weight: 900 !important; color: #111 !important; }

.bottom-nav {
  background: #fff !important;
  border-top: 0.5px solid #e8e5e0 !important;
  box-shadow: 0 -1px 0 rgba(0,0,0,.04) !important;
}
.bn-item {
  color: #aaa !important;
  opacity: 1 !important;
}
.bn-item.on .bn-ico svg,
.bn-item.on svg { stroke: #5700ff !important; }
.bn-item.on .bn-lbl { color: #5700ff !important; font-weight: 700 !important; }
.bn-lbl { color: #aaa !important; font-size: 10px !important; font-weight: 600 !important; }

.biz-sidebar {
  background: #fff !important;
  border-right: 0.5px solid #e8e5e0 !important;
}
.biz-sidebar-logo {
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: -.5px !important;
  color: #111 !important;
  padding: 20px 20px 4px !important;
}
.biz-sidebar-logo span { color: #5700ff !important; }

.biz-sidebar-venue {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #3a3500 !important;
  background: #faef7c !important;
  border-radius:var(--r-8) !important;
  padding: 6px 12px !important;
  margin: 0 12px 16px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
}

.biz-nav-item {
  color: #555 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius:var(--r-sm) !important;
  transition: background .12s !important;
}
.biz-nav-item:hover { background: #f5f3f0 !important; }
.biz-nav-item.biz-nav-active {
  background: rgba(87,0,255,.06) !important;
  color: #3a3500 !important;
  font-weight: 700 !important;
  border-left: 3px solid #5700ff !important;
  padding-left: 13px !important;
}
.biz-nav-item.biz-nav-active svg { stroke: #3a3500 !important; }
.biz-nav-item svg { stroke: currentColor !important; }

.biz-sidebar-bottom {
  border-top: 0.5px solid #e8e5e0 !important;
  padding: 12px !important;
}
.biz-sidebar-cmd-hint {
  font-size: 11px !important;
  color: #606060 !important;
  background: #f5f3f0 !important;
  border: 0.5px solid #e8e5e0 !important;
  border-radius:var(--r-8) !important;
}

.biz-main-content { background: #f5f3f0 !important; }

.biz-hdr {
  background: #111 !important;
  border-radius: 0 !important;
  padding: 24px 24px 20px !important;
}
.biz-disc-hdr { background: #111 !important; }
.biz-hdr-eyebrow {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #faef7c !important;
  opacity: 1 !important;
}
.biz-hdr-title {
  font-size: 22px !important;
  font-weight: 900 !important;
  letter-spacing: -.5px !important;
  color: #fff !important;
}
.biz-hdr-sub {
  font-size: 13px !important;
  color: rgba(255,255,255,.5) !important;
  margin-top: 4px !important;
}

.stat-card, .biz-kpi-card, [class*="kpi-card"] {
  background: #fff !important;
  border: 0.5px solid #e8e5e0 !important;
  border-radius:var(--r-md) !important;
  padding: 16px !important;
}

.biz-card, .biz-venue-card, .ob-biz-step {
  background: #fff !important;
  border: 0.5px solid #e8e5e0 !important;
  border-radius:var(--r-md) !important;
}

.btn-biz, .biz-cta-btn,
[class*="btn-biz"],
.biz-nav-item.biz-cta {
  background: #faef7c !important;
  color: #3a3500 !important;
  font-weight: 800 !important;
  border: none !important;
}
.btn-biz:hover { background: #f5e84a !important; }

.creator-card, .app-card, .discovery-card {
  background: #fff !important;
  border: 0.5px solid #e8e5e0 !important;
  border-radius:var(--r-md) !important;
  transition: border-color .15s !important;
}
.creator-card:hover, .app-card:hover { border-color: #faef7c !important; }

.ob-field label { color: var(--ink4, #606060) !important; letter-spacing: 1.2px !important; font-weight: 800 !important; font-size: 10px !important; }
.ob-input {
  background: #f9f8f6 !important;
  border: 0.5px solid #e8e5e0 !important;
  border-radius:var(--r-sm) !important;
  color: #111 !important;
  font-size: 13px !important;
  transition: border-color .15s !important;
}
.ob-input:focus {
  border-color: #5700ff !important;
  outline: none !important;
  background: #fff !important;
}
.ob-input::placeholder { color: #aaa !important; }

body[data-page="settings"] .biz-main-content { background: #f5f3f0 !important; }
body[data-page="settings"] .settings-card {
  background: #fff !important;
  border: 0.5px solid #e8e5e0 !important;
  border-radius:var(--r-md) !important;
  overflow: hidden !important;
}
body[data-page="settings"] .st-section-head {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #111 !important;
  padding: 14px 20px 12px !important;
  border-bottom: 0.5px solid #f0ede8 !important;
}
body[data-page="settings"] .settings-row {
  border-bottom: 0.5px solid #f9f7f5 !important;
  padding: 12px 20px !important;
}
body[data-page="settings"] .settings-row:last-child { border-bottom: none !important; }
body[data-page="settings"] .sr-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #111 !important;
}
body[data-page="settings"] .sr-desc {
  font-size: 12px !important;
  color: #606060 !important;
  margin-top: 2px !important;
}

.btn-violet, .btn.btn-violet {
  background: #5700ff !important;
  color: #fff !important;
  border: none !important;
  border-radius:var(--r-12) !important;
  font-weight: 800 !important;
  font-family: var(--ff) !important;
}
.btn-outline, .btn.btn-outline {
  background: transparent !important;
  border: 0.5px solid #e8e5e0 !important;
  color: #555 !important;
  border-radius:var(--r-12) !important;
}
.btn-ghost, .btn.btn-ghost {
  background: transparent !important;
  border: none !important;
  color: #5700ff !important;
  font-weight: 700 !important;
}
.btn-sm { padding: 6px 14px !important; font-size: 12px !important; border-radius:var(--r-sm) !important; }
.btn-md { padding: 10px 20px !important; font-size: 14px !important; border-radius:var(--r-12) !important; }
.btn-lg { padding: 14px 28px !important; font-size: 15px !important; border-radius:var(--r-md) !important; }

.badge-green   { background: #dcfce7 !important; color: #15803d !important; border-radius:var(--r-pill) !important; }
.badge-yellow  { background: var(--yellow,#faef7c) !important; color: var(--yellowInk,#3a3500) !important; border-radius:var(--r-pill) !important; }
.badge-violet  { background: #f0ebff !important; color: #5700ff !important; border-radius:var(--r-pill) !important; }
.badge-grey    { background: #f5f3f0 !important; color: #606060 !important; border-radius:var(--r-pill) !important; }
.badge-red     { background: #fee2e2 !important; color: #991b1b !important; border-radius:var(--r-pill) !important; }
/* v=20260517w AUDIT-NOTE rejected-vs-expired: coral and amber were NOT in the
   !important set above, so the design-system pass missed them. Now included
   so rejected (coral) is visually unambiguous next to expired (grey). */
.badge-coral   { background: #fee2e2 !important; color: #b91c1c !important; border-radius:var(--r-pill) !important; }
.badge-amber   { background: #fef3c7 !important; color: #92400e !important; border-radius:var(--r-pill) !important; }

.sr-toast {
  /* v=20260518gn9 (audit P1): removed background/color !important overrides.
     They were beating the .sr-toast.sr-toast-success/error/info variants
     by virtue of !important, leaving all toasts black regardless of
     severity. The variant rules (lines ~4876-4878 above) have higher
     specificity (.sr-toast.sr-toast-X is 2-class) and now correctly
     paint over the single-class default. Other !importants in this
     block (radius, font, shadow) don't conflict and stay. */
  border-radius:var(--r-md) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: var(--shadow-lg) !important;
}

.claim-confirm-box, .ccb-box, .sr-sheet-inner {
  background: #fff !important;
  border-radius: 24px !important;
  border: 0.5px solid #e8e5e0 !important;
}
.claim-confirm-overlay, .sr-upgrade-sheet {
  backdrop-filter: blur(4px) !important;
}

body[data-page="success"] #page-main,
body[data-page="welcome"] #page-main {
  background: #f5f3f0 !important;
}

.sr-confirm-box {
  background: var(--white,#fff) !important;
  border-radius: 20px !important;
  border: 0.5px solid var(--border,#e8e5e0) !important;
}
.sr-confirm-overlay { backdrop-filter: blur(4px) !important; }

#sr-creator-upgrade-sheet [class*="sheet-inner"],
#sr-creator-upgrade-sheet > div > div {
  background: #fff !important;
  border-radius: 24px 24px 0 0 !important;
}

.sr-cmd-palette-wrap, .sr-cmdp-inner {
  background: #fff !important;
  border: 0.5px solid #e8e5e0 !important;
  border-radius: 20px !important;
}
.sr-cmdp-input {
  background: #f9f8f6 !important;
  border-bottom: 0.5px solid #e8e5e0 !important;
}
.sr-cmdp-item:hover { background: #f0ebff !important; }
.sr-cmdp-item-active { background: #f0ebff !important; color: #5700ff !important; }

.sr-page-loader { background: rgba(245,243,240,.92) !important; }
.sr-loader-spin { border-top-color: #5700ff !important; }
.sr-loader-text { color: #555 !important; font-size: 13px !important; font-weight: 600 !important; }

/* v=20260518gn9: scan page dark-bg override removed to match biz design language */
.scan-viewport {
  border: 3px solid #faef7c !important;
  border-radius: 20px !important;
}

.sr-drawer {
  background: #fff !important;
  border-radius: 24px 24px 0 0 !important;
}
.sr-drawer-handle {
  background: #e0ddd8 !important;
  border-radius:var(--r-pill) !important;
}

#feed-topbar {
  background: #fff !important;
  border-bottom: 0.5px solid #e8e5e0 !important;
  padding: 14px 16px 0 !important;
}
#feed-topbar * { color: inherit; }

#feed-title-h {
  font-size: 20px !important;
  font-weight: 900 !important;
  color: #111 !important;
  letter-spacing: -.4px !important;
  line-height: 1.2 !important;
}

#feed-plan-chip {
  background: #f0ebff !important;
  border-radius:var(--r-sm) !important;
  padding: 7px 12px !important;
  margin-bottom: 10px !important;
  margin-top: 4px !important;
}
#feed-plan-chip span { color: #5700ff !important; font-weight: 700 !important; }

.chips {
  background: #fff !important;
  border-bottom: 0.5px solid #f0ede8 !important;
  gap: 7px !important;
  padding: 10px 16px 12px !important;
  scrollbar-width: none !important;
}
.chips::-webkit-scrollbar { display: none !important; }
.chip {
  background: #fff !important;
  border: 0.5px solid #e5e0da !important;
  border-radius:var(--r-sm) !important;
  color: #555 !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  padding: 6px 14px !important;
  transition: all .15s !important;
  white-space: nowrap !important;
}
.chip:hover { border-color: #5700ff !important; color: #5700ff !important; }
.chip.on, .chip[aria-pressed="true"] {
  background: #5700ff !important;
  color: #fff !important;
  border-color: #5700ff !important;
}

#feed-search-drawer {
  background: #fff !important;
  border-bottom: 0.5px solid #e8e5e0 !important;
}
.asb-input {
  background: #f9f8f6 !important;
  color: #111 !important;
  border-color: #e8e5e0 !important;
  border-radius:var(--r-12) !important;
}
.asb-input::placeholder { color: #aaa !important; }
.asb-dropdown { background: #fff !important; border-color: #e8e5e0 !important; }

.deals {
  background: #f5f3f0 !important;
  gap: 10px !important;
  padding: 12px 14px 110px !important;
}

.deal {
  background: #fff !important;
  border: 0.5px solid #e8e5e0 !important;
  border-radius: var(--card-radius,16px) !important;
  box-shadow: none !important;
  transition: border-color .15s, transform .15s !important;
}
.deal:hover {
  border-color: #d4b8ff !important;
  transform: translateY(-1px) !important;
  box-shadow: none !important;
}
.deal-banner { border-radius: 0 !important; }
.deal-body {
  padding: 12px 14px 14px !important;
  background: #fff !important;
}
.d-badge {
  border-radius: 6px !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: .6px !important;
  padding: 3px 8px !important;
}

.deal-venue-name {
  font-size: 14px !important;
  font-weight: 900 !important;
  color: #111 !important;
  letter-spacing: -.3px !important;
}

.deal-body [style*="color:#5700ff"],
.deal-body [style*="color:var(--violet)"] {
  color: #5700ff !important;
  font-weight: 800 !important;
}

.sr-skel-card { background: #fff !important; border-radius: 18px !important; border: 0.5px solid #e8e5e0 !important; }
.sr-skel { background: #f0ede8 !important; }

#feed-load-more-wrap button {
  background: #5700ff !important;
  color: #fff !important;
  border-radius:var(--r-md) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  padding: 12px 32px !important;
  border: none !important;
}

.creator-hdr {
  background: #fff !important;
  color: #111 !important;
  border-bottom: 0.5px solid #e8e5e0 !important;
  padding: 16px 20px 0 !important;
}
.creator-hdr-label {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #5700ff !important;
  margin-bottom: 2px !important;
}
.creator-hdr-title {
  font-size: 20px !important;
  font-weight: 900 !important;
  color: #111 !important;
  letter-spacing: -.4px !important;
}
.creator-hdr-bell {
  background: #f0ebff !important;
  border-radius: 50% !important;
  width: 44px !important; height: 44px !important;
}
.creator-hdr-bell svg { stroke: #5700ff !important; }
.creator-hdr-stats {
  display: flex !important;
  flex-wrap: nowrap !important;
  border-top: 0.5px solid #f0ede8 !important;
  margin: 14px 0 0 !important;
  padding: 0 !important;
}
.creator-hdr-stats > div {
  padding: 12px 0 !important;
  text-align: center !important;
  border-right: 0.5px solid #f0ede8 !important;
}
.creator-hdr-stats > div:last-child { border-right: none !important; }
.creator-stat-n {
  font-size: 20px !important;
  font-weight: 900 !important;
  color: #111 !important;
  letter-spacing: -.5px !important;
}
.creator-stat-l {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: #606060 !important;
  text-transform: none !important;
  letter-spacing: .3px !important;
  margin-top: 2px !important;
}

.claims-tabs {
  background: #fff !important;
  border-bottom: 0.5px solid #e8e5e0 !important;
  display: flex !important;
  gap: 0 !important;
  padding: 0 20px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
.claims-tabs::-webkit-scrollbar { display: none !important; }
.oc-tab {
  flex-shrink: 0 !important;
  padding: 10px 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ink4, #606060) !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: color .15s !important;
  white-space: nowrap !important;
}
.oc-tab:hover { color: #111 !important; }
.oc-tab.oc-tab-active, .oc-tab.on {
  color: #5700ff !important;
  border-bottom-color: #5700ff !important;
  font-weight: 800 !important;
  background: transparent !important;
}

#claims-monthly-usage {
  padding: 12px 20px !important;
  background: #fff !important;
  border-bottom: 0.5px solid #f0ede8 !important;
}

.claim-card {
  background: #fff !important;
  border: 0.5px solid #e8e5e0 !important;
  border-radius:var(--r-md) !important;
  box-shadow: none !important;
  overflow: hidden !important;
  margin-bottom: 8px !important;
  cursor: pointer !important;
  transition: border-color .15s !important;
}
.claim-card:hover { border-color: #d4b8ff !important; }
.cc-ico {
  background: #f0ebff !important;
  border-radius:var(--r-12) !important;
  width: 44px !important;
  height: 44px !important;
}
.cc-ico svg { stroke: #5700ff !important; }
.cc-venue { color: #111 !important; font-weight: 800 !important; }
.cc-offer  { color: #555 !important; font-size: 12px !important; }

body[data-page="claims"] #page-main {
  background: #f5f3f0 !important;
}
body[data-page="claims"] {
  background: #f5f3f0 !important;
}

.empty-state {
  text-align: center !important;
  padding: 48px 24px !important;
}

.creator-hdr-profile { padding-bottom: 0 !important; }

.prof-av-lg {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: #5700ff !important;
  color: #fff !important;
  font-weight: 900 !important;
  font-size: 18px !important;
  border: 2.5px solid #5700ff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

#prof-name-el  { color: #111 !important; font-weight: 900 !important; }
#prof-handle-el { color: #606060 !important; }

body[data-page="profile"] #page-main { background: #f5f3f0 !important; }
.prof-page { background: #f5f3f0 !important; padding: 16px !important; }
.prof-panel {
  background: #fff !important;
  border: 0.5px solid #e8e5e0 !important;
  border-radius:var(--r-md) !important;
  overflow: hidden !important;
  margin-bottom: 12px !important;
}
.prof-panel-h {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #111 !important;
  padding: 14px 16px 12px !important;
  border-bottom: 0.5px solid #f0ede8 !important;
}

#prof-complete-bar { background: #5700ff !important; }
#prof-complete-bar-wrap { background: #e8e5e0 !important; border-radius:var(--r-pill) !important; }

#prof-plan-banner {
  background: #f0ebff !important;
  border-radius:var(--r-md) !important;
  border: 0.5px solid #d4b8ff !important;
  margin: 12px 16px !important;
  padding: 12px 16px !important;
}

#prof-socials .btn { border-radius: var(--r-btn, 12px); } /* --r-btn: use 12px as base */

.ob-big-input {
  background: #f9f8f6 !important;
  border: 0.5px solid #e8e5e0 !important;
  border-radius:var(--r-sm) !important;
  color: #111 !important;
  font-size: 16px !important;
  transition: border-color .15s !important;
}
.ob-big-input:focus {
  border-color: #5700ff !important;
  background: #fff !important;
  outline: none !important;
}

body[data-page="notifications"] #page-main { background: #f5f3f0 !important; }

body[data-page="notifications"] .inner-nav {
  background: #fff !important;
  border-bottom: 0.5px solid #e8e5e0 !important;
}
#notif-back-btn { color: #5700ff !important; font-weight: 700 !important; }
#notif-mark-all-btn { color: #5700ff !important; font-weight: 700 !important; }

#notif-list { padding: 12px 16px 100px !important; }

.ni-row {
  background: #fff !important;
  border: 0.5px solid #e8e5e0 !important;
  border-radius:var(--r-md) !important;
  margin-bottom: 6px !important;
  padding: 14px 16px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  cursor: pointer !important;
  transition: border-color .15s !important;
}
.ni-row.ni-unread { border-color: #d4b8ff !important; }
.ni-row.ni-unread::before {
  content: '' !important;
  width: 3px !important;
  border-radius: 0 3px 3px 0 !important;
  background: #5700ff !important;
  align-self: stretch !important;
  flex-shrink: 0 !important;
  margin: -14px 0 -14px -16px !important;
}
.ni-ico {
  border-radius:var(--r-sm) !important;
  width: 36px !important;
  height: 36px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.ni-title {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #111 !important;
  margin-bottom: 3px !important;
}
.ni-sub {
  font-size: 12px !important;
  color: #555 !important;
  line-height: 1.5 !important;
  margin-bottom: 4px !important;
}
.ni-time {
  font-size: 11px !important;
  color: #aaa !important;
  font-weight: 600 !important;
}

.ni-date-group {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #aaa !important;
  padding: 12px 0 6px !important;
}

body[data-page="deal"] #page-main { background: #f5f3f0 !important; }

.inner-nav {
  background: #fff !important;
  border-bottom: 0.5px solid #e8e5e0 !important;
  height: 52px !important;
}
.i-logo { font-weight: 900 !important; color: #111 !important; letter-spacing: -.4px !important; }
.i-logo span { color: #5700ff !important; }

.deal-hero {
  background-color: #e8e0ff !important;
  position: relative !important;
  overflow: hidden !important;
}
.deal-hero-badge {
  background: var(--violet, #5700ff) !important;
  color: #fff !important;
  border-radius: 6px !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: .5px !important;
  padding: 4px 8px !important;
}

.deal-body-wrap {
  background: #f5f3f0 !important;
  padding: 20px 16px 16px !important;
}

.venue-row {
  background: #fff !important;
  border: 0.5px solid #e8e5e0 !important;
  border-radius:var(--r-md) !important;
  padding: 16px !important;
  margin-bottom: 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}
.venue-av {
  width: 48px !important;
  height: 48px !important;
  border-radius:var(--r-12) !important;
  background: #5700ff !important;
  color: #fff !important;
  font-weight: 900 !important;
  font-size: 15px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.venue-name { font-size: 22px !important; font-weight: 900 !important; color: #111 !important; letter-spacing: -.6px !important; }
.venue-cat  { font-size: 12px !important; color: #606060 !important; margin-top: 2px !important; }

.detail-section {
  background: #fff !important;
  border: 0.5px solid #e8e5e0 !important;
  border-radius:var(--r-md) !important;
  padding: 16px !important;
  margin-bottom: 10px !important;
}
.ds-label {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  color: #aaa !important;
  margin-bottom: 10px !important;
  display: block !important;
}

.offer-value-text {
  background: #fef9e7 !important;
  border: 0.5px solid #fef08a !important;
  border-radius:var(--r-12) !important;
  padding: 16px !important;
}
#deal-offer-value {
  font-size: 18px !important;
  font-weight: 900 !important;
  color: #111 !important;
  letter-spacing: -.4px !important;
}
#deal-offer-desc { font-size: 13px !important; color: #555 !important; line-height: 1.6 !important; margin-top: 6px !important; }

.info-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}
.info-tile {
  background: #f9f8f6 !important;
  border: 0.5px solid #e8e5e0 !important;
  border-radius:var(--r-sm) !important;
  padding: 10px 12px !important;
  text-align: center !important;
}
.it-lbl {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #aaa !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  display: block !important;
  margin-bottom: 4px !important;
}
.it-val {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #111 !important;
}
.it-icon { color: #5700ff !important; margin-bottom: 4px !important; }

.req-pills { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
.req-pill, [class*="req-pill"] {
  background: #f0ebff !important;
  color: #5700ff !important;
  border: none !important;
  border-radius:var(--r-pill) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 5px 12px !important;
}

.map-placeholder {
  background: #f5f3f0 !important;
  border: 0.5px solid #e8e5e0 !important;
  border-radius:var(--r-12) !important;
  min-height: 80px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  color: #aaa !important;
  font-size: 13px !important;
}

#deal-about { font-size: 13px !important; color: #555 !important; line-height: 1.7 !important; }

.claim-bar {
  background: #fff !important;
  border-top: 0.5px solid #e8e5e0 !important;
  padding: 12px 20px max(28px, calc(env(safe-area-inset-bottom, 0px) + 12px)) !important;
  box-shadow: none !important;
}

.bottom-nav {
  background: #fff !important;
  border-top: 0.5px solid #e8e5e0 !important;
  box-shadow: none !important;
  padding: 8px 0 16px !important;
}
.bn-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 3px !important;
  opacity: 1 !important;
  color: #bbb !important;
}
.bn-ico { display: flex !important; align-items: center !important; justify-content: center !important; }
.bn-ico svg { stroke: #bbb !important; transition: stroke .15s !important; }
.bn-lbl { font-size: 10px !important; font-weight: 600 !important; color: #bbb !important; transition: color .15s !important; }
.bn-item.on .bn-ico svg { stroke: #5700ff !important; }
.bn-item.on .bn-lbl   { color: #5700ff !important; font-weight: 800 !important; }

.bn-badge {
  position: absolute !important;
  top: -2px !important;
  right: -2px !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #faef7c !important;
  border: 1.5px solid #5700ff !important;
}

#verify-email-banner {
  background: #fef9e7 !important;
  border-bottom: 0.5px solid #fef08a !important;
  color: #92400e !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 10px 16px !important;
}

#sr-creator-upgrade-sheet > div {
  border-radius: 24px 24px 0 0 !important;
  overflow: hidden !important;
}

body[data-page="settings"]:not(.user-business) .settings-biz-hdr,
body[data-page="settings"]:not(.is-biz) .settings-biz-hdr {
  background: #fff !important;
  border-bottom: 0.5px solid #e8e5e0 !important;
  padding: 16px 24px !important;
}
body[data-page="settings"]:not(.user-business) .biz-hdr-eyebrow,
body[data-page="settings"]:not(.is-biz) .biz-hdr-eyebrow {
  color: #5700ff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}
body[data-page="settings"]:not(.user-business) .biz-hdr-title,
body[data-page="settings"]:not(.is-biz) .biz-hdr-title {
  color: #111 !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  letter-spacing: -.5px !important;
}
body[data-page="settings"]:not(.user-business) .biz-hdr-sub,
body[data-page="settings"]:not(.is-biz) .biz-hdr-sub {
  color: #606060 !important;
  font-size: 13px !important;
}

body[data-page="profile"] .prof-page {
  background: #f5f3f0 !important;
  padding: 16px 16px 32px !important;
  min-height: unset !important;
}
body[data-page="profile"] .prof-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  max-width: 680px !important;
  margin: 0 auto !important;
}
body[data-page="profile"] .prof-panel {
  background: #fff !important;
  border: 0.5px solid #e8e5e0 !important;
  border-radius:var(--r-md) !important;
  overflow: hidden !important;
}
body[data-page="profile"] .prof-panel-h {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #111 !important;
  padding: 14px 16px 12px !important;
  border-bottom: 0.5px solid #f0ede8 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
body[data-page="profile"] .prof-panels {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

body.user-pro .claims-upgrade-cta,
body.user-pro #claims-upgrade-cta,
body[data-plan="pro"] .claims-upgrade-cta {
  display: none !important;
}

.d-badge {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  width: auto !important;
  max-width: 120px !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: .8px !important;
  padding: 4px 10px !important;
  border-radius:var(--r-8) !important;
  z-index: 2 !important;
}
.db-violet {
  background: rgba(87,0,255,.9) !important;
  color: #fff !important;
  backdrop-filter: blur(4px) !important;
}
.db-yellow {
  background: rgba(250,239,124,.95) !important;
  color: #3a3500 !important;
}

body[data-page="profile"] .prof-panel-h,
body[data-page="profile"] [class*="section-h"],
body[data-page="profile"] [class*="panel-h"] {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #111 !important;
}

.creator-hdr-label {
  text-transform: none !important;
  letter-spacing: .5px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  color: #5700ff !important;
}

body[data-page="feed"] .deal [style*="background:linear-gradient(90deg,var(--biz2)"] {
  background: linear-gradient(90deg, rgba(87,0,255,.15), rgba(87,0,255,.08)) !important;
  color: #5700ff !important;
}

body[data-page="settings"]:not(.user-business):not(.is-biz) .settings-tab-btn.biz-only,
body[data-page="settings"]:not(.user-business):not(.is-biz) .biz-only-block,
body[data-page="settings"]:not(.user-business):not(.is-biz) .settings-biz-hdr .biz-cta {
  display: none !important;
}

/* v=zs: hide .creator-only-block on biz settings page. Previously missing,
   causing the violet creator avatar (AB) to render alongside the biz logo
   placeholder (yellow ?) on /settings/ for biz users. */
body[data-page="settings"].user-business .creator-only-block,
body[data-page="settings"].is-biz .creator-only-block {
  display: none !important;
}
body[data-page="settings"]:not(.user-business):not(.is-biz) .biz-only-block {
  display: none !important;
}

body[data-page="settings"] .mob-menu { display: none !important; }

body[data-page="settings"].is-biz #nav,
body[data-page="settings"].user-business #nav { display: none !important; }

#prof-handle-el {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 12px !important;
  color: #606060 !important;
  font-weight: 500 !important;
}

body[data-page="feed"] .srm-nav,
body[data-page="deal"] .srm-nav,
body[data-page="claims"] .srm-nav,
body[data-page="profile"] .srm-nav,
body[data-page="notifications"] .srm-nav {
  --srm-active:     #5700ff;
  --srm-active-ink: #5700ff;
  --srm-inactive:   #aaa;
  --srm-line:       #5700ff;
  background: #fff !important;
  border-top: 0.5px solid #e8e5e0 !important;
  box-shadow: none !important;
}

body[data-page="feed"] .srm-item.active .srm-icon::after,
body[data-page="deal"] .srm-item.active .srm-icon::after,
body[data-page="claims"] .srm-item.active .srm-icon::after,
body[data-page="profile"] .srm-item.active .srm-icon::after,
body[data-page="notifications"] .srm-item.active .srm-icon::after {
  background: rgba(87,0,255,.12) !important;
}

body[data-page="feed"] .srm-item.srm-cta .srm-icon,
body[data-page="claims"] .srm-item.srm-cta .srm-icon,
body[data-page="profile"] .srm-item.srm-cta .srm-icon {
  background: #5700ff !important;
  color: #fff !important;
}

body[data-page="feed"] .srm-item.active,
body[data-page="deal"] .srm-item.active,
body[data-page="claims"] .srm-item.active,
body[data-page="profile"] .srm-item.active,
body[data-page="notifications"] .srm-item.active {
  color: #5700ff !important;
}

body[data-page="feed"] .bottom-nav,
body[data-page="deal"] .bottom-nav,
body[data-page="claims"] .bottom-nav,
body[data-page="profile"] .bottom-nav,
body[data-page="notifications"] .bottom-nav {
  display: none !important;
}

@media (max-width: 768px) {
  body[data-page="feed"] .srm-nav,
  body[data-page="claims"] .srm-nav,
  body[data-page="profile"] .srm-nav,
  body[data-page="notifications"] .srm-nav {
    display: block !important;
  }
  /* v=20260518gn9: deal page hides srm-nav at all widths so the fixed
     Claim CTA isn't covered. */
  body[data-page="deal"] .srm-nav {
    display: none !important;
  }
}

@media (min-width: 769px) {
  body[data-page="feed"] .srm-nav,
  body[data-page="deal"] .srm-nav,
  body[data-page="claims"] .srm-nav,
  body[data-page="profile"] .srm-nav,
  body[data-page="notifications"] .srm-nav {
    display: none !important;
  }
}

/* ════════════════════════════════════════════════════════
   SOREEL CREATOR MOBILE — Bento/Notion design language
   Applies to all creator-facing pages at ≤768px
   ════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── GLOBAL PAGE PADDING ──────────────────────────── */
  body[data-page="feed"] #page-main,
  body[data-page="claims"] #page-main,
  body[data-page="profile"] #page-main,
  body[data-page="notifications"] #page-main {
    padding-top: 0 !important;
    background: var(--surf, #f5f3f0) !important;
  }

  /* ── FEED TOPBAR ─────────────────────────────────── */
  #feed-topbar {
    padding: 10px 16px 0 !important;
    background: var(--white) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 200 !important;
  }
  #feed-row1 {
    margin-bottom: 8px !important;
  }
  #feed-row1 h1, #feed-title-h {
    font-size: 17px !important;
    letter-spacing: -.3px !important;
  }

  /* ── FEED CHIPS ──────────────────────────────────── */
  .chips {
    padding-bottom: 10px !important;
    gap: 6px !important;
  }
  .chip-feed {
    font-size: 12px !important;
    padding: 6px 12px !important;
    border-radius:var(--r-pill) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  .chip-feed.on {
    background: var(--violet) !important;
    color: #fff !important;
    border-color: var(--violet) !important;
    font-weight: 800 !important;
  }

  /* ── FEED DEAL CARDS — BENTO LAYOUT ─────────────── */
  .deals {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 16px 14px 110px !important;
  }
  .deal {
    border-radius: 14px !important;
    box-shadow: none !important;
    border: 1px solid var(--border) !important;
  }
  .deal:hover { transform: none !important; box-shadow: none !important; }

  /* Bento: category emoji tile — right side of deal banner on mobile */
  .deal-cat-tile {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 50% !important;
    right: 14px !important;
    transform: translateY(-50%) !important;
    width: 46px !important;
    height: 46px !important;
    background: rgba(255,255,255,.6) !important;
    border-radius: var(--r-sm, 10px) !important;
    font-size: 22px !important;
    line-height: 1 !important;
    backdrop-filter: blur(4px) !important;
  }

  /* Bento: venue identity sits in a surface-coloured header block */
  .deal-banner {
    height: 80px !important;
    background: var(--surf, #f5f3f0) !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 14px !important;
    gap: 12px !important;
  }
  /* Category eyebrow label inside deal banner */
  .deal-banner-eyebrow {
    display: none !important;
  }
  @media (max-width: 768px) {
    .deal-banner-eyebrow {
      display: block !important;
      position: absolute !important;
      bottom: 12px !important;
      left: 14px !important;
      font-size: 9px !important;
      font-weight: 800 !important;
      letter-spacing: 1px !important;
      text-transform: uppercase !important;
      /* v=20260518gn9: was white-on-light invisible. Dark ink + light
         text-shadow is readable on both light and dark banners. */
      color: var(--ink, #111) !important;
      text-shadow: 0 1px 3px rgba(255,255,255,.7), 0 0 1px rgba(255,255,255,.6) !important;
      z-index: 2 !important;
    }
  }

  /* The background image on .deal-banner becomes an emoji tile */
  .deal-banner img.pol-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 0.18 !important;
  }
  .deal-body {
    padding: 12px 14px 14px !important;
    background: var(--white) !important;
    border-top: 1px solid var(--border) !important;
  }
  /* Venue name hidden from body on mobile — shown in banner instead */
  .deal-venue-name, .deal-loc, .deal-body-eyebrow {
    display: none !important;
  }
  .deal-offer-value {
    font-size: 13px !important;
    font-weight: 800 !important;
    margin-bottom: 8px !important;
  }
  /* Badge: top-left on the surface header */
  .d-badge, .deal-badge {
    top: 10px !important;
    left: 10px !important;
    font-size: 11px !important;
    padding: 4px 9px !important;
  }
  /* Save button: top-right */
  .deal-banner > button[aria-label*="saved"],
  .deal-banner > button[aria-label*="Remove"],
  .deal-banner > button[onclick*="toggleSave"] {
    top: 8px !important;
    right: 8px !important;
    width: 44px !important;
    height: 44px !important;
    background: rgba(255,255,255,.85) !important;
    border-radius:var(--r-pill) !important;
    backdrop-filter: blur(4px) !important;
  }

  /* Apply button — full width, more prominent */
  .deal-body button[onclick*="claimDeal"],
  .deal-body a[href*="deal"],
  .deal .apply-btn,
  button.deal-apply-btn {
    width: 100% !important;
    padding: 12px !important;
    border-radius:var(--r-sm) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
  }

  /* ── CLAIMS PAGE ─────────────────────────────────── */
  .creator-hdr {
    padding: 14px 16px 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
  }
  .creator-hdr-title {
    font-size: 20px !important;
    font-weight: 900 !important;
    letter-spacing: -.4px !important;
  }
  /* Stats bar: no card border, flush dividers only */
  .creator-hdr-stats {
    border: none !important;
    border-top: 1px solid var(--border) !important;
    border-radius: 0 !important;
    margin: 8px -16px 0 !important;
    padding: 0 !important;
  }
  .creator-stat-n {
    font-size: 20px !important;
    font-weight: 900 !important;
    color: var(--violet) !important;
  }
  .creator-stat-l {
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: .2px !important;
  }

  /* Claim cards */
  .claim-card {
    margin: 0 0 8px !important;
    border-radius: 14px !important;
    box-shadow: none !important;
  }
  .claims-cards-wrap {
    padding: 16px 14px 110px !important;
  }
  /* Tabs */
  .claims-tabs {
    padding: 0 16px !important;
    background: var(--white) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 90 !important;
  }
  .oc-tab {
    font-size: 13px !important;
    padding: 10px 0 8px !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    background: none !important;
    margin-right: 20px !important;
  }
  .oc-tab-active, .oc-tab.on {
    background: none !important;
    border-bottom-color: var(--violet) !important;
    color: var(--violet) !important;
    font-weight: 800 !important;
  }

  /* ── PROFILE PAGE ─────────────────────────────────── */
  .creator-hdr-profile .creator-hdr-top {
    padding-bottom: 14px !important;
  }
  /* Avatar: square with radius, not circle */
  .prof-av-lg {
    width: 56px !important;
    height: 56px !important;
    border-radius: 14px !important;
    font-size: 16px !important;
    font-weight: 900 !important;
  }
  .prof-name-el, #prof-name-el {
    font-size: 17px !important;
    font-weight: 900 !important;
    letter-spacing: -.3px !important;
  }
  /* Profile stats: flush to edges, no card wrap */
  .creator-hdr-profile .creator-hdr-stats {
    margin: 0 -16px !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
  }

  /* ── NOTIFICATIONS PAGE ──────────────────────────── */
  body[data-page="notifications"] #page-main {
    padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Notification items: Notion-style left accent for unread */
  .notif-item-unread {
    position: relative !important;
    background: rgba(87,0,255,.025) !important;
  }
  .notif-item-unread::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important; top: 0 !important; bottom: 0 !important;
    width: 3px !important;
    background: var(--violet) !important;
    border-radius: 0 99px 99px 0 !important;
  }

  /* ── SETTINGS PAGE (creator) ─────────────────────── */
  
  .settings-tab-btn {
    font-size: 13px !important;
    padding: 10px 0 8px !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    background: none !important;
    margin-right: 20px !important;
    white-space: nowrap !important;
  }
  .settings-tab-btn[aria-selected="true"] {
    border-bottom-color: var(--violet) !important;
    color: var(--violet) !important;
  }
  .settings-section {
    padding: 16px 16px 100px !important;
  }

  /* ── COLLAB DETAIL PAGE (deal/) ───────────────────── */
  body[data-page="deal"] .inner-nav,
  body[data-page="deal"] nav.inner-nav {
    position: sticky !important;
    top: 0 !important;
    z-index: 200 !important;
    background: var(--white) !important;
  }
  body[data-page="deal"] .deal-body-wrap {
    padding: 0 !important;
    background: var(--surf) !important;
  }
  /* Sections: white cards with surface gaps between */
  body[data-page="deal"] .detail-section {
    background: var(--white) !important;
    margin: 8px 14px !important;
    border-radius: 14px !important;
    border: 1px solid var(--border) !important;
    overflow: hidden !important;
    padding: 14px !important;
  }
  body[data-page="deal"] .detail-section:first-of-type {
    margin-top: 12px !important;
  }
  /* Venue row: white card */
  body[data-page="deal"] .venue-row {
    background: var(--white) !important;
    margin: 12px 14px 0 !important;
    border-radius: 14px !important;
    border: 1px solid var(--border) !important;
    padding: 14px !important;
  }
  /* Info grid: 2-col bento */
  body[data-page="deal"] .info-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  body[data-page="deal"] .info-tile {
    border-radius:var(--r-sm) !important;
    background: var(--surf) !important;
    padding: 10px 12px !important;
  }
  /* Claim bar: clean single-button bar */
  body[data-page="deal"] .claim-bar {
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ── BOTTOM NAV: CREATOR VIOLET ACTIVE ───────────── */
  /* Already set via token above — ensure the active icon bg is violet */
  .srm-item-active .srm-icon::after {
    background: var(--violetMid, rgba(87,0,255,.1)) !important;
    opacity: 1 !important;
  }
  .srm-item-active {
    color: var(--violet) !important;
  }
  .srm-icon {
    width: 44px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius:var(--r-pill) !important;
    transition: background .15s !important;
  }
  .srm-item-active .srm-icon {
    background: var(--violetMid, rgba(87,0,255,.1)) !important;
  }
  .srm-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .2px !important;
  }
  .srm-item-active .srm-label {
    font-weight: 800 !important;
    color: var(--violet) !important;
  }
}

/* ── NOTIFICATIONS MOBILE ── */
@media (max-width: 768px) {
  .ni-row {
    padding: 13px 16px !important;
  }
  .ni-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
  }
  .ni-sub {
    font-size: 11px !important;
  }
  .ni-ico {
    width: 36px !important;
    height: 36px !important;
    border-radius:var(--r-sm) !important;
  }
}

/* ── DEAL CARD: surface banner texture on mobile ── */
@media (max-width: 768px) {
  /* When no real image, the venue emoji shows centred */
  .deal-banner-emoji {
    font-size: 32px !important;
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    opacity: 1 !important;
    z-index: 1 !important;
  }
  /* Text content in the banner header */
  .deal-banner-text {
    position: relative !important;
    z-index: 2 !important;
    flex: 1 !important;
  }
  .deal-banner-eyebrow {
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    color: var(--ink4) !important;
    margin-bottom: 4px !important;
  }
  /* Hide the duplicate category label in the body on mobile (banner already shows it) */
  .deal-body-eyebrow {
    display: none !important;
  }
  .deal-banner-name {
    font-size: 15px !important;
    font-weight: 900 !important;
    letter-spacing: -.3px !important;
    color: var(--ink) !important;
    line-height: 1.2 !important;
  }
  /* AED value: yellow pill in deal body */
  .aed-badge {
    display: inline-flex !important;
    background: var(--yellow, #faef7c) !important;
    color: var(--yInk, #3a3500) !important;
    padding: 4px 10px !important;
    border-radius:var(--r-8) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    margin-bottom: 8px !important;
  }
  /* Footer row of deal card */
  .deal-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-top: 10px !important;
    border-top: 1px solid var(--border) !important;
    margin-top: 10px !important;
  }
}

.srm-item-active {
  color: var(--srm-active-ink) !important;
}
.srm-item-active .srm-icon {
  transform: translateY(-2px);
}
.srm-item-active .srm-icon::after {
  opacity: .18 !important;
  transform: scale(1) !important;
}
.srm-item-active .srm-label::after {
  transform: translateX(-50%) scaleX(1) !important;
}

body[data-page="feed"] .srm-item-active,
body[data-page="deal"] .srm-item-active,
body[data-page="claims"] .srm-item-active,
body[data-page="profile"] .srm-item-active,
body[data-page="notifications"] .srm-item-active {
  color: #5700ff !important;
}
body[data-page="feed"] .srm-item-active .srm-icon::after,
body[data-page="deal"] .srm-item-active .srm-icon::after,
body[data-page="claims"] .srm-item-active .srm-icon::after,
body[data-page="profile"] .srm-item-active .srm-icon::after,
body[data-page="notifications"] .srm-item-active .srm-icon::after {
  background: rgba(87,0,255,.12) !important;
}
body[data-page="feed"] .srm-item-active svg,
body[data-page="deal"] .srm-item-active svg,
body[data-page="claims"] .srm-item-active svg,
body[data-page="profile"] .srm-item-active svg,
body[data-page="notifications"] .srm-item-active svg {
  stroke: #5700ff !important;
}
body[data-page="feed"] .srm-item:not(.srm-item-active) svg,
body[data-page="deal"] .srm-item:not(.srm-item-active) svg,
body[data-page="claims"] .srm-item:not(.srm-item-active) svg,
body[data-page="profile"] .srm-item:not(.srm-item-active) svg,
body[data-page="notifications"] .srm-item:not(.srm-item-active) svg {
  stroke: #bbb !important;
}
body[data-page="feed"] .srm-item:not(.srm-item-active) .srm-label,
body[data-page="deal"] .srm-item:not(.srm-item-active) .srm-label,
body[data-page="claims"] .srm-item:not(.srm-item-active) .srm-label,
body[data-page="profile"] .srm-item:not(.srm-item-active) .srm-label,
body[data-page="notifications"] .srm-item:not(.srm-item-active) .srm-label {
  color: #bbb !important;
}
body[data-page="feed"] .srm-item-active .srm-label,
body[data-page="deal"] .srm-item-active .srm-label,
body[data-page="claims"] .srm-item-active .srm-label,
body[data-page="profile"] .srm-item-active .srm-label,
body[data-page="notifications"] .srm-item-active .srm-label {
  color: #5700ff !important;
}

body[data-page="feed"] .srm-item,
body[data-page="deal"] .srm-item,
body[data-page="claims"] .srm-item,
body[data-page="profile"] .srm-item,
body[data-page="notifications"] .srm-item {
  color: #bbb;
  min-width: 0;
  flex: 1;
  padding: 4px 4px 6px;
  min-height: 44px;
}

#feed-topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 200 !important;
}

#feed-notif-dot {
  background: #faef7c !important;
  border: 1.5px solid #5700ff !important;
}

/* .deal-body-main padding removed — was overriding card body layout */

.deal-body [style*="text-transform:uppercase"][style*="letter-spacing:.7px"] {
  font-size: 9px !important;
  color: #bbb !important;
  letter-spacing: 1px !important;
}

.deal-body [style*="font-weight:800"][style*="color:#5700ff"] {
  font-size: 13px !important;
  font-weight: 800 !important;
}

.deal-body > div:last-child,
.deal-apply-cta {
  margin-top: 8px !important;
}

body[data-page="feed"] .deal .deal-banner [style*="var(--biz2)"] {
  background: linear-gradient(90deg, rgba(87,0,255,.15), rgba(87,0,255,.1)) !important;
  color: #5700ff !important;
}

#feed-load-more-wrap {
  padding: 16px 0 8px !important;
  grid-column: 1 / -1 !important;
}

body[data-page="claims"] #page-main {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
  padding-bottom: 80px !important;
}

#claims-upgrade-cta {
  background: linear-gradient(135deg, #5700ff, #7c3aed) !important;
  border-radius:var(--r-md) !important;
  margin: 12px 16px !important;
  color: #fff !important;
}

#claims-search {
  background: #f9f8f6 !important;
  border: 0.5px solid #e8e5e0 !important;
  border-radius:var(--r-12) !important;
  color: #111 !important;
  font-size: 14px !important;
  padding: 10px 16px !important;
}
#claims-search::placeholder { color: #bbb !important; }
#claims-search:focus {
  border-color: #5700ff !important;
  background: #fff !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(87,0,255,.08) !important;
}

.cc-body { flex: 1; min-width: 0; }
.cc-venue { font-size: 14px !important; font-weight: 900 !important; color: #111 !important; }
.cc-offer  { font-size: 12px !important; color: #606060 !important; margin-top: 2px !important; }

.cc-status {
  font-size: 10px !important;
  font-weight: 800 !important;
  padding: 3px 10px !important;
  border-radius:var(--r-pill) !important;
}

.monthly-dot {
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}
.monthly-dot.used { background: #5700ff !important; }
.monthly-dot.free { background: #e8e5e0 !important; }

.prof-panel {
  padding: 0 !important;
}
.prof-panel > div:not(.prof-panel-h) {
  padding: 12px 16px !important;
}

.soc-row,
body[data-page="profile"] .soc-row {
  background: var(--white, #fff) !important;
  border: 0.5px solid #e8e5e0 !important;
  border-radius: var(--r-md, 16px) !important;
  padding: 12px 14px !important;
  margin-bottom: 8px !important;
  transition: border-color .15s !important;
}
.soc-row:hover,
body[data-page="profile"] .soc-row:hover {
  border-color: #d4b8ff !important;
}
/* v=20260518gn52: connected social cards no longer use lavender background.
   Connection state communicated by Disconnect button + "Connected" timestamp. */
.soc-row.linked,
body[data-page="profile"] .soc-row.linked {
  border: 1px solid #d4b8ff !important;
  background: var(--white, #fff) !important;
}

.ob-big-input, .ob-field input, .ob-field textarea {
  background: #f9f8f6 !important;
  border: 0.5px solid #e8e5e0 !important;
  border-radius:var(--r-sm) !important;
  font-size: 15px !important;
  color: #111 !important;
  width: 100% !important;
}
.ob-big-input:focus,
.ob-field input:focus,
.ob-field textarea:focus {
  background: #fff !important;
  border-color: #5700ff !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(87,0,255,.08) !important;
}

#prof-complete-bar-wrap {
  height: 8px !important;
  background: #e8e5e0 !important;
  border-radius:var(--r-pill) !important;
  overflow: hidden !important;
  margin: 6px 0 4px !important;
}
#prof-complete-bar {
  height: 100% !important;
  background: #5700ff !important;
  border-radius:var(--r-pill) !important;
  transition: width .5s ease !important;
}

#prof-url-display {
  font-size: 12px !important;
  color: #606060 !important;
  font-family: var(--ff) !important;
}

.prof-edit-actions {
  display: flex !important;
  gap: 8px !important;
  padding: 12px 16px !important;
  border-top: 0.5px solid #f0ede8 !important;
}

body[data-page="notifications"] .inner-nav {
  top: 0 !important;
}
#notif-back-btn {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #5700ff !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
}
#notif-mark-all-btn {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #5700ff !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
}

#notif-list {
  padding: 12px 16px 100px !important;
}

#notif-list .empty-state {
  text-align: center !important;
  padding: 48px 24px !important;
  color: #aaa !important;
}

body[data-page="deal"] .inner-nav {
  top: 0 !important;
  z-index: 200 !important;
}

.inner-nav .i-logo {
  font-size: 16px !important;
  font-weight: 900 !important;
  letter-spacing: -.3px !important;
  color: #111 !important;
  text-decoration: none !important;
}
.inner-nav .i-logo span { color: #5700ff !important; }

.inner-nav .btn.btn-ghost.btn-sm {
  color: #5700ff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 6px 0 !important;
}

.inner-nav [onclick*="share"],
.inner-nav [onclick*="Share"] {
  color: #111 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.deal-hero {
  height: 220px !important;
  min-height: 180px !important;
}
@media (min-width: 769px) {
  .deal-hero { height: 260px !important; }
}

.deal-hero-badge {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  left: auto !important;
}

body[data-page="deal"] .badge.badge-green {
  font-size: 10px !important;
  padding: 3px 9px !important;
}
body[data-page="deal"] .badge.badge-violet {
  font-size: 10px !important;
  padding: 3px 9px !important;
}

.claim-bar .btn-violet {
  flex: 2 !important;
  padding: 12px 24px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  border-radius:var(--r-12) !important;
  letter-spacing: -.2px !important;
}
.claim-bar .btn-outline {
  flex: 1 !important;
  border-radius:var(--r-md) !important;
  font-size: 13px !important;
}

body[data-page="settings"] .creator-hdr {
  background: #fff !important;
  border-bottom: 0.5px solid #e8e5e0 !important;
  color: #111 !important;
}
body[data-page="settings"] .creator-hdr-label { color: #5700ff !important; }
body[data-page="settings"] .creator-hdr-title { color: #111 !important; }

.sr-card {
  background: #fff !important;
  border: 0.5px solid #e8e5e0 !important;
  border-radius:var(--r-md) !important;
  overflow: hidden !important;
}
.sr-card-h {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #111 !important;
  padding: 14px 16px 12px !important;
  border-bottom: 0.5px solid #f0ede8 !important;
}
.sr-card-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px !important;
  border-bottom: 0.5px solid #f9f7f5 !important;
  gap: 12px !important;
}
.sr-card-row:last-child { border-bottom: none !important; }

#verify-email-banner {
  background: #fef9e7 !important;
  border-bottom: 0.5px solid #fef08a !important;
  color: #92400e !important;
  padding: 10px 16px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

#sr-creator-upgrade-sheet .sr-drawer {
  background: #fff !important;
  border-radius: 24px 24px 0 0 !important;
}

body[data-page="profile"] .creator-hdr {
  height: auto !important;
  min-height: fit-content !important;
  overflow: visible !important;
  padding-bottom: 0 !important;
}
body[data-page="profile"] .creator-hdr-top {
  padding-bottom: 14px !important;
}

body[data-page="deal"] .claim-bar {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 600 !important;
}

.ni-row {
  cursor: pointer !important;
}
.ni-row:hover {
  background: #f9f8ff !important;
}

body[data-page="settings"]:not(.user-business):not(.is-biz) #st-controls .settings-card:first-child,
body[data-page="settings"].user-creator:not(.user-business) #st-controls .settings-card {
  display: none !important;
}

body[data-page="settings"]:not(.user-business):not(.is-biz) #st-controls::before {
  content: '';
  display: block;
}

body[data-page="settings"]:not(.user-business) .biz-only {
  display: none !important;
}
body[data-page="settings"]:not(.user-business) #st-controls {
  display: none !important;
}
body[data-page="settings"]:not(.user-business) #st-venue {
  display: none !important;
}
body[data-page="settings"]:not(.user-business) #tab-controls,
body[data-page="settings"]:not(.user-business) #tab-venue {
  display: none !important;
}

.claim-card[style*="cursor:pointer"]:hover {
  border-color: rgba(87,0,255,.3) !important;
  box-shadow: 0 4px 16px rgba(87,0,255,.1) !important;
  transform: translateY(-1px) !important;
}

.claim-card[data-claim-status="completed"],
#claims-completed .claim-card {
  border-left: 3px solid #16a34a !important;
}

#claims-completed .claim-card[data-status="post_submitted"] {
  border-left: 3px solid #5700ff !important;
}

body[data-page="profile"] .creator-hdr.creator-hdr-profile {
  height: auto !important;
  min-height: 80px !important;
  overflow: visible !important;
  display: block !important;
}
body[data-page="profile"] .creator-hdr .creator-hdr-top {
  display: flex !important;
  min-height: 52px !important;
}

.ni-row {
  cursor: pointer !important;
  transition: background .1s, border-color .1s !important;
}
.ni-row:hover {
  background: #f9f8ff !important;
  border-color: rgba(87,0,255,.2) !important;
}
.ni-row.ni-unread:hover {
  background: #f0ebff !important;
}

.ni-title, .ni-sub, .ni-time {
  pointer-events: none;
}

body[data-page="feed"] #page-main,
body[data-page="deal"] #page-main,
body[data-page="claims"] #page-main,
body[data-page="profile"] #page-main,
body[data-page="notifications"] #page-main {
  height: auto !important;
  overflow: visible !important;
  overflow-x: clip !important;
  display: block !important;
}

body[data-page="deal"] .inner-nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 200 !important;
}

body[data-page="claims"] .creator-hdr {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}

body[data-page="profile"] .creator-hdr,
body[data-page="profile"] .creator-hdr-profile {
  position: relative !important;
  top: auto !important;
  height: auto !important;
  min-height: 100px !important;
  overflow: visible !important;
  display: block !important;
  padding: 16px 20px 16px !important;
}
body[data-page="profile"] .creator-hdr-top {
  display: flex !important;
  align-items: flex-start !important;
  min-height: 56px !important;
}
body[data-page="profile"] .creator-hdr-stats {
  display: grid !important;
  grid-template-columns: repeat(3,1fr) !important;
}

body.user-pro #feed-plan-chip {
  display: none !important;
}

body[data-page="settings"]:not(.user-business)

body[data-page="settings"]:not(.user-business) #billing-addons-section {
  display: none !important;
}

html body[data-page="settings"]:not(.user-business) #st-controls,
html body[data-page="settings"]:not(.user-business) #tab-controls {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body[data-page="settings"]:not(.user-business) #st-venue,
html body[data-page="settings"]:not(.user-business) #tab-venue {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

#claims-completed .claim-card {
  cursor: pointer !important;
}
#claims-completed .claim-card:hover {
  border-color: #16a34a !important;
  box-shadow: 0 4px 16px rgba(22,163,74,.15) !important;
  transform: translateY(-1px) !important;
}
#claims-completed .claim-card::after {
  content: 'View details →';
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #5700ff;
  text-align: right;
  padding: 8px 16px 12px;
  border-top: 0.5px solid #f0ede8;
  margin-top: 4px;
}

body[data-page="profile"] #page-main > .creator-hdr {
  display: block !important;
  height: auto !important;
  min-height: 110px !important;
  position: relative !important;
  top: auto !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  padding: 16px 20px 0 !important;
}
body[data-page="profile"] #page-main > .creator-hdr .creator-hdr-top {
  display: flex !important;
  align-items: flex-start !important;
  min-height: 60px !important;
  opacity: 1 !important;
}
body[data-page="profile"] #page-main > .creator-hdr .creator-hdr-stats {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  margin: 10px 0 0 !important;
  border-top: 0.5px solid #f0ede8 !important;
}

body[data-page="claims"] .creator-hdr-stats button[role="listitem"] {
  border: none !important;
  background: transparent !important;
  font-family: var(--ff) !important;
  color: inherit !important;
  transition: background .15s !important;
  border-radius:var(--r-8) !important;
}
body[data-page="claims"] .creator-hdr-stats button[role="listitem"]:hover {
  background: rgba(87,0,255,.07) !important;
}
body[data-page="claims"] .creator-hdr-stats button[role="listitem"]:focus-visible {
  outline: 2px solid #5700ff !important;
  outline-offset: -2px !important;
}

@media (min-width: 769px) {

  body[data-page="claims"] #nav {
    display: flex !important;
  }

  body[data-page="claims"] #page-main {
    padding-top: calc(var(--nav, 56px)) !important;
  }

  body[data-page="claims"] .creator-hdr,
  body[data-page="claims"] .claims-content-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 48px !important;
    padding-right: 48px !important;
  }

  body[data-page="claims"] .creator-hdr-stats {
    display: flex !important;
    flex-wrap: nowrap !important;
  }

  body[data-page="claims"] #claims-monthly-usage,
  body[data-page="claims"] .claims-tabs,
  body[data-page="claims"] .claims-search-wrap,
  body[data-page="claims"] .claims-cards-wrap {
    padding-top: 16px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

.claim-card {
  padding: 16px !important;
}
.claim-card .cc-ico {
  flex-shrink: 0 !important;
}

.claim-card > div:first-child,
.claim-card .cc-ico + .cc-body {

}

.cc-card-inner {
  display: flex !important;
  gap: 12px !important;
  align-items: flex-start !important;
}

@media (min-width: 769px) {
  body[data-page="claims"] .claims-cards-wrap { padding-bottom: 32px !important; }
}

@media (min-width: 769px) {
  #verify-email-banner, #verify-banner { padding-left:48px !important; padding-right:48px !important; }
  body[data-page="feed"] #feed-topbar  { padding-left:48px !important; padding-right:48px !important; }
}

.creator-stat-n { font-variant-numeric: normal !important; font-family: var(--ff) !important; }

body

@media (min-width: 769px) {
  body[data-page="claims"] #page-main {
    max-width: 1200px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (min-width: 769px) {

  body[data-page="profile"] #nav {
    display: flex !important;
  }

  body[data-page="profile"] #page-main {
    padding-top: calc(var(--nav, 56px)) !important;
    background: #f5f3f0 !important;
    min-height: 100vh !important;
  }

  body[data-page="profile"] .creator-hdr.creator-hdr-profile {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 24px 48px 0 !important;
    background: transparent !important;
    border: none !important;
    position: relative !important;
    top: auto !important;
  }

  body[data-page="profile"] .prof-sidebar {
    position: sticky !important;
    top: calc(var(--nav, 56px) + 24px) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  body[data-page="profile"] .prof-panels {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    grid-column: 2 !important;
  }

  body[data-page="profile"] .prof-panel {
    border-radius:var(--r-md) !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  body[data-page="profile"] .prof-panel-h {
    padding: 16px 20px 12px !important;
    margin: 0 !important;
    border-bottom: 0.5px solid #f0ede8 !important;
  }

  body[data-page="profile"] .prof-panel > *:not(.prof-panel-h) {
    padding: 16px 20px !important;
  }
}

@media (min-width: 769px) {

  body[data-page="profile"] .prof-desktop-wrap {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 32px 48px 48px !important;
    gap: 28px !important;
  }

  body[data-page="profile"] .creator-hdr.creator-hdr-profile {
    width: 300px !important;
    min-width: 300px !important;
    flex-shrink: 0 !important;
    position: sticky !important;
    top: calc(var(--nav, 56px) + 24px) !important;
    height: fit-content !important;

    background: #fff !important;
    border: 0.5px solid #e8e5e0 !important;
    border-radius:var(--r-md) !important;
    padding: 20px !important;

    max-width: none !important;
    margin: 0 !important;
  }

  body[data-page="profile"] .creator-hdr-top {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 0 !important;
    padding-bottom: 12px !important;
    border-bottom: 0.5px solid #f0ede8 !important;
  }

  body[data-page="profile"] #prof-av {
    width: 72px !important;
    height: 72px !important;
    font-size: 24px !important;
    flex-shrink: 0 !important;
  }

  body[data-page="profile"] .creator-hdr-title {
    font-size: 16px !important;
    font-weight: 800 !important;
  }
  body[data-page="profile"] .creator-hdr-label {
    font-size: 12px !important;
  }

  body[data-page="profile"] .creator-hdr-bell {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
  }

  body[data-page="profile"] .creator-hdr-stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    max-width: none !important;
    width: 100% !important;
    margin-top: 12px !important;
    border-top: 0.5px solid #f0ede8 !important;
  }

  body[data-page="profile"] #prof-completeness {
    margin-top: 12px !important;
  }

  body[data-page="profile"] #prof-stats-nudge {
    text-align: left !important;
  }

  body[data-page="profile"] .prof-grid {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body[data-page="profile"] .prof-panels {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  body[data-page="profile"] .prof-panel {
    background: #fff !important;
    border: 0.5px solid #e8e5e0 !important;
    border-radius:var(--r-md) !important;
    overflow: hidden !important;
  }
}

.creator-sidebar {
  display: none;
}

.csn-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-radius:var(--r-8);
  background: transparent;
  color: var(--ink3, #555);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--ff);
  cursor: pointer;
  text-align: left;
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.csn-item:hover { background: rgba(87,0,255,.07); color: var(--violet, #5700ff); }
.csn-item.csn-active { background: rgba(87,0,255,.1); color: var(--violet, #5700ff); font-weight: 700; }
.csn-item svg { flex-shrink: 0; opacity: .7; }
.csn-item.csn-active svg { opacity: 1; stroke: var(--violet, #5700ff); }
.csn-section { display: flex; flex-direction: column; gap: 2px; }
.csn-footer { margin-top: auto; padding-top: 16px; border-top: 0.5px solid var(--border); }
.csn-footer-link { font-size: 12px; color: var(--ink4); text-decoration: none; font-weight: 600; }
.csn-footer-link:hover { color: var(--violet); }

@media (min-width: 769px) {

  body[data-page="settings"]:not(.user-business) #page-main {
    padding-top: calc(var(--nav, 56px)) !important;
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }

  body[data-page="settings"]:not(.user-business) .settings-content-wrap {
    display: block !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 48px 48px !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  body[data-page="settings"]:not(.user-business) .creator-sidebar {
    display: none !important;
  }

  body[data-page="settings"]:not(.user-business) .settings-main-col {
    width: 100% !important;
    padding: 0 !important;
  }

  body[data-page="settings"]:not(.user-business)
  body[data-page="settings"]:not(.user-business) .sst-tab {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--ink4) !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    background: transparent !important;
    cursor: pointer !important;
    font-family: var(--ff) !important;
    white-space: nowrap !important;
    transition: color .12s !important;
  }
  body[data-page="settings"]:not(.user-business) .sst-tab:hover {
    color: var(--violet) !important;
  }
  body[data-page="settings"]:not(.user-business) .sst-tab.sst-active {
    color: var(--violet) !important;
    border-bottom-color: var(--violet) !important;
    font-weight: 700 !important;
  }



  body[data-page="settings"]:not(.user-business) .settings-card {
    border: 0.5px solid #e8e5e0 !important;
    border-radius:var(--r-md) !important;
    padding: 20px 24px !important;
    margin-bottom: 12px !important;
    background: #fff !important;
  }

  body[data-page="settings"]:not(.user-business) .st-section-head {
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    color: var(--ink4) !important;
    margin-bottom: 12px !important;
  }

  body[data-page="settings"]:not(.user-business) #settings-inner-nav {
    display: none !important;
  }
}

body[data-page="profile"] {
  background: #f5f3f0 !important;
}
body[data-page="settings"]:not(.user-business) {
  background: #f5f3f0 !important;
}

@media (min-width: 769px) {
  body[data-page="profile"] .creator-hdr.creator-hdr-profile {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 48px;
    padding-right: 48px;
    position: relative;
    top: auto;
  }

  body[data-page="profile"] .prof-grid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 48px 48px;
  }
}

@media (min-width: 769px) {
  /* v=20260518gn9: empty selector — kept block for parser safety. */
}

body[data-page="feed"] .srm-nav,
body[data-page="claims"] .srm-nav,
body[data-page="notifications"] .srm-nav,
body[data-page="profile"] .srm-nav,
body[data-page="settings"] .srm-nav,
body[data-page="home"] .srm-nav {
  display: block !important;
}
/* v=20260518gn9: deal page kept out of the show rule above. Fixed
   "Claim collab →" CTA needs the bottom area. */
body[data-page="deal"] .srm-nav {
  display: none !important;
}

@media (min-width: 769px) {
  body[data-page="feed"] .srm-nav,
  body[data-page="deal"] .srm-nav,
  body[data-page="claims"] .srm-nav,
  body[data-page="notifications"] .srm-nav,
  body[data-page="profile"] .srm-nav,
  body[data-page="settings"] .srm-nav,
  body[data-page="home"] .srm-nav {
    display: none !important;
  }
}

body[data-page="login"] .srm-nav,
body[data-page="onboard"] .srm-nav,
body[data-page="pricing"] .srm-nav,
body[data-page="success"] .srm-nav {
  display: none !important;
}

/* v=20260518gn9: Guest CTA bar on mobile homepage */
.home-guest-bar { display: none; }
@media (max-width: 768px) {
  body[data-page="home"] .home-guest-bar {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 9000;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: rgba(255,255,255,.96);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-top: 1px solid rgba(20,20,30,.08);
    gap: 10px; align-items: center;
    /* v=20260518gn9: hidden until hero CTA scrolls offscreen */
    opacity: 0; transform: translateY(110%); pointer-events: none;
    transition: opacity .28s ease, transform .28s ease;
  }
  body[data-page="home"] .home-guest-bar.is-revealed {
    opacity: 1; transform: translateY(0); pointer-events: auto;
  }
}
.home-guest-bar .hgb-secondary {
  flex: 0 0 auto; font-size: 14px; font-weight: 700; color: var(--ink, #1a1a1a);
  text-decoration: none; padding: 12px 18px; border-radius: 999px;
  background: transparent; border: 1px solid rgba(20,20,30,.12);
  font-family: var(--ff); min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}
.home-guest-bar .hgb-primary {
  flex: 1 1 auto; font-size: 14px; font-weight: 800; color: #fff;
  background: var(--violet, #5700ff); border: none; padding: 12px 20px;
  border-radius: 999px; cursor: pointer; font-family: var(--ff);
  min-height: 44px; letter-spacing: -.1px;
}
.home-guest-bar .hgb-primary:active { transform: scale(.98); }
@media (max-width: 768px) {
  body[data-page="home"] {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 768px) {
  body[data-page="home"] #page-main,
  body[data-page="settings"] #page-main {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  }
}
/* ══ Landing page: sticky nav below announce bar ══
   The global #nav rule uses position:fixed which overlaps the ticker bar.
   For the home page we switch to position:sticky on the header,
   so the nav sits naturally below the announce bar in document flow
   and sticks once the ticker scrolls out of view. */
body[data-page="home"] header {
  position: sticky;
  top: 0;
  z-index: 900;
}
body[data-page="home"] #nav {
  position: relative; /* overrides global fixed — header is the sticky container */
  top: auto;
  left: auto;
  right: auto;
}
/* Hero: remove the --nav top-offset that compensated for the fixed nav overlap */
body[data-page="home"] #hero-grid {
  padding-top: 32px !important;
}


body[data-page="deal"] .inner-nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 200 !important;
  background: #fff !important;
  border-bottom: 0.5px solid var(--border) !important;
}

@media (max-width: 768px) {

}

body[data-page="privacy"] .srm-nav,
body[data-page="terms"] .srm-nav,
body[data-page="welcome"] .srm-nav {
  display: block !important;
}

@media (min-width: 769px) {
  body[data-page="privacy"] .srm-nav,
  body[data-page="terms"] .srm-nav,
  body[data-page="welcome"] .srm-nav {
    display: none !important;
  }
}

.creator-hdr-stats button[role="listitem"]:hover {
  background: rgba(87,0,255,.06) !important;
}
.creator-hdr-stats button[role="listitem"]:hover .creator-stat-n {
  color: var(--violet) !important;
}
.creator-hdr-stats button[role="listitem"]:focus-visible {
  outline: 2px solid var(--violet) !important;
  outline-offset: -2px !important;
}

.creator-hdr-stats button[role="listitem"]::after {
  content: '';
  display: block;
  height: 2px;
  width: 0;
  background: var(--violet);
  border-radius: 1px;
  margin: 2px auto 0;
  transition: width .2s;
}
.creator-hdr-stats button[role="listitem"]:hover::after {
  width: 20px;
}

@media (min-width: 769px) {
  .feed-desktop-logo {
    display: block !important;
  }
}

body[data-page="settings"]:not(.user-business) #page-main {
  display: block !important;
  height: auto !important;
  min-height: 100vh !important;
  overflow: visible !important;
  overflow-x: hidden !important;
  padding-top: calc(var(--nav, 56px)) !important;
  padding-bottom: 48px !important;
}
body[data-page="settings"]:not(.user-business) .settings-content-wrap {
  display: block !important;
  overflow: visible !important;
  min-height: auto !important;
}

.creator-hdr-stats button[role="listitem"] {
  min-height: 44px !important;
}

.prof-footer a,
.prof-url-display a,
#prof-stats-nudge a,
.prof-completeness-tip a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.oc-tab {
  min-height: 44px !important;
}

.sst-tab {
  min-height: 44px !important;
}

a.small-link,
.view-all-link,
.upgrade-inline-link {
  padding: 10px 4px;
  margin: -10px -4px;
}

#feed-notif-btn,
#feed-profile-btn,
.feed-search-btn {
  min-width: 44px !important;
  min-height: 44px !important;
}

@media (min-width: 769px) {

  body[data-page="feed"] #nav {
    display: flex !important;
  }

}

.nav-links-m {
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
  gap: 2px;
}

.nav-link-m {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink3);
  text-decoration: none;
  padding: 6px 13px;
  border-radius:var(--r-pill);
  transition: background .12s, color .12s;
  white-space: nowrap;
  line-height: 1;
}
.nav-link-m:hover {
  background: rgba(87,0,255,.07);
  color: var(--violet);
}
.nav-link-m.nav-link-m-active {
  color: var(--ink, #111);
  font-weight: 800;
}

@media (max-width: 1024px) {

}

@media (max-width: 768px) {

  #nav-plan-chip { display: none !important; }
  .nav-avatar-name { display: none !important; }
}

#nav {
  height: var(--nav, 64px);
}

.nav-links-m {
  display: none;
  align-items: center;
  gap: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.nav-link-m {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink3, #555);
  text-decoration: none;
  padding: 8px 16px;
  position: relative;
  white-space: nowrap;
  transition: color .12s;
  letter-spacing: -.1px;
}
.nav-link-m:hover {
  color: var(--ink, #111);
}

.nav-link-m.nav-link-m-active {
  color: var(--ink, #111);
  font-weight: 800;
}
.nav-link-m.nav-link-m-active::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink, #111);
}

.nav-avatar-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 6px 5px 14px;
  border: 1px solid #ddd;
  border-radius:var(--r-pill);
  background: #fff;
  cursor: pointer;
  transition: box-shadow .15s, border-color .15s;
  font-family: var(--ff);
}
.nav-avatar-pill:hover {
  box-shadow: var(--shadow-md);
  border-color: #bbb;
}

.nap-lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}
.nap-lines span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: #444;
  border-radius: 1px;
}

.nap-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--violet, #5700ff);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--ff);
  overflow: hidden;
}

.nav-bell-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: none;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--ink3);
  transition: background .12s;
  font-family: var(--ff);
}
.nav-bell-btn:hover {
  background: var(--bg2, #f5f3f0);
  color: var(--ink);
}

@media (max-width: 768px) {
  .nav-links-m  { display: none !important; }

}

@media (max-width: 768px) {
  #feed-filter-drawer > div {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }
}
@media (max-width: 500px) {
  #fdr-grid {
    grid-template-columns: 1fr !important;
  }
}

.fdr-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius:var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  border: 0.5px solid #e0ddd8;
  background: #fff;
  color: #666;
  cursor: pointer;
  font-family: var(--ff);
  white-space: nowrap;
  transition: all .12s;
  line-height: 1;
}
.fdr-chip:hover {
  border-color: #bbb;
  color: #111;
}
.fdr-chip.fdr-chip-on,
.fdr-chip[aria-pressed="true"] {
  background: rgba(87,0,255,.09);
  color: #5700ff;
  border-color: rgba(87,0,255,.3);
  font-weight: 700;
}

.nav-link-m-btn {
  cursor: pointer;
  border: none;
  background: none;
  font-family: var(--ff);
}
.nav-link-m-btn.filters-live {
  color: #5700ff;
  font-weight: 800;
}
.nav-link-m-btn.filters-live::after {
  background: #5700ff !important;
}

.nav-filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #5700ff;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  margin-left: 4px;
  vertical-align: middle;
  font-family: var(--ff);
}

@media (max-width: 768px) {
  #feed-filter-drawer > div {
    padding: 16px !important;
  }
}

@media (max-width: 768px) {
  .chip-mobile-filters {
    display: inline-flex !important;
  }
}
@media (min-width: 769px) {
  .chip-mobile-filters {
    display: none !important;
  }
}

body[data-page="settings"].user-business #nav { display: none !important; }

@media (max-width: 768px) {

}
@media (min-width: 769px) {
  body[data-page="settings"]:not(.user-business) #nav { display: flex !important; }
}

@media (min-width: 769px) {

  body[data-page="feed"] #feed-topbar {
    position: sticky !important;
    top: var(--nav, 68px) !important;
    z-index: 150 !important;
    padding-top: 16px !important;
    padding-bottom: 0 !important;
    background: #fff !important;
    border-bottom: 0.5px solid #e8e5e0 !important;
  }

  body[data-page="feed"] #feed-topbar > div > div:last-child {
    display: none !important;
  }

  body[data-page="feed"] .feed-desktop-logo {
    display: none !important;
  }
}

#verify-email-banner {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
#verify-email-banner.banner-visible {
  display: flex !important;
}

.creator-hdr-stats button:hover .creator-stat-n {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.creator-hdr-stats button {
  cursor: pointer;
}

#nav { overflow: visible; }
.nav-links-m { overflow: visible; }

.creator-hdr-stats button[aria-current="true"] .creator-stat-n {
  color: var(--violet, #5700ff);
}
.creator-hdr-stats button[aria-current="true"] .creator-stat-l {
  color: var(--violet, #5700ff);
  font-weight: 700;
}
.creator-hdr-stats button[aria-current="true"] {
  background: rgba(87,0,255,.06);
  border-radius:var(--r-sm);
}

.deal[data-deal-idx="0"] .deal-venue-name {
  font-size: 18px !important;
  letter-spacing: -.5px;
}
.deal[data-deal-idx="0"] .deal-body {
  padding: 14px 16px 12px;
}
.deal[data-deal-idx="0"] .deal-offer-value {
  font-size: 16px !important;
  margin-bottom: 10px;
}

.nav-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  /* 44×44 tap target floor — even if inline style override is missing */
  min-height: 44px;
}
.nav-logo img {
  height: 26px;
  width: auto;
  display: block;
}

.biz-sidebar-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  margin-bottom: 4px;
}
.biz-sidebar-logo img {
  height: 24px;
  width: auto;
  display: block;
}

.auth-brand-logo img,
.ob-topbar-logo img {
  height: 28px;
  width: auto;
  display: block;
}

.i-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.i-logo img {
  height: 22px;
  width: auto;
  display: block;
}

.ft-logo img {
  height: 20px;
  width: auto;
  display: block;
}

.nav-link-m[aria-current="page"] {
  color: var(--ink, #111) !important;
  font-weight: 800 !important;
}
.nav-link-m[aria-current="page"]::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink, #111);
}

.nav-link-m.nav-link-m-active,
.nav-link-m[aria-current="page"] {
  color: var(--ink, #111) !important;
  font-weight: 800 !important;
}
.nav-link-m.nav-link-m-active::after,
.nav-link-m[aria-current="page"]::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink, #111);
}

.creator-hdr-stats button {
  border-radius:var(--r-sm);
  padding: 6px 10px;
  border: 1px solid transparent;
  transition: background .15s, border-color .15s;
}
.creator-hdr-stats button:hover,
.creator-hdr-stats button:focus-visible {
  background: rgba(87,0,255,.05);
  border-color: rgba(87,0,255,.15);
}
.creator-hdr-stats button[aria-current="true"] {
  background: rgba(87,0,255,.07);
  border-color: rgba(87,0,255,.2);
}
.creator-hdr-stats button .creator-stat-n {
  font-family: var(--ff) !important;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  text-decoration-thickness: 1px;
}

#feed-topbar.subnav-collapsed #feed-row1 {
  max-height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.chip-filters-btn {
  flex-shrink: 0;
}
.chip-filters-btn.active-filters,
.chip-filters-btn[aria-expanded="true"] {
  background: #5700ff !important;
  color: #fff !important;
  border-color: #5700ff !important;
}

@media (min-width:769px){
  #feed-filter-drawer>div{
    padding-left:48px!important;
    padding-right:48px!important;
  }
}

@media (min-width: 769px) {
  #feed-filter-drawer > div {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
}

@media (min-width: 600px) {
  #fdr-sheet {
    border-radius:var(--r-md) !important;
    margin-bottom: 40px;
    transform: translateY(40px) scale(.97) !important;
    transition: transform .22s cubic-bezier(.32,.72,0,1), opacity .22s !important;
    opacity: 0;
  }
  #feed-filter-drawer[data-open="1"] #fdr-sheet {
    transform: translateY(0) scale(1) !important;
    opacity: 1;
  }
  #feed-filter-drawer {
    align-items: center !important;
  }
}
#fdr-sheet::-webkit-scrollbar { width: 0; }

#verify-email-banner {
  animation: _verifyFadeIn .25s ease;
}
@keyframes _verifyFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
[data-page="feed"] #verify-email-banner {
  margin: 8px 16px;
}
[data-page="claims"] #verify-email-banner {
  margin: 8px 16px;
}

body[data-page="settings"]:not(.user-business) .settings-tab-btn[aria-selected="true"],
body[data-page="settings"]:not(.user-business) .settings-tab-btn.active {
  color: var(--violet, #5700ff) !important;
  border-bottom-color: var(--violet, #5700ff) !important;
  font-weight: 800 !important;
  background: none !important;
}

body[data-page="settings"]:not(.user-business) .settings-section {
  display: none !important;
  padding: 16px 16px 80px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body[data-page="settings"]:not(.user-business) .settings-section.active {
  display: block !important;
}

/* v=20260517v BUG-2: biz users also need the !important enforcement.
   Auditor reported #st-venue staying display:block on every non-Venue tab,
   forcing other tabs to render below 850px of ghost Venue content. */
body[data-page="settings"].user-business .settings-section:not(.active) {
  display: none !important;
}
body[data-page="settings"]:not(.user-business) .settings-card {
  background: #fff !important;
  border: 0.5px solid #e8e5e0 !important;
  border-radius:var(--r-md) !important;
  overflow: hidden !important;
  margin-bottom: 12px !important;
  padding: 0 !important;
}

@media (min-width: 769px) {

  body[data-page="settings"]:not(.user-business) .st-layout-body {
    display: grid !important;
    grid-template-columns: 200px 1fr !important;
    gap: 0 !important;
    align-items: start !important;
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding: 24px 48px 80px !important;
  }

  body[data-page="settings"]:not(.user-business) .settings-tab-strip::-webkit-scrollbar {
    display: none !important;
  }

  body[data-page="settings"]:not(.user-business) .settings-content-wrap {
    display: block !important;
    padding: 0 0 80px 28px !important;
    min-width: 0 !important;
    overflow: visible !important;
    min-height: auto !important;
  }

  @media (min-width: 769px) {
    body[data-page="settings"]:not(.user-business)
  }

  body[data-page="settings"]:not(.user-business) .settings-card {
    background: #fff !important;
    border: 0.5px solid #e8e5e0 !important;
    border-radius:var(--r-md) !important;
    overflow: hidden !important;
    margin-bottom: 12px !important;
    padding: 0 !important;
  }
  body[data-page="settings"]:not(.user-business) .settings-card > *,
  body[data-page="settings"]:not(.user-business) .settings-card .sc-row,
  body[data-page="settings"]:not(.user-business) .settings-card .sc-inner {
    padding: 16px 20px !important;
  }
  body[data-page="settings"]:not(.user-business) .sc-title {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    color: var(--ink4) !important;
    padding: 16px 20px 0 !important;
  }
}

@media (min-width: 769px) {
  body[data-page="settings"]:not(.user-business) .settings-card .st-section-head,
  body[data-page="settings"]:not(.user-business) .settings-card .sc-row,
  body[data-page="settings"]:not(.user-business) .settings-card .ob-field,
  body[data-page="settings"]:not(.user-business) .settings-card .toggle-row,
  body[data-page="settings"]:not(.user-business) .settings-card .prof-av-wrap,
  body[data-page="settings"]:not(.user-business) .settings-card form,
  body[data-page="settings"]:not(.user-business) .settings-card .sr-toggle-wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  body[data-page="settings"]:not(.user-business) .settings-card .st-section-head {
    padding: 16px 20px 12px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    color: var(--ink4) !important;
    border-bottom: 0.5px solid var(--border) !important;
    margin-bottom: 0 !important;
  }

  body[data-page="settings"]:not(.user-business) .settings-section h2 {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--ink) !important;
    margin: 20px 0 8px !important;
    padding: 0 !important;
  }
  body[data-page="settings"]:not(.user-business) .settings-section > h2:first-child {
    margin-top: 0 !important;
  }

  body[data-page="settings"]:not(.user-business) .settings-signout-section {
    padding: 16px 0 0 !important;
    border-top: none !important;
  }
}

body[data-page="settings"]:not(.is-biz) .settings-biz-hdr {
  display: none !important;
}

body[data-page="settings"] .settings-tab-strip::-webkit-scrollbar { display: none !important; }

body[data-page="settings"] .settings-tab-btn {
  padding: 12px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ink3) !important;
  border: none !important;
  background: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -0.5px !important;
  transition: color .15s, border-color .15s !important;
  border-radius: 0 !important;
}
body[data-page="settings"] .settings-tab-btn:hover {
  color: var(--ink) !important;
}
/* v=zs: scope to non-biz — biz users have their own active tab rule
   above (yellow biz3 underline). This was unconditionally violet,
   overriding the biz theme and causing 'design collapse' on /settings/. */
body[data-page="settings"]:not(.user-business):not(.is-biz) .settings-tab-btn.active,
body[data-page="settings"]:not(.user-business):not(.is-biz) .settings-tab-btn[aria-selected="true"] {
  color: var(--violet) !important;
  font-weight: 800 !important;
  border-bottom-color: var(--violet) !important;
}
body[data-page="settings"].user-business .settings-tab-btn.active,
body[data-page="settings"].user-business .settings-tab-btn[aria-selected="true"],
body[data-page="settings"].is-biz .settings-tab-btn.active,
body[data-page="settings"].is-biz .settings-tab-btn[aria-selected="true"] {
  color: var(--bizInk, #3a3500) !important;
  font-weight: 800 !important;
  border-bottom-color: var(--biz3, #ede040) !important;
}

/* st-layout-body block override removed — grid rule at [213507] handles layout */

body[data-page="settings"]:not(.is-biz) .settings-content-wrap {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
}

body[data-page="settings"]:not(.is-biz) .settings-main-col {
  max-width: 680px !important;
  margin: 0 auto !important;
  padding: 24px 16px 80px !important;
}
@media (min-width: 769px) {
  body[data-page="settings"]:not(.is-biz) .settings-main-col {
    padding: 32px 24px 100px !important;
  }
}

body[data-page="settings"]:not(.is-biz) .settings-section {
  margin-bottom: 12px !important;
}

body[data-page="settings"]:not(.is-biz) .biz-main-content {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}

@media (min-width: 769px) {
  body[data-page="settings"]:not(.is-biz) .settings-content-wrap {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 0 !important;
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  body[data-page="settings"]:not(.is-biz) .settings-main-col {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 28px 16px 100px 16px !important;
    max-width: none !important;
    margin: 0 !important;
  }
}

@media (min-width: 769px) {
  body[data-page="settings"]:not(.is-biz) .settings-content-wrap {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    max-width: 920px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }
  /* v=20260518gn65: mirror — applies to ALL roles, role-gating is on individual buttons */
  body[data-page="settings"] .settings-snav-col {
    display: flex !important;
    flex-direction: column !important;
    width: 168px !important;
    flex-shrink: 0 !important;
    padding: 24px 8px 80px !important;
    position: sticky !important;
    top: var(--nav, 68px) !important;
    align-self: flex-start !important;
    min-height: calc(100vh - var(--nav, 68px) - 60px) !important;
  }

  body[data-page="settings"]:not(.is-biz) .settings-main-col {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 24px 16px 100px 16px !important;
    max-width: none !important;
    margin: 0 !important;
    /* height removed — prevents double scroll */
    overflow-y: visible !important;
  }
}

@media (max-width: 768px) {
  body[data-page="settings"] .settings-snav-col {
    display: none !important;
  }
  body[data-page="settings"]:not(.is-biz) .settings-main-col {
    padding: 16px 14px 80px !important;
  }
}

body[data-page="settings"]:not(.is-biz) .settings-snav-col-label {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: var(--ink4) !important;
  padding: 0 8px 10px !important;
}

body[data-page="settings"]:not(.is-biz) .settings-snav-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 9px 10px !important;
  background: none !important;
  border: none !important;
  border-radius:var(--r-sm) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ink3) !important;
  cursor: pointer !important;
  text-align: left !important;
  font-family: var(--ff) !important;
  transition: background .12s, color .12s !important;
  margin-bottom: 2px !important;
}
body[data-page="settings"]:not(.is-biz) .settings-snav-item svg {
  width: 15px !important;
  height: 15px !important;
  opacity: .4 !important;
  flex-shrink: 0 !important;
}
body[data-page="settings"]:not(.is-biz) .settings-snav-item:hover {
  background: var(--bg2) !important;
  color: var(--ink) !important;
}
body[data-page="settings"]:not(.is-biz) .settings-snav-item:hover svg {
  opacity: .7 !important;
}
body[data-page="settings"]:not(.is-biz) .settings-snav-item.active {
  background: rgba(87,0,255,.08) !important;
  color: var(--violet) !important;
  font-weight: 700 !important;
}
body[data-page="settings"]:not(.is-biz) .settings-snav-item.active svg {
  opacity: 1 !important;
  stroke: var(--violet) !important;
}

body[data-page="settings"]:not(.is-biz):not(.user-business) .biz-main-content {
  overflow: visible !important;
  height: auto !important;
}

body[data-page="settings"]:not(.is-biz):not(.user-business) {
  overflow-x: clip;
  overflow-y: visible;
}


.ob-field-lbl {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--ink4, #606060);
  display: block;
  margin-bottom: 6px;
}

/* Settings: belt-and-suspenders — hide biz header + inner nav for creator users */
body[data-page="settings"]:not(.is-biz):not(.user-business) .settings-biz-hdr,
body[data-page="settings"]:not(.is-biz):not(.user-business) #settings-inner-nav,
body[data-page="settings"]:not(.is-biz):not(.user-business) .inner-nav {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Deal cards: ensure AED value is readable in 3-col grid */
.deal .deal-aed,
.deal [class*="aed"] {
  font-weight: 700 !important;
}

/* Settings: hide sidebar nav for creator users on all viewport sizes */
/* snav-col desktop hide removed — mobile handled by @media */

/* st-layout-body grid:none override removed */

/* Settings: tab strip sticky on desktop for creator users */
body[data-page="settings"]:not(.is-biz):not(.user-business) 

/* Settings: eliminate grey gap — remove padding-top from page-main for settings
   and instead add it to the content below the (now sticky) tab-strip */
/* padding-top:0 removed — page-main keeps var(--nav) padding to clear fixed nav bar */
body[data-page="settings"]:not(.is-biz):not(.user-business) 

/* Heading alignment: unify left offset across pages to 16px */
body[data-page="claims"] .creator-hdr,
body[data-page="claims"] .creator-hdr-top {
  padding-left: 16px !important;
}

/* Deal card badges: green for value descriptors (FREE/DISCOUNT), violet for type labels (COLLAB) */
.d-badge.db-green {
  background: #16a34a !important;
  color: #fff !important;
}

body[data-page="settings"] .settings-biz-hdr .biz-hdr-sub {
  display: none !important;
}

body[data-page="settings"] #page-main.page,
body[data-page="settings"] #page-main.active,
body[data-page="settings"] #page-main.page.active {
  overflow: visible !important;
  overflow-x: clip !important;
}

/* Settings sections: scroll-margin-top ensures content isn't hidden under sticky tab strip */
body[data-page="settings"] .settings-section {
  scroll-margin-top: calc(var(--nav, 68px) + 44px + env(safe-area-inset-top, 0px) + 8px); /* nav + tab strip + safe area */
}

/* iOS auto-zoom prevention: all text inputs must be at least 16px */
input[type="text"], input[type="email"], input[type="password"],
input[type="url"], input[type="search"], input[type="tel"],
input[type="number"], textarea, select {
  font-size: max(16px, 1em) !important;
}

/* Mobile logo bar for biz pages without a dark header (offer, scan) */
.biz-mob-logo-bar {
  display: none;
  padding: 12px 20px 8px;
  background: #fff;
  border-bottom: 1px solid var(--border);
  /* v=20260518gn9 mirror */
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 768px) {
  .biz-mob-logo-bar {
    display: flex;
  }
}

/* ── QR Code modal ─────────────────────────────────────── */
#sr-qr-sheet {
  transition: opacity .18s ease;
  opacity: 0;
}

/* Desktop: settings tab buttons — kept horizontal across all roles for
   consistency. Earlier this had a biz-specific vertical pill rule that
   conflicted with the horizontal flex layout in the strip. Removed. */


/* ══════════════════════════════════════════════════════════════
   BIZ MOBILE — APPROVED MOCKUP DESIGN LANGUAGE
   ● Dark header (#3a3500) with yellow KPI numbers
   ● Yellow active nav (biz color scheme)
   ● Bento-style application cards with stat grids
   ● Dark summary cards (ad value)
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── BIZ HEADER: dark treatment matching mockup ── */
  body[data-page^="biz"] .biz-hdr {
    background: var(--bizInk, #3a3500) !important;
    padding: 13px 14px 15px !important;
    color: #fff !important;
  }
  /* Mobile biz logo inside dark header */
  body[data-page^="biz"] .biz-mob-logo {
    display: block !important;
    margin-bottom: 10px !important;
  }
  /* KPI row: 3-col bento on mobile */
  body[data-page^="biz"] .kpi-row {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 7px !important;
  }
  body[data-page^="biz"] .kpi {
    background: #fff !important;
    border: 1px solid rgba(20,20,30,.08) !important;
    border-radius: var(--r-sm, 10px) !important;
    padding: 10px 10px 9px !important;
  }
  body[data-page^="biz"] .kpi-n {
    font-size: 18px !important;
    font-weight: 900 !important;
    letter-spacing: -.5px !important;
    color: var(--ink, #1a1a1a) !important;
  }
  body[data-page^="biz"] .kpi-l {
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: rgba(20,20,30,.6) !important;
    margin-top: 3px !important;
  }
  /* Period toggle buttons */
  body[data-page^="biz"] .kpi-period-btn {
    background: none !important;
    color: rgba(20,20,30,.6) !important;
    padding: 3px 10px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
  }
  body[data-page^="biz"] .kpi-period-btn.active {
    background: var(--bizInk, #3a3500) !important;
    color: #fff !important;
  }
  /* Period picker wrapper */
  body[data-page^="biz"] [role="group"][aria-label="Time period"] {
    background: rgba(20,20,30,.05) !important;
    border-radius:var(--r-pill) !important;
    padding: 3px !important;
  }

  /* ── BIZ BOTTOM NAV: yellow active state ── */
  /* v=zz: extend to body.user-business so settings page (data-page="settings")
     also picks up the biz theming when the user is biz. Without this, biz user
     on /settings/ saw the bottom nav in creator-violet instead of biz-yellow. */
  body[data-page^="biz"] .srm-nav,
  body.user-business .srm-nav {
    --srm-active: var(--bizInk, #3a3500);
    --srm-active-ink: var(--bizInk, #3a3500);
    --srm-inactive: var(--ink4, #606060);
    --srm-line: var(--biz3, #ede040);
  }
  body[data-page^="biz"] .srm-item-active,
  body.user-business .srm-item-active {
    color: var(--bizInk, #3a3500) !important;
  }
  body[data-page^="biz"] .srm-item-active .srm-icon,
  body.user-business .srm-item-active .srm-icon {
    background: var(--bizMid, rgba(245,232,74,.25)) !important;
  }
  body[data-page^="biz"] .srm-item-active .srm-label,
  body.user-business .srm-item-active .srm-label {
    color: var(--bizInk, #3a3500) !important;
    font-weight: 800 !important;
  }
  /* CTA new-offer button in nav */
  body[data-page^="biz"] .srm-cta .srm-icon,
  body.user-business .srm-cta .srm-icon {
    background: var(--biz3, #ede040) !important;
    border-radius:var(--r-pill) !important;
  }
  body[data-page^="biz"] .srm-cta .srm-label,
  body.user-business .srm-cta .srm-label {
    color: var(--bizInk, #3a3500) !important;
    font-weight: 800 !important;
  }
  body[data-page^="biz"] .srm-cta .srm-icon svg,
  body.user-business .srm-cta .srm-icon svg {
    stroke: var(--bizInk, #3a3500) !important;
  }

  /* ── BIZ APPLICATION CARDS: 3-col stat grid ── */
  body[data-page^="biz"] .claim-card,
  body[data-page="biz/discovery"] .claim-card {
    border-radius: 14px !important;
    box-shadow: none !important;
    border: 1px solid var(--border) !important;
    margin-bottom: 10px !important;
    overflow: hidden !important;
  }
  /* Application approve/reject inline row */
  body[data-page^="biz"] .app-action-row {
    display: flex !important;
    gap: 8px !important;
    padding: 8px 14px 10px !important;
    border-top: 1px solid var(--border) !important;
  }
  body[data-page^="biz"] .app-approve-btn {
    flex: 1 !important;
    background: var(--greenLight, #dcfce7) !important;
    color: var(--greenDark, #15803d) !important;
    border-radius: 9px !important;
    padding: 9px 0 !important;
    text-align: center !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    border: none !important;
    cursor: pointer !important;
  }
  body[data-page^="biz"] .app-reject-btn {
    flex: 1 !important;
    background: var(--coralLight, #fee2e2) !important;
    color: var(--coral, #e53e3e) !important;
    border-radius: 9px !important;
    padding: 9px 0 !important;
    text-align: center !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    border: none !important;
    cursor: pointer !important;
  }

  /* ── BIZ CONTENT PAGE: metric tiles ── */
  body[data-page="biz/content"] .content-card-metrics {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 5px !important;
    margin-top: 8px !important;
  }
  body[data-page="biz/content"] .content-metric-tile {
    background: var(--surf, #f5f3f0) !important;
    border-radius: 6px !important;
    padding: 5px 6px !important;
    text-align: center !important;
  }
  /* AED value tile: yellow highlight */
  body[data-page="biz/content"] .content-metric-aed {
    background: var(--biz, #faef7c) !important;
    border-radius: 6px !important;
  }
  body[data-page="biz/content"] .content-metric-aed .content-metric-n {
    color: var(--bizInk, #3a3500) !important;
  }
  body[data-page="biz/content"] .content-metric-aed .content-metric-l {
    color: rgba(58,53,0,.65) !important;
  }

  /* ── BIZ SUMMARY DARK CARD ── */
  .biz-summary-dark {
    background: var(--bizInk, #3a3500) !important;
    border-radius: var(--r-md, 16px) !important;
    padding: 13px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 10px 14px !important;
  }
  .biz-summary-dark .biz-summary-n {
    font-size: 20px !important;
    font-weight: 900 !important;
    color: var(--biz, #faef7c) !important;
    letter-spacing: -.4px !important;
  }
  .biz-summary-dark .biz-summary-l {
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,.5) !important;
    margin-bottom: 3px !important;
  }

  /* ── BIZ QUICK ACTIONS ROW ── */
  body[data-page^="biz"] .biz-quick-actions {
    display: flex !important;
    gap: 8px !important;
    padding: 10px 14px 8px !important;
    background: var(--white) !important;
    border-bottom: 1px solid var(--border) !important;
  }
  body[data-page^="biz"] .biz-qa-primary {
    flex: 1 !important;
    background: var(--biz3, #ede040) !important;
    color: var(--bizInk, #3a3500) !important;
    border-radius:var(--r-sm) !important;
    padding: 10px 12px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    border: none !important;
    cursor: pointer !important;
    font-family: var(--ff) !important;
  }
  body[data-page^="biz"] .biz-qa-secondary {
    flex: 1 !important;
    background: var(--surf, #f5f3f0) !important;
    color: var(--ink3, #666) !important;
    border-radius:var(--r-sm) !important;
    padding: 10px 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    border: none !important;
    cursor: pointer !important;
    font-family: var(--ff) !important;
  }

  /* ── DEAL PAGE: hero height reduced, venue identity prominent ── */
  body[data-page="deal"] .deal-hero {
    height: 180px !important;
    min-height: 160px !important;
  }

  /* ── BIZ SCAN PAGE ── */
  body[data-page="biz/scan"] .scan-camera-frame {
    height: 190px !important;
    border-radius: var(--r-md, 16px) !important;
    overflow: hidden !important;
    position: relative !important;
    background: var(--bizInk, #3a3500) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  body[data-page="biz/scan"] .verified-result-card {
    background: var(--bizInk, #3a3500) !important;
    border-radius: var(--r-md, 16px) !important;
    overflow: hidden !important;
    margin: 0 14px 10px !important;
  }
  body[data-page="biz/scan"] .verified-result-card .verified-action {
    background: var(--biz3, #ede040) !important;
    color: var(--bizInk, #3a3500) !important;
    border-radius: 9px !important;
    padding: 11px 0 !important;
    text-align: center !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    margin: 10px 14px !important;
    font-family: var(--ff) !important;
  }

  /* ── BIZ OFFER BUILDER: segmented progress bar ── */
  body[data-page="biz/offer"] .ob-progress-bar {
    display: flex !important;
    gap: 4px !important;
    margin-bottom: 4px !important;
  }
  body[data-page="biz/offer"] .ob-progress-segment {
    flex: 1 !important;
    height: 4px !important;
    border-radius:var(--r-pill) !important;
    background: var(--border, #e8e5e0) !important;
  }
  body[data-page="biz/offer"] .ob-progress-segment.active {
    background: var(--biz3, #ede040) !important;
  }
  /* CTA button on offer builder: dark bg, yellow text */
  body[data-page="biz/offer"] .ob-footer .btn-biz {
    background: var(--bizInk, #3a3500) !important;
    color: var(--biz, #faef7c) !important;
    width: 100% !important;
    padding: 14px 0 !important;
    border-radius:var(--r-12) !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    letter-spacing: -.2px !important;
  }

  /* ── BIZ PAGE BACKGROUND ── */
  body[data-page^="biz"] .biz-main-content {
    background: var(--surf, #f5f3f0) !important;
  }
  body[data-page^="biz"] #page-main {
    background: var(--surf, #f5f3f0) !important;
    padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
  }
}



/* Pre-render class set before DOM is ready — prevents flash */
html._pre-biz body[data-page="settings"] .creator-only { display: none !important; }
/* v=zah: exclude .biz-sidebar so mobile @media hide-rule wins.
   Use `revert` so inline-flex elements (.cr-pill etc.) keep natural display.
   v=20260517v BUG-2: also exclude .settings-section — panels manage visibility
   via .active class via setSettingsTab(); reverting them here forced #st-venue
   visible on every non-Venue tab. */
html._pre-biz body[data-page="settings"] .biz-only:not(.biz-sidebar):not(.settings-section) { display: revert !important; }
html:not(._pre-biz) body[data-page="settings"] .biz-only { display: none !important; }
html:not(._pre-biz) body[data-page="settings"] .biz-sidebar { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   SOREEL MOBILE OVERRIDE — placed last, wins all cascades
   @media (max-width: 768px)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── GLOBAL ── */
  body { overflow-x: hidden !important; }
  #nav { display: none !important; }
  #page-main {
    padding-top: 0 !important;
    margin-top: 0 !important;
    overflow-x: hidden !important;
    padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ── FEED ── */
  body[data-page="feed"] #page-main {
    background: var(--surf, #f5f3f0) !important;
    display: flex !important; flex-direction: column !important;
    height: 100dvh !important; overflow: hidden !important;
  }
  body[data-page="feed"] #feed-topbar {
    flex-shrink: 0 !important; position: sticky !important;
    top: 0 !important; z-index: 200 !important;
    background: var(--white, #fff) !important;
    border-bottom: 1px solid var(--border, #e8e5e0) !important;
    padding: 10px 16px 0 !important;
  }
  body[data-page="feed"] .chips {
    overflow-x: auto !important; flex-wrap: nowrap !important;
    padding-bottom: 10px !important; gap: 6px !important;
    scrollbar-width: none !important;
  }
  body[data-page="feed"] .deals {
    flex: 1 !important; overflow-y: auto !important; overflow-x: hidden !important;
    display: flex !important; flex-direction: column !important;
    gap: 8px !important;
    padding: 10px 14px calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    scrollbar-width: none !important;
  }

  /* ── DEAL CARDS ── */
  .deal {
    border-radius: 14px !important; box-shadow: none !important;
    border: 1px solid var(--border, #e8e5e0) !important;
    width: 100% !important;
    /* v=20260518gn9: overflow:visible — was clipping footer content. */
    overflow: visible !important;
  }
  .deal:hover { transform: none !important; box-shadow: none !important; }
  .deal-banner {
    height: 80px !important;
    /* v=20260518gn9: darker tone so banner is visible when image fails. */
    background: #ece9e4 !important;
    display: flex !important; align-items: center !important;
    padding: 0 14px !important;
    position: relative !important; overflow: hidden !important;
  }
  .deal-banner img.pol-img {
    position: absolute !important; inset: 0 !important;
    width: 100% !important; height: 100% !important;
    object-fit: cover !important; opacity: 0.12 !important;
  }
  .deal-banner-text {
    position: relative !important; z-index: 2 !important; flex: 1 !important;
  }
  .deal-banner-eyebrow {
    display: block !important; font-size: 9px !important;
    font-weight: 800 !important; letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    color: var(--ink4, #606060) !important; margin-bottom: 3px !important;
  }
  .deal-banner-name {
    font-size: 15px !important; font-weight: 900 !important;
    letter-spacing: -.3px !important; color: var(--ink, #111) !important;
    line-height: 1.2 !important;
  }
  .deal-cat-tile {
    display: flex !important; align-items: center !important;
    justify-content: center !important;
    position: absolute !important; top: 50% !important; right: 14px !important;
    transform: translateY(-50%) !important;
    width: 46px !important; height: 46px !important;
    background: rgba(255,255,255,.7) !important;
    border-radius: var(--r-sm, 10px) !important;
    font-size: 22px !important; z-index: 2 !important;
  }
  .deal-body {
    padding: 12px 14px 14px !important;
    background: var(--white, #fff) !important;
    border-top: 1px solid var(--border, #e8e5e0) !important;
  }
  .deal-body-eyebrow, .deal-venue-name, .deal-loc { display: none !important; }
  .deal-offer-value {
    font-size: 13px !important; font-weight: 800 !important;
    color: var(--violet, #5700ff) !important; margin-bottom: 6px !important;
  }
  .aed-badge {
    display: inline-flex !important;
    background: var(--yellow, #faef7c) !important;
    color: var(--bizInk, #3a3500) !important;
    padding: 3px 8px !important; border-radius: 7px !important;
    font-size: 10px !important; font-weight: 800 !important;
  }
  .deal-footer {
    display: flex !important; align-items: center !important;
    justify-content: space-between !important;
    padding-top: 10px !important; margin-top: 10px !important;
    border-top: 1px solid var(--border, #e8e5e0) !important;
  }

  /* ── CLAIMS ── */
  body[data-page="claims"] #page-main {
    background: var(--surf, #f5f3f0) !important;
    display: flex !important; flex-direction: column !important;
    height: 100dvh !important; overflow: hidden !important;
  }
  .creator-hdr {
    flex-shrink: 0 !important; background: var(--white, #fff) !important;
    position: sticky !important; top: 0 !important; z-index: 100 !important;
    padding: 14px 16px 0 !important;
  }
  .creator-hdr-title {
    font-size: 20px !important; font-weight: 900 !important;
    letter-spacing: -.4px !important;
  }
  .creator-hdr-stats {
    border: none !important;
    border-top: 1px solid var(--border, #e8e5e0) !important;
    border-radius: 0 !important;
    margin: 8px -16px 0 !important; padding: 0 !important;
  }
  .claims-tabs {
    flex-shrink: 0 !important; background: var(--white, #fff) !important;
    padding: 0 16px !important;
    border-bottom: 1px solid var(--border, #e8e5e0) !important;
  }
  .oc-tab {
    font-size: 13px !important; padding: 10px 0 8px !important;
    border-radius: 0 !important; border: none !important;
    border-bottom: 2px solid transparent !important;
    background: none !important; margin-right: 20px !important;
  }
  .oc-tab-active, .oc-tab.on {
    border-bottom-color: var(--violet, #5700ff) !important;
    color: var(--violet, #5700ff) !important; font-weight: 800 !important;
  }
  .claims-cards-wrap {
    flex: 1 !important; overflow-y: auto !important;
    padding: 16px 14px calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    scrollbar-width: none !important;
  }
  .claim-card {
    margin: 0 0 8px !important; border-radius: 14px !important;
    box-shadow: none !important;
  }

  /* ── NOTIFICATIONS ── */
  body[data-page="notifications"] #page-main {
    background: var(--surf, #f5f3f0) !important;
    display: flex !important; flex-direction: column !important;
    height: 100dvh !important; overflow: hidden !important;
  }
  body[data-page="notifications"] .inner-nav {
    flex-shrink: 0 !important; background: var(--white) !important;
    position: sticky !important; top: 0 !important; z-index: 100 !important;
  }
  #notif-list {
    flex: 1 !important; overflow-y: auto !important;
    scrollbar-width: none !important;
  }
  .ni-unread { background: rgba(87,0,255,.025) !important; position: relative !important; }
  .ni-unread::before {
    content: "" !important; position: absolute !important;
    left: 0 !important; top: 0 !important; bottom: 0 !important;
    width: 3px !important; background: var(--violet, #5700ff) !important;
    border-radius: 0 3px 3px 0 !important;
  }

  /* ── PROFILE ── */
  body[data-page="profile"] #page-main {
    background: var(--surf, #f5f3f0) !important;
    display: flex !important; flex-direction: column !important;
    height: 100dvh !important; overflow: hidden !important;
  }
  .prof-av-lg {
    width: 56px !important; height: 56px !important;
    border-radius: 14px !important;
  }
  .creator-hdr-profile .creator-hdr-stats {
    margin: 0 -16px !important; border-radius: 0 !important;
  }

  /* ── COLLAB DETAIL ── */
  body[data-page="deal"] #page-main {
    background: var(--surf, #f5f3f0) !important;
    overflow-y: auto !important; height: 100dvh !important;
  }
  body[data-page="deal"] .inner-nav {
    position: sticky !important; top: 0 !important;
    z-index: 200 !important; background: var(--white) !important;
    border-bottom: 1px solid var(--border) !important;
  }
  body[data-page="deal"] .deal-body-wrap {
    padding: 0 !important; background: var(--surf) !important;
  }

  /* ── BOTTOM NAV ── */
  .srm-nav { display: block !important; }
  .srm-icon {
    width: 44px !important; height: 28px !important;
    border-radius:var(--r-pill) !important;
    display: flex !important; align-items: center !important;
    justify-content: center !important;
  }
  .srm-label { font-size: 11px !important; font-weight: 600 !important; }
  .srm-item-active .srm-icon {
    background: var(--violetMid, rgba(87,0,255,.1)) !important;
  }
  .srm-item-active .srm-label {
    color: var(--violet, #5700ff) !important; font-weight: 800 !important;
  }
  .srm-item-active svg { stroke: var(--violet, #5700ff) !important; }

  /* ── BIZ ── */
  body[data-page^="biz"] .biz-sidebar { display: none !important; }
  body[data-page^="biz"] .biz-main-content,
  body[data-page^="biz"] #biz-main {
    margin-left: 0 !important; width: 100% !important;
  }
  body[data-page^="biz"] .biz-hdr {
    background: var(--bizInk, #3a3500) !important;
    padding: 13px 14px 15px !important; color: #fff !important;
  }
  body[data-page^="biz"] .biz-mob-logo { display: block !important; }
  body[data-page^="biz"] .kpi-row {
    grid-template-columns: repeat(3, 1fr) !important; gap: 7px !important;
  }
  body[data-page^="biz"] .kpi {
    background: #fff !important;
    border: 1px solid rgba(20,20,30,.08) !important;
    border-radius: var(--r-sm, 10px) !important; padding: 10px !important;
  }
  body[data-page^="biz"] .kpi-n {
    font-size: 18px !important; font-weight: 900 !important;
    color: var(--ink, #1a1a1a) !important;
  }
  body[data-page^="biz"] .kpi-l {
    font-size: 11px !important; font-weight: 800 !important;
    letter-spacing: 1px !important; text-transform: uppercase !important;
    color: rgba(20,20,30,.6) !important;
  }
  body[data-page^="biz"] .srm-item-active .srm-icon,
  body.user-business .srm-item-active .srm-icon {
    background: var(--bizMid, rgba(245,232,74,.25)) !important;
  }
  body[data-page^="biz"] .srm-item-active .srm-label,
  body.user-business .srm-item-active .srm-label {
    color: var(--bizInk, #3a3500) !important;
  }
  body[data-page^="biz"] .srm-item-active svg,
  body.user-business .srm-item-active svg {
    stroke: var(--bizInk, #3a3500) !important;
  }

  /* v=zaa: hide mobile bottom nav on wizard pages where a fixed footer
     already occupies the bottom area. */
  body[data-page="biz/offer"] #srm-nav-biz,
  body.biz-wizard-mode #srm-nav-biz {
    display: none !important;
  }

  /* Settings page: creator vs biz UI separation */
  body[data-page="settings"]:not(.is-biz):not(.user-business) .biz-sidebar,
  body[data-page="settings"]:not(.is-biz):not(.user-business) .biz-only {
    display: none !important;
  }
  body[data-page="settings"].is-biz .settings-snav-col,
  body[data-page="settings"].user-business .settings-snav-col {
    display: none !important;
  }
  body[data-page="settings"].is-biz .creator-only,
  body[data-page="settings"].user-business .creator-only {
    display: none !important;
  }

}

/* ── Deal Sheet (bottom-sheet modal) ── */
#sr-deal-sheet {
  /* base styles set inline — these add polish */
}
#sr-deal-sheet .deal-body-wrap {
  background: var(--surf, #f5f3f0) !important;
  padding: 0 !important;
}
#sr-deal-sheet .inner-nav {
  display: none !important; /* no inner nav inside sheet */
}
#sr-deal-sheet .claim-bar {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1102 !important;
  background: #fff !important;
  border-top: 1px solid var(--border) !important;
  padding: 12px 14px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
}

  /* Settings tab strip: mobile only */
  @media (max-width: 768px) {
    /* (mobile-specific tabstrip overrides land below in the dedicated block) */
  }
/* v=20260518gn9 UI/UX FAIL FIX: removed [role="switch"]::after On/Off text
   that was bleeding inside every toggle. See shared.css for rationale. */

/* Show venue notifications for any user who has venues (not just full biz accounts) */
body.has-venues .settings-card.biz-only {
  display: block !important;
}
body.has-venues .toggle-row.biz-only,
body.has-venues .notif-row-biz.biz-only {
  display: flex !important;
}
body.has-venues .st-section-head.notif-row-biz {
  display: block !important;
}


/* ══════════════════════════════════════════════════════════
   SETTINGS PAGE — MOBILE OVERRIDES (≤768px)
   Fixes: tab switching, overflow, sidebar, nav, layout
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Issue 1: Tab switching — ensure only active section shows ── */
  body[data-page="settings"] .settings-section {
    display: none !important;
  }
  /* Belt-and-suspenders: hidden attribute always wins */
  body[data-page="settings"] .settings-section[hidden],
  body[data-page="settings"] .settings-section[aria-hidden="true"]:not(.active) {
    display: none !important;
  }

  /* ── Issue 2: Main col overflow — constrain to viewport width ── */
  body[data-page="settings"] .settings-main-col {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    padding: 0 0 80px 0 !important;
    flex: none !important;
  }
  body[data-page="settings"] .settings-card {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  body[data-page="settings"] .settings-section {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    padding: 12px 14px 80px !important;
  }
  body[data-page="settings"] .st-layout-body {
    display: block !important;
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }
  /* Ensure rows with buttons don't overflow */
  body[data-page="settings"] .soc-row,
  body[data-page="settings"] .settings-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  /* v=20260518gn63: mirror — see shared.css for full rationale */
  body[data-page="settings"] .toggle-row {
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 12px !important;
  }
  body[data-page="settings"] .toggle-row > div:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  body[data-page="settings"] .toggle-row .toggle-switch,
  body[data-page="settings"] .toggle-row > button[role="switch"] {
    flex-shrink: 0 !important;
  }
  body[data-page="settings"] .soc-row .btn,
  body[data-page="settings"] .settings-row .btn,
  body[data-page="settings"] .toggle-row .btn {
    flex-shrink: 0 !important;
  }

  /* ── Issue 3: Top nav overflow — hide on mobile (srm-nav handles it) ── */
  body[data-page="settings"] #nav {
    display: none !important;
  }

  /* ── Issue 4: Sidebar nav hidden on mobile (tab strip handles it) ── */
  body[data-page="settings"] .settings-snav-col {
    display: none !important;
  }

  /* ── Issue 5: Dark olive header — fix color to match app theme ── */
  body[data-page="settings"] .biz-hdr,
  body[data-page="settings"] .settings-hdr {
    background: #fff !important;
    color: var(--ink) !important;
    border-bottom: 1px solid var(--border) !important;
  }
  body[data-page="settings"] .biz-hdr *,
  body[data-page="settings"] .settings-hdr * {
    color: var(--ink) !important;
  }
  body[data-page="settings"] .biz-hdr a.btn,
  body[data-page="settings"] .settings-hdr a.btn {
    background: var(--bg2) !important;
    color: var(--ink3) !important;
    border-color: var(--border) !important;
  }

  /* ── Issue 9: Toggle switches — ensure reachable on mobile ── */
  body[data-page="settings"] .toggle-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }
  body[data-page="settings"] .toggle-row .toggle-switch {
    flex-shrink: 0 !important;
    margin-left: 0 !important;
  }

  /* ── Issue 11: Support chat FAB — push above bottom nav ── */
  #sr-support-launcher, #sr-support-fab, .sr-chat-fab, [id*="support"][id*="btn"] {
    bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* v=20260518gn9: panel height cap to keep it on-screen on small phones */
  #sr-support-panel {
    bottom: calc(130px + env(safe-area-inset-bottom, 0px)) !important;
    height: auto !important;
    max-height: calc(100vh - 150px - env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(100dvh - 150px - env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ── Issue 14: Flex items don't overflow — text truncation ── */
  body[data-page="settings"] .profile-header-text,
  body[data-page="settings"] .st-profile-name,
  body[data-page="settings"] .sr-n,
  body[data-page="settings"] .sr-h {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
  }

  /* Tab strip: horizontal scrollable on mobile */
  body[data-page="settings"] .settings-tab-strip::-webkit-scrollbar {
    display: none !important;
  }
  body[data-page="settings"] .settings-tab-btn {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    font-size: 12px !important;
    padding: 6px 12px !important;
  }
}

/* Settings page header: violet brand colors for creator accounts */
body[data-page="settings"]:not(.is-biz):not(.user-business) .settings-biz-hdr {
  background: linear-gradient(135deg, var(--violet, #5700ff) 0%, #7c3aed 100%) !important;
}
body[data-page="settings"]:not(.is-biz):not(.user-business) .biz-hdr-eyebrow,
body[data-page="settings"]:not(.is-biz):not(.user-business) .biz-hdr-title,
body[data-page="settings"]:not(.is-biz):not(.user-business) .biz-hdr-sub {
  color: #fff !important;
}
body[data-page="settings"]:not(.is-biz):not(.user-business) .settings-biz-hdr a,
body[data-page="settings"]:not(.is-biz):not(.user-business) .settings-biz-hdr button {
  color: rgba(255,255,255,.85) !important;
  border-color: rgba(255,255,255,.3) !important;
}


@media (max-width: 768px) {
  
}



/* biz-hdr always hidden on settings page for non-biz accounts */
@media (max-width: 768px) {
  body[data-page="settings"]:not(.is-biz):not(.user-business) .settings-biz-hdr {
    display: none !important;
  }
}


  body[data-page="settings"] .settings-tab-strip {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
}

/* ── Settings nav: desktop sidebar / mobile tab strip ── */
@media (min-width: 960px) {
  body[data-page="settings"]:not(.user-business) .settings-tab-strip { display: none !important; }
  body[data-page="settings"]:not(.user-business) .settings-snav-col  { display: flex !important; }
}

/* v=20260530gn75: biz desktop settings is designed to use the top tab-strip
   (matching /biz/ pages). The universal .settings-snav-col (gn65) was leaking
   in alongside it for biz, producing a duplicate vertical nav + an orphaned
   language toggle floating below it. Hide snav-col for biz on desktop so only
   the tab-strip shows. Creators are unaffected (they use snav-col, hidden via
   the rule above only when NOT user-business). */
@media (min-width: 960px) {
  body[data-page="settings"].user-business .settings-snav-col,
  body[data-page="settings"].is-biz .settings-snav-col { display: none !important; }
}

/* Biz header always hidden for non-biz accounts on settings page */
body[data-page="settings"]:not(.user-business) .settings-biz-hdr { display: none !important; }

/* Account form — remove extra padding that narrows the card vs other tabs */
#st-account-form { padding-left: 0 !important; padding-right: 0 !important; }

/* settings-main-col symmetric padding */
@media (min-width: 960px) {
  body[data-page="settings"] .settings-main-col {
    padding: 24px 16px 100px 16px !important;
  }
}

/* Mobile: hide snav — this must come AFTER the 769px flex rule to win cascade */
@media (max-width: 959px) {
  body[data-page="settings"] .settings-snav-col {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    overflow: hidden !important;
  }
}

/* Settings sections — only show the active one */
.settings-section { display: none !important; }

/* Mobile snav — must be last rule, beats min-width:769px flex */
@media (max-width: 960px) {
  .settings-snav-col,
  body .settings-snav-col,
  body[data-page="settings"] .settings-snav-col {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    overflow: hidden !important;
  }
}

/* settings-main-col — symmetric padding, final rule */
@media (min-width: 961px) {
  body[data-page="settings"] .settings-main-col {
    padding: 24px 16px 100px 16px !important;
  }
}
@media (max-width: 960px) {
  body[data-page="settings"] .settings-main-col {
    padding: 16px 16px 80px 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   SETTINGS MOBILE — comprehensive fix (≤960px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 960px) {

  /* Issue 1: snav must be fully removed from flow */
  .settings-snav-col,
  body .settings-snav-col,
  body[data-page="settings"] .settings-snav-col {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    pointer-events: none !important;
  }

  /* Issue 2: tab strip — single horizontal scrolling row */
  .settings-tab-strip,
  body[data-page="settings"] .settings-tab-strip {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 4px !important;
    padding: 8px 12px !important;
    background: var(--surf, #f5f3f0) !important;
    border-bottom: 1px solid var(--border) !important;
    position: sticky !important;
    top: var(--nav, 68px) !important;
    z-index: 100 !important;
  }
  .settings-tab-strip::-webkit-scrollbar { display: none !important; }

  /* Tab buttons minimum touch target */
  .settings-tab-btn {
    min-height: 44px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Issue 3: content wrap stretches full width */
  .settings-content-wrap {
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .settings-main-col {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 12px 100px 12px !important;
    overflow-x: hidden !important;
  }

  /* Cards full width on mobile */
  .settings-card {
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius:var(--r-12) !important;
  }

  /* Issue 5: social rows stack vertically */
  .soc-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 12px !important;
  }
  .soc-row .btn {
    align-self: stretch !important;
    width: 100% !important;
    justify-content: center !important;
    min-height: 44px !important;
  }
  .soc-row > div { flex: unset !important; width: 100% !important; }

  /* Issue 6: touch targets min 44px */
  .toggle-row,
  .settings-row,
  .sr-toggle-wrap {
    min-height: 44px !important;
  }
  .toggle-switch {
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Issue 8: content clears bottom nav */
  body[data-page="settings"] .settings-section {
    padding-bottom: 100px !important;
  }

  /* Plan & Billing — shorten label */
  #tab-billing .settings-tab-btn-label,
  #tab-billing { font-size: 11px !important; }

  /* st-layout-body mobile: single column */
  .st-layout-body {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    padding: 0 !important;
    gap: 0 !important;
  }
}

/* Issue 4: Global nav responsive */
@media (max-width: 960px) {
  .nav-links-r {
    margin-left: auto !important;
    gap: 4px !important;
  }
  .nav-avatar-pill span:not(.nav-avatar-img),
  .nav-avatar-pill .nav-avatar-name {
    display: none !important;
  }
  .nav-avatar-pill {
    padding: 4px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    justify-content: center !important;
  }
  .nav-links-r .nav-icon-btn,
  .nav-links-r button,
  .nav-links-r a {
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

/* Issue 7: Chat button above bottom nav bar */
@media (max-width: 960px) {
  #sr-chat-btn,
  .sr-chat-btn,
  [id*="chat-btn"],
  [class*="chat-btn"] {
    bottom: 160px !important;
  }
}

/* Issue 10: Shorten Plan & Billing label on mobile */
@media (max-width: 960px) {
  .tab-label-full { display: none !important; }
  .tab-label-short { display: inline !important; }
}

/* nav-links-l gap for injected links */
.nav-links-l {
  gap: 8px !important;
}
.nav-links-m {
  gap: 12px !important;
}
.nav-links-r {
  gap: 8px !important;
}

/* settings-main-col desktop padding — symmetric, final */
@media (min-width: 961px) {
  body[data-page="settings"] .settings-main-col {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* settings-main-col FINAL padding — symmetric, definitive */
@media (min-width: 961px) {
  body[data-page="settings"] .settings-main-col {
    padding: 24px 16px 100px 16px !important;
  }
}

/* Tab strip 44px touch targets — desktop and mobile */
body[data-page="settings"] .settings-tab-btn {
  min-height: 44px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* cta-band hidden — hero-grid is now the real hero */
.cta-band { display: none !important; }

/* settings-main-col — symmetric 16px, final definitive rule */
@media (min-width: 961px) {
  body[data-page="settings"] .settings-main-col {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Discover + My Collabs nav links — hide on mobile (in hamburger menu instead) */
@media (max-width: 960px) {
  #nav-my-collabs,
  #nav-discover-link,
  .nav-links-m .nav-a {
    display: none !important;
  }
}


/* ══════════════════════════════════════════════════════
   BOTTOM NAV — MODERN REDESIGN (final, wins everything)
   ══════════════════════════════════════════════════════ */

/* Container */
.srm-nav {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 600 !important;
  background: rgba(255,255,255,0.96) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-top: none !important;
  box-shadow: 0 -1px 0 rgba(0,0,0,0.06) !important;
  padding: 0 !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

/* Items row */
.srm-items {
  display: flex !important;
  justify-content: space-around !important;
  align-items: center !important;
  height: 58px !important;
  padding: 0 8px !important;
}

/* Each nav item */
.srm-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  flex: 1 !important;
  text-decoration: none !important;
  color: #B0A898 !important;
  min-height: 50px !important;
  padding: 0 !important;
  position: relative !important;
  transition: color 0.15s !important;
  opacity: 1 !important;
  border-radius: 0 !important;
  background: none !important;
}

/* Icon wrapper — pill background on active */
.srm-item .srm-icon,
.srm-item svg {
  width: 22px !important;
  height: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0 !important;
  background: none !important;
  transform: none !important;
  transition: none !important;
}

.srm-item svg {
  stroke: currentColor !important;
  stroke-width: 1.75 !important;
  fill: none !important;
}

/* Label */
.srm-item .srm-label,
.srm-item > span:not(.srm-badge):not(.srm-icon) {
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1px !important;
  text-transform: none !important;
  color: inherit !important;
  line-height: 1 !important;
}
.srm-item .srm-label::after { display: none !important; }

/* Active state — dot under icon, violet color */
.srm-item-active,
.srm-item.active,
.srm-item[aria-current="page"] {
  color: #5533CC !important;
}

.srm-item-active svg,
.srm-item.active svg,
.srm-item[aria-current="page"] svg {
  stroke: #5533CC !important;
  stroke-width: 2.2 !important;
}

.srm-item-active .srm-label,
.srm-item.active .srm-label,
.srm-item[aria-current="page"] span:not(.srm-badge) {
  font-weight: 700 !important;
  color: #5533CC !important;
}

/* Active dot indicator */
.srm-item-active::after,
.srm-item.active::after,
.srm-item[aria-current="page"]::after {
  content: '' !important;
  position: absolute !important;
  bottom: 4px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 4px !important;
  height: 4px !important;
  background: #5533CC !important;
  border-radius: 50% !important;
  display: block !important;
}

/* Kill old active icon transforms and backgrounds */
.srm-item-active .srm-icon,
.srm-item.active .srm-icon {
  background: none !important;
  transform: none !important;
  animation: none !important;
  width: 22px !important;
  height: 22px !important;
}
.srm-item .srm-icon::after { display: none !important; }

/* Notification badge — small dot when empty, count pill when numeric */
.srm-badge {
  position: absolute !important;
  top: 4px !important;
  left: 50% !important;
  margin-left: 4px !important;
  min-width: 16px !important;
  height: 16px !important;
  background: var(--coral, #e53e3e) !important;
  color: #fff !important;
  border-radius: 99px !important;
  border: 1.5px solid white !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  font-family: var(--ff) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 4px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}
/* Empty-content badges render as a small dot (creator notifications) */
.srm-badge:empty {
  min-width: 8px !important;
  width: 8px !important;
  height: 8px !important;
  padding: 0 !important;
  background: var(--violet, #5533CC) !important;
}

/* BIZ overrides — yellow/dark theme */
body[data-page^="biz"] .srm-item-active,
body[data-page^="biz"] .srm-item.active {
  color: #18130E !important;
}
body[data-page^="biz"] .srm-item-active svg,
body[data-page^="biz"] .srm-item.active svg {
  stroke: #18130E !important;
}
body[data-page^="biz"] .srm-item-active::after,
body[data-page^="biz"] .srm-item.active::after {
  background: #18130E !important;
}
body[data-page^="biz"] .srm-item-active .srm-label,
body[data-page^="biz"] .srm-item.active .srm-label {
  color: #18130E !important;
}

/* CTA button in biz nav */
body[data-page^="biz"] .srm-item.srm-cta .srm-icon {
  width: 36px !important;
  height: 36px !important;
  background: #FAEF7C !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 8px rgba(237,224,64,0.4) !important;
}
body[data-page^="biz"] .srm-item.srm-cta .srm-icon svg {
  stroke: #18130E !important;
}
body[data-page^="biz"] .srm-item.srm-cta::after { display: none !important; }

/* ── END BOTTOM NAV ── */

/* mainCol padding — symmetric final override */
@media (min-width: 961px) {
  .settings-main-col {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}
@media (max-width: 960px) {
  .settings-main-col {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

.tab-label-short { display: none !important; }
@media (max-width:960px) { .tab-label-short { display: inline !important; } .tab-label-full { display: none !important; } }

.settings-tab-btn:not(.on), .settings-tab-btn[aria-selected="false"] { color: var(--ink4, #606060) !important; }
.settings-tab-btn.on, .settings-tab-btn[aria-selected="true"] { color: var(--ink, #111) !important; }

/* settings-main-col authoritative padding */
@media (min-width: 961px) {
  body[data-page="settings"] .settings-main-col { padding-left: 16px !important; padding-right: 16px !important; }
}
@media (max-width: 960px) {
  body[data-page="settings"] .settings-main-col { padding-left: 16px !important; padding-right: 16px !important; }
}

@media (max-width: 959px) { #sr-support-launcher { bottom: 160px !important; right: 16px !important; } }

.st-save-btn { max-width: 320px; }

/* Settings tab visibility */
.settings-section { display: none !important; }
.settings-section.active { display: block !important; }
/* Tab strip */
.settings-tab-strip { position: sticky !important; top: 68px !important; z-index: 10 !important; background: #fff !important; border-bottom: 1px solid rgb(232,229,224) !important; }
/* v=zw/zaa: biz pages have no top nav, so the tab strip should pin to the very
   top of the viewport (desktop) or just below the compact sticky header (mobile). */
body[data-page="settings"].user-business .settings-tab-strip,
body[data-page="settings"].is-biz .settings-tab-strip {
  top: 0 !important;
}
@media (max-width: 768px) {
  /* On mobile biz settings, the compact sticky header is ~44px tall.
     Push the tab strip below it. */
  body[data-page="settings"].user-business .settings-tab-strip,
  body[data-page="settings"].is-biz .settings-tab-strip {
    top: 44px !important;
  }
}
/* Billing */
#st-billing label, #st-billing .st-label { font-size: 12px !important; }
#sr-payment-history th, .sr-payment-table th { font-size: 11px !important; }
.settings-snav-item { min-height: 44px !important; }
/* Account */
/* Account — creator save button violet; biz override fires elsewhere */
body[data-page="settings"]:not(.user-business):not(.is-biz) #st-account-save-btn:not([disabled]) { background: var(--violet) !important; color: #fff !important; border-color: var(--violet) !important; }
body[data-page="settings"].user-business #st-account-save-btn:not([disabled]),
body[data-page="settings"].is-biz #st-account-save-btn:not([disabled]) {
  background: var(--biz3, #ede040) !important;
  color: var(--bizInk, #3a3500) !important;
  border-color: var(--biz3, #ede040) !important;
}
#change-password-btn:hover { text-decoration: underline !important; }
.sr-locked-badge, [data-badge="locked"] { background: #f3f3f3 !important; color: #555 !important; }
/* Phone */
#sr-phone-number { max-width: none !important; }
/* Socials */
.soc-row { min-height: 80px; align-items: flex-start; }
/* Labels */
.st-label, .settings-main-col label { font-size: 12px !important; }
.ob-field label { font-size: 12px !important; }
/* Nav */
.nav-logo { min-height: 44px; }
.ntt{min-height:44px} #nav-bell-btn{min-width:44px;min-height:44px} #nav-cta-btn{min-width:44px;min-height:44px} #nav-search-btn{min-width:44px;min-height:44px} .nav-link{min-height:44px;display:inline-flex;align-items:center}
/* Deal card */
.deal { display: flex; flex-direction: column; }
.deal .card-footer, .deal .claim-btn-wrap { margin-top: auto; }
.deal .claim-btn { width: 100%; }
/* Footer links */
/* v=20260518gn48 (footer audit) */
.ft-links .ft-a, footer a, .sr-footer a { min-height: 44px; display: inline-flex; align-items: center; }

.ft-social{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ft-social-icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.06);color:rgba(255,255,255,.6);transition:background .15s,color .15s,transform .15s;text-decoration:none;flex-shrink:0}
.ft-social-icon:hover{background:var(--violet);color:#fff;transform:translateY(-1px)}
.ft-social-icon.ft-social-tiktok:hover{background:#fff;color:#000}
.ft-social-icon.ft-social-linkedin:hover{background:#0a66c2;color:#fff}
.ft-social-icon.ft-social-facebook:hover{background:#1877f2;color:#fff}
.ft-social-email{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:rgba(255,255,255,.55);text-decoration:none;margin-inline-start:6px;transition:color .15s;min-height:36px}
.ft-social-email:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
/* ─────────────────────────────────────────────────────────────
   P1: Feed activation tile + qualified/disqualified split
   ───────────────────────────────────────────────────────────── */
.sr-activation-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, #f0ebff 0%, #faf5ff 100%);
  border: 1px solid #d4b8ff;
  border-radius:var(--r-md);
  padding: 16px 18px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(87,0,255,.06);
}
.sr-activation-tile.sr-activation-soft {
  background: #fff;
  border-color: #e8e5e0;
}
.sr-activation-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius:var(--r-12);
  background: rgba(255,255,255,.7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5700ff;
  font-size: 20px;
  font-weight: 900;
}
.sr-activation-body {
  flex: 1;
  min-width: 0;
}
.sr-activation-title {
  font-size: 14px;
  font-weight: 800;
  color: #111;
  letter-spacing: -.2px;
  margin-bottom: 2px;
  line-height: 1.3;
}
.sr-activation-sub {
  font-size: 12px;
  color: #4a4a4a;
  line-height: 1.4;
}
.sr-activation-cta {
  flex-shrink: 0;
  white-space: nowrap;
}
.sr-activation-dismiss {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  font-size: 14px;
  color: #606060;
  cursor: pointer;
  padding: 4px 6px;
  line-height: 1;
  border-radius: 6px;
  font-family: var(--ff);
}
.sr-activation-dismiss:hover {
  background: rgba(0,0,0,.05);
  color: #111;
}
@media (max-width: 600px) {
  .sr-activation-tile {
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 16px 16px;
  }
  .sr-activation-icon { width: 36px; height: 36px; }
  .sr-activation-cta {
    width: 100%;
    margin-top: 4px;
  }
}

/* Feed divider between qualified and over-reach collabs */
.sr-feed-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 12px;
  padding: 0 4px;
}
.sr-feed-divider-line {
  flex: 1;
  height: 1px;
  background: #e8e5e0;
}
.sr-feed-divider-text {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: #606060;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Under-reach card demotion: dim until hover/focus.
   The divider header above the under-reach group explains why. */
.deal.deal-underreach {
  /* Lock pill + 'Build your reach' divider already signal locked status —
     keep brand colors crisp and only lightly dim. */
  opacity: 0.78;
  filter: none;
  transition: opacity .15s;
}
.deal.deal-underreach:hover,
.deal.deal-underreach:focus-within {
  opacity: 1;
  filter: saturate(1);
}
/* ── audit-au regressions: 44px touch targets, settings-page only ── */
body[data-page="settings"] .toggle-row,
body[data-page="settings"] .settings-row,
body[data-page="settings"] .sr-toggle-wrap {
  min-height: 44px;
}
/* v=20260518gn9: settings-page-specific 44×44 hit area now handled by the
   global .toggle-switch::after rule. Removed duplicate. */

/* Receipt download link — 44px tap height (B3) */
.ph-invoice-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Billing payment-history table headers (B4) */
body[data-page="settings"] .ph-table th,
.ph-table th {
  font-size: 11px;
}

/* Avatar — 80px on settings (B1 belt+braces in case inline style is missed) */
body[data-page="settings"] #st-avatar-circle {
  width: 80px !important;
  height: 80px !important;
}
body[data-page="settings"] #st-avatar-circle + button {
  width: 28px !important;
  height: 28px !important;
}

/* CREATOR / BUSINESS pill badge in nav (B6) — was 22px, bump for touch */
.nav-loggedin-only,
.role-pill {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
/* ── #4/#34: Deal card crawlable anchor + keyboard nav ── */
.deal { position: relative; }
.deal .deal-permalink {
  position: absolute;
  inset: 0;
  z-index: 0;
  text-decoration: none;
  /* anchor IS the focusable element — sized via inset:0 */
}
.deal .deal-permalink:focus-visible {
  outline: 2px solid var(--violet, #5700ff);
  outline-offset: 2px;
  border-radius:var(--r-md);
}
.deal .deal-banner > button,
.deal .claim-btn,
.deal .deal-actions,
.deal [onclick],
.deal button {
  position: relative;
  z-index: 1;
}
/* B3 — desktop nav touch targets ≥44px */
.nav-link-m {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* B4 — role pill touch target ≥44px (matches actual element ID) */
#nav-role-pill {
  min-height: 44px;
  align-items: center;
}
#nav-role-label {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
}
/* P1 — toggle switch hit target = 44×44 via ::after hit-expander.
   v=20260518gn9: previous content-box approach caused a "yellow donut" look
   on biz settings. New approach: keep the visual element at 38×22, expand
   the hit area via an invisible ::after pseudo. */
.toggle-switch::after {
  content: '';
  position: absolute;
  inset: -11px -3px;
  border-radius: var(--r-pill);
}
.toggle-switch {
  box-sizing: content-box;
  padding: 0;
  background-clip: border-box;
}
/* ── Filter switch refresh affordance ── */
/* Applied to #deal-cards-container while loadDeals() is in flight on a
   category switch. Keeps existing cards visible but dim — avoids the
   blank-then-repopulate flash that prefetch-then-replace would cause. */
.feed-refreshing {
  position: relative;
  pointer-events: none;
}
.feed-refreshing > .deal[data-deal-id] {
  opacity: 0.45;
  filter: saturate(0.6);
  transition: opacity .12s ease, filter .12s ease;
}
.feed-refreshing::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--violet, #5700ff) 50%, transparent 100%);
  background-size: 50% 100%;
  background-repeat: no-repeat;
  animation: feedRefreshShimmer 1.1s linear infinite;
  border-radius: 2px;
  z-index: 5;
}
@keyframes feedRefreshShimmer {
  0%   { background-position: -50% 0; }
  100% { background-position: 150% 0; }
}
/* Saved chip: distinct from category chips so users don't mistake it for a venue type */
body[data-page="feed"] #chip-saved-btn:not(.on) {
  background: rgba(87,0,255,.04) !important;
  color: var(--violet, #5700ff) !important;
  border-color: rgba(87,0,255,.25) !important;
  font-weight: 800;
}
body[data-page="feed"] #chip-saved-btn:not(.on):hover {
  background: rgba(87,0,255,.08) !important;
}
/* #9 — Destructive text-action button (Disconnect, Delete, etc.) */
.btn-destructive,
.btn.btn-destructive {
  background: transparent !important;
  border: none !important;
  color: var(--ink3, #555) !important;
  font-weight: 700 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(0,0,0,0.2);
}
.btn-destructive:hover,
.btn.btn-destructive:hover {
  color: #b91c1c !important;
  text-decoration-color: #b91c1c;
}
/* #8 — Claims stats card (white background variant) */
body[data-page="claims"] .creator-hdr-stats .creator-stat-n {
  color: var(--ink, #111);
  font-family: var(--ff);
  font-size: 24px;
  letter-spacing: -0.5px;
}
body[data-page="claims"] .creator-hdr-stats .creator-stat-l {
  color: var(--ink3, #555);
  font-weight: 800;
  letter-spacing: .5px;
}
/* Not Selected tile recedes — it's a negative/historical state */
body[data-page="claims"] .creator-hdr-stats > button:last-child .creator-stat-n {
  color: var(--ink4, #888);
  font-weight: 800; /* slightly less weight than active 900 */
}
body[data-page="claims"] .creator-hdr-stats > button:last-child .creator-stat-l {
  color: var(--ink4, #888);
}
/* Tab strip underline parity — match settings tab style (thicker bolder) */
body[data-page="claims"] .oc-tab[role="tab"][aria-selected="true"] {
  position: relative;
  font-weight: 900;
}
body[data-page="claims"] .oc-tab[role="tab"][aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 3px;
  background: var(--violet, #5700ff);
  border-radius: 2px 2px 0 0;
}


/* ── How-it-works timeline strip (deal page) ──────────────────── */
.hiw-section{
  padding:20px 16px 120px;
  background:#fff;
  border-top:0.5px solid var(--border, #e8e5e0);
}
.hiw-label{
  font-size:11px;font-weight:800;letter-spacing:1px;
  text-transform:uppercase;color:var(--ink4, #606060);
  margin-bottom:18px;
}
.hiw-row{
  display:grid;grid-template-columns:repeat(4, 1fr);gap:0;
  position:relative;
}
.hiw-row::before{
  content:'';position:absolute;
  top:16px; left:12.5%; right:12.5%;
  height:2px;background:var(--violetMid, #e8e0ff);
  z-index:0;
}
.hiw-node{
  display:flex;flex-direction:column;align-items:center;
  position:relative;z-index:1;
  text-align:center;
}
.hiw-dot{
  width:32px;height:32px;border-radius:50%;
  background:#fff;
  border:2px solid var(--violetMid, #e8e0ff);
  color:var(--violet, #5700ff);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:900;letter-spacing:-.2px;
  /* Halo with the section background punches through the connecting line */
  box-shadow:0 0 0 5px #fff;
}
.hiw-active .hiw-dot{
  background:var(--violet, #5700ff);
  border-color:var(--violet, #5700ff);
  color:#fff;
  box-shadow:0 0 0 5px #fff, 0 4px 12px rgba(87,0,255,.28);
}
.hiw-name{
  margin-top:8px;
  font-size:12px;font-weight:800;color:var(--ink, #111);
  letter-spacing:-.1px;
}
.hiw-meta{
  font-size:11px;font-weight:600;color:var(--ink4, #606060);
  margin-top:2px;line-height:1.3;
  /* Wrap long labels gracefully without breaking grid */
  max-width:80px;
}
.hiw-meta strong{ color:var(--ink, #111); font-weight:800; }

/* ════════════════════════════════════════════════════════════════
 * BIZ DESIGN SYSTEM (extracted from biz/index.html v=20260517v)
 * Bento grid + cards + pills + funnel + task rows + KPI strip
 *   + offer carousel + growth hero charts.
 * Used by: biz/index.html dashboard, eventually all biz sub-pages.
 *
 * DO NOT duplicate these classes inline in pages — extend here.
 * For page-specific variants, ADD AFTER this block.
 * ════════════════════════════════════════════════════════════════ */

/* ── Part 1: bento layout, cards, pills, funnel, tasks ── */
  /* ── Bento layout primitives ── Wio-inspired minimalism + biz colors ──
     Page bg: neutral light grey, lets cards pop without competing.
     Cards: pure white, no border, whisper shadow.
     Grid: 12-col asymmetric on desktop (≥900px), single column on mobile.
     Use .bento-span-{3,4,5,6,7,8,9,12} on a card to control desktop width.
  */
  /* v=20260518gn9 — unified biz page background to warm beige */
  body[data-page="biz"] .biz-main-content,
  body[data-page="biz/today"] .biz-main-content,
  body[data-page="biz/discovery"] .biz-main-content,
  body[data-page="biz/content"] .biz-main-content,
  body[data-page="biz/offers"] .biz-main-content,
  body[data-page="biz/venue"] .biz-main-content,
  body[data-page="biz/offer"] .biz-main-content {
    background: #f5f3f0 !important;
  }

  /* ── Phase 2 (v=15d): Inner-page bento hero ──────────────────────────── */
  .bento-hero-inner {
    padding: 24px 16px 16px;
    max-width: 1240px;
    margin: 0 auto;
  }
  @media (min-width: 900px) {
    .bento-hero-inner { padding: 36px 28px 20px; }
  }
  .bento-hero-title {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 900;
    color: var(--ink, #1a1a1a);
    margin: 0 0 6px;
    letter-spacing: -.8px;
    line-height: 1.15;
  }
  .bento-hero-sub {
    font-size: 14px;
    color: rgba(20,20,30,.72);
    max-width: 560px;
    margin: 0;
    line-height: 1.5;
  }

  /* ──────────────────────────────────────────────────────────────────
     v=20260517w: Page header row pattern. Unifies the eyebrow/title/sub
     block + right-slot CTA across biz pages (Applications, Content,
     Offers, Venues, Settings, Scan). The kicker (eyebrow) MUST match the
     sidebar label exactly — auditor reports of "eyebrow says X but page
     is Y" are closed at the markup level by editing the page's eyebrow
     div, not by adding CSS overrides.

     Markup:
       <div class="bento-hero-inner">
         <div class="ph-row">
           <div class="ph-text">
             <div class="bento-eyebrow">Sidebar Label</div>
             <h1 class="bento-hero-title">Page Title</h1>
             <p class="bento-hero-sub">One descriptive line, no stats.</p>
           </div>
           <div class="ph-right"><!-- 0 or 1 CTA/control --></div>
         </div>
       </div>

     Rules:
       - Subtitle never contains stats; stats go in the KPI card below.
       - Right slot holds at most one primary or secondary control.
       - Below this row, .kpi-row appears at the same width on every
         page because no page wraps the header in an extra container.
     ────────────────────────────────────────────────────────────────── */
  .ph-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
  }
  .ph-text { min-width: 0; flex: 1 1 200px; }
  .ph-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
  }
  /* AUDIT-NOTE ph-row: per-page <div style="display:flex..."> wrappers
     replaced by .ph-row in v=20260517w. If a new page is added and the
     KPI strip looks the wrong width, check that the page is NOT wrapping
     .bento-hero-inner in another padded container (e.g. old .biz-page-hdr). */

  .bento-wrap {
    padding: 16px;
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  @media (min-width: 900px) {
    .bento-wrap {
      padding: 28px;
      gap: 16px;
      grid-template-columns: repeat(12, 1fr);
      align-items: start;
    }
  }

  /* Desktop column spans — ignored on mobile (single col) */
  @media (min-width: 900px) {
    .bento-span-3  { grid-column: span 3; }
    .bento-span-4  { grid-column: span 4; }
    .bento-span-5  { grid-column: span 5; }
    .bento-span-6  { grid-column: span 6; }
    .bento-span-7  { grid-column: span 7; }
    .bento-span-8  { grid-column: span 8; }
    .bento-span-9  { grid-column: span 9; }
    .bento-span-12 { grid-column: span 12; }
  }

  .bento-card {
    background: #ffffff;
    border: none;
    border-radius: 20px;
    padding: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(20, 20, 30, .04);
    transition: box-shadow .2s, transform .2s;
  }
  @media (min-width: 900px) {
    .bento-card { padding: 28px; }
  }
  .bento-card.dark {
    background: linear-gradient(135deg, #1c1900 0%, #3a3500 100%);
    color: #fff;
    border: none;
    box-shadow:
      0 1px 2px rgba(0,0,0,.2),
      0 12px 28px -10px rgba(0,0,0,.35);
  }
  .bento-card.yellow {
    background: var(--biz3, #ede040);
    color: var(--bizInk, #3a3500);
    border: none;
  }
  .bento-card.violet {
    background: linear-gradient(135deg, #5700ff 0%, #8b3dff 100%);
    color: #fff;
    border: none;
  }
  .bento-card.soft-violet {
    background: rgba(87,0,255,.05);
    border: 1px solid rgba(87,0,255,.12);
  }
  .bento-card.soft-yellow {
    background: rgba(237,224,64,.15);
    border: 1px solid rgba(237,224,64,.4);
  }
  .bento-card.cream { /* legacy — kept for back-compat */
    background: #ffffff;
    color: var(--bizInk, #3a3500);
    border: none;
  }

  /* ── Eyebrow: Wio uses a small grey label, NOT shouty uppercase.
       Old uppercase eyebrow stays for back-compat but at lower volume. */
  .bento-eyebrow {
    font-size: var(--t-xs, 12px);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    opacity: .7;
    margin-bottom: 4px;
    color: var(--ink, #1a1a1a);
  }
  .bento-card.dark .bento-eyebrow { opacity: .55; color: rgba(255,255,255,.7); }

  .bento-title {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.3px;
    margin: 0 0 4px;
    line-height: 1.25;
    color: var(--ink, #1a1a1a);
  }
  @media (min-width: 700px) { .bento-title { font-size: var(--t-lg, 20px); } }

  .bento-sub {
    font-size: var(--t-sm, 14px);
    line-height: 1.5;
    color: rgba(20,20,30,.72);
    margin: 0;
  }

  /* ── Numbers: Wio uses heavy clean sans, not pixel-art Doto.
       Doto was a personality bet that doesn't match Wio's calm restraint.
       Switching to clean dark numbers at heavy weight. */
  .bento-num {
    font-family: var(--ff, -apple-system, BlinkMacSystemFont, "Inter", sans-serif);
    font-weight: 900;
    font-size: 36px;
    line-height: 1;
    letter-spacing: -1.5px;
    display: block;
    color: var(--ink, #1a1a1a);
  }
  @media (min-width: 700px) { .bento-num { font-size: 44px; } }
  .bento-num-lbl {
    font-size: var(--t-xs, 12px);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(20, 20, 30, .55);
    margin-top: 4px;
  }

  /* Pair grid: 2 cards side-by-side on desktop, stacked on mobile */
  .bento-pair {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  @media (min-width: 700px) {
    .bento-pair { grid-template-columns: 1fr 1fr; gap: 16px; }
  }

  /* Bento-pair-3: 3 KPI tiles in a row */
  .bento-pair-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  /* Hero card decorative dot (legacy) */
  .bento-dot {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    pointer-events: none;
  }

  /* ── Wio-style filled violet pill (primary CTA) ── */
  .bento-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,.18);
    color: inherit;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
    padding: 8px 14px;
    border-radius:var(--r-pill);
    border: none;
    cursor: pointer;
    font-family: var(--ff);
    transition: background .15s;
    min-height: 36px;
  }
  .bento-pill:hover { background: rgba(255,255,255,.28); }
  .bento-card.violet .bento-pill,
  .bento-card.dark .bento-pill { color: #fff; }
  .bento-pill-solid {
    background: var(--biz3, #ede040);
    color: var(--bizInk, #3a3500);
  }
  .bento-pill-solid:hover { background: #fff; }

  /* Period tabs inside performance card */
  .bento-tabs {
    display: inline-flex;
    background: rgba(255,255,255,.12);
    border-radius:var(--r-pill);
    padding: 3px;
    gap: 2px;
  }
  .bento-tabs .kpi-period-btn {
    padding: 5px 12px;
    border: none;
    border-radius:var(--r-pill);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    font-family: var(--ff);
    background: none;
    color: rgba(255,255,255,.7);
    transition: background .15s, color .15s;
    min-height: 32px;
  }
  .bento-tabs .kpi-period-btn.active {
    background: rgba(255,255,255,.22);
    color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
  }

  /* Horizontal scroll strip for apps preview */
  .bento-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin: 0 -20px;
    padding: 8px 20px 4px;
    scrollbar-width: none;
  }
  .bento-scroll::-webkit-scrollbar { display: none; }

  /* Personality: arrow nudge */
  .bento-arrow {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 800;
    text-decoration: none;
    color: inherit;
    transition: gap .15s;
  }
  .bento-arrow:hover { gap: 8px; }

  /* Header strip: cream-tinted, soft shadow on scroll */
  .bento-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(250, 246, 232, .92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(58,53,0,.06);
    position: sticky;
    top: 0;
    z-index: 20;
  }
  @media (min-width: 900px) {
    .bento-topbar { padding: 16px 24px; }
  }

/* ── Part 2: at-a-glance KPI strip, growth hero, offer carousel ── */
  /* ── At-a-glance KPI strip ── Wio: number + tiny label, no icon boxes ── */
  .atg-stat { display:flex; align-items:center; gap:10px; }
  .atg-icon {
    width: 36px; height: 36px;
    border-radius:var(--r-sm);
    background: rgba(20, 20, 30, .04);
    color: var(--ink, #1a1a1a);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  /* Mobile: left-aligned, desktop: right-aligned next to welcome */
  #atglance-block { justify-content: flex-start; }
  @media (min-width: 900px) {
    #atglance-block { justify-content: flex-end; }
  }
  .atg-num {
    font-family: var(--ff, -apple-system, BlinkMacSystemFont, "Inter", sans-serif);
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -1px;
    color: var(--ink, #1a1a1a);
    line-height: 1;
  }
  /* v=20260517w: atg-lbl typography now matches kpi-l (11px, ALL CAPS,
     .4px letter-spacing, 700 weight) so the dashboard's at-a-glance row
     speaks the same visual language as the KPI strips on inner pages.
     The layout intentionally differs (icon + stat vs. card strip) — only
     the label vocabulary is unified. */
  .atg-lbl {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: rgba(20, 20, 30, .6);
    margin-top: 4px;
  }

  /* ── Wio-style pills ──
     Primary action: filled violet (Wio's "Outgoing requests" / "Credit card").
     Secondary: violet outline pill (Wio's "Add different address").
     Tertiary / nav: plain text inactive, filled-dark active.
     Yellow kept as accent only (sparingly). */
  .cr-pill {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent;
    color: var(--ink, #1a1a1a);
    border: none;
    font-size: 14px; font-weight: 700;
    padding: 10px 18px; border-radius:var(--r-pill);
    cursor: pointer; font-family: var(--ff);
    transition: background .15s, color .15s, transform .1s;
    min-height: 38px;
    text-decoration: none;
    line-height: 1;
  }
  .cr-pill:hover { background: rgba(20, 20, 30, .05); }
  .cr-pill:active { transform: scale(.97); }
  .cr-pill.active {
    background: var(--violet, #5700ff);
    color: #fff;
  }
  /* ── PRIMARY: violet filled ── */
  .cr-pill-primary {
    background: var(--violet, #5700ff);
    color: #fff;
  }
  .cr-pill-primary:hover {
    background: #4500cc;
  }
  /* ── BIZ PRIMARY: yellow filled ── */
  .cr-pill-yellow {
    background: var(--biz3, #ede040);
    color: var(--bizInk, #3a3500);
  }
  .cr-pill-yellow:hover {
    background: var(--biz2, #f5e84a);
  }
  /* ── SECONDARY: violet outline ── */
  .cr-pill-outline {
    background: transparent;
    color: var(--violet, #5700ff);
    border: 1.5px solid var(--violet, #5700ff);
  }
  .cr-pill-outline:hover {
    background: rgba(87, 0, 255, .06);
  }
  /* ── TERTIARY: dark filled ── */
  .cr-pill-dark {
    background: var(--ink, #1a1a1a);
    color: #fff;
  }
  .cr-pill-dark:hover { background: #2d2d40; }
  /* ── ON-DARK GHOST ── */
  .cr-pill-translucent {
    background: rgba(255,255,255,.18);
    color: #fff;
  }
  .cr-pill-translucent:hover { background: rgba(255,255,255,.28); }

  /* ──────────────────────────────────────────────────────────────────
     v=20260518gn9: Button unification — Phase 1 (per spec).
     The button system is anchored on .cr-pill. The older .btn family
     is delegated to .cr-pill shape below so squared-corner .btn-violet
     and full-pill .cr-pill-primary stop diverging.

     Variant naming:
       .cr-pill-primary  → violet filled (universal primary)
       .cr-pill-biz      → yellow filled (biz-side primary; renamed
                            from .cr-pill-yellow, which is kept as alias)
       .cr-pill-outline  → violet outline (secondary)
       .cr-pill-dark     → ink filled (inverse emphasis)
       .cr-pill-translucent → white-translucent (on dark surfaces)

     Size modifiers (additive — base = 38px min-height):
       .cr-pill-sm   → 30px min-height (table-row actions, dense UI)
       .cr-pill-lg   → 48px min-height (hero CTAs)
       .cr-pill-full → width:100% (stacked forms)

     AUDIT-NOTE button-unify: if a new button is added and visually
     diverges from the rest, the fix is at the markup level — apply
     .cr-pill + a variant + (optional) a size, do NOT add a one-off
     class or inline style.
     ────────────────────────────────────────────────────────────────── */
  /* .cr-pill-biz is the canonical name; .cr-pill-yellow remains as
     an alias for backwards compatibility with existing markup. */
  .cr-pill-biz {
    background: var(--biz3, #ede040);
    color: var(--bizInk, #3a3500);
  }
  .cr-pill-biz:hover {
    background: var(--biz2, #f5e84a);
  }

  /* Size modifiers — additive on top of .cr-pill base */
  .cr-pill-sm {
    min-height: 30px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
  }
  .cr-pill-lg {
    min-height: 48px;
    padding: 14px 28px;
    font-size: 16px;
  }
  .cr-pill-full {
    width: 100%;
    justify-content: center;
  }

  /* Delegate .btn family to .cr-pill shape so the two systems converge.
     Previously .btn-violet had border-radius:var(--r-12) overridden via
     !important elsewhere, giving it squared corners while .cr-pill-primary
     was a full pill. Now both are pills. */
  .btn { border-radius: var(--r-pill) !important; }
  .btn-violet { border-radius: var(--r-pill) !important; }
  .btn-outline { border-radius: var(--r-pill) !important; }
  .btn-ghost { border-radius: var(--r-pill) !important; }
  .btn-yellow { border-radius: var(--r-pill) !important; }
  .btn-biz { border-radius: var(--r-pill) !important; }
  /* .btn-sm/md/lg override the pill radius back via !important. Re-pill them. */
  .btn-sm { border-radius: var(--r-pill) !important; }
  .btn-md { border-radius: var(--r-pill) !important; }
  .btn-lg { border-radius: var(--r-pill) !important; }

  /* ──────────────────────────────────────────────────────────────────
     v=20260518gn9: Button unification — Phase 2.
     Geometry normalization (radius + min-height + weight) for one-off
     button classes. Colors stay where they are (biz=yellow, creator=
     violet per surface). See shared.css for full notes.
     ────────────────────────────────────────────────────────────────── */
  .vb-soc-btn,
  .pp-faq-btn,
  .scb-btn,
  .btn-scan-again {
    border-radius: var(--r-pill) !important;
    min-height: 38px;
    font-weight: 700;
  }
  .ob-next-btn,
  .ob-back-btn,
  .vb-next-btn {
    border-radius: var(--r-pill) !important;
    min-height: 48px;
    font-weight: 800;
  }
  .gh-period-btn,
  .gh-plat-btn,
  .ob-platform-pill {
    border-radius: var(--r-pill) !important;
    min-height: 30px;
    font-weight: 700;
  }

  /* Compact arrow button (top-right of cards) */
  .cr-arrow-btn {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(20, 20, 30, .04);
    color: var(--ink, #1a1a1a);
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none;
    transition: background .15s;
    flex-shrink: 0;
    border: none;
    cursor: pointer;
  }
  .cr-arrow-btn:hover { background: rgba(20, 20, 30, .08); }

  /* Funnel progress bars (legacy — restyled to be quieter) */
  .cr-funnel-seg {
    border-radius: 14px;
    padding: 10px 14px;
    display: flex; flex-direction: column; justify-content: center;
    min-width: 0;
  }
  .cr-funnel-yellow { background: rgba(87, 0, 255, .08); color: var(--violet, #5700ff); }
  .cr-funnel-dark   { background: var(--violet, #5700ff); color: #fff; }
  .cr-funnel-grey   { background: rgba(20, 20, 30, .06); color: var(--ink, #1a1a1a); }
  .cr-funnel-num    {
    font-family: var(--ff, -apple-system, BlinkMacSystemFont, "Inter", sans-serif);
    font-weight: 900;
    font-size: 24px;
    line-height: 1;
    letter-spacing: -.8px;
  }
  .cr-funnel-lbl    {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    opacity: .65;
    margin-top: 4px;
  }

  /* Trend sparkline card — flatten warm cream gradient to white */
  .cr-trend-card { background: #fff; border: none; }

  /* Approval donut card — flatten cream gradient to white */
  .cr-donut-card { background: #fff; border: none; }

  /* Task rows in setup-checklist card (now light, not dark) */
  .cr-task-row {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px;
    background: transparent;
    border: 1px solid rgba(20, 20, 30, .08);
    border-radius: 14px;
    text-decoration: none;
    color: var(--ink, #1a1a1a);
    transition: background .15s, border-color .15s;
  }
  .cr-task-row:hover { background: rgba(20, 20, 30, .03); border-color: rgba(20, 20, 30, .14); }
  .cr-task-pending { opacity: .5; }
  .cr-task-num {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(20, 20, 30, .06);
    color: rgba(20, 20, 30, .5);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: 12px; font-weight: 800;
    font-family: var(--ff);
  }

  /* Quick links list */
  .cr-link-row {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 12px;
    border-radius:var(--r-12);
    text-decoration: none;
    color: var(--ink, #1a1a1a);
    font-size: 13px; font-weight: 700;
    transition: background .15s;
  }
  .cr-link-row:hover { background: rgba(58,53,0,.05); }
  .cr-link-icon {
    width: 32px; height: 32px;
    border-radius: 9px;
    background: rgba(58,53,0,.06);
    color: var(--bizInk, #3a3500);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }

  /* Pending creator cards inside dark applications panel */
  .biz-applications-strip.dark .biz-app-strip-scroll {
    /* will be styled by biz-ext.js render. ensure dark-friendly defaults */
  }

  /* Growth Hero period + platform pills — Wio style:
     unselected = plain text, selected = white pill on grey container.
     Container handles the grouping look. */
  .gh-period-btn, .gh-plat-btn {
    font-size: 13px; font-weight: 700;
    padding: 7px 14px;
    border: none; border-radius:var(--r-pill);
    cursor: pointer;
    font-family: var(--ff);
    background: transparent;
    /* v=20260518gn9 mirror (bilingual audit #9) */
    color: rgba(20, 20, 30, .72);
    transition: background .15s, color .15s, box-shadow .15s;
    min-height: 32px;
    line-height: 1;
  }
  .gh-period-btn:hover, .gh-plat-btn:hover { color: var(--ink, #1a1a1a); }
  /* ── Wio-style pill tabs for offer filter — scoped to dashboard's carousel section.
     Other pages (Content, Discovery) keep their yellow oc-tab-active. */
  .biz-offers-section .oc-tab {
    background: transparent;
    border: none;
    /* v=20260518gn9 mirror — same contrast bump */
    color: rgba(20, 20, 30, .72);
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 700;
  }
  .biz-offers-section .oc-tab:hover {
    background: rgba(20, 20, 30, .04);
    border: none;
    color: var(--ink, #1a1a1a);
  }
  .biz-offers-section .oc-tab-active,
  .biz-offers-section .oc-tab-active:hover {
    background: var(--violet, #5700ff);
    border: none;
    color: #fff;
  }

  /* ── Offer Carousel (Wio-style horizontal scroll) ──
     Wraps #biz-offer-cards in a scroll-snap track. Cards become fixed-width
     panels that swipe horizontally with arrow buttons (desktop) and dots
     indicator. Mobile: native touch-swipe with peek of next card.
     Scoped to .oc-carousel so #biz-offer-cards on other pages keeps grid. */
  .oc-carousel {
    position: relative;
    margin: 0 -20px; /* extend to card edges so swipe feels natural */
    padding: 0 20px;
  }
  .oc-carousel #biz-offer-cards {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    gap: 14px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 20px;
    scroll-padding-right: 20px;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0 12px;
    scrollbar-width: none; /* Firefox */
  }
  .oc-carousel #biz-offer-cards::-webkit-scrollbar { display: none; }
  .oc-carousel #biz-offer-cards .offer-card {
    flex: 0 0 calc(100% - 60px);  /* show ~60px of the next card as peek */
    max-width: 380px;
    min-width: 280px;
    scroll-snap-align: start;
    margin-bottom: 0 !important;
    height: auto;
    display: flex !important;
    flex-direction: column;
  }
  @media (min-width: 700px) {
    .oc-carousel #biz-offer-cards .offer-card {
      flex: 0 0 360px;  /* fixed-width cards on tablet+ */
    }
  }
  /* Empty state inside carousel — full width fallback */
  .oc-carousel #biz-offer-cards > div:not(.offer-card):not(.sr-only) {
    flex: 1 0 100%;
    max-width: 100%;
    min-width: 0;
  }

  /* Arrow buttons — desktop only by default, hidden on touch via @media */
  .oc-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 38px; height: 38px;
    border-radius: 50%;
    border: none;
    background: var(--bizInk, #3a3500);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: var(--ff);
    box-shadow: 0 6px 16px rgba(58,53,0,.22), 0 2px 4px rgba(58,53,0,.12);
    transition: opacity .15s, transform .12s, background .15s;
  }
  .oc-arrow:hover:not(:disabled) {
    background: #5a5300;
    transform: translateY(-50%) scale(1.06);
  }
  .oc-arrow:active:not(:disabled) {
    transform: translateY(-50%) scale(0.95);
  }
  .oc-arrow:disabled {
    opacity: 0;
    pointer-events: none;
  }
  .oc-arrow-prev { left: -6px; }
  .oc-arrow-next { right: -6px; }
  /* v=20260518gn9 (bilingual audit #2) mirror */
  html[dir="rtl"] .oc-arrow-prev { left: auto; right: -6px; }
  html[dir="rtl"] .oc-arrow-next { right: auto; left: -6px; }
  html[dir="rtl"] .oc-arrow svg { transform: scaleX(-1); }
  @media (min-width: 900px) {
    /* Show arrows on desktop only — on touch the swipe gesture is primary */
    .oc-arrow { display: inline-flex; }
  }

  /* Dots indicator — page-style, like Wio "Salary Plan" cards */
  .oc-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 6px 0 2px;
    min-height: 14px;
  }
  .oc-dots .oc-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(58,53,0,.18);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background .2s, width .2s;
  }
  .oc-dots .oc-dot.active {
    background: var(--bizInk, #3a3500);
    width: 18px;
    border-radius: 3px;
  }
  .oc-dots .oc-dot:hover:not(.active) { background: rgba(58,53,0,.35); }

/* ─── END BIZ DESIGN SYSTEM ─── */

/* ─── BIZ DESIGN SYSTEM — MOBILE DEFENSIVE LAYER (added v=20260517v) ─────
   Catches overflow, cramped spacing, and over-eager typography on narrow
   viewports. Order matters: rules go AFTER the main design system so they
   override desktop sizing on small screens. */

@media (max-width: 600px) {
  /* Bento wrap: tighter outer padding, more breathing room between cards */
  .bento-wrap {
    padding: 12px !important;
    gap: 10px !important;
  }
  /* Bento cards: smaller padding so content gets more real estate */
  .bento-card {
    padding: 16px !important;
    border-radius:var(--r-md) !important;
  }
  /* Bento headings scale down */
  .bento-title { font-size: 16px !important; line-height: 1.3 !important; }
  .bento-num { font-size: 22px !important; }
  /* Pills: smaller, more tap-friendly */
  .cr-pill {
    font-size: 12px !important;
    padding: 7px 12px !important;
    min-height: 36px !important;
  }
  /* Funnel segments: stack labels readably */
  .cr-funnel-seg {
    padding: 10px 8px !important;
    min-height: 56px !important;
  }
  .cr-funnel-num { font-size: 18px !important; }
  .cr-funnel-lbl { font-size: 10px !important; }
  /* Task rows: tighter padding, smaller circle */
  .cr-task-row { padding: 10px !important; gap: 10px !important; }
  .cr-task-num { width: 28px !important; height: 28px !important; font-size: 11px !important; }
  /* At-a-glance KPI strip stays as a strip but tightens */
  .atg-stat { gap: 8px !important; }
  .atg-icon { width: 30px !important; height: 30px !important; }
  /* v=zw: parent gap reduced on mobile so 3 stats fit on one row at 380px */
  #atglance-block {
    gap: 10px !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
  }
  /* v=20260517v AUDIT-NOTE #4: Content Library header on mobile */
  @media (max-width: 640px) {
    .content-header-row {
      flex-direction: column !important;
      align-items: stretch !important;
    }
    .content-header-actions {
      width: 100% !important;
      justify-content: flex-start !important;
    }
    body[data-page="biz/content"] .kpi-row {
      padding: 12px 10px !important;
      gap: 6px !important;
    }
    body[data-page="biz/content"] .kpi-row .bento-num {
      font-size: 18px !important;
    }
    body[data-page="biz/content"] .kpi-row .kpi-l {
      font-size: 9px !important;
      letter-spacing: .2px !important;
    }
  }

  /* Growth Hero filter pills shrink so all fit on one row */
  .gh-period-btn, .gh-plat-btn {
    font-size: 12px !important;
    padding: 6px 10px !important;
  }
  .gh-toggles {
    width: 100% !important;
    align-items: stretch !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .gh-toggles > div[role="group"] {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  .gh-header-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  /* Offer carousel arrows: hide on mobile (swipe is the gesture) */
  .oc-arrow { display: none !important; }
  /* Arrow buttons (corner action) shrink */
  .cr-arrow-btn { width: 28px !important; height: 28px !important; }
}

@media (max-width: 400px) {
  /* iPhone-SE class — gutters get tighter, type drops one more notch */
  .bento-wrap {
    padding: 10px !important;
    gap: 8px !important;
  }
  .bento-card {
    padding: 14px !important;
    border-radius: 14px !important;
  }
  /* Hero KPI strip: switch from 3-col to 2-col so labels don't truncate */
  .bento-card > [role="list"][aria-label*="stats" i] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Bento numbers smaller still */
  .bento-num { font-size: 20px !important; }
  /* Funnel: 3 segments on a 360px viewport is fine but tighten further */
  .cr-funnel-num { font-size: 16px !important; }
  .cr-funnel-lbl { font-size: 9px !important; letter-spacing: 0 !important; }
}

/* Universal mobile defense for inline-styled bento children that don't
   know to wrap. Belt-and-suspenders. */
@media (max-width: 600px) {
  .bento-card [style*="grid-template-columns:repeat(3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .bento-card [style*="flex-wrap"] { flex-wrap: wrap !important; }
}
/* ─── END BIZ DESIGN SYSTEM MOBILE DEFENSIVE LAYER ─── */



/* ── v=j: More-sheet (mobile nav slim-line) ─────────────────────────── */
/* Slide-up sheet that appears when user taps "More" in the 4-item bottom
   nav. Contains the secondary nav destinations (Venues / Creators /
   Content / Settings / Sign out) that were collapsed out of the bottom
   nav to reduce tap-target crowding. */
.srm-more-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 15, 25, .42);
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease;
  z-index: 950;
}
.srm-more-backdrop--open { opacity: 1; pointer-events: auto; }

.srm-more-sheet {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--white, #fff);
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, .18);
  padding: 12px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 951;
  transform: translateY(110%);
  transition: transform .28s cubic-bezier(.32, .72, 0, 1);
  max-height: 82vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.srm-more-sheet--open { transform: translateY(0); }
.srm-more-sheet:focus { outline: none; }

.srm-more-handle {
  width: 40px; height: 4px;
  background: var(--border, #e4e4ea);
  border-radius:var(--r-pill);
  margin: 0 auto 14px;
}
.srm-more-title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--ink4, #6e6e76);
  margin: 0 4px 8px;
}
.srm-more-list { display: flex; flex-direction: column; gap: 2px; }

.srm-more-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 12px;
  background: none; border: none;
  border-radius: 14px;
  font-family: var(--ff, 'Plus Jakarta Sans', sans-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink, #1a1a1a);
  text-decoration: none;
  cursor: pointer;
  min-height: 56px;
  text-align: left;
  width: 100%;
  transition: background .15s;
}
.srm-more-row:hover, .srm-more-row:focus-visible {
  background: var(--bg2, #f5f5f7);
  outline: none;
}
.srm-more-row:focus-visible {
  box-shadow: 0 0 0 2px var(--violet, #5700ff);
}
.srm-more-row[aria-current="page"] {
  background: rgba(87, 0, 255, .08);
  color: var(--violet, #5700ff);
}
.srm-more-row[aria-current="page"] .srm-more-icon { color: var(--violet, #5700ff); }

.srm-more-icon {
  flex-shrink: 0;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg2, #f5f5f7);
  border-radius:var(--r-12);
  color: var(--ink2, #2a2a32);
}
.srm-more-lbl { flex: 1; }
.srm-more-chev {
  font-size: 22px;
  font-weight: 300;
  color: var(--ink4, #6e6e76);
  line-height: 1;
}
.srm-more-row--danger { color: var(--coral, #e53e3e); margin-top: 6px; border-top: 1px solid var(--border); padding-top: 18px; border-radius: 0 0 14px 14px; }
.srm-more-row--danger .srm-more-icon { color: var(--coral, #e53e3e); background: rgba(229, 62, 62, .08); }

/* ── v=j: Mobile token layer ─────────────────────────────────────────
   Additive overrides for narrow viewports. Desktop is unaffected.
   Goal: more breathing room, larger numerals, single primary accent
   (violet). No biz-yellow on cards — yellow stays for CTA pills and
   the New Offer FAB only. */
@media (max-width: 768px) {
  /* Base type scale bump — bigger base font reduces overall feel of
     density without changing layout. */
  body { font-size: 17px; line-height: 1.45; }

  /* Card padding generosity. Most card-like containers in SoReel use one
     of these classes — bumping their internal padding by ~30% gives the
     "Withings breathing room" feel without rewriting layouts. */
  body.is-biz .bento-card,
  body.is-biz .vp-card,
  body.is-biz .cr-card,
  body.is-biz .kpi-row,
  body.is-biz .content-item,
  .bento-hero-inner {
    padding: 22px !important;
  }

  /* Bigger primary numbers — the "111.9 kg" effect. Any element using
     bento-num is a hero stat. v=20260518gn62: mirror — see shared.css */
  .bento-num:not(#cr-donut-pct) {
    font-size: clamp(34px, 8vw, 44px) !important;
    line-height: 1 !important;
    letter-spacing: -.02em;
  }
  #cr-donut-pct {
    font-size: 26px !important;
    line-height: 1 !important;
    letter-spacing: -.5px !important;
    font-weight: 900 !important;
  }

  /* Section heading typography — one obvious "this card is about X". */
  .bento-hero-title,
  .vp-title,
  .cr-title {
    font-size: clamp(22px, 5vw, 28px) !important;
    line-height: 1.15 !important;
    letter-spacing: -.01em;
  }

  /* Gap between stacked cards in main column. */
  .biz-main-content > * + * { margin-top: 14px; }

  /* Demote biz-yellow on mobile cards. Keep yellow only on:
     - .srm-cta (the New Offer FAB)
     - .btn-biz (action buttons)
     - .biz-pill / .cr-pill-yellow (intentional pills)
     Everything else uses violet as the single accent. */
  body.is-biz .bento-card,
  body.is-biz .vp-card,
  body.is-biz .kpi-row {
    background: var(--white, #fff) !important;
    border: 1px solid var(--border, #e4e4ea) !important;
  }

  /* Larger tap targets on More-sheet rows on small screens. */
  .srm-more-row { min-height: 60px; font-size: 16px; }
}
/* ── end v=j mobile token layer ──────────────────────────────────── */

/* ─── v=20260517v defensive pill rule ──────────────────────────────
   The 'Review now → New offer' pills on /biz/ were reportedly rendering
   as raw <a> elements on mobile. Likely a cascade-specificity issue with
   the body[data-page^="biz"] a:not() override. Repeating .cr-pill rules
   with higher specificity at the END of the file guarantees they win.
   Defensive — does nothing if the regular rules were already applying. */
body[data-page^="biz"] a.cr-pill,
body[data-page^="biz"] button.cr-pill {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--ink, #1a1a1a) !important;
  border: none;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 18px !important;
  border-radius: var(--r-pill, 999px) !important;
  cursor: pointer;
  font-family: var(--ff, -apple-system, sans-serif);
  min-height: 38px;
  text-decoration: none !important;
  line-height: 1;
  transition: background .15s, color .15s, transform .1s;
}
body[data-page^="biz"] a.cr-pill-primary,
body[data-page^="biz"] button.cr-pill-primary {
  background: var(--violet, #5700ff) !important;
  color: #fff !important;
}
body[data-page^="biz"] a.cr-pill-yellow,
body[data-page^="biz"] button.cr-pill-yellow,
body[data-page^="biz"] a.cr-pill-biz,
body[data-page^="biz"] button.cr-pill-biz {
  background: var(--biz3, #ede040) !important;
  color: var(--bizInk, #3a3500) !important;
  border: none !important;
}
body[data-page^="biz"] a.cr-pill-dark,
body[data-page^="biz"] button.cr-pill-dark {
  background: var(--ink, #1a1a1a) !important;
  color: #fff !important;
}
body[data-page^="biz"] a.cr-pill-outline,
body[data-page^="biz"] button.cr-pill-outline {
  background: transparent !important;
  color: var(--violet, #5700ff) !important;
  border: 1.5px solid var(--violet, #5700ff) !important;
}
/* ─── end v=zj defensive pill rule ─────────────────────────────── */

/* ════════════════════════════════════════════════════════════════════
   v=zae+zaf: Settings page header unified to .bento-hero-inner pattern.
   Same container/padding/typography as /biz/content/, /scan/, /discovery/.
   The .settings-bento-hdr scoping class only carries the biz mobile
   compact-sticky-header override below.
   ════════════════════════════════════════════════════════════════════ */
/* Mobile: biz users get a compact sticky header (matches bento-topbar pattern) */
@media (max-width: 768px) {
  body[data-page="settings"].user-business .settings-bento-hdr {
    padding: 10px 16px !important;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(20, 20, 30, .06);
    position: sticky;
    top: 0;
    z-index: 20;
    margin-bottom: 0;
  }
  body[data-page="settings"].user-business .settings-bento-hdr .bento-eyebrow,
  body[data-page="settings"].user-business .settings-bento-hdr .bento-hero-sub {
    display: none;
  }
  body[data-page="settings"].user-business .settings-bento-hdr .bento-hero-title {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.3px;
    line-height: 1.2;
    margin: 0;
  }
}
/* ──── end settings header unification ─────────────────────────────── */
   Applied to common interactive elements (buttons, anchor pills, nav rows,
   cards) so users get a tactile press cue. Disabled on desktop to keep
   pointer interaction crisp. Respects prefers-reduced-motion.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
  .cr-pill:active,
  .btn:active,
  button:active:not([disabled]),
  .srm-item:active,
  .srm-more-row:active,
  .biz-nav-item:active,
  .bento-card[role="button"]:active,
  .bento-card[onclick]:active,
  a.bento-card:active,
  a[role="button"]:active,
  .settings-tab-btn:active,
  .today-action-tile:active {
    transform: scale(.96);
    transition: transform .08s ease-out;
  }
}
/* ──── end v=zah tap feedback ──────────────────────────────────── */
   Use on any container of filter chips/pills that should remain on one line.
   ════════════════════════════════════════════════════════════════════ */
.cr-filter-row {
  display: flex;
  flex-wrap: nowrap !important;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cr-filter-row::-webkit-scrollbar { display: none; }
.cr-filter-row > * { flex-shrink: 0; }
/* v=20260518gn9 (audit #10 re-fix): filter row mask universal (was gated
   to max-width: 900px; auditor at 1061px desktop saw no fade). */
.cr-filter-row {
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 92%, transparent 100%);
          mask-image: linear-gradient(to right, #000 0, #000 92%, transparent 100%);
}
html[dir="rtl"] .cr-filter-row {
  -webkit-mask-image: linear-gradient(to left, #000 0, #000 92%, transparent 100%);
          mask-image: linear-gradient(to left, #000 0, #000 92%, transparent 100%);
}
/* ──── end filter row utility ──────────────────────────────────── */
/* ════════════════════════════════════════════════════════════════════
   v=20260517v: NUCLEAR — settings page mobile fixes that keep regressing.
   
   1. Biz sidebar must NEVER show on mobile, even for biz users on settings.
      Multiple rules have been fighting; this wins with html-level specificity.
   
   2. Settings page top-nav must be hidden for biz users on mobile (top SoReel
      logo was leaking in past screenshots).
   
   3. Header container alignment: match siblings, no narrower beige box.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  html body[data-page="settings"] .biz-sidebar,
  html body[data-page="settings"].user-business .biz-sidebar,
  html._pre-biz body[data-page="settings"] .biz-sidebar {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
  html body[data-page="settings"] #nav,
  html body[data-page="settings"].user-business #nav,
  html._pre-biz body[data-page="settings"] #nav {
    display: none !important;
  }
  /* Settings header on mobile — no width constraints, no card-styled wrap */
  body[data-page="settings"] .settings-bento-hdr {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 16px 16px 8px !important;
  }
  /* Hide the back pill on mobile — the More drawer covers navigation */
  body[data-page="settings"] .settings-bento-hdr .cr-pill-outline {
    display: none !important;
  }
}
/* Desktop: ensure no violet vertical divider appears between tabs */
@media (min-width: 769px) {
  body[data-page="settings"] .settings-tab-btn::after,
  body[data-page="settings"] .settings-tab-btn::before {
    display: none !important;
    content: none !important;
  }
  body[data-page="settings"] .settings-tab-btn {
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    outline: none !important;
  }
  body[data-page="settings"] .settings-tab-btn:focus {
    outline: none !important;
  }
  body[data-page="settings"] .settings-tab-btn:focus-visible {
    outline: none !important;
    border-bottom-color: var(--violet, #5700ff) !important;
    box-shadow: 0 1px 0 0 var(--violet, #5700ff) !important;
  }
}
/* ──── end v=20260517v settings nuclear fixes ──────────────────── */

/* ════════════════════════════════════════════════════════════════════
   v=zah: Mobile tap feedback — slight scale on :active.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
  .cr-pill:active,
  .btn:active,
  button:active:not([disabled]),
  .srm-item:active,
  .srm-more-row:active,
  .biz-nav-item:active,
  .bento-card[role="button"]:active,
  .bento-card[onclick]:active,
  a.bento-card:active,
  a[role="button"]:active,
  .settings-tab-btn:active,
  .today-action-tile:active {
    transform: scale(.96);
    transition: transform .08s ease-out;
  }
}
/* ──── end v=zah tap feedback ──────────────────────────────────── */

/* ════════════════════════════════════════════════════════════════════
   v=20260517v: Filter row utility — horizontal scroll on overflow, never wrap.
   ════════════════════════════════════════════════════════════════════ */
.cr-filter-row {
  display: flex;
  flex-wrap: nowrap !important;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cr-filter-row::-webkit-scrollbar { display: none; }
.cr-filter-row > * { flex-shrink: 0; }
/* ──── end filter row utility ──────────────────────────────────── */

/* ════════════════════════════════════════════════════════════════════
   v=20260518gn9: REMOVED opacity-0 anti-flicker cloak on settings.
   See shared.css for full context.
   ════════════════════════════════════════════════════════════════════ */
body[data-page="settings"]:not([data-settings-ready]) .settings-section,
body[data-page="settings"][data-settings-ready] .settings-section {
  opacity: 1;
}
/* ──── end anti-flicker ──────────────────────────────────────── */

/* v=20260517v AUDIT-NOTE #1: settings mobile — nuclear override */
@media (max-width: 960px) {
  body[data-page="settings"] .settings-snav-col,
  body[data-page="settings"] nav.settings-snav-col,
  body[data-page="settings"] .creator-only.settings-snav-col,
  html body[data-page="settings"] .settings-snav-col {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
  }
  body[data-page="settings"] .st-layout-body,
  html body[data-page="settings"] .st-layout-body {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
  }
  body[data-page="settings"] .settings-main-col,
  html body[data-page="settings"] .settings-main-col {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
    /* v=20260518gn9: force visible. See shared.css for full rationale. */
    overflow: visible !important;
    height: auto !important;
    min-height: auto !important;
  }
  body[data-page="settings"] .settings-content-wrap,
  html body[data-page="settings"] .settings-content-wrap {
    overflow: visible !important;
    height: auto !important;
    min-height: auto !important;
    flex: 1 1 auto !important;
  }
  body[data-page="settings"] .settings-section.active,
  html body[data-page="settings"] .settings-section.active {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: 200px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   v=20260518gn9: Wizard-mode bottom-nav hide — ALWAYS-ON.
   See shared.css for full notes. Duplicate here for build parity.
   ───────────────────────────────────────────────────────────────── */
body[data-page="biz/offer"] #srm-nav-biz,
body.biz-wizard-mode #srm-nav-biz {
  display: none !important;
}
body[data-page="biz/offer"] .srm-nav,
body.biz-wizard-mode .srm-nav {
  display: none !important;
}


/* ═════════════════════════════════════════════════════════════════════
   v=20260518gn9 — BUTTON UNIFICATION FIX (always-on)
   Mirror of shared.css block. See that file for full notes.
   ═════════════════════════════════════════════════════════════════════ */

.btn,
.btn-violet,
.btn-outline,
.btn-ghost,
.btn-yellow,
.btn-biz,
.btn-sm,
.btn-md,
.btn-lg { border-radius: var(--r-pill) !important; }

.vb-soc-btn,
.pp-faq-btn,
.scb-btn,
.btn-scan-again {
  border-radius: var(--r-pill) !important;
  min-height: 38px;
}
.ob-next-btn,
.ob-back-btn,
.vb-next-btn {
  border-radius: var(--r-pill) !important;
  min-height: 48px;
}
.gh-period-btn,
.gh-plat-btn,
.ob-platform-pill {
  border-radius: var(--r-pill) !important;
  min-height: 30px;
}

.cr-pill-biz {
  background: var(--biz3, #ede040);
  color: var(--bizInk, #3a3500);
}
.cr-pill-biz:hover { background: var(--biz2, #f5e84a); }
.cr-pill-sm {
  min-height: 30px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
}
.cr-pill-lg {
  min-height: 48px;
  padding: 14px 28px;
  font-size: 16px;
}
.cr-pill-full {
  width: 100%;
  justify-content: center;
}

.ol-actions-cell .cr-pill.cr-pill-outline {
  border: 1px solid var(--border, #e8e5e0) !important;
  color: var(--ink, #1a1a1a) !important;
  background: transparent !important;
  border-radius: var(--r-pill) !important;
}
.ol-actions-cell .cr-pill.cr-pill-outline:hover {
  background: var(--bg2, #fafafa) !important;
  border-color: var(--border2, #d4d0c8) !important;
}

.vb-vc-action-btn {
  border-radius: var(--r-pill) !important;
  min-height: 36px !important;
}
.vb-vc-actions {
  border-radius: var(--r-md, 12px) !important;
  overflow: hidden;
}

.scan-tab { border-radius: var(--r-pill) !important; }
.scan-tabs { border-radius: var(--r-pill) !important; }

/* ════════════════════════════════════════════════════════════════════
   v=20260518gn9 — RTL / Arabic support (mirror of shared.css block)
   ════════════════════════════════════════════════════════════════════ */

html[lang="ar"] body,
html[lang="ar"] {
  font-family: "Plus Jakarta Sans", "IBM Plex Sans Arabic", "Cairo", system-ui, -apple-system, sans-serif;
}
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] .bento-hero-title, html[lang="ar"] .ph-title,
html[lang="ar"] .ob-q-title, html[lang="ar"] .hiw-title,
html[lang="ar"] .feed-title, html[lang="ar"] .deal-h1,
html[lang="ar"] .auth-brand-h, html[lang="ar"] .pp-h1,
html[lang="ar"] .creator-hdr-title, html[lang="ar"] .prof-panel-h,
html[lang="ar"] #hero-title, html[lang="ar"] .pc-plan,
html[lang="ar"] .pp-card-plan, html[lang="ar"] .bento-eyebrow,
html[lang="ar"] .ph-eyebrow {
  font-family: "Plus Jakarta Sans", "Cairo", "IBM Plex Sans Arabic", system-ui, sans-serif;
  font-weight: 800;
}
html[lang="ar"] .bento-hero-title, html[lang="ar"] .ph-title,
html[lang="ar"] .auth-brand-h {
  font-weight: 900; letter-spacing: -0.5px;
}
html[lang="ar"] p, html[lang="ar"] .bento-hero-sub,
html[lang="ar"] .ph-sub, html[lang="ar"] .ob-q-hint,
html[lang="ar"] .pp-sub, html[lang="ar"] .pc-sub,
html[lang="ar"] .pc-feat, html[lang="ar"] .pp-feat,
html[lang="ar"] .ft-desc, html[lang="ar"] .auth-brand-sub,
html[lang="ar"] .auth-bullet, html[lang="ar"] .lede,
html[lang="ar"] .ab-body, html[lang="ar"] .deal-desc,
html[lang="ar"] label, html[lang="ar"] input,
html[lang="ar"] textarea, html[lang="ar"] select,
html[lang="ar"] .ob-field-lbl, html[lang="ar"] .ob-role-desc,
html[lang="ar"] .pp-faq-answer, html[lang="ar"] td,
html[lang="ar"] small, html[lang="ar"] .ob-terms {
  font-family: "IBM Plex Sans Arabic", "Cairo", system-ui, sans-serif;
  font-weight: 400;
}
html[lang="ar"] th, html[lang="ar"] .nav-a, html[lang="ar"] .nav-link,
html[lang="ar"] .biz-nav-item, html[lang="ar"] .settings-tab-btn,
html[lang="ar"] .ob-role-name, html[lang="ar"] .badge,
html[lang="ar"] .pill, html[lang="ar"] .chip {
  font-family: "IBM Plex Sans Arabic", "Cairo", system-ui, sans-serif;
  font-weight: 500;
}
html[lang="ar"] .deal-desc,
html[lang="ar"] .deal-offer-value,
html[lang="ar"] .offer-value-text,
html[lang="ar"] .offer-value-text p,
html[lang="ar"] .it-val,
html[lang="ar"] .req-pill,
html[lang="ar"] .it-label {
  unicode-bidi: plaintext;
}

html[lang="ar"] .btn, html[lang="ar"] .ob-next-btn,
html[lang="ar"] .cr-pill-yellow, html[lang="ar"] .cr-pill,
html[lang="ar"] .claim-btn, html[lang="ar"] .add-offer-btn, html[lang="ar"] .dismiss-btn {
  font-family: "Plus Jakarta Sans", "Cairo", "IBM Plex Sans Arabic", system-ui, sans-serif;
  font-weight: 700;
}
html[dir="rtl"] body { direction: rtl; text-align: right; }
html[dir="rtl"] .ph-text,
html[dir="rtl"] .bento-hero-inner,
html[dir="rtl"] .ob-q-title,
html[dir="rtl"] .ob-q-hint,
html[dir="rtl"] .st-section-head,
html[dir="rtl"] .ft-desc,
html[dir="rtl"] .ft-col-h,
html[dir="rtl"] .ft-a,
html[dir="rtl"] .hiw-title,
html[dir="rtl"] .feed-title,
html[dir="rtl"] .deal-h1,
html[dir="rtl"] label,
html[dir="rtl"] .ob-field-lbl { text-align: right; }
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select { text-align: right; direction: rtl; }
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="password"],
html[dir="rtl"] input[name="email"],
html[dir="rtl"] input[name="phone"] { text-align: left; direction: ltr; }
html[dir="rtl"] #nav,
html[dir="rtl"] .nav-inner { direction: rtl; }
html[dir="rtl"] .nav-links,
html[dir="rtl"] .nav-right { flex-direction: row-reverse; }
html[dir="rtl"] .srm-items { flex-direction: row-reverse; }
html[dir="rtl"] .ft-grid,
html[dir="rtl"] .ft-bottom,
html[dir="rtl"] .ft-links { direction: rtl; }
html[dir="rtl"] .ft-bottom { flex-direction: row-reverse; }
html[dir="rtl"] .ob-back-btn svg,
html[dir="rtl"] .back-pill svg,
html[dir="rtl"] [class*="back"] > svg:first-child { transform: scaleX(-1); }
html[dir="rtl"] .srm-badge { right: auto; left: -8px; }
@media (max-width: 380px) {
  html[dir="rtl"] .ob-role-tile-large { text-align: right; flex-direction: row-reverse; }
}
html[dir="rtl"] .settings-tab-strip { flex-direction: row-reverse; }
html[dir="rtl"] body[data-page="settings"].user-business #page-main,
html[dir="rtl"] body[data-page^="biz"] #page-main { flex-direction: row-reverse; }
html[dir="rtl"] .toggle-switch.on .toggle-knob,
html[dir="rtl"] .toggle-switch.on::before { transform: translateX(-20px); }
html[dir="rtl"] #sr-support-launcher { right: auto !important; left: 24px !important; }
html[dir="rtl"] #sr-support-panel { right: auto !important; left: 24px !important; transform-origin: bottom left; }
@media (max-width: 480px) {
  html[dir="rtl"] #sr-support-launcher { left: 16px !important; right: auto !important; }
  html[dir="rtl"] #sr-support-panel { left: 12px !important; right: auto !important; }
}
html[dir="rtl"] .home-guest-bar { flex-direction: row-reverse; }
.sr-lang-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  /* v=20260518gn9 mirror — 44px tap target */
  padding: 10px 12px; min-height: 44px; border-radius: 99px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18);
  font-size: 12px; font-weight: 800; font-family: var(--ff);
  color: rgba(255,255,255,.8); cursor: pointer;
  transition: background .15s, color .15s; white-space: nowrap;
}
.sr-lang-toggle:hover { background: rgba(255,255,255,.16); color: #fff; }
.sr-lang-toggle .sr-lang-opt { padding: 3px 8px; border-radius: 99px; font-size: 12px; font-weight: 800; position: relative; transition: background .12s, color .12s; }
.sr-lang-toggle .sr-lang-opt.active { background: #fff; color: #1a1a1a; }
.sr-lang-toggle:not(.on-light) .sr-lang-opt.active { background: #fff; color: #1a1a1a; }
@media (max-width: 480px) {
  .sr-lang-toggle { padding: 8px 9px; font-size: 11px; min-height: 44px; }
  .sr-lang-toggle .sr-lang-opt { padding: 2px 6px; font-size: 11px; }
}
body[data-page="settings"] .sr-lang-toggle,
body[data-page^="biz"] .sr-lang-toggle,
.sr-lang-toggle.on-light {
  background: var(--bg2, #f5f3f0); border: 1px solid var(--border, #e8e5e0); color: var(--ink3, #555);
}
body[data-page="settings"] .sr-lang-toggle .sr-lang-opt.active,
body[data-page^="biz"] .sr-lang-toggle .sr-lang-opt.active,
.sr-lang-toggle.on-light .sr-lang-opt.active { background: var(--violet, #5700ff); color: #fff; }
html[dir="rtl"] .ft-logo,
html[dir="rtl"] .nav-brand,
html[dir="rtl"] .ob-topbar-logo,
html[dir="rtl"] .biz-sidebar-logo { direction: ltr; text-align: left; }
html[dir="rtl"] .stat-number,
html[dir="rtl"] .kpi-n,
html[dir="rtl"] .creator-stat-n,
html[dir="rtl"] .pricing-price,
html[dir="rtl"] code,
html[dir="rtl"] .badge,
html[dir="rtl"] [class*="price"],
html[dir="rtl"] [class*="amount"] { direction: ltr; unicode-bidi: isolate; }
html[lang="ar"] .ft-logo,
html[lang="ar"] .ob-topbar-logo { font-family: "Doto", monospace; }

/* v=20260518gn9 — RTL bidi-isolation fixes (mirror of shared.css) */
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6,
html[dir="rtl"] p, html[dir="rtl"] .bento-hero-title, html[dir="rtl"] .bento-hero-sub, html[dir="rtl"] .bento-eyebrow,
html[dir="rtl"] .ob-q-title, html[dir="rtl"] .ob-q-hint, html[dir="rtl"] .ph-title, html[dir="rtl"] .ph-sub,
html[dir="rtl"] .ph-eyebrow, html[dir="rtl"] .pc-feat, html[dir="rtl"] .pc-sub, html[dir="rtl"] .pp-sub,
html[dir="rtl"] .pp-feat, html[dir="rtl"] .pp-section-h, html[dir="rtl"] .pp-section-sub,
html[dir="rtl"] .feed-title, html[dir="rtl"] .creator-hdr-title, html[dir="rtl"] .prof-panel-h,
html[dir="rtl"] .auth-brand-h, html[dir="rtl"] .auth-brand-sub, html[dir="rtl"] .auth-bullet,
html[dir="rtl"] .auth-proof-pill, html[dir="rtl"] .ft-desc, html[dir="rtl"] .ft-col-h, html[dir="rtl"] .ft-a,
html[dir="rtl"] .ft-regulated, html[dir="rtl"] .pc-plan, html[dir="rtl"] .pp-card-plan,
html[dir="rtl"] .pp-card-badge, html[dir="rtl"] .pp-h1, html[dir="rtl"] .mq-item,
html[dir="rtl"] .sr-toast, html[dir="rtl"] .sr-article-title, html[dir="rtl"] .sr-panel-greeting,
html[dir="rtl"] .sr-panel-subgreeting, html[dir="rtl"] .sr-chat-title, html[dir="rtl"] .sr-chat-status,
html[dir="rtl"] .ob-role-name, html[dir="rtl"] .ob-role-desc, html[dir="rtl"] label,
html[dir="rtl"] .srm-label, html[dir="rtl"] .mob-item, html[dir="rtl"] .nav-link, html[dir="rtl"] .ntt,
html[dir="rtl"] .ft-lang, html[dir="rtl"] .biz-nav-item, html[dir="rtl"] .settings-tab-btn,
html[dir="rtl"] .auth-tab, html[dir="rtl"] .hiw-tab, html[dir="rtl"] .pp-aud-btn,
html[dir="rtl"] .pp-faq-btn, html[dir="rtl"] .pp-faq-answer, html[dir="rtl"] .sec-label,
html[dir="rtl"] .vp-name, html[dir="rtl"] .scan-tab, html[dir="rtl"] .btn,
html[dir="rtl"] button, html[dir="rtl"] a { unicode-bidi: isolate; }

html[dir="rtl"] .lede, html[dir="rtl"] .auth-form-inner, html[dir="rtl"] .ob-stage,
html[dir="rtl"] .bento-card, html[dir="rtl"] .hiw-step-c, html[dir="rtl"] .hiw-step-b,
html[dir="rtl"] .pc, html[dir="rtl"] .pp-card, html[dir="rtl"] .ab-card, html[dir="rtl"] .ab-body,
html[dir="rtl"] td, html[dir="rtl"] th { unicode-bidi: isolate; }

html[dir="rtl"] time, html[dir="rtl"] .date-cell, html[dir="rtl"] [class*="-date"],
html[dir="rtl"] [class*="date-"], html[dir="rtl"] .ts-cell, html[dir="rtl"] .applied-cell,
html[dir="rtl"] td[data-col="date"], html[dir="rtl"] td[data-col="created"],
html[dir="rtl"] kbd, html[dir="rtl"] .kbd, html[dir="rtl"] .biz-qa-kbd {
  direction: ltr; unicode-bidi: isolate; text-align: left;
}

html[dir="rtl"] table { direction: rtl; }
html[dir="rtl"] table th { text-align: right; }

html[dir="rtl"] .badge, html[dir="rtl"] .pill, html[dir="rtl"] .chip, html[dir="rtl"] .d-badge,
html[dir="rtl"] [class*="-badge"], html[dir="rtl"] [class*="-pill"], html[dir="rtl"] [class*="-chip"] {
  unicode-bidi: isolate;
}

html[dir="rtl"] input::placeholder, html[dir="rtl"] textarea::placeholder { unicode-bidi: isolate; }

html[dir="rtl"] .settings-tab-strip, html[dir="rtl"] .settings-tabs, html[dir="rtl"] [role="tablist"] {
  flex-direction: row-reverse;
}

html[dir="rtl"] .biz-sidebar, html[dir="rtl"] [class*="sidebar"] { direction: rtl; }

html[dir="rtl"] .tab-badge, html[dir="rtl"] .nav-badge { right: auto; left: 0; }

html[dir="rtl"] .nav-logo, html[dir="rtl"] #ob-topbar-step {
  direction: ltr; unicode-bidi: isolate;
}

/* ─── v=20260518gn9 — old direction:rtl on ranges removed; using scaleX(-1) below ─── */
/* (See "FULL RTL commitment" block for the new approach.) */

/* Confirmation modal "?" bidi fix: use Arabic question mark via :lang and CSS content
   would be brittle. Instead, all confirmation modal titles in AR include the ؟ in
   the translation string itself — see offer.publish_modal_h etc. */

/* Biz sidebar consistency — ensure full RTL mirror when body.lang-ar
   regardless of inline left/right styles. Mirror common containers. */
body.lang-ar .biz-sidebar,
body.lang-ar .srm-nav,
body.lang-ar .bento-card { direction: rtl; }

/* Step rail in Create Offer wizard — line draws L→R by default; in RTL
   reverse the connector line direction so progress flows from step 1 (right) to 7 (left). */
body.lang-ar .ob-step-track,
body.lang-ar .ob-step-track-line { direction: rtl; }
body.lang-ar .ob-step-track-line {
  /* Line still spans full width; visual flow is handled by step-dot order. */
}

/* Confirmation modal text — ensure right-alignment in AR */
body.lang-ar .sr-modal-body,
body.lang-ar .sr-modal-title { text-align: right; }

/* AED suffix in Step 2 — when RTL, suffix should appear on the RIGHT side
   of the input (which is the "start" in RTL). */
body.lang-ar .ob-aed-suffix {
  right: 12px !important;
  left: auto !important;
}
body.lang-ar input#ob-aed-value {
  padding-right: 52px !important;
  padding-left: 16px !important;
}

/* ─── v=20260518gn9 — Sidebar STAYS ON LEFT in Arabic mode (locked-in) ─── */
body.lang-ar .biz-wrapper { direction: ltr; }
body.lang-ar .biz-main-content { direction: rtl; }
body.lang-ar .biz-sidebar {
  border-right: 1px solid var(--border);
  border-left: none;
}
body.lang-ar .biz-nav-item { direction: rtl; text-align: right; }
body.lang-ar .biz-sidebar-venue { direction: rtl; text-align: right; }
body.lang-ar .biz-sidebar-bottom { direction: rtl; text-align: right; }
body.lang-ar .biz-sidebar-logo { text-align: right; }
body.lang-ar .biz-sidebar-cmd-hint { direction: rtl; flex-direction: row-reverse; }

body.lang-ar .ob-step-track { flex-direction: row-reverse; }
body.lang-ar .sr-modal-actions { flex-direction: row-reverse; }

body.lang-ar .biz-app-chip { direction: rtl; }
body.lang-ar .biz-chip-body { text-align: right; }
body.lang-ar .biz-chip-right { text-align: left; }

body.lang-ar .ob-topbar { direction: rtl; }
body.lang-ar .ob-back-btn { flex-direction: row-reverse; }

/* Robust slider RTL via scaleX(-1) transform */
body.lang-ar .ob-mf-slider-wrap input[type="range"],
body.lang-ar input#ob-slots[type="range"] {
  transform: scaleX(-1);
}
body.lang-ar .ob-mf-track-fill {
  right: 0;
  left: auto;
  transform: scaleX(-1);
  transform-origin: center;
}
/* v=20260518gn9: RTL slider ticks — mirror left → right per nth-child.
   See shared.css for full rationale (slider track is scaleX(-1) mirrored
   but tick positions stayed at LTR coordinates, causing misalignment). */
body.lang-ar .ob-mf-ticks span:nth-child(1) {
  left: auto; right: 0%; transform: translateX(0);
}
body.lang-ar .ob-mf-ticks span:nth-child(2) {
  left: auto; right: 10%;
}
body.lang-ar .ob-mf-ticks span:nth-child(3) {
  left: auto; right: 20%;
}
body.lang-ar .ob-mf-ticks span:nth-child(4) {
  left: auto; right: 50%;
}
body.lang-ar .ob-mf-ticks span:nth-child(5) {
  left: auto; right: 100%; transform: translateX(100%);
}
body.lang-ar .ob-slider-wrap > div[style*="space-between"] { flex-direction: row-reverse; }

body.lang-ar .gh-period-chips,
body.lang-ar .gh-platform-chips { flex-direction: row-reverse; }

body.lang-ar .ob-x-close { left: auto !important; right: 16px !important; }
body.lang-ar .ob-back-link { right: 16px !important; left: auto !important; }
body.lang-ar .ob-skip-btn { direction: rtl; }
body.lang-ar .ob-step-dot-num { direction: ltr; }
body.lang-ar .gh-toggles { align-items: flex-start; }

/* ─── v=20260518gn9 — shared avatar uploader modal (lifted from profile/) ─── */
#av-modal { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.55); backdrop-filter: blur(8px); align-items: center; justify-content: center; padding: 20px; }
#av-modal.open { display: flex; }
#av-modal-box { background: #fff; border-radius: 24px; width: 100%; max-width: 420px; overflow: hidden; box-shadow: 0 24px 80px rgba(0,0,0,.2); animation: slideUp .25s cubic-bezier(.16,1,.3,1); }
#av-modal-header { padding: 18px 20px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
#av-modal-header h3 { font-size: 16px; font-weight: 800; color: var(--ink); margin: 0; }
#av-modal-close { width: 32px; height: 32px; border: none; background: var(--bg2); border-radius: 50%; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; color: var(--ink3); transition: background .15s; }
#av-modal-close:hover { background: var(--bg3); }
#av-file-area { padding: 16px 20px 0; }
#av-file-input { width: 100%; padding: 10px 14px; border: 1.5px dashed var(--border2); border-radius: 12px; font-size: 13px; color: var(--ink3); background: var(--bg2); cursor: pointer; font-family: var(--ff); }
#av-file-input:hover { border-color: var(--violet); background: var(--violetSoft); }
#av-crop-wrap { display: none; margin: 16px 20px 0; position: relative; width: 100%; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: #000; cursor: crosshair; }
#av-crop-wrap.active { display: block; }
#av-crop-canvas { width: 100%; height: 100%; object-fit: contain; display: block; }
#av-crop-overlay { position: absolute; inset: 0; pointer-events: none; }
#av-zoom-wrap { display: none; padding: 12px 20px 0; gap: 10px; align-items: center; }
#av-zoom-wrap.active { display: flex; }
#av-zoom-wrap label { font-size: 11px; font-weight: 700; color: var(--ink4); white-space: nowrap; }
#av-zoom-slider { flex: 1; accent-color: var(--violet); }
#av-modal-footer { padding: 16px 20px; display: flex; gap: 10px; border-top: 1px solid var(--border); margin-top: 16px; }
#av-cancel-btn { flex: 1; padding: 11px; border: 1.5px solid var(--border2); border-radius: 12px; background: #fff; font-size: 13px; font-weight: 700; color: var(--ink3); cursor: pointer; font-family: var(--ff); transition: background .15s; }
#av-cancel-btn:hover { background: var(--bg2); }
#av-save-btn { flex: 1; padding: 11px; border: none; border-radius: 12px; background: var(--violet); font-size: 13px; font-weight: 700; color: #fff; cursor: pointer; font-family: var(--ff); transition: opacity .15s; }
#av-save-btn:disabled { opacity: .5; cursor: not-allowed; }
#av-save-btn:not(:disabled):hover { opacity: .88; }
#av-error-msg { padding: 0 20px 8px; font-size: 12px; color: var(--coral); font-weight: 600; min-height: 20px; }
/* Biz variant: use yellow primary */
body[data-page="settings"].user-business #av-save-btn,
body[data-page^="biz"] #av-save-btn { background: var(--biz3, #ede040); color: var(--bizInk, #3a3500); }


/* v=20260518gn9 — Touch device button feedback. See shared.css for full
   rationale. Mirrored here so the cached/legacy stylesheet stays aligned. */
@media (hover: none) and (pointer: coarse) {
  button, a.btn, a.cr-pill, .cr-pill, .biz-nav-item, .srm-item,
  .srm-more-row, .oc-menu-btn, .offer-menu-item, .settings-tab-btn,
  .ob-period-btn, .gh-period-btn, .gh-plat-btn,
  [role="button"], [role="menuitem"], [role="tab"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  button:active, a.btn:active, .cr-pill:active, .btn:active,
  [role="button"]:active {
    transform: scale(0.97);
    opacity: 0.85;
    transition: transform .06s ease, opacity .06s ease;
  }
  .oc-menu-btn:active, .cr-arrow-btn:active, .biz-sidebar-cmd-hint:active,
  .biz-nav-item:active, .srm-more-row:active, .settings-tab-btn:active,
  .offer-menu-item:active {
    background: rgba(0,0,0,.06) !important;
    transform: scale(0.98);
    transition: background .06s ease, transform .06s ease;
  }
  body[data-page^="biz"] .cr-pill-biz:active,
  body[data-page^="biz"] .btn-biz:active,
  body[data-page="settings"].user-business .cr-pill-biz:active {
    background: var(--biz2, #f5e84a) !important;
  }
  .srm-item:active {
    background: rgba(0,0,0,.04);
    transform: scale(0.95);
    transition: background .06s ease, transform .06s ease;
  }
  .oc-menu-btn, .cr-arrow-btn { position: relative; }
  .oc-menu-btn::after, .cr-arrow-btn::after {
    content: ''; position: absolute; inset: -8px;
  }
}


/* v=20260518gn9: Reach Impact collapsed state — mirrors shared.css */
#growth-hero-card.gh-collapsed { padding: 14px 18px !important; min-height: 0 !important; }
#growth-hero-card.gh-collapsed .gh-header-row { margin-bottom: 0 !important; align-items: center !important; }
#growth-hero-card.gh-collapsed .gh-header-row > div:first-child h3 { font-size: 15px !important; line-height: 1.3 !important; }
#growth-hero-card.gh-collapsed .gh-header-row > div:first-child p { display: none !important; }
#growth-hero-card.gh-collapsed .bento-eyebrow { margin-bottom: 2px !important; font-size: 9px !important; }
#growth-hero-card.gh-collapsed .gh-toggles,
#growth-hero-card.gh-collapsed > div[style*="grid-template-columns:repeat(3,1fr)"],
#growth-hero-card.gh-collapsed canvas,
#growth-hero-card.gh-collapsed #gh-thumbs-layer,
#growth-hero-card.gh-collapsed #gh-data-note,
#growth-hero-card.gh-collapsed #growth-venue-selector { display: none !important; }
#growth-hero-card.gh-collapsed #gh-empty-state {
  position: static !important; background: none !important; padding: 0 !important;
  display: flex !important; flex-direction: row !important; align-items: center !important;
  gap: 12px !important; min-height: 0 !important; margin-top: 8px !important;
}
#growth-hero-card.gh-collapsed #gh-empty-title,
#growth-hero-card.gh-collapsed #gh-empty-sub { display: none !important; }
#growth-hero-card.gh-collapsed #gh-empty-cta {
  margin: 0 !important; padding: 8px 16px !important; font-size: 12px !important; min-height: 36px !important;
}

/* v=20260518gn9 (L5): PWA install nudge entrance animation. */
@keyframes srSlideUp {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  #sr-pwa-nudge { animation: none !important; }
}

/* v=20260518gn9 (T7): desktop reflow for bottom sheets. */
@media (min-width: 640px) {
  #sr-upgrade-sheet,
  [data-sr-sheet],
  .sr-bottom-sheet {
    align-items: center !important;
  }
  #sr-upgrade-sheet > div,
  [data-sr-sheet] > div,
  .sr-bottom-sheet > div {
    border-radius: var(--r-lg, 24px) !important;
    max-height: 80vh !important;
    margin: 0 !important;
  }
}

/* v=20260518gn9 (C6): claim-success burst animations. */
@keyframes srNotifyFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes srClaimBurstFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes srClaimBurstFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes srClaimBurstPop {
  0%   { transform: scale(.3); opacity: 0; }
  50%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #sr-claim-burst { display: none !important; }
}

/* v=20260518gn9 (T6 polish per audit): sheet scroll containers should not
   propagate scroll to the body when the user reaches their top/bottom edge.
   `overscroll-behavior: contain` plus `-webkit-overflow-scrolling: touch`
   (already inline on individual sheets) gives the native iOS feel. */
#sr-upgrade-sheet > div,
#sr-creator-upgrade-sheet > div,
#sr-renew-card,
#sr-addon-sheet > div,
#va-sheet,
.sr-bottom-sheet > div,
[data-sr-sheet] > div {
  overscroll-behavior: contain;
}

/* v=20260518gn9 (overlay re-audit): subtle entry animation for the offer-
   options menu. Scale 0.96 → 1 with slight upward shift gives the menu a
   "deploy from the trigger" feel without the rotate that popIn uses. */
@keyframes srOfferMenuIn {
  from { opacity: 0; transform: scale(.96) translateY(-4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.offer-menu-popup { animation: srOfferMenuIn .15s ease-out; transform-origin: top right; }

/* v=20260518gn15: BETA pill next to the SoReel wordmark in nav. Structural
   props only in this block (no themable background/color overrides elsewhere). */
.sr-beta-pill{display:inline-block;margin-left:6px;padding:1px 6px;font-size:9px;font-weight:800;letter-spacing:.5px;line-height:1.6;border-radius:99px;background:rgba(87,0,255,.12);color:var(--violet,#5700ff);vertical-align:super;text-transform:uppercase}

/* v=20260518gn54: intl-tel-input style overrides to match SoReel design.
   The library renders a wrapper <div class="iti"> around the input with
   .iti__country-container holding the flag+dial-code chip, and a
   .iti__dropdown-content popup for the country picker. Defaults are
   serviceable but use a different border-radius and color palette from
   the rest of the form fields. Tokens-only — no hardcoded colors. */
.iti {
  width: 100%;
  font-family: var(--ff);
}
.iti__tel-input,
input#sr-phone-number {
  width: 100% !important;
  padding: 14px 16px !important;
  padding-inline-start: 92px !important; /* room for separateDialCode chip */
  font-size: 14px !important;
  font-family: var(--ff) !important;
  background: var(--white, #fff) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 12px !important;
  color: var(--ink) !important;
  outline: none !important;
  transition: border-color .15s ease !important;
  box-sizing: border-box !important;
}
input#sr-phone-number:focus { border-color: var(--violet) !important; }
input#sr-phone-number.phone-valid   { border-color: var(--green,  #0a7a3f) !important; }
input#sr-phone-number.phone-invalid { border-color: var(--coral, #e53e3e) !important; }

.iti__country-container {
  border-inline-end: 1.5px solid var(--border);
}
.iti__selected-country {
  background: transparent !important;
  padding: 0 12px !important;
  font-family: var(--ff) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
}
.iti__selected-country:hover { background: var(--bg2) !important; }
.iti__selected-dial-code {
  margin-inline-start: 4px;
  color: var(--ink);
}

/* Dropdown panel: round corners + soft shadow, matches other SoReel popups */
.iti__dropdown-content {
  border: 1.5px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.12) !important;
  font-family: var(--ff) !important;
  margin-top: 4px !important;
}
.iti__search-input {
  font-family: var(--ff) !important;
  font-size: 13px !important;
  padding: 14px 16px !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
}
.iti__country-list li.iti__country {
  font-size: 13px !important;
  padding: 8px 12px !important;
}
.iti__country.iti__highlight,
.iti__country:hover {
  background: var(--bg2) !important;
}
.iti__country.iti__active {
  background: rgba(87,0,255,.08) !important;
  color: var(--violet) !important;
}

/* RTL: flip the country-chip side
   v=20260518gn61: mirror — see shared.css for full rationale */
[dir="rtl"] .iti__tel-input,
[dir="rtl"] input#sr-phone-number {
  padding-left: 16px !important;
  padding-right: 92px !important;
  padding-inline-start: 92px !important;
  padding-inline-end: 16px !important;
  text-align: right;
  direction: ltr;
}
[dir="rtl"] .iti__country-container {
  inset-inline-start: 0;
}

/* v=20260518gn59: per-field auto-save indicator (.sr-autosave-ind).
   Mirror of shared.css block. See shared.css for full notes. */
.sr-autosave-ind {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  margin-top: 4px;
  line-height: 1.4;
  letter-spacing: 0;
  white-space: nowrap;
  transition: opacity .25s ease;
}
html[dir="rtl"] .sr-autosave-ind {
  text-align: right;
}

/* v=20260518gn65: GLOBAL #cr-donut-pct rule — mirror, see shared.css. */
#cr-donut-pct {
  font-size: 28px !important;
  line-height: 1 !important;
  letter-spacing: -.5px !important;
  font-weight: 900 !important;
  color: var(--ink, #1a1a1a);
}

/* v=20260518gn65: GLOBAL toggle-row layout — mirror, see shared.css. */
.toggle-row {
  flex-wrap: nowrap !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
}
.toggle-row > div:first-child,
.toggle-row > div:not(.toggle-switch):not([role="switch"]) {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.toggle-row .toggle-switch,
.toggle-row > button[role="switch"],
.toggle-row > [role="switch"] {
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
}

/* v=20260518gn66: UNIFIED BIZ PAGE HEADER — mirror, see shared.css. */
.kpi-row .bento-num,
.kpi-row [class*="kpi-n"] {
  font-size: clamp(22px, 3vw, 30px) !important;
  font-weight: 900 !important;
  color: var(--ink, #1a1a1a);
  line-height: 1 !important;
}
.kpi-row .kpi-l,
.kpi-row [class*="kpi-l"] {
  font-size: 11px;
  font-weight: 700;
  color: rgba(20, 20, 30, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-top: 4px;
}
.kpi-row > div + div {
  border-left: 1px solid rgba(20, 20, 30, 0.06);
}
.ph-row .bento-eyebrow {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  opacity: 0.6 !important;
  margin-bottom: 4px !important;
  color: var(--ink, #1a1a1a);
}
.ph-row .bento-hero-title {
  margin: 0 0 6px 0;
  line-height: 1.05;
  letter-spacing: -0.5px;
}
.ph-row .bento-hero-sub {
  color: var(--ink3, #525252);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}
.ph-right .cr-pill,
.ph-right .btn {
  white-space: nowrap;
}

/* v=20260518gn68: BIZ NAME + PLAN BADGE — mirror, see shared.css. */
#biz-sidebar-bizname {
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}
#biz-sidebar-bizname-text {
  flex: 1 1 auto;
  min-width: 0;
}
#biz-sidebar-plan-badge {
  flex-shrink: 0;
  white-space: nowrap;
}
#biz-mob-bar-bizname {
  align-items: center;
  gap: 6px;
}
body.lang-ar #biz-sidebar-bizname,
body.lang-ar #biz-mob-bar-bizname {
  direction: rtl;
  text-align: right;
}

/* ════════════════════════════════════════════════════════════════════════
   v=20260518gn71 — inline translate pill (.sr-translate-pill)
   Attached by srAttachTranslatePill() to [data-translate] elements when the
   source text's script differs from the current UI language. Sits inline,
   low-emphasis, so it never competes with the content it sits beside.
   NOTE: background/color are intentionally NOT in !important blocks elsewhere;
   this is a fresh rule with no type variants to clobber.
   ════════════════════════════════════════════════════════════════════════ */
.sr-translate-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 4px 0 0;
  padding: 2px 8px;
  border: 1px solid rgba(87, 0, 255, .22);
  border-radius: 99px;
  background: rgba(87, 0, 255, .06);
  color: var(--violet, #5700ff);
  font-family: var(--ff, inherit);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .1px;
  cursor: pointer;
  vertical-align: middle;
  white-space: nowrap;
  transition: background .12s ease, border-color .12s ease, opacity .12s ease;
  -webkit-appearance: none;
  appearance: none;
}
.sr-translate-pill:hover { background: rgba(87, 0, 255, .12); border-color: rgba(87, 0, 255, .4); }
.sr-translate-pill:active { transform: translateY(.5px); }
.sr-translate-pill:focus-visible { outline: 2px solid var(--violet, #5700ff); outline-offset: 2px; }
.sr-translate-pill svg { flex-shrink: 0; opacity: .85; }
.sr-translate-pill.is-busy { opacity: .65; cursor: default; }
.sr-translate-pill.is-showing-orig { background: var(--bg2, #f8f8f8); color: var(--ink4, #525252); border-color: rgba(0, 0, 0, .1); }
.sr-translate-pill.is-showing-orig svg { display: none; }
:root[dir="rtl"] .sr-translate-pill,
[dir="rtl"] .sr-translate-pill { letter-spacing: 0; }

/* v=20260518gn81: canonical biz controls toolbar. One full-width white bar
   directly under the page header — search grows on the left (order:-1),
   filters/sort follow — shared by Offers, Applications, Content so the
   controls zone is structurally identical across pages. */
.biz-toolbar{
  display:flex; align-items:center; justify-content:flex-start; flex-wrap:wrap; gap:10px;
  padding:12px 20px; border-bottom:1px solid var(--border); background:var(--white,#fff);
}
.biz-toolbar > .biz-search-wrap{ flex:1 1 240px; min-width:160px; max-width:440px; order:-1; }
.biz-toolbar > input[type="search"]{ flex:1 1 240px; min-width:160px; max-width:440px; order:-1; }
.biz-toolbar .biz-toolbar-end{ margin-left:auto; }
@media (max-width:768px){ .biz-toolbar{ padding:10px 14px; } }

/* v=20260518gn83: OAuth ("Continue with Google") button + or-divider.
   Used on the creator onboarding step-1 and the login tab. Light-surface
   styling (both contexts are on white cards). */
.sr-oauth-btn{
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  padding:12px 16px; border:1px solid var(--border,#e8e5e0); border-radius:12px;
  background:var(--white,#fff); color:var(--ink,#1a1a1a);
  font-family:var(--ff); font-size:15px; font-weight:700; cursor:pointer;
  transition:background .15s, border-color .15s;
}
.sr-oauth-btn:hover{ background:var(--bg2,#f7f5f2); border-color:var(--border2,#d9d5cf); }
.sr-oauth-btn svg{ width:18px; height:18px; flex-shrink:0; }
.sr-or-divider{
  display:flex; align-items:center; gap:12px; margin:16px 0;
  color:var(--ink4,#9a948c); font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:.5px;
}
.sr-or-divider::before, .sr-or-divider::after{
  content:""; flex:1; height:1px; background:var(--border,#e8e5e0);
}

/* v=20260518gn90 hero-audit: header already carries Log in + lang on desktop; hide the hero duplicates >768px, keep on mobile (in-app webview entry). */
@media(min-width:769px){#sr-hero-login-btn,#sr-lang-toggle-hero{display:none!important}}

/* --- Canonical SoReel wordmark (single source: /soreel-logo.svg), v=20260531n ---
   CSS-mask pattern: colorless mask + background:currentColor, so the mark inherits
   whatever `color` its container sets (handles dark/light contexts from ONE file).
   Aspect ratio 844:202 (~4.178:1); size by height, width auto-derives. */
.logo-mark{
  display:inline-block;
  height:22px;                 /* default; per-instance height overrides this */
  aspect-ratio:844 / 202;
  width:auto;
  background-color:currentColor;
  -webkit-mask:url('/soreel-logo.svg?v=20260603c') no-repeat center / contain;
  mask:url('/soreel-logo.svg?v=20260603c') no-repeat center / contain;
  vertical-align:middle;
  flex-shrink:0;
}
/* Explicit color variants for contexts whose container color isn't the logo color */
.logo-mark--white{background-color:#fff}
.logo-mark--violet{background-color:var(--violet,#5700ff)}
.logo-mark--ink{background-color:var(--ink,#111)}