html, body {
      height: 100%;
      margin: 0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
      background: #524d4d; 
      color: #e2e8f0;
    }
    .app {
      display: grid;
      grid-template-rows: auto 1fr auto;
      height: 100%;
    }
    header {
      padding: 10px 16px;
      border-bottom: 1px solid #334155;
      display: flex;
      gap: 12px;
      align-items: center;
    }
    header h1 {
      font-size: 18px;
      margin: 0 12px 0 0;
      color: #f8fafc;
    }
    button {
      background: #22c55e;
      color: #06240f;
      border: none;
      border-radius: 6px;
      padding: 8px 12px;
      font-weight: 600;
      cursor: pointer;
    }
    button:hover {
      filter: brightness(1.05);
    }
    button.secondary {
      background: #0ea5e9;
      color: #06243a;
    }
    #map {
      width: 100%;
      height: 100%;
    }
    .panel {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      padding: 10px 16px;
      border-top: 1px solid #334155;
      background: #524d4d;
      font-size: 14px;
    }
    .card {
      background: #4d5158;
      border: 1px solid #374151;
      border-radius: 8px;
      padding: 10px 12px;
    }
    .row {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 6px 0;
    }
    .label {
      color: #9ca3af;
    }
    .value {
      font-weight: 700;
      color: #f8fafc;
    }
    .hint {
      color: #FFFFFF;
      font-size: 13px;
    }
    .ol-attribution, .ol-zoom {
      filter: invert(0.88) hue-rotate(180deg);
    }
	.bw {
		filter: grayscale(100%) brightness(1.1) contrast(0.8);
	}
	.darkish {
		filter: brightness(1.05) invert(100%) hue-rotate(180deg);
	}
	.hint .info { 
		display:inline-block; 
		width: 18px; 
		height: 18px; 
		border-radius: 50%; 
		background:#ffeb3bb0; 
		color:#031a25; 
		font-weight:700; 
		text-align:center; 
		line-height:18px; 
	}
    .ol-attribution, .ol-zoom { filter: invert(0.88) hue-rotate(180deg); }
	.card.success {
		background: #064e3b;           /* tumši zaļš */
		border-color: #10b981;         /* zaļā maliņa */
	}
	.card.success .label { color: #d1fae5; }   /* gaiši zaļš teksts */
	.card.success .value { color: #ecfdf5; }   /* gandrīz balts teksts */
	.pc-label {
		margin-left: 8px;
		color: #e2e8f0;
		white-space: nowrap;
	}
	.pc-select {
		margin-left: 6px;
		background: #0b1220;
		color: #e2e8f0;
		border: 1px solid #334155;
		border-radius: 6px;
		padding: 4px 8px;
	}
	.pc-display {
		margin-left: 8px;
		color: #a5b4fc;
		font-weight: 700;
	}
	#snowCanvas {
		position: fixed;
		inset: 0;          /* top:0; right:0; bottom:0; left:0 */
		width: 100%;
		height: 100%;
		z-index: 9999;     /* virs visa, bet zem modāliem, ja vajag pielāgot */
		pointer-events: none;  /* lai klikšķi iet cauri uz karti un pogām */
	}