* { font-family: 'Inter', sans-serif; }
    .font-display { font-family: 'Outfit', sans-serif; }
    .sidebar-item { transition: all 0.2s ease; }
    .sidebar-item:hover { transform: translateX(4px); }
    .card-hover { transition: all 0.3s ease; }
    .card-hover:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); }
    .fade-in { animation: fadeIn 0.4s ease-out; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    .float-in { animation: floatIn 0.45s ease-out both; }
    @keyframes floatIn { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
    .template-card { transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
    .template-card:hover { transform: translateY(-4px); box-shadow: 0 18px 32px rgba(16,185,129,0.18); }
    .template-card.selected { border-color: rgba(16,185,129,0.6); box-shadow: 0 16px 30px rgba(16,185,129,0.25); }
    .template-badge { background: linear-gradient(135deg, #10b981, #22c55e); color: white; }
    .template-icon { filter: drop-shadow(0 6px 10px rgba(0,0,0,0.15)); }
    .pulse-dot { animation: pulse 2s infinite; }
    @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
    .modal-backdrop { animation: backdropIn 0.2s ease forwards; }
    @keyframes backdropIn { from { opacity: 0; } to { opacity: 1; } }
    .modal-content { animation: modalIn 0.3s ease forwards; }
    @keyframes modalIn { from { opacity: 0; transform: scale(0.96) translateY(12px); } to { opacity: 1; transform: scale(1) translateY(0); } }
    #agro-map { height: 420px; }
    .bg-bark { background-color: #1a1714; }
    .bg-soil { background-color: #2a2520; }
    .bg-clay { background-color: #3a332d; }
    .bg-wheat { background-color: #c8b68e; }
    .bg-sprout { background-color: #6abf69; }
    .text-cream { color: #faf6ef; }
    .text-wheat { color: #c8b68e; }
    .text-sprout { color: #6abf69; }
    .text-bark { color: #1a1714; }
    .border-clay { border-color: #3a332d; }
    .bg-bark\/60 { background-color: rgba(26, 23, 20, 0.6); }
    .bg-bark\/50 { background-color: rgba(26, 23, 20, 0.5); }
    .bg-bark\/40 { background-color: rgba(26, 23, 20, 0.4); }
    .bg-bark\/30 { background-color: rgba(26, 23, 20, 0.3); }
    .bg-soil\/40 { background-color: rgba(42, 37, 32, 0.4); }
    .bg-clay\/60 { background-color: rgba(58, 51, 45, 0.6); }
    .bg-clay\/30 { background-color: rgba(58, 51, 45, 0.3); }
    .bg-sprout\/80 { background-color: rgba(106, 191, 105, 0.8); }
    .bg-sprout\/20 { background-color: rgba(106, 191, 105, 0.2); }
    .bg-sprout\/15 { background-color: rgba(106, 191, 105, 0.15); }
    .bg-sprout\/10 { background-color: rgba(106, 191, 105, 0.1); }
    .text-wheat\/60 { color: rgba(200, 182, 142, 0.6); }
    .text-wheat\/50 { color: rgba(200, 182, 142, 0.5); }
    .text-wheat\/40 { color: rgba(200, 182, 142, 0.4); }
    .text-wheat\/30 { color: rgba(200, 182, 142, 0.3); }
    .text-sprout\/80 { color: rgba(106, 191, 105, 0.8); }
    .text-sprout\/70 { color: rgba(106, 191, 105, 0.7); }
    .border-clay\/50 { border-color: rgba(58, 51, 45, 0.5); }
    .border-clay\/40 { border-color: rgba(58, 51, 45, 0.4); }
    .border-clay\/30 { border-color: rgba(58, 51, 45, 0.3); }
    .border-sprout\/50 { border-color: rgba(106, 191, 105, 0.5); }
    .focus\:border-sprout\/50:focus { border-color: rgba(106, 191, 105, 0.5); }
    .hover\:bg-sprout\/80:hover { background-color: rgba(106, 191, 105, 0.8); }
    .hover\:bg-clay\/60:hover { background-color: rgba(58, 51, 45, 0.6); }
    .hover\:text-cream:hover { color: #faf6ef; }
    .placeholder-wheat\/30::placeholder { color: rgba(200, 182, 142, 0.3); }
    .loading-spinner { animation: spin 1s linear infinite; }
    @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
    .widget-grid {
      grid-auto-rows: 100px;
      grid-auto-flow: dense;
    }
	    .widget {
	      position: relative;
	      transition: transform 0.18s ease, box-shadow 0.18s ease;
	      overflow: hidden;
	    }
	    .widget-toolbar { display: none; }
	    .widget-edit-mode .widget-toolbar {
	      display: flex;
	      gap: 6px;
	      position: absolute;
	      top: 10px;
	      right: 10px;
	      z-index: 10;
	      padding: 6px;
	      border-radius: 12px;
	      border: 1px solid rgba(229, 231, 235, 0.95);
	      background: rgba(255, 255, 255, 0.92);
	      backdrop-filter: blur(10px);
	      box-shadow: 0 12px 28px rgba(17,24,39,0.12);
	    }
	    .theme-dark .widget-edit-mode .widget-toolbar {
	      border-color: rgba(36, 42, 51, 0.95);
	      background: rgba(19, 22, 27, 0.78);
	      box-shadow: 0 18px 36px rgba(0,0,0,0.35);
	    }
	    .widget-toolbar button, .widget-toolbar .widget-drag-handle {
	      width: 30px;
	      height: 30px;
	      border-radius: 10px;
	      border: 1px solid rgba(229, 231, 235, 0.9);
	      background: rgba(255,255,255,0.95);
	      color: #374151;
	      display: inline-flex;
	      align-items: center;
	      justify-content: center;
	      font-weight: 700;
	      line-height: 1;
	      cursor: pointer;
	      user-select: none;
	    }
	    .theme-dark .widget-toolbar button,
	    .theme-dark .widget-toolbar .widget-drag-handle {
	      border-color: rgba(36, 42, 51, 0.9);
	      background: rgba(15, 19, 24, 0.95);
	      color: #cbd5e1;
	    }
	    .widget-toolbar button:hover, .widget-toolbar .widget-drag-handle:hover {
	      background: rgba(16, 185, 129, 0.08);
	      border-color: rgba(16, 185, 129, 0.25);
	      color: #047857;
	    }
	    .theme-dark .widget-toolbar button:hover, .theme-dark .widget-toolbar .widget-drag-handle:hover {
	      background: rgba(16, 185, 129, 0.12);
	      border-color: rgba(16, 185, 129, 0.25);
	      color: #34d399;
	    }
	    .widget-drag-handle {
	      cursor: grab;
	    }
	    .widget-edit-mode .widget-drag-handle:active { cursor: grabbing; }
	    .widget-edit-mode .widget { cursor: default; }
	    .widget-edit-mode .widget:active { cursor: grabbing; }
    .widget-remove-btn {
      display: none;
      position: absolute;
      top: 10px;
      left: 10px;
      z-index: 10;
      width: 28px;
      height: 28px;
      border-radius: 9999px;
      border: 1px solid #fecaca;
      background: #fff;
      color: #dc2626;
      font-weight: 700;
      line-height: 1;
    }
    .widget-edit-mode .widget-remove-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .widget-hidden { display: none !important; }
    .widget-library-chip {
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      padding: 10px 12px;
      background: #fff;
    }
    .widget-preview {
      margin-top: 8px;
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      padding: 10px;
      background: #f8fafc;
      min-height: 70px;
    }
    /* Softer contrast for light mode */
    body { background-color: #f7f7f8; }
    .bg-gray-50 { background-color: #f7f7f8 !important; }
    .bg-gray-100 { background-color: #f1f5f9 !important; }
    .border-gray-100 { border-color: #e5e7eb !important; }
    .border-gray-200 { border-color: #e5e7eb !important; }
    .text-gray-400 { color: #7b8794 !important; }
    .text-gray-500 { color: #5f6b7a !important; }
    .text-gray-600 { color: #475466 !important; }
    /* Dark mode overrides (premium) */
    .theme-dark body { background-color: #0d0f12; }
    .theme-dark .bg-white { background-color: #13161b !important; }
    .theme-dark .bg-gray-50 { background-color: #0d0f12 !important; }
    .theme-dark .bg-gray-100 { background-color: #13161b !important; }
    .theme-dark .border-gray-100 { border-color: #1f242c !important; }
    .theme-dark .border-gray-200 { border-color: #242a33 !important; }
    .theme-dark .text-gray-900 { color: #e8ebef !important; }
    .theme-dark .text-gray-800 { color: #d6dbe1 !important; }
    .theme-dark .text-gray-700 { color: #b8bfc9 !important; }
    .theme-dark .text-gray-600 { color: #9aa2ad !important; }
    .theme-dark .text-gray-500 { color: #828a96 !important; }
    .theme-dark .text-gray-400 { color: #6f7886 !important; }
    .theme-dark .hover\:bg-gray-50:hover { background-color: #1b1f26 !important; }
    .theme-dark .card-hover:hover { box-shadow: 0 18px 36px rgba(0, 0, 0, 0.45); }
    .theme-dark .widget-library-chip {
      background: #12161b;
      border-color: #242a33;
      box-shadow: 0 6px 14px rgba(0,0,0,0.2);
    }
    .theme-dark .widget-preview {
      background: #10141a;
      border-color: #242a33;
    }
    .theme-dark .card-hover:hover { box-shadow: 0 10px 22px rgba(0,0,0,0.32); }
    .theme-dark .shadow-md { box-shadow: 0 10px 22px rgba(0,0,0,0.35) !important; }
    .theme-dark .shadow-2xl { box-shadow: 0 24px 48px rgba(0,0,0,0.45) !important; }
    .theme-dark .bg-amber-50 { background-color: #1f2937 !important; }
    .theme-dark .text-amber-800 { color: #fbbf24 !important; }
    .theme-dark input,
    .theme-dark select,
    .theme-dark textarea {
      background-color: #0f1318 !important;
      border-color: #2b313b !important;
      color: #e5e7eb !important;
    }
    .theme-dark input::placeholder,
    .theme-dark textarea::placeholder {
      color: #6b7280 !important;
    }
    .theme-dark .bg-emerald-500 { background-color: #0b7554 !important; }
    .theme-dark .hover\:bg-emerald-600:hover { background-color: #096649 !important; }
    .widget-resize-handle {
      display: none;
      position: absolute;
      z-index: 9;
      touch-action: none;
    }
    .widget-edit-mode .widget-resize-handle { display: block; }
    .widget-resize-handle[data-dir="n"] { top: -2px; left: 10px; right: 10px; height: 8px; cursor: ns-resize; }
    .widget-resize-handle[data-dir="s"] { bottom: -2px; left: 10px; right: 10px; height: 8px; cursor: ns-resize; }
    .widget-resize-handle[data-dir="e"] { right: -2px; top: 10px; bottom: 10px; width: 8px; cursor: ew-resize; }
    .widget-resize-handle[data-dir="w"] { left: -2px; top: 10px; bottom: 10px; width: 8px; cursor: ew-resize; }
    .widget-resize-handle[data-dir="ne"] { top: -2px; right: -2px; width: 12px; height: 12px; cursor: nesw-resize; }
    .widget-resize-handle[data-dir="nw"] { top: -2px; left: -2px; width: 12px; height: 12px; cursor: nwse-resize; }
    .widget-resize-handle[data-dir="se"] { bottom: -2px; right: -2px; width: 12px; height: 12px; cursor: nwse-resize; }
    .widget-resize-handle[data-dir="sw"] { bottom: -2px; left: -2px; width: 12px; height: 12px; cursor: nesw-resize; }
    .widget-edit-mode .widget:hover {
      box-shadow: 0 12px 25px rgba(17, 24, 39, 0.12);
    }
    .widget-ghost { opacity: 0.35; }
    .widget-chosen { transform: scale(1.015); }
    .widget-chart-card {
      display: flex;
      flex-direction: column;
    }
    .widget-chart-area {
      flex: 1;
      min-height: 150px;
      height: auto;
      position: relative;
    }
    .widget-chart-card canvas {
      width: 100% !important;
      height: 100% !important;
      display: block;
    }
    .dashboard-loading-overlay {
      position: fixed;
      inset: 0;
      z-index: 80;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(248, 250, 252, 0.7);
      backdrop-filter: blur(6px);
    }
    .dashboard-loading-overlay.active {
      display: flex;
    }
    .dashboard-loading-card {
      background: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 18px;
      padding: 20px 24px;
      box-shadow: 0 20px 45px rgba(15, 23, 42, 0.12);
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .dashboard-spinner {
      width: 28px;
      height: 28px;
      border-radius: 999px;
      border: 3px solid rgba(16, 185, 129, 0.2);
      border-top-color: #10b981;
      animation: spin 0.9s linear infinite;
    }
    @keyframes spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    @media (max-width: 767px) {
      .widget-grid {
        display: flex !important;
        flex-direction: column;
        gap: 12px;
      }
      #dashboard-widget-grid {
        gap: 12px !important;
      }
      #dashboard-widget-grid .widget {
        width: 100%;
        grid-column: auto !important;
        grid-row: auto !important;
        padding: 1rem !important;
        border-radius: 1rem;
        overflow: visible;
      }
      .widget-chart-area {
        min-height: 180px;
      }
      #dashboard-widget-grid .text-3xl {
        font-size: 1.5rem !important;
        line-height: 2rem !important;
      }
      .widget-edit-mode .widget,
      .widget-edit-mode .widget:active {
        cursor: default !important;
      }
      .widget-edit-mode .widget-resize-handle {
        display: none !important;
      }
    }