:root {
        --bg-glass: rgba(255, 255, 255, 0.85);
        --bg-glass-dark: rgba(240, 240, 245, 0.85);
        --border-glass: rgba(0, 0, 0, 0.1);
        --text-main: #1d1d1f;
        --text-secondary: #86868b;
        --accent-primary: #007aff;
        --accent-red: #ff3b30;
        --accent-green: #34c759;
        --shadow-soft: 0 8px 32px rgba(0, 0, 0, 0.08);
        --border-radius-lg: 18px;
        --border-radius-md: 12px;
        --font-family: "Noto Sans Thai", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        --body-bg: #f5f5f7;
        --input-bg: rgba(255, 255, 255, 0.8);
        --btn-secondary: rgba(0, 0, 0, 0.05);
        --btn-secondary-hover: rgba(0, 0, 0, 0.1);
        --modal-overlay: rgba(0, 0, 0, 0.3);
        --popup-bg: rgba(255, 255, 255, 0.9);
        --info-item: rgba(255, 255, 255, 0.6);
        --marker-border: white;
        --btn-popup: #f2f2f7;
        --accent-blue: #007aff;
        --accent-blue-light: rgba(0, 122, 255, 0.1);
    }

    /* Pokemon GO Theme overrides */
    body[data-theme="pokemongo"] {
        --accent-primary: #00c2b3;
        --body-bg: linear-gradient(135deg, #e3f9e5 0%, #a1eacb 100%);
        --bg-glass: rgba(255, 255, 255, 0.95);
        --border-radius-lg: 28px;
        --border-radius-md: 30px;
    }
    
    body[data-theme="pokemongo"].dark-mode {
        --body-bg: linear-gradient(135deg, #0d1b13 0%, #05140e 100%);
        --bg-glass: rgba(30, 30, 32, 0.9);
        --accent-primary: #00d4c5;
        --border-radius-lg: 28px;
        --border-radius-md: 30px;
    }

    /* Pokemon GO Gradient Styles */
    body[data-theme="pokemongo"] .btn-primary,
    body[data-theme="pokemongo"] .fab.active,
    body[data-theme="pokemongo"] .switch input:checked + .slider {
        background: linear-gradient(to right, #a2dc94, #24cbac) !important;
        border: none;
    }

    body[data-theme="pokemongo"] .btn-primary:active,
    body[data-theme="pokemongo"] .fab.active:active {
        opacity: 0.8;
        transform: scale(0.98);
    }

    /* Liquid Glass Theme */
    body[data-theme="ios26"] {
        --accent-primary: linear-gradient(135deg, #ff0080, #7928ca, #0070f3);
        --body-bg: radial-gradient(circle at top left, #a0c4ff, #ffc8dd 50%, #bde0fe 100%);
        --bg-glass: rgba(255, 255, 255, 0.72);
        --border-glass: rgba(255, 255, 255, 0.4);
        --border-radius-lg: 35px;
        --border-radius-md: 40px;
        --text-main: #000;
        --text-secondary: rgba(0, 0, 0, 0.6);
    }

    body[data-theme="ios26"].dark-mode {
        --body-bg: radial-gradient(circle at top right, #1a1a2e, #16213e 50%, #0f3460 100%);
        --bg-glass: rgba(0, 0, 0, 0.2);
        --border-glass: rgba(255, 255, 255, 0.1);
        --text-main: #fff;
        --text-secondary: rgba(255, 255, 255, 0.6);
    }

    body[data-theme="ios26"] .glass-panel,
    body[data-theme="ios26"] .modal {
        backdrop-filter: blur(34px) saturate(180%);
        -webkit-backdrop-filter: blur(34px) saturate(180%);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.05);
    }

    body[data-theme="ios26"] .btn-primary,
    body[data-theme="ios26"] .fab.active,
    body[data-theme="ios26"] .switch input:checked + .slider {
        background: var(--accent-primary) !important;
        border: none;
        color: white;
    }

    body[data-theme="ios26"] .btn-primary:active,
    body[data-theme="ios26"] .fab.active:active {
        transform: scale(0.96);
        filter: brightness(1.1);
    }

    /* Leaflet Popup overrides for Liquid Glass Theme */
    body[data-theme="ios26"] .leaflet-popup-content-wrapper,
    body[data-theme="ios26"] .leaflet-popup-tip {
        background: var(--bg-glass) !important;
        color: var(--text-main) !important;
        backdrop-filter: blur(34px) saturate(180%);
        -webkit-backdrop-filter: blur(34px) saturate(180%);
        border: 1px solid var(--border-glass);
        border-radius: var(--border-radius-lg);
    }

    body[data-theme="ios26"] .leaflet-popup-content {
        margin: 15px;
    }

    body[data-theme="ios26"] .leaflet-popup-close-button {
        color: var(--text-main) !important;
    }

    /* Leaflet Popup overrides for Pokemon GO Theme */
    body[data-theme="pokemongo"] .btn-edit-popup {
        background: linear-gradient(to right, #a2dc94, #24cbac) !important;
        color: white !important;
        border-radius: 50px !important;
        border: none !important;
        font-weight: bold;
    }

    body[data-theme="pokemongo"] .btn-del-popup {
        background: #f4b3bd !important;
        color: #f25f5f !important;
        border-radius: 50px !important;
        border: none !important;
        font-weight: bold;
    }


    body[data-theme="pokemongo"] .leaflet-popup-content-wrapper {
        border-radius: 20px;
    }

    /* Dark Theme (Deep Carbon) */
    body[data-theme="darktheme"] {
        --accent-primary: #ffffff;
        --body-bg: #050505;
        --bg-glass: rgba(18, 18, 18, 0.95);
        --bg-glass-dark: rgba(25, 25, 25, 0.95);
        --border-glass: rgba(255, 255, 255, 0.08);
        --text-main: #f0f0f0;
        --text-secondary: #999999;
        --border-radius-lg: 18px;
        --border-radius-md: 12px;
        --shadow-soft: 0 10px 40px rgba(0, 0, 0, 0.6);
        --input-bg: rgba(30, 30, 30, 0.8);
        --btn-secondary: rgba(255, 255, 255, 0.05);
        --info-item: rgba(255, 255, 255, 0.05);
        --btn-popup: rgba(255, 255, 255, 0.1);
        --marker-border: #1a1a1a;
    }

    body[data-theme="darktheme"] .btn-primary {
        background: #f0f0f0 !important;
        color: #000000 !important;
    }

    body[data-theme="darktheme"] .fab.active {
        background: #f0f0f0 !important;
        color: #000000 !important;
    }

    body[data-theme="darktheme"] .theme-btn.active {
        background: rgba(255, 255, 255, 0.1) !important;
        border-color: #ffffff !important;
    }

    /* Leaflet Popup overrides for Dark Theme */
    body[data-theme="darktheme"] .leaflet-popup-content-wrapper,
    body[data-theme="darktheme"] .leaflet-popup-tip {
        background: var(--bg-glass) !important;
        color: var(--text-main) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid var(--border-glass);
    }

    body[data-theme="darktheme"] .leaflet-popup-content {
        margin: 15px;
    }

    body[data-theme="darktheme"] .leaflet-popup-close-button {
        color: var(--text-secondary) !important;
    }

        body.dark-mode {
            --bg-glass: rgba(30, 30, 32, 0.85);
            --bg-glass-dark: rgba(44, 44, 46, 0.85);
            --border-glass: rgba(255, 255, 255, 0.15);
            --text-main: #f5f5f7;
            --text-secondary: #a1a1a6;
            --shadow-soft: 0 8px 32px rgba(0, 0, 0, 0.5);
            --body-bg: #000000;
            --input-bg: rgba(60, 60, 62, 0.8);
            --btn-secondary: rgba(255, 255, 255, 0.1);
            --btn-secondary-hover: rgba(255, 255, 255, 0.15);
            --modal-overlay: rgba(0, 0, 0, 0.6);
            --popup-bg: rgba(44, 44, 46, 0.9);
            --info-item: rgba(255, 255, 255, 0.1);
            --marker-border: #1e1e1e;
            --btn-popup: #3a3a3c;
        }

        body.dark-mode .leaflet-layer:not(.no-invert),
        body.dark-mode .leaflet-control-zoom-in,
        body.dark-mode .leaflet-control-zoom-out,
        body.dark-mode .leaflet-control-attribution {
            filter: invert(1) hue-rotate(180deg) brightness(95%) contrast(0.9);
        }

        /* Force Noto Sans Thai Everywhere */
        *, *::before, *::after {
            font-family: 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
            -webkit-font-smoothing: antialiased;
        }

        html,
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            height: 100dvh;
            overflow: hidden;
            background: var(--body-bg);
            color: var(--text-main);
        }

        #map {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            /* Disable mobile callouts and selection */
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
            /* Optimization for custom tap detection */
            touch-action: pan-x pan-y;
        }

        /* Allow Selection in UI Elements */
        .leaflet-popup-content,
        #info-panel,
        #control-panel,
        .modal,
        input,
        select,
        textarea {
            -webkit-user-select: text !important;
            -moz-user-select: text !important;
            -ms-user-select: text !important;
            user-select: text !important;
        }

        /* Glass Panel Styling */
        .glass-panel {
            background: var(--bg-glass);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid var(--border-glass);
            border-radius: var(--border-radius-lg);
            box-shadow: var(--shadow-soft);
        }

        #control-panel {
            position: absolute;
            top: 20px;
            left: 20px;
            z-index: 1000;
            padding: 20px;
            width: 300px;
            max-height: 90vh;
            display: flex;
            flex-direction: column;
            gap: 15px;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            overflow-y: auto; /* Allow scroll when expanded */
            overflow-x: hidden;
        }

        #control-panel.collapsed {
            max-height: 56px;
            padding-bottom: 0;
            gap: 0;
        }

        #control-content {
            transition: opacity 0.3s ease;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        #control-panel.collapsed #control-content {
            opacity: 0;
            pointer-events: none;
        }

        .panel-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 5px;
        }

        .panel-header h3 {
            margin: 0;
            font-size: 18px;
            font-weight: 600;
        }

        .btn-icon {
            background: var(--btn-secondary);
            border: none;
            border-radius: 50%;
            width: 32px;
            height: 32px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            transition: background 0.2s, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            font-size: 16px;
            position: relative; /* Stable position for z-index */
        }

        .btn-icon:hover {
            transform: scale(1.03);
            z-index: 10;
        }

        .btn-icon:hover {
            background: var(--btn-secondary-hover);
        }

        .input-group {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .input-row {
            display: flex;
            gap: 10px;
        }

        .input-group label {
            font-size: 13px;
            font-weight: 500;
            color: var(--text-secondary);
        }

        input[type="text"],
        input[type="number"],
        select {
            font-family: var(--font-family);
            font-size: 14px;
            color: var(--text-main);
            width: 100%;
            padding: 10px 12px;
            height: 42px;
            border: 1px solid var(--border-glass);
            border-radius: var(--border-radius-md);
            box-sizing: border-box;
            background: var(--input-bg);
            outline: none;
            transition: border 0.3s, box-shadow 0.3s;
        }

        select {
            -webkit-appearance: none;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2386868b' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 15px center;
            padding-right: 35px;
        }

        input:focus,
        select:focus {
            border-color: var(--accent-primary);
            box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
        }

        /* Specific sizing for Wayspot icon size input - Adjusted to reach right edge */
        .input-row-align-center {
            display: flex;
            align-items: center;
            gap: 15px;
            width: 100%;
        }

        #setting-icon-size {
            flex: 1; /* Stretch to reach the right edge */
            text-align: right;
            padding-right: 12px;
            min-width: 0;
        }

        /* Reverting Global Radius input to previous preferred sizing */
        #globalRadiusInput {
            width: 140px;
        }

        #btn-force-radius {
            width: auto;
            white-space: nowrap;
        }

        .btn {
            width: 100%;
            padding: 12px;
            border: none;
            border-radius: var(--border-radius-md);
            cursor: pointer;
            font-weight: 600;
            font-size: 15px;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            font-family: var(--font-family);
            text-align: center;
            position: relative; /* Stable position for z-index */
        }

        .btn:hover {
            transform: scale(1.03);
            z-index: 10;
        }

        .btn-primary {
            background: var(--accent-primary);
            color: white;
        }

        .btn-primary:active {
            transform: scale(0.98);
            background: #0066d6;
        }

        .btn-secondary {
            background: var(--btn-secondary);
            color: var(--text-main);
        }

        .btn-secondary:hover {
            background: var(--btn-secondary-hover);
        }

        .btn-danger {
            background: rgba(255, 59, 48, 0.1);
            color: var(--accent-red);
        }

        #btn-sync-export {
            background-color: #d1f7d1 !important;
            color: #2b5d2b !important;
        }

        #btn-sync-import {
            background-color: #9addf7 !important;
            color: #1a4d5e !important;
        }

        .btn-danger:hover {
            background: rgba(255, 59, 48, 0.2);
        }

        /* FABs - Speed Dial Refactor */
        .fab-container {
            position: absolute;
            right: 20px;
            bottom: 30px;
            z-index: 1000;
            display: flex;
            flex-direction: column-reverse; /* Sub-buttons go upwards */
            gap: 12px;
            align-items: center;
        }

        .fab-sub-buttons {
            display: flex;
            flex-direction: column-reverse;
            gap: 12px;
            visibility: hidden;
            opacity: 0;
            transform: translateY(20px) scale(0.8);
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            pointer-events: none;
        }

        .fab-container.active .fab-sub-buttons {
            visibility: visible;
            opacity: 1;
            transform: translateY(0) scale(1);
            pointer-events: auto;
        }

        .main-fab {
            background: #007aff !important; /* Fixed blue color */
            color: white !important;
            z-index: 1001;
            font-size: 28px !important;
            box-shadow: 0 4px 15px rgba(0, 122, 255, 0.4);
            transition: all 0.3s ease;
        }

        .fab-container.active .main-fab {
            transform: scale(1.05); /* Subtle scale up when active */
            background: #007aff !important; 
            box-shadow: 0 6px 20px rgba(0, 122, 255, 0.5);
        }

        .fab {
            position: relative;
            width: 55px;
            height: 55px;
            border-radius: 50%;
            border: 1px solid var(--border-glass);
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            cursor: pointer;
            padding: 0;
            line-height: 1;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            color: var(--accent-primary);
        }

        .fab[data-tooltip]::after {
            content: attr(data-tooltip);
            position: absolute;
            right: 120%;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(0, 0, 0, 0.85);
            color: white;
            padding: 8px 16px;
            border-radius: 10px;
            font-size: 14px;
            font-weight: 500;
            font-family: var(--font-family);
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: all 0.2s;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }

        .fab:hover {
            transform: scale(1.03);
            background: white;
        }

        .fab:hover[data-tooltip]::after {
            opacity: 1;
            transform: translateY(-50%) translateX(-4px);
        }

        /* Theme Buttons Active State */
        .theme-btn.active {
            border: 2px solid var(--accent-primary) !important;
            background: rgba(0, 122, 255, 0.1) !important;
        }
        
        body[data-theme="pokemongo"] .theme-btn.active,
        body[data-theme="ios26"] .theme-btn.active {
            background: rgba(0, 194, 179, 0.1) !important;
        }

        .fab.active {
            background: var(--accent-primary);
            color: white;
            border-color: var(--accent-primary);
        }

        .fab.active:hover {
            background: #0066d6;
        }

        .fab:hover[data-tooltip]::after {
            opacity: 1;
            transform: translateY(-50%) translateX(-4px);
        }

        /* Info Panel */
        #info-panel {
            position: absolute;
            bottom: 30px;
            right: 80px;
            z-index: 1000;
            padding: 20px;
            width: 300px;
            max-height: 50vh;
            overflow-y: auto;
            display: none;
            transform-origin: bottom right;
            animation: scaleIn 0.2s ease-out;
        }

        .info-category {
            margin-top: 15px;
        }

        .info-category h4 {
            margin: 0 0 10px 0;
            font-size: 14px;
            border-bottom: 1px solid var(--border-glass);
            padding-bottom: 5px;
        }

        .info-item {
            font-size: 13px;
            padding: 8px;
            background: var(--info-item);
            border-radius: 8px;
            margin-bottom: 6px;
        }

        .info-item-coords {
            font-size: 11px;
            color: var(--text-secondary);
            margin-top: 4px;
            display: block;
        }

        /* Modals */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: var(--modal-overlay);
            z-index: 3000;
            display: none;
            justify-content: center;
            align-items: center;
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            opacity: 0;
            transition: opacity 0.3s;
        }

        .modal {
            background: var(--bg-glass);
            border-radius: var(--border-radius-lg);
            padding: 20px;
            width: 90%;
            max-width: 380px;
            box-shadow: var(--shadow-soft);
            transform: scale(0.7); /* Smaller initial scale for more pop */
            opacity: 0;
            transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
            max-height: 85dvh;
            overflow-y: auto;
            border: 1px solid var(--border-glass);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            padding-bottom: max(20px, env(safe-area-inset-bottom));
        }

        .modal.active {
            transform: scale(1);
            opacity: 1;
        }

        .modal-overlay.active {
            opacity: 1;
        }

        .modal h2,
        .modal h3 {
            margin-top: 0;
            margin-bottom: 20px;
            text-align: center;
        }

        .modal-buttons {
            display: flex;
            gap: 10px;
            margin-top: 25px;
        }

        /* iOS Toggle Switch */
        .toggle-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }

        .toggle-row:last-child {
            border-bottom: none;
        }

        .toggle-label {
            font-size: 15px;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .switch {
            position: relative;
            display: inline-block;
            width: 44px;
            height: 24px;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #e5e5ea;
            transition: .3s;
            border-radius: 24px;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 20px;
            width: 20px;
            left: 2px;
            bottom: 2px;
            background-color: white;
            transition: .3s;
            border-radius: 50%;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        input:checked+.slider {
            background-color: var(--accent-green);
        }

        input:checked+.slider:before {
            transform: translateX(20px);
        }

        /* Leaflet Overrides */
        .leaflet-popup-content-wrapper {
            border-radius: 16px;
            box-shadow: var(--shadow-soft);
            border: 1px solid var(--border-glass);
            backdrop-filter: blur(10px);
            background: var(--popup-bg);
            color: var(--text-main);
        }

        .leaflet-popup-tip {
            background: var(--popup-bg);
        }

        .custom-marker {
            width: 36px;
            height: 36px;
            box-sizing: border-box;
            border-radius: 50%;
            object-fit: cover;
            background-color: var(--marker-border);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
            border-style: solid;
            border-width: 3px;
        }

        .leaflet-drag-target .custom-marker {
            transform: scale(1.1);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
            opacity: 0.9;
        }

        .popup-buttons {
            display: flex;
            gap: 8px;
            justify-content: center;
            margin-top: 15px;
        }

        .popup-btn {
            padding: 8px 12px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 13px;
            font-weight: 600;
            width: 100%;
            transition: opacity 0.2s;
        }

        .popup-btn:active {
            opacity: 0.7;
        }

        .btn-edit-popup {
            background: var(--btn-popup);
            color: var(--accent-primary);
        }

        .btn-del-popup {
            background: var(--btn-popup);
            color: var(--accent-red);
        }

        .popup-lock-corner {
            position: absolute;
            top: 0;
            left: 0;
            width: 28px;
            height: 28px;
            border: none;
            background: transparent;
            cursor: pointer;
            font-size: 15px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0.35;
            transition: opacity 0.2s;
            padding: 0;
        }

        .popup-lock-corner:hover {
            opacity: 0.8;
        }

        .popup-lock-corner.locked {
            opacity: 1;
        }

        .custom-icon-wrapper {
            overflow: visible !important;
        }

        .custom-icon-inner {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .lock-badge {
            position: absolute;
            top: -6px;
            right: -6px;
            font-size: 13px;
            line-height: 1;
            pointer-events: none;
            filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6));
            z-index: 10;
        }

        .marker-locked {
            opacity: 0.75;
        }

        .popup-spot-image {
            width: 140px;
            height: 140px;
            border-radius: 50%;
            object-fit: cover;
            margin: 20px auto;
            display: block;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .section-title {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin: 20px 0 10px;
        }

        /* Accordion Styling */
        .accordion-item {
            border-bottom: 1px solid var(--border-glass);
        }

        .accordion-item:last-child {
            border-bottom: none;
        }

        .accordion-header {
            width: 100%;
            padding: 18px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: none;
            border: none;
            cursor: pointer;
            text-align: left;
            transition: transform 0.3s ease;
        }

        .accordion-header span {
            font-size: 15px;
            font-weight: 600;
            color: var(--text-main);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .accordion-header .icon {
            font-size: 12px;
            color: var(--text-secondary);
            transition: transform 0.3s ease;
        }

        .accordion-item.active .accordion-header .icon {
            transform: rotate(180deg);
        }

        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            flex-direction: column;
        }

        .accordion-item.active .accordion-content {
            max-height: 2000px; /* Increased to prevent content cutting off */
        }

        /* Inner container for padding to avoid jumpy animation */
        .accordion-inner {
            padding: 10px 8px 15px 8px; /* Added horizontal padding to allow room for button scaling */
        }

        .accordion-content .toggle-row:first-child {
            padding-top: 0;
        }

        #btn-reset-colors {
            margin: 10px 0;
        }

        #btn-sync-export {
            background-color: #c7ffbb;
            color: #1d1d1f; /* Dark text for better contrast on light green */
        }

        body.dark-mode #btn-sync-export {
            background-color: #2d4a2d; /* Darker green for dark mode */
            color: #f5f5f7;
        }

        #btn-force-radius {
            white-space: nowrap;
            width: auto;
            min-width: 120px;
        }

        /* Tutorial Styles */
        .tutorial-slide-title {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 12px;
            color: var(--accent-primary);
            text-align: center;
        }

        .tutorial-slide-image {
            width: 90%;
            max-height: 250px;
            object-fit: contain;
            border-radius: 8px;
            margin: 0 auto 20px auto;
            background: none;
            display: block;
        }

        .tutorial-slide-text {
            font-size: 14px;
            line-height: 1.6;
            color: var(--text-main);
            text-align: center;
        }

        .dot {
            width: 8px;
            height: 8px;
            background: rgba(0, 0, 0, 0.1);
            border-radius: 50%;
            transition: all 0.3s;
        }

        body.dark-mode .dot {
            background: rgba(255, 255, 255, 0.2);
        }

        .dot.active {
            background: var(--accent-primary);
            transform: scale(1.3);
            box-shadow: 0 0 8px rgba(0, 122, 255, 0.4);
        }

        #tutorial-slide-content {
            animation: fadeIn 0.3s ease-in-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(5px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes scaleIn {
            from {
                transform: scale(0.9);
                opacity: 0;
            }

            to {
                transform: scale(1);
                opacity: 1;
            }
        }

        /* Color Picker Styling */
        .color-picker-circle {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            width: 28px;
            height: 28px;
            background-color: transparent;
            border: none;
            cursor: pointer;
            padding: 0;
            overflow: hidden;
            flex-shrink: 0;
        }

        .color-picker-circle::-webkit-color-swatch-wrapper {
            padding: 0;
        }

        .color-picker-circle::-webkit-color-swatch {
            border: 2px solid var(--border-glass);
            border-radius: 50%;
        }

        .color-picker-circle::-moz-color-swatch {
            border: 2px solid var(--border-glass);
            border-radius: 50%;
        }

        @media (max-width: 768px) {
            #control-panel {
                top: auto;
                bottom: max(20px, env(safe-area-inset-bottom));
                left: 15px;
                right: 15px;
                width: auto;
                padding: 15px;
                max-height: 40dvh;
            }

            .fab-container {
                bottom: auto;
                top: max(20px, env(safe-area-inset-top));
                right: 15px;
                flex-direction: column; /* Sub-buttons go downwards */
            }

            .fab-sub-buttons {
                flex-direction: column;
                transform: translateY(-20px) scale(0.8); /* Pop down from top */
            }

            .fab-container.active .fab-sub-buttons {
                transform: translateY(0) scale(1);
            }

            #info-panel {
                bottom: max(20px, env(safe-area-inset-bottom));
                right: 15px;
                left: 15px;
                width: auto;
                max-height: 50dvh;
                transform-origin: bottom center;
            }

            .leaflet-control-zoom {
                display: none !important;
            }
        }
/* Utility Classes for Refactoring */
.flex-column-gap-12 {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.flex-1 {
    flex: 1;
}

.add-by-map-hint {
    text-align: center;
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: -5px;
}

.search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon-hint {
    position: absolute;
    left: 10px;
    font-size: 14px;
    opacity: 0.6;
}

input.search-input-field {
    width: 100%;
    padding: 8px 35px 8px 40px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.05);
}

.search-clear-btn {
    position: absolute;
    right: 10px;
    cursor: pointer;
    font-size: 14px;
    opacity: 0.6;
    transition: opacity 0.2s;
    user-select: none;
}

.search-clear-btn:hover {
    opacity: 1;
}

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

.theme-btn-compact {
    width: 100%;
    padding: 6px;
    font-size: 11px;
    height: auto;
}

.theme-btn-icon {
    font-size: 16px;
    display: block;
    margin-bottom: 2px;
}

.theme-btn-text {
    display: block;
    line-height: 1.2;
}

.accordion-inner-container {
    padding: 10px 0;
}

.project-list-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.project-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    background: rgba(0, 0, 0, 0.03);
}

.project-item.active {
    background: var(--accent-blue-light);
}

.project-item-name {
    flex: 1;
    color: var(--text-main);
}

.project-item.active .project-item-name {
    font-weight: 600;
    color: var(--accent-blue);
}

.btn-project-action {
    font-size: 14px;
    opacity: 0.6;
}

.welcome-text-container {
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
}

.tutorial-dots-container {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 25px;
}

.relative-modal {
    position: relative;
}

.modal-close-top {
    position: absolute;
    right: 20px;
    top: 20px;
}

.modal-title {
    margin-top: 10px;
    margin-bottom: 25px;
}

.margin-b-20 { margin-bottom: 20px; }
.margin-b-15 { margin-bottom: 15px; }
.margin-b-5 { margin-bottom: 5px; }
.margin-t-15 { margin-top: 15px; }
.margin-t-5 { margin-top: 5px; }
.padding-t-15 { padding-top: 15px; }

.mapbox-settings-panel {
    display: none;
    margin-bottom: 5px;
}

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

.icon-size-input {
    width: 60px;
    height: 34px;
    text-align: center;
}

.row-gap-5 {
    display: flex;
    gap: 5px;
}

.flex-1-h-38 {
    flex: 1;
    height: 38px;
}

.btn-compact-h-38 {
    width: auto;
    padding: 0 10px;
    height: 38px;
    font-size: 13px;
}

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

.hidden-input {
    display: none;
}

.tutorial-trigger {
    cursor: pointer;
    margin-top: 5px;
}

.text-accent-blue {
    color: var(--accent-blue);
}

.no-transform {
    transform: none !important;
}

.app-info-footer {
    text-align: center;
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 30px;
}

.modal-buttons-margin {
    margin-top: 20px;
}

.modal-buttons-gap-12 {
    display: flex;
    gap: 12px;
}

.welcome-title {
    font-size: 24px;
    color: var(--text-main);
}

.tutorial-content-container {
    min-height: 220px;
    margin-bottom: 20px;
    padding: 10px 0;
}

.modal-narrow {
    max-width: 320px;
}

/* Live POI Layer (PokéStop/Gym/Power Spot จริงจาก Niantic) */
.live-poi-icon-wrapper {
    background: transparent;
    border: none;
}

.live-poi-icon-inner {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    background: var(--marker-border);
}

.live-poi-thumb {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    opacity: 0.92;
}

.live-poi-fallback {
    font-size: 14px;
    line-height: 1;
}

.live-poi-icon-inner.live-poi-type-gym {
    box-shadow: 0 0 0 2px #ff3b30, 0 1px 4px rgba(0, 0, 0, 0.4);
}

.live-poi-icon-inner.live-poi-type-pokestop {
    box-shadow: 0 0 0 2px #007aff, 0 1px 4px rgba(0, 0, 0, 0.4);
}

.live-poi-icon-inner.live-poi-type-powerspot {
    box-shadow: 0 0 0 2px #911042, 0 1px 4px rgba(0, 0, 0, 0.4);
}

.live-poi-mega-badge {
    font-size: 11px;
    color: #ff9500;
}

.live-poi-readonly-note {
    font-size: 10px;
    color: var(--text-secondary);
    margin-top: 6px;
    font-style: italic;
}

.live-poi-status-line {
    font-size: 11px;
    color: var(--text-secondary);
    min-height: 14px;
    margin-top: 4px;
}

.live-poi-error-banner {
    font-size: 12px;
    color: #ff3b30;
    background: rgba(255, 59, 48, 0.1);
    padding: 6px 10px;
    border-radius: 8px;
    margin: 6px 0;
}

.live-poi-help-text {
    font-size: 12px;
    color: var(--text-secondary);
    background: var(--info-item);
    padding: 10px;
    border-radius: 8px;
    line-height: 1.6;
    margin-top: 8px;
}