/* ============================================================
   KingSilverLab — styles.css
   ============================================================ */

:root {
    --aqua-bright:   #00e5e5;
    --aqua-mid:      #00b8c8;
    --aqua-deep:     #0078a0;
    --aqua-darker:   #004d6e;
    --aqua-darkest:  #002940;

    --bg-gradient:   linear-gradient(135deg, #001e30 0%, #002e45 35%, #003d55 60%, #004d6e 100%);
    --card-bg:       rgba(0, 60, 90, 0.55);
    --card-border:   rgba(0, 229, 229, 0.18);
    --card-hover:    rgba(0, 229, 229, 0.08);

    --fg:            #e0f7fa;
    --fg-muted:      rgba(176, 230, 240, 0.6);
    --fg-dim:        rgba(176, 230, 240, 0.35);

    --accent:        #00e5e5;
    --accent-glow:   rgba(0, 229, 229, 0.25);
    --accent-btn:    linear-gradient(135deg, #00e5e5 0%, #00b8c8 100%);
    --accent-btn2:   linear-gradient(135deg, #0078a0 0%, #004d6e 100%);

    --success:       #34d399;
    --success-bg:    rgba(52, 211, 153, 0.12);
    --error:         #f87171;
    --error-bg:      rgba(248, 113, 113, 0.12);
    --warning:       #fbbf24;
    --info:          #60a5fa;

    --border:        rgba(0, 229, 229, 0.14);
    --input-bg:      rgba(0, 40, 60, 0.7);
    --table-stripe:  rgba(0, 229, 229, 0.03);
    --shadow:        0 8px 32px rgba(0, 0, 0, 0.35);
}

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

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: var(--bg-gradient);
    background-attachment: fixed;
    color: var(--fg);
    min-height: 100vh;
    overflow-x: hidden;
}

/* Animated mesh background */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 60% at 20% 10%, rgba(0,229,229,0.07) 0%, transparent 65%),
        radial-gradient(ellipse 50% 50% at 80% 90%, rgba(0,120,160,0.1) 0%, transparent 60%),
        radial-gradient(ellipse 40% 40% at 70% 20%, rgba(0,184,200,0.06) 0%, transparent 55%);
    pointer-events: none;
    z-index: 0;
}

body > * { position: relative; z-index: 1; }

.font-display { font-family: 'Syne', sans-serif; }

/* ===== Animations ===== */
@keyframes fadeInUp  { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes scaleIn   { from{opacity:0;transform:scale(0.9)} to{opacity:1;transform:scale(1)} }
@keyframes slideDown { from{opacity:0;transform:translateY(-12px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideInR  { from{transform:translateX(100%);opacity:0} to{transform:translateX(0);opacity:1} }
@keyframes shimmer   { 0%{background-position:-200% center} 100%{background-position:200% center} }
@keyframes checkDraw { 0%{stroke-dashoffset:50} 100%{stroke-dashoffset:0} }
@keyframes float     { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes spin      { to{transform:rotate(360deg)} }
@keyframes pulse     { 0%,100%{opacity:1} 50%{opacity:0.5} }
@keyframes scanLine  { 0%{top:-5%} 100%{top:105%} }
@keyframes glowPulse { 0%,100%{box-shadow:0 0 20px rgba(0,229,229,0.3)} 50%{box-shadow:0 0 40px rgba(0,229,229,0.6), 0 0 80px rgba(0,229,229,0.2)} }

.anim-fade-in-up { animation: fadeInUp 0.5s ease-out forwards; }
.anim-scale-in   { animation: scaleIn 0.35s cubic-bezier(0.34,1.56,0.64,1) forwards; }
.anim-slide-down { animation: slideDown 0.3s ease-out forwards; }
.anim-slide-right{ animation: slideInR 0.3s ease-out forwards; }
.anim-float      { animation: float 5s ease-in-out infinite; }

.shimmer-text {
    background: linear-gradient(90deg, var(--aqua-bright) 0%, #fff 40%, var(--aqua-bright) 80%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 3s linear infinite;
}

.spinner {
    animation: spin 0.7s linear infinite;
    border: 2px solid rgba(0,229,229,0.2);
    border-top-color: var(--accent);
    border-radius: 50%;
    width: 20px; height: 20px;
}

/* ===== Glass Cards ===== */
.glass {
    background: var(--card-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--card-border);
}

.glass-dark {
    background: rgba(0, 30, 48, 0.75);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--card-border);
}

.aqua-glow {
    box-shadow: 0 0 0 1px rgba(0,229,229,0.2), 0 0 30px rgba(0,229,229,0.12), var(--shadow);
}

.aqua-glow-strong {
    box-shadow: 0 0 0 1px rgba(0,229,229,0.35), 0 0 40px rgba(0,229,229,0.2), 0 0 80px rgba(0,229,229,0.06);
    animation: glowPulse 3s ease-in-out infinite;
}

/* ===== Buttons ===== */
.btn-aqua {
    background: var(--accent-btn);
    color: #001a26;
    font-weight: 700;
    transition: all 0.25s;
    position: relative;
    overflow: hidden;
}
.btn-aqua::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 60%);
    pointer-events: none;
}
.btn-aqua:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,229,229,0.4); }
.btn-aqua:active { transform: translateY(0); }

.btn-deep {
    background: var(--accent-btn2);
    color: var(--fg);
    font-weight: 600;
    transition: all 0.25s;
}
.btn-deep:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,120,160,0.4); }

.btn-outline {
    border: 1px solid rgba(0,229,229,0.35);
    color: var(--aqua-bright);
    background: rgba(0,229,229,0.06);
    font-weight: 600;
    transition: all 0.25s;
}
.btn-outline:hover { background: rgba(0,229,229,0.12); border-color: rgba(0,229,229,0.6); }

/* ===== Inputs ===== */
.input-field {
    background: var(--input-bg);
    border: 1px solid var(--border);
    color: var(--fg);
    transition: all 0.25s;
    outline: none;
}
.input-field::placeholder { color: var(--fg-dim); }
.input-field:focus {
    border-color: rgba(0,229,229,0.5);
    box-shadow: 0 0 0 3px rgba(0,229,229,0.1);
}
.input-field option { background: #002940; }

/* ===== Sidebar ===== */
.sidebar-link {
    transition: all 0.2s;
    border-left: 3px solid transparent;
    color: var(--fg-muted);
    position: relative;
}
.sidebar-link:hover {
    background: rgba(0,229,229,0.07);
    border-left-color: rgba(0,229,229,0.4);
    color: var(--aqua-bright);
}
.sidebar-link.active {
    background: rgba(0,229,229,0.1);
    border-left-color: var(--aqua-bright);
    color: var(--aqua-bright);
}

/* ===== Modal overlay ===== */
.modal-overlay { background: rgba(0, 15, 25, 0.8); backdrop-filter: blur(8px); }

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,229,229,0.3); border-radius: 2px; }

/* ===== Nav ===== */
#navbar {
    background: rgba(0, 20, 35, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
}

/* ===== Stat cards ===== */
.stat-card {
    background: rgba(0, 50, 75, 0.5);
    border: 1px solid rgba(0,229,229,0.12);
    backdrop-filter: blur(12px);
    transition: all 0.25s;
}
.stat-card:hover { border-color: rgba(0,229,229,0.3); transform: translateY(-2px); }

/* ===== Certificate decoration ===== */
.cert-corner { position: relative; }
.cert-corner::before, .cert-corner::after {
    content:''; position:absolute; width:32px; height:32px;
}
.cert-corner::before { top:-1px; left:-1px; border-top:2px solid var(--aqua-bright); border-left:2px solid var(--aqua-bright); border-radius:6px 0 0 0; }
.cert-corner::after  { bottom:-1px; right:-1px; border-bottom:2px solid var(--aqua-bright); border-right:2px solid var(--aqua-bright); border-radius:0 0 6px 0; }

/* ===== Table ===== */
table { border-collapse: collapse; }
tr:nth-child(even) { background: var(--table-stripe); }
tbody tr { border-bottom: 1px solid var(--border); transition: background 0.15s; }
tbody tr:hover { background: rgba(0,229,229,0.04); }

/* ===== Badge ===== */
.badge-purity {
    background: rgba(0,229,229,0.1);
    color: var(--aqua-bright);
    border: 1px solid rgba(0,229,229,0.2);
}
.badge-success {
    background: var(--success-bg);
    color: var(--success);
}
.badge-error {
    background: var(--error-bg);
    color: var(--error);
}

/* ===== Mobile nav ===== */
#mobile-nav {
    background: rgba(0, 18, 30, 0.95);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--border);
}
#mobile-nav button { transition: color 0.2s; }
#mobile-nav button.active { color: var(--aqua-bright) !important; }
#mobile-nav button.active i { text-shadow: 0 0 10px rgba(0,229,229,0.5); }

/* ===== Pages ===== */
.page { display: none; }
.page.active { display: block; }
.admin-tab { display: none; }
.admin-tab.visible { display: block; }

/* ===== Sidebar desktop ===== */
#sidebar {
    background: rgba(0, 18, 30, 0.9);
    backdrop-filter: blur(24px);
    border-right: 1px solid var(--border);
}

/* ===== Connection status dot ===== */
.conn-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 4px;
}
.conn-dot.online  { background: var(--success); box-shadow: 0 0 6px rgba(52,211,153,0.6); animation: pulse 2s infinite; }
.conn-dot.offline { background: var(--error); }
.conn-dot.loading { background: var(--warning); animation: pulse 1s infinite; }

/* ===== Responsive ===== */
@media (max-width: 640px) {
    #verify-details { grid-template-columns: 1fr !important; }
}
@media print {
    body * { visibility: hidden; }
    #print-zone, #print-zone * { visibility: visible; }
    #print-zone { position: absolute; left: 0; top: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ============================= */
/* Premium Balanced Silver Bars */
/* ============================= */

.hero-bars{
    position:absolute;
    inset:0;
    overflow:hidden;
    z-index:1;
}

/* Shared bar style (IMPORTANT FIX) */
.hero-bar{
    position:absolute;

    width:320px;              /* SAME SIZE FOR BOTH */
    height:auto;

    display:flex;
    align-items:center;
    justify-content:center;

    opacity:0.75;

    filter:
        drop-shadow(0 25px 50px rgba(0,0,0,.45))
        drop-shadow(0 0 25px rgba(0,229,229,.10));

    transition:transform .4s ease;
}

/* Image normalization (CRITICAL FIX) */
.hero-bar img{
    width:100%;
    height:auto;
    object-fit:contain;

    display:block;

    border-radius:18px;

    /* subtle premium edge */
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.08);
}

/* LEFT (back side) */
.hero-bar-left{
    left:-20px;   /* was -70px */
    top:18%;
    transform:rotate(-28deg);
    opacity:0.40;
}

/* RIGHT (front side) */
.hero-bar-right{
    right:-20px;  /* was -70px */
    bottom:10%;
    transform:rotate(24deg);
    opacity:0.40;
}

/* Soft floating animation */
.hero-bar-left,
.hero-bar-right{
    animation:floatBar 7s ease-in-out infinite;
}

.hero-bar-right{
    animation-delay:2.5s;
}

@keyframes floatBar{
    0%,100%{
        transform: translateY(0px) rotate(var(--r));
    }
    50%{
        transform: translateY(-14px) rotate(var(--r));
    }
}

/* assign rotation variables properly */
.hero-bar-left{ --r:-28deg; }
.hero-bar-right{ --r:24deg; }

/* glow enhancement layer */
.hero-bar::before{
    content:"";
    position:absolute;
    inset:-30px;
    background: radial-gradient(
        circle,
        rgba(0,229,229,.12),
        transparent 70%
    );
    z-index:-1;
    opacity:.7;
}

/* MOBILE FIX */
/* MOBILE: bars behind heading */
@media(max-width:768px){

    .hero-bar{
        width:135px;
        opacity:.18;

        top:24%;   /* same vertical position */

        filter:
            drop-shadow(0 10px 20px rgba(0,0,0,.25))
            drop-shadow(0 0 10px rgba(0,229,229,.06));
    }

    .hero-bar-left{
        left:-20px;
        transform:rotate(-18deg);
    }

    .hero-bar-right{
        right:-20px;
        transform:rotate(18deg) translateY(-8px);
    }
}

/* Scroll indicator */
/* ================================= */
/* Explore Collection indicator */
/* ================================= */

/* Explore indicator */

.scroll-indicator{
    margin-top:18px; /* reduced from 45/50 */

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;

    position:relative;
    z-index:50;

    color:rgba(255,255,255,.70);

    font-size:11px;
    font-weight:600;
    letter-spacing:1.5px;
    text-transform:uppercase;

    animation:bounceArrow 2s infinite;
}

.scroll-circle{
    width:30px;
    height:30px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:rgba(0,229,229,.08);
    border:1px solid rgba(0,229,229,.15);
}

.scroll-circle i{
    color:var(--aqua-bright);
    font-size:12px;
}