/* ============================================================
   SAPD - COMPLETE STYLESHEET
   Dark theme with hero gradient background throughout
   ============================================================ */

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

:root {
    --bg: #0a0e17;
    --bg2: #0d1321;
    --bg-card: #111827;
    --bg-card-hover: #1a2440;
    --blue-dark: #1a2b4c;
    --blue: #1e3a6e;
    --blue-light: #2a4fa0;
    --accent: #3b82f6;
    --white: #ffffff;
    --white-off: #e2e8f0;
    --gray: #94a3b8;
    --gray-dark: #475569;
    --border: #1e293b;
    --border-light: #334155;
    --gold: #f59e0b;
    --gold-light: #fbbf24;
    --silver: #c0c0c0;
    --danger: #ef4444;
    --success: #22c55e;
    --font-display: 'Rajdhani', sans-serif;
    --font-body: 'Inter', sans-serif;
    --radius: 6px;
    --radius-lg: 10px;
    --transition: 0.2s ease;
}

html { scroll-behavior:smooth; scroll-padding-top:80px; font-size:16px; -webkit-font-smoothing:antialiased; }

body {
    font-family:var(--font-body);
    background:linear-gradient(160deg, #0a0e17 0%, #1a2b4c 50%, #0a0e17 100%);
    background-attachment:fixed;
    color:var(--white-off);
    line-height:1.6;
    overflow-x:hidden;
    min-height:100vh;
}

img { display:block; max-width:100%; height:auto; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
.container { max-width:1200px; margin:0 auto; padding:0 1.5rem; }

h1,h2,h3,h4 { font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--white); }

.section { padding:5rem 0; position:relative; }
.section__head { text-align:center; margin-bottom:3rem; }
.section__tag { display:inline-block; font-family:var(--font-display); font-size:0.8rem; font-weight:600; letter-spacing:0.15em; color:var(--accent); background:rgba(59,130,246,0.1); border:1px solid rgba(59,130,246,0.3); padding:0.35em 1.2em; border-radius:3px; margin-bottom:0.75rem; }
.section__title { font-size:clamp(1.8rem, 3.5vw, 2.5rem); margin-bottom:0.5rem; }
.section__subtitle { color:var(--gray); font-size:1.05rem; max-width:500px; margin:0.5rem auto 0; }

/* ========== BUTTONS ========== */
.btn {
    display:inline-flex; align-items:center; gap:0.5rem; justify-content:center;
    font-family:var(--font-display); font-weight:600; font-size:0.9rem; text-transform:uppercase; letter-spacing:0.05em;
    padding:0.7em 1.6em; border-radius:var(--radius); border:2px solid transparent;
    cursor:pointer; transition:all var(--transition); text-align:center;
}
.btn--primary { background:var(--accent); color:#fff; border-color:var(--accent); }
.btn--primary:hover { background:var(--blue-light); transform:translateY(-2px); box-shadow:0 4px 20px rgba(59,130,246,0.3); }
.btn--outline { background:transparent; color:var(--white); border-color:var(--border-light); }
.btn--outline:hover { border-color:var(--accent); color:var(--accent); background:rgba(59,130,246,0.05); }
.btn--discord { background:#5865F2; color:#fff; border-color:#5865F2; }
.btn--discord:hover { background:#4752c4; transform:translateY(-2px); }
.btn--large { padding:0.9em 2.5em; font-size:1rem; }

/* ========== NAVBAR ========== */
.navbar { position:fixed; top:0; left:0; width:100%; z-index:1000; padding:0.7rem 0; background:rgba(10,14,23,0.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--border); transition:all 0.3s; }
.navbar--scrolled { background:rgba(10,14,23,0.98); }
.navbar__inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.navbar__brand { display:flex; align-items:center; gap:0.6rem; flex-shrink:0; }
.navbar__logo { width:38px; height:38px; border-radius:var(--radius); }
.navbar__brand-text { display:flex; flex-direction:column; line-height:1.1; }
.navbar__brand-title { font-family:var(--font-display); font-size:0.85rem; font-weight:700; letter-spacing:0.05em; color:var(--white); }
.navbar__brand-sub { font-family:var(--font-display); font-size:0.6rem; font-weight:500; letter-spacing:0.12em; color:var(--gray); text-transform:uppercase; }
.navbar__links { display:flex; gap:0.2rem; flex-wrap:wrap; }
.navbar__link { display:block; padding:0.45em 0.8em; font-family:var(--font-display); font-size:0.8rem; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; color:var(--gray); border-radius:var(--radius); transition:all var(--transition); white-space:nowrap; }
.navbar__link.active, .navbar__link:hover { color:var(--white); background:rgba(59,130,246,0.1); }
.navbar__toggle { display:none; flex-direction:column; gap:4px; background:none; border:none; cursor:pointer; padding:4px; }
.navbar__toggle span { display:block; width:22px; height:2px; background:var(--white); border-radius:1px; transition:all 0.3s; }

/* ========== HERO ========== */
.hero { min-height:100vh; display:flex; align-items:center; position:relative; padding:6rem 0 3rem; overflow:hidden; }
.hero__bg { position:absolute; inset:0; background:radial-gradient(ellipse at 30% 50%, rgba(59,130,246,0.08) 0%, transparent 60%); pointer-events:none; }
.hero__content { position:relative; z-index:1; display:flex; align-items:center; gap:2.5rem; flex-wrap:wrap; }
.hero__badge-wrap { flex-shrink:0; }
.hero__badge { width:140px; height:140px; filter:drop-shadow(0 0 30px rgba(59,130,246,0.35)); }
.hero__info { flex:1; min-width:280px; }
.hero__tag { display:inline-block; font-family:var(--font-display); font-size:0.75rem; font-weight:600; letter-spacing:0.15em; color:var(--accent); background:rgba(59,130,246,0.12); border:1px solid rgba(59,130,246,0.3); padding:0.3em 1em; border-radius:3px; margin-bottom:0.8rem; }
.hero__title { font-size:clamp(2rem, 5vw, 3.5rem); line-height:1.05; margin-bottom:0.4rem; }
.hero__subtitle { font-family:var(--font-display); font-size:1.1rem; color:var(--gray); letter-spacing:0.06em; margin-bottom:1.2rem; }
.hero__stats { display:flex; gap:1.5rem; align-items:center; margin-bottom:1.8rem; flex-wrap:wrap; }
.hero__stat { text-align:center; }
.hero__stat-num { font-family:var(--font-display); font-size:1.4rem; font-weight:700; color:var(--white); display:block; }
.hero__stat-lbl { font-size:0.65rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--gray); }
.hero__stat-div { width:1px; height:28px; background:var(--border-light); }
.hero__actions { display:flex; gap:0.75rem; flex-wrap:wrap; }

/* ========== ABOUT ========== */
.about__content { max-width:800px; margin:0 auto; text-align:center; }
.about__content p { font-size:1rem; color:var(--gray); margin-bottom:1rem; line-height:1.8; }

/* ========== OPERATIONS ========== */
.operations__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.op-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.5rem; transition:all var(--transition); }
.op-card:hover { border-color:var(--accent); background:var(--bg-card-hover); transform:translateY(-2px); }
.op-card__icon { width:40px; height:40px; display:flex; align-items:center; justify-content:center; background:rgba(59,130,246,0.1); border-radius:var(--radius); color:var(--accent); margin-bottom:0.8rem; }
.op-card h4 { font-size:0.95rem; margin-bottom:0.4rem; }
.op-card p { font-size:0.82rem; color:var(--gray); line-height:1.5; }

/* ========== RANKS ========== */
.ranks__hierarchy { display:flex; flex-direction:column; gap:0.4rem; max-width:550px; margin:0 auto 2rem; }
.rank-row { display:flex; align-items:center; gap:1rem; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:0.85rem 1.2rem; transition:all var(--transition); }
.rank-row:hover { border-color:var(--accent); transform:translateX(4px); }
.rank-row__badge { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:0.7rem; font-weight:700; color:#fff; }
.rank-row__badge--cmd { background:var(--gold); }
.rank-row__badge--senior { background:var(--accent); }
.rank-row__badge--mid { background:var(--silver); color:#1a1a1a; }
.rank-row__badge--junior { background:var(--gray-dark); }
.rank-row__info { flex:1; min-width:0; }
.rank-row__rank { font-family:var(--font-display); font-size:0.9rem; font-weight:600; color:var(--white); text-transform:uppercase; letter-spacing:0.03em; display:block; }
.ranks__loading { text-align:center; padding:2rem; color:var(--gray); }
.spinner { width:28px; height:28px; border:3px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin 0.7s linear infinite; margin:0 auto 1rem; }
@keyframes spin { to { transform:rotate(360deg); } }
.ranks__action { text-align:center; margin-top:1.5rem; }

/* ========== JOIN ========== */
.join__reqs-wrap { display:flex; justify-content:center; margin:1.5rem 0; }
.join__reqs { display:flex; gap:0.5rem; flex-wrap:wrap; }
.join__reqs span { font-size:0.7rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--gray); background:var(--bg-card); border:1px solid var(--border); padding:0.35em 0.8em; border-radius:3px; }
.join__cta { text-align:center; }

/* ========== FOOTER ========== */
.footer { background:var(--bg-card); border-top:1px solid var(--border); padding:1.5rem 0; text-align:center; }
.footer p { font-size:0.8rem; color:var(--gray); }
.footer__server { font-family:var(--font-display); font-size:0.65rem !important; text-transform:uppercase; letter-spacing:0.1em; color:var(--gray-dark) !important; margin-top:0.25rem; }

/* ========== MEMBERS PAGE ========== */
.page-members, .page-gallery { padding-top:80px; min-height:100vh; }
.members-page, .gallery-page { padding:2rem 0 4rem; }
.members__filters { display:flex; gap:0.75rem; margin-bottom:2rem; flex-wrap:wrap; max-width:500px; }
.members__search, .members__select { padding:0.6em 1em; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); color:var(--white); font-family:var(--font-body); font-size:0.9rem; outline:none; flex:1; min-width:180px; }
.members__search:focus, .members__select:focus { border-color:var(--accent); }
.members__state, .gallery__state { text-align:center; padding:3rem; color:var(--gray); }
.members__grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:0.75rem; }
.member-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.5rem 1rem; text-align:center; transition:all var(--transition); }
.member-card:hover { border-color:var(--accent); transform:translateY(-2px); }
.member-card__icon { width:44px; height:44px; margin:0 auto 0.75rem; background:rgba(59,130,246,0.1); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.member-card__icon img { width:26px; height:26px; }
.member-card__name { font-family:var(--font-display); font-size:1rem; color:var(--white); margin-bottom:0.3rem; }
.member-card__rank { font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--accent); font-weight:600; }

/* Add to existing style.css */
.member-card__icon {
    width: 44px;
    height: 44px;
    margin: 0 auto 0.75rem;
    background: rgba(59,130,246,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

/* ========== GALLERY ========== */
.gallery__filters { display:flex; gap:0.4rem; justify-content:center; flex-wrap:wrap; margin-bottom:2rem; }
.gallery-filter { font-family:var(--font-display); font-size:0.78rem; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; padding:0.5em 1.2em; background:transparent; border:1px solid var(--border); color:var(--gray); cursor:pointer; border-radius:3px; transition:all var(--transition); }
.gallery-filter.active, .gallery-filter:hover { background:var(--accent); border-color:var(--accent); color:#fff; }
.gallery__grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1rem; padding-bottom:2rem; }
.gallery-item { position:relative; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border); cursor:pointer; transition:all var(--transition); background:var(--bg-card); }
.gallery-item:hover { border-color:var(--accent); transform:scale(1.02); }
.gallery-item img, .gallery-item video { width:100%; aspect-ratio:16/10; object-fit:cover; display:block; }
.gallery-item__overlay { position:absolute; bottom:0; left:0; right:0; padding:0.8rem; background:linear-gradient(transparent, rgba(10,14,23,0.9)); pointer-events:none; }
.gallery-item__date { font-family:var(--font-display); font-size:0.7rem; color:var(--gray); display:block; }
.gallery-item__caption { font-size:0.8rem; color:var(--white); margin-top:0.2rem; display:block; }

/* ========== LIGHTBOX ========== */
.lightbox { position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,0.95); display:flex; align-items:center; justify-content:center; flex-direction:column; opacity:0; pointer-events:none; transition:opacity 0.3s; }
.lightbox--visible { opacity:1; pointer-events:all; }
.lightbox__close { position:absolute; top:1.5rem; right:1.5rem; background:none; border:none; color:#fff; font-size:2.2rem; cursor:pointer; width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:50%; }
.lightbox__close:hover { background:rgba(255,255,255,0.1); }
.lightbox__content { max-width:90vw; max-height:85vh; text-align:center; }

/* ========== ADMIN ========== */
.page-admin { background:var(--bg); min-height:100vh; display:flex; align-items:center; justify-content:center; padding:2rem; }
.admin__gate { width:100%; max-width:380px; }
.admin__gate-box { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:2.5rem 2rem; text-align:center; }
.admin__gate-logo { width:60px; height:60px; margin:0 auto 1.5rem; border-radius:4px; }
.admin__gate-box h1 { font-size:1.3rem; margin-bottom:1rem; }
.admin__input { width:100%; padding:0.6em 0.9em; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); color:var(--white); font-family:var(--font-body); font-size:0.9rem; outline:none; }
.admin__input:focus { border-color:var(--accent); }
select.admin__input { cursor:pointer; }
.admin__error { color:var(--danger); font-size:0.85rem; margin-top:0.5rem; }
.admin__panel { width:100%; max-width:900px; }
.admin__panel-head { display:flex; align-items:center; gap:0.75rem; margin-bottom:1.5rem; padding-bottom:1rem; border-bottom:1px solid var(--border); }
.admin__panel-logo { width:36px; height:36px; border-radius:4px; }
.admin__panel-head h1 { font-size:1.2rem; flex:1; }
.admin__logout { background:none; border:1px solid var(--border); color:var(--gray); font-family:var(--font-display); font-size:0.75rem; text-transform:uppercase; padding:0.4em 1em; cursor:pointer; border-radius:var(--radius); }
.admin__logout:hover { border-color:var(--danger); color:var(--danger); }
.admin__section { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.5rem; margin-bottom:1.25rem; }
.admin__section h2 { font-size:1.05rem; margin-bottom:1rem; }
.admin__form { display:flex; flex-direction:column; gap:0.75rem; }

/* ========== RESPONSIVE ========== */
@media (max-width:1024px) {
    .operations__grid { grid-template-columns:repeat(2,1fr); }
    .hero__content { flex-direction:column; text-align:center; }
    .hero__badge { width:110px; height:110px; margin:0 auto; }
    .hero__stats { justify-content:center; }
    .hero__actions { justify-content:center; }
}
@media (max-width:768px) {
    .navbar__toggle { display:flex; }
    .navbar__links { position:fixed; top:0; right:-100%; width:280px; height:100vh; background:var(--bg-card); flex-direction:column; justify-content:center; gap:0.3rem; padding:4rem 1.5rem; transition:right 0.3s; border-left:1px solid var(--border); z-index:999; }
    .navbar__links--open { right:0; }
    .hero__stats { gap:1rem; }
    .hero__stat-div { display:none; }
    .gallery__grid { grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
}
@media (max-width:480px) {
    .container { padding:0 1rem; }
    .hero__badge { width:90px; height:90px; }
    .hero__title { font-size:1.5rem; }
    .hero__stats { flex-direction:column; gap:0.5rem; }
    .hero__actions { flex-direction:column; width:100%; }
    .hero__actions .btn { width:100%; }
    .section { padding:3.5rem 0; }
    .operations__grid { grid-template-columns:1fr; }
    .gallery__grid, .members__grid { grid-template-columns:1fr; }
    .members__filters { flex-direction:column; }
    .ranks__hierarchy { max-width:100%; }
    .rank-row { padding:0.7rem 1rem; }
}