/* WEB PANEL PROXY public CSS */
*{box-sizing:border-box;margin:0;padding:0}
body{min-height:100vh;font-family:-apple-system,'Segoe UI',system-ui,sans-serif;color:#ece8e1;background:#0a0a0d;overflow-x:hidden}

/* ── Фон: глубокий, с медленным движением ── */
.bg{position:fixed;inset:0;background:
  radial-gradient(ellipse at 25% 15%,#c9a96214,transparent 50%),
  radial-gradient(ellipse at 75% 85%,#8b735514,transparent 50%),
  radial-gradient(ellipse at 50% 50%,#1a1a2200,transparent 70%),
  linear-gradient(180deg,#0a0a0d 0%,#0d0d12 50%,#08080a 100%);
  animation:bgShift 24s ease-in-out infinite alternate}
@keyframes bgShift{
  0%{background-position:0% 0%,100% 100%,50% 50%,0% 0%}
  100%{background-position:100% 100%,0% 0%,50% 50%,0% 0%}
}

/* ── Тонкая сетка поверх фона ── */
.grid{position:fixed;inset:0;pointer-events:none;opacity:.15;
  background-image:
    linear-gradient(#c9a9620a 1px,transparent 1px),
    linear-gradient(90deg,#c9a9620a 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse at center,#000 20%,transparent 75%)}

main{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 24px;text-align:center}

/* ── Верхняя метка ── */
.eyebrow{display:inline-flex;align-items:center;gap:14px;color:#c9a962;font-size:11px;font-weight:700;letter-spacing:.4em;text-transform:uppercase;margin-bottom:26px;opacity:0;animation:fadeUp 1.2s ease forwards .2s}
.eyebrow::before,.eyebrow::after{content:"";width:36px;height:1px;background:linear-gradient(90deg,transparent,#c9a96288,transparent)}

/* ── Заголовок ── */
h1{font-size:clamp(42px,8vw,88px);line-height:1;letter-spacing:-.05em;font-weight:800;margin-bottom:22px;opacity:0;animation:fadeUp 1.2s ease forwards .4s;
  background:linear-gradient(180deg,#ffffff 0%,#c9a962 60%,#8b7355 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:0 0 60px #c9a96218}
h1 em{font-style:normal;font-weight:300;display:block;font-size:.42em;letter-spacing:.3em;text-transform:uppercase;color:#c9a962;-webkit-text-fill-color:#c9a962;margin-bottom:14px;text-shadow:none}

/* ── Подзаголовок ── */
p{color:#7a7568;font-size:clamp(14px,1.8vw,17px);line-height:1.8;max-width:480px;margin:0 auto 56px;opacity:0;animation:fadeUp 1.2s ease forwards .6s;font-weight:300}

/* ── Часы ── */
.watch-wrap{position:relative;margin-bottom:52px;opacity:0;animation:fadeUp 1.4s ease forwards .8s}
.watch-wrap::before{content:"";position:absolute;inset:-40px;border-radius:50%;background:radial-gradient(circle,#c9a96212,transparent 65%);animation:pulseGlow 4s ease-in-out infinite}
@keyframes pulseGlow{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}

.watch{position:relative;width:200px;height:200px;filter:drop-shadow(0 30px 60px #0009)}

/* Корпус */
.case{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,#2a2a32,#4a4a54,#2a2a32,#1a1a22,#2a2a32);
  padding:6px;box-shadow:0 0 0 1px #c9a96233,inset 0 0 30px #0008}
.case::before{content:"";position:absolute;inset:6px;border-radius:50%;
  background:radial-gradient(circle at 35% 25%,#1e1e26 0%,#0e0e12 70%);
  box-shadow:inset 0 0 40px #000a}
.case::after{content:"";position:absolute;inset:14px;border-radius:50%;border:1px solid #c9a9621a}

/* Безель с тонкой золотой линией */
.bezel{position:absolute;inset:6px;border-radius:50%;border:1px solid #c9a96226;pointer-events:none}
.bezel::after{content:"";position:absolute;inset:3px;border-radius:50%;border:1px solid #c9a96210}

/* Метки */
.mark{position:absolute;top:50%;left:50%;transform-origin:50% 0;background:#c9a96255;border-radius:1px}
.mark.main{width:2.5px;height:13px;background:linear-gradient(180deg,#c9a962cc,#c9a96255)}
.mark.minor{width:1px;height:7px;background:#c9a96233}

/* Стрелки */
.hand{position:absolute;bottom:50%;left:50%;transform-origin:bottom center;border-radius:2px;z-index:3}
.hour{width:5px;height:48px;margin-left:-2.5px;background:linear-gradient(180deg,#ffffff,#c9a962);animation:rot 43200s linear infinite;box-shadow:0 0 8px #c9a96244}
.minute{width:3px;height:68px;margin-left:-1.5px;background:linear-gradient(180deg,#ffffff,#c9a962);animation:rot 3600s linear infinite;box-shadow:0 0 8px #c9a96233}
.second{width:1px;height:78px;margin-left:-0.5px;background:linear-gradient(180deg,#c9a962,transparent);animation:rot 60s steps(60) infinite;box-shadow:0 0 6px #c9a96288;z-index:4}
.second::after{content:"";position:absolute;bottom:-12px;left:50%;transform:translateX(-50%);width:5px;height:5px;border-radius:50%;background:#c9a962;box-shadow:0 0 10px #c9a96288}

/* Центр */
.center{position:absolute;top:50%;left:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#e8d5a8,#c9a962 50%,#8b7355);
  z-index:6;box-shadow:0 0 16px #c9a96266,0 2px 6px #0008}
.center::after{content:"";position:absolute;inset:5px;border-radius:50%;background:#0e0e12}

/* Стеклянный блик */
.glass{position:absolute;inset:6px;border-radius:50%;pointer-events:none;z-index:5;
  background:linear-gradient(135deg,#ffffff0d 0%,transparent 35%,transparent 65%,#ffffff05 100%)}
.glass::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:linear-gradient(120deg,transparent 38%,#ffffff14 50%,transparent 62%);
  background-size:250% 250%;animation:shine 7s ease-in-out infinite}
@keyframes shine{0%,100%{background-position:200% 200%}50%{background-position:-100% -100%}}

@keyframes rot{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* ── Разделитель ── */
.divider{display:flex;align-items:center;gap:14px;margin-bottom:34px;opacity:0;animation:fadeUp 1.2s ease forwards 1s}
.divider::before,.divider::after{content:"";width:60px;height:1px;background:linear-gradient(90deg,transparent,#c9a96244,transparent)}
.divider span{color:#c9a962;font-size:14px;letter-spacing:.3em}

/* ── Нижняя строка ── */
.footer{color:#4a4842;font-size:10px;letter-spacing:.4em;text-transform:uppercase;font-weight:600;opacity:0;animation:fadeUp 1.2s ease forwards 1.2s}
.footer b{color:#c9a96299;font-weight:600}

@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:600px){
  .watch{width:160px;height:160px}
  .hour{height:38px}
  .minute{height:54px}
  .second{height:62px}
  .divider::before,.divider::after{width:36px}
}

[data-wpp-style="wpp-0"]{transform:translate(-50%,0) rotate(0deg)}
[data-wpp-style="wpp-1"]{transform:translate(-50%,0) rotate(6deg)}
[data-wpp-style="wpp-2"]{transform:translate(-50%,0) rotate(12deg)}
[data-wpp-style="wpp-3"]{transform:translate(-50%,0) rotate(18deg)}
[data-wpp-style="wpp-4"]{transform:translate(-50%,0) rotate(24deg)}
[data-wpp-style="wpp-5"]{transform:translate(-50%,0) rotate(30deg)}
[data-wpp-style="wpp-6"]{transform:translate(-50%,0) rotate(36deg)}
[data-wpp-style="wpp-7"]{transform:translate(-50%,0) rotate(42deg)}
[data-wpp-style="wpp-8"]{transform:translate(-50%,0) rotate(48deg)}
[data-wpp-style="wpp-9"]{transform:translate(-50%,0) rotate(54deg)}
[data-wpp-style="wpp-10"]{transform:translate(-50%,0) rotate(60deg)}
[data-wpp-style="wpp-11"]{transform:translate(-50%,0) rotate(66deg)}
[data-wpp-style="wpp-12"]{transform:translate(-50%,0) rotate(72deg)}
[data-wpp-style="wpp-13"]{transform:translate(-50%,0) rotate(78deg)}
[data-wpp-style="wpp-14"]{transform:translate(-50%,0) rotate(84deg)}
[data-wpp-style="wpp-15"]{transform:translate(-50%,0) rotate(90deg)}
[data-wpp-style="wpp-16"]{transform:translate(-50%,0) rotate(96deg)}
[data-wpp-style="wpp-17"]{transform:translate(-50%,0) rotate(102deg)}
[data-wpp-style="wpp-18"]{transform:translate(-50%,0) rotate(108deg)}
[data-wpp-style="wpp-19"]{transform:translate(-50%,0) rotate(114deg)}
[data-wpp-style="wpp-20"]{transform:translate(-50%,0) rotate(120deg)}
[data-wpp-style="wpp-21"]{transform:translate(-50%,0) rotate(126deg)}
[data-wpp-style="wpp-22"]{transform:translate(-50%,0) rotate(132deg)}
[data-wpp-style="wpp-23"]{transform:translate(-50%,0) rotate(138deg)}
[data-wpp-style="wpp-24"]{transform:translate(-50%,0) rotate(144deg)}
[data-wpp-style="wpp-25"]{transform:translate(-50%,0) rotate(150deg)}
[data-wpp-style="wpp-26"]{transform:translate(-50%,0) rotate(156deg)}
[data-wpp-style="wpp-27"]{transform:translate(-50%,0) rotate(162deg)}
[data-wpp-style="wpp-28"]{transform:translate(-50%,0) rotate(168deg)}
[data-wpp-style="wpp-29"]{transform:translate(-50%,0) rotate(174deg)}
[data-wpp-style="wpp-30"]{transform:translate(-50%,0) rotate(180deg)}
[data-wpp-style="wpp-31"]{transform:translate(-50%,0) rotate(186deg)}
[data-wpp-style="wpp-32"]{transform:translate(-50%,0) rotate(192deg)}
[data-wpp-style="wpp-33"]{transform:translate(-50%,0) rotate(198deg)}
[data-wpp-style="wpp-34"]{transform:translate(-50%,0) rotate(204deg)}
[data-wpp-style="wpp-35"]{transform:translate(-50%,0) rotate(210deg)}
[data-wpp-style="wpp-36"]{transform:translate(-50%,0) rotate(216deg)}
[data-wpp-style="wpp-37"]{transform:translate(-50%,0) rotate(222deg)}
[data-wpp-style="wpp-38"]{transform:translate(-50%,0) rotate(228deg)}
[data-wpp-style="wpp-39"]{transform:translate(-50%,0) rotate(234deg)}
[data-wpp-style="wpp-40"]{transform:translate(-50%,0) rotate(240deg)}
[data-wpp-style="wpp-41"]{transform:translate(-50%,0) rotate(246deg)}
[data-wpp-style="wpp-42"]{transform:translate(-50%,0) rotate(252deg)}
[data-wpp-style="wpp-43"]{transform:translate(-50%,0) rotate(258deg)}
[data-wpp-style="wpp-44"]{transform:translate(-50%,0) rotate(264deg)}
[data-wpp-style="wpp-45"]{transform:translate(-50%,0) rotate(270deg)}
[data-wpp-style="wpp-46"]{transform:translate(-50%,0) rotate(276deg)}
[data-wpp-style="wpp-47"]{transform:translate(-50%,0) rotate(282deg)}
[data-wpp-style="wpp-48"]{transform:translate(-50%,0) rotate(288deg)}
[data-wpp-style="wpp-49"]{transform:translate(-50%,0) rotate(294deg)}
[data-wpp-style="wpp-50"]{transform:translate(-50%,0) rotate(300deg)}
[data-wpp-style="wpp-51"]{transform:translate(-50%,0) rotate(306deg)}
[data-wpp-style="wpp-52"]{transform:translate(-50%,0) rotate(312deg)}
[data-wpp-style="wpp-53"]{transform:translate(-50%,0) rotate(318deg)}
[data-wpp-style="wpp-54"]{transform:translate(-50%,0) rotate(324deg)}
[data-wpp-style="wpp-55"]{transform:translate(-50%,0) rotate(330deg)}
[data-wpp-style="wpp-56"]{transform:translate(-50%,0) rotate(336deg)}
[data-wpp-style="wpp-57"]{transform:translate(-50%,0) rotate(342deg)}
[data-wpp-style="wpp-58"]{transform:translate(-50%,0) rotate(348deg)}
[data-wpp-style="wpp-59"]{transform:translate(-50%,0) rotate(354deg)}