:root {
    --primary-gradient: linear-gradient(45deg, #f093fb, #f5576c);
    --primary-color: #f093fb;
    --secondary-color: #f5576c;
    --background-dark: #1a1a2e;
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.8);
    --text-muted: rgba(255, 255, 255, 0.6);
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(26, 26, 46, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 1000;
    padding: 0 clamp(20px, 5vw, 60px);
}

.navbar-container {
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
    gap: 40px;
}

.navbar-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--text-primary);
    font-size: clamp(18px, 3vw, 22px);
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 8px 0;
    transition: var(--transition-smooth);
}

.navbar-logo:hover { color: var(--primary-color); }

.navbar-menu { display: flex; align-items: center; gap: clamp(8px, 2vw, 16px); list-style: none; }
.navbar-item { position: relative; }
.navbar-link { display: flex; align-items: center; gap: 6px; padding: 10px clamp(12px, 2vw, 18px); color: var(--text-secondary); text-decoration: none; font-size: clamp(14px, 1.8vw, 15px); font-weight: 500; cursor: pointer; transition: var(--transition-smooth); position: relative; letter-spacing: 0.3px; }
.navbar-link:hover { color: var(--text-primary); }
.navbar-link::after { content: ''; position: absolute; bottom: 6px; left: 12px; right: 12px; height: 1px; background: var(--primary-gradient); width: 0%; transition: width 0.3s ease; }
.navbar-link:hover::after, .navbar-item.active .navbar-link::after { width: calc(100% - 24px); }

.dropdown-arrow { width: 8px; height: 5px; transition: transform 0.2s ease; opacity: 0.7; }
.dropdown-arrow svg { width: 100%; height: 100%; display: block; }
.navbar-item.active .dropdown-arrow { transform: rotate(180deg); }

.dropdown-menu { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: rgba(26, 26, 46, 0.95); backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); padding: 24px; min-width: 450px; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; pointer-events: none; }
.navbar-item.active .dropdown-menu { opacity: 1; visibility: visible; pointer-events: all; }
.dropdown-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.dropdown-column { display: flex; flex-direction: column; gap: 16px; }
.dropdown-label { font-size: 10px; font-weight: 600; letter-spacing: 1px; color: var(--text-muted); text-transform: uppercase; margin-bottom: 4px; }
.dropdown-link { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; color: var(--text-secondary); text-decoration: none; font-size: 14px; border-radius: 6px; transition: var(--transition-smooth); }
.dropdown-link:hover { background: rgba(240, 147, 251, 0.1); color: var(--text-primary); }
.dropdown-link-arrow { width: 14px; height: 14px; opacity: 0; transform: translateX(-4px); transition: all 0.2s ease; }
.dropdown-link:hover .dropdown-link-arrow { opacity: 0.7; transform: translateX(0); }

.navbar-clock { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding: 0; user-select: none; }
.clock-ganzhi { font-size: clamp(11px, 1.5vw, 13px); color: var(--text-secondary); font-weight: 500; letter-spacing: 2px; line-height: 1.3; }
.clock-lunar { font-size: clamp(10px, 1.3vw, 11px); color: var(--text-muted); letter-spacing: 1px; line-height: 1.3; }

@media (max-width: 1024px) {
    .navbar-clock { display: none; }
    .navbar-menu { gap: 4px; }
}

@media (max-width: 768px) {
    .navbar-menu { display: none; }
}