@font-face {
            font-family: 'TH Sarabun New';
            src: local('TH Sarabun New'), url('https://cdn.jsdelivr.net/gh/lazywasabi/thai-web-fonts@7/fonts/SarabunNew/SarabunNew.woff2') format('woff2');
            font-weight: normal;
        }
        @font-face {
            font-family: 'TH Sarabun New';
            src: local('TH Sarabun New Bold'), url('https://cdn.jsdelivr.net/gh/lazywasabi/thai-web-fonts@7/fonts/SarabunNew/SarabunNew_Bold.woff2') format('woff2');
            font-weight: bold;
        }
        @font-face {
            font-family: 'TH Sarabun PSK';
            src: local('TH Sarabun PSK'), local('THSarabunPSK'), url('https://cdn.jsdelivr.net/gh/lazywasabi/thai-web-fonts@7/fonts/SarabunNew/SarabunNew.woff2') format('woff2');
            font-weight: normal;
        }
        @font-face {
            font-family: 'TH Sarabun PSK';
            src: local('TH Sarabun PSK Bold'), local('THSarabunPSK-Bold'), url('https://cdn.jsdelivr.net/gh/lazywasabi/thai-web-fonts@7/fonts/SarabunNew/SarabunNew_Bold.woff2') format('woff2');
            font-weight: bold;
        }
        :root {
            --bg-color: #0f172a; /* Slate 900 */
            --panel-bg: rgba(30, 41, 59, 0.85); /* Slate 800 */
            --panel-border: rgba(255, 255, 255, 0.1);
            --text-color: #f8fafc;
            --accent-color: #3b82f6; /* Blue 500 */
            
            /* A4 sizes at 96 DPI */
            --paper-width: 794px;
            --paper-height: 1123px;
        }

        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            background-color: var(--bg-color);
            font-family: 'Kanit', sans-serif;
            overflow: hidden;
            display: flex;
        }

        /* Main Workspace */
        .workspace {
            flex-grow: 1;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            position: relative;
            padding: 20px;
            box-sizing: border-box;
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 20px 20px;
        }

        /* Scale Wrapper */
        #scale_wrapper {
            transform-origin: center center;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* Paper Content */
        #layout_content {
            width: var(--paper-width);
            height: var(--paper-height);
            background-color: white;
            position: relative;
            box-shadow: 0 10px 50px rgba(0,0,0,0.6);
            transition: width 0.3s ease, height 0.3s ease;
            overflow: hidden; 
        }

        #paper_margin_guide {
            position: absolute;
            border: 1px dashed rgba(59, 130, 246, 0.45);
            pointer-events: none;
            box-sizing: border-box;
            z-index: 5;
            transition: all 0.3s ease;
        }

        /* The Map Area */
        #map_container {
            position: absolute;
            background-color: #f8fafc;
            border: 2px solid #334155;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 10;
        }

        #leaflet_map {
            width: 100%;
            height: 100%;
            background-color: #e2e8f0;
        }

        .map-text-overlay {
            position: absolute;
            z-index: 1012;
            pointer-events: auto;
            box-sizing: border-box;
            display: block;
        }

        .map-legend-overlay {
            position: absolute;
            z-index: 1013;
            pointer-events: auto;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .map-legend-title {
            font-weight: bold;
            margin-bottom: 6px;
            border-bottom: 1px solid rgba(0,0,0,0.1);
            padding-bottom: 4px;
        }

        .map-legend-items {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .map-legend-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .map-legend-color-box {
            flex-shrink: 0;
            box-sizing: border-box;
        }

        .map-drag-icon {
            display: none !important;
            position: absolute;
            top: -12px;
            left: -12px;
            width: 24px;
            height: 24px;
            background: var(--accent-color);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            cursor: grab;
            z-index: 1020;
            box-shadow: 0 4px 10px rgba(0,0,0,0.25);
            transition: transform 0.1s;
        }
        
        .map-drag-icon:hover {
            transform: scale(1.05);
        }
        
        .map-drag-icon:active {
            cursor: grabbing;
            transform: scale(0.95);
        }

        /* Grid */
        #grid_ticks_container {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            pointer-events: none;
            z-index: 500;
        }

        .grid-line-h {
            position: absolute;
            width: 100%;
            height: 1px;
            background: rgba(0, 0, 0, 0.3);
        }
        .grid-line-v {
            position: absolute;
            height: 100%;
            width: 1px;
            background: rgba(0, 0, 0, 0.3);
        }

        /* Control Panel */
        .control-panel {
            width: 350px;
            height: 100%;
            background: var(--panel-bg);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-left: 1px solid var(--panel-border);
            color: var(--text-color);
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            z-index: 100;
            box-shadow: -10px 0 30px rgba(0,0,0,0.5);
        }

        .panel-header {
            padding: 24px 20px;
            border-bottom: 1px solid var(--panel-border);
            font-size: 22px;
            font-weight: 700;
            text-align: center;
            letter-spacing: 0.5px;
            background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0));
        }

        .panel-content {
            padding: 24px 20px;
            overflow-y: auto;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .panel-content::-webkit-scrollbar {
            width: 6px;
        }
        .panel-content::-webkit-scrollbar-track {
            background: rgba(0,0,0,0.1);
        }
        .panel-content::-webkit-scrollbar-thumb {
            background: rgba(255,255,255,0.2);
            border-radius: 3px;
        }
        .panel-content::-webkit-scrollbar-thumb:hover {
            background: rgba(255,255,255,0.3);
        }

        /* Controls */
        .control-group {
            background: rgba(255,255,255,0.03);
            border-radius: 12px;
            padding: 16px;
            border: 1px solid rgba(255,255,255,0.05);
            transition: background 0.2s;
        }

        .control-group:hover {
            background: rgba(255,255,255,0.05);
        }

        .control-group.collapsed > *:not(.control-title) {
            display: none !important;
        }
        
        .control-group.collapsed .control-title {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .control-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 16px;
            color: #bae6fd;
            display: flex;
            align-items: center;
            gap: 10px;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            padding-bottom: 12px;
            cursor: grab;
            user-select: none;
            transition: color 0.2s;
        }
        
        .control-title:active {
            cursor: grabbing;
        }
        
        .control-title:hover {
            color: #fff;
        }
        
        .control-title::after {
            content: '▼';
            margin-left: auto;
            font-size: 12px;
            opacity: 0.5;
            transition: transform 0.3s;
        }
        
        .control-group.collapsed .control-title::after {
            transform: rotate(-90deg);
        }

        .control-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 14px;
            font-size: 14px;
            color: #cbd5e1;
        }

        .control-row:last-child {
            margin-bottom: 0;
        }

        /* Custom Radio */
        .radio-group {
            display: flex;
            gap: 12px;
            background: rgba(0,0,0,0.25);
            padding: 4px;
            border-radius: 8px;
        }

        .radio-item {
            flex: 1;
        }

        .radio-item input[type="radio"] {
            display: none;
        }

        .radio-item label {
            display: block;
            text-align: center;
            padding: 10px 12px;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s ease;
            color: #94a3b8;
            font-size: 14px;
        }

        .radio-item label:hover {
            color: #f1f5f9;
        }

        .radio-item input[type="radio"]:checked + label {
            background: var(--accent-color);
            color: white;
            font-weight: 500;
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
        }

        /* Custom Range Slider */
        input[type="range"] {
            -webkit-appearance: none;
            width: 100%;
            height: 6px;
            background: rgba(255,255,255,0.1);
            border-radius: 3px;
            outline: none;
        }
        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: var(--accent-color);
            cursor: pointer;
            transition: transform 0.1s, box-shadow 0.2s;
            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
        }
        input[type="range"]::-webkit-slider-thumb:hover {
            transform: scale(1.15);
            box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
        }

        /* Input specific layout */
        .slider-container {
            flex-grow: 1;
            margin-left: 14px;
        }

        /* Toggle Checkbox */
        .toggle-container {
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            color: #cbd5e1;
            font-weight: 500;
        }

        .ui-form-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
            max-height: 350px;
            overflow-y: auto;
            padding-right: 4px;
        }
        .ui-form-group::-webkit-scrollbar {
            width: 4px;
        }
        .ui-form-group::-webkit-scrollbar-track {
            background: rgba(0,0,0,0.1);
        }
        .ui-form-group::-webkit-scrollbar-thumb {
            background: rgba(255,255,255,0.2);
            border-radius: 2px;
        }
        .ui-form-group::-webkit-scrollbar-thumb:hover {
            background: rgba(255,255,255,0.3);
        }
        
        .toggle-container:hover {
            color: #f8fafc;
        }

        .toggle-container input[type="checkbox"] {
            width: 18px;
            height: 18px;
            accent-color: var(--accent-color);
            cursor: pointer;
        }

        .value-display {
            font-size: 12px;
            background: rgba(0,0,0,0.3);
            padding: 4px 8px;
            border-radius: 6px;
            min-width: 40px;
            text-align: center;
            color: #e2e8f0;
            margin-left: 10px;
            font-weight: 500;
            border: 1px solid rgba(255,255,255,0.05);
        }

        /* Grid Tick and Label Styles */
        .grid-tick-v, .grid-tick-h {
            position: absolute;
            background-color: #000;
        }
        .grid-tick-v {
            top: 0; bottom: 0;
            width: 1px;
            transform: translateX(-50%);
        }
        .grid-tick-h {
            left: 0; right: 0;
            height: 1px;
            transform: translateY(-50%);
        }
        .grid-label {
            line-height: 1;
            position: absolute;
            font-weight: bold;
            font-family: 'Arial', sans-serif;
            white-space: nowrap;
            text-align: center;
            pointer-events: none;
            -webkit-text-stroke: 3px #fff;
            paint-order: stroke fill;
        }
        
        /* The var() mapping handles UTM offset when drawing UTM, and LatLng offset when drawing LatLng. 
           We use inline CSS vars specific to the type in JS. */
        .grid-label-top {
            transform: translate(-50%, -100%);
                                }
        .grid-label-bottom {
            transform: translate(-50%, 100%);
                                }
        .grid-label-left {
            transform: translate(-50%, -50%) rotate(-90deg) translateY(-50%);
                                }
        .grid-label-right {
            transform: translate(50%, -50%) rotate(90deg) translateY(-50%);
                                }
        .api-loading-spinner {
            border: 2px solid rgba(255,255,255,0.1);
            border-radius: 50%;
            border-top: 2px solid var(--accent-color, #10b981);
            width: 12px;
            height: 12px;
            animation: spin 1s linear infinite;
            display: inline-block;
            margin-left: 6px;
            vertical-align: middle;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .pie-chart-icon {
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
        }
        
        /* Custom Cartographic Scale Bar (Checkered Style like map_0.html) */
        .leaflet-control-custom-scale {
            background: var(--scale-bg, rgba(255, 255, 255, 0.8)) !important;
            border: 1px solid rgba(0, 0, 0, 0.15) !important;
            border-radius: 8px !important;
            padding: 8px 12px !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
            font-family: 'Kanit', sans-serif !important;
            pointer-events: auto !important;
            transition: all 0.2s;
        }
        .scale-4-2-container {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .scale-ticks-labels {
            position: relative;
            width: 100%;
            height: 1.8em;
        }
        .scale-ticks-labels .tick {
            position: absolute;
            bottom: 0;
            height: 6px;
            border-left: var(--scale-border-width, 2px) solid var(--scale-color, #000000);
            transform: translateX(-50%);
        }
        .scale-ticks-labels .tick.half {
            height: 4px;
        }
        .scale-ticks-labels .tick span {
            position: absolute;
            bottom: 8px;
            left: 50%;
            transform: translateX(-50%);
            font-size: var(--scale-font-size, 11px);
            font-weight: bold;
            color: var(--scale-color, #000000);
            -webkit-text-stroke: 3px var(--scale-text-shadow-color, #ffffff);
            paint-order: stroke fill;
            white-space: nowrap;
        }
        .scale-double-row {
            width: 100%;
            border: var(--scale-border-width, 2px) solid var(--scale-color, #000000);
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
        }
        .scale-row {
            display: flex;
            height: 8px;
            width: 100%;
        }
        .scale-row .seg {
            height: 100%;
            box-sizing: border-box;
            border-right: calc(var(--scale-border-width, 2px) / 2) solid var(--scale-color, #000000);
        }
        .scale-row .seg:last-child {
            border-right: none;
        }
        .scale-row .seg.black {
            background-color: var(--scale-color, #000000);
        }
        .scale-row .seg.white {
            background-color: #ffffff;
        }

        /* +/- Stepper buttons for range inputs */
        .range-stepper-row {
            display: flex;
            align-items: center;
            gap: 4px;
            width: 100%;
        }
        .range-stepper-row input[type="range"] {
            flex: 1;
            min-width: 0;
        }
        .range-step-btn {
            width: 22px;
            height: 22px;
            min-width: 22px;
            border: none;
            border-radius: 4px;
            background: rgba(255,255,255,0.12);
            color: #94a3b8;
            font-size: 15px;
            font-weight: 700;
            line-height: 1;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            transition: background 0.15s, color 0.15s;
            user-select: none;
        }
        .range-step-btn:hover {
            background: var(--accent-color);
            color: #fff;
        }
        .range-step-btn:active {
            transform: scale(0.9);
        }