:root { 
    --crna:#2b2d42;
    --siva:#8d99ae;
    --bela:#edf2f4;
    --crvena:#ef233c;
    --crvena2:#d90429;

  --angle: 45deg;
  --opacity: 0.5;

  --bg: #2b2d42;
  --secondary-bg: #2c2c38;
  --accent: #c4b550;
  --secondary-accent: #958831;
  --text: #dedfd6;
  --secondary-text: #d8ded3;
  --text-3: #a0aa95;
  --border-light: #20202a;
  --border-dark: #292c21;
  --disabled-text: #292c21;
  --disabled-text-shadow: #75806f;
  --outline: #000;
  --slider: #7f8c7f;
  --slider-bg: #1f1f1f;
  --scrollbar-track: #5a6a50;
}

/*---------- BUTTON NEW V1 --------------
--------------------------------------------*/
.buttonN1 {
  min-height: 43px;
  max-width: 20%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: relative;
  cursor: pointer;
  background: linear-gradient(
    90deg,
    rgba(239, 35, 60, 0.5) -12.74%,
    rgba(217, 4, 41, 0.271) 56.76%
  );
  border: 2px solid #8d99ae;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  overflow: hidden;
  transition: all 0.4s ease;
  backdrop-filter: blur(0px); /* start bez blur-a */
}

/* Pseudo-elementi */
.buttonN1:before {
  content: "";
  width: 4px;
  height: 28px;
  background: #19173b;
  border: 2px solid #8d99ae;
  transform: rotate(-45deg);
  position: absolute;
  border-bottom-left-radius: 10px;
  border-top-left-radius: 10px;
  bottom: -7px;
  left: 4px;
  transition: all 0.4s ease;
}

.buttonN1:after {
  content: "";
  position: absolute;
  left: -2px;
  bottom: -2px;
  border-top: 15px solid transparent;
  border-left: 15px solid #8d99ae;
  transition: all 0.4s ease;
}

/* Hover efekat - stakleni look */
.buttonN1:hover {
  background: rgba(255, 255, 255, 0.15); /* poluprovidni sloj */
  backdrop-filter: blur(6px); /* pravi stakleni efekat */
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-3px);
}

/*---------- MAP  --------------
--------------------------------------------*/


.rainbow {
  text-align: center;
  font-size: 1.5em;

  --border-size: 0.3rem;
  border: var(--border-size) solid transparent;

  /* Paint an image in the border */
  border-image: conic-gradient(
      from var(--angle),
      var(--crna) 0deg 90deg,
      var(--crvena2) 90deg 180deg,
      var(--crna) 180deg 270deg,
      var(--crvena2) 270deg 360deg
    )
    1 stretch;
  background: transparent;
}

@property --opacity {
  syntax: "<number>";
  initial-value: 0.5;
  inherits: false;
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes opacityChange {
  to {
    --opacity: 1;
  }
}

@keyframes rotate {
  to {
    --angle: 360deg;
  }
}

.rainbow {
  animation: rotate 7s linear infinite, opacityChange 6s infinite alternate;
}

/*---------- IP i Copy Button + Alert --------------
--------------------------------------------*/
        #ip-address {
            display: flex;
            align-items: center;
            background: transparent;
            padding: 0px 10px;
            border-bottom: 0px solid var(--crvena);
        }
        
        .ip-text {
            margin-right: 5px;
        }
        
        .copy-icon {
            background: none;
            border: none;
            cursor: pointer;
            padding: 0;
            margin-left: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            transition: background 0.2s;
            outline: none;
        }
        button:focus {
            outline: none;
            border:none;
        }
        .copy-icon:focus-visible {
            box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.5);
        }
        .copy-icon:hover {
            background: transparent;
            color: var(--crvena);
        }
        
        .copy-icon svg {
            width: 16px;
            height: 16px;
            fill: #6c757d;
        }
        .copy-icon svg:active {
            border: none;
        }
        .copy-icon.copied svg {
            fill: #28a745;
        }
        

/*---------- CS16 Progress Bar --------------
--------------------------------------------*/
        .cs-progress-bar {
            background-color: #2c2c38;
            border: 1px solid;
            border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
            height: 24px;
            padding: 3px;
            width: 260px;
            overflow: hidden;
        }

        .cs-progress-bar .bars {
            background-image: linear-gradient(to right, var(--crvena) 8px, transparent 2px);
            background-size: 12px 16px;
            height: 100%;
            width: 0%;
            transform-origin: left center;
        }

        /* Animacija za punjenje progress bara */
        @keyframes fillProgress {
            0% {
                width: 0%;
            }
            100% {
                width: 100%;
            }
        }

        .cs-progress-bar .bars.animate {
            animation: fillProgress 3s linear forwards;
        }

        /* Custom Alert */
        .custom-alert {
            position: fixed;
            top: 30px;
            left: 50%;
            transform: translateX(-50%) translateY(-20px);
            background-color: var(--bg);
            border: 1px solid;
            border-color: var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            padding: 15px 20px;
            min-width: 280px;

  font-family: "Orbitron", sans-serif;
  font-weight: 400;
        }

        .custom-alert.show {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(0);
        }

        .alert-content {
            display: flex;
            align-items: center;
            gap: 12px;
            width: 100%;
        }

        .alert-icon {
            width: 22px;
            height: 22px;
            fill: var(--crvena);
        }

        .alert-message {
            color: var(--text);
            font-size: 14px;
            flex: 1;
        }


        /* Responsive adjustments */
        @media (max-width: 480px) {
            .custom-alert {
                top: 20px;
                left: 20px;
                right: 20px;
                transform: translateY(-20px);
                min-width: auto;
            }
            
            .custom-alert.show {
                transform: translateY(0);
            }
            
            .cs-progress-bar {
                width: 100%;
            }
        }

/*---------- Ispravke  --------------
--------------------------------------------*/