/* Metin2 Wiki - Rohan2 Dark Gold Theme */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');

* { margin:0; padding:0; box-sizing:border-box; }

body {
    background-color:#000;
    background-image:url('../img/bg/area_bg01.jpg');
    background-position:center top;
    background-repeat:no-repeat;
    background-size:cover;
    background-attachment:fixed;
    color:#8e7c61;
    font-family:'Open Sans', sans-serif;
    font-size:13px;
    line-height:1.5;
}

a { color:#edc388; text-decoration:none; transition:all 0.3s ease; }
a:hover { color:#fff; }

.container { max-width:1200px; margin:0 auto; padding:20px; }

/* Navbar */
.navbar {
    background:rgba(12,12,14,0.95);
    padding:12px 24px;
    display:flex;
    align-items:center;
    gap:24px;
    flex-wrap:wrap;
    border-bottom:1px solid #1a1610;
    position:sticky;
    top:0;
    z-index:1000;
    backdrop-filter:blur(8px);
}
.navbar .logo {
    font-size:1.4em;
    font-weight:bold;
    color:#edc388;
    text-decoration:none;
}
.nav-links { display:flex; gap:12px; flex-wrap:wrap; }
.nav-links a {
    color:#8e7c61;
    padding:4px 10px;
    border-radius:3px;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:0.5px;
    transition:all 0.2s;
}
.nav-links a:hover, .nav-links a.active { color:#edc388; background:rgba(237,195,136,0.08); }

.mobile-nav-toggle { display:none; background:none; border:none; cursor:pointer; padding:8px; }
.mobile-nav-toggle .bar { display:block; width:22px; height:2px; background:#edc388; margin:4px 0; transition:0.3s; }

/* Cards */
.card {
    background:#100e12;
    border-radius:4px;
    padding:16px;
    margin-bottom:16px;
    border:1px solid #1a1610;
}
.card h2, .card h3 { color:#edc388; margin-bottom:12px; }

/* Tables */
table { width:100%; border-collapse:collapse; }
th { background:#1a1610; color:#edc388; padding:8px 10px; text-align:left; border-bottom:1px solid #524633; font-size:12px; text-transform:uppercase; }
td { padding:6px 10px; border-bottom:1px solid #1a1610; color:#8e7c61; }
tr:hover { background:rgba(237,195,136,0.03); }

/* Filters */
.filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; align-items:end; }
.filters label { display:flex; flex-direction:column; gap:3px; font-size:11px; color:#8e7c61; text-transform:uppercase; }
.filters select, .filters input[type="text"], .filters input[type="number"] {
    background:#080808; color:#edc388; border:1px solid #1a1610; padding:6px 10px; border-radius:3px; min-width:140px; font-size:12px;
}
.filters button { background:#edc388; color:#080808; border:none; padding:6px 16px; border-radius:3px; cursor:pointer; font-weight:bold; font-size:12px; text-transform:uppercase; }
.filters button:hover { background:#fff; }

/* Pagination */
.pagination { display:flex; gap:4px; justify-content:center; margin:16px 0; flex-wrap:wrap; }
.pagination a { background:#100e12; color:#8e7c61; padding:6px 12px; border-radius:3px; border:1px solid #1a1610; font-size:12px; }
.pagination a.active { background:#edc388; color:#080808; font-weight:bold; border-color:#edc388; }
.pagination a:hover { border-color:#edc388; color:#edc388; }

/* Badges */
.badge { display:inline-block; padding:2px 8px; border-radius:3px; font-size:11px; }
.badge-gold, .badge-primary { background:#edc388; color:#080808; }
.badge-red { background:#e94560; color:#fff; }
.badge-blue, .badge-secondary { background:#524633; color:#edc388; }

/* Item icon */
.item-icon { width:32px; height:32px; vertical-align:middle; margin-right:4px; image-rendering:pixelated; }

/* Detail page */
.detail-header { display:flex; gap:16px; align-items:flex-start; margin-bottom:16px; }
.detail-header img { width:64px; height:64px; image-rendering:pixelated; }
.detail-header h1 { color:#edc388; }
.detail-header .meta { color:#8e7c61; }

.stat-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:8px; }
.stat-item { background:#0c0c0e; padding:8px; border-radius:3px; border:1px solid #1a1610; }
.stat-item .label { color:#8e7c61; font-size:11px; text-transform:uppercase; }
.stat-item .value { color:#edc388; font-size:1em; font-weight:bold; }

/* Hero */
.hero { text-align:center; padding:40px 20px; }
.hero h1 { color:#edc388; font-size:2em; margin-bottom:8px; }
.hero p { color:#8e7c61; font-size:1em; margin-bottom:24px; }

/* Search */
.search-box { max-width:480px; margin:0 auto; display:flex; gap:8px; }
.search-box input { flex:1; background:#100e12; border:1px solid #1a1610; color:#edc388; padding:10px; border-radius:3px; font-size:13px; }
.search-box button { background:#edc388; color:#080808; border:none; padding:10px 20px; border-radius:3px; cursor:pointer; font-weight:bold; font-size:13px; }

/* Stats */
.stats-overview { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:16px; margin-top:24px; }
.stat-card { background:#100e12; padding:16px; border-radius:4px; text-align:center; border:1px solid #1a1610; }
.stat-card .number { font-size:1.8em; color:#edc388; font-weight:bold; }
.stat-card .label { color:#8e7c61; font-size:11px; text-transform:uppercase; }

/* Footer */
footer, .site-footer { text-align:center; padding:16px; color:#524633; border-top:1px solid #1a1610; margin-top:30px; font-size:12px; }

/* Toggle buttons */
.toggle-btn { cursor:pointer; padding:3px 10px; border:none; border-radius:3px; font-size:12px; }
.toggle-btn.active { background:#28a745; color:#fff; }
.toggle-btn.inactive { background:#e94560; color:#fff; }

/* Admin */
.admin-nav { background:#0c0c0e; padding:8px 16px; margin-bottom:16px; border-radius:3px; display:flex; gap:12px; align-items:center; border:1px solid #1a1610; }
.admin-nav a { color:#8e7c61; }
.admin-nav a:hover { color:#edc388; }

/* Forms */
.form-group { margin-bottom:12px; }
.form-group label { display:block; margin-bottom:4px; color:#8e7c61; font-size:12px; text-transform:uppercase; }
.form-group input, .form-group select, .form-group textarea {
    width:100%; background:#080808; border:1px solid #1a1610; color:#edc388; padding:8px; border-radius:3px;
}

.btn { display:inline-block; padding:8px 16px; border-radius:3px; border:none; cursor:pointer; font-weight:bold; font-size:12px; }
.btn-primary { background:#edc388; color:#080808; }
.btn-danger { background:#e94560; color:#fff; }

/* Install */
.install-container { max-width:600px; margin:40px auto; }
.install-container h1 { color:#edc388; text-align:center; margin-bottom:24px; }
.step { display:none; }
.step.active { display:block; }
.progress-bar { background:#0c0c0e; border-radius:3px; overflow:hidden; height:28px; margin:16px 0; }
.progress-bar .fill { background:#edc388; height:100%; transition:width 0.3s; display:flex; align-items:center; justify-content:center; color:#080808; font-weight:bold; font-size:12px; }
.file-pick { background:#0c0c0e; border:1px solid #1a1610; border-radius:4px; padding:10px; min-width:160px; flex:1 1 160px; max-width:200px; }
.file-pick label { display:block; color:#edc388; font-size:11px; font-weight:bold; margin-bottom:4px; }
.file-pick input[type="file"] { width:100%; color:#8e7c61; font-size:11px; }
.file-pick input[type="file"]::file-selector-button { background:#edc388; color:#080808; border:none; padding:3px 8px; border-radius:2px; cursor:pointer; font-size:11px; margin-right:4px; }

/* Scrollbar */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:#080808; }
::-webkit-scrollbar-thumb { background:#524633; border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:#edc388; }

@media (max-width:768px) {
    .navbar { padding:8px 12px; gap:8px; }
    .nav-links { gap:6px; }
    .nav-links.open { display:flex; flex-direction:column; width:100%; }
    .mobile-nav-toggle { display:block; }
    .stat-grid { grid-template-columns:1fr; }
    .detail-header { flex-direction:column; }
    table { font-size:11px; }
    th, td { padding:4px 6px; }
}