* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Kanit', sans-serif; }

body {
  background: #0a0706;
  color: #f5e6d3;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.lava-bg {
  position: fixed;
  inset: 0;
  background: url('../assets/img/lava_texture.webp') center/cover no-repeat;
  z-index: -2;
  filter: brightness(0.6);
}

.lava-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(20,10,5,0.35) 0%, rgba(10,5,0,0.92) 100%);
}

.embers {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

.ember {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #ff6b00;
  border-radius: 50%;
  box-shadow: 0 0 6px #ff4500;
  animation: floatUp linear infinite;
}

@keyframes floatUp {
  0% { transform: translateY(100vh) translateX(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-10vh) translateX(100px); opacity: 0; }
}

.navbar {
  height: 56px;
  flex-shrink: 0;
  z-index: 100;
  background: rgba(14, 8, 5, 0.96);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,107,0,0.35);
}

.nav-inner { max-width: 1320px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; height: 100%; }
.logo { display:flex; align-items:center; gap:8px; text-decoration:none; color:#ff8c2e; font-weight:700; font-size:18px; }
.logo img { height: 32px; }

.menu { display:flex; gap: 16px; }
.menu a { font-size: 13.5px; padding: 6px 10px; color:#c9b8a5; text-decoration:none; border-radius: 8px; }
.menu a:hover { background: rgba(255,107,0,0.15); color:#ff8c2e; }

.auth { display:flex; gap:8px; align-items:center; }
.btn { padding: 7px 14px; border-radius: 9px; text-decoration:none; font-weight: 600; transition: .2s; border:none; cursor:pointer; font-size:13px; }
.btn-lava { background: linear-gradient(180deg, #ff8c2e, #ff2a00); color: white; box-shadow: 0 2px 12px rgba(255,69,0,0.4); }
.btn-lava:hover { transform: translateY(-1px); }
.btn-dark { background: rgba(255,255,255,0.07); color:#f5e6d3; border:1px solid rgba(255,255,255,0.12); }

.page-wrapper { flex: 1; display:flex; flex-direction:column; min-height: 0; }

.container { max-width: 1200px; margin: 0 auto; padding: 20px; position: relative; z-index: 5; width: 100%; }
.card { background: rgba(25,14,10,0.88); border: 1px solid rgba(255,107,0,0.25); border-radius: 16px; padding: 24px; backdrop-filter: blur(10px); box-shadow: 0 8px 32px rgba(0,0,0,0.6); }

.hero { flex: 1; position: relative; background: url('../assets/img/lava_hero.webp') center/cover no-repeat; display:flex; align-items:center; justify-content:center; min-height:0; overflow:hidden; }
.hero::before { content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(10,5,0,0.1) 0%, rgba(10,5,0,0.05) 45%, rgba(10,5,0,0.45) 75%, rgba(5,3,2,0.92) 100%); }
.hero .server-status-left { position:absolute; left:18px; top:18px; z-index:10; background: linear-gradient(180deg, rgba(22,14,10,0.94), rgba(12,7,5,0.9)); border:1px solid rgba(255,107,0,0.32); border-left:3px solid #ff6b00; border-radius:11px; padding:11px 14px; min-width:210px; }
.server-status-left .status-item { font-size:12.5px; color:#c9b8a5; display:flex; align-items:center; gap:6px; line-height:1.5; }
.server-status-left .status-item span { color:#ffb26a; font-weight:700; }
.dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.dot.on { background:#22ff7a; box-shadow: 0 0 8px #22ff7a; }
.dot.off { background:#ff4a4a; box-shadow: 0 0 8px #ff4a4a; }

.hero-content { position:relative; z-index:4; text-align:center; padding:20px; }
.hero-logo { width: 420px; max-width: 68vw; max-height: 36vh; object-fit: contain; filter: drop-shadow(0 4px 18px rgba(0,0,0,0.8)); animation: floatLogo 3.5s ease-in-out infinite; }
@keyframes floatLogo { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }
.hero-content p { margin-top:14px; color:#ffdcb8; font-size:14.5px; letter-spacing:0.2px; text-shadow:0 2px 10px #000; opacity:0.92; }
.hero-actions { margin-top: 18px; display:flex; gap:12px; justify-content:center; }

.grid-3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; }
.form-box { max-width: 480px; margin:40px auto; }
.form-box input,
.form-box select {
  width:100%; padding:12px 16px; margin:8px 0 16px; background: rgba(0,0,0,0.5); border:1px solid rgba(255,107,0,0.3); border-radius: 10px; color:white;
}
.form-box label { display:block; margin-top:6px; font-size:14px; }

.table { width:100%; border-collapse: collapse; }
.table th, .table td { padding:10px; border-bottom: 1px dashed rgba(255,255,255,0.12); text-align:left; }
.table th { color:#ffd59f; }

.alert { padding: 12px; border-radius: 10px; margin-bottom: 16px; }
.alert-error { background: rgba(255, 63, 63, 0.12); border:1px solid rgba(255,63,63,0.35); color: #ffb3b3; }
.alert-success { background: rgba(34, 255, 122, 0.12); border:1px solid rgba(34,255,122,0.35); color: #ccffd8; }
.alert-warning { background: rgba(255, 178, 64, 0.12); border:1px solid rgba(255,178,64,0.35); color: #ffe1a6; }

.footer {
  height:56px;
  background:#080604;
  border-top:1px solid rgba(255,107,0,0.32);
  padding: 0 20px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:14px;
  color:#8a7565;
  font-size:11px;
}
.footer a { color:#ff8c2e; text-decoration:none; }

.btn-row { display:grid; grid-template-columns: 1fr 1fr; gap:8px; margin-top:10px; }

@media (max-width: 900px) {
  .menu {
    gap: 6px;
    overflow: auto;
    scrollbar-width: none;
    max-width: calc(100% - 120px);
    padding-bottom: 2px;
  }

  .menu::-webkit-scrollbar { display:none; }
  .hero { flex-direction: column; }
  .server-status-left { position: relative; left:auto; top:auto; margin: 0 auto 14px; }
}