/* ------------------------------
   Global Variables & Base Styles
------------------------------ */
:root{
  --yellow:#ffd84d;
  --yellow-border:#c79b00;
  --page-bg:#e6e6e6;
  --page-border:#bfbfbf;
  --green:#1f9a37;
  --text:#111;
  --muted:#444;
}

*{ box-sizing:border-box }

body{
  margin:0;
  font-family:"Trebuchet MS",Tahoma,Verdana,Arial,sans-serif;
  background: var(--page-bg);
  color: var(--text);
}

/* ------------------------------
   Layout & Navigation
------------------------------ */
.neo-shell{ 
  display:grid; 
  grid-template-columns:220px 1fr; 
  min-height:100dvh; 
}

.neo-nav{
  background: var(--yellow);
  border-right: 2px solid var(--yellow-border);
  padding: 12px 10px;
}

.neo-clock{
  background: #fff3b5;
  border: 2px solid var(--yellow-border);
  padding: 5px 5px; 
  text-align:center; 
  font-size:14px;
}

.neo-brand{
  background:#fff3b5; 
  border:2px solid var(--yellow-border); 
  border-radius:6px;
  padding:6px 8px; 
  margin-bottom:10px; 
  text-align:center; 
  font-weight:900; 
  text-transform: lowercase;
}

.neo-menu{ 
  display:grid; 
  gap:8px; 
  margin:10px 0 16px 
}

.neo-link{
  display:flex; 
  align-items:center; 
  gap:8px; 
  text-decoration:none; 
  color:#2b2b2b;
  background:#ffefad; 
  border:2px solid var(--yellow-border); 
  border-radius:6px; 
  padding:6px 8px;
  font-weight:700;
}

.neo-link.danger{ color:#a11313 }

/* ------------------------------
   Main Content Area
------------------------------ */
.neo-main{ 
  background:#fff; 
  border-left:1px solid var(--page-border); 
  padding:16px; 
}

.neo-header{ 
  display:flex; 
  align-items:center; 
  gap:12px; 
  margin-bottom:10px 
}

.neo-logo{ 
  width:60px; 
  height:60px 
}

h1{ font-size:26px; margin:0 }

.tag{ 
  color: var(--muted); 
  margin:2px 0 0 
}

/* ------------------------------
   Card & Section Styling
------------------------------ */
.neo-card{
  border: 2px solid var(--page-border);
  border-radius: 8px;
  padding: 10px;
  margin: 0 0 14px;
  background: #fff;
}

.neo-section {
  background: var(--green);
  color: #fff;
  font-size: 16px;
  padding: 6px 10px;
  margin: -10px -10px 10px;
  font-weight: 900;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

/* ------------------------------
   Form Controls & Inputs
------------------------------ */
.controls{ display:grid; gap:10px }

.row{ 
  display:grid; 
  grid-template-columns: 1fr 1fr; 
  gap:10px 
}
.row.three{ grid-template-columns: 1fr 1fr 1fr }
.row.four{ grid-template-columns: 1fr 1fr 1fr 1fr }

label{ 
  font-weight:700; 
  font-size:.95rem 
}

select, 
input[type="text"], 
input[type="number"]{
  width:100%; 
  border:2px inset #d5d5d5; 
  border-radius:4px; 
  padding:6px 8px; 
  background:#fff; 
  color:#222;
}

select:focus, 
input:focus{ outline:2px solid #8fc6ff }

/* ------------------------------
   Custom Checkbox Styling
------------------------------ */
.check {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  background: #fff;
  border: 2px solid #999;
  box-shadow: 1px 1px 0 #ccc;
  border-radius: 0; 
  font-weight: normal;
  cursor: pointer;
}

.check input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: initial; /* resets to browser default */
}

.check:hover { background: #f7f7f7; }

/* ------------------------------
   Status Badges
------------------------------ */
.badge {
  background: #fff3b5;
  border: 2px solid var(--yellow-border);
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 800;
}

/* ------------------------------
   Buttons
------------------------------ */
.actions{ 
  display:flex; 
  gap:10px; 
  align-items:center; 
  flex-wrap:wrap 
}

/* Base retro button style */
.neo-btn {
  background: #fff;
  border: 2px solid #666;
  box-shadow: 2px 2px 0 #aaa; 
  border-radius: 0; 
  padding: 6px 12px;
  font-weight: bold;
  cursor: pointer;
}

.neo-btn:hover { background: #f7f7f7; }

.neo-btn:active {
  box-shadow: 1px 1px 0 #aaa;
  transform: translate(1px, 1px);
}

/* Generate button - rainbow hover effect */
#generate {
  border: 2px solid #555;
  box-shadow: 2px 2px 0 #aaa;
  font-weight: bold;
}

#generate:hover {
  background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
  background-size: 400% 400%;
  color: #fff;
  animation: rainbowShift 4s ease infinite;
  filter: brightness(1.1);
}

@keyframes rainbowShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ------------------------------
   Results & Footer
------------------------------ */
.results{ 
  display:grid; 
  gap:10px; 
  grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); 
}

.name{
  border:2px inset #d5d5d5; 
  border-radius:8px; 
  padding:8px; 
  background:#fff;
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  gap:8px;
}

.neo-footer{ 
  color:#666; 
  margin-top:8px; 
  text-align:center 
}