:root {
  --bg: #000000;
  --panel: #1a0a10; 
  --neon: #a4044d;
  --muted: #b86c8a;
  --glass: rgba(164, 4, 77, 0.1); 
  --radius: 12px;
  --mono: "Source Code Pro", Consolas, monospace;
}
@import url("../css2");
:root {
  --text-main: #a4044d;
  --bg-dark: #000000;
  --glow: 0 0 10px rgba(164, 4, 77, 0.5);
  --mono: "Source Code Pro", monospace;
}
body {
  background-color: #ffffff;
  color: var(--text-main);
  font-family: var(--mono);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 30px 16px;
}

    *{box-sizing:border-box}
    html,body{
		height:100%;
		margin:0;
		background: #ffffff;
		font-family:var(--mono);
		color:var(--neon);
		-webkit-font-smoothing:antialiased
		}
    
	.wrap{
		max-width:1100px;
		margin:28px auto;
		padding:20px
		}
    
	.grid{
		display:grid;
		grid-template-columns: 1fr 500px;
		gap:20px;
		align-items:start
		}
    @media (max-width:900px){
      .grid{grid-template-columns:1fr;}
      .sidebar{order:2}
      .hero{order:1}
    }
    .hero{
		background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
		padding:20px;
		border-radius: 5px;
		border:1px solid #111111;
		}
    .logo-row{
		display:flex;
		align-items:center;
		gap:16px;
		margin-bottom:12px
		}
		
    .logo {
		width:120px;
		max-width:36%;
		height:auto;
		border-radius:10px;
		padding:6px;
		}
		
    .title{
		font-size:19px;
		font-weight:700;
		color:#f47483;
		}
		
    .subtitle{
		color:var(--muted);
		font-size:14px
		}
		
    .sidebar{
		background: #ffffff;
		padding:18px;
		border-radius: 5px;
		border:1px solid #111111;
		}
		
    .field{
	display:flex;
	flex-direction:column;
	margin-bottom:12px
	}
	
    label{
		font-size:12px;
		color:var(--muted);
		margin-bottom:6px
		}
    input[type=text], select{
	background: #d9d8d9;
	border:1px solid #111111;
	padding:10px;
	border-radius:8px;
	color:var(--neon);
	font-family:var(--mono);
	font-size:15px
	}
    input::placeholder{
		color:rgba(0,255,0,0.18)
		}
    .btn{
		display:inline-block;
	background: #4ddcd8;
	color: #111111;
	padding: 12px 14px;
	border-radius: 25px;
	font-weight:700;
	cursor:pointer;
	font-size:15px
	}
    .btn:disabled{
		opacity:0.35;
		cursor:not-allowed
		}
    .terminal{
		background: #ffffff;
		padding:14px;
		border-radius:5px;
		height:360px;
		overflow:hidden;
		border:1px solid #111111;
		color: #111111;
		position:relative
		}
    .term-head{
		display:flex;
		gap:10px;
		align-items:center;
		margin-bottom:8px
		}
    .term-dots{
		display:flex;
		gap:8px
		}
    .dot{
		width:11px;
		height:11px;
		border-radius:50%
		}
    .dot.red{background:#ff5f56}
    .dot.yellow{background:#ffbd2e}
    .dot.green{background:#27c93f}
    .log{
		height:284px;
		overflow:auto;
		padding-right:8px;
		font-size:14px;
		line-height:1.45
		}
    .line{white-space:pre-wrap}
    .ts{
		color: #111111;
	margin-right:8px;
	font-size:12px
	}
    .info{color:#4dc3ff;}
    .muted{color:#111111}
    .warn{color:#ffb86b}
    .err{color:#ff6b6b}
    .succ{color:#7ef0a4}
    .cursor{
		display:inline-block;
		width:8px;
		height:18px;
		background:var(--neon);
		vertical-align:middle;
		margin-left:6px;
		animation:blink 1s steps(1) infinite
		}
    @keyframes blink{50%{opacity:0}}
    .pbar{
		height:12px;
		background:rgba(255,255,255,0.03);
		border-radius:5px;
		overflow:hidden;
		margin-top:10px;
		border:1px solid rgba(0,255,0,0.03)
		}
    .pfill{
		height:100%;
		width:0%;
		background: #ffffff;
		}
    .meta{
		font-size:12px;
		color:var(--muted);
		margin-top:8px
		}
    .modal-backdrop{
		position:fixed;
		inset:0;
		background:rgba(0,0,0,0.7);
		display:flex;
		align-items:center;
		justify-content:center;
		z-index:9999;
		}
    .modal{
		background:linear-gradient(180deg, #071215, #041017);
		padding:20px;
		border-radius:7px;
		border:1px solid rgba(0,255,0,0.06);
		max-width:420px;
		width:94%;
		text-align:center
		}
    .modal img{
		max-width:180px;
		height:auto;
		margin-bottom:12px
		}
    .modal h3{
	    color:#f47483;
		margin:6px 0;
		font-size:16px}
    .modal p{
		color:#ffffff;
		font-size:14px}
    .modal .verify-btn{margin-top:12px}
    .terminal::after{
		content:"";
		pointer-events:none;
		position:absolute;
		inset:0;
		background-image:linear-gradient(transparent 60%, rgba(0,255,0,0.01) 60%);
		mix-blend-mode:overlay;
		opacity:0.03
		}
    input:focus, select:focus, button:focus{outline:2px solid rgba(0,255,0,0.12);outline-offset:2px}
	

.header {
  display: flex;
  flex-direction: column; 
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  width: 100%;
}
.logo {
  width: 100%;
  max-width: 500px;
  height: auto;
  aspect-ratio: 16 / 6;
  object-fit: contain;
  margin-bottom: 10px;
}
@keyframes glowPulse {
  0% { filter: drop-shadow(0 0 10px rgba(164, 4, 77, 0.4)); }
  50% { filter: drop-shadow(0 0 20px rgba(164, 4, 77, 0.9)); }
  100% { filter: drop-shadow(0 0 10px rgba(164, 4, 77, 0.4)); }
}
.title {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: 0.8px;
}
.subtitle {
  font-size: 0.95rem;
  color: #111111;
  text-align: left;
  max-width: 600px;
  margin: 0 auto 20px;
  line-height: 1.5;
  font-weight: bold;
}
@media (max-width: 480px) {
  .logo {
    max-width: 90%;
    aspect-ratio: 16 / 7;
  }
  .title {
    font-size: 1.4rem;
  }
  .subtitle {
    font-size: 0.85rem;
  }
}

.warning {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #a4044d;
  font-weight: 600;
  background: #ffffff;
  border: 1px solid #a4044d;
  padding: 10px 14px;
  margin-top: 14px;
  border-radius: 5px;
  font-family: "Source Code Pro", monospace;
}
.warn-icon {
  font-size: 1.8rem;
  color: #a4044d;
}

@keyframes blinkIcon {
  0% {
    opacity: 0.5;
    transform: scale(1);
    filter: drop-shadow(0 0 6px rgba(164, 4, 77, 0.7));
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
    filter: drop-shadow(0 0 14px rgba(164, 4, 77, 1));
  }
  100% {
    opacity: 0.7;
    transform: scale(1);
    filter: drop-shadow(0 0 8px rgba(164, 4, 77, 0.8));
  }
}

.thumbnail-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #000000 0%, #a4044d 100%);
  border-radius: 20px;
  box-shadow: 0 0 20px rgba(164, 4, 77, 0.4);
}
.thumbnail-img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 2px solid #a4044d;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  object-fit: cover;
}
.thumbnail-img:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 32px rgba(164, 4, 77, 0.5);
  border-color: #ff0066;
}
@media (max-width: 768px) {
  .thumbnail-container {
    padding: 12px;
  }
  .thumbnail-img {
    border-radius: 12px;
  }
}

.field {
  display: flex;
  flex-direction: column;
  margin-bottom: 18px;
  width: 100%;
  max-width: 420px;
  font-family: monospace;
  font-size: 14px;
  text-align: left;
  color: #111111;
  font-weight: bold;
}
label {
  color: #111111;
  font-family: "Source Code Pro", monospace;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
input[type="text"],
select {
  background-color: #d9d8d9;
  border: 1px solid #111111;
  border-radius: 6px;
  color: #111111;
  font-family: "Source Code Pro", monospace;
  padding: 10px 14px;
  font-size: 0.95rem;
  outline: none;
}
input[type="text"]:focus,
select:focus {
  border-color: #111111;
  color: #111111;
  background: #ffffff;
}
input::placeholder {
  color: #111111;
  font-style: normal;
}
select {
  background-position: calc(100% - 16px) calc(1.1em + 2px),
                       calc(100% - 12px) calc(1.1em + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
select:hover {
  cursor: pointer;
  border-color: #111111;
}
@keyframes crimsonPulse {
  0% { box-shadow: 0 0 6px rgba(164, 4, 77, 0.3); }
  50% { box-shadow: 0 0 14px rgba(255, 10, 108, 0.7); }
  100% { box-shadow: 0 0 6px rgba(164, 4, 77, 0.3); }
}
input:not(:placeholder-shown),
select:not([value=""]) {
}
@media (max-width: 480px) {
  .field {
    max-width: 100%;
  }
  input[type="text"], select {
    font-size: 0.9rem;
    padding: 9px 12px;
  }
  label {
    font-size: 0.85rem;
  }
}

.btn {
  background: #4ddcd8;
  color: #111111;
  border: none;
  padding: 10px 24px;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 25px;
  cursor: pointer;
  letter-spacing: 1px;
  transition: all 0.25s ease;
  font-family: "Source Code Pro", monospace;
  position: relative;
  overflow: hidden;
}
.btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: #4ddcd8;
  transition: 0.7s;
}
.btn:hover::before {
  left: 130%;
}
.btn:hover {
  color: #111111;
  background: #4ddcd8;
  transform: scale(1.05);
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(100%);
  background: #4ddcd8;
  box-shadow: none;
}
#status {
  color: #a4044d;
  font-weight: 600;
  text-shadow: 0 0 8px rgba(164, 4, 77, 0.7);
  animation: blinkStatus 1.2s infinite alternate;
}
@keyframes blinkStatus {
  from { opacity: 0.7; text-shadow: 0 0 5px rgba(164,4,77,0.4); }
  to { opacity: 1; text-shadow: 0 0 12px rgba(164,4,77,0.9); }
}
@media (max-width: 480px) {
  .btn {
    width: 100%;
    padding: 12px;
    font-size: 0.95rem;
  }
}

@keyframes reflectionWave {
  0% { opacity: 0.4; transform: scaleY(-1) translateY(3px); }
  100% { opacity: 0.7; transform: scaleY(-1) translateY(-3px); }
}
@keyframes glowLogo {
  0% { filter: drop-shadow(0 0 15px rgba(164,4,77,0.4)); }
  100% { filter: drop-shadow(0 0 35px rgba(164,4,77,1)); }
}
@keyframes floatLogo {
  0% { transform: translateY(-4px) scale(1); opacity: 0.95; }
  100% { transform: translateY(4px) scale(1.02); opacity: 1; }
}

@keyframes scanMove {
  0% { top: -60%; }
  100% { top: 120%; }
}

@keyframes glowPulse {
  0% { box-shadow: 0 0 25px rgba(164,4,77,0.2); }
  100% { box-shadow: 0 0 65px rgba(164,4,77,0.9); }
}
.typing-text {
  font-size: 1rem;
  color: #a4044d;
  margin-top: 14px;
  text-shadow: 0 0 10px rgba(164,4,77,0.9);
  letter-spacing: 1px;
  display: inline-block;
  overflow: hidden;
  border-right: 2px solid #a4044d;
  white-space: nowrap;
  animation: blinkCursor 0.8s steps(1) infinite;
}
@keyframes blinkCursor {
  50% { border-color: transparent; }
}

.instructions1{
  font-family: monospace;
  font-size: 14px;
  text-align: left;
  color: #111111;
  margin-bottom: 35px;
}

.responsive {
  max-width: 100%;
  height: auto;
  border-radius: 3px;
}

.cmd-window1 {
    text-align: left;
    margin-top: 5px;
  }