/* WEB PANEL PROXY public CSS */
:root {
      --bg: #05070d;
      --card-bg: rgba(9, 14, 24, 0.85);
      --cyan: #00f0ff;
      --green: #00ffa3;
      --red: #ff3366;
      --yellow: #ffd000;
      --text: #e2e8f0;
      --text-dim: #64748b;
      --belt-color: #111827;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
    }

    body {
      min-height: 100vh;
      background-color: var(--bg);
      font-family: 'Inter', sans-serif;
      color: var(--text);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow-x: hidden;
      padding: 24px 16px;
    }

    /* Фоновая кибер-сетка */
    .bg-grid {
      position: fixed;
      inset: 0;
      background: 
        radial-gradient(circle at 50% 15%, rgba(0, 240, 255, 0.08) 0%, transparent 60%),
        radial-gradient(circle at 80% 85%, rgba(0, 255, 163, 0.05) 0%, transparent 50%),
        linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
      background-size: 100% 100%, 100% 100%, 36px 36px, 36px 36px;
      z-index: 0;
      pointer-events: none;
    }

    /* Главная карточка */
    .card {
      position: relative;
      z-index: 2;
      width: 100%;
      max-width: 680px;
      background: var(--card-bg);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(0, 240, 255, 0.25);
      border-radius: 20px;
      padding: 28px 24px;
      box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 35px rgba(0, 240, 255, 0.15);
      text-align: center;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(0, 240, 255, 0.08);
      border: 1px solid rgba(0, 240, 255, 0.35);
      padding: 5px 14px;
      border-radius: 50px;
      font-size: 0.72rem;
      font-weight: 700;
      color: var(--cyan);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin-bottom: 12px;
      box-shadow: 0 0 12px rgba(0, 240, 255, 0.2);
    }

    .logo {
      font-size: 2.2rem;
      line-height: 1;
      margin-bottom: 8px;
      filter: drop-shadow(0 0 15px var(--cyan));
      display: inline-block;
      animation: pulse-logo 2s infinite alternate;
    }

    @keyframes pulse-logo {
      0% { transform: scale(0.95); }
      100% { transform: scale(1.08); filter: drop-shadow(0 0 22px var(--green)); }
    }

    h1 {
      font-size: 1.45rem;
      font-weight: 800;
      margin-bottom: 6px;
      background: linear-gradient(135deg, #ffffff 30%, var(--cyan) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      letter-spacing: -0.02em;
    }

    p.subtitle {
      color: var(--text-dim);
      font-size: 0.86rem;
      margin-bottom: 20px;
    }

    /* ==== ИНТЕРАКТИВНАЯ ЗОНА КОНВЕЙЕРА ==== */
    .conveyor-stage {
      position: relative;
      height: 190px;
      background: #060912;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 14px;
      overflow: hidden;
      margin-bottom: 20px;
      box-shadow: inset 0 0 25px rgba(0,0,0,0.8);
    }

    /* Фоновая разметка стадий */
    .stations-grid {
      position: absolute;
      inset: 0;
      display: grid;
      grid-template-columns: 1.2fr 1fr 1fr 1fr;
      pointer-events: none;
      border-bottom: 2px solid #1a2234;
      height: 140px;
    }

    .station-col {
      border-right: 1px dashed rgba(255, 255, 255, 0.06);
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 8px;
    }

    .station-name {
      font-family: 'Fira Code', monospace;
      font-size: 0.62rem;
      color: var(--text-dim);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    /* Котики-операторы */
    .cat-unit {
      font-size: 1.8rem;
      margin-top: 6px;
      filter: drop-shadow(0 2px 8px rgba(0,0,0,0.8));
      transition: transform 0.15s ease;
      position: relative;
    }

    /* Лапа выбрасывателя */
    .ejector-paw {
      position: absolute;
      top: 50px;
      left: 175px;
      font-size: 2rem;
      transform-origin: top center;
      transform: rotate(-45deg) scale(0);
      transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      z-index: 10;
      pointer-events: none;
    }
    .ejector-paw.active {
      transform: rotate(0deg) scale(1.3);
      filter: drop-shadow(0 0 10px var(--red));
    }

    /* Сварочный лазер котика-ремонтника */
    .laser-beam {
      position: absolute;
      top: 58px;
      left: 375px;
      width: 4px;
      height: 60px;
      background: linear-gradient(to bottom, var(--cyan), #fff);
      box-shadow: 0 0 15px var(--cyan), 0 0 30px #fff;
      transform-origin: top center;
      transform: rotate(20deg) scaleY(0);
      opacity: 0;
      transition: opacity 0.1s, transform 0.15s ease-out;
      z-index: 9;
      pointer-events: none;
    }
    .laser-beam.firing {
      opacity: 1;
      transform: rotate(-15deg) scaleY(1);
      animation: laser-jitter 0.1s infinite alternate;
    }

    @keyframes laser-jitter {
      0% { transform: rotate(-18deg) scaleY(1); filter: drop-shadow(0 0 12px var(--cyan)); }
      100% { transform: rotate(-12deg) scaleY(1.05); filter: drop-shadow(0 0 20px var(--green)); }
    }

    /* Лента конвейера */
    .belt-track {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 48px;
      background: var(--belt-color);
      border-top: 3px solid #1f293d;
      display: flex;
      align-items: center;
      overflow: hidden;
    }

    .belt-rollers {
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.03) 0px,
        rgba(255, 255, 255, 0.03) 14px,
        rgba(0, 0, 0, 0.4) 14px,
        rgba(0, 0, 0, 0.4) 28px
      );
      animation: move-belt 1s linear infinite;
    }

    @keyframes move-belt {
      0% { transform: translateX(0); }
      100% { transform: translateX(-28px); }
    }

    /* Контейнер для вылетающих пакетов */
    #packet-stream {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 5;
    }

    /* Пакет данных */
    .packet {
      position: absolute;
      bottom: 12px;
      left: -60px;
      width: 48px;
      height: 32px;
      border-radius: 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-family: 'Fira Code', monospace;
      font-size: 0.62rem;
      font-weight: 700;
      transition: filter 0.2s, border-color 0.2s;
    }

    /* Состояния пакета */
    .packet.critical {
      background: rgba(255, 51, 102, 0.25);
      border: 1px solid var(--red);
      color: var(--red);
      box-shadow: 0 0 12px rgba(255, 51, 102, 0.4);
    }
    .packet.corrupted {
      background: rgba(255, 208, 0, 0.2);
      border: 1px dashed var(--yellow);
      color: var(--yellow);
      box-shadow: 0 0 10px rgba(255, 208, 0, 0.3);
    }
    .packet.healthy {
      background: rgba(0, 255, 163, 0.25);
      border: 1px solid var(--green);
      color: var(--green);
      box-shadow: 0 0 15px rgba(0, 255, 163, 0.6);
    }

    /* Анимация выброса в корзину */
    .packet.tossed {
      animation: toss-out 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important;
    }

    @keyframes toss-out {
      0% { transform: translateY(0) rotate(0deg); opacity: 1; }
      50% { transform: translateY(-70px) rotate(-90deg) scale(0.9); }
      100% { transform: translateY(120px) rotate(-180deg) scale(0.3); opacity: 0; }
    }

    /* Корзина для мусорных пакетов */
    .trash-chute {
      position: absolute;
      bottom: 2px;
      left: 175px;
      font-size: 1rem;
      opacity: 0.7;
      z-index: 6;
      filter: drop-shadow(0 0 6px var(--red));
    }

    /* Терминал логов ShadowNET */
    .terminal {
      background: rgba(4, 7, 13, 0.9);
      border: 1px solid rgba(0, 240, 255, 0.15);
      border-radius: 10px;
      padding: 10px 14px;
      font-family: 'Fira Code', monospace;
      font-size: 0.76rem;
      text-align: left;
      height: 82px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      gap: 5px;
      margin-bottom: 20px;
      box-shadow: inset 0 2px 10px rgba(0,0,0,0.8);
    }

    .log-row {
      display: flex;
      align-items: center;
      gap: 8px;
      white-space: nowrap;
      animation: slide-up 0.2s ease-out;
    }

    @keyframes slide-up {
      from { opacity: 0; transform: translateY(6px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .tag-eject { color: var(--red); }
    .tag-fix { color: var(--yellow); }
    .tag-ok { color: var(--green); }
    .log-time { color: var(--text-dim); font-size: 0.68rem; }

    /* Метрики */
    .metrics {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-bottom: 20px;
    }

    .metric-box {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 8px;
      padding: 8px 4px;
    }

    .metric-val {
      font-size: 1.15rem;
      font-weight: 700;
      font-family: 'Fira Code', monospace;
    }

    .metric-lbl {
      font-size: 0.65rem;
      color: var(--text-dim);
      text-transform: uppercase;
      margin-top: 2px;
    }

    .line {
      height: 1px;
      width: 100%;
      background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.2), transparent);
      margin-bottom: 14px;
    }

    .footer {
      font-size: 0.74rem;
      color: var(--text-dim);
      letter-spacing: 0.03em;
    }

    .status-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--green);
      font-size: 0.82rem;
      font-weight: 600;
      margin-bottom: 12px;
    }

    .status-dot {
      width: 7px;
      height: 7px;
      background: var(--green);
      border-radius: 50%;
      box-shadow: 0 0 8px var(--green);
      animation: pulse-dot 1s infinite alternate;
    }

    @keyframes pulse-dot {
      0% { opacity: 0.3; }
      100% { opacity: 1; transform: scale(1.3); }
    }

[data-wpp-style="wpp-0"]{color: var(--red);}
[data-wpp-style="wpp-1"]{color: var(--yellow);}
[data-wpp-style="wpp-2"]{color: var(--green);}