/* Portal styles: responsive, accessible, modern */
:root{
  --bg:#071021; --card:#0f2740; --muted:#9fb0c4; --accent:#e94560; --accent-2:#533483; --glass: rgba(255,255,255,0.04);
}
*{box-sizing:border-box}
body{font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, 'Helvetica Neue', Arial; background:linear-gradient(180deg,#050617 0%, #071021 100%); color:#e6f0fa; margin:0}
.container{max-width:1100px;margin:0 auto;padding:24px}
.container.small{max-width:700px;margin:0 auto;padding:24px}
.nav-wrap{position:sticky;top:0;z-index:60;background:linear-gradient(90deg, rgba(7,16,33,0.85), rgba(8,25,46,0.85));backdrop-filter: blur(6px);border-bottom:1px solid rgba(255,255,255,0.03)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 18px}
.brand{font-weight:700;color:var(--accent);text-decoration:none;font-size:1.1rem}
.nav-toggle{display:none;background:transparent;border:0;color:var(--muted);font-size:1.2rem}
.nav-menu{list-style:none;display:flex;gap:12px;align-items:center;margin:0;padding:0}
.nav-item a,.drop-btn{color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:8px;font-size:0.95rem;background:transparent;border:0;cursor:pointer;font-family:inherit;white-space:nowrap}
.nav-item a:hover,.drop-btn:hover{color:#fff;background:var(--glass)}
.dropdown{position:relative}
.dropdown-panel{
  position: absolute;
  left: 0;
  top: 100%;
  background: linear-gradient(180deg,#072033,#062033);
  padding: 14px;
  padding-top: 20px;
  margin-top: -6px;
  border-radius: 10px;
  display: none;
  gap: 12px;
  border: 1px solid rgba(255,255,255,0.03);
  min-width: 160px;
  box-shadow: 0 10px 30px rgba(5,8,12,0.6);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}

/* Show on hover or keyboard focus */
.dropdown:hover .dropdown-panel,
.dropdown:focus-within .dropdown-panel {
  display: block;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.dropdown-column{display:flex;flex-direction:column;gap:4px}
.dropdown-column h4{margin:0 0 6px 0;color:#bcd3e8;font-size:0.85rem}
.dropdown-column a{display:block;color:var(--muted);text-decoration:none;padding:6px 6px;border-radius:6px}
.dropdown-column a:hover{background:var(--glass);color:#fff}
.hero{display:flex;gap:32px;align-items:center;padding:36px 0}
.hero-inner{flex:1}
.hero h1{font-size:2.1rem;margin:0 0 8px;color:#fff}
.lead{color:var(--muted);font-size:1.05rem}
.hero-cta{margin-top:16px;display:flex;gap:10px}
.btn{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;padding:10px 14px;border-radius:10px;text-decoration:none;border:0;font-weight:600}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06)}
.btn.small{padding:6px 10px;font-size:0.9rem}
.btn.danger{background:#e04545}
.hero-illustration{width:280px;height:160px;background:linear-gradient(135deg,#0f2b46,#1a3a52);border-radius:12px}
.services{margin-top:24px}
.services-grid{display:grid;grid-template-columns:300px 1fr;gap:16px;margin-top:12px}
.game-servers-card{grid-column:1}
@media (max-width:900px){
  .services-grid{grid-template-columns:1fr}
  .game-servers-card{grid-column:1}
}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:16px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);display:flex;flex-direction:column;gap:8px}
.card-icon{font-size:28px}
.card h3{margin:0;font-size:1.05rem}
.card p{margin:0;color:var(--muted);font-size:0.95rem}
.card-actions{margin-top:auto;display:flex;gap:8px;align-items:center}
.server-status{color:var(--muted);font-size:0.9rem}
.game-servers-list{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.game-server-item{background:rgba(255,255,255,0.02);padding:12px;border-radius:8px;border:1px solid rgba(255,255,255,0.05);display:flex;gap:12px;align-items:flex-start}
.game-server-item.online{background:rgba(158,229,158,0.08);border-color:rgba(158,229,158,0.2)}
.game-server-icon{width:48px;height:48px;flex-shrink:0;border-radius:6px;overflow:hidden;background:linear-gradient(135deg,#1a472a,#0d291a)}
.game-server-icon img{width:100%;height:100%;object-fit:cover}
.game-server-content{flex:1;min-width:0}
.game-server-item h4{margin:0 0 6px 0;font-size:0.95rem;color:#e0e0e0}
.game-server-address{font-size:0.8rem;color:var(--muted);margin-top:6px;font-family:monospace;background:rgba(0,0,0,0.2);padding:4px 6px;border-radius:4px;display:inline-block}
.game-server-info{display:flex;justify-content:space-between;align-items:center;font-size:0.85rem;flex-wrap:wrap;gap:8px}
.game-server-status{display:flex;align-items:center;gap:6px}
.game-server-status.online{color:#9ee59e}
.game-server-status.offline{color:#e07b7b}
.game-server-players{color:var(--muted)}
.status-indicator{width:8px;height:8px;border-radius:50%;display:inline-block}
.status-indicator.online{background:#9ee59e;box-shadow:0 0 8px rgba(158,229,158,0.6)}
.status-indicator.offline{background:#e07b7b}
.site-footer{padding:20px 0;text-align:center;color:var(--muted);border-top:1px solid rgba(255,255,255,0.02)}
.profile-panel{display:flex;flex-direction:column;gap:6px;padding:8px;background:#052034;border-radius:8px;border:1px solid rgba(255,255,255,0.03)}
.hidden{display:none !important}

/* Responsive */
@media (max-width:900px){
  .nav-toggle{display:block}
  .nav-menu{position:absolute;right:12px;top:64px;background:#041426;padding:12px;border-radius:10px;flex-direction:column;align-items:stretch;display:none}
  .nav-menu.open{display:flex}
  .nav-item{width:100%}
  .nav-item a,.drop-btn{width:100%;text-align:left;display:block}
  .dropdown-panel{position:static;min-width:unset}
  .dropdown-panel.open,
  .drop-btn[aria-expanded="true"] + .dropdown-panel{
    display:block;
  }
  .hero{flex-direction:column}
}

/* Accessibility focus */
a:focus, button:focus{outline:3px solid rgba(233,69,96,0.18);outline-offset:2px}

/* Simple utility */

/* Recipe form styling */
.recipe-form{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:32px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);margin:0 auto 48px auto}
.form-group{margin-bottom:24px}
.form-group label{display:block;margin-bottom:10px;color:#bcd3e8;font-weight:500;font-size:0.95rem}
.form-group input,.form-group textarea,.form-select{width:100%;padding:12px 14px;background:rgba(0,0,0,0.3);border:1px solid rgba(255,255,255,0.1);border-radius:8px;color:#e6f0fa;font-size:0.95rem;font-family:inherit;transition:border-color 0.2s}
.form-group input:focus,.form-group textarea:focus,.form-select:focus{outline:none;border-color:var(--accent)}
.form-group textarea{resize:vertical;min-height:140px;line-height:1.6}
.form-select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239fb0c4' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}
.form-help{font-size:0.85rem;color:var(--muted);margin-top:6px;margin-bottom:0}
.form-row{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.form-row-3{grid-template-columns:repeat(3,1fr)}
.ingredients-box{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;min-height:40px}
.ingredient-item{display:flex;gap:8px;align-items:center}
.ingredient-item input{flex:1}
.ingredient-item button{background:transparent;border:1px solid rgba(255,255,255,0.1);color:var(--muted);padding:8px 12px;border-radius:6px;cursor:pointer;transition:all 0.2s;flex-shrink:0}
.ingredient-item button:hover{background:rgba(233,69,96,0.2);border-color:var(--accent);color:var(--accent)}
.file-input{padding:10px !important;cursor:pointer}
.form-actions{display:flex;gap:12px;margin-top:32px;justify-content:center}
@media (max-width:700px){
  .recipe-form{padding:24px 20px}
  .form-row,.form-row-3{grid-template-columns:1fr}
  .form-actions{flex-direction:column}
  .form-actions button{width:100%}
}

/* Recipe filters */
.recipe-filters{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:24px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);margin-bottom:24px}
.filter-group{margin-bottom:16px}
.filter-group label{display:block;margin-bottom:8px;color:#bcd3e8;font-weight:500;font-size:0.9rem}
.filter-input,.filter-select{width:100%;padding:10px 12px;background:rgba(0,0,0,0.3);border:1px solid rgba(255,255,255,0.1);border-radius:8px;color:#e6f0fa;font-size:0.95rem;font-family:inherit;transition:border-color 0.2s}
.filter-input:focus,.filter-select:focus{outline:none;border-color:var(--accent)}
.filter-select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239fb0c4' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}
.filter-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.filter-actions{display:flex;justify-content:space-between;align-items:center;margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,0.05)}
.result-count{color:var(--muted);font-size:0.9rem}
.recipe-meta{color:var(--muted);font-size:0.9rem;margin:4px 0}
@media (max-width:900px){
  .filter-row{grid-template-columns:1fr}
}



/* Enhanced Recipe Card Styles */
.recipe-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  height: 420px;
}

.recipe-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.recipe-card-image {
  width: 100%;
  height: 66.67%;
  object-fit: cover;
  background: linear-gradient(135deg, #f5f5fa 0%, #e8e8f0 100%);
}

.recipe-card-content {
  padding: 20px;
  height: 33.33%;
  display: flex;
  flex-direction: column;
  background: #0f2b46;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.recipe-card-title {
  margin: 0 0 12px 0;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
}

.recipe-card-title a {
  color: var(--text);
  text-decoration: none;
}

.recipe-card-title a:hover {
  color: var(--primary);
}

.recipe-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.recipe-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(158, 229, 158, 0.15);
  border-radius: 12px;
  font-size: 0.8rem;
  color: var(--text);
  font-weight: 500;
}

.recipe-badge.method {
  background: rgba(100, 150, 255, 0.15);
}

.recipe-meta-row {
  display: flex;
  gap: 16px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,0.06);
  font-size: 0.85rem;
  color: var(--muted);
}

.recipe-meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Improved grid for recipe cards */
.recipes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

@media (max-width: 768px) {
  .recipes-grid {
    grid-template-columns: 1fr;
  }
  
  .recipe-card {
    height: 360px;
  }
  
  .recipe-card-image {
    height: 66.67%;
  }
  
  .recipe-card-content {
    height: 33.33%;
    padding: 16px;
  }
}

/* Recipe Detail Page Styles */
.recipe-detail {
  max-width: 800px;
  margin: 0 auto;
  background: #0f2b46;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

.recipe-hero-image {
  width: 100%;
  height: 400px;
  object-fit: cover;
  display: block;
}

.recipe-header {
  padding: 32px;
  border-bottom: 2px solid rgba(255,255,255,0.1);
}

.recipe-header h1 {
  margin: 0 0 16px 0;
  font-size: 2.25rem;
  line-height: 1.2;
  color: white;
}

.recipe-section {
  padding: 32px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.recipe-section:last-of-type {
  border-bottom: none;
}

.recipe-section h2 {
  margin: 0 0 20px 0;
  font-size: 1.5rem;
  color: #9ee59e;
}

.ingredients-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.ingredients-list li {
  padding: 12px 16px;
  background: rgba(158, 229, 158, 0.15);
  border-radius: 8px;
  border-left: 3px solid rgba(158, 229, 158, 0.7);
  color: white;
}

.ingredients-list li::before {
  content: "✓ ";
  color: var(--primary);
  font-weight: bold;
  margin-right: 8px;
}

.instructions-content {
  line-height: 1.8;
  font-size: 1.05rem;
  color: rgba(255,255,255,0.9);
}

.recipe-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tag {
  padding: 6px 12px;
  background: rgba(0,0,0,0.05);
  border-radius: 16px;
  font-size: 0.875rem;
  color: var(--muted);
  font-weight: 500;
}

@media (max-width: 768px) {
  .recipe-hero-image {
    height: 250px;
  }
  
  .recipe-header {
    padding: 24px;
  }
  
  .recipe-header h1 {
    font-size: 1.75rem;
  }
  
  .recipe-section {
    padding: 24px;
  }
}

/* Ingredient Row Styling */
.ingredient-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.ingredient-row input,
.ingredient-row select {
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  background: #0f2b46;
  color: white;
  font-size: 0.95rem;
}

.ingredient-row select {
  cursor: pointer;
}

.ingredient-row select option {
  background: #0f2b46;
  color: white;
}

.ingredient-row input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.ingredient-amount {
  text-align: center;
}

@media (max-width: 768px) {
  .ingredient-row {
    flex-wrap: wrap;
  }
  
  .ingredient-row input[style*="flex:1"] {
    width: 100%;
    order: 3;
  }
}