/* Runure logo palette: royal blue, cyan and violet. No green/teal UI colors.
   Use blue for positive states; reserve amber/red for warnings and errors. */
:root {
  --brand-primary: #2354c9;
  --brand-primary-rgb: 35, 84, 201;
  --brand-blue: #245fce;
  --brand-aqua: #7cdef5;
  --brand-aqua-rgb: 124, 222, 245;
  --brand-violet: #8051d8;
  --brand-violet-soft: #f1ecfc;
  --brand-ink: #18264c;
  --brand-muted: #64708b;
  --brand-paper: #f3f5fc;
  --brand-soft: #eaf0ff;
  --brand-line: #dfe5f4;
  --brand-line-strong: #bdcbed;
  --brand-focus: #4269d0;
  --brand-success: #2354c9;
  --brand-success-soft: #edf2ff;
  --brand-success-line: #c6d5f5;
  --brand-primary-gradient: linear-gradient(125deg, var(--brand-primary), #5546c8);
}
 
 @font-face {
    font-family: 'Readex Pro';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/readexpro/v27/SLXYc1bJ7HE5YDoGPuzj_dh8uc7wUy8ZQQyX2Iw1ZEzehiB9Q1U.woff2) format('woff2');
    unicode-range: U +0600 -06FF, U +0750 -077F, U +0870 -088E, U +0890 -0891, U +0897 -08E1, U +08E3 -08FF, U +200C -200E, U +2010 -2011, U +204F, U +2E41, U + FB50-FDFF, U + FE70-FE74, U + FE76-FEFC, U +102E0 -102FB, U +10E60 -10E7E, U +10EC2 -10EC4, U +10EFC -10EFF, U +1EE00 -1EE03, U +1EE05 -1EE1F, U +1EE21 -1EE22, U +1EE24, U +1EE27, U +1EE29 -1EE32, U +1EE34 -1EE37, U +1EE39, U +1EE3B, U +1EE42, U +1EE47, U +1EE49, U +1EE4B, U +1EE4D -1EE4F, U +1EE51 -1EE52, U +1EE54, U +1EE57, U +1EE59, U +1EE5B, U +1EE5D, U +1EE5F, U +1EE61 -1EE62, U +1EE64, U +1EE67 -1EE6A, U +1EE6C -1EE72, U +1EE74 -1EE77, U +1EE79 -1EE7C, U +1EE7E, U +1EE80 -1EE89, U +1EE8B -1EE9B, U +1EEA1 -1EEA3, U +1EEA5 -1EEA9, U +1EEAB -1EEBB, U +1EEF0 -1EEF1;
}
 
 :root {
                --purple: var(--brand-primary);
                --ink: var(--brand-ink);
                --gold: var(--brand-aqua);
                --gold-soft: var(--brand-soft);
                --paper: var(--brand-paper);
                --surface: #fff;
                --line: var(--brand-line);
                --line2: var(--brand-line-strong);
                --muted: var(--brand-muted);
                --green: var(--brand-success);
                --red: #B3261E;
                --dx: 28px;
                --fs: 'Readex Pro',system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
            }

            [dir=rtl] {
                --dx: -28px
            }

            * {
                box-sizing: border-box;
                margin: 0;
                padding: 0
            }

            html, body {
                height: 100%
            }

            body {
                font-family: var(--fs);
                background: #e1e5f0;
                color: var(--ink);
                overflow: hidden;
                -webkit-font-smoothing: antialiased
            }

            button {
                font: inherit;
                color: inherit;
                background: none;
                border: 0;
                cursor: pointer;
                -webkit-tap-highlight-color: transparent
            }

            input, textarea, select {
                font: inherit;
                color: inherit
            }

            :focus-visible {
                outline: 2px solid var(--purple);
                outline-offset: 2px
            }

            .i {
                width: 22px;
                height: 22px;
                flex: none;
                display: block
            }

            [dir=rtl] .flip {
                transform: scaleX(-1)
            }

            .pe {
                pointer-events: auto
            }

            .and-only {
                display: none!important
            }

            .p-android .and-only {
                display: inline-flex!important
            }

            .p-android .ios-only {
                display: none!important
            }

            #app {
                height: 100%
            }

            /* prototype chrome */
            .chrome {
                height: 58px;
                display: flex;
                align-items: center;
                gap: 12px;
                padding: 0 20px;
                color: var(--brand-primary);
                border-bottom: 1px solid rgba(var(--brand-primary-rgb),.08);
                background: #f7f9fc
            }

            .ch-brand {
                display: flex;
                align-items: center;
                gap: 10px;
                margin-inline-end:auto;font-size: 15px;
                font-weight: 500;
                white-space: nowrap
            }

            .ch-brand .logo {
                width: 26px;
                height: 26px
            }

            .ch-brand small {
                color: var(--brand-muted);
                font-weight: 400;
                font-size: 12.5px
            }

            .ch-seg {
                display: flex;
                background: #e8edf5;
                border-radius: 10px;
                padding: 3px;
                gap: 2px
            }

            .ch-seg button {
                height: 30px;
                padding: 0 12px;
                border-radius: 7px;
                font-size: 13px;
                color: #4d5366;
                white-space: nowrap
            }

            .ch-seg button.on {
                background: #FFFFFF;
                color: var(--brand-primary);
                font-weight: 500;
                box-shadow: 0 1px 3px rgba(var(--brand-primary-rgb),.14)
            }

            .ch-sel {
                height: 36px;
                border-radius: 10px;
                background: #e8edf5;
                border: 0;
                color: var(--brand-primary);
                padding: 0 10px;
                font-size: 13px;
                max-width: 190px
            }

            .ch-sel option {
                color: #222
            }

            .showcase {
                height: calc(100% - 58px);
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 18px;
                background: radial-gradient(ellipse at 50% 35%,#f3f4f6 0%,#dcdee4 75%)
            }

            .p-web .showcase {
                padding: 12px
            }

            /* device */
            .device {
                position: relative;
                overflow: hidden;
                background: var(--paper);
                display: flex;
                flex-direction: column;
                isolation: isolate
            }

            .p-ios .device {
                height: min(844px,100%);
                aspect-ratio: 390/844;
                border-radius: 54px;
                box-shadow: 0 0 0 10px #1c202e,0 0 0 12px #8f95a6,0 36px 80px rgba(var(--brand-primary-rgb),.28)
            }

            .p-android .device {
                height: min(860px,100%);
                aspect-ratio: 400/860;
                border-radius: 36px;
                box-shadow: 0 0 0 9px #1c202e,0 0 0 11px #8f95a6,0 36px 80px rgba(var(--brand-primary-rgb),.28)
            }

            .p-android {
                --paper: #eeeff2
            }

            .p-web .device {
                width: 100%;
                height: 100%;
                border-radius: 14px;
                box-shadow: 0 24px 60px rgba(var(--brand-primary-rgb),.16),0 0 0 1px rgba(var(--brand-primary-rgb),.06)
            }

            .wide .device {
                flex-direction: row
            }

            .main {
                flex: 1;
                min-width: 0;
                min-height: 0;
                display: flex;
                flex-direction: column;
                position: relative
            }

            .stage {
                flex: 1;
                min-height: 0;
                position: relative;
                overflow: hidden
            }

            /* status bar */
            .statusbar {
                display: none
            }

            .p-ios .statusbar, .p-android .statusbar {
                display: flex;
                flex: none;
                align-items: center;
                justify-content: space-between;
                position: relative;
                z-index: 40;
                background: var(--paper)
            }

            .p-ios .statusbar {
                height: 50px;
                padding: 4px 32px 0;
                font-size: 15px;
                font-weight: 600
            }

            .p-android .statusbar {
                height: 38px;
                padding: 0 22px;
                font-size: 13px;
                font-weight: 500
            }

            .on-map .statusbar, .dark-ov .statusbar {
                position: absolute;
                top: 0;
                left: 0;
                right: 0
            }

            .on-map .statusbar {
                background: linear-gradient(rgba(239, 240, 242,.96),rgba(239, 240, 242,0))
            }

            .dark-ov .statusbar {
                background: none;
                color: #fff;
                z-index: 70
            }

            .island {
                position: absolute;
                left: 50%;
                transform: translateX(-50%)
            }

            .p-ios .island {
                top: 11px;
                width: 118px;
                height: 34px;
                background: #000;
                border-radius: 20px
            }

            .p-android .island {
                top: 12px;
                width: 13px;
                height: 13px;
                border-radius: 50%;
                background: #000
            }

            .sb-ic {
                display: flex;
                align-items: center;
                gap: 6px;
                direction: ltr
            }

            .sb-ic svg {
                fill: currentColor
            }

            .homeind {
                display: none
            }

            .p-ios .homeind, .p-android .homeind {
                display: block;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                border-radius: 3px;
                background: var(--brand-ink);
                z-index: 90;
                pointer-events: none
            }

            .p-ios .homeind {
                bottom: 8px;
                width: 134px;
                height: 5px
            }

            .p-android .homeind {
                bottom: 7px;
                width: 100px;
                height: 4px;
                opacity: .65
            }

            .dark-ov .homeind {
                background: #fff
            }

            .ai {
                --lg1: var(--brand-aqua);
                --lg2: var(--brand-primary)
            }

            /* tab bar */
            .tabbar {
                flex: none;
                display: flex;
                justify-content: space-around;
                position: relative;
                z-index: 20;
                background: rgba(255,255,255,.94);
                border-top: 1px solid rgba(var(--brand-primary-rgb),.1)
            }

            .tabbar[hidden], .wide .tabbar {
                display: none!important
            }

            .p-web .tabbar {
                height: 64px;
                padding: 6px 6px 8px
            }

            .p-ios .tabbar {
                height: 84px;
                padding: 7px 8px 28px;
                backdrop-filter: blur(20px)
            }

            .tb {
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 3px;
                font-size: 10.5px;
                color: #7a7f8f
            }

            .tb .ic {
                position: relative;
                display: grid;
                place-items: center
            }

            .tb .i {
                width: 25px;
                height: 25px
            }

            .tb.on {
                color: var(--purple);
                font-weight: 500
            }

            .tb-ai .ic {
                width: 34px;
                height: 30px;
                border-radius: 11px;
                background: var(--gold);
                color: var(--purple)
            }

            .tb-ai .i {
                width: 19px;
                height: 19px
            }

            .p-android .tabbar {
                height: 82px;
                padding: 12px 0 20px;
                background: #e6e8ee;
                border: 0
            }

            .p-android .tb {
                font-size: 12px;
                gap: 4px;
                color: #3f4659
            }

            .p-android .tb .ic {
                width: 64px;
                height: 32px;
                border-radius: 16px;
                transition: background .2s
            }

            .p-android .tb .i {
                width: 23px;
                height: 23px
            }

            .p-android .tb.on {
                color: var(--ink);
                font-weight: 600
            }

            .p-android .tb.on .ic {
                background: #cfd6ea
            }

            .nbadge {
                position: absolute;
                top: -4px;
                inset-inline-end: -9px;
                min-width: 17px;
                height: 17px;
                border-radius: 9px;
                background: var(--red);
                color: #fff;
                font-size: 10px;
                font-style: normal;
                display: grid;
                place-items: center;
                padding: 0 4px;
                border: 2px solid #fff;
                font-weight: 600
            }

            .p-android .nbadge {
                top: 0;
                inset-inline-end: 10px
            }

            /* sidebar (wide web) */
            .sidebar {
                display: none
            }

            .wide .sidebar {
                display: flex;
                flex-direction: column;
                gap: 18px;
                width: 280px;
                flex: none;
                background: var(--surface);
                color: var(--ink);
                border-inline-end:1px solid var(--line);padding: 20px 14px 14px;
                overflow-y: auto;
                scrollbar-width: thin;
                scrollbar-color: #bfc3d0 transparent
            }

            .sb-logo {
                display: flex;
                align-items: center;
                padding: 0 8px
            }

            .sb-logo .logo {
                width: 48px;
                height: 48px;
                max-height: 48px;
                object-fit: contain
            }

            .sb-nav {
                display: flex;
                flex-direction: column;
                gap: 2px
            }

            .sb-nav button {
                display: flex;
                align-items: center;
                gap: 12px;
                height: 42px;
                padding: 0 12px;
                border-radius: 12px;
                font-size: 14.5px;
                color: #4d5366;
                text-align: start
            }

            .sb-nav button:hover {
                background: #f0f2fa
            }

            .sb-nav button.on {
                background: var(--brand-soft);
                color: var(--purple);
                font-weight: 500
            }

            .sb-nav .bdg {
                margin-inline-start:auto}

            .sb-sec {
                border-top: 1px solid var(--line);
                padding-top: 16px;
                display: flex;
                flex-direction: column;
                gap: 10px
            }

            .sb-cap {
                font-size: 12.5px;
                color: var(--muted);
                padding: 0 8px
            }

            .tree {
                display: flex;
                flex-direction: column;
                gap: 1px
            }

            .tr-h {
                display: flex;
                align-items: center;
                gap: 10px;
                width: 100%;
                height: 42px;
                padding: 0 8px;
                border-radius: 10px;
                font-size: 14px;
                text-align: start;
                color: var(--ink)
            }

            .tr-h:hover {
                background: #f0f2fa
            }

            .tr-h>span:nth-child(2) {
                flex: 1
            }

            .tr-ic {
                width: 28px;
                height: 28px;
                border-radius: 8px;
                display: grid;
                place-items: center;
                background: var(--bg);
                color: var(--fg)
            }

            .tr-ic .i {
                width: 16px;
                height: 16px
            }

            .tr-ch {
                width: 16px!important;
                height: 16px!important;
                opacity: .55;
                transition: transform .2s
            }

            .tr.open .tr-ch {
                transform: rotate(180deg)
            }

            .tr-items {
                display: none;
                padding: 0 0 8px;
                padding-inline-start:46px;flex-direction: column
            }

            .tr.open .tr-items {
                display: flex
            }

            .tr-items button {
                text-align: start;
                min-height: 34px;
                font-size: 13.5px;
                color: var(--muted);
                border-radius: 8px;
                padding: 0 10px
            }

            .tr-items button:hover {
                color: var(--purple);
                background: #f0f2fa
            }

            .tr-items button.on {
                color: var(--purple);
                background: #f0f2fa;
                font-weight: 500
            }

            .sb-me {
                margin-top: auto;
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 10px;
                border-radius: 14px;
                background: #f0f2fa
            }

            .sb-me b {
                display: block;
                font-size: 14px;
                font-weight: 500;
                color: var(--ink)
            }

            .sb-me small {
                display: flex;
                align-items: center;
                gap: 6px;
                font-size: 12px;
                color: var(--muted);
                margin-top: 2px
            }

            .beta {
                background: var(--brand-soft);
                border-radius: 6px;
                padding: 0 6px
            }

            /* topbar (wide web) */
            .topbar {
                display: none
            }

            .wide .topbar {
                display: flex;
                align-items: center;
                gap: 14px;
                height: 66px;
                flex: none;
                padding: 0 22px;
                background: var(--surface);
                border-bottom: 1px solid var(--line)
            }

            .tb-search {
                flex: 1;
                max-width: 560px
            }

            .tb-field {
                display: flex;
                align-items: center;
                gap: 10px;
                width: 100%;
                height: 44px;
                border-radius: 14px;
                background: var(--paper);
                padding: 0 14px;
                color: var(--muted);
                font-size: 14px;
                text-align: start
            }

            .tb-field span {
                flex: 1
            }

            kbd {
                font-family: inherit;
                font-size: 12px;
                border: 1px solid var(--line2);
                border-radius: 6px;
                padding: 1px 7px;
                color: var(--muted);
                background: #fff
            }

            .tb-end {
                display: flex;
                align-items: center;
                gap: 8px;
                margin-inline-start:auto}

            .tb-btn {
                display: flex;
                align-items: center;
                gap: 6px;
                height: 40px;
                padding: 0 12px;
                border-radius: 10px;
                font-size: 14px
            }

            .tb-icon {
                width: 40px;
                height: 40px;
                border-radius: 10px;
                display: grid;
                place-items: center;
                position: relative
            }

            .tb-btn:hover, .tb-icon:hover {
                background: var(--paper)
            }

            .nd {
                position: absolute;
                top: 9px;
                inset-inline-end: 10px;
                width: 9px;
                height: 9px;
                border-radius: 50%;
                background: var(--red);
                border: 2px solid #fff
            }

            /* map */

            .leaflet-container {
                font-family: var(--fs)!important;
                background: #e6e8ec!important;
                position: relative;
                overflow: hidden;
                z-index: 0
            }

            .leaflet-pane, .leaflet-tile, .leaflet-marker-icon, .leaflet-marker-shadow, .leaflet-tile-container, .leaflet-pane>svg, .leaflet-pane>canvas { position: absolute; left: 0; top: 0 }
            .leaflet-pane { z-index: 400 }
            .leaflet-tile-pane { z-index: 200 }
            .leaflet-overlay-pane { z-index: 400 }
            .leaflet-shadow-pane { z-index: 500 }
            .leaflet-marker-pane { z-index: 600 }
            .leaflet-tooltip-pane { z-index: 650 }
            .leaflet-popup-pane { z-index: 700 }
            .leaflet-map-pane { z-index: 100 }
            .leaflet-tile { visibility: inherit; user-select: none }
            .leaflet-tile-container { white-space: nowrap }
            .leaflet-marker-icon, .leaflet-marker-shadow { display: block }
            .leaflet-control { position: relative; z-index: 800; pointer-events: auto }
            .leaflet-top, .leaflet-bottom { position: absolute; z-index: 1000; pointer-events: none }
            .leaflet-top { top: 0 }.leaflet-bottom { bottom: 0 }
            .leaflet-left { left: 0 }.leaflet-right { right: 0 }
            .leaflet-top .leaflet-control { margin-top: 10px }.leaflet-left .leaflet-control { margin-left: 10px }
            .leaflet-bar { box-shadow: 0 1px 5px rgba(0,0,0,.25); border-radius: 4px; overflow: hidden }
            .leaflet-bar a { display: block; width: 30px; height: 30px; line-height: 30px; background: #fff; color: var(--brand-primary); text-align: center; text-decoration: none; font-size: 20px }
            .leaflet-bar a+a { border-top: 1px solid var(--brand-line-strong) }
            .leaflet-control-attribution { padding: 2px 5px; background: rgba(255,255,255,.75); font-size: 9px }
            .leaflet-control-attribution a { color: var(--brand-primary) }

            .leaflet-tile-pane {
                filter: saturate(.55) contrast(.97)
            }

            .leaflet-control-attribution {
                font-size: 9px!important;
                background: rgba(255,255,255,.75)!important
            }

            .leaflet-top {
                top: 108px
            }

            .p-ios .leaflet-top {
                top: 150px
            }

            .p-android .leaflet-top {
                top: 140px
            }

            .wide .leaflet-top {
                top: auto
            }

            .fbmap {
                position: absolute;
                inset: 0;
                display: none
            }

            .fallback .fbmap {
                display: block
            }

            .fbmap svg {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%
            }

            .fb-pins {
                position: absolute;
                inset: 0
            }

            .fbp {
                position: absolute;
                transform: translate(-50%,calc(-50% - 25px))
            }

            .fbme {
                position: absolute;
                transform: translate(-50%,-50%)
            }

            .mk {
                width: 36px;
                height: 36px;
                border-radius: 50% 50% 50% 4px;
                transform: rotate(-45deg);
                background: var(--fg);
                border: 2.5px solid #fff;
                box-shadow: 0 4px 10px rgba(var(--brand-primary-rgb),.35);
                display: grid;
                place-items: center;
                cursor: pointer;
                transition: box-shadow .2s
            }

            .mk span {
                transform: rotate(45deg);
                color: #fff;
                display: grid
            }

            .mk .i {
                width: 16px;
                height: 16px;
                stroke-width: 2.2
            }

            .mk.sel {
                box-shadow: 0 0 0 6px color-mix(in srgb,var(--fg) 28%,transparent),0 6px 14px rgba(var(--brand-primary-rgb),.4)
            }

            @keyframes pulse {
                50% {
                    box-shadow: 0 0 0 10px rgba(var(--brand-primary-rgb),.08)
                }
            }

            /* screen container */
            #screen {
                position: absolute;
                inset: 0;
                z-index: 5;
                display: flex;
                flex-direction: column;
                overflow: auto;
            }

            #screen.solid {
                background: var(--paper)
            }

      

            .pad {
                padding: 4px 16px 30px
            }

            .wide .pad {
                max-width: 1160px;
                margin: 0 auto;
                padding: 6px 36px 48px
            }

            #screen.nav-push {
                animation: navIn .3s cubic-bezier(.2,.8,.2,1)
            }

            .p-android #screen.nav-push {
                animation: navUp .28s cubic-bezier(.2,.8,.2,1)
            }

            #screen.nav-pop, #screen.nav-tab, .wide #screen.nav-push {
                animation: fade .2s
            }

            @keyframes navIn {
                from {
                    opacity: .3;
                    transform: translateX(var(--dx))
                }

                to {
                    opacity: 1;
                    transform: none
                }
            }

            @keyframes navUp {
                from {
                    opacity: 0;
                    transform: translateY(14px)
                }

                to {
                    opacity: 1;
                    transform: none
                }
            }

            @keyframes fade {
                from {
                    opacity: 0
                }
            }

            @keyframes up {
                from {
                    transform: translateY(100%)
                }
            }

            @keyframes popin {
                from {
                    transform: scale(.4);
                    opacity: 0
                }
            }

            /* headers */
            .hdr {
                flex: none
            }

            .nb {
                height: 46px;
                display: flex;
                align-items: center;
                padding: 0 10px;
                gap: 6px;
                position: relative
            }

            .hdr.root .nb {
                height: 34px
            }

            .nb-back {
                display: inline-flex;
                align-items: center;
                color: var(--purple);
                font-size: 16px;
                height: 40px;
                padding-inline-end:6px;position: relative;
                z-index: 2
            }

            .nb-back .ios-only {
                display: inline-flex;
                align-items: center;
                gap: 1px
            }

            .nb-back .i {
                width: 24px;
                height: 24px
            }

            .nb-title {
                position: absolute;
                left: 0;
                right: 0;
                text-align: center;
                font-weight: 600;
                font-size: 16px;
                pointer-events: none;
                padding: 0 96px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis
            }

            .hdr.root .nb-title {
                opacity: 0
            }

            .nb-act {
                margin-inline-start:auto;display: flex;
                align-items: center;
                gap: 4px;
                position: relative;
                z-index: 2
            }

            .lt {
                font-size: 31px;
                font-weight: 700;
                padding: 0 18px 8px;
                letter-spacing: -.01em;
                line-height: 1.2
            }

            .hdr.sub .lt {
                display: none
            }

            .crumbs {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: 4px;
                padding: 0 18px 8px;
                font-size: 12.5px;
                color: var(--muted)
            }

            .cr {
                display: inline-flex;
                align-items: center;
                gap: 4px
            }

            .crumbs button {
                color: var(--purple)
            }

            .crumbs .i {
                width: 12px;
                height: 12px;
                opacity: .6
            }

            .cr.cur {
                display: none
            }

            .nb-btn {
                height: 36px;
                padding: 0 8px;
                color: var(--purple);
                font-size: 15px;
                display: inline-flex;
                align-items: center;
                gap: 6px;
                border-radius: 10px;
                font-weight: 500
            }

            .nb-btn.add span {
                display: none
            }

            .p-android .nb {
                height: 64px;
                padding: 0 4px
            }

            .p-android .nb-title {
                position: static;
                text-align: start;
                flex: 1;
                font-size: 22px;
                font-weight: 500;
                opacity: 1!important;
                padding: 0 12px
            }

            .p-android .hdr.sub .nb-title {
                padding: 0 4px
            }

            .p-android .lt {
                display: none
            }

            .p-android .nb-back {
                width: 48px;
                height: 48px;
                border-radius: 50%;
                justify-content: center;
                padding: 0;
                color: var(--ink)
            }

            .p-android .nb-act {
                margin: 0
            }

            .p-android .nb-btn.add {
                display: none
            }

            .p-android .crumbs {
                padding: 0 16px 8px
            }

            .wide .hdr {
                display: grid;
                grid-template-columns: 1fr auto;
                grid-template-areas: "cr act" "lt act";
                align-items: end;
                column-gap: 16px;
                padding: 26px 36px 12px;
                max-width: 1160px;
                width: 100%;
                margin: 0 auto
            }

            .wide .nb {
                display: contents
            }

            .wide .nb-back, .wide .nb-title {
                display: none
            }

            .wide .nb-act {
                grid-area: act;
                align-self: center
            }

            .wide .crumbs {
                grid-area: cr;
                padding: 0;
                margin-bottom: 6px
            }

            .wide .cr.cur {
                display: inline-flex;
                color: var(--ink)
            }

            .wide .lt, .wide .hdr.sub .lt {
                grid-area: lt;
                display: block;
                padding: 0;
                font-size: 28px
            }

            .wide .nb-btn.add {
                background: var(--purple);
                color: #fff;
                padding: 0 16px;
                height: 42px
            }

            .wide .nb-btn.add span {
                display: inline
            }

            /* shared components */
            .btn {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                height: 48px;
                padding: 0 18px;
                border-radius: 14px;
                font-weight: 500;
                font-size: 15px;
                white-space: nowrap
            }

            .btn .i {
                width: 19px;
                height: 19px
            }

            .btn.pri {
                background: var(--purple);
                color: #fff
            }

            .btn.gold {
                background: var(--gold);
                color: var(--purple)
            }

            .btn.ghost {
                background: var(--brand-soft);
                color: var(--purple)
            }

            .btn.sm {
                height: 34px;
                padding: 0 12px;
                font-size: 13px;
                border-radius: 10px
            }

            .p-android .btn {
                border-radius: 24px;
                height: 46px
            }

            .p-android .btn.sm {
                height: 34px
            }

            .wide .btn {
                height: 42px;
                border-radius: 10px
            }

            .wfull {
                width: 100%;
                margin-top: 12px
            }

            .grow {
                flex: 1
            }

            .link {
                color: var(--purple);
                font-size: 13.5px;
                font-weight: 500
            }

            .icbtn {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                display: grid;
                place-items: center;
                flex: none;
                color: var(--muted)
            }

            .icbtn.light {
                background: rgba(255,255,255,.1);
                color: #fff
            }

            .bdg {
                display: inline-grid;
                place-items: center;
                min-width: 20px;
                height: 20px;
                padding: 0 6px;
                border-radius: 10px;
                background: var(--gold);
                color: var(--purple);
                font-size: 11.5px;
                font-weight: 600;
                font-style: normal;
                flex: none
            }

            .aud-tag {
                display: inline-flex;
                align-items: center;
                height: 22px;
                padding: 0 9px;
                border-radius: 11px;
                background: var(--brand-soft);
                color: var(--purple);
                font-size: 11.5px;
                font-weight: 500;
                white-space: nowrap
            }

            .aud-tag.light {
                background: rgba(var(--brand-aqua-rgb),.18);
                color: #cfd6ec
            }

            .gt {
                font-size: 13.5px;
                color: var(--muted);
                margin: 22px 4px 0;
                font-weight: 500
            }

            .lead {
                color: var(--muted);
                font-size: 14px;
                line-height: 1.7;
                margin: 2px 2px 12px;
                max-width: 62ch
            }

            .count {
                font-size: 13px;
                color: var(--muted);
                margin: 14px 4px 0
            }

            .hint {
                font-size: 12.5px;
                color: var(--muted);
                margin-top: 7px;
                line-height: 1.5
            }

            .hint:empty {
                display: none
            }

            .hint.err {
                color: var(--red)
            }

            .ferr {
                display: flex;
                align-items: center;
                gap: 6px;
                color: var(--red);
                font-size: 13px;
                margin-top: 8px
            }

            .ferr .i {
                width: 16px;
                height: 16px
            }

            .av {
                width: 38px;
                height: 38px;
                border-radius: 12px;
                background: var(--gold);
                color: var(--purple);
                display: grid;
                place-items: center;
                font-weight: 600;
                font-size: 14px;
                flex: none
            }

            .logo {
                display: block
            }

            .contours {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                pointer-events: none
            }

            .seg {
                display: flex;
                background: #e8edf5;
                border-radius: 12px;
                padding: 3px;
                gap: 2px
            }

            .seg button {
                flex: 1;
                height: 38px;
                border-radius: 9px;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 7px;
                font-size: 14px;
                font-weight: 500;
                color: #4d5366;
                transition: background .2s,color .2s
            }

            .seg .i {
                width: 18px;
                height: 18px
            }

            .seg button.on {
                background: #fff;
                color: var(--ink);
                box-shadow: 0 2px 6px rgba(var(--brand-primary-rgb),.12)
            }

            .sg-ic {
                display: inline-flex
            }

            .sg-ck {
                display: none
            }

            .p-android .seg:not(.dark) {
                background: none;
                padding: 0;
                gap: 0;
                border: 1px solid #6e7484;
                border-radius: 20px;
                overflow: hidden
            }

            .p-android .seg:not(.dark) button {
                border-radius: 0;
                height: 40px;
                color: var(--ink);
                box-shadow: none
            }

            .p-android .seg:not(.dark) button+button {
                border-inline-start:1px solid #6e7484}

            .p-android .seg:not(.dark) button.on {
                background: #cfd6ea
            }

            .p-android .seg .sg-ic {
                display: none
            }

            .p-android .seg button.on .sg-ck {
                display: inline-flex
            }

            .chips {
                display: flex;
                gap: 8px;
                overflow-x: auto;
                scrollbar-width: none;
                padding: 2px 12px 6px;
                margin: 0 -12px
            }

            .chips::-webkit-scrollbar, .qs::-webkit-scrollbar, .quick::-webkit-scrollbar {
                display: none
            }

            .chip {
                flex: none;
                display: flex;
                align-items: center;
                gap: 6px;
                height: 34px;
                padding: 0 13px;
                border-radius: 17px;
                background: #fff;
                font-size: 13px;
                box-shadow: 0 2px 8px rgba(var(--brand-primary-rgb),.12);
                white-space: nowrap
            }

            .chip .i {
                width: 16px;
                height: 16px
            }

            .chip .dot {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                display: block
            }

            .chip.on {
                background: var(--gold);
                color: var(--purple);
                font-weight: 500
            }

            .ck-and {
                display: none
            }

            .p-android .chip {
                border-radius: 8px;
                height: 32px;
                box-shadow: 0 1px 3px rgba(0,0,0,.08);
                border: 1px solid #b8bdcc
            }

            .p-android .chip.on {
                background: #cfd6ea;
                color: var(--ink);
                border-color: transparent
            }

            .p-android .chip.on .ck-and {
                display: inline-flex
            }

            .p-android .chip.on .dot {
                display: none
            }

            .chips.flat {
                margin: 0 -16px;
                padding: 2px 16px 6px
            }

            .chips.flat .chip {
                box-shadow: none;
                border: 1px solid var(--line2)
            }

            .chips.flat .chip.on {
                border-color: var(--gold)
            }

            .wide .chips.flat {
                flex-wrap: wrap;
                margin: 0;
                padding: 0
            }

            .opts {
                display: flex;
                flex-wrap: wrap;
                gap: 8px
            }

            .opt {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                min-height: 38px;
                padding: 0 14px;
                border-radius: 19px;
                border: 1px solid var(--line2);
                background: #fff;
                font-size: 14px
            }

            .opt .i {
                width: 16px;
                height: 16px;
                stroke-width: 2.4
            }

            .opt .ck {
                display: none
            }

            .opt.on {
                background: var(--brand-soft);
                border-color: var(--gold);
                color: var(--purple);
                font-weight: 500
            }

            .opt.on .ck {
                display: inline-flex
            }

            .p-android .opt {
                border-radius: 8px;
                min-height: 34px
            }

            .p-android .opt.on {
                background: #cfd6ea;
                color: var(--ink);
                border-color: transparent
            }

            .search {
                display: flex;
                align-items: center;
                gap: 10px;
                height: 44px;
                border-radius: 12px;
                background: #e8edf5;
                padding: 0 12px;
                margin-top: 12px;
                color: var(--muted)
            }

            .search .i {
                width: 19px;
                height: 19px
            }

            .search input {
                flex: 1;
                border: 0;
                background: none;
                outline: none;
                font-size: 15px;
                color: var(--ink);
                min-width: 0
            }

            .search input::placeholder {
                color: #7c8190
            }

            .p-android .search {
                border-radius: 28px;
                height: 52px;
                background: #e6e8ec;
                padding: 0 18px
            }

            .wide .search {
                background: var(--surface);
                border: 1px solid var(--line2);
                max-width: 560px
            }

            .group {
                background: var(--surface);
                border-radius: 16px;
                overflow: hidden;
                margin-top: 12px
            }

            .row {
                display: flex;
                align-items: center;
                gap: 12px;
                width: 100%;
                padding: 11px 14px;
                text-align: start;
                min-height: 58px;
                position: relative
            }

            .row+.row::before {
                content: '';
                position: absolute;
                top: 0;
                inset-inline-start: 62px;
                inset-inline-end: 0;
                height: 1px;
                background: var(--line)
            }

            .row:active {
                background: #eef0f4
            }

            .wide .row:hover {
                background: #f6f7f9
            }

            .ri {
                width: 36px;
                height: 36px;
                border-radius: 10px;
                display: grid;
                place-items: center;
                background: var(--bg,var(--brand-soft));
                color: var(--fg,var(--purple));
                flex: none
            }

            .ri .i {
                width: 20px;
                height: 20px
            }

            .ri.lg {
                width: 46px;
                height: 46px;
                border-radius: 14px
            }

            .ri.lg .i {
                width: 24px;
                height: 24px
            }

            .ri.xl {
                width: 58px;
                height: 58px;
                border-radius: 18px;
                background: var(--fg);
                color: #fff
            }

            .ri.xl .i {
                width: 29px;
                height: 29px
            }

            .rt {
                flex: 1;
                min-width: 0
            }

            .rt b {
                display: block;
                font-weight: 500;
                font-size: 15px;
                line-height: 1.4
            }

            .rt small {
                display: block;
                color: var(--muted);
                font-size: 12.5px;
                margin-top: 2px;
                line-height: 1.45
            }

            .chev {
                width: 18px!important;
                height: 18px!important;
                color: #a7abb8
            }

            .row.danger b {
                color: var(--red)
            }

            .row.danger .ri {
                background: #F8E4E2;
                color: var(--red)
            }

            .rs {
                font-size: 11.5px;
                padding: 3px 8px;
                border-radius: 8px;
                background: var(--gold-soft);
                color: var(--brand-primary);
                flex: none
            }

            .amt {
                font-size: 13px;
                font-weight: 600;
                flex: none
            }

            .p-android .group {
                background: transparent;
                border-radius: 0;
                margin-top: 6px
            }

            .p-android .row+.row::before {
                display: none
            }

            .p-android .row {
                padding: 12px 4px
            }

            .p-android .ri {
                border-radius: 50%
            }

            .p-android .ri.xl {
                border-radius: 20px
            }

            .sw {
                width: 51px;
                height: 31px;
                border-radius: 16px;
                background: #d3d6de;
                position: relative;
                flex: none;
                transition: background .2s
            }

            .sw::after {
                content: '';
                position: absolute;
                top: 2px;
                inset-inline-start: 2px;
                width: 27px;
                height: 27px;
                border-radius: 50%;
                background: #fff;
                box-shadow: 0 2px 4px rgba(0,0,0,.2);
                transition: inset-inline-start .2s
            }

            .sw.on {
                background: #2c3961
            }

            .sw.on::after {
                inset-inline-start: 22px
            }

            .p-android .sw {
                width: 52px;
                height: 32px;
                background: #e8edf5;
                border: 2px solid #6e7484
            }

            .p-android .sw::after {
                width: 16px;
                height: 16px;
                top: 6px;
                inset-inline-start: 6px;
                background: #6e7484;
                box-shadow: none;
                transition: all .2s
            }

            .p-android .sw.on {
                background: var(--purple);
                border-color: var(--purple)
            }

            .p-android .sw.on::after {
                width: 24px;
                height: 24px;
                top: 2px;
                inset-inline-start: 22px;
                background: #fff
            }

            .p-web .sw.on {
                background: var(--purple)
            }

            .mini-seg {
                display: inline-flex;
                background: var(--brand-soft);
                border-radius: 9px;
                padding: 2px;
                flex: none
            }

            .mini-seg button {
                height: 30px;
                padding: 0 10px;
                border-radius: 7px;
                font-size: 13px;
                color: var(--muted)
            }

            .mini-seg button.on {
                background: #fff;
                color: var(--purple);
                font-weight: 500
            }

            .radio {
                width: 22px;
                height: 22px;
                border-radius: 50%;
                border: 2px solid var(--line2);
                flex: none;
                position: relative
            }

            .radio.on {
                border-color: var(--purple)
            }

            .radio.on::after {
                content: '';
                position: absolute;
                inset: 3px;
                border-radius: 50%;
                background: var(--purple)
            }

            .empty {
                text-align: center;
                padding: 36px 20px;
                color: var(--muted)
            }

            .empty>.i {
                width: 36px;
                height: 36px;
                margin: 0 auto 10px;
                color: #a7abb8
            }

            .empty b {
                display: block;
                color: var(--ink);
                font-weight: 500;
                font-size: 15px
            }

            .empty p {
                font-size: 13.5px;
                margin: 6px auto 14px;
                max-width: 32ch;
                line-height: 1.6
            }

            /* explore */
            .ex {
                position: absolute;
                inset: 0
            }

            .ex-top {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                padding: 10px 12px 0;
                display: flex;
                flex-direction: column;
                gap: 10px
            }

            .p-ios .on-map .ex-top {
                padding-top: 54px
            }

            .p-android .on-map .ex-top {
                padding-top: 44px
            }

            .searchbar {
                display: flex;
                align-items: center;
                gap: 8px;
                background: #fff;
                border-radius: 18px;
                padding: 6px;
                box-shadow: 0 8px 26px rgba(var(--brand-primary-rgb),.16),0 0 0 1px rgba(var(--brand-primary-rgb),.05)
            }

            .p-android .searchbar {
                border-radius: 28px;
                background: #eaecf1;
                padding: 6px 8px
            }

            .avatar {
                width: 38px;
                height: 38px;
                border-radius: 12px;
                background: var(--purple);
                color: #fff;
                font-weight: 600;
                font-size: 14px;
                flex: none
            }

            .p-android .avatar {
                border-radius: 50%
            }

            .sb-field {
                flex: 1;
                min-width: 0;
                text-align: start;
                color: var(--muted);
                font-size: 14px;
                display: flex;
                gap: 8px;
                align-items: center;
                height: 38px;
                padding-inline:4px}

            .sb-field span {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis
            }

            .sb-field .i {
                width: 19px;
                height: 19px
            }

            .sb-mic {
                width: 38px;
                height: 38px;
                border-radius: 12px;
                background: var(--gold-soft);
                color: var(--brand-primary);
                display: grid;
                place-items: center;
                flex: none
            }

            .p-android .sb-mic {
                border-radius: 50%
            }

            .locate {
                position: absolute;
                bottom: 274px;
                inset-inline-end: 12px;
                width: 46px;
                height: 46px;
                border-radius: 14px;
                background: #fff;
                color: var(--purple);
                display: grid;
                place-items: center;
                box-shadow: 0 4px 14px rgba(var(--brand-primary-rgb),.18);
                transition: bottom .35s cubic-bezier(.2,.8,.2,1)
            }

            .p-android .locate {
                inset-inline-end: auto;
                inset-inline-start: 12px;
                border-radius: 50%
            }

            .ex.pv .locate {
                bottom: 300px
            }

            .ex.exp .locate, .ex.exp .fab-ext {
                opacity: 0;
                pointer-events: none
            }

            .fab-ext {
                position: absolute;
                bottom: 274px;
                inset-inline-end: 14px;
                height: 54px;
                padding: 0 18px;
                border-radius: 16px;
                background: #cbd3ea;
                color: var(--ink);
                display: flex;
                align-items: center;
                gap: 10px;
                font-weight: 500;
                font-size: 15px;
                box-shadow: 0 6px 16px rgba(var(--brand-primary-rgb),.22)
            }

            .fab-ext .i {
                width: 20px;
                height: 20px
            }

            .ex-sheet {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                height: 262px;
                background: var(--surface);
                border-radius: 28px 28px 0 0;
                box-shadow: 0 -8px 30px rgba(var(--brand-primary-rgb),.14);
                display: flex;
                flex-direction: column;
                transition: height .35s cubic-bezier(.2,.8,.2,1)
            }

            .ex.exp .ex-sheet {
                height: calc(100% - 120px)
            }

            .p-ios .on-map .ex.exp .ex-sheet {
                height: calc(100% - 160px)
            }

            .ex.pv .ex-sheet {
                height: 290px
            }

            .p-android .ex-sheet {
                background: #f9f9fb
            }

            .grab {
                height: 26px;
                flex: none;
                display: grid;
                place-items: center;
                cursor: grab;
                touch-action: none;
                width: 100%
            }

            .grab i {
                width: 38px;
                height: 5px;
                border-radius: 3px;
                background: #c2c6d3
            }

            .sheet-body {
                flex: 1;
                min-height: 0;
                overflow: hidden;
                padding: 0 16px 16px
            }

            .ex.exp .sheet-body, .ex.pv .sheet-body {
                overflow-y: auto
            }

            .qs {
                display: flex;
                gap: 6px;
                overflow-x: auto;
                margin: 14px -16px 0;
                padding: 4px 16px 4px;
                scrollbar-width: none
            }

            .qt {
                flex: none;
                width: 78px;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 7px;
                font-size: 12px;
                text-align: center;
                line-height: 1.3
            }

            .qt .sq {
                width: 56px;
                height: 56px;
                border-radius: 18px;
                display: grid;
                place-items: center;
                position: relative;
                background: var(--bg,var(--brand-soft));
                color: var(--fg,var(--purple))
            }

            .qt .sq .i {
                width: 25px;
                height: 25px
            }

            .qt .sq.all {
                background: var(--purple);
                color: #fff
            }

            .qt .bdg {
                position: absolute;
                top: -5px;
                inset-inline-end: -6px;
                border: 2px solid #fff;
                height: 22px
            }

            .qt:active .sq {
                transform: scale(.95)
            }

            .p-android .qt .sq {
                border-radius: 16px
            }

            .lh {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 14px;
                gap: 10px
            }

            .lh h3 {
                font-size: 16px;
                font-weight: 600
            }

            .pl {
                display: flex;
                gap: 12px;
                align-items: center;
                padding: 11px 0;
                border-bottom: 1px solid var(--line);
                text-align: start;
                width: 100%
            }

            .pl:last-child {
                border: 0
            }

            .wide .pl:hover {
                background: #f6f7f9
            }

            .pl .ico {
                width: 44px;
                height: 44px;
                border-radius: 14px;
                background: var(--bg);
                color: var(--fg);
                display: grid;
                place-items: center;
                flex: none
            }

            .pt {
                flex: 1;
                min-width: 0
            }

            .pt b {
                display: block;
                font-size: 14.5px;
                font-weight: 500
            }

            .pt small {
                display: block;
                font-size: 12.5px;
                color: var(--muted);
                margin-top: 2px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis
            }

            .pd {
                font-size: 12px;
                color: var(--muted);
                flex: none
            }

            .pv-head {
                display: flex;
                gap: 12px;
                align-items: flex-start;
                margin-top: 2px
            }

            .pv-head .ico {
                width: 50px;
                height: 50px;
                border-radius: 16px;
                background: var(--bg);
                color: var(--fg);
                display: grid;
                place-items: center;
                flex: none
            }

            .pv-head h3 {
                font-size: 18px;
                font-weight: 600;
                line-height: 1.35
            }

            .meta {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: 6px 12px;
                margin-top: 6px;
                font-size: 13px;
                color: var(--muted)
            }

            .meta>span {
                display: inline-flex;
                align-items: center;
                gap: 4px
            }

            .meta .i {
                width: 14px;
                height: 14px
            }

            .meta .st {
                color: #3e559a
            }

            .catc {
                height: 22px;
                padding: 0 8px;
                border-radius: 7px;
                background: var(--bg);
                color: var(--fg);
                font-weight: 500;
                font-size: 12px
            }

            .pv-hl {
                display: flex;
                align-items: center;
                gap: 8px;
                margin-top: 12px;
                padding: 10px 12px;
                border-radius: 12px;
                background: var(--gold-soft);
                color: var(--brand-primary);
                font-size: 14px;
                font-weight: 500
            }

            .pv-hl .i {
                width: 18px;
                height: 18px
            }

            .pv-open {
                font-size: 13px;
                color: var(--green);
                margin-top: 10px;
                display: flex;
                align-items: center;
                gap: 6px
            }

            .pv-open i {
                width: 7px;
                height: 7px;
                border-radius: 50%;
                background: currentColor
            }

            .pv-acts {
                display: flex;
                gap: 8px;
                margin-top: 14px
            }

            .pv-acts .btn {
                flex: 1
            }

            .rnd {
                width: 48px;
                height: 48px;
                border-radius: 14px;
                background: var(--brand-soft);
                color: var(--purple);
                display: grid;
                place-items: center;
                flex: none
            }

            .rnd.on {
                background: var(--purple);
                color: #fff
            }

            .p-android .rnd {
                border-radius: 50%
            }

            .wide .ex-top {
                top: 14px;
                left: auto;
                right: auto;
                inset-inline-start: 422px;
                inset-inline-end: 14px;
                padding: 0
            }

            .wide .searchbar {
                display: none
            }

            .wide .chips {
                margin: 0;
                padding: 0;
                flex-wrap: wrap
            }

            .wide .ex-sheet {
                top: 14px;
                bottom: 14px;
                left: auto;
                right: auto;
                inset-inline-start: 14px;
                width: 394px;
                height: auto!important;
                border-radius: 22px
            }

            .wide .grab, .wide .see-all {
                display: none
            }

            .wide .sheet-body {
                overflow-y: auto!important;
                padding-top: 16px
            }

            .wide .qs {
                flex-wrap: wrap;
                overflow: visible;
                margin: 14px 0 0;
                padding: 4px 0;
                row-gap: 12px
            }

            .wide .qt {
                width: calc(25% - 5px)
            }

            .wide .locate {
                bottom: auto;
                top: 62px;
                inset-inline-end: 14px;
                inset-inline-start: auto
            }

            /* sectors */
            .quick {
                display: flex;
                gap: 8px;
                overflow-x: auto;
                scrollbar-width: none;
                margin: 8px -16px 0;
                padding: 2px 16px
            }

            .wide .quick {
                margin: 8px 0 0;
                padding: 0;
                flex-wrap: wrap
            }

            .qk {
                flex: none;
                display: inline-flex;
                align-items: center;
                gap: 8px;
                height: 40px;
                padding: 0 12px;
                padding-inline-start:6px;border-radius: 12px;
                background: var(--surface);
                font-size: 13.5px;
                white-space: nowrap
            }

            .qk .ri {
                width: 28px;
                height: 28px;
                border-radius: 9px
            }

            .qk .ri .i {
                width: 15px;
                height: 15px
            }

            .sec-grid {
                display: grid;
                gap: 12px;
                margin-top: 14px
            }

            .wide .sec-grid {
                grid-template-columns: repeat(auto-fill,minmax(340px,1fr))
            }

            .sc {
                background: var(--surface);
                border-radius: 20px;
                padding: 6px 6px 14px
            }

            .sc-head {
                display: flex;
                align-items: center;
                gap: 12px;
                width: 100%;
                padding: 10px;
                text-align: start;
                border-radius: 14px
            }

            .sc-head .rt b {
                display: flex;
                align-items: center;
                gap: 8px;
                font-size: 16px
            }

            .sc-items {
                display: flex;
                flex-wrap: wrap;
                gap: 6px;
                padding: 2px 14px 0
            }

            .pill {
                min-height: 32px;
                padding: 4px 12px;
                border-radius: 10px;
                background: var(--bg);
                color: var(--fg);
                font-size: 13px;
                font-weight: 500
            }

            .p-android .sc {
                border-radius: 16px;
                background: #e9ebf0
            }

            .p-android .pill {
                border-radius: 8px;
                background: #fff;
                border: 1px solid #c3c8d6;
                color: var(--ink)
            }

            .sec-hero {
                display: flex;
                gap: 14px;
                align-items: center;
                background: var(--bg);
                border-radius: 22px;
                padding: 16px;
                margin-top: 4px
            }

            .sec-hero p {
                color: var(--fg);
                font-size: 14.5px;
                line-height: 1.6;
                font-weight: 500
            }

            .sec-hero .aud-tag {
                margin-top: 8px;
                background: rgba(255,255,255,.65)
            }

            /* company */
            .co-hero {
                position: relative;
                overflow: hidden;
                background: var(--purple);
                color: #fff;
                border-radius: 24px;
                padding: 16px 18px 18px
            }

            .co-hero>*:not(.contours) {
                position: relative
            }

            .co-top {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 10px
            }

            .co-logo {
                width: 52px;
                height: 52px;
                border-radius: 16px;
                background: var(--gold);
                color: var(--purple);
                display: grid;
                place-items: center;
                font-size: 22px;
                font-weight: 700;
                flex: none
            }

            .co-logo.sm {
                width: 40px;
                height: 40px;
                border-radius: 12px;
                font-size: 17px
            }

            .co-sw {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                height: 34px;
                padding: 0 12px;
                border-radius: 17px;
                background: rgba(255,255,255,.1);
                font-size: 13px
            }

            .co-sw .i {
                width: 16px;
                height: 16px
            }

            .co-hero h2 {
                font-size: 21px;
                font-weight: 600;
                margin-top: 14px;
                line-height: 1.35
            }

            .co-tags {
                display: flex;
                flex-wrap: wrap;
                gap: 6px;
                margin-top: 10px
            }

            .co-tags span {
                display: inline-flex;
                align-items: center;
                gap: 4px;
                height: 26px;
                padding: 0 10px;
                border-radius: 13px;
                background: rgba(255,255,255,.1);
                font-size: 12px
            }

            .co-tags .vt {
                background: rgba(var(--brand-aqua-rgb),.2);
                color: #cdd4eb
            }

            .co-tags .i {
                width: 14px;
                height: 14px
            }

            .co-stats {
                display: grid;
                grid-template-columns: repeat(3,1fr);
                margin-top: 18px;
                border-top: 1px solid rgba(255,255,255,.12);
                padding-top: 14px
            }

            .co-stats div+div {
                border-inline-start:1px solid rgba(255,255,255,.12);padding-inline-start:12px}

            .co-stats b {
                font-size: 20px;
                font-weight: 600;
                display: block
            }

            .co-stats small {
                font-size: 11.5px;
                color: #bfc6dc;
                line-height: 1.35;
                display: block;
                margin-top: 2px
            }

            .card {
                background: var(--surface);
                border-radius: 20px;
                padding: 16px;
                margin-top: 12px
            }

            .p-android .card {
                background: #e9ebf0
            }

            .prog-h {
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 15px;
                gap: 10px
            }

            .prog-h span {
                font-weight: 600;
                color: var(--purple)
            }

            .bar {
                height: 8px;
                border-radius: 4px;
                background: var(--brand-soft);
                margin-top: 10px;
                overflow: hidden
            }

            .bar i {
                display: block;
                height: 100%;
                background: var(--green);
                border-radius: 4px;
                transition: width .4s
            }

            .tasks {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 8px;
                margin-top: 12px
            }

            .task {
                display: flex;
                align-items: center;
                gap: 8px;
                font-size: 13px;
                text-align: start;
                padding: 9px;
                border-radius: 12px;
                background: var(--paper)
            }

            .task.done {
                color: var(--muted)
            }

            .cb {
                width: 20px;
                height: 20px;
                border-radius: 6px;
                border: 1.5px solid #b3b8c8;
                display: grid;
                place-items: center;
                flex: none;
                background: #fff;
                color: transparent
            }

            .cb .i {
                width: 14px;
                height: 14px;
                stroke-width: 2.8
            }

            .task.done .cb, .cb.on {
                background: var(--green);
                border-color: var(--green);
                color: #fff
            }

            .tiles {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 10px;
                margin-top: 10px
            }

            .tile {
                background: var(--surface);
                border-radius: 18px;
                padding: 14px;
                text-align: start;
                display: flex;
                flex-direction: column;
                gap: 10px;
                min-height: 118px;
                border: 1px solid transparent
            }

            .tile b {
                font-weight: 500;
                font-size: 14.5px;
                line-height: 1.35
            }

            .stl {
                margin-top: auto;
                font-size: 12px;
                display: flex;
                align-items: center;
                gap: 6px
            }

            .stl i {
                width: 7px;
                height: 7px;
                border-radius: 50%;
                background: currentColor;
                flex: none
            }

            .st-active .stl {
                color: var(--green)
            }

            .st-sub {
                background: #f2f4fa;
                border-color: var(--brand-aqua)
            }

            .st-sub .stl {
                color: var(--brand-primary)
            }

            .st-off .stl {
                color: var(--muted)
            }

            .st-off .stl i {
                background: none;
                border: 1.5px solid currentColor
            }

            .st-review .stl {
                color: #3d4f86
            }

            .p-android .tile {
                border-radius: 12px;
                background: #e9ebf0
            }

            .p-android .st-sub {
                background: #e4e8f4
            }

            .wide .tile:hover {
                border-color: var(--line2)
            }

            .wide .co-layout {
                display: grid;
                grid-template-columns: minmax(320px,390px) 1fr;
                gap: 28px;
                align-items: start
            }

            .wide .co-main>.gt:first-child {
                margin-top: 0
            }

            .wide .tiles {
                grid-template-columns: repeat(3,1fr)
            }

            /* services */
            .svc {
                position: relative;
                background: var(--surface);
                border-radius: 18px;
                padding: 14px 16px;
                margin-top: 10px
            }

            .p-android .svc {
                background: #e9ebf0;
                border-radius: 12px
            }

            .svc-h {
                display: flex;
                align-items: flex-start;
                gap: 10px
            }

            .svc-h b {
                font-size: 16px;
                font-weight: 600;
                flex: 1;
                padding-top: 8px
            }

            .svc p {
                color: var(--muted);
                font-size: 13.5px;
                margin-top: 2px;
                line-height: 1.65
            }

            .tags {
                display: flex;
                flex-wrap: wrap;
                gap: 6px;
                margin-top: 10px
            }

            .tag {
                font-size: 12px;
                padding: 4px 10px;
                border-radius: 8px;
                background: #e3e7f3;
                color: var(--purple)
            }

            .warn {
                display: inline-flex;
                align-items: center;
                gap: 4px;
                font-size: 11.5px;
                color: var(--brand-primary);
                background: #e3e7f3;
                border-radius: 7px;
                padding: 3px 8px;
                margin-top: 10px
            }

            .warn .i {
                width: 13px;
                height: 13px
            }

            .pop {
                position: absolute;
                top: 48px;
                inset-inline-end: 10px;
                background: #fff;
                border-radius: 14px;
                box-shadow: 0 12px 32px rgba(var(--brand-primary-rgb),.2),0 0 0 1px rgba(var(--brand-primary-rgb),.06);
                min-width: 170px;
                padding: 6px;
                z-index: 10;
                animation: fade .15s
            }

            .pop button {
                display: flex;
                align-items: center;
                gap: 10px;
                width: 100%;
                height: 42px;
                padding: 0 10px;
                border-radius: 9px;
                font-size: 14.5px;
                text-align: start
            }

            .pop button:hover {
                background: var(--paper)
            }

            .pop .i {
                width: 18px;
                height: 18px
            }

            .pop .dg {
                color: var(--red)
            }

            .wide .svc-list {
                display: grid;
                grid-template-columns: repeat(auto-fill,minmax(330px,1fr));
                gap: 12px;
                margin-top: 12px
            }

            .wide .svc {
                margin-top: 0
            }

            .fab {
                position: absolute;
                bottom: 18px;
                inset-inline-end: 16px;
                width: 58px;
                height: 58px;
                border-radius: 16px;
                background: #cfd6ea;
                color: var(--ink);
                place-items: center;
                box-shadow: 0 6px 16px rgba(var(--brand-primary-rgb),.28);
                z-index: 6;
                justify-content: center;
                align-items: center
            }

            .fab .i {
                width: 24px;
                height: 24px
            }

            /* forms & wizard */
            .field {
                display: block;
                margin-top: 20px
            }

            .flabel {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 10px;
                font-size: 14px;
                font-weight: 500;
                margin-bottom: 8px
            }

            .flabel small {
                font-weight: 400;
                color: var(--muted);
                font-size: 12.5px
            }

            .req {
                color: var(--red)
            }

            .inp {
                width: 100%;
                height: 50px;
                border: 1px solid var(--line2);
                border-radius: 12px;
                background: #fff;
                padding: 0 14px;
                font-size: 15px;
                outline: none;
                transition: border-color .15s,box-shadow .15s
            }

            .inp:focus {
                border-color: var(--purple);
                box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb),.14)
            }

            textarea.inp {
                height: 120px;
                padding: 12px 14px;
                resize: vertical;
                line-height: 1.7
            }

            .has-err .inp {
                border-color: var(--red)
            }

            .p-android .inp {
                border-radius: 6px 6px 0 0;
                border: 0;
                border-bottom: 1px solid #6e7484;
                background: #e6e8ee
            }

            .p-android .inp:focus {
                border-bottom: 2px solid var(--purple);
                box-shadow: none
            }

            .p-android .has-err .inp {
                border-bottom-color: var(--red)
            }

            .ltabs {
                display: inline-flex;
                background: var(--brand-soft);
                border-radius: 9px;
                padding: 2px;
                flex: none
            }

            .ltabs button {
                height: 28px;
                min-width: 48px;
                padding: 0 9px;
                border-radius: 7px;
                font-size: 12.5px;
                font-weight: 500;
                color: var(--muted);
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 6px
            }

            .ltabs button.on {
                background: #fff;
                color: var(--purple);
                box-shadow: 0 1px 3px rgba(var(--brand-primary-rgb),.12)
            }

            .ld {
                width: 7px;
                height: 7px;
                border-radius: 50%;
                border: 1.5px solid currentColor;
                display: block
            }

            .ld.ok {
                background: var(--green);
                border-color: var(--green)
            }

            .stepper {
                flex: none;
                padding: 2px 16px 12px
            }

            .bars {
                display: flex;
                gap: 6px
            }

            .stb {
                flex: 1;
                display: flex;
                flex-direction: column;
                gap: 7px;
                text-align: start
            }

            .stb i {
                height: 5px;
                border-radius: 3px;
                background: #d9dce4;
                display: block;
                width: 100%
            }

            .stb.done i {
                background: var(--green)
            }

            .stb.cur i {
                background: var(--purple)
            }

            .stb span {
                display: none;
                font-size: 12.5px;
                color: var(--muted)
            }

            .stb.cur span {
                color: var(--ink);
                font-weight: 500
            }

            .stb:disabled {
                cursor: default
            }

            .st-now {
                font-size: 13px;
                color: var(--muted);
                margin-top: 10px
            }

            .st-now b {
                color: var(--ink);
                font-weight: 500
            }

            .wide .stepper {
                max-width: 760px;
                margin: 0 auto;
                width: 100%;
                padding: 0 36px 8px
            }

            .wide .stb span {
                display: block
            }

            .wide .st-now {
                display: none
            }

            .wide .wz {
                max-width: 760px
            }

            .wz-t {
                font-size: 21px;
                font-weight: 600;
                line-height: 1.45;
                margin-top: 8px;
                max-width: 28ch
            }

            .saved {
                display: inline-flex;
                align-items: center;
                gap: 4px;
                font-size: 12px;
                color: var(--green);
                opacity: 0;
                transition: opacity .3s;
                padding: 0 6px;
                white-space: nowrap
            }

            .saved.on {
                opacity: 1
            }

            .saved .i {
                width: 14px;
                height: 14px
            }

            .actbar {
                flex: none;
                display: flex;
                gap: 10px;
                padding: 12px 16px 32px;
                background: var(--surface);
                border-top: 1px solid var(--line)
            }

            .p-android .actbar {
                padding-bottom: 24px;
                background: #f9f9fb
            }

            .p-web .actbar {
                padding-bottom: 14px
            }

            .wide .actbar {
                justify-content: center
            }

            .wide .actbar .btn {
                min-width: 170px;
                flex: none
            }

            .demo-fill {
                margin-top: 22px;
                width: 100%;
                height: 42px;
                border: 1.5px dashed #9eaacc;
                border-radius: 12px;
                color: var(--muted);
                font-size: 13px
            }

            .money {
                position: relative
            }

            .money .inp {
                padding-inline-end:70px}

            .money .inp:disabled {
                background: #eeeff2;
                color: var(--muted)
            }

            .money .cur {
                position: absolute;
                inset-inline-end: 14px;
                top: 50%;
                transform: translateY(-50%);
                color: var(--muted);
                font-size: 14px
            }

            .checkrow {
                display: flex;
                align-items: center;
                gap: 10px;
                margin-top: 12px;
                font-size: 14px;
                text-align: start;
                line-height: 1.5
            }

            .drop {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 6px;
                padding: 22px;
                border: 1.5px dashed var(--line2);
                border-radius: 16px;
                background: var(--surface);
                cursor: pointer;
                text-align: center;
                color: var(--muted);
                font-size: 12.5px
            }

            .drop b {
                color: var(--ink);
                font-weight: 500;
                font-size: 14px
            }

            .drop .i {
                width: 28px;
                height: 28px;
                color: var(--purple)
            }

            .drop.over {
                border-color: var(--purple);
                background: #eaedf7
            }

            .file {
                display: flex;
                align-items: center;
                gap: 10px;
                background: var(--surface);
                border-radius: 12px;
                padding: 8px 8px 8px 12px;
                margin-top: 8px;
                font-size: 13.5px
            }

            .file>.i {
                color: var(--purple)
            }

            .file span {
                flex: 1;
                min-width: 0;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap
            }

            .file small {
                color: var(--muted);
                direction: ltr
            }

            .rv {
                background: var(--surface);
                border-radius: 16px;
                padding: 14px 16px;
                margin-top: 10px
            }

            .p-android .rv {
                background: #e9ebf0
            }

            .rv-h {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 6px
            }

            .rv-h b {
                font-size: 13px;
                color: var(--muted);
                font-weight: 500
            }

            .rv p {
                font-size: 14.5px;
                line-height: 1.65
            }

            .rv p+p {
                margin-top: 4px
            }

            .rv .muted {
                color: var(--muted);
                font-size: 13.5px
            }

            .success {
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                text-align: center;
                padding: 32px 28px
            }

            .ok-badge {
                width: 88px;
                height: 88px;
                border-radius: 50%;
                background: var(--green);
                color: #fff;
                display: grid;
                place-items: center;
                animation: popin .5s cubic-bezier(.2,1.4,.4,1)
            }

            .ok-badge .i {
                width: 44px;
                height: 44px;
                stroke-width: 2.4
            }

            .success h2 {
                font-size: 24px;
                margin-top: 22px
            }

            .success p {
                color: var(--muted);
                margin-top: 10px;
                line-height: 1.7;
                max-width: 34ch
            }

            .succ-acts {
                display: flex;
                flex-direction: column;
                gap: 10px;
                margin-top: 26px;
                width: 100%;
                max-width: 320px
            }

            /* account & chat */
            .prof {
                position: relative;
                overflow: hidden;
                background: var(--purple);
                color: #fff;
                border-radius: 24px;
                padding: 18px;
                display: grid;
                grid-template-columns: auto 1fr auto;
                gap: 14px;
                align-items: center
            }

            .prof>*:not(.contours) {
                position: relative
            }

            .prof .av {
                width: 60px;
                height: 60px;
                border-radius: 20px;
                font-size: 20px
            }

            .prof h2 {
                font-size: 19px;
                font-weight: 600
            }

            .prof p {
                color: #bfc6dc;
                font-size: 13.5px;
                margin-top: 2px
            }

            .trial {
                grid-column: 1/-1;
                display: flex;
                align-items: center;
                gap: 10px;
                background: rgba(var(--brand-aqua-rgb),.14);
                border-radius: 14px;
                padding: 8px;
                padding-inline-start:12px;font-size: 13px;
                color: #cfd6ec
            }

            .trial span {
                flex: 1
            }

            .trial .i {
                width: 18px;
                height: 18px
            }

            .ver {
                text-align: center;
                color: var(--muted);
                font-size: 12.5px;
                margin-top: 22px
            }

            .wide .acc, .wide .chatw {
                max-width: 760px
            }

            .chatrow .av {
                border-radius: 50%;
                background: var(--bg);
                color: var(--fg);
                width: 46px;
                height: 46px;
                font-size: 16px
            }

            .cm {
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                gap: 5px;
                font-size: 12px;
                color: var(--muted);
                flex: none
            }

            .chatrow+.chatrow::before {
                inset-inline-start: 72px
            }

            /* overlay: AI, sheets, dialogs, toast */
            #overlay {
                position: absolute;
                inset: 0;
                z-index: 60;
                pointer-events: none
            }

            #overlay.still .scrim, #overlay.still .msheet, #overlay.still .dlg, #overlay.still .ai {
                animation: none!important
            }

            .scrim {
                position: absolute;
                inset: 0;
                background: rgba(9, 19, 48,.45);
                pointer-events: auto;
                animation: fade .2s
            }

            .ai {
                position: absolute;
                inset: 0;
                background: var(--purple);
                color: #fff;
                display: flex;
                flex-direction: column;
                padding: 58px 18px 34px;
                overflow: hidden;
                pointer-events: auto;
                animation: fade .25s
            }

            .p-android .ai {
                padding: 46px 16px 28px
            }

            .p-web .ai {
                padding: 16px 16px 18px
            }

            .wide .ai {
                inset: auto;
                left: 50%;
                top: 50%;
                width: 560px;
                height: min(640px,90%);
                transform: translate(-50%,-50%);
                border-radius: 28px;
                padding: 22px;
                box-shadow: 0 40px 100px rgba(0,0,0,.5)
            }

            .ai>*:not(.contours) {
                position: relative
            }

            .ai-top {
                display: flex;
                align-items: center;
                gap: 10px
            }

            .ai-name {
                display: flex;
                align-items: center;
                gap: 8px;
                font-weight: 500;
                margin-inline-end:auto}

            .ai-name .logo {
                width: 32px;
                height: 32px;
                object-fit: contain
            }

            .ai-mid {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                min-height: 0;
                overflow-y: auto
            }

            .ai-orb {
                width: 136px;
                height: 136px;
                border-radius: 50%;
                background: radial-gradient(circle at 35% 30%,#1b3583,var(--brand-primary) 65%);
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 5px;
                box-shadow: 0 0 0 16px rgba(var(--brand-aqua-rgb),.1),0 0 0 34px rgba(var(--brand-aqua-rgb),.05);
                flex: none
            }

            .ai-orb i {
                width: 5px;
                height: 14px;
                border-radius: 3px;
                background: var(--gold);
                animation: wave 1.1s ease-in-out infinite
            }

            .ai-orb i:nth-child(2) {
                animation-delay: .1s
            }

            .ai-orb i:nth-child(3) {
                animation-delay: .25s
            }

            .ai-orb i:nth-child(4) {
                animation-delay: .05s
            }

            .ai-orb i:nth-child(5) {
                animation-delay: .3s
            }

            .ai-orb i:nth-child(6) {
                animation-delay: .15s
            }

            .ai-orb i:nth-child(7) {
                animation-delay: .2s
            }

            @keyframes wave {
                0%, 100% {
                    transform: scaleY(1)
                }

                50% {
                    transform: scaleY(3.3)
                }
            }

            .ai-st {
                margin-top: 40px;
                color: #c6cde1;
                text-align: center;
                font-size: 15px;
                max-width: 30ch;
                line-height: 1.7
            }

            .ai-conv {
                width: 100%;
                display: flex;
                flex-direction: column;
                gap: 10px
            }

            .bub {
                max-width: 86%;
                padding: 12px 14px;
                border-radius: 18px;
                font-size: 15px;
                line-height: 1.7
            }

            .bub.me {
                align-self: flex-end;
                background: var(--gold);
                color: var(--purple);
                border-end-end-radius: 6px
            }

            .bub.bot {
                align-self: flex-start;
                background: rgba(255,255,255,.09);
                border-end-start-radius: 6px
            }

            .bub.bot .btn {
                margin-top: 12px;
                width: 100%
            }

            .typing {
                display: flex;
                gap: 5px;
                padding: 17px 16px
            }

            .typing i {
                width: 7px;
                height: 7px;
                border-radius: 50%;
                background: #c6cde1;
                animation: blink 1s infinite
            }

            .typing i:nth-child(2) {
                animation-delay: .2s
            }

            .typing i:nth-child(3) {
                animation-delay: .4s
            }

            @keyframes blink {
                50% {
                    opacity: .25
                }
            }

            .ai-sugs {
                display: flex;
                gap: 8px;
                overflow-x: auto;
                padding: 4px 0 14px;
                scrollbar-width: none;
                flex: none
            }

            .wide .ai-sugs {
                flex-wrap: wrap
            }

            .ai-chip {
                flex: none;
                min-height: 38px;
                padding: 0 14px;
                border-radius: 19px;
                border: 1px solid rgba(255,255,255,.2);
                font-size: 13.5px;
                white-space: nowrap;
                color: #e8ebf4
            }

            .ai-chip:hover {
                background: rgba(255,255,255,.06)
            }

            .ai-in {
                display: flex;
                align-items: center;
                gap: 6px;
                background: rgba(255,255,255,.09);
                border-radius: 26px;
                padding: 5px;
                padding-inline-start:16px;flex: none
            }

            .ai-in input {
                flex: 1;
                background: none;
                border: 0;
                outline: none;
                color: #fff;
                font-size: 15px;
                min-width: 0
            }

            .ai-in input::placeholder {
                color: #959ebb
            }

            .ai-send, .ai-mic {
                width: 42px;
                height: 42px;
                border-radius: 50%;
                display: grid;
                place-items: center;
                flex: none
            }

            .ai-send {
                background: rgba(255,255,255,.1)
            }

            .ai-mic {
                background: var(--gold);
                color: var(--purple)
            }

            .msheet {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                max-height: 90%;
                background: var(--paper);
                border-radius: 26px 26px 0 0;
                display: flex;
                flex-direction: column;
                pointer-events: auto;
                animation: up .3s cubic-bezier(.2,.8,.2,1)
            }

            .p-android .msheet {
                border-radius: 28px 28px 0 0
            }

            .wide .msheet {
                left: 50%;
                top: 50%;
                bottom: auto;
                right: auto;
                width: 580px;
                max-height: 86%;
                border-radius: 22px;
                transform: translate(-50%,-50%);
                animation: fade .2s
            }

            .grab-s {
                height: 20px;
                display: grid;
                place-items: center;
                flex: none
            }

            .grab-s i {
                width: 36px;
                height: 5px;
                border-radius: 3px;
                background: #c2c6d3
            }

            .wide .grab-s {
                display: none
            }

            .ms-h {
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 2px 10px 8px;
                flex: none
            }

            .ms-h b {
                flex: 1;
                text-align: center;
                font-size: 16px;
                font-weight: 600
            }

            .ms-x, .ms-save {
                height: 40px;
                padding: 0 10px;
                color: var(--purple);
                font-size: 15px;
                border-radius: 10px
            }

            .ms-save {
                font-weight: 600
            }

            .p-android .ms-h b {
                text-align: start
            }

            .wide .ms-h {
                padding: 18px 20px 6px
            }

            .wide .ms-h b {
                text-align: start;
                font-size: 18px;
                order: -1
            }

            .wide .ms-save {
                background: var(--purple);
                color: #fff;
                padding: 0 18px
            }

            .ms-body {
                overflow-y: auto;
                padding: 0 16px 34px
            }

            .ms-body>.field:first-child {
                margin-top: 8px
            }

            .wide .ms-body {
                padding: 0 20px 24px
            }

            .addact {
                display: flex;
                gap: 8px;
                margin-top: 12px
            }

            .addact .inp {
                height: 46px
            }

            .addact .btn {
                height: 46px;
                flex: none
            }

            .dlg {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
                width: min(290px,84%);
                background: rgba(255,255,255,.98);
                border-radius: 16px;
                text-align: center;
                overflow: hidden;
                pointer-events: auto;
                animation: dlg .22s
            }

            @keyframes dlg {
                from {
                    opacity: 0;
                    transform: translate(-50%,-50%) scale(1.08)
                }
            }

            .dlg-b {
                padding: 20px 18px 16px
            }

            .dlg h3 {
                font-size: 17px;
                font-weight: 600;
                line-height: 1.4
            }

            .dlg p {
                font-size: 13.5px;
                color: #454b5f;
                margin-top: 6px;
                line-height: 1.65
            }

            .dlg-a {
                display: flex;
                border-top: 1px solid #d3d6df
            }

            .dlg-a button {
                flex: 1;
                height: 46px;
                font-size: 16px;
                color: var(--purple)
            }

            .dlg-a button+button {
                border-inline-start:1px solid #d3d6df;font-weight: 600
            }

            .dlg-a .dg {
                color: var(--red)
            }

            .p-android .dlg {
                width: min(320px,86%);
                border-radius: 28px;
                text-align: start;
                background: #edeef3;
                padding: 24px 22px 16px
            }

            .p-android .dlg-b {
                padding: 0
            }

            .p-android .dlg h3 {
                font-size: 22px;
                font-weight: 400
            }

            .p-android .dlg-a {
                border: 0;
                justify-content: flex-end;
                gap: 6px;
                margin-top: 22px
            }

            .p-android .dlg-a button {
                flex: none;
                height: 40px;
                padding: 0 12px;
                border: 0!important;
                font-size: 14px;
                font-weight: 500;
                border-radius: 20px
            }

            .p-web .dlg {
                width: min(440px,90%);
                border-radius: 18px;
                text-align: start;
                padding: 22px
            }

            .p-web .dlg-b {
                padding: 0
            }

            .p-web .dlg h3 {
                font-size: 19px
            }

            .p-web .dlg-a {
                border: 0;
                justify-content: flex-end;
                gap: 10px;
                margin-top: 20px
            }

            .p-web .dlg-a button {
                flex: none;
                height: 42px;
                padding: 0 18px;
                border-radius: 10px;
                font-size: 14.5px;
                border: 0!important;
                background: var(--brand-soft);
                color: var(--ink);
                font-weight: 500
            }

            .p-web .dlg-a .pr {
                background: var(--purple);
                color: #fff
            }

            .p-web .dlg-a .dg {
                background: var(--red);
                color: #fff
            }

            #toastbox {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 80;
                pointer-events: none
            }

            .toast {
                position: absolute;
                left: 14px;
                right: 14px;
                bottom: 100px;
                background: var(--purple);
                color: #fff;
                border-radius: 16px;
                padding: 12px 14px;
                display: flex;
                align-items: center;
                gap: 10px;
                font-size: 14px;
                line-height: 1.5;
                pointer-events: auto;
                animation: tin .28s cubic-bezier(.2,.8,.2,1);
                box-shadow: 0 12px 30px rgba(9, 19, 48,.35)
            }

            @keyframes tin {
                from {
                    opacity: 0;
                    transform: translateY(16px)
                }
            }

            .toast .i {
                width: 20px;
                height: 20px;
                color: var(--gold)
            }

            .toast span {
                flex: 1
            }

            .toast button {
                color: var(--gold);
                font-weight: 600;
                font-size: 14px;
                padding: 4px 6px
            }

            .p-android .toast {
                border-radius: 6px;
                bottom: 96px;
                background: #1f2538
            }

            .p-web .toast {
                bottom: 78px
            }

            .wide .toast {
                left: auto;
                right: auto;
                inset-inline-start: 24px;
                bottom: 24px;
                width: 420px
            }

            @media (max-width: 760px) {
                .ch-brand small {
                    display:none
                }

                .chrome {
                    gap: 6px;
                    padding: 0 10px
                }

                .ch-seg button {
                    padding: 0 8px;
                    font-size: 12px
                }

                .ch-sel {
                    max-width: 96px
                }
            }

            @media (max-width: 560px) {
                .showcase {
                    padding:0
                }

                .ch-brand span {
                    display: none
                }

                .p-ios .device, .p-android .device {
                    width: 100%;
                    height: 100%;
                    aspect-ratio: auto;
                    border-radius: 0;
                    box-shadow: none
                }

                .p-ios .statusbar, .p-android .statusbar, .homeind {
                    display: none!important
                }

                .p-ios .on-map .ex-top, .p-android .on-map .ex-top {
                    padding-top: 10px
                }

                .p-ios .leaflet-top, .p-android .leaflet-top {
                    top: 108px
                }

                .p-ios .ai, .p-android .ai {
                    padding-top: 16px
                }

                .p-ios .on-map .ex.exp .ex-sheet {
                    height: calc(100% - 120px)
                }
            }

            @media (prefers-reduced-motion:reduce) {
                *, *::before, *::after {
                    animation-duration: .01ms!important;
                    animation-iteration-count: 1!important;
                    transition-duration: .01ms!important
                }
            }

            #app {
                width: 100%;
                overflow: hidden
            }

            .chrome {
                overflow-x: auto;
                scrollbar-width: none;
                min-width: 0
            }

            .chrome::-webkit-scrollbar {
                display: none
            }

            .showcase {
                min-width: 0;
                width: 100%
            }

            @media (max-width: 560px) {
                .ch-brand {
                    display:none
                }

                .chrome {
                    height: 52px;
                    justify-content: space-between
                }

                .showcase {
                    height: calc(100% - 52px)
                }

                .ch-sel {
                    max-width: 88px
                }
            }

            /* store, offers, products, orders */
            .row:disabled {
                opacity: .5;
                cursor: default
            }

            .sm-head {
                display: flex;
                align-items: center;
                gap: 12px;
                padding: 2px 16px 10px
            }

            .sm-head>div {
                flex: 1;
                min-width: 0
            }

            .sm-head b {
                display: block;
                font-size: 17px;
                font-weight: 600;
                color: var(--purple)
            }

            .sm-head small {
                color: var(--muted);
                font-size: 13px
            }

            .ph-grid {
                display: grid;
                grid-template-columns: repeat(3,1fr);
                gap: 8px
            }

            .wide .ph-grid {
                grid-template-columns: repeat(6,1fr)
            }

            .ph {
                position: relative;
                aspect-ratio: 1;
                border-radius: 14px;
                overflow: hidden;
                background: var(--brand-soft)
            }

            .ph img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block
            }

            .ph .cover {
                position: absolute;
                bottom: 6px;
                inset-inline-start: 6px;
                background: var(--purple);
                color: #fff;
                font-size: 11px;
                padding: 2px 8px;
                border-radius: 8px
            }

            .ph-cv {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                padding: 5px 4px;
                background: rgba(var(--brand-primary-rgb),.72);
                color: #fff;
                font-size: 11px;
                opacity: 0;
                transition: opacity .15s
            }

            .ph:hover .ph-cv, .ph-cv:focus-visible {
                opacity: 1
            }

            @media (hover: none) {
                .ph-cv {
                    opacity:1
                }
            }

            .ph-x {
                position: absolute;
                top: 6px;
                inset-inline-end: 6px;
                width: 28px;
                height: 28px;
                border-radius: 50%;
                background: rgba(var(--brand-primary-rgb),.75);
                color: #fff;
                display: grid;
                place-items: center
            }

            .ph-x .i {
                width: 15px;
                height: 15px
            }

            .ph.add {
                border: 1.5px dashed var(--line2);
                background: var(--surface);
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 6px;
                color: var(--purple);
                font-size: 12.5px;
                cursor: pointer;
                text-align: center;
                padding: 6px
            }

            .ph.add .i {
                width: 26px;
                height: 26px
            }

            .has-err .ph.add {
                border-color: var(--red)
            }

            .two {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 10px
            }

            .two .money {
                display: block
            }

            .sublabel {
                font-size: 12.5px;
                color: var(--muted);
                margin-bottom: 6px;
                display: block
            }

            .disc {
                display: inline-flex;
                align-items: center;
                height: 24px;
                padding: 0 9px;
                border-radius: 12px;
                background: #dde0eb;
                color: var(--green);
                font-size: 12.5px;
                font-weight: 600;
                white-space: nowrap
            }

            .of-card {
                display: flex;
                gap: 12px;
                background: var(--surface);
                border-radius: 18px;
                padding: 10px;
                margin-top: 10px;
                position: relative;
                align-items: flex-start
            }

            .p-android .of-card, .p-android .prod, .p-android .ord {
                background: #e9ebf0
            }

            .of-card>img {
                width: 78px;
                height: 78px;
                border-radius: 12px;
                object-fit: cover;
                flex: none;
                background: var(--brand-soft)
            }

            .of-card>img.ghost {
                opacity: .35
            }

            .of-card.prev {
                border: 1px dashed var(--line2);
                margin-top: 0
            }

            .of-b {
                flex: 1;
                min-width: 0;
                padding-top: 2px
            }

            .of-b b {
                display: block;
                font-weight: 500;
                font-size: 14.5px;
                line-height: 1.45
            }

            .ph-t {
                color: var(--muted);
                font-weight: 400
            }

            .prices {
                display: flex;
                align-items: center;
                gap: 8px;
                margin-top: 4px;
                flex-wrap: wrap
            }

            .prices strong {
                font-size: 15px;
                color: var(--purple)
            }

            .prices s {
                color: var(--muted);
                font-size: 12.5px
            }

            .of-meta {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                gap: 4px 12px;
                margin-top: 6px;
                font-size: 12px;
                color: var(--muted)
            }

            .of-meta span {
                display: inline-flex;
                align-items: center;
                gap: 4px
            }

            .of-meta .i {
                width: 14px;
                height: 14px
            }

            .of-meta .today {
                color: var(--red);
                font-weight: 500
            }

            .of-card.expired>img {
                filter: grayscale(1);
                opacity: .6
            }

            .of-card.expired .prices strong {
                color: var(--muted)
            }

            .of-card .pop {
                top: 46px
            }

            .notice {
                display: flex;
                align-items: center;
                gap: 12px;
                background: #F8E4E2;
                border-radius: 16px;
                padding: 12px 14px;
                margin: 4px 0 12px
            }

            .notice>.i {
                color: var(--red)
            }

            .notice>div {
                flex: 1;
                min-width: 0
            }

            .notice b {
                display: block;
                font-size: 14px;
                font-weight: 600;
                color: var(--ink)
            }

            .notice small {
                color: #6E5552;
                font-size: 12.5px;
                line-height: 1.5;
                display: block;
                margin-top: 2px
            }

            .btn.dangerg {
                background: #fff;
                color: var(--red);
                border: 1px solid #E6BDB8
            }

            .wide .of-list, .wide .ord-list {
                display: grid;
                grid-template-columns: repeat(auto-fill,minmax(360px,1fr));
                gap: 12px;
                margin-top: 12px
            }

            .wide .of-list .of-card, .wide .ord-list .ord {
                margin-top: 0
            }

            .prod-grid {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 10px;
                margin-top: 10px
            }

            .wide .prod-grid {
                grid-template-columns: repeat(auto-fill,minmax(210px,1fr))
            }

            .prod {
                background: var(--surface);
                border-radius: 18px;
                padding: 8px 8px 10px;
                display: flex;
                flex-direction: column;
                min-width: 0
            }

            .prod>img {
                width: 100%;
                aspect-ratio: 4/3;
                object-fit: cover;
                border-radius: 12px;
                background: var(--brand-soft);
                display: block
            }

            .prod>b {
                font-size: 13.5px;
                font-weight: 500;
                margin: 8px 4px 0;
                line-height: 1.4
            }

            .pp {
                margin: 2px 4px 0;
                font-weight: 600;
                color: var(--purple);
                font-size: 14px
            }

            .stock {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 6px;
                margin: 10px 4px 0;
                flex-wrap: wrap
            }

            .sp {
                font-size: 11px;
                padding: 3px 7px;
                border-radius: 8px;
                background: #dde0eb;
                color: var(--green);
                white-space: nowrap
            }

            .sp.low {
                background: var(--brand-soft);
                color: var(--purple)
            }

            .sp.out {
                background: #F8E4E2;
                color: var(--red)
            }

            .stp {
                display: inline-flex;
                align-items: center;
                border: 1px solid var(--line2);
                border-radius: 10px;
                overflow: hidden;
                background: #fff
            }

            .stp button {
                width: 28px;
                height: 28px;
                display: grid;
                place-items: center;
                color: var(--purple)
            }

            .stp button:disabled {
                opacity: .35
            }

            .stp .i {
                width: 14px;
                height: 14px
            }

            .stp span {
                min-width: 22px;
                text-align: center;
                font-size: 13px;
                font-weight: 500
            }

            .prod-of {
                display: flex;
                align-items: center;
                gap: 5px;
                margin: 10px 4px 0;
                text-align: start;
                font-size: 12.5px
            }

            .prod-of .i {
                width: 15px;
                height: 15px
            }

            .ord {
                background: var(--surface);
                border-radius: 18px;
                padding: 14px;
                margin-top: 10px
            }

            .ord-h {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 8px
            }

            .ord-h b {
                font-size: 15px;
                font-weight: 600;
                color: var(--purple)
            }

            .ord-r {
                display: flex;
                align-items: center;
                gap: 6px 14px;
                flex-wrap: wrap;
                margin-top: 8px;
                font-size: 13px;
                color: var(--muted)
            }

            .ord-r span {
                display: inline-flex;
                align-items: center;
                gap: 5px
            }

            .ord-r .i {
                width: 15px;
                height: 15px
            }

            .ord-f {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 10px;
                margin-top: 12px;
                padding-top: 12px;
                border-top: 1px solid var(--line)
            }

            .ord-t {
                display: flex;
                flex-direction: column
            }

            .ord-t small {
                color: var(--muted);
                font-size: 12px
            }

            .ord-t strong {
                font-size: 16px;
                color: var(--purple)
            }

            .os {
                font-size: 12px;
                padding: 3px 10px;
                border-radius: 10px;
                font-weight: 500;
                white-space: nowrap
            }

            .os-new {
                background: var(--brand-soft);
                color: var(--purple)
            }

            .os-prep {
                background: #e4e6eb;
                color: #3f4659
            }

            .os-ready {
                background: #dde0eb;
                color: var(--green)
            }

            .os-done {
                background: #eeeff2;
                color: #7a7f8f
            }

            .lead .inl {
                display: inline-block;
                width: 16px;
                height: 16px;
                vertical-align: -3px;
                margin-inline-end:6px}

            .seg .bdg {
                height: 18px;
                min-width: 18px;
                font-size: 11px
            }

            /* v4: media, offers, products, real estate */
            .ph-open {
                position: absolute;
                inset: 0;
                display: block
            }

            .ph.add small {
                font-size: 10.5px;
                color: var(--muted)
            }

            [data-drop].over .ph-grid {
                outline: 2px dashed var(--gold);
                outline-offset: 4px;
                border-radius: 14px
            }

            .up-row {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 10px
            }

            .up-btn {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 4px;
                padding: 18px 10px;
                border: 1.5px dashed var(--line2);
                border-radius: 16px;
                background: var(--surface);
                cursor: pointer;
                text-align: center;
                color: var(--purple)
            }

            .up-btn:hover {
                border-color: var(--gold);
                background: #f5f6fb
            }

            .up-btn .i {
                width: 28px;
                height: 28px
            }

            .up-btn b {
                font-size: 14px;
                font-weight: 600;
                color: var(--ink)
            }

            .up-btn small {
                font-size: 12px;
                color: var(--muted)
            }

            .lib-grid {
                display: grid;
                grid-template-columns: repeat(3,1fr);
                gap: 8px
            }

            .wide .lib-grid {
                grid-template-columns: repeat(4,1fr)
            }

            .lib {
                position: relative;
                aspect-ratio: 4/3;
                border-radius: 12px;
                overflow: hidden;
                border: 2px solid transparent;
                padding: 0
            }

            .lib img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block
            }

            .lib.on {
                border-color: var(--purple)
            }

            .lib-ck {
                position: absolute;
                top: 6px;
                inset-inline-end: 6px;
                width: 24px;
                height: 24px;
                border-radius: 50%;
                border: 2px solid #fff;
                background: rgba(var(--brand-primary-rgb),.25);
                color: #fff;
                font-size: 12px;
                font-weight: 600;
                display: grid;
                place-items: center
            }

            .lib.on .lib-ck {
                background: var(--purple)
            }

            .ms-save:disabled {
                opacity: .4
            }

            .gal {
                position: relative;
                border-radius: 20px;
                overflow: hidden;
                background: var(--brand-soft)
            }

            .gal-main {
                display: flex;
                overflow-x: auto;
                scroll-snap-type: x mandatory;
                scrollbar-width: none;
                aspect-ratio: 4/3
            }

            .gal-main::-webkit-scrollbar {
                display: none
            }

            .gal-sl {
                flex: 0 0 100%;
                scroll-snap-align: center;
                padding: 0;
                display: block
            }

            .gal-sl img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block
            }

            .gal-n {
                position: absolute;
                bottom: 10px;
                inset-inline-start: 10px;
                display: inline-flex;
                align-items: center;
                gap: 5px;
                background: rgba(var(--brand-primary-rgb),.72);
                color: #fff;
                font-size: 12px;
                padding: 4px 10px;
                border-radius: 12px;
                pointer-events: none
            }

            .gal-n .i {
                width: 14px;
                height: 14px
            }

            .gal-arr {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                width: 38px;
                height: 38px;
                border-radius: 50%;
                background: rgba(255,255,255,.9);
                color: var(--purple);
                display: grid;
                place-items: center;
                box-shadow: 0 2px 8px rgba(var(--brand-primary-rgb),.2)
            }

            .gal-arr.prev {
                inset-inline-start: 10px
            }

            .gal-arr.next {
                inset-inline-end: 10px
            }

            .gal-arr .i {
                width: 20px;
                height: 20px
            }

            .gal-th {
                display: flex;
                gap: 8px;
                overflow-x: auto;
                padding: 10px 0 2px;
                scrollbar-width: none
            }

            .gal-th button {
                flex: none;
                width: 64px;
                height: 48px;
                border-radius: 10px;
                overflow: hidden;
                border: 2px solid transparent;
                padding: 0;
                opacity: .7
            }

            .gal-th button.on {
                border-color: var(--purple);
                opacity: 1
            }

            .gal-th img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block
            }

            .empty-gal {
                aspect-ratio: 4/3;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 6px;
                color: var(--muted)
            }

            .lbx {
                position: absolute;
                inset: 0;
                background: rgba(4, 12, 38,.94);
                display: flex;
                flex-direction: column;
                pointer-events: auto;
                z-index: 5;
                animation: fade .2s;
                color: #fff
            }

            .lbx-top {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 54px 14px 8px;
                font-size: 14px
            }

            .p-android .lbx-top {
                padding-top: 42px
            }

            .p-web .lbx-top {
                padding-top: 12px
            }

            .lbx-stage {
                flex: 1;
                min-height: 0;
                position: relative;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0 8px
            }

            .lbx-stage img {
                max-width: 100%;
                max-height: 100%;
                object-fit: contain;
                border-radius: 8px
            }

            .lbx-arr {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                width: 44px;
                height: 44px;
                border-radius: 50%;
                background: rgba(255,255,255,.14);
                color: #fff;
                display: grid;
                place-items: center
            }

            .lbx-arr.prev {
                inset-inline-start: 12px
            }

            .lbx-arr.next {
                inset-inline-end: 12px
            }

            .lbx-th {
                display: flex;
                gap: 8px;
                overflow-x: auto;
                padding: 12px 14px 30px;
                justify-content: center;
                scrollbar-width: none
            }

            .lbx-th button {
                flex: none;
                width: 56px;
                height: 42px;
                border-radius: 8px;
                overflow: hidden;
                border: 2px solid transparent;
                opacity: .55;
                padding: 0
            }

            .lbx-th button.on {
                border-color: var(--gold);
                opacity: 1
            }

            .lbx-th img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block
            }

            .ex.pv .ex-sheet {
                height: min(500px,calc(100% - 140px))
            }

            .ex.pv .locate {
                bottom: calc(min(500px,100% - 140px) + 12px)
            }

            .pv-ph {
                display: flex;
                gap: 8px;
                overflow-x: auto;
                margin: 12px -16px 0;
                padding: 0 16px;
                scrollbar-width: none
            }

            .pv-ph button {
                flex: none;
                width: 132px;
                height: 96px;
                border-radius: 12px;
                overflow: hidden;
                padding: 0
            }

            .pv-ph img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block
            }

            .pv-sub {
                font-size: 13.5px;
                color: var(--muted);
                margin-top: 10px;
                line-height: 1.6
            }

            .mini {
                display: flex;
                align-items: center;
                gap: 12px;
                width: 100%;
                text-align: start;
                background: var(--surface);
                border: 1px solid var(--line);
                border-radius: 14px;
                padding: 8px;
                margin-top: 8px
            }

            .mini img {
                width: 58px;
                height: 46px;
                border-radius: 9px;
                object-fit: cover;
                flex: none
            }

            .mini>span {
                flex: 1;
                min-width: 0
            }

            .mini b {
                display: block;
                font-size: 14px;
                font-weight: 500;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis
            }

            .mini small {
                display: block;
                font-size: 12.5px;
                color: var(--muted);
                margin-top: 2px
            }

            .mini small.today {
                color: var(--red)
            }

            .oc-list {
                display: grid;
                grid-template-columns: 1fr;
                gap: 12px;
                margin-top: 12px
            }

            .wide .oc-list {
                grid-template-columns: repeat(auto-fill,minmax(260px,1fr))
            }

            .oc {
                position: relative;
                background: var(--surface);
                border-radius: 18px;
                overflow: hidden;
                display: flex;
                flex-direction: column
            }

            .p-android .oc {
                background: #e9ebf0
            }

            .oc-img {
                position: relative;
                display: block;
                aspect-ratio: 16/10;
                padding: 0;
                background: var(--brand-soft)
            }

            .oc-img img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block
            }

            .oc-img img.ghost {
                opacity: .35
            }

            .oc-disc {
                position: absolute;
                top: 10px;
                inset-inline-start: 10px;
                background: var(--green);
                color: #fff;
                font-size: 13px;
                font-weight: 600;
                padding: 3px 10px;
                border-radius: 10px
            }

            .oc-n {
                position: absolute;
                bottom: 10px;
                inset-inline-start: 10px;
                display: inline-flex;
                align-items: center;
                gap: 4px;
                background: rgba(var(--brand-primary-rgb),.72);
                color: #fff;
                font-size: 11.5px;
                padding: 3px 8px;
                border-radius: 10px
            }

            .oc-n .i {
                width: 13px;
                height: 13px
            }

            .oc-b {
                padding: 12px 14px 14px;
                display: flex;
                flex-direction: column;
                gap: 4px
            }

            .oc-sec {
                display: inline-flex;
                align-items: center;
                gap: 5px;
                font-size: 12px;
                color: var(--fg);
                font-weight: 500;
                align-self: flex-start;
                background: var(--bg);
                padding: 3px 9px;
                border-radius: 9px
            }

            .oc-sec .i {
                width: 14px;
                height: 14px
            }

            .oc-t {
                text-align: start;
                font-size: 15.5px;
                font-weight: 600;
                line-height: 1.45;
                color: var(--ink);
                margin-top: 2px
            }

            .oc.expired .oc-img img {
                filter: grayscale(1);
                opacity: .65
            }

            .oc.prev {
                border: 1px dashed var(--line2)
            }

            .card-menu {
                position: absolute;
                top: 8px;
                inset-inline-end: 8px;
                background: rgba(255,255,255,.92);
                color: var(--purple);
                box-shadow: 0 2px 8px rgba(var(--brand-primary-rgb),.18)
            }

            .card-menu.on {
                background: var(--purple);
                color: #fff
            }

            .oc .pop {
                top: 52px
            }

            .secchips {
                margin-top: 6px!important
            }

            .secchips .chip .i {
                width: 15px;
                height: 15px
            }

            .det {
                display: block
            }

            .wide .det {
                display: grid;
                grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
                gap: 32px;
                align-items: start
            }

            .wide .det-media {
                position: sticky;
                top: 0
            }

            .det-info {
                padding-top: 14px
            }

            .wide .det-info {
                padding-top: 0
            }

            .det-t {
                font-size: 22px;
                font-weight: 700;
                line-height: 1.4;
                margin-top: 10px;
                color: var(--ink)
            }

            .det-price {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                gap: 10px;
                margin-top: 8px
            }

            .det-price strong {
                font-size: 24px;
                color: var(--purple);
                font-weight: 700
            }

            .det-price s {
                color: var(--muted);
                font-size: 15px
            }

            .det-status {
                display: flex;
                align-items: center;
                gap: 6px;
                flex-wrap: wrap;
                margin-top: 8px;
                font-size: 14px;
                color: var(--green);
                font-weight: 500
            }

            .det-status .i {
                width: 17px;
                height: 17px
            }

            .det-status span {
                color: var(--muted);
                font-weight: 400
            }

            .det-status.today {
                color: var(--red)
            }

            .det-status.exp {
                color: var(--muted)
            }

            .det-p {
                font-size: 14.5px;
                line-height: 1.8;
                color: #2b334d;
                margin-top: 6px;
                background: var(--surface);
                border-radius: 14px;
                padding: 12px 14px
            }

            .det-loc {
                display: flex;
                align-items: center;
                gap: 5px;
                color: var(--muted);
                font-size: 14px;
                margin-top: 4px
            }

            .det-loc .i {
                width: 16px;
                height: 16px
            }

            .facts {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 8px;
                margin-top: 14px
            }

            .facts-3 {
                grid-template-columns: repeat(3,1fr);
                margin: 8px 0 6px
            }

            .fact {
                display: flex;
                align-items: center;
                gap: 10px;
                background: var(--surface);
                border-radius: 14px;
                padding: 10px 12px
            }

            .fact>.i {
                width: 22px;
                height: 22px;
                color: var(--purple);
                flex: none
            }

            .fact small {
                display: block;
                font-size: 11.5px;
                color: var(--muted)
            }

            .fact b {
                display: block;
                font-size: 15px;
                font-weight: 600;
                color: var(--ink)
            }

            .facts-3 .fact {
                flex-direction: column;
                align-items: flex-start;
                gap: 4px
            }

            .p-android .fact, .p-android .det-p, .p-android .mini {
                background: #e9ebf0
            }

            .tags .tag {
                display: inline-flex;
                align-items: center;
                gap: 4px
            }

            .tags .tag .i {
                width: 13px;
                height: 13px
            }

            .tag-row {
                display: flex;
                flex-wrap: wrap;
                gap: 6px;
                align-items: center
            }

            .stock-line {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 10px;
                margin-top: 12px;
                background: var(--surface);
                border-radius: 14px;
                padding: 8px 12px;
                font-size: 14px
            }

            .tools-row {
                display: flex;
                gap: 10px;
                align-items: center;
                margin-top: 12px
            }

            .tools-row .search {
                flex: 1;
                margin-top: 0
            }

            .tools-row .btn {
                height: 44px;
                flex: none
            }

            .p-android .tools-row .btn {
                height: 48px
            }

            .prod-img {
                position: relative;
                display: block;
                padding: 0;
                border-radius: 12px;
                overflow: hidden;
                aspect-ratio: 4/3;
                background: var(--brand-soft)
            }

            .prod-img img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block
            }

            .prod-t {
                text-align: start;
                font-size: 13.5px;
                font-weight: 500;
                margin: 8px 4px 0;
                line-height: 1.4;
                color: var(--ink)
            }

            .ord-items {
                display: flex;
                flex-direction: column;
                gap: 6px;
                margin-top: 10px
            }

            .oi {
                display: flex;
                align-items: center;
                gap: 10px;
                text-align: start;
                padding: 0
            }

            .oi img {
                width: 46px;
                height: 36px;
                border-radius: 8px;
                object-fit: cover;
                flex: none
            }

            .oi b {
                display: block;
                font-size: 13px;
                font-weight: 500
            }

            .oi small {
                display: block;
                font-size: 12px;
                color: var(--muted)
            }

            .rc-price {
                font-size: 17px;
                font-weight: 700;
                color: var(--purple)
            }

            .rc-pur {
                position: absolute;
                top: 10px;
                inset-inline-start: 10px;
                font-size: 12.5px;
                font-weight: 600;
                padding: 3px 10px;
                border-radius: 10px;
                color: #fff;
                background: var(--purple)
            }

            .rc-pur.rent {
                background: var(--green)
            }

            .rc-pur.static, .rc-done.static {
                position: static
            }

            .rc-done {
                position: absolute;
                top: 10px;
                inset-inline-start: 84px;
                font-size: 12.5px;
                font-weight: 600;
                padding: 3px 10px;
                border-radius: 10px;
                background: #fff;
                color: var(--ink)
            }

            .rc-done.static {
                background: #e4e6eb
            }

            .rc-facts {
                display: flex;
                gap: 14px;
                margin-top: 6px;
                font-size: 13px;
                color: var(--ink)
            }

            .rc-facts span {
                display: inline-flex;
                align-items: center;
                gap: 5px
            }

            .rc-facts .i {
                width: 16px;
                height: 16px;
                color: var(--muted)
            }

            .minimap {
                position: relative;
                display: block;
                width: 100%;
                height: 150px;
                border-radius: 16px;
                overflow: hidden;
                padding: 0;
                margin-top: 8px
            }

            .mm-bg {
                width: 100%;
                height: 100%;
                object-fit: cover;
                filter: saturate(.3) opacity(.55)
            }

            .mm-pin {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-70%)
            }

            .mm-cap {
                position: absolute;
                bottom: 10px;
                inset-inline-start: 10px;
                display: inline-flex;
                align-items: center;
                gap: 6px;
                background: #fff;
                color: var(--purple);
                font-size: 13px;
                font-weight: 500;
                padding: 6px 12px;
                border-radius: 10px
            }

            .mm-cap .i {
                width: 16px;
                height: 16px
            }

            .owner {
                display: flex;
                align-items: center;
                gap: 12px;
                margin-top: 18px;
                background: var(--surface);
                border-radius: 14px;
                padding: 12px
            }

            .owner b {
                display: block;
                font-size: 14.5px;
                font-weight: 600
            }

            .owner small {
                color: var(--green);
                font-size: 12.5px
            }

            .counters {
                display: grid;
                grid-template-columns: 1fr;
                gap: 8px
            }

            .counter {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 10px;
                background: var(--surface);
                border-radius: 12px;
                padding: 8px 12px;
                font-size: 14px
            }

            .counter>span:first-child {
                display: inline-flex;
                align-items: center;
                gap: 8px
            }

            .counter .i {
                width: 18px;
                height: 18px;
                color: var(--purple)
            }

            .inp.sm {
                width: 80px;
                height: 36px;
                text-align: center
            }

            .dlg-p {
                font-size: 13.5px;
                color: #454b5f;
                margin-top: 6px;
                line-height: 1.65
            }

            .dlg-rich {
                width: min(360px,92%)
            }

            .dlg-rich .dlg-b {
                text-align: start
            }

            .dlg-list {
                list-style: none;
                display: flex;
                flex-direction: column;
                gap: 8px;
                margin-top: 12px;
                max-height: 240px;
                overflow: auto
            }

            .dlg-list li {
                display: flex;
                gap: 10px;
                align-items: flex-start;
                background: var(--bg);
                border-radius: 12px;
                padding: 8px 10px
            }

            .dl-ic {
                width: 28px;
                height: 28px;
                border-radius: 8px;
                background: #fff;
                color: var(--fg);
                display: grid;
                place-items: center;
                flex: none
            }

            .dl-ic .i {
                width: 16px;
                height: 16px
            }

            .dlg-list b {
                display: block;
                font-size: 13.5px;
                color: var(--ink)
            }

            .dlg-list small {
                display: block;
                font-size: 12px;
                color: #454b5f;
                line-height: 1.5
            }

            .nb-btn.on {
                color: var(--green)
            }

            .tools-row .search {
                min-width: 0
            }

            #app:not(.wide) .tools-row .btn span, #app:not(.wide) .tools-row .btn {
                padding: 0 12px
            }

            .selwrap {
                position: relative
            }

            .sel {
                appearance: none;
                -webkit-appearance: none;
                padding-inline-end:42px;cursor: pointer
            }

            .sel:invalid, .sel option[value=""] {
                color: #7c8190
            }

            .selwrap .sel-ic {
                position: absolute;
                inset-inline-end: 14px;
                top: 50%;
                transform: translateY(-50%);
                width: 18px;
                height: 18px;
                color: var(--purple);
                pointer-events: none
            }

            .add-prop {
                margin: 12px 0 0;
                height: 52px;
                font-size: 16px
            }

            .tag-row .tag {
                display: inline-flex;
                align-items: center;
                gap: 4px
            }

            .tag-row .tag .i {
                width: 13px;
                height: 13px
            }

            /* v6: compact explore panel */
            .ex:not(.pv) .ex-sheet {
                height: auto
            }

            .ex:not(.pv) .sheet-body {
                padding-bottom: 18px
            }

            .ex:not(.pv) .locate, .ex:not(.pv) .fab-ext {
                bottom: 206px
            }

            .wide .ex:not(.pv) .ex-sheet {
                bottom: auto
            }

            .wide .ex:not(.pv) .locate {
                bottom: auto
            }

            /* v7: place card, offers window, store window */
            .btn.green {
                background: var(--green);
                color: #fff
            }

            .btn.navy {
                background: var(--purple);
                color: #fff
            }

            .btn.outline {
                background: #fff;
                color: var(--ink);
                border: 1px solid var(--line2)
            }

            a.btn, a.rnd {
                text-decoration: none
            }

            .btn:disabled {
                opacity: .45;
                cursor: not-allowed
            }

            .ex.pv .ex-sheet {
                height: auto;
                max-height: calc(100% - 128px)
            }

            .ex.pv .sheet-body {
                overflow-y: auto
            }

            .ex.pv .locate {
                display: none
            }

            @keyframes pcin {
                from {
                    opacity: 0;
                    transform: translateY(12px)
                }
            }

            .pc-top {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 8px
            }

            .pc-chips {
                display: flex;
                gap: 6px;
                flex-wrap: wrap
            }

            .pc-store, .pc-of {
                display: inline-flex;
                align-items: center;
                gap: 4px;
                height: 24px;
                padding: 0 9px;
                border-radius: 12px;
                font-size: 12px;
                font-weight: 500
            }

            .pc-store {
                background: #dde0eb;
                color: var(--green)
            }

            .pc-of {
                background: var(--brand-soft);
                color: var(--purple)
            }

            .pc-store .i, .pc-of .i {
                width: 13px;
                height: 13px
            }

            .pc-head {
                display: flex;
                gap: 12px;
                margin-top: 10px;
                align-items: flex-start
            }

            .pc-img {
                position: relative;
                width: 86px;
                height: 86px;
                border-radius: 16px;
                overflow: hidden;
                flex: none;
                padding: 0;
                background: var(--brand-soft)
            }

            .pc-img img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block
            }

            .pc-img span {
                position: absolute;
                bottom: 5px;
                inset-inline-start: 5px;
                display: inline-flex;
                align-items: center;
                gap: 3px;
                background: rgba(var(--brand-primary-rgb),.78);
                color: #fff;
                font-size: 10.5px;
                padding: 1px 6px;
                border-radius: 7px
            }

            .pc-img span .i {
                width: 11px;
                height: 11px
            }

            .pc-ht {
                flex: 1;
                min-width: 0
            }

            .pc-head h3 {
                font-size: 17px;
                font-weight: 600;
                line-height: 1.4
            }

            .pc-addr {
                display: flex;
                align-items: center;
                gap: 4px;
                font-size: 13px;
                color: var(--muted);
                margin-top: 4px;
                line-height: 1.5
            }

            .pc-addr .i {
                width: 15px;
                height: 15px;
                flex: none
            }

            .pc-meta {
                display: flex;
                gap: 12px;
                font-size: 12.5px;
                color: var(--muted);
                margin-top: 4px
            }

            .pc-meta span {
                display: inline-flex;
                align-items: center;
                gap: 3px
            }

            .pc-meta .i {
                width: 13px;
                height: 13px
            }

            .pc-meta .st {
                color: #3e559a
            }

            .pc-desc {
                margin-top: 12px;
                background: var(--paper);
                border: 1px solid var(--line);
                border-radius: 12px;
                padding: 10px 12px;
                font-size: 13.5px;
                line-height: 1.7;
                color: #2b334d
            }

            .pc-acts {
                display: flex;
                gap: 8px;
                margin-top: 10px;
                flex-wrap: wrap
            }

            .pc-acts .btn {
                flex: 1 1 150px;
                height: 44px;
                font-size: 14px;
                padding: 0 10px
            }

            .pc-contact {
                margin-top: 14px;
                padding-top: 12px;
                border-top: 1px solid var(--line)
            }

            .pc-live {
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 13px;
                font-weight: 500;
                gap: 8px
            }

            .pc-live span {
                display: inline-flex;
                align-items: center;
                gap: 7px
            }

            .pc-live small {
                color: var(--muted);
                font-weight: 400;
                font-size: 12px
            }

            .dot-live {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: #2f4b9e;
                box-shadow: 0 0 0 3px rgba(47, 75, 158,.2)
            }

            .pc-cbtns {
                display: grid;
                grid-template-columns: repeat(3,1fr);
                gap: 8px;
                margin-top: 10px
            }

            .pc-cbtns .btn {
                height: 44px;
                padding: 0 6px;
                font-size: 14px;
                gap: 6px
            }

            .pc-cbtns .i, .pc-acts .i {
                width: 18px;
                height: 18px
            }

            .btn.dirs {
                width: 100%;
                margin-top: 8px;
                height: 44px;
                background: var(--brand-soft);
                color: var(--purple);
                font-size: 14px
            }

            .btn.dirs small {
                color: var(--muted);
                font-weight: 400;
                margin-inline-start:4px}

            .p-android .pc-desc {
                background: #eeeff3
            }

            .msheet.ms-poffers, .msheet.ms-pstore {
                background: var(--surface);
                overflow: hidden;
                height: 92%;
                max-height: 92%
            }

            .wide .msheet.ms-poffers {
                width: 640px;
                height: auto;
                max-height: 90%
            }

            .wide .msheet.ms-pstore {
                width: 880px;
                height: auto;
                max-height: 92%
            }

            .mh {
                display: flex;
                align-items: center;
                gap: 12px;
                padding: 16px 18px;
                background: linear-gradient(135deg,var(--brand-primary),var(--brand-blue));
                color: #fff;
                flex: none
            }

            .p-ios .mh, .p-android .mh {
                padding-top: 18px
            }

            .mh-ic {
                width: 46px;
                height: 46px;
                border-radius: 14px;
                background: rgba(255,255,255,.12);
                display: grid;
                place-items: center;
                flex: none
            }

            .mh>div {
                flex: 1;
                min-width: 0
            }

            .mh b {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                gap: 8px;
                font-size: 17px;
                font-weight: 600;
                line-height: 1.4
            }

            .mh small {
                display: block;
                color: #bfc6dc;
                font-size: 13px;
                margin-top: 2px
            }

            .mh .icbtn {
                background: rgba(255,255,255,.12);
                color: #fff
            }

            .vbadge {
                font-size: 11px;
                font-weight: 600;
                font-style: normal;
                background: var(--gold);
                color: var(--purple);
                padding: 2px 8px;
                border-radius: 8px
            }

            .mbanner {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                gap: 8px;
                padding: 10px 18px;
                background: #e9ecf4;
                color: var(--ink);
                font-size: 13px;
                flex: none;
                border-bottom: 1px solid var(--line)
            }

            .mbanner>.i {
                width: 18px;
                height: 18px;
                color: var(--green)
            }

            .mbanner span {
                flex: 1;
                min-width: 180px
            }

            .mbanner .link {
                display: inline-flex;
                align-items: center;
                gap: 4px
            }

            .mbanner .link .i {
                width: 15px;
                height: 15px
            }

            .mb {
                flex: 1;
                min-height: 0;
                overflow-y: auto;
                padding: 16px;
                display: flex;
                flex-direction: column;
                gap: 14px;
                background: var(--paper)
            }

            .mf {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 10px;
                padding: 12px 18px 30px;
                border-top: 1px solid var(--line);
                background: var(--surface);
                flex: none;
                flex-wrap: wrap
            }

            .wide .mf, .p-web .mf {
                padding-bottom: 14px
            }

            .mf>span {
                display: inline-flex;
                align-items: center;
                flex-wrap: wrap;
                gap: 6px 8px;
                font-size: 13px;
                color: var(--muted)
            }

            .mf>span>.i {
                width: 16px;
                height: 16px;
                color: var(--green)
            }

            .tel-pill {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                height: 32px;
                padding: 0 12px;
                border: 1px solid var(--line2);
                border-radius: 10px;
                color: var(--ink);
                font-weight: 600;
                text-decoration: none;
                background: #fff
            }

            .tel-pill .i {
                width: 15px;
                height: 15px;
                color: var(--purple)
            }

            .car {
                position: relative;
                background: var(--brand-soft);
                overflow: hidden
            }

            .car-track {
                display: flex;
                overflow-x: auto;
                scroll-snap-type: x mandatory;
                scrollbar-width: none;
                aspect-ratio: 16/10
            }

            .car-track::-webkit-scrollbar {
                display: none
            }

            .car-sl {
                flex: 0 0 100%;
                scroll-snap-align: center;
                padding: 0;
                display: block
            }

            .car-sl img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block
            }

            .car-tl {
                position: absolute;
                top: 10px;
                inset-inline-start: 10px;
                display: flex;
                gap: 6px;
                pointer-events: none
            }

            .car-tl .oc-disc {
                position: static
            }

            .car-tr {
                position: absolute;
                top: 10px;
                inset-inline-end: 10px;
                pointer-events: none
            }

            .car-bl {
                position: absolute;
                bottom: 10px;
                inset-inline-start: 10px;
                pointer-events: none
            }

            .car-dots {
                position: absolute;
                bottom: 12px;
                left: 50%;
                transform: translateX(-50%);
                display: flex;
                gap: 5px;
                pointer-events: none
            }

            .car-dots i {
                width: 7px;
                height: 7px;
                border-radius: 4px;
                background: rgba(255,255,255,.65);
                transition: width .2s
            }

            .car-dots i.on {
                background: #fff;
                width: 18px
            }

            .car-n {
                position: absolute;
                bottom: 10px;
                inset-inline-end: 10px;
                background: rgba(var(--brand-primary-rgb),.72);
                color: #fff;
                font-size: 11.5px;
                padding: 2px 8px;
                border-radius: 9px;
                pointer-events: none
            }

            .car-arr {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                width: 34px;
                height: 34px;
                border-radius: 50%;
                background: rgba(255,255,255,.92);
                color: var(--purple);
                display: grid;
                place-items: center;
                box-shadow: 0 2px 6px rgba(var(--brand-primary-rgb),.2);
                opacity: 0;
                transition: opacity .15s
            }

            .car:hover .car-arr, .car:focus-within .car-arr {
                opacity: 1
            }

            @media (hover: none) {
                .car-arr {
                    opacity:1
                }
            }

            .p-ios .car-arr, .p-android .car-arr {
                opacity: 1
            }

            .car-arr.prev {
                inset-inline-start: 8px
            }

            .car-arr.next {
                inset-inline-end: 8px
            }

            .car-arr .i {
                width: 18px;
                height: 18px
            }

            .chip-l {
                display: inline-block;
                background: rgba(255,255,255,.94);
                color: var(--ink);
                font-size: 12px;
                font-weight: 500;
                padding: 3px 10px;
                border-radius: 10px
            }

            .st-b {
                display: inline-flex;
                align-items: center;
                gap: 4px;
                font-size: 12px;
                font-weight: 600;
                padding: 3px 10px;
                border-radius: 10px;
                color: #fff;
                background: var(--green)
            }

            .st-b .i {
                width: 13px;
                height: 13px
            }

            .st-b.low {
                background: #3d4f86
            }

            .st-b.out {
                background: var(--red)
            }

            .moc {
                background: var(--surface);
                border: 1px solid var(--line);
                border-radius: 18px;
                overflow: hidden;
                flex: none
            }

            .moc-b {
                padding: 12px 14px 14px
            }

            .moc h4 {
                font-size: 16px;
                font-weight: 600;
                line-height: 1.5;
                display: flex;
                gap: 8px;
                align-items: flex-start
            }

            .pct {
                flex: none;
                background: var(--green);
                color: #fff;
                font-size: 12.5px;
                font-weight: 700;
                padding: 1px 8px;
                border-radius: 9px;
                margin-top: 3px
            }

            .moc p {
                font-size: 13.5px;
                color: #454b5f;
                line-height: 1.7;
                margin-top: 4px
            }

            .moc-meta {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                gap: 8px 10px;
                margin-top: 10px;
                padding-top: 10px;
                border-top: 1px solid var(--line);
                font-size: 12.5px;
                color: var(--muted)
            }

            .cpn {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                border: 1.5px dashed var(--gold);
                background: #f2f4fa;
                color: var(--purple);
                font-weight: 700;
                font-size: 13px;
                letter-spacing: .04em;
                padding: 4px 10px;
                border-radius: 9px
            }

            .cpn .i {
                width: 14px;
                height: 14px
            }

            .moc-until {
                margin-inline-start:auto;display: inline-flex;
                align-items: center;
                gap: 4px
            }

            .moc-until .i {
                width: 14px;
                height: 14px
            }

            .moc-acts {
                display: flex;
                gap: 8px;
                margin-top: 12px
            }

            .moc-acts .btn {
                height: 44px;
                font-size: 14px
            }

            .spc {
                background: var(--surface);
                border: 1px solid var(--line);
                border-radius: 18px;
                overflow: hidden;
                display: flex;
                flex-direction: column
            }

            .spc-b {
                padding: 12px 14px 14px;
                display: flex;
                flex-direction: column;
                gap: 4px;
                flex: 1
            }

            .spc-b b {
                font-size: 15.5px;
                font-weight: 600;
                line-height: 1.45
            }

            .spc-b p {
                font-size: 13px;
                color: var(--muted);
                line-height: 1.6
            }

            .spc-price {
                font-size: 18px;
                font-weight: 700;
                color: var(--green);
                margin: 4px 0 8px
            }

            .spc-b .btn {
                margin-top: auto;
                height: 44px
            }

            .qo {
                display: flex;
                gap: 12px;
                align-items: center;
                background: var(--paper);
                border-radius: 12px;
                padding: 8px;
                margin: 10px 0
            }

            .qo img {
                width: 64px;
                height: 50px;
                border-radius: 9px;
                object-fit: cover
            }

            .qo b {
                display: block;
                font-size: 14px;
                color: var(--ink)
            }

            .qo small {
                display: block;
                font-size: 12px;
                color: var(--muted)
            }

            .qo strong {
                display: block;
                color: var(--green);
                font-size: 14px
            }

            .spc {
                min-height: max-content
            }

            .wide .moc .car-track {
                aspect-ratio: 2/1
            }

            .mf>span {
                flex: 1 1 260px;
                min-width: 0
            }

            /* v8: sector map icons */

            .em-store {
                color: #FFBE3D!important
            }

            .fbp {
                transform: translate(-50%,-50%)
            }

            .mm-pin {
                transform: translate(-50%,-50%)
            }

            .chip-pin {
                width: 20px;
                height: 20px;
                border-radius: 7px;
                background: linear-gradient(145deg,var(--p1),var(--p2));
                color: #fff;
                display: grid;
                place-items: center;
                flex: none
            }

            .chip .chip-pin .i {
                width: 12px;
                height: 12px;
                stroke-width: 2.4
            }

            .p-android .chip.on .chip-pin {
                display: none
            }

            /* v9: sign-in and company registration */
            .auth-mode .sidebar, .auth-mode .topbar {
                display: none!important
            }

            .auth {
                flex: 1;
                min-height: 0;
                display: flex;
                flex-direction: column;
                background: var(--surface)
            }

            .auth-side {
                display: none
            }

            .wide .auth {
                display: grid;
                grid-template-columns: minmax(0,1fr) minmax(500px,660px);
                height: 100%
            }

            .wide .auth-side {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                position: relative;
                overflow: hidden;
                background: linear-gradient(160deg,var(--brand-primary) 0%,var(--brand-blue) 100%);
                color: #fff;
                padding: 44px 52px;
                --lg1: var(--brand-aqua);
                --lg2: var(--brand-primary)
            }

            .auth-side>*:not(.contours) {
                position: relative
            }

            .as-top {
                display: flex;
                align-items: center;
                gap: 10px;
                font-size: 22px
            }

            .as-top .logo {
                width: 64px;
                height: 64px;
                max-height: 64px;
                object-fit: contain
            }

            .as-mid h2 {
                font-size: 38px;
                line-height: 1.35;
                font-weight: 700
            }

            .as-mid p {
                color: #bfc6dc;
                font-size: 16px;
                line-height: 1.8;
                margin-top: 14px;
                max-width: 42ch
            }

            .as-mid ul {
                list-style: none;
                margin-top: 30px;
                display: flex;
                flex-direction: column;
                gap: 14px
            }

            .as-mid li {
                display: flex;
                align-items: center;
                gap: 12px;
                font-size: 15px
            }

            .as-mid li .i {
                width: 38px;
                height: 38px;
                padding: 9px;
                border-radius: 12px;
                background: rgba(var(--brand-aqua-rgb),.16);
                color: var(--brand-aqua)
            }

            .auth-side small {
                color: #959ebb;
                font-size: 13px
            }

            .auth-main {
                flex: 1;
                min-height: 0;
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 8px 20px 32px
            }

            .wide .auth-main {
                padding: 18px 40px 40px
            }

            .auth-bar {
                width: 100%;
                display: flex;
                justify-content: flex-end;
                max-width: 560px
            }

            .auth-card {
                width: 100%;
                max-width: 440px;
                display: flex;
                flex-direction: column
            }

            .auth-card.wide-form {
                max-width: 580px
            }

            .wide .auth-card {
                margin: auto 0
            }

            .auth-logo {
                width: 132px;
                height: 100px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 4px auto 0;
                --lg1: var(--brand-aqua);
                --lg2: var(--brand-primary)
            }

            .auth-logo .logo {
                width: 96px;
                height: 96px;
                max-height: 96px;
                object-fit: contain
            }

            .auth h1 {
                font-size: 27px;
                font-weight: 700;
                text-align: center;
                color: var(--purple);
                margin-top: 18px;
                line-height: 1.35
            }

            .auth-sub {
                text-align: center;
                color: var(--muted);
                font-size: 14.5px;
                margin-top: 6px;
                line-height: 1.6
            }

            .auth-tabs {
                margin-top: 22px
            }

            .auth .field {
                margin-top: 18px
            }

            .auth .inp {
                background: #f4f6fb
            }

            .p-android .auth .inp {
                background: #eaebf0
            }

            [dir=rtl] .ltr-in {
                text-align: right
            }

            .pw {
                position: relative
            }

            .pw .inp {
                padding-inline-end:50px}

            .pw-eye {
                position: absolute;
                inset-inline-end: 6px;
                top: 50%;
                transform: translateY(-50%);
                width: 40px;
                height: 40px;
                border-radius: 10px;
                display: grid;
                place-items: center;
                color: var(--muted)
            }

            .pw-eye .i {
                width: 20px;
                height: 20px
            }

            .pw-meter {
                display: flex;
                gap: 4px;
                margin-top: 8px
            }

            .pw-meter i {
                flex: 1;
                height: 4px;
                border-radius: 2px;
                background: #dcdee5
            }

            .pw-meter.s1 i:nth-child(1) {
                background: var(--red)
            }

            .pw-meter.s2 i:nth-child(-n+2) {
                background: #3d4f86
            }

            .pw-meter.s3 i {
                background: var(--green)
            }

            .auth-btn {
                height: 52px;
                font-size: 16px;
                margin-top: 22px;
                width: 100%;
                box-shadow: 0 8px 18px rgba(var(--brand-primary-rgb),.18)
            }

            .auth-link {
                display: flex;
                align-items: center;
                gap: 4px;
                margin: 14px auto 0;
                color: var(--purple);
                font-weight: 500;
                font-size: 14px
            }

            .auth-link .inl {
                width: 16px;
                height: 16px
            }

            .auth-or {
                display: flex;
                align-items: center;
                gap: 12px;
                color: var(--muted);
                font-size: 13px;
                margin: 20px 0 14px
            }

            .auth-or::before, .auth-or::after {
                content: '';
                flex: 1;
                height: 1px;
                background: var(--line2)
            }

            .btn.google {
                height: 52px;
                width: 100%;
                background: #fff;
                border: 1px solid var(--line2);
                border-radius: 14px;
                color: var(--ink);
                font-weight: 500
            }

            .btn.google .i {
                width: 20px;
                height: 20px;
                color: var(--purple);
                stroke-width: 2.6
            }

            .guest {
                margin-top: 26px;
                height: 52px;
                width: 100%;
                border: 1.5px dashed #b9becc;
                border-radius: 14px;
                color: var(--muted);
                font-weight: 500;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px
            }

            .guest .i {
                width: 19px;
                height: 19px
            }

            .auth-foot {
                text-align: center;
                margin-top: 16px;
                font-size: 14px;
                color: var(--muted)
            }

            .auth-foot button {
                color: var(--purple);
                font-weight: 600
            }

            .spin {
                width: 18px;
                height: 18px;
                border: 2.5px solid rgba(255,255,255,.35);
                border-top-color: #fff;
                border-radius: 50%;
                animation: spin .7s linear infinite;
                display: inline-block;
                flex: none
            }

            .google .spin {
                border-color: rgba(var(--brand-primary-rgb),.2);
                border-top-color: var(--purple)
            }

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

            .check {
                display: flex;
                gap: 10px;
                align-items: flex-start;
                text-align: start;
                font-size: 13.5px;
                line-height: 1.6;
                width: 100%
            }

            .check .cb {
                margin-top: 2px
            }

            .check a {
                color: var(--purple);
                font-weight: 600;
                text-decoration: underline;
                text-underline-offset: 2px
            }

            .sent-box {
                text-align: center;
                background: var(--paper);
                border-radius: 16px;
                padding: 22px 18px;
                margin-top: 22px;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 8px
            }

            .sent-box>.i {
                width: 40px;
                height: 40px;
                color: var(--green)
            }

            .sent-box b {
                font-size: 17px
            }

            .sent-box p {
                color: var(--muted);
                font-size: 14px;
                line-height: 1.7
            }

            .reg-switch {
                display: flex;
                align-items: center;
                justify-content: center;
                flex-wrap: wrap;
                gap: 6px;
                margin-top: 14px;
                font-size: 13.5px;
                color: var(--muted);
                background: var(--paper);
                border-radius: 12px;
                padding: 10px
            }

            .reg-switch .i {
                width: 17px;
                height: 17px;
                color: var(--purple)
            }

            .reg-switch button {
                color: var(--purple);
                font-weight: 600
            }

            .rsteps {
                display: grid;
                grid-template-columns: repeat(3,1fr);
                gap: 6px;
                margin-top: 18px
            }

            .rstep {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 6px;
                text-align: center;
                font-size: 12.5px;
                color: var(--muted);
                line-height: 1.35
            }

            .rstep i {
                width: 32px;
                height: 32px;
                border-radius: 50%;
                display: grid;
                place-items: center;
                background: #e8edf5;
                color: var(--muted);
                font-style: normal;
                font-weight: 600;
                font-size: 14px;
                transition: background .2s
            }

            .rstep.cur i {
                background: var(--purple);
                color: #fff;
                box-shadow: 0 0 0 4px rgba(var(--brand-primary-rgb),.14)
            }

            .rstep.done i {
                background: var(--green);
                color: #fff
            }

            .rstep .i {
                width: 16px;
                height: 16px;
                stroke-width: 2.8
            }

            .rstep.cur span {
                color: var(--ink);
                font-weight: 600
            }

            .rstep:disabled {
                cursor: default
            }

            .reg-sec {
                background: var(--paper);
                border: 1px solid var(--line);
                border-radius: 18px;
                padding: 16px;
                margin-top: 14px
            }

            .reg-sec h3 {
                display: flex;
                align-items: center;
                gap: 8px;
                font-size: 15.5px;
                font-weight: 600;
                color: var(--purple)
            }

            .reg-sec h3 .i {
                width: 20px;
                height: 20px
            }

            .reg-sec .hint {
                margin-top: 6px
            }

            .reg-sec .field {
                margin-top: 14px
            }

            .reg-sec .inp {
                background: #fff
            }

            .p-android .reg-sec .inp {
                background: #fff;
                border: 1px solid var(--line2);
                border-radius: 10px
            }

            .auth .two {
                gap: 0 12px
            }

            #app:not(.wide) .auth .two {
                grid-template-columns: 1fr
            }

            .logo-up {
                display: flex;
                align-items: center;
                gap: 12px;
                margin-top: 12px
            }

            .lu-img {
                width: 64px;
                height: 64px;
                border-radius: 16px;
                background: #fff;
                border: 1.5px dashed var(--line2);
                display: grid;
                place-items: center;
                overflow: hidden;
                color: var(--muted);
                flex: none
            }

            .lu-img img {
                width: 100%;
                height: 100%;
                object-fit: cover
            }

            .logo-up b {
                display: block;
                font-size: 14px
            }

            .logo-up small {
                display: block;
                color: var(--muted);
                font-size: 12px;
                margin-top: 2px;
                line-height: 1.5
            }

            .logo-up .link {
                cursor: pointer;
                display: inline-flex;
                margin-top: 4px
            }

            .dg-link {
                color: var(--red)!important
            }

            [data-docdrop].over .docs, [data-docdrop].over .lu-img {
                outline: 2px dashed var(--gold);
                outline-offset: 4px;
                border-radius: 12px
            }

            .docs {
                display: grid;
                grid-template-columns: repeat(3,1fr);
                gap: 8px;
                margin-top: 10px
            }

            .doc {
                position: relative;
                aspect-ratio: 3/4;
                border-radius: 12px;
                overflow: hidden;
                background: #fff;
                border: 1px solid var(--line2)
            }

            .doc img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block
            }

            .doc .cover {
                position: absolute;
                bottom: 6px;
                inset-inline-start: 6px;
                background: var(--purple);
                color: #fff;
                font-size: 11px;
                padding: 2px 8px;
                border-radius: 8px
            }

            .doc.pdf {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 4px;
                padding: 10px;
                text-align: center
            }

            .doc.pdf>.i {
                width: 32px;
                height: 32px;
                color: var(--red)
            }

            .doc.pdf b {
                font-size: 13px
            }

            .doc.pdf small {
                font-size: 10.5px;
                color: var(--muted);
                word-break: break-all;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden
            }

            .doc.add {
                border: 1.5px dashed var(--line2);
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 4px;
                color: var(--purple);
                cursor: pointer;
                text-align: center;
                padding: 8px
            }

            .doc.add .i {
                width: 26px;
                height: 26px
            }

            .doc.add b {
                font-size: 12.5px;
                font-weight: 600;
                line-height: 1.35
            }

            .doc.add small {
                font-size: 11px;
                color: var(--muted)
            }

            .has-err .doc.add {
                border-color: var(--red)
            }

            .reg-sec .demo-fill {
                margin-top: 12px
            }

            .reg-sum {
                display: flex;
                align-items: center;
                gap: 12px;
                background: #e9ecf4;
                border-radius: 14px;
                padding: 12px 14px;
                margin-top: 14px
            }

            .reg-sum>.i {
                width: 24px;
                height: 24px;
                color: var(--purple);
                flex: none
            }

            .reg-sum>div {
                flex: 1;
                min-width: 0
            }

            .reg-sum b {
                display: block;
                font-size: 14.5px
            }

            .reg-sum small {
                display: block;
                color: var(--muted);
                font-size: 12.5px;
                margin-top: 2px
            }

            .reg-nav {
                display: flex;
                gap: 10px;
                margin-top: 18px
            }

            .reg-nav .btn {
                height: 52px
            }

            .reg-done {
                display: flex;
                flex-direction: column;
                align-items: center;
                text-align: center;
                margin-top: 10px
            }

            .reg-done .ok-badge {
                margin-top: 8px
            }

            .rd-p {
                color: var(--muted);
                font-size: 14.5px;
                line-height: 1.8;
                margin-top: 16px
            }

            .rd-list {
                display: flex;
                flex-direction: column;
                gap: 8px;
                margin: 18px 0 0;
                text-align: start;
                width: 100%
            }

            .rd-list div {
                display: flex;
                align-items: center;
                gap: 10px;
                background: var(--paper);
                border-radius: 12px;
                padding: 11px 12px;
                font-size: 14px
            }

            .rd-list .i {
                width: 18px;
                height: 18px;
                flex: none
            }

            .rd-list span {
                flex: 1
            }

            .rd-list em {
                font-style: normal;
                font-size: 12px;
                font-weight: 600;
                padding: 2px 9px;
                border-radius: 8px;
                white-space: nowrap
            }

            .rd-list .ok .i {
                color: var(--green)
            }

            .rd-list .ok em {
                background: #dde0eb;
                color: var(--green)
            }

            .rd-list .wait .i {
                color: #3d4f86
            }

            .rd-list .wait em {
                background: var(--brand-soft);
                color: var(--purple)
            }

            .rd-list .next .i {
                color: var(--muted)
            }

            .rd-list .next em {
                background: #eeeff2;
                color: var(--muted)
            }

            .co-tags .vt.pend {
                background: rgba(var(--brand-aqua-rgb),.22);
                color: #cfd6ec
            }

            .auth-ok {
                margin: 10px auto 0
            }

            /* v10: jobs */
            .msheet.ms-pjobs, .msheet.ms-pjob, .msheet.ms-japply {
                background: var(--surface);
                overflow: hidden;
                height: 92%;
                max-height: 92%
            }

            .wide .msheet.ms-pjobs {
                width: 680px;
                height: auto;
                max-height: 90%
            }

            .wide .msheet.ms-pjob {
                width: 760px;
                height: auto;
                max-height: 92%
            }

            .wide .msheet.ms-japply {
                width: 560px;
                height: auto;
                max-height: 90%
            }

            .jfilter {
                display: flex;
                gap: 8px;
                padding: 12px 16px;
                background: var(--surface);
                border-bottom: 1px solid var(--line);
                flex: none;
                overflow-x: auto;
                scrollbar-width: none
            }

            .jfilter .chip {
                box-shadow: none;
                border: 1px solid var(--line2)
            }

            .jfilter .chip .i {
                width: 15px;
                height: 15px
            }

            .jc {
                background: var(--surface);
                border: 1px solid var(--line);
                border-radius: 18px;
                padding: 14px;
                flex: none
            }

            .jc-top {
                display: flex;
                gap: 12px;
                align-items: flex-start
            }

            .jc-top>div {
                flex: 1;
                min-width: 0
            }

            .jc-title {
                display: block;
                text-align: start;
                font-size: 16px;
                font-weight: 600;
                line-height: 1.4;
                color: var(--ink)
            }

            .jc-top small {
                display: block;
                font-size: 13px;
                color: var(--muted);
                margin-top: 2px
            }

            .on-save {
                color: var(--green)
            }

            .jtags {
                display: flex;
                flex-wrap: wrap;
                gap: 6px;
                margin-top: 10px
            }

            .jtag {
                display: inline-flex;
                align-items: center;
                gap: 4px;
                font-size: 12px;
                font-weight: 500;
                padding: 3px 9px;
                border-radius: 9px;
                background: var(--brand-soft);
                color: var(--purple)
            }

            .jtag.type {
                background: #dde0eb;
                color: var(--green)
            }

            .jtag .i {
                width: 13px;
                height: 13px
            }

            .jmeta {
                display: flex;
                flex-wrap: wrap;
                gap: 6px 14px;
                margin-top: 10px;
                font-size: 12.5px;
                color: var(--muted)
            }

            .jmeta span {
                display: inline-flex;
                align-items: center;
                gap: 5px
            }

            .jmeta .i {
                width: 15px;
                height: 15px
            }

            .jmeta .sal {
                color: var(--ink);
                font-weight: 600
            }

            .jc-acts {
                display: flex;
                gap: 8px;
                margin-top: 12px
            }

            .jc-acts .btn {
                flex: 1;
                height: 44px;
                font-size: 14px;
                padding: 0 8px
            }

            .btn.applied {
                background: #dde0eb;
                color: var(--green);
                opacity: 1
            }

            .jbody {
                padding: 16px;
                overflow-y: auto;
                flex: 1;
                min-height: 0;
                background: var(--paper)
            }

            .jbody .car {
                border-radius: 18px
            }

            .jcard {
                background: var(--surface);
                border-radius: 16px;
                padding: 14px;
                margin-top: 12px
            }

            .jsec h4, .jh {
                font-size: 15px;
                font-weight: 600;
                color: var(--purple);
                display: flex;
                align-items: center;
                gap: 6px;
                margin-bottom: 8px
            }

            .jsec h4 .i, .jh .i {
                width: 18px;
                height: 18px
            }

            .jp {
                font-size: 14.5px;
                line-height: 1.8;
                color: #2b334d
            }

            .jlist {
                list-style: none;
                display: flex;
                flex-direction: column;
                gap: 7px
            }

            .jlist li {
                display: flex;
                gap: 8px;
                font-size: 14px;
                line-height: 1.65;
                color: #2b334d
            }

            .jlist li .i {
                width: 16px;
                height: 16px;
                color: var(--green);
                flex: none;
                margin-top: 4px
            }

            .jsec .tags .tag {
                display: inline-flex;
                align-items: center;
                gap: 4px
            }

            .jsec .tags .tag .i {
                width: 13px;
                height: 13px
            }

            .jemp {
                display: flex;
                align-items: center;
                gap: 10px;
                margin-bottom: 10px
            }

            .jemp b {
                display: block;
                font-size: 14.5px
            }

            .jemp small {
                display: block;
                color: var(--muted);
                font-size: 12.5px
            }

            .jfoot {
                gap: 8px;
                flex-wrap: nowrap
            }

            .jfoot .btn {
                height: 48px
            }

            .cv-opt {
                display: flex;
                align-items: center;
                gap: 12px;
                width: 100%;
                text-align: start;
                background: var(--surface);
                border: 1.5px solid var(--line2);
                border-radius: 14px;
                padding: 12px;
                margin-top: 8px;
                cursor: pointer
            }

            .cv-opt.on {
                border-color: var(--purple);
                background: #f2f4fa
            }

            .cv-opt>.i {
                width: 26px;
                height: 26px;
                color: var(--purple);
                flex: none
            }

            .cv-opt b {
                display: block;
                font-size: 14px;
                word-break: break-all
            }

            .cv-opt small {
                display: block;
                font-size: 12px;
                color: var(--muted)
            }

            .ms-japply .jcard .field {
                margin-top: 12px
            }

            .ms-japply textarea.inp {
                height: 96px
            }

            .wide .ms-pjob .car-track {
                aspect-ratio: 21/9
            }

            /* v11: no panel over map */
            .ex:not(.pv) .locate, .ex:not(.pv) .fab-ext {
                bottom: 16px
            }

            /* onboarding + company registration */
            .auth-note {
                display: flex;
                gap: 8px;
                align-items: flex-start;
                background: #e9ecf4;
                border-radius: 12px;
                padding: 10px 12px;
                margin-top: 16px;
                font-size: 13px;
                line-height: 1.6;
                color: #2b334d
            }

            .auth-note .i {
                width: 18px;
                height: 18px;
                color: var(--purple);
                flex: none;
                margin-top: 1px
            }

            .coreg {
                max-width: 640px;
                margin: 0 auto
            }

            .wide .pad.coreg {
                max-width: 1160px;
            }

            .coreg .field {
                margin-top: 14px
            }

            #app:not(.wide) .coreg .two {
                grid-template-columns: 1fr
            }

            .coreg .two {
                gap: 0 12px
            }

            .coreg .reg-sec .inp {
                background: #fff
            }

            .onb-top {
                padding: 4px 0 6px;
                text-align: center;
                --lg1: var(--brand-primary);
                --lg2: var(--brand-aqua)
            }

            .onb-bar {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 14px
            }

            .onb-brand {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                font-weight: 700;
                color: var(--purple);
                font-size: 18px
            }

            .onb-brand .logo {
                width: 118px;
                height: auto;
                max-height: 42px;
                object-fit: contain
            }

            .onb-bar .link {
                display: inline-flex;
                align-items: center;
                gap: 4px
            }

            .onb-bar .link .i {
                width: 16px;
                height: 16px
            }

            .onb-top h1 {
                font-size: 25px;
                font-weight: 700;
                color: var(--purple);
                line-height: 1.35
            }

            .onb-top p {
                color: var(--muted);
                font-size: 14px;
                line-height: 1.7;
                margin-top: 6px
            }

            .coreg-bar {
                padding-bottom: 22px
            }

            .pick {
                position: relative;
                border-radius: 16px;
                overflow: hidden;
                border: 1px solid var(--line2)
            }

            .pickmap {
                height: 300px;
                background: #e6e8ec;
                position: relative
            }

            .wide .pickmap {
                height: 360px
            }

            .pickmap.fb {
                cursor: crosshair
            }

            .pickmap.fb svg {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%
            }

            .pk-fb {
                position: absolute;
                inset: 0
            }

            .pk-pin {
                position: absolute;
                transform: translate(-50%,-50%);
                pointer-events: none;
                width: 44px;
                height: 44px
            }

            .pk-tip {
                position: absolute;
                top: 10px;
                left: 50%;
                transform: translateX(-50%);
                display: inline-flex;
                align-items: center;
                gap: 6px;
                background: rgba(var(--brand-primary-rgb),.88);
                color: #fff;
                font-size: 12.5px;
                padding: 6px 12px;
                border-radius: 12px;
                white-space: nowrap;
                max-width: 92%;
                overflow: hidden;
                text-overflow: ellipsis;
                z-index: 500;
                pointer-events: none
            }

            .pk-tip .i {
                width: 15px;
                height: 15px
            }

            .pk-tip.hide {
                display: none
            }

            .pk-bar {
                display: flex;
                align-items: center;
                justify-content: space-between;
                flex-wrap: wrap;
                gap: 8px;
                margin-top: 10px
            }

            .pk-coord {
                display: inline-flex;
                align-items: center;
                gap: 5px;
                font-size: 13px;
                color: var(--muted)
            }

            .pk-coord .i {
                width: 15px;
                height: 15px;
                color: var(--green)
            }

            /* digital attestations */
            .att-wrap .lead {
                margin-bottom: 4px
            }

            .atc-list {
                display: flex;
                flex-direction: column;
                gap: 10px;
                margin-top: 12px
            }

            .wide .atc-list {
                display: grid;
                grid-template-columns: repeat(auto-fill,minmax(420px,1fr))
            }

            .atc {
                background: var(--surface);
                border-radius: 16px
            }

            .p-android .atc {
                background: #e9ebf0
            }

            .atc-main {
                display: flex;
                align-items: center;
                gap: 12px;
                width: 100%;
                padding: 12px 14px;
                text-align: start
            }

            .atc-ic {
                width: 48px;
                height: 58px;
                border-radius: 10px;
                background: #FBE9E7;
                color: var(--red);
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 2px;
                flex: none
            }

            .atc-ic .i {
                width: 22px;
                height: 22px
            }

            .atc-ic b {
                font-size: 10px;
                font-weight: 700
            }

            .atc-b {
                flex: 1;
                min-width: 0
            }

            .atc-b>b {
                display: block;
                font-size: 15px;
                font-weight: 600;
                line-height: 1.4
            }

            .atc-b>small {
                display: block;
                font-size: 12.5px;
                color: var(--muted);
                margin-top: 2px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap
            }

            .atc-meta {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: 4px 10px;
                margin-top: 6px;
                font-size: 12px;
                color: var(--muted)
            }

            .atc-code {
                font-weight: 600;
                color: var(--purple);
                letter-spacing: .03em
            }

            .ast {
                display: inline-flex;
                align-items: center;
                height: 22px;
                padding: 0 9px;
                border-radius: 11px;
                font-size: 12px;
                font-weight: 600
            }

            .ast-done {
                background: #dde0eb;
                color: var(--green)
            }

            .ast-pay {
                background: var(--brand-soft);
                color: var(--purple)
            }

            .ast-draft {
                background: #eeeff2;
                color: #6e7484
            }

            .att-layout {
                display: block
            }

            .wide .att-layout {
                display: grid;
                grid-template-columns: minmax(0,1fr) 380px;
                gap: 24px;
                align-items: start;
                max-width: 1160px
            }

            .att-side {
                position: sticky;
                top: 0
            }

            .att-prev-card {
                background: var(--surface);
                border-radius: 16px;
                padding: 14px;
                margin-top: 14px
            }

            .wide .att-side .att-prev-card {
                margin-top: 14px
            }

            .att-prev-card .hint {
                margin-top: 10px
            }

            .att-page {
                position: relative;
                aspect-ratio: 595/842;
                width: 100%;
                max-width: 340px;
                margin: 0 auto;
                background: #fff;
                border-radius: 6px;
                box-shadow: 0 4px 18px rgba(var(--brand-primary-rgb),.16),0 0 0 1px rgba(var(--brand-primary-rgb),.06);
                overflow: hidden;
                touch-action: none;
                direction: ltr
            }

            .det .att-page {
                max-width: 420px
            }

            .att-pg {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block
            }

            .att-margin {
                position: absolute;
                left: 0;
                right: 0;
                height: 0;
                border-top: 1.5px dashed rgba(194,59,46,.55)
            }

            .att-margin span {
                position: absolute;
                right: 6px;
                top: 2px;
                font-size: 9px;
                color: rgba(194,59,46,.8);
                background: rgba(255,255,255,.85);
                padding: 0 4px;
                border-radius: 4px
            }

            .att-stamp {
                position: absolute;
                display: grid;
                place-items: center
            }

            .att-stamp img {
                width: 100%;
                height: 100%;
                object-fit: contain;
                pointer-events: none
            }

            .att-page.edit .att-stamp {
                cursor: grab;
                outline: 1.5px dashed var(--purple);
                outline-offset: 2px;
                border-radius: 4px
            }

            .att-stamp.dragging {
                cursor: grabbing;
                outline-style: solid
            }

            .att-rs {
                position: absolute;
                top: -7px;
                right: -7px;
                width: 14px;
                height: 14px;
                border-radius: 50%;
                background: var(--purple);
                border: 2px solid #fff;
                cursor: nesw-resize;
                box-shadow: 0 1px 3px rgba(0,0,0,.3)
            }

            .att-mv {
                position: absolute;
                top: -10px;
                left: -10px;
                width: 22px;
                height: 22px;
                border-radius: 50%;
                background: #fff;
                color: var(--purple);
                display: grid;
                place-items: center;
                box-shadow: 0 1px 4px rgba(0,0,0,.25);
                pointer-events: none
            }

            .att-mv .i {
                width: 13px;
                height: 13px
            }

            .att-pno {
                position: absolute;
                bottom: 6px;
                left: 50%;
                transform: translateX(-50%);
                font-size: 10px;
                background: rgba(var(--brand-primary-rgb),.75);
                color: #fff;
                padding: 1px 8px;
                border-radius: 8px;
                white-space: nowrap
            }

            .att-nostamp {
                position: absolute;
                left: 8%;
                right: 8%;
                bottom: 9%;
                display: flex;
                align-items: center;
                gap: 6px;
                justify-content: center;
                background: rgba(220, 225, 241,.95);
                color: var(--purple);
                font-size: 10.5px;
                padding: 6px;
                border-radius: 8px
            }

            .att-nostamp .i {
                width: 16px;
                height: 16px
            }

            .pdrop {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 6px;
                padding: 22px;
                border: 1.5px dashed var(--line2);
                border-radius: 16px;
                background: #fff;
                cursor: pointer;
                text-align: center;
                color: var(--muted);
                font-size: 12.5px
            }

            .pdrop .i {
                width: 28px;
                height: 28px;
                color: var(--purple)
            }

            .pdrop b {
                color: var(--ink);
                font-size: 14px;
                font-weight: 600
            }

            .pdrop.over {
                border-color: var(--purple);
                background: #f2f4fa
            }

            .has-err .pdrop {
                border-color: var(--red)
            }

            .pdf-card {
                display: flex;
                align-items: center;
                gap: 12px;
                background: #fff;
                border: 1px solid var(--line2);
                border-radius: 14px;
                padding: 10px 12px
            }

            .pdf-card>.i {
                width: 30px;
                height: 30px;
                color: var(--red);
                flex: none
            }

            .pdf-card>div {
                flex: 1;
                min-width: 0
            }

            .pdf-card b {
                display: block;
                font-size: 14px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap
            }

            .pdf-card small {
                display: block;
                font-size: 12px;
                color: var(--muted)
            }

            .pdf-card .link {
                cursor: pointer
            }

            .page-row {
                display: flex;
                gap: 8px;
                align-items: center
            }

            .page-row .money {
                flex: 1
            }

            .page-row .btn {
                height: 48px;
                flex: none
            }

            .stamp-up {
                display: flex;
                align-items: center;
                gap: 12px
            }

            .su-img {
                width: 70px;
                height: 70px;
                border-radius: 14px;
                background: #fff;
                border: 1px solid var(--line2);
                display: grid;
                place-items: center;
                overflow: hidden;
                flex: none;
                padding: 6px
            }

            .su-img img {
                width: 100%;
                height: 100%;
                object-fit: contain
            }

            .stamp-up b {
                display: block;
                font-size: 14px
            }

            .stamp-up small {
                display: block;
                font-size: 12px;
                color: var(--muted);
                margin-top: 2px;
                line-height: 1.5
            }

            .stamp-up .link {
                cursor: pointer;
                display: inline-flex;
                margin-top: 4px
            }

            .quick-pos {
                margin-top: 12px
            }

            .quick-pos .opt {
                min-height: 34px;
                font-size: 13px
            }

            .verify {
                display: flex;
                gap: 14px;
                align-items: center;
                background: #eaedf5;
                border: 1px solid #c9cfe2;
                border-radius: 16px;
                padding: 12px;
                margin-top: 12px
            }

            .verify .qr {
                width: 96px;
                height: 96px;
                flex: none;
                border-radius: 8px;
                background: #fff
            }

            .verify small {
                display: block;
                font-size: 12px;
                color: var(--muted)
            }

            .verify b {
                display: block;
                font-size: 18px;
                color: var(--green);
                letter-spacing: .05em;
                margin-top: 2px
            }

            .verify>div>span {
                display: block;
                font-size: 12.5px;
                color: #2b334d;
                line-height: 1.6;
                margin-top: 4px
            }

            .verify-acts {
                display: flex;
                flex-wrap: wrap;
                gap: 6px;
                margin-top: 8px
            }

            .msheet.ms-attplan {
                background: var(--surface);
                overflow: hidden;
                height: auto;
                max-height: 92%
            }

            .wide .msheet.ms-attplan {
                width: 560px
            }

            .plan {
                display: flex;
                align-items: center;
                gap: 12px;
                width: 100%;
                text-align: start;
                background: var(--surface);
                border: 1.5px solid var(--line2);
                border-radius: 16px;
                padding: 14px;
                margin-top: 10px
            }

            .plan:first-child {
                margin-top: 0
            }

            .plan.on {
                border-color: var(--purple);
                background: #f2f4fa
            }

            .plan-b {
                flex: 1;
                min-width: 0
            }

            .plan-b b {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                gap: 6px;
                font-size: 15px
            }

            .plan-b small {
                display: block;
                font-size: 12.5px;
                color: var(--muted);
                margin-top: 2px
            }

            .plan-p {
                text-align: end;
                flex: none
            }

            .plan-p strong {
                display: block;
                font-size: 16px;
                color: var(--purple)
            }

            .plan-p small {
                font-size: 11px;
                color: var(--muted)
            }

            .jcard.sum div {
                display: flex;
                justify-content: space-between;
                font-size: 14px;
                padding: 4px 0;
                color: #454b5f
            }

            .jcard.sum .tot {
                border-top: 1px solid var(--line);
                margin-top: 6px;
                padding-top: 10px;
                font-weight: 700;
                color: var(--ink);
                font-size: 16px
            }

            .pk-tip {
                white-space: normal;
                text-align: center;
                line-height: 1.5
            }

            /* v12: couriers */
            .cf-hero {
                display: flex;
                gap: 12px;
                align-items: center;
                background: linear-gradient(135deg,var(--brand-primary),var(--brand-blue));
                color: #fff;
                border-radius: 18px;
                padding: 16px;
                margin-top: 4px
            }

            .cf-hero>.i {
                width: 44px;
                height: 44px;
                padding: 10px;
                border-radius: 14px;
                background: rgba(var(--brand-aqua-rgb),.18);
                color: var(--brand-aqua);
                flex: none
            }

            .cf-hero b {
                display: block;
                font-size: 16px
            }

            .cf-hero span {
                display: block;
                font-size: 13px;
                color: #cfd6ec;
                line-height: 1.6;
                margin-top: 2px
            }

            .veh-grid {
                display: grid;
                grid-template-columns: repeat(4,1fr);
                gap: 8px
            }

            #app:not(.wide) .veh-grid {
                grid-template-columns: repeat(2,1fr)
            }

            .veh {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 6px;
                padding: 12px 6px;
                border: 1.5px solid var(--line2);
                border-radius: 14px;
                background: #fff;
                font-size: 13px;
                font-weight: 500;
                color: var(--ink)
            }

            .veh .i {
                width: 28px;
                height: 28px;
                color: var(--purple)
            }

            .veh.on {
                border-color: var(--purple);
                background: #f2f4fa;
                box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb),.1)
            }

            .has-err .veh {
                border-color: #E6BDB8
            }

            .plate-row {
                display: flex;
                gap: 12px;
                align-items: center;
                flex-wrap: wrap
            }

            .plate-in {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 8px;
                flex: 1;
                min-width: 200px
            }

            .plate {
                display: grid;
                grid-template-columns: 1fr 1fr 30px;
                align-items: center;
                width: 190px;
                height: 54px;
                border: 2.5px solid #1d212e;
                border-radius: 8px;
                background: #fff;
                overflow: hidden;
                direction: ltr;
                flex: none
            }

            .plate span {
                display: grid;
                place-items: center;
                height: 100%;
                font-family: Arial,sans-serif;
                font-weight: 700;
                letter-spacing: .06em;
                color: #1d212e
            }

            .pl-n {
                font-size: 18px;
                border-inline-end:2px solid #1d212e}

            .pl-l {
                font-size: 17px
            }

            .pl-k {
                font-size: 9px;
                background: #1f326b;
                color: #fff!important;
                writing-mode: vertical-rl;
                letter-spacing: .1em
            }

            .cfdocs {
                display: grid;
                grid-template-columns: repeat(4,1fr);
                gap: 10px;
                margin-top: 10px
            }

            #app:not(.wide) .cfdocs {
                grid-template-columns: repeat(2,1fr)
            }

            .cfdoc {
                display: flex;
                flex-direction: column;
                gap: 6px;
                position: relative
            }

            .cfd-prev, .cfd-add {
                position: relative;
                aspect-ratio: 4/3;
                border-radius: 12px;
                overflow: hidden;
                background: #fff;
                border: 1px solid var(--line2);
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 4px;
                padding: 0;
                width: 100%
            }

            .cfd-prev img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block
            }

            .cfd-prev.pdf {
                padding: 8px;
                text-align: center
            }

            .cfd-prev.pdf .i {
                width: 28px;
                height: 28px;
                color: var(--red)
            }

            .cfd-prev.pdf small {
                font-size: 10.5px;
                color: var(--muted);
                word-break: break-all
            }

            .cfd-add {
                border-style: dashed;
                border-width: 1.5px;
                color: var(--purple);
                cursor: pointer
            }

            .cfd-add .i {
                width: 24px;
                height: 24px
            }

            .cfd-add small {
                font-size: 11.5px
            }

            .cfdoc.has-err .cfd-add {
                border-color: var(--red)
            }

            .cfdoc .ph-x {
                top: 6px
            }

            .cfd-l {
                font-size: 12.5px;
                font-weight: 500;
                text-align: center;
                line-height: 1.4
            }

            .cf-sum {
                display: flex;
                gap: 12px;
                align-items: center;
                background: var(--paper);
                border-radius: 14px;
                padding: 12px;
                margin-top: 14px;
                width: 100%;
                text-align: start
            }

            .cf-sum>.i {
                width: 30px;
                height: 30px;
                color: var(--purple);
                flex: none
            }

            .cf-sum b {
                display: block;
                font-size: 14.5px
            }

            .cf-sum small {
                display: block;
                font-size: 12.5px;
                color: var(--muted);
                margin-top: 2px
            }

            .add-courier {
                margin-top: 12px;
                height: 50px
            }

            .kc-list {
                display: flex;
                flex-direction: column;
                gap: 10px;
                margin-top: 12px
            }

            .wide .kc-list {
                display: grid;
                grid-template-columns: repeat(auto-fill,minmax(400px,1fr))
            }

            .kc {
                display: flex;
                align-items: center;
                gap: 12px;
                background: var(--surface);
                border-radius: 16px;
                padding: 12px 14px
            }

            .p-android .kc {
                background: #e9ebf0
            }

            .kc-av {
                width: 48px;
                height: 48px;
                border-radius: 50%;
                background: linear-gradient(145deg,#4f5f8f,#28355b);
                color: #fff;
                display: grid;
                place-items: center;
                font-weight: 700;
                font-size: 18px;
                flex: none
            }

            .kc-b {
                flex: 1;
                min-width: 0
            }

            .kc-b>b {
                display: block;
                font-size: 15px;
                font-weight: 600
            }

            .kc-b>small {
                display: flex;
                align-items: center;
                gap: 5px;
                font-size: 12.5px;
                color: var(--muted);
                margin-top: 3px
            }

            .kc-b>small .i {
                width: 15px;
                height: 15px;
                flex: none
            }

            .kc-meta {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: 4px 10px;
                margin-top: 6px;
                font-size: 12px;
                color: var(--muted)
            }

            .kc-meta>span {
                display: inline-flex;
                align-items: center;
                gap: 4px
            }

            .kc-meta .i {
                width: 13px;
                height: 13px;
                color: #3e559a
            }

            .kst-on {
                background: #dde0eb;
                color: var(--green)
            }

            .kst-busy {
                background: var(--brand-soft);
                color: var(--purple)
            }

            .kst-off {
                background: #eeeff2;
                color: #6e7484
            }

            /* v13: conversation */
            .conv-head {
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 8px 16px 12px;
                flex: none
            }

            .conv-head .av {
                width: 42px;
                height: 42px;
                border-radius: 50%;
                background: var(--bg);
                color: var(--fg);
                font-size: 16px
            }

            .conv-head b {
                display: block;
                font-size: 15px;
                font-weight: 600
            }

            .conv-head small {
                display: flex;
                align-items: center;
                gap: 6px;
                font-size: 12.5px;
                color: var(--green);
                margin-top: 2px
            }

            .conv {
                background: var(--paper)
            }

            .conv-pad {
                display: flex;
                flex-direction: column;
                gap: 10px;
                padding-top: 12px
            }

            .wide .conv-pad {
                max-width: 820px
            }

            .conv-day {
                align-self: center;
                font-size: 12px;
                color: var(--muted);
                background: var(--surface);
                border-radius: 12px;
                padding: 4px 12px;
                margin-bottom: 4px
            }

            .msg {
                max-width: 78%;
                border-radius: 18px;
                padding: 10px 13px;
                position: relative
            }

            .msg p {
                font-size: 14.5px;
                line-height: 1.7
            }

            .msg.them {
                align-self: flex-start;
                background: var(--surface);
                border-end-start-radius: 6px;
                box-shadow: 0 1px 3px rgba(var(--brand-primary-rgb),.07)
            }

            .msg.me {
                align-self: flex-end;
                background: var(--brand-soft);
                border-end-end-radius: 6px
            }

            .msg-t {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                gap: 4px;
                font-size: 11px;
                color: var(--muted);
                margin-top: 4px
            }

            .msg-t .rd {
                width: 15px;
                height: 15px;
                color: var(--green)
            }

            .msg-file {
                display: flex;
                align-items: center;
                gap: 10px;
                background: rgba(var(--brand-primary-rgb),.06);
                border-radius: 12px;
                padding: 8px 10px;
                margin-bottom: 8px
            }

            .msg-file>.i {
                width: 22px;
                height: 22px;
                color: var(--red);
                flex: none
            }

            .msg-file>span {
                flex: 1;
                min-width: 0
            }

            .msg-file b {
                display: block;
                font-size: 13px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap
            }

            .msg-file small {
                display: block;
                font-size: 11.5px;
                color: var(--muted)
            }

            .msg-file>.i:last-child {
                color: var(--purple);
                width: 18px;
                height: 18px
            }

            .conv-bar {
                flex: none;
                background: var(--surface);
                border-top: 1px solid var(--line);
                padding: 10px 12px 14px
            }

            .p-ios .conv-bar {
                padding-bottom: 26px
            }

            .p-android .conv-bar {
                background: #FBF8FE
            }

            .wide .conv-bar {
                padding-bottom: 14px
            }

            .quick-reps {
                display: flex;
                gap: 8px;
                overflow-x: auto;
                scrollbar-width: none;
                padding-bottom: 10px
            }

            .quick-reps::-webkit-scrollbar {
                display: none
            }

            .quick-reps .chip {
                box-shadow: none;
                border: 1px solid var(--line2);
                flex: none
            }

            .conv-in {
                display: flex;
                align-items: center;
                gap: 6px;
                background: var(--paper);
                border-radius: 26px;
                padding: 4px 6px
            }

            .conv-in input {
                flex: 1;
                min-width: 0;
                border: 0;
                background: none;
                outline: none;
                font-size: 15px;
                color: var(--ink);
                height: 40px;
                padding: 0 6px
            }

            .conv-send {
                width: 42px;
                height: 42px;
                border-radius: 50%;
                background: var(--purple);
                color: #fff;
                display: grid;
                place-items: center;
                flex: none
            }

            .conv-send .i {
                width: 19px;
                height: 19px
            }

            /* v14: e-store toggle, incoming requests, dashboard tiles */
            .estore {
                border: 1.5px solid var(--line2)
            }

            .estore.on {
                border-color: #9facd3;
                background: #f2f4fa
            }

            .es-row {
                display: flex;
                align-items: center;
                gap: 12px
            }

            .es-ic {
                width: 44px;
                height: 44px;
                border-radius: 14px;
                background: var(--brand-soft);
                color: var(--purple);
                display: grid;
                place-items: center;
                flex: none
            }

            .es-row>div {
                flex: 1;
                min-width: 0
            }

            .es-row b {
                display: block;
                font-size: 15px
            }

            .es-row small {
                display: block;
                font-size: 12.5px;
                color: var(--muted);
                line-height: 1.55;
                margin-top: 2px
            }

            .es-note {
                display: flex;
                align-items: center;
                gap: 6px;
                margin-top: 10px;
                font-size: 12.5px;
                color: var(--green)
            }

            .es-note.off {
                color: var(--muted)
            }

            .es-note .i {
                width: 15px;
                height: 15px
            }

            .rq-list {
                display: flex;
                flex-direction: column;
                gap: 12px;
                margin-top: 12px
            }

            .wide .rq-list {
                display: grid;
                grid-template-columns: repeat(auto-fill,minmax(420px,1fr))
            }

            .rq {
                background: var(--surface);
                border: 1px solid var(--line);
                border-radius: 18px;
                padding: 14px
            }

            .p-android .rq {
                background: #e9ebf0
            }

            .rq.new {
                border-inline-start:4px solid var(--purple)}

            .rq-h {
                display: flex;
                align-items: flex-start;
                gap: 10px
            }

            .rq-h>div {
                flex: 1;
                min-width: 0
            }

            .rq-h b {
                display: block;
                font-size: 15.5px;
                font-weight: 600;
                line-height: 1.4
            }

            .rq-h small {
                display: block;
                font-size: 12.5px;
                color: var(--muted);
                margin-top: 2px
            }

            .rq-ic {
                width: 38px;
                height: 38px;
                border-radius: 12px;
                background: var(--bg);
                color: var(--fg);
                display: grid;
                place-items: center;
                flex: none
            }

            .rq-note {
                font-size: 13.5px;
                color: #454b5f;
                line-height: 1.7;
                margin-top: 10px
            }

            .rq-meta {
                display: flex;
                flex-wrap: wrap;
                gap: 6px 14px;
                margin-top: 10px;
                font-size: 12.5px;
                color: var(--muted)
            }

            .rq-meta span {
                display: inline-flex;
                align-items: center;
                gap: 5px
            }

            .rq-meta .i {
                width: 15px;
                height: 15px
            }

            .rq-val {
                color: var(--purple);
                font-weight: 700
            }

            .rq-acts {
                display: flex;
                gap: 8px;
                margin-top: 12px
            }

            .rq-acts .btn {
                height: 44px;
                font-size: 14px;
                padding: 0 10px
            }

            .dash-alert {
                display: flex;
                align-items: center;
                gap: 10px;
                background: var(--brand-soft);
                border-radius: 14px;
                padding: 11px 14px;
                font-size: 14px;
                color: var(--purple);
                font-weight: 500;
                margin-bottom: 12px
            }

            .dash-alert .i {
                width: 20px;
                height: 20px;
                flex: none
            }

            .dash {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 10px
            }

            .wide .dash {
                grid-template-columns: repeat(2,1fr)
            }

            @media (min-width: 1250px) {
                .wide .dash {
                    grid-template-columns:repeat(3,1fr)
                }
            }

            .dtile {
                position: relative;
                display: flex;
                align-items: center;
                gap: 10px;
                background: var(--surface);
                border: 1px solid transparent;
                border-radius: 16px;
                padding: 14px;
                text-align: start;
                min-height: 74px
            }

            .p-android .dtile {
                background: #F0EAF6
            }

            .dtile .ri {
                width: 38px;
                height: 38px;
                border-radius: 12px;
                background: var(--bg);
                color: var(--fg);
                display: grid;
                place-items: center;
                flex: none
            }

            .dtile b {
                font-size: 14.5px;
                font-weight: 600;
                line-height: 1.4
            }

            .wide .dtile:hover {
                border-color: var(--line2)
            }

            .dbadge {
                position: absolute;
                top: 8px;
                inset-inline-start: 8px;
                min-width: 22px;
                height: 22px;
                padding: 0 7px;
                border-radius: 11px;
                background: var(--red);
                color: #fff;
                font-size: 12px;
                font-weight: 700;
                font-style: normal;
                display: grid;
                place-items: center
            }

            .quick .qk .bdg {
                margin-inline-start:2px}

            /* v15: solo main entries */
            .tr-h.solo {
                margin-bottom: 1px
            }

            .tr-h.solo.on {
                background: rgba(var(--brand-primary-rgb),.08);
                color: var(--purple);
                font-weight: 600
            }

            .sc.solo .sc-head {
                padding-bottom: 14px
            }

            .co-swwrap {
                display: inline-flex;
                align-items: center;
                gap: 6px
            }

            .co-add {
                width: 34px;
                height: 34px;
                border-radius: 17px;
                background: rgba(255,255,255,.14);
                color: #fff;
                display: grid;
                place-items: center;
                flex: none
            }

            .co-add:hover {
                background: rgba(255,255,255,.24)
            }

            .co-add .i {
                width: 18px;
                height: 18px;
                stroke-width: 2.4
            }

            /* v16: services, notifications, support */
            .svc-about {
                font-size: 14.5px;
                line-height: 1.8;
                color: #2b334d;
                background: var(--paper);
                border-radius: 14px;
                padding: 12px 14px
            }

            .svc-feats {
                margin-top: 12px
            }

            .svc-note {
                display: flex;
                gap: 8px;
                align-items: flex-start;
                background: #e9ecf4;
                border-radius: 12px;
                padding: 10px 12px;
                margin-top: 12px;
                font-size: 12.5px;
                line-height: 1.6;
                color: #2b334d
            }

            .svc-note .i {
                width: 17px;
                height: 17px;
                color: var(--purple);
                flex: none;
                margin-top: 1px
            }

            .ms-body .btn.wfull {
                margin-top: 16px;
                height: 50px
            }

            .dtile.locked {
                opacity: .72;
                background: #eeeff2
            }

            .dtile.locked .ri {
                background: #e0e2e7;
                color: #6e7484
            }

            .dlock {
                position: absolute;
                top: 8px;
                inset-inline-start: 8px;
                font-style: normal;
                font-size: 11px;
                font-weight: 600;
                padding: 2px 8px;
                border-radius: 9px;
                background: #e0e2e7;
                color: var(--brand-muted)
            }

            .lock-b {
                display: inline-grid;
                place-items: center;
                width: 18px;
                height: 18px;
                margin-inline-start:6px;color: var(--muted)
            }

            .lock-b .i {
                width: 14px;
                height: 14px
            }

            .set-card .set-h {
                display: flex;
                align-items: center;
                gap: 8px;
                font-size: 15.5px;
                font-weight: 600;
                color: var(--purple);
                margin-bottom: 4px
            }

            .set-card .set-h .i {
                width: 19px;
                height: 19px
            }

            .set-card .group {
                background: transparent;
                margin-top: 0
            }

            .set-card .row {
                padding-inline:0}

            .set-card .row+.row::before {
                inset-inline-start: 48px
            }

            .nf-list {
                display: flex;
                flex-direction: column;
                gap: 8px;
                margin-top: 12px
            }

            .nf {
                display: flex;
                gap: 12px;
                align-items: flex-start;
                width: 100%;
                text-align: start;
                background: var(--surface);
                border-radius: 16px;
                padding: 13px 14px;
                position: relative
            }

            .p-android .nf {
                background: #e9ebf0
            }

            .nf.new {
                box-shadow: inset 3px 0 0 var(--purple)
            }

            [dir=rtl] .nf.new {
                box-shadow: inset -3px 0 0 var(--purple)
            }

            .nf-ic {
                width: 42px;
                height: 42px;
                border-radius: 13px;
                background: var(--bg);
                color: var(--fg);
                display: grid;
                place-items: center;
                flex: none
            }

            .nf-b {
                flex: 1;
                min-width: 0
            }

            .nf-b b {
                display: block;
                font-size: 15px;
                font-weight: 600;
                line-height: 1.4
            }

            .nf-b small {
                display: block;
                font-size: 13px;
                color: var(--muted);
                line-height: 1.6;
                margin-top: 3px;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden
            }

            .nf-b em {
                display: block;
                font-style: normal;
                font-size: 11.5px;
                color: #8a8f9d;
                margin-top: 6px
            }

            .nf-dot {
                width: 9px;
                height: 9px;
                border-radius: 50%;
                background: var(--purple);
                flex: none;
                margin-top: 6px
            }

            .nf-head {
                display: flex;
                align-items: center;
                gap: 12px;
                margin-top: 4px
            }

            .nf-head b {
                display: block;
                font-size: 17px;
                font-weight: 600;
                line-height: 1.4
            }

            .nf-head small {
                display: block;
                font-size: 12.5px;
                color: var(--muted);
                margin-top: 2px
            }

            .nf-head+.det-p {
                margin-top: 14px
            }

            .sup-grid {
                display: grid;
                grid-template-columns: repeat(3,1fr);
                gap: 10px;
                margin-top: 14px
            }

            #app:not(.wide) .sup-grid {
                grid-template-columns: 1fr
            }

            .sup {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 6px;
                text-align: center;
                background: var(--surface);
                border: 1px solid var(--line2);
                border-radius: 18px;
                padding: 18px 12px;
                text-decoration: none;
                color: var(--ink)
            }

            #app:not(.wide) .sup {
                flex-direction: row;
                justify-content: flex-start;
                text-align: start;
                gap: 12px;
                padding: 14px
            }

            .sup .i {
                width: 28px;
                height: 28px;
                color: var(--purple);
                flex: none
            }

            .sup.wa .i {
                color: var(--green)
            }

            .sup b {
                font-size: 15px
            }

            .sup small {
                font-size: 12.5px;
                color: var(--muted);
                line-height: 1.5
            }

            #app:not(.wide) .sup>div {
                flex: 1
            }

            /* v17: ads and property request */
            .adslot {
                display: flex;
                gap: 12px;
                align-items: center;
                background: var(--surface);
                border: 1px solid var(--line2);
                border-radius: 18px;
                padding: 10px;
                margin-top: 14px;
                position: relative;
                overflow: hidden
            }

            .p-android .adslot {
                background: #e9ebf0
            }

            .ad-tag {
                position: absolute;
                top: 8px;
                inset-inline-start: 8px;
                background: rgba(var(--brand-primary-rgb),.75);
                color: #fff;
                font-size: 10.5px;
                padding: 2px 8px;
                border-radius: 8px;
                z-index: 2
            }

            .ad-media {
                width: 130px;
                height: 90px;
                border-radius: 12px;
                overflow: hidden;
                flex: none;
                background: var(--brand-soft)
            }

            #app:not(.wide) .ad-media {
                width: 110px;
                height: 80px
            }

            .ad-media img, .ad-media video {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block
            }

            .ad-b {
                flex: 1;
                min-width: 0
            }

            .ad-b b {
                display: block;
                font-size: 14.5px;
                font-weight: 600;
                line-height: 1.4
            }

            .ad-b small {
                display: block;
                font-size: 12.5px;
                color: var(--muted);
                line-height: 1.6;
                margin-top: 3px
            }

            .ad-b .btn {
                margin-top: 8px
            }

            .ph video {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block
            }

            .ad-vid {
                position: absolute;
                bottom: 6px;
                inset-inline-start: 6px;
                background: rgba(var(--brand-primary-rgb),.75);
                color: #fff;
                border-radius: 8px;
                padding: 2px 6px;
                display: grid;
                place-items: center
            }

            .ad-vid .i {
                width: 14px;
                height: 14px
            }

            /* v18: developer projects */
            .dv-steps {
                grid-template-columns: repeat(6,1fr)
            }

            #app:not(.wide) .dv-steps {
                grid-template-columns: repeat(3,1fr);
                row-gap: 12px
            }

            .dv-state {
                grid-template-columns: repeat(3,1fr)
            }

            #app:not(.wide) .dv-state {
                grid-template-columns: 1fr
            }

            .ut-list {
                display: flex;
                flex-direction: column;
                gap: 8px;
                margin-top: 12px
            }

            .ut {
                display: flex;
                align-items: center;
                gap: 10px;
                background: #fff;
                border: 1px solid var(--line2);
                border-radius: 14px;
                padding: 10px 12px
            }

            .ut>div {
                flex: 1;
                min-width: 0
            }

            .ut b {
                display: block;
                font-size: 14.5px
            }

            .ut small {
                display: block;
                font-size: 12.5px;
                color: var(--muted);
                margin-top: 2px
            }

            .ut-p {
                display: block;
                font-size: 13px;
                color: var(--purple);
                font-weight: 600;
                margin-top: 3px
            }

            .ut-form {
                background: #fff;
                border: 1px dashed var(--line2);
                border-radius: 16px;
                padding: 12px;
                margin-top: 12px
            }

            .ut-form .field {
                margin-top: 10px
            }

            .ut-form .btn {
                margin-top: 12px
            }

            /* v19: ask fab for companies on android */
            .ask-fab {
                position: absolute;
                bottom: 18px;
                inset-inline-end: 16px;
                z-index: 8;
                display: flex;
                align-items: center;
                gap: 8px;
                height: 52px;
                padding: 0 18px;
                border-radius: 26px;
                background: var(--gold);
                color: var(--purple);
                font-weight: 600;
                font-size: 15px;
                box-shadow: 0 8px 20px rgba(var(--brand-primary-rgb),.28)
            }

            .ask-fab .i {
                width: 20px;
                height: 20px
            }

            .wide .ask-fab {
                display: none
            }

            /* v20: property search, fee note */
            .ps-grid {
                display: grid;
                grid-template-columns: repeat(4,1fr);
                gap: 10px;
                margin-top: 10px
            }

            #app:not(.wide) .ps-grid {
                grid-template-columns: repeat(2,1fr)
            }

            .ps-t {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 7px;
                padding: 14px 8px;
                border: 1.5px solid var(--line2);
                border-radius: 16px;
                background: var(--surface);
                font-size: 13.5px;
                font-weight: 500;
                color: var(--ink);
                text-align: center
            }

            .ps-t .i {
                width: 26px;
                height: 26px;
                color: var(--purple)
            }

            .ps-t.on {
                border-color: var(--purple);
                background: #f2f4fa;
                box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb),.1)
            }

            .fee-note {
                display: flex;
                gap: 8px;
                align-items: flex-start;
                background: #FFF6E4;
                border: 1px solid #EBD9B4;
                border-radius: 12px;
                padding: 10px 12px;
                margin-top: 12px;
                font-size: 13px;
                line-height: 1.6;
                color: #6B5411
            }

            .fee-note .i {
                width: 17px;
                height: 17px;
                color: #9A7B1A;
                flex: none;
                margin-top: 1px
            }

            .svc-cta {
                margin-top: 14px;
                height: 48px
            }

            .svc-cta {
                margin-top: 16px;
                height: 52px;
                font-size: 15px;
                box-shadow: 0 6px 16px rgba(var(--brand-aqua-rgb),.35)
            }

            /* v21: activity picker, brokerages */
            .act-picker {
                margin-top: 12px
            }

            .act-picker .search {
                width: 100%
            }

            .act-sel {
                margin-top: 10px
            }

            .act-sel .tag.on {
                background: var(--purple);
                color: #fff;
                gap: 6px
            }

            .act-sel .tag .i {
                width: 13px;
                height: 13px
            }

            .act-list {
                margin-top: 10px;
                background: var(--surface);
                border: 1px solid var(--line2);
                border-radius: 14px;
                max-height: 280px;
                overflow-y: auto
            }

            .act-row {
                display: flex;
                align-items: center;
                gap: 10px;
                width: 100%;
                text-align: start;
                padding: 12px 14px;
                font-size: 14.5px;
                color: var(--ink);
                border-bottom: 1px solid var(--line)
            }

            .act-row:last-child {
                border-bottom: 0
            }

            .act-row.on {
                background: #f2f4fa;
                font-weight: 600
            }

            .br-area {
                display: flex;
                align-items: center;
                gap: 8px;
                background: #e9ecf4;
                border-radius: 12px;
                padding: 10px 12px;
                font-size: 13.5px;
                color: var(--purple);
                margin-bottom: 10px
            }

            .br-area .i {
                width: 17px;
                height: 17px
            }

            .br-list {
                display: flex;
                flex-direction: column;
                gap: 10px;
                margin-bottom: 12px
            }

            .br {
                display: flex;
                gap: 12px;
                align-items: flex-start;
                background: var(--surface);
                border: 1px solid var(--line);
                border-radius: 16px;
                padding: 12px
            }

            .p-android .br {
                background: #e9ebf0
            }

            .br-av {
                width: 44px;
                height: 44px;
                border-radius: 14px;
                background: linear-gradient(145deg,#1f3b91,var(--brand-primary));
                color: #fff;
                display: grid;
                place-items: center;
                font-weight: 700;
                font-size: 17px;
                flex: none
            }

            .br-b {
                flex: 1;
                min-width: 0
            }

            .br-b b {
                display: block;
                font-size: 15px;
                font-weight: 600
            }

            .br-b small {
                display: flex;
                align-items: center;
                gap: 5px;
                font-size: 12.5px;
                color: var(--muted);
                margin-top: 3px
            }

            .br-b small .i {
                width: 14px;
                height: 14px
            }

            .br-meta {
                display: flex;
                flex-wrap: wrap;
                gap: 4px 12px;
                margin-top: 6px;
                font-size: 12px;
                color: var(--muted)
            }

            .br-meta span {
                display: inline-flex;
                align-items: center;
                gap: 4px
            }

            .br-meta .i {
                width: 13px;
                height: 13px;
                color: #3e559a
            }

            .br-acts {
                display: flex;
                flex-direction: column;
                gap: 6px;
                align-items: stretch;
                flex: none
            }

            #app:not(.wide) .br {
                flex-wrap: wrap
            }

            #app:not(.wide) .br-acts {
                flex-direction: row;
                width: 100%;
                margin-top: 4px
            }

            .br-acts .btn {
                height: 36px;
                font-size: 13px;
                padding: 0 10px
            }

            .br-acts .rnd {
                width: 36px;
                height: 36px
            }

            .wz-sec {
                margin-top: 18px
            }

            .wz-h {
                display: flex;
                align-items: center;
                gap: 8px;
                font-size: 15.5px;
                font-weight: 600;
                color: var(--purple);
                margin-bottom: 10px
            }

            .wz-h .i {
                width: 19px;
                height: 19px
            }
/* Host the shared design in the real app, without prototype device frames. */
.app, .app__content { width: 100%; height: 100%; min-height: 0; }
#app .app .device { width: 100%; height: 100dvh; max-height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
.route-surface { position: absolute; inset: 0; min-width: 0; min-height: 0; }
.route-surface.legacy-surface { overflow: auto; }
.co-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* Company service activation: shared Hawaj forms and subscription cards. */
.service-flow-heading { margin: 28px 0 24px; max-width: 680px; }
.service-flow-heading__eyebrow { color: var(--green); font-size: 12px; font-weight: 600; }
.service-flow-heading h2 { color: var(--ink); font-size: clamp(21px, 3vw, 28px); margin: 8px 0 10px; line-height: 1.5; }
.service-flow-heading p { color: var(--muted); font-size: 13px; line-height: 1.9; }
.dynamic-result .dynamic-result__blocks.service-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 18px; align-items: stretch; }
.dynamic-result .dynamic-card.dynamic-card--plan { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: none; overflow: hidden; backdrop-filter: none; color: var(--ink); }
.dynamic-card.dynamic-card--plan .dynamic-card__body { padding: 26px; display: flex; flex-direction: column; gap: 18px; height: 100%; }
.dynamic-card.dynamic-card--plan .dynamic-card__title { font: 600 18px/1.6 var(--fs); color: var(--ink); }
.service-plan__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding-bottom: 20px; border-bottom: 1px solid var(--line); color: var(--purple); }
.service-plan__price strong { font-size: 38px; line-height: 1.25; font-weight: 600; font-variant-numeric: tabular-nums; }
.service-plan__price > span { font-size: 14px; }
.service-plan__price small { flex-basis: 100%; color: var(--muted); font-size: 12px; }
.dynamic-card.dynamic-card--plan .dynamic-card__description { color: var(--muted); font: 400 13px/1.9 var(--fs); overflow-wrap: anywhere; }
.dynamic-card.dynamic-card--plan .dynamic-card__actions { margin-top: auto; padding-top: 12px; }
.dynamic-card.dynamic-card--plan .dynamic-card__actions button { width: 100%; min-height: 46px; border: 0; border-radius: 12px; background: var(--purple) !important; color: #fff !important; box-shadow: none; font: 500 14px var(--fs); }
.dynamic-card.dynamic-card--plan .dynamic-card__actions button:hover { filter: brightness(1.12); }
.dynamic-card--plan button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (max-width: 600px) {
  .dynamic-card.dynamic-card--plan .dynamic-card__body { padding: 20px; }
  .service-flow-heading { margin-block: 22px; }
}

/* Keep the selected payment widget mounted while hiding the plan cards. */
.dynamic-result .dynamic-result__blocks.service-plans--paying { display: block; }
.service-payment-stage { width: 100%; padding-top: 24px; }
.service-payment-stage .dynamic-card__payment-modal { position: static; width: 100%; max-width: 720px; max-height: none; margin-inline: auto; transform: none; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: none; overflow: hidden; }
.dynamic-card__payment-modal .service-payment-close:hover { background: var(--gold-soft); border-color: var(--purple); }
.dynamic-card__payment-modal .service-payment-close:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }

/* Schema-driven wizard: field definitions and steps are supplied by the API. */
.dynamic-form.dynamic-form--wizard { max-width: none; margin: 0; color: var(--ink); }
.schema-wizard { width: 100%; background: var(--surface); }
.schema-wizard .scroll { overflow: visible; }
.schema-wizard .wz { max-width: 820px; margin-inline: auto; }
.schema-wizard .stepper { position: static; }
.schema-wizard .actbar { position: sticky; bottom: 0; z-index: 2; }
.schema-wizard .actbar .btn { min-height: 46px; }
.schema-wizard .inp { width: 100%; }
.schema-wizard .act-list { max-height: 330px; overflow: auto; }
.schema-wizard .stb:disabled { cursor: default; }
.schema-wizard .hint.err { color: var(--red); }
.schema-wizard .field.err .inp { border-color: var(--red); }
.schema-wizard button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.schema-wizard .file-upload-container .upload-area { border: 1px dashed var(--line2); border-radius: 12px; background: var(--paper); padding: 24px; }
.schema-wizard .file-upload-container .upload-placeholder { color: var(--muted); }
.schema-wizard .rv p { white-space: pre-wrap; overflow-wrap: anywhere; }
.manage-partner-container.manage-partner-container--wizard .manage-partner { width: 100%; padding: 0; }
.manage-partner-container.manage-partner-container--wizard .manage-partner__panel { padding: 0; border: 0; border-radius: 0; background: var(--brand-paper); box-shadow: none; backdrop-filter: none; }
.schema-wizard .flabel:has(+ .checkrow) { display: none; }
.schema-wizard .crumbs .cr + .cr::before { content: '‹'; margin-inline: 8px; color: var(--muted); }
.schema-wizard .nb-title { position: static; flex: 1; min-width: 0; padding-inline: 8px; text-align: start; }
.schema-wizard .nb-act { flex-shrink: 0; }
.schema-wizard .saved { white-space: nowrap; font-size: 11px; }

.dynamic-outcome { display: flex; flex-direction: column; min-height: calc(100dvh - 120px); background: var(--surface); color: var(--ink); }
.dynamic-outcome > .scroll { overflow: visible; }
.dynamic-outcome .row { width: 100%; text-align: start; }
.dynamic-outcome .row .rt { min-width: 0; }
.dynamic-outcome .row .amt { flex-shrink: 0; }
.dynamic-outcome button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Backend-driven company screen bodies; the shared app shell stays unchanged. */

.product-details { width: 100%; background: var(--surface); }
.product-details .scroll { overflow: visible; }
.product-details .details-state { padding: 24px; text-align: center; }
.product-details .action-error { color: var(--red); }
.product-details .group { margin-top: 18px; }
.product-details .det-p { white-space: pre-wrap; }

/* Mixed campaign media uses the same gallery cells as reference photos. */
.ph video { width: 100%; height: 100%; object-fit: cover; display: block; }
.account-panel { display:flex; flex-direction:column; height:100%; min-height:0; width:100%; }
.account-panel .av img { width:100%; height:100%; object-fit:cover; border-radius:inherit; }

.notification-preferences > summary { padding:14px 16px; cursor:pointer; color:var(--p); font-weight:700; }

/* Individual map: same explore structure as hawaj-ui.html; live result states. */
.individual-home{position:absolute;inset:0;overflow:hidden;background:var(--bg,#edeef2)}
.individual-home .ex{pointer-events:none}
.individual-home .ex-sheet{max-height:30px;display:flex;flex-direction:column}
.individual-home .ex.exp .ex-sheet, .individual-home .ex.pv .ex-sheet{max-height:75%;height:auto}
.individual-home .sheet-body{overflow:auto;min-height:0;padding-bottom:20px;overscroll-behavior:contain}
.individual-home .grab{border:0;background:transparent;width:100%;flex-shrink:0}
.individual-home h2{font-size:20px;margin:0}
.individual-home .pv-ph img{width:100%;max-height:180px;object-fit:cover;border-radius:14px}.individual-home .pv-acts{flex-wrap:wrap}.individual-home .pv-sub{white-space:pre-line}
.wide .individual-home .ex-sheet{max-height:calc(100% - 28px);height:calc(100% - 28px)}
.wide .individual-home .ex.exp .ex-sheet, .wide .individual-home .ex.pv .ex-sheet{max-height:calc(100% - 28px);height:calc(100% - 28px)}
.broker-profile{margin:auto;width:min(560px,calc(100% - 32px));max-height:85dvh;overflow:auto;border:0;border-radius:8px;padding:0;background:var(--card,#fff);color:var(--text,#162247)}
.broker-profile::backdrop{background:#0006}
.broker-profile .ms-body>.jp{margin:12px 0;white-space:pre-wrap;overflow-wrap:anywhere}
.broker-profile .btn+.btn{margin-top:8px}
.pc-cbtns{grid-template-columns:repeat(3,minmax(0,1fr))}
.consumer-store{height:100%;min-height:0;display:flex;flex-direction:column;width:100%}
.consumer-store>.scroll{flex:1;min-height:0;overflow:auto}
.purchase-field{display:grid;gap:8px;margin:16px 0;min-width:0}
.purchase-field input, .purchase-field select, .purchase-field textarea, .consumer-store .stepper input{font:inherit;color:inherit;background:var(--surface,#fff);border:1px solid var(--line);border-radius:6px;padding:10px;max-width:100%;box-sizing:border-box}
.consumer-store .stepper{display:flex;align-items:center;gap:8px}
.consumer-store .stepper input{width:80px}
.consumer-store .det-info>.btn{margin-top:12px}
.purchase-cart{max-width:800px;margin:auto}
.purchase-thumb{width:56px;height:56px;object-fit:cover;border-radius:6px;flex:none}
.purchase-cart .ord{margin-bottom:12px}
.consumer-store .jc-top>div{min-width:0;flex:1;overflow-wrap:anywhere}
.consumer-store .nb-title, .consumer-store .spc-b, .consumer-store .det-info{min-width:0;overflow-wrap:anywhere}
.consumer-store .stock-line{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.individual-jobs{width:100%;background:var(--surface)}
.individual-jobs .scroll{overflow:visible}
.individual-jobs .nb-title{position:static;flex:1;min-width:0;text-align:start;padding-inline:8px}
.individual-jobs .nb-act{flex-shrink:0}
.individual-jobs-content{max-width:1000px;margin-inline:auto}
.individual-job-filters .field{margin-top:0}
.individual-job-filters .inp{width:100%}
.individual-job-filters .two{margin:12px 0}
.individual-job-list{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.individual-jobs .jc{margin:0;border-radius:8px}
.individual-jobs .jc-top>div{flex:1;min-width:0;overflow-wrap:anywhere}
.individual-jobs .jbody{padding:0;overflow:visible}
.individual-jobs .jcard{border-radius:0;background:transparent;box-shadow:none}
.individual-jobs .jp{white-space:pre-wrap;overflow-wrap:anywhere}
.individual-jobs .jfoot{position:sticky;bottom:0;z-index:2}
.individual-job-pages{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:20px}
.individual-jobs .jc-title, .individual-jobs .nb-title, .individual-jobs .lt{overflow-wrap:anywhere}
.individual-job-application .jbody{max-width:760px;margin-inline:auto;padding:16px}
.individual-job-application .cv-opt{width:100%;text-align:start}
.individual-job-application .cv-opt>span:last-child{min-width:0;overflow-wrap:anywhere}
.individual-job-application .mh>div{min-width:0;overflow-wrap:anywhere}
.individual-job-application .fact span{min-width:0;overflow-wrap:anywhere}
@media(max-width:600px){.individual-job-application .facts{grid-template-columns:minmax(0,1fr)}}
.cv-opt:focus-within{outline:2px solid var(--navy);outline-offset:2px}

:root { --runure-paper: var(--brand-paper); --runure-ink: var(--brand-ink); --runure-teal: var(--brand-primary); --runure-line: var(--brand-line); --runure-aqua: var(--brand-aqua); }

/* Own iOS safe areas once at the root, including the standalone login screens. */
#app.p-ios > .app { box-sizing: border-box; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
#app.p-ios .app .device { height: 100%; }
.auth-bar { flex-shrink: 0; min-height: 44px; margin-bottom: 12px; }


.app__content { position: relative; }

/* Shared brand treatments: structure and semantic status colors stay consistent. */
.btn.pri, .btn.navy, .profile-submit, .profile-hero {
    background: var(--brand-primary-gradient);
}
.sb-nav button.on {
    background: linear-gradient(110deg, var(--brand-soft), var(--brand-violet-soft));
}
.tb.on .ic, .service > svg { color: var(--brand-blue); }
.service:nth-child(even) > svg { color: var(--brand-violet); }
.wide .auth-side {
    background: linear-gradient(155deg, var(--brand-primary) 0%, #3f46c7 72%, var(--brand-violet) 100%);
}

.ai-report[data-v-928fc820]{margin-top:12px;font-size:13px}.ai-report button[data-v-928fc820]{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 14px;font:inherit;color:var(--brand-ink);background:var(--brand-soft,#f2f5ff);border:1px solid var(--brand-line,#dce3f5);border-radius:12px;cursor:pointer}.ai-report .ai-report-toggle[data-v-928fc820]{background:transparent;border-color:transparent;padding-inline:0;color:var(--muted,#687391)}.ai-report-form[data-v-928fc820]{display:grid;gap:14px;margin:8px 0 0;padding:16px;border:1px solid var(--brand-line,#dce3f5);border-radius:14px;background:white}.ai-report label[data-v-928fc820]{display:grid;gap:8px}.ai-report select[data-v-928fc820],.ai-report textarea[data-v-928fc820]{box-sizing:border-box;max-width:100%;width:100%;padding:12px;border:1px solid var(--brand-line-strong,#c7ccda);border-radius:12px;font:inherit;font-size:16px;background:white;color:var(--brand-ink)}.ai-report p[data-v-928fc820]{margin:0;line-height:1.7}.ai-report-actions[data-v-928fc820]{display:flex;gap:12px;flex-wrap:wrap}.ai-report-actions button[type=submit][data-v-928fc820]{background:var(--brand-ink);color:white}.ai-report-error[data-v-928fc820]{color:#ae3046}.ai-report[data-v-928fc820] :disabled{opacity:.5;cursor:default}.ai-report[data-v-928fc820] :focus-visible{outline:3px solid var(--brand-focus);outline-offset:3px}

.assistant-backdrop[data-v-10a1f52f]{position:fixed;inset:0;z-index:10000;background:#09122d80;display:flex;align-items:center;justify-content:center;padding:16px}.voice-dialog[data-v-10a1f52f]{width:min(100%,480px);max-height:85dvh;overflow:auto;background:#fff;border-radius:24px;padding:24px;box-sizing:border-box;color:var(--brand-ink);font:16px/1.7 inherit}.voice-dialog header[data-v-10a1f52f]{display:flex;justify-content:space-between;align-items:center}.voice-dialog h2[data-v-10a1f52f]{font-size:22px}.voice-dialog button[data-v-10a1f52f]{border:1px solid var(--brand-line-strong);background:var(--brand-soft);border-radius:14px;padding:10px 16px;min-height:44px;font:inherit;color:inherit}.voice-dialog textarea[data-v-10a1f52f]{width:100%;box-sizing:border-box;border:1px solid var(--brand-line-strong);border-radius:12px;padding:12px;font:inherit;font-size:16px}.voice-actions[data-v-10a1f52f]{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.voice-history[data-v-10a1f52f]{max-height:220px;overflow:auto}.voice-history .user[data-v-10a1f52f]{color:#535b73}.voice-dialog button[data-v-10a1f52f]:disabled{opacity:.5}

.bell[data-v-297c3860]{position:relative;border:0;border-radius:50%;min-width:44px;min-height:44px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand-ink);cursor:pointer}
.bell svg[data-v-297c3860]{width:24px;height:24px}
.badge[data-v-297c3860]{position:absolute;top:-2px;inset-inline-end:-3px;border-radius:12px;background:#b9354c;color:white;padding:2px 5px;font-size:11px}
/* Native dialogs enter the top layer and do not inherit App's safe-area padding.
   Explicit insets/margins also override the legacy global margin reset. */
.notification-dialog[data-v-297c3860]{
 --notice-top:max(16px,env(safe-area-inset-top,0px));
 --notice-bottom:max(12px,env(safe-area-inset-bottom,0px));
 --notice-left:max(12px,env(safe-area-inset-left,0px));
 --notice-right:max(12px,env(safe-area-inset-right,0px));
 position:fixed;inset:var(--notice-top) var(--notice-right) var(--notice-bottom) var(--notice-left);
 margin:auto;width:min(480px,calc(100vw - var(--notice-left) - var(--notice-right)));height:fit-content;
 max-width:none;max-height:calc(100vh - var(--notice-top) - var(--notice-bottom));
 max-height:calc(100dvh - var(--notice-top) - var(--notice-bottom));
 padding:0;border:1px solid var(--brand-line);border-radius:24px;box-sizing:border-box;overflow:hidden;
 background:#fff;color:var(--brand-ink);font:inherit;box-shadow:0 20px 60px #18264c26;
}
.notification-dialog[open][data-v-297c3860]{display:flex;flex-direction:column}
.notification-dialog[data-v-297c3860]::backdrop{background:#101c4266}
.notification-header[data-v-297c3860]{display:flex;flex:none;justify-content:space-between;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--brand-line)}
.notification-heading[data-v-297c3860]{display:flex;align-items:center;gap:10px;min-width:0}
.notification-heading-icon[data-v-297c3860]{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:12px;background:var(--brand-soft);color:var(--brand-primary)}
.notification-heading-icon svg[data-v-297c3860]{width:22px;height:22px}
.notification-dialog h2[data-v-297c3860]{margin:0;font-size:19px;font-weight:600;line-height:1.5;overflow-wrap:anywhere}
.notification-dialog h2[data-v-297c3860]:focus{outline:none}
.unread-count[data-v-297c3860]{font-size:12px;background:var(--brand-violet-soft);color:var(--brand-violet);border-radius:12px;padding:3px 8px}
.close[data-v-297c3860]{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:1px solid var(--brand-line);border-radius:13px;background:var(--brand-paper);color:var(--brand-ink);cursor:pointer}
.close svg[data-v-297c3860]{width:20px;height:20px}
.notification-body[data-v-297c3860]{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:18px 20px 22px;-webkit-overflow-scrolling:touch}
.push-action[data-v-297c3860]{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--brand-line-strong);border-radius:14px;background:var(--brand-soft);color:var(--brand-primary);font:inherit;font-size:14px;font-weight:500;line-height:1.6;text-align:start;cursor:pointer}
.push-action svg[data-v-297c3860]{width:21px;height:21px;flex:none}
.push-action[data-v-297c3860]:disabled{cursor:default;opacity:.65}.push-action.active[data-v-297c3860]{opacity:1}
.notification-empty[data-v-297c3860]{display:flex;flex-direction:column;align-items:center;gap:14px;padding:30px 12px 18px;text-align:center;color:var(--brand-muted);font-size:14px;line-height:1.8}
.notification-empty>span[data-v-297c3860]{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:var(--brand-paper);color:var(--brand-violet)}
.notification-empty svg[data-v-297c3860]{width:28px;height:28px}.notification-empty p[data-v-297c3860]{margin:0}
.notification-list[data-v-297c3860]{display:grid;gap:10px;margin-top:16px}
.item[data-v-297c3860]{width:100%;display:grid;gap:8px;text-align:start;border:1px solid var(--brand-line);border-radius:14px;padding:15px;background:white;color:inherit;font:inherit;font-size:14px;line-height:1.7;overflow-wrap:anywhere;cursor:pointer}
.item strong[data-v-297c3860]{font-weight:500}.item.unread[data-v-297c3860]{background:var(--brand-success-soft);border-color:var(--brand-success-line)}
.item small[data-v-297c3860],.help[data-v-297c3860]{font-size:12px;color:var(--brand-muted);line-height:1.8}.help[data-v-297c3860]{margin:0 0 14px}
.notification-error[data-v-297c3860]{margin:14px 0 0;padding:12px;border-radius:12px;background:#fff1f0;color:#b3261e;font-size:13px;line-height:1.8}
.toast[data-v-297c3860]{position:fixed;z-index:100;inset-inline-end:max(16px,env(safe-area-inset-right,0px));max-width:min(420px,calc(100vw - 32px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)));display:flex;align-items:center;gap:12px;background:var(--brand-ink);color:white;border-radius:16px;padding:14px;box-shadow:0 6px 22px #0003}
.toast button[data-v-297c3860]{border:0;background:none;color:inherit;font:inherit;min-height:44px;text-align:start;cursor:pointer}
.bell[data-v-297c3860]:focus-visible,.item[data-v-297c3860]:focus-visible,.push-action[data-v-297c3860]:focus-visible,.close[data-v-297c3860]:focus-visible{outline:2px solid var(--brand-focus);outline-offset:2px}
@media(max-width:600px){
.notification-dialog[data-v-297c3860]{margin:auto auto 0;max-height:min(80dvh,calc(100dvh - var(--notice-top) - var(--notice-bottom)));border-radius:24px}
.notification-header[data-v-297c3860]{padding:16px}.notification-body[data-v-297c3860]{padding:16px 16px 20px}
}

.tb[data-v-b5a96d05]{min-width:0}.tb .ic[data-v-b5a96d05]{position:relative}.tb .lb[data-v-b5a96d05]{font-size:11px}.nav-badge[data-v-b5a96d05]{background:#b9354c;color:white;border-radius:12px;padding:2px 5px;font-size:10px;line-height:1.2;min-width:16px;text-align:center}.tb .nav-badge[data-v-b5a96d05]{position:absolute;top:-5px;inset-inline-end:-10px}.sb-nav .nav-badge[data-v-b5a96d05]{margin-inline-start:auto}.sb-nav button[data-v-b5a96d05]{min-height:44px}