/* -----------------------------------------------------------------------------
   Base theme and shared elements
   ----------------------------------------------------------------------------- */

* { box-sizing: border-box; }
:root {
    --bg:#0c0c0f; --panel:#151519; --panel-2:#1b1b20; --text:#f7f7f8;
    --muted:#a5a5ad; --border:#2a2a31; --accent:#f3b33d; --danger:#ff6b6b;
}
html { scroll-behavior:smooth; }
body { margin:0; font-family:Inter,"Segoe UI",Tahoma,sans-serif; background:var(--bg); color:var(--text); }
body.modal-open { overflow:hidden; }
button,select,input { font:inherit; }
button { cursor:pointer; }
a { color:inherit; }
/* -----------------------------------------------------------------------------
   Header
   ----------------------------------------------------------------------------- */

.topbar { border-bottom:1px solid var(--border); background:rgba(12,12,15,.97); position:sticky; top:0; z-index:1000; }
.topbar-inner { width:min(1180px,calc(100% - 32px)); margin:auto; padding:18px 0; display:flex; justify-content:space-between; align-items:center; }
.topbar h1 { margin:0; font-size:24px; }
.topbar p { margin:4px 0 0; color:var(--muted); font-size:14px; }
.version-badge { border:1px solid var(--border); border-radius:999px; padding:6px 10px; color:var(--accent); font-weight:800; font-size:12px; }
.container { width:min(1180px,calc(100% - 32px)); margin:auto; padding:32px 0 60px; }
/* -----------------------------------------------------------------------------
   Search panel
   ----------------------------------------------------------------------------- */

.hero { padding:28px; border:1px solid var(--border); background:linear-gradient(145deg,#17171c,#101013); border-radius:18px; }
.eyebrow { color:var(--accent); font-weight:800; font-size:12px; letter-spacing:1.6px; }
.hero h2 { font-size:clamp(30px,5vw,58px); margin:8px 0 10px; }
.hero-copy { color:var(--muted); margin:0; }
.location-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.primary-btn,.secondary-btn,.filter-toggle,.filter-chip,.card-button,.primary-link { border-radius:12px; padding:12px 16px; }
.primary-btn,.primary-link { border:0; background:var(--accent); color:#17120a; font-weight:800; }
.primary-link { display:inline-flex; align-items:center; text-decoration:none; }
.secondary-btn,.filter-toggle,.filter-chip,.card-button { border:1px solid var(--border); background:var(--panel-2); color:var(--text); font-weight:700; }
button:disabled { opacity:.55; cursor:wait; }
select,input { border:1px solid var(--border); background:var(--panel-2); color:var(--text); border-radius:12px; padding:12px 14px; outline:none; }
input:focus,select:focus { border-color:#5b5b66; }
.area-search-box { margin-top:22px; padding:17px; border:1px solid var(--border); border-radius:14px; background:rgba(255,255,255,.02); }
.area-search-box label { display:block; font-weight:800; }
.field-help { margin:4px 0 12px; color:var(--muted); font-size:13px; }
.autocomplete { position:relative; }
.autocomplete-control { display:flex; align-items:center; border:1px solid var(--border); border-radius:13px; background:var(--panel-2); overflow:hidden; }
.search-icon { padding-left:14px; opacity:.7; }
.autocomplete-control input { flex:1; min-width:0; border:0; border-radius:0; background:transparent; }
.inline-search-btn { align-self:stretch; border:0; border-left:1px solid var(--border); background:transparent; color:var(--text); font-weight:800; padding:0 18px; }
.inline-search-btn:hover { background:rgba(255,255,255,.04); }
.suggestions { position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:2200; max-height:360px; overflow-y:auto; border:1px solid var(--border); border-radius:14px; background:#151519; box-shadow:0 18px 50px rgba(0,0,0,.42); }
.suggestion-section-title { padding:11px 14px 7px; color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.8px; }
.suggestion-item,.suggestion-search-action { width:100%; border:0; border-top:1px solid var(--border); background:transparent; color:var(--text); text-align:left; }
.suggestion-item { display:flex; gap:11px; padding:12px 14px; }
.suggestion-item:hover,.suggestion-item.highlighted,.suggestion-search-action:hover { background:#202026; }
.suggestion-copy { min-width:0; }
.suggestion-copy strong,.suggestion-copy small { display:block; }
.suggestion-copy small { margin-top:3px; color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.suggestion-search-action { padding:13px 14px; color:var(--accent); font-weight:800; }
.suggestion-status { padding:13px 14px; color:var(--muted); font-size:13px; }
.status { margin:16px 0 0; color:var(--muted); font-size:14px; }
/* -----------------------------------------------------------------------------
   Filters
   ----------------------------------------------------------------------------- */

.filter-panel { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; align-items:center; margin-top:18px; padding:14px; border:1px solid var(--border); border-radius:14px; background:var(--panel); }
.filter-group,.filter-actions,.card-actions,.modal-actions { display:flex; flex-wrap:wrap; gap:10px; }
.filter-chip.active,.filter-toggle.active { border-color:var(--accent); color:var(--accent); }
.map-section { margin-top:18px; }
.map-shell { position:relative; height:430px; border-radius:18px; overflow:hidden; border:1px solid var(--border); background:#111318; }
#map { width:100%; height:100%; background:#111318; }
.map-loading { position:absolute; inset:0; z-index:900; display:flex; align-items:center; justify-content:center; gap:12px; background:rgba(12,12,15,.35); color:white; pointer-events:none; }
.spinner,.mini-spinner { border-radius:50%; border-style:solid; border-color:rgba(255,255,255,.25); border-top-color:var(--accent); animation:spin .8s linear infinite; }
.spinner { width:28px; height:28px; border-width:3px; }
.mini-spinner { width:16px; height:16px; border-width:2px; }
@keyframes spin { to { transform:rotate(360deg); } }
.results-head { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-top:34px; margin-bottom:16px; }
.results-head h2 { margin:0; }
.results-head p { margin:4px 0 0; color:var(--muted); }
#shopSearchInput { width:min(320px,100%); }
/* -----------------------------------------------------------------------------
   Result cards
   ----------------------------------------------------------------------------- */

.shop-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.shop-card { background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:18px; min-height:190px; }
.shop-card:hover { border-color:#4a4a53; }
.shop-card h3 { margin:0 0 8px; font-size:18px; }
.shop-card p { color:var(--muted); margin:7px 0; font-size:14px; line-height:1.45; }
.card-top { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; }
.badge,.distance-chip { display:inline-block; border:1px solid var(--border); background:var(--panel-2); border-radius:999px; padding:5px 9px; font-size:12px; }
.badge { color:var(--accent); font-weight:700; }
.distance-chip { color:var(--muted); }
.shop-info { display:flex; align-items:flex-start; gap:8px; }
.shop-info strong { color:var(--text); }
.limited-data { padding:10px 12px; border-radius:10px; background:rgba(255,255,255,.035); }
.card-actions { align-items:center; margin-top:14px; }
.detail-link { color:var(--accent); text-decoration:none; font-weight:700; font-size:14px; }
.scroll-sentinel { min-height:76px; display:flex; align-items:center; justify-content:center; gap:9px; color:var(--muted); font-size:13px; }
.empty-state { grid-column:1/-1; text-align:center; border:1px dashed var(--border); border-radius:16px; padding:60px 20px; color:var(--muted); }
.empty-state h3 { color:var(--text); }
.empty-icon { font-size:42px; }
.error-state .empty-icon { color:var(--danger); font-weight:900; }
.skeleton-card { pointer-events:none; }
.skeleton { background:linear-gradient(90deg,#1c1c21 25%,#292930 50%,#1c1c21 75%); background-size:200% 100%; animation:skeleton 1.25s infinite; border-radius:8px; }
.skeleton-badge { width:64px; height:24px; }
.skeleton-title { width:68%; height:22px; margin-top:18px; }
.skeleton-line { width:100%; height:14px; margin-top:14px; }
.skeleton-line.short { width:55%; }
.skeleton-actions { width:78%; height:34px; margin-top:22px; }
@keyframes skeleton { from { background-position:200% 0; } to { background-position:-200% 0; } }
/* -----------------------------------------------------------------------------
   Shop detail dialog
   ----------------------------------------------------------------------------- */

.modal { position:fixed; inset:0; z-index:5000; display:grid; place-items:center; padding:20px; }
.modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.72); backdrop-filter:blur(5px); }
.modal-card { position:relative; z-index:1; width:min(640px,100%); max-height:min(760px,88vh); overflow-y:auto; border:1px solid var(--border); border-radius:20px; background:#151519; box-shadow:0 28px 90px rgba(0,0,0,.55); }
.modal-content { padding:28px; }
.modal-content h2 { margin:12px 0 5px; font-size:28px; }
.modal-distance { color:var(--muted); margin-top:0; }
.modal-info { margin:22px 0; padding:15px; border:1px solid var(--border); border-radius:14px; background:rgba(255,255,255,.025); }
.modal-close { position:sticky; float:right; top:12px; right:12px; z-index:2; width:38px; height:38px; border:1px solid var(--border); border-radius:50%; background:#202026; color:white; font-size:24px; line-height:1; }
.toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%,20px); opacity:0; pointer-events:none; z-index:6000; background:#202026; border:1px solid var(--border); border-radius:12px; padding:12px 16px; transition:.2s ease; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.hidden { display:none !important; }
.leaflet-popup-content-wrapper,.leaflet-popup-tip { background:#19191e; color:white; }
@media (max-width:900px) { .shop-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px) {
    .container { width:min(100% - 20px,1180px); }
    .hero { padding:20px; }
    .shop-grid { grid-template-columns:1fr; }
    .results-head,.filter-panel { align-items:stretch; flex-direction:column; }
    #shopSearchInput { width:100%; }
    .map-shell { height:350px; }
    .autocomplete-control { flex-wrap:wrap; }
    .inline-search-btn { width:100%; border-left:0; border-top:1px solid var(--border); padding:11px; }
    .modal { padding:10px; align-items:end; }
    .modal-card { width:100%; max-height:88vh; border-radius:20px 20px 0 0; }
    .modal-content { padding:22px; }
    .modal-actions { flex-direction:column; }
    .modal-actions > * { width:100%; justify-content:center; text-align:center; }
}


/* =========================================================
   NearDrink V9.2 - Responsive discovery UX
   Desktop: sticky map + scrollable results
   Mobile: list/map switch + map bottom sheet
   ========================================================= */

.discovery-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.92fr);
    gap: 18px;
    align-items: start;
    margin-top: 18px;
}

.map-section {
    margin-top: 0;
}

.map-panel {
    min-width: 0;
}

.map-sticky {
    position: sticky;
    top: 96px;
}

.map-shell {
    height: calc(100vh - 124px);
    min-height: 520px;
    max-height: 760px;
}

.results-panel {
    min-width: 0;
}

.results-panel .results-head {
    margin-top: 0;
}

.results-panel .shop-grid {
    grid-template-columns: 1fr;
}

.results-panel #shopSearchInput {
    width: min(260px, 100%);
}

.map-popup-card {
    min-width: 190px;
    color: #f7f7f8;
}

.map-popup-card > strong {
    display: block;
    font-size: 14px;
    margin-bottom: 4px;
}

.map-popup-meta {
    color: #a5a5ad;
    font-size: 12px;
    margin-bottom: 10px;
}

.map-popup-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.map-popup-actions a,
.map-popup-actions button {
    border: 1px solid #34343c;
    background: #202026;
    color: #f3b33d;
    border-radius: 8px;
    padding: 7px 9px;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
}

.map-popup-actions button {
    color: #f7f7f8;
}

.secondary-link {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border);
    background: var(--panel-2);
    color: var(--text);
    border-radius: 12px;
    padding: 12px 16px;
    text-decoration: none;
    font-weight: 700;
}

.mobile-view-nav,
.mobile-map-shop {
    display: none;
}

@media (min-width: 769px) and (max-width: 1080px) {
    .discovery-layout {
        grid-template-columns: minmax(0, 1fr) minmax(360px, .78fr);
    }

    .map-shell {
        min-height: 480px;
    }
}

@media (max-width: 768px) {
    body {
        padding-bottom: 74px;
    }

    .container {
        width: min(100% - 16px, 1180px);
        padding-top: 12px;
    }

    .topbar-inner {
        width: min(100% - 20px, 1180px);
        padding: 12px 0;
    }

    .topbar p,
    .version-badge {
        display: none;
    }

    .hero {
        padding: 16px;
        border-radius: 14px;
    }

    .hero h2 {
        font-size: 30px;
    }

    .field-help {
        display: none;
    }

    .area-search-box {
        padding: 12px;
        margin-top: 16px;
    }

    .filter-panel {
        position: sticky;
        top: 54px;
        z-index: 850;
        display: block;
        overflow: hidden;
        padding: 9px;
        margin-top: 10px;
        background: rgba(21, 21, 25, .96);
        backdrop-filter: blur(10px);
    }

    .filter-group,
    .filter-actions {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .filter-group::-webkit-scrollbar,
    .filter-actions::-webkit-scrollbar {
        display: none;
    }

    .filter-actions {
        margin-top: 8px;
    }

    .filter-chip,
    .filter-toggle {
        flex: 0 0 auto;
        padding: 9px 12px;
        white-space: nowrap;
    }

    .discovery-layout {
        display: block;
        margin-top: 10px;
    }

    .map-sticky {
        position: static;
    }

    .map-panel,
    .results-panel {
        width: 100%;
    }

    .map-panel {
        display: none;
    }

    .results-panel {
        display: block;
    }

    body.mobile-map-view .map-panel {
        display: block;
    }

    body.mobile-map-view .results-panel {
        display: none;
    }

    body.mobile-list-view .map-panel {
        display: none;
    }

    body.mobile-list-view .results-panel {
        display: block;
    }

    .map-shell {
        height: calc(100dvh - 142px);
        min-height: 520px;
        max-height: none;
        border-radius: 14px;
    }

    .results-panel .results-head {
        position: sticky;
        top: 132px;
        z-index: 700;
        align-items: stretch;
        padding: 10px 0;
        margin-bottom: 4px;
        background: var(--bg);
    }

    .results-panel .shop-grid {
        grid-template-columns: 1fr;
    }

    .results-panel #shopSearchInput {
        width: 100%;
    }

    .mobile-view-nav {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: 10px;
        z-index: 4500;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        padding: 6px;
        border: 1px solid var(--border);
        border-radius: 16px;
        background: rgba(21, 21, 25, .96);
        box-shadow: 0 12px 45px rgba(0, 0, 0, .45);
        backdrop-filter: blur(12px);
    }

    .mobile-view-btn {
        border: 0;
        border-radius: 11px;
        background: transparent;
        color: var(--muted);
        padding: 11px 12px;
        font-weight: 800;
    }

    .mobile-view-btn.active {
        background: var(--accent);
        color: #17120a;
    }

    .mobile-map-shop {
        position: absolute;
        left: 10px;
        right: 10px;
        bottom: 10px;
        z-index: 1100;
        display: block;
        padding: 14px;
        border: 1px solid var(--border);
        border-radius: 16px;
        background: rgba(21, 21, 25, .97);
        box-shadow: 0 18px 60px rgba(0, 0, 0, .48);
        backdrop-filter: blur(12px);
    }

    .mobile-map-shop.hidden {
        display: none;
    }

    .mobile-map-shop-main {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
    }

    .mobile-map-shop h3 {
        margin: 8px 0 4px;
        font-size: 18px;
    }

    .mobile-map-shop p {
        margin: 0;
        color: var(--muted);
        font-size: 12px;
    }

    .mobile-sheet-close {
        flex: 0 0 auto;
        width: 34px;
        height: 34px;
        border: 1px solid var(--border);
        border-radius: 50%;
        background: #202026;
        color: white;
        font-size: 20px;
    }

    .mobile-map-shop-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 12px;
    }

    .mobile-map-shop-actions .secondary-btn {
        grid-column: 1 / -1;
    }

    .mobile-map-shop-actions > * {
        justify-content: center;
        text-align: center;
        padding: 10px;
    }

    .leaflet-popup-content {
        margin: 10px 12px;
    }

    .map-popup-actions {
        gap: 5px;
    }

    .map-popup-actions a,
    .map-popup-actions button {
        padding: 6px 7px;
        font-size: 10px;
    }
}


/* Back to top */
.back-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 4400;

    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    border: 1px solid var(--border);
    border-radius: 50%;
    background: rgba(27, 27, 32, 0.96);
    color: var(--accent);

    font-size: 24px;
    font-weight: 900;
    line-height: 1;

    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.38);
    backdrop-filter: blur(10px);

    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(0.92);
    pointer-events: none;

    transition:
        opacity 0.18s ease,
        transform 0.18s ease,
        visibility 0.18s ease,
        background 0.18s ease;
}

.back-to-top:hover {
    background: var(--accent);
    color: #17120a;
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

@media (max-width: 768px) {
    .back-to-top {
        right: 16px;
        bottom: 86px;
        width: 44px;
        height: 44px;
    }

    body.mobile-map-view .back-to-top {
        display: none;
    }
}


/* -----------------------------------------------------------------------------
   V9.6 desktop sticky map fix

   The map column must have the same available height as the result column.
   Without this, the sticky element reaches the bottom of its short parent and
   stops following the viewport while the result list continues scrolling.
   ----------------------------------------------------------------------------- */

@media (min-width: 769px) {
    .discovery-layout {
        align-items: stretch;
    }

    .map-panel {
        align-self: stretch;
        position: relative;
        min-height: 100%;
    }

    .map-sticky {
        position: sticky;
        top: 96px;
        align-self: start;
    }

    .results-panel {
        min-height: 100%;
    }
}


/* -----------------------------------------------------------------------------
   V9.7 map markers and mobile map identification
   ----------------------------------------------------------------------------- */

.shop-card {
    position: relative;
}

.shop-list-number {
    position: absolute;
    top: 14px;
    right: 14px;
    min-width: 28px;
    height: 28px;
    padding: 0 7px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #202026;
    color: var(--accent);
    font-size: 12px;
    font-weight: 900;
}

.shop-card .card-top {
    padding-right: 38px;
}

.shop-map-marker-wrapper {
    background: transparent;
    border: 0;
}

.shop-map-marker {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 2px solid #f3b33d;
    border-radius: 50% 50% 50% 8px;
    background: #17171c;
    color: #f3b33d;
    font-size: 12px;
    font-weight: 900;
    transform: rotate(-45deg);
    box-shadow: 0 5px 14px rgba(0, 0, 0, .42);
}

.shop-map-marker::before {
    content: "";
}

.shop-map-marker {
    line-height: 1;
}

.shop-map-marker-wrapper .shop-map-marker {
    text-indent: 0;
}

.shop-map-marker-wrapper .shop-map-marker {
    display: grid;
}

.shop-map-marker-wrapper .shop-map-marker::after {
    content: attr(data-number);
}

.shop-map-marker.selected {
    width: 40px;
    height: 40px;
    background: var(--accent);
    color: #17120a;
    border-color: #fff4d6;
}

.shop-map-marker-wrapper .shop-map-marker {
    transform: rotate(-45deg);
}

.shop-map-marker-wrapper .shop-map-marker {
    font-variant-numeric: tabular-nums;
}

.shop-map-marker-wrapper .shop-map-marker {
    overflow: hidden;
}

/* Counter-rotate the marker number so it stays readable. */
.shop-map-marker-wrapper .shop-map-marker {
    writing-mode: horizontal-tb;
}

.selected-shop-label {
    border: 1px solid var(--accent) !important;
    border-radius: 8px !important;
    background: #17171c !important;
    color: #f7f7f8 !important;
    box-shadow: 0 7px 22px rgba(0, 0, 0, .4) !important;
    font-weight: 800;
}

.selected-shop-label::before {
    border-top-color: var(--accent) !important;
}

.mobile-map-shop-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.shop-index-chip {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    border: 1px solid var(--accent);
    border-radius: 999px;
    padding: 4px 9px;
    color: var(--accent);
    font-size: 11px;
    font-weight: 900;
}

.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
    background: rgba(243, 179, 61, .28) !important;
}

.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
    background: #f3b33d !important;
    color: #17120a !important;
    font-weight: 900 !important;
}

@media (max-width: 768px) {
    .leaflet-tooltip:not(.selected-shop-label) {
        display: none;
    }

    .mobile-map-shop {
        bottom: 12px;
    }

    .mobile-map-shop h3 {
        padding-right: 6px;
    }
}

.shop-map-marker > span {
    display: block;
    transform: rotate(45deg);
}


/* -----------------------------------------------------------------------------
   V10 account and authentication interface
   ----------------------------------------------------------------------------- */

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-auth-btn,
.account-chip {
    min-height: 38px;
    border: 1px solid var(--border);
    border-radius: 11px;
    padding: 8px 13px;
    background: var(--panel-2);
    color: var(--text);
    font-weight: 800;
}

.header-auth-btn:hover,
.account-chip:hover {
    border-color: var(--accent);
}

.account-chip {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--accent);
}

.auth-modal {
    position: fixed;
    inset: 0;
    z-index: 5200;
    display: grid;
    place-items: center;
    padding: 20px;
}

.auth-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .74);
    backdrop-filter: blur(6px);
}

.auth-card {
    position: relative;
    z-index: 1;
    width: min(460px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: #151519;
    box-shadow: 0 28px 90px rgba(0, 0, 0, .55);
}

.account-card {
    width: min(620px, 100%);
}

.auth-card-content {
    padding: 28px;
}

.auth-card-content h2 {
    margin: 5px 0 18px;
    font-size: 28px;
}

.auth-kicker {
    margin: 0;
    color: var(--accent);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.auth-close {
    position: sticky;
    float: right;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 38px;
    height: 38px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: #202026;
    color: var(--text);
    font-size: 24px;
    line-height: 1;
}

.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 18px;
    padding: 5px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #101013;
}

.auth-tab {
    border: 0;
    border-radius: 9px;
    padding: 10px 12px;
    background: transparent;
    color: var(--muted);
    font-weight: 800;
}

.auth-tab.active {
    background: var(--panel-2);
    color: var(--accent);
}

.auth-form {
    display: grid;
    gap: 14px;
}

.auth-form label {
    display: grid;
    gap: 7px;
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
}

.auth-form input {
    width: 100%;
}

.auth-help {
    margin: -4px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.auth-message {
    min-height: 20px;
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.auth-message.error {
    color: #ff8b8b;
}

.auth-message.success {
    color: #8dd8a3;
}

.auth-submit {
    width: 100%;
    justify-content: center;
    margin-top: 2px;
}

.account-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.account-summary > div {
    min-width: 0;
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255, 255, 255, .025);
}

.account-summary strong,
.account-label {
    display: block;
}

.account-label {
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 11px;
}

.account-summary strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.profile-form {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.favorite-account-section {
    margin-top: 20px;
}

.account-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.account-section-head h3 {
    margin: 0;
}

.account-section-head span {
    color: var(--muted);
    font-size: 12px;
}

.account-favorite-list {
    display: grid;
    gap: 8px;
    max-height: 290px;
    overflow-y: auto;
}

.account-favorite-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: rgba(255, 255, 255, .02);
}

.account-favorite-item > div {
    min-width: 0;
}

.account-favorite-item strong,
.account-favorite-item small {
    display: block;
}

.account-favorite-item strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-favorite-item small {
    margin-top: 3px;
    color: var(--muted);
}

.account-favorite-remove {
    flex: 0 0 auto;
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 7px 10px;
    background: var(--panel-2);
    color: var(--text);
}

.account-empty {
    margin: 0;
    padding: 18px;
    border: 1px dashed var(--border);
    border-radius: 11px;
    color: var(--muted);
    text-align: center;
}

.logout-btn {
    width: 100%;
    margin-top: 22px;
    border: 1px solid #613737;
    border-radius: 11px;
    padding: 11px 14px;
    background: rgba(104, 38, 38, .22);
    color: #ffaaaa;
    font-weight: 800;
}

.favorite-btn.saved,
#modalFavoriteBtn.saved {
    border-color: var(--accent);
    color: var(--accent);
}

@media (max-width: 768px) {
    .header-actions {
        gap: 6px;
    }

    .version-badge {
        display: none;
    }

    .header-auth-btn,
    .account-chip {
        min-height: 34px;
        padding: 7px 10px;
        font-size: 12px;
    }

    .auth-modal {
        padding: 10px;
        align-items: end;
    }

    .auth-card {
        width: 100%;
        max-height: 90vh;
        border-radius: 20px 20px 0 0;
    }

    .auth-card-content {
        padding: 22px;
    }

    .account-summary {
        grid-template-columns: 1fr;
    }
}

/* -----------------------------------------------------------------------------
   V11 account experience
   ----------------------------------------------------------------------------- */

.header-actions .version-badge {
    display: none;
}

.auth-card {
    border-color: #2b2b33;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .025),
            rgba(255, 255, 255, 0)
        ),
        #141418;
}

.auth-card-content {
    padding: 30px;
}

.auth-heading {
    margin-bottom: 20px;
}

.auth-heading h2 {
    margin-bottom: 6px;
}

.auth-subtitle {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}

.auth-form input {
    min-height: 46px;
    border: 1px solid #393941;
    border-radius: 12px;
    background: #1b1b20;
    color: var(--text);
    padding: 10px 13px;
    outline: none;
    transition:
        border-color .16s ease,
        box-shadow .16s ease,
        background .16s ease;
}

.auth-form input:focus {
    border-color: var(--accent);
    background: #1d1d22;
    box-shadow: 0 0 0 3px rgba(243, 179, 61, .10);
}

.password-field {
    position: relative;
}

.password-field input {
    padding-right: 72px;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    min-width: 54px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--accent);
    padding: 7px 8px;
    font-size: 12px;
    font-weight: 800;
}

.password-toggle:hover {
    background: rgba(243, 179, 61, .08);
}

.auth-inline-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.auth-inline-row .auth-message {
    flex: 1;
}

.text-link-btn {
    border: 0;
    background: transparent;
    color: var(--accent);
    padding: 0;
    font-size: 12px;
    font-weight: 800;
}

.text-link-btn:hover {
    text-decoration: underline;
}

.auth-back-link {
    justify-self: start;
    margin-bottom: 4px;
}

.account-card {
    width: min(720px, 100%);
}

.account-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--border);
}

.account-avatar {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(243, 179, 61, .35);
    border-radius: 16px;
    background:
        linear-gradient(
            135deg,
            rgba(243, 179, 61, .20),
            rgba(243, 179, 61, .04)
        );
    color: var(--accent);
    font-size: 24px;
    font-weight: 900;
}

.account-hero h2 {
    margin: 3px 0 0;
}

.account-hero-name {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.account-section {
    padding: 22px 0;
    border-bottom: 1px solid var(--border);
}

.account-section-title {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.account-section-title h3 {
    margin: 0;
    font-size: 16px;
}

.account-section-title p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.account-summary {
    margin: 0;
}

.profile-form {
    padding: 0;
    border: 0;
}

.profile-form .auth-submit {
    width: auto;
    min-width: 180px;
    justify-self: start;
}

.account-favorite-list {
    max-height: 340px;
}

.account-favorite-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 14px;
}

.favorite-main {
    min-width: 0;
}

.favorite-main strong,
.favorite-main small {
    display: block;
}

.favorite-main strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}

.favorite-main small {
    margin-top: 4px;
    color: var(--muted);
    text-transform: capitalize;
}

.favorite-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.favorite-actions button,
.favorite-actions a {
    border: 1px solid var(--border);
    border-radius: 9px;
    background: #202026;
    color: var(--text);
    padding: 7px 9px;
    text-decoration: none;
    font-size: 11px;
    font-weight: 800;
}

.favorite-actions button:hover,
.favorite-actions a:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.favorite-actions .danger-link {
    color: #ffaaaa;
}

.logout-btn {
    margin-top: 24px;
}

@media (max-width: 768px) {
    .auth-card-content {
        padding: 22px 18px 24px;
    }

    .auth-inline-row {
        display: grid;
        gap: 7px;
    }

    .account-card {
        max-height: 92vh;
    }

    .account-hero {
        padding-right: 36px;
    }

    .account-summary {
        grid-template-columns: 1fr;
    }

    .profile-form .auth-submit {
        width: 100%;
    }

    .account-favorite-item {
        grid-template-columns: 1fr;
    }

    .favorite-actions {
        justify-content: flex-start;
    }

    .favorite-actions button,
    .favorite-actions a {
        flex: 1 1 auto;
        text-align: center;
    }
}


/* -----------------------------------------------------------------------------
   Final modal controls and account layout
   ----------------------------------------------------------------------------- */

.modal-close,
.auth-close {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid #34343d;
    border-radius: 14px;
    background: rgba(255, 255, 255, .045);
    color: #d9d9df;
    font-family: inherit;
    font-size: 25px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .035),
        0 8px 24px rgba(0, 0, 0, .18);
    transition:
        transform .16s ease,
        border-color .16s ease,
        background .16s ease,
        color .16s ease;
}

.modal-close:hover,
.auth-close:hover {
    border-color: rgba(243, 179, 61, .58);
    background: rgba(243, 179, 61, .10);
    color: var(--accent);
    transform: translateY(-1px);
}

.modal-close:active,
.auth-close:active {
    transform: translateY(0) scale(.96);
}

.modal-close:focus-visible,
.auth-close:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.account-card {
    width: min(700px, 100%);
}

.account-hero {
    padding-bottom: 22px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--border);
}

.account-section {
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: rgba(255, 255, 255, .018);
}

.account-section + .account-section {
    margin-top: 14px;
}

.account-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.account-section-title h3 {
    margin: 2px 0 0;
    font-size: 17px;
}

.account-section-eyebrow {
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .9px;
    text-transform: uppercase;
}

.account-info-section .account-summary {
    margin-bottom: 16px;
}

.account-info-section .profile-form {
    gap: 9px;
    padding: 16px 0 0;
    border-top: 1px solid var(--border);
    border-bottom: 0;
}

.account-field-help {
    margin: -2px 0 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.5;
}

.account-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 3px;
}

.account-save-btn {
    min-width: 170px;
    justify-content: center;
}

.favorite-account-section {
    margin-top: 14px;
}

.favorite-account-section .account-section-head {
    margin-bottom: 12px;
}

.logout-btn {
    min-height: 46px;
    margin-top: 14px;
}

@media (max-width: 768px) {
    .modal-close,
    .auth-close {
        width: 44px;
        height: 44px;
        border-radius: 14px;
    }

    .account-section {
        padding: 14px;
    }

    .account-form-actions,
    .account-save-btn {
        width: 100%;
    }
}


/* -----------------------------------------------------------------------------
   V12 profile photo and admin dashboard
   Every control is designed for both desktop and mobile use.
   ----------------------------------------------------------------------------- */

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

.account-hero {
    align-items: center;
}

.avatar-stack {
    display: grid;
    justify-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.account-avatar {
    overflow: hidden;
}

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

.avatar-upload-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 6px 10px;
    background: #202026;
    color: var(--accent);
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.avatar-upload-btn:hover {
    border-color: var(--accent);
}

.account-hero-copy {
    min-width: 0;
}

.account-hero-help {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.avatar-preview-panel {
    margin: 14px 0;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(255, 255, 255, .02);
}

.avatar-preview-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.avatar-preview-row img {
    width: 64px;
    height: 64px;
    flex: 0 0 auto;
    border-radius: 15px;
    object-fit: cover;
    border: 1px solid var(--border);
}

.avatar-preview-row strong {
    display: block;
}

.avatar-preview-row p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 11px;
}

.avatar-preview-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.avatar-preview-actions > * {
    min-height: 38px;
}

.text-danger-btn {
    border: 1px solid #613737;
    border-radius: 10px;
    padding: 8px 12px;
    background: rgba(104, 38, 38, .18);
    color: #ffaaaa;
    font-weight: 800;
}

.account-summary-user {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
}

.admin-entry-btn {
    width: 100%;
    min-height: 46px;
    margin-top: 14px;
    border: 1px solid rgba(243, 179, 61, .42);
    border-radius: 12px;
    background: rgba(243, 179, 61, .08);
    color: var(--accent);
    font-weight: 900;
}

.admin-entry-btn:hover {
    background: rgba(243, 179, 61, .13);
    border-color: var(--accent);
}

.admin-modal {
    padding: 20px;
    place-items: center;
}

.admin-shell {
    position: relative;
    z-index: 1;
    width: min(1180px, 100%);
    max-height: 92vh;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: #131317;
    box-shadow: 0 32px 100px rgba(0, 0, 0, .60);
}

.admin-header {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px;
    border-bottom: 1px solid var(--border);
    background: rgba(19, 19, 23, .96);
    backdrop-filter: blur(12px);
}

.admin-header h2 {
    margin: 4px 0 3px;
    font-size: 26px;
}

.admin-header p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.admin-close {
    position: static;
    float: none;
    flex: 0 0 auto;
}

.admin-stats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    padding: 18px 24px 0;
}

.admin-stats article {
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(255, 255, 255, .025);
}

.admin-stats span,
.admin-stats strong {
    display: block;
}

.admin-stats span {
    color: var(--muted);
    font-size: 10px;
    line-height: 1.4;
}

.admin-stats strong {
    margin-top: 5px;
    color: var(--accent);
    font-size: 23px;
}

.admin-tabs {
    position: sticky;
    top: 91px;
    z-index: 4;
    display: flex;
    gap: 6px;
    margin: 16px 24px 0;
    padding: 5px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: #101013;
}

.admin-tab {
    flex: 1;
    min-height: 40px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--muted);
    font-weight: 900;
}

.admin-tab.active {
    background: #24242a;
    color: var(--accent);
}

.admin-content {
    padding: 18px 24px 24px;
}

.admin-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.admin-toolbar h3 {
    margin: 0;
}

.admin-toolbar p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.admin-search {
    display: flex;
    gap: 7px;
    width: min(430px, 100%);
}

.admin-search input {
    flex: 1;
    min-width: 0;
    min-height: 40px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #1b1b20;
    color: var(--text);
    padding: 8px 11px;
    outline: none;
}

.admin-search input:focus {
    border-color: var(--accent);
}

.admin-search button {
    min-height: 40px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #24242a;
    color: var(--accent);
    padding: 8px 13px;
    font-weight: 800;
}

.admin-list {
    display: grid;
    gap: 9px;
}

.admin-user-card,
.admin-record-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: rgba(255, 255, 255, .018);
}

.admin-user-main {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.admin-avatar {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #222228;
    color: var(--accent);
    font-weight: 900;
}

.admin-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-user-main > div:last-child,
.admin-record-card > div {
    min-width: 0;
}

.admin-user-main strong,
.admin-user-main span,
.admin-record-card strong,
.admin-record-card span {
    display: block;
}

.admin-user-main strong,
.admin-record-card strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-user-main span,
.admin-record-card span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
}

.admin-user-controls {
    display: flex;
    align-items: end;
    gap: 8px;
}

.admin-user-controls label {
    display: grid;
    gap: 4px;
    color: var(--muted);
    font-size: 10px;
}

.admin-user-controls select {
    min-height: 37px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: #202026;
    color: var(--text);
    padding: 7px 9px;
}

.admin-status-btn {
    min-width: 88px;
    min-height: 37px;
    border: 1px solid #386342;
    border-radius: 9px;
    background: rgba(49, 111, 65, .18);
    color: #9be1aa;
    padding: 7px 9px;
    font-weight: 800;
}

.admin-status-btn.suspended {
    border-color: #643b3b;
    background: rgba(118, 45, 45, .17);
    color: #ffaaaa;
}

.admin-status-btn:disabled,
.admin-user-controls select:disabled {
    opacity: .48;
    cursor: not-allowed;
}

.admin-delete-btn {
    min-height: 36px;
    border: 1px solid #603737;
    border-radius: 9px;
    background: rgba(105, 38, 38, .16);
    color: #ffaaaa;
    padding: 7px 11px;
    font-weight: 800;
}

.admin-review-card p {
    margin: 7px 0 0;
    color: #d1d1d6;
    font-size: 12px;
    line-height: 1.5;
}

.admin-loading,
.admin-empty {
    margin: 0;
    padding: 28px 14px;
    border: 1px dashed var(--border);
    border-radius: 12px;
    color: var(--muted);
    text-align: center;
}

.admin-empty.error,
.admin-message.error {
    color: #ff9b9b;
}

.admin-message {
    min-height: 20px;
    margin: 0;
    padding: 0 24px 20px;
    color: var(--muted);
    font-size: 12px;
}

.admin-message.success {
    color: #9be1aa;
}

@media (max-width: 980px) {
    .admin-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .account-summary-user {
        grid-template-columns: 1fr;
    }

    .account-hero {
        align-items: flex-start;
    }

    .avatar-stack {
        justify-items: start;
    }

    .avatar-preview-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .avatar-preview-actions > * {
        width: 100%;
        justify-content: center;
    }

    .avatar-preview-actions .text-danger-btn {
        grid-column: 1 / -1;
    }

    .admin-modal {
        padding: 0;
        align-items: stretch;
    }

    .admin-shell {
        width: 100%;
        max-height: 100dvh;
        min-height: 100dvh;
        border: 0;
        border-radius: 0;
    }

    .admin-header {
        padding: 16px;
    }

    .admin-header h2 {
        font-size: 21px;
    }

    .admin-header > div > p:last-child {
        display: none;
    }

    .admin-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 14px 14px 0;
    }

    .admin-tabs {
        top: 78px;
        margin: 12px 14px 0;
    }

    .admin-content {
        padding: 14px;
    }

    .admin-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-search {
        width: 100%;
    }

    .admin-user-card,
    .admin-record-card {
        grid-template-columns: 1fr;
    }

    .admin-user-controls {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
    }

    .admin-user-controls select,
    .admin-status-btn {
        width: 100%;
    }

    .admin-delete-btn {
        width: 100%;
    }
}

@media (max-width: 430px) {
    .avatar-preview-row {
        align-items: flex-start;
    }

    .admin-stats {
        grid-template-columns: 1fr 1fr;
        gap: 7px;
    }

    .admin-stats article {
        padding: 11px;
    }

    .admin-tabs {
        overflow-x: auto;
    }

    .admin-tab {
        min-width: 90px;
    }

    .admin-search {
        display: grid;
        grid-template-columns: 1fr auto;
    }

    .admin-user-controls {
        grid-template-columns: 1fr;
    }
}


/* -----------------------------------------------------------------------------
   Admin add-shop form
   ----------------------------------------------------------------------------- */

.admin-add-shop-btn {
    min-height: 42px;
    border: 1px solid rgba(243, 179, 61, .42);
    border-radius: 11px;
    background: rgba(243, 179, 61, .09);
    color: var(--accent);
    padding: 9px 14px;
    font-weight: 900;
}

.admin-add-shop-btn:hover {
    border-color: var(--accent);
    background: rgba(243, 179, 61, .14);
}

.admin-shop-form {
    margin-bottom: 18px;
    padding: 16px;
    border: 1px solid rgba(243, 179, 61, .28);
    border-radius: 16px;
    background:
        linear-gradient(
            180deg,
            rgba(243, 179, 61, .045),
            rgba(255, 255, 255, .012)
        );
}

.admin-shop-form-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.admin-shop-form-head strong {
    display: block;
    font-size: 16px;
}

.admin-shop-form-head p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.5;
}

.admin-form-close {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #222228;
    color: var(--text);
    font-size: 22px;
    line-height: 1;
}

.admin-form-close:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.admin-shop-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.admin-field {
    min-width: 0;
    display: grid;
    gap: 6px;
    color: var(--text);
    font-size: 12px;
    font-weight: 800;
}

.admin-field-wide {
    grid-column: 1 / -1;
}

.admin-field input,
.admin-field select,
.admin-field textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #1b1b20;
    color: var(--text);
    padding: 10px 11px;
    outline: none;
    font: inherit;
    font-weight: 500;
}

.admin-field input,
.admin-field select {
    min-height: 42px;
}

.admin-field textarea {
    resize: vertical;
    min-height: 86px;
}

.admin-field input:focus,
.admin-field select:focus,
.admin-field textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(243, 179, 61, .08);
}

.admin-location-tools {
    display: grid;
    grid-template-columns: auto minmax(180px, max-content) 1fr;
    align-items: center;
    gap: 10px;
    padding: 11px;
    border: 1px dashed var(--border);
    border-radius: 11px;
    background: rgba(255, 255, 255, .012);
}

.admin-location-tools > span {
    color: var(--text);
    font-weight: 800;
}

.admin-location-tools small {
    color: var(--muted);
    font-weight: 500;
    line-height: 1.45;
}

.admin-shop-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

.admin-shop-form-actions > * {
    min-width: 120px;
    justify-content: center;
}

.admin-form-message {
    min-height: 18px;
    padding: 0;
    margin: 10px 0 0;
}

.admin-shop-list-toolbar {
    margin-top: 4px;
}

.admin-shop-record-main {
    min-width: 0;
}

.admin-shop-record-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.admin-shop-record-title strong {
    min-width: 0;
}

.admin-shop-type {
    flex: 0 0 auto;
    display: inline-flex !important;
    width: max-content;
    margin: 0 !important;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px 7px;
    color: var(--accent) !important;
    font-size: 9px !important;
    text-transform: capitalize;
}

.admin-shop-record small {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 10px;
}

.admin-shop-record-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.admin-shop-record-actions a {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: #202026;
    color: var(--accent);
    padding: 7px 10px;
    text-decoration: none;
    font-size: 11px;
    font-weight: 800;
}

@media (max-width: 768px) {
    .admin-add-shop-btn {
        width: 100%;
    }

    .admin-shop-form {
        padding: 14px;
    }

    .admin-shop-form-grid {
        grid-template-columns: 1fr;
    }

    .admin-field-wide {
        grid-column: auto;
    }

    .admin-location-tools {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .admin-location-tools .secondary-btn {
        width: 100%;
        justify-content: center;
    }

    .admin-shop-form-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .admin-shop-form-actions > * {
        width: 100%;
        min-width: 0;
    }

    .admin-shop-record-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .admin-shop-record-actions > * {
        width: 100%;
    }
}

@media (max-width: 430px) {
    .admin-shop-form-actions,
    .admin-shop-record-actions {
        grid-template-columns: 1fr;
    }
}