/* Container */ body { margin: 0; padding: 0; background: linear-gradient(135deg, #1b1f23, #0f3d2e, #1b1f23); font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding-top: 40px; color: #ffffff; }

.container { width: 90%; max-width: 400px; background: rgba(255, 255, 255, 0.06); border-radius: 16px; padding: 25px; backdrop-filter: blur(8px); box-shadow: 0 0 20px rgba(0, 255, 150, 0.25); border: 1px solid rgba(0, 255, 120, 0.3); }

h2 { text-align: center; color: #00ff99; margin-bottom: 20px; }

/* Search Box */ .search-box { display: flex; gap: 10px; }

.search-box input { flex: 1; padding: 10px; border-radius: 8px; border: 1px solid #00c97c; outline: none; background: rgba(255, 255, 255, 0.1); color: white; }

.search-box button { padding: 10px 15px; border-radius: 8px; border: none; background: #00ff99; color: #000; font-weight: bold; cursor: pointer; transition: 0.3s; }

.search-box button:hover { background: #00cc77; }

/* Result Box */ .result-box { margin-top: 20px; padding: 15px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(0, 255, 120, 0.3); border-radius: 12px; }

.hidden { display: none; }

h3 { color: #00ff99; margin-bottom: 15px; }

/* Detail Row */ .detail { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 15px; }

.label { color: #aaffdd; }

.value { font-weight: bold; }

/* Baki Box */ .baki-box { margin: 18px 0; background: rgba(0, 255, 120, 0.1); border-left: 4px solid #00ff99; padding: 12px; border-radius: 10px; text-align: center; }

.baki-label { font-size: 14px; color: #aaffdd; display: block; }

.baki-value { font-size: 32px; font-weight: bold; color: #00ff99; margin-top: 5px; }