/* Brand variables */
:root{
    --dark-1: #020617;
    --dark-2: #0a0e27;
    --panel: rgba(15,23,42,0.6);
    --glass-nav: rgba(2,6,23,0.85);
    --accent-cyan: #06b6d4;
    --accent-cyan-opaque: rgba(6,182,212,0.18);
    --accent-purple: #9b5cf6;
    --muted: #94a3b8;
    --text: #E6EDF3;
    --mono: 'JetBrains Mono', monospace;

    --line: rgba(255,255,255,0.06);
    --line-soft: rgba(255,255,255,0.03);
    --glow-cyan: rgba(6,182,212,0.22);
    --glow-indigo: rgba(99,102,241,0.16);
}

/* Accessibility helpers */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:0;top:0;padding:8px 12px;background:var(--accent-cyan);color:#021022;border-radius:4px;z-index:60}

/* Base typography */
.font-inter{font-family:'Inter',sans-serif}
.font-mono{font-family:var(--mono)}
body{min-height:100vh;background:linear-gradient(180deg,var(--dark-1),var(--dark-2));color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial}

/* Futuristic visual layer helpers */
.fx-layer{position:absolute;inset:0;pointer-events:none}
.fx-grid{
    background:
        linear-gradient(to right, var(--line-soft) 1px, transparent 1px),
        linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(ellipse at 50% 20%, rgba(0,0,0,0.9), transparent 70%);
    opacity: .55;
}
.fx-dots{
    background-image: radial-gradient(rgba(6,182,212,0.16) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: .20;
    filter: blur(.2px);
}
.fx-vignette{background:radial-gradient(ellipse at 50% 0%, transparent, rgba(2,6,23,0.9) 72%)}
.fx-scanline{
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.06), transparent);
    height: 220px;
    width: 100%;
    transform: translateY(-260px);
    opacity: .08;
    filter: blur(.2px);
    animation: scanline 10s linear infinite;
}
@keyframes scanline{0%{transform:translateY(-260px)}100%{transform:translateY(calc(100vh + 260px))}}

.fx-orb{
    position:absolute;
    border-radius:999px;
    filter: blur(34px);
    opacity: .65;
    transform: translateZ(0);
}
.fx-orb.cyan{background: radial-gradient(circle at 30% 30%, rgba(6,182,212,0.35), transparent 65%)}
.fx-orb.indigo{background: radial-gradient(circle at 30% 30%, rgba(99,102,241,0.28), transparent 65%)}

.glass-panel{
    background: linear-gradient(180deg, rgba(15,23,42,0.62), rgba(2,6,23,0.35));
    border: 1px solid var(--line-soft);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    box-shadow:
        0 25px 50px -12px rgba(0,0,0,0.55),
        0 0 0 1px rgba(255,255,255,0.02) inset;
}

.neo-border{
    border: 1px solid rgba(255,255,255,0.05);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.02) inset,
        0 0 0 1px rgba(6,182,212,0.06);
}

.neo-border-accent{
    position: relative;
}
.neo-border-accent:before{
    content:'';
    position:absolute;
    inset:-1px;
    border-radius: inherit;
    padding:1px;
    background: linear-gradient(90deg, rgba(6,182,212,0.55), rgba(99,102,241,0.35), rgba(155,92,246,0.25));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity:.55;
    pointer-events:none;
}

/* Containers */
.container{max-width:1200px;margin:0 auto;padding:0 1rem}

/* Header */
.site-header{backdrop-filter: blur(8px);-webkit-backdrop-filter:blur(8px);background:linear-gradient(180deg,rgba(2,6,23,0.6),transparent);border-bottom:1px solid rgba(255,255,255,0.03)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:0.75rem 1rem}
.brand{display:flex;align-items:center;gap:0.75rem}
.logo{height:40px;width:auto;border-radius:8px;box-shadow:0 6px 18px rgba(6,182,212,0.06)}
.brand-text .name{font-weight:700;font-size:1.1rem}
.brand-text .accent{color:var(--accent-cyan)}
.brand-text .tag{display:block;font-size:0.65rem;color:var(--muted);margin-top:2px}

.nav-actions{display:flex;align-items:center;gap:0.75rem}
.user-badge{background:rgba(255,255,255,0.02);padding:6px 10px;border-radius:999px;font-size:0.8rem;color:var(--accent-cyan)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--text);cursor:pointer;transition:all .18s ease;font-weight:600}
.btn.small{padding:6px 10px;border-radius:8px;font-size:.85rem}
.btn-primary{background:linear-gradient(90deg,var(--accent-cyan),#3b82f6);box-shadow:0 18px 44px rgba(6,182,212,0.12);color:#fff}
.btn-accent{background:linear-gradient(90deg,var(--accent-purple),#6366f1);color:#fff}
.btn-secondary{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted)}
.btn:focus{outline:2px solid rgba(6,182,212,0.18);outline-offset:2px}
.btn:active{transform:translateY(1px)}
.btn:hover{transform: translateY(-1px)}

.chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 10px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.06);
    background: rgba(2,6,23,0.35);
    color: rgba(230,237,243,0.82);
    font-size:.78rem;
}
.chip .dot{width:7px;height:7px;border-radius:999px;background:rgba(148,163,184,0.75);box-shadow:0 0 0 2px rgba(148,163,184,0.12)}
.chip.ok .dot{background:rgba(74,222,128,0.95);box-shadow:0 0 18px rgba(74,222,128,0.22)}
.chip.warn .dot{background:rgba(250,204,21,0.95);box-shadow:0 0 18px rgba(250,204,21,0.18)}
.chip.cyan .dot{background:rgba(6,182,212,0.95);box-shadow:0 0 18px rgba(6,182,212,0.22)}

/* Hero */
.hero{position:relative}
.bg-visuals{position:absolute;inset:0;background:radial-gradient(ellipse at 20% 30%,rgba(6,182,212,0.12),transparent 10%),radial-gradient(ellipse at 80% 70%,rgba(155,92,246,0.09),transparent 12%);pointer-events:none}
.hero-card{max-width:720px;margin:0 1rem}
.hero-logo{height:68px;width:auto;border-radius:10px;box-shadow:0 8px 28px rgba(2,6,23,0.6)}
/* Hide large logos that break the layout — can be reverted later */
.logo, .hero-logo, .nav-logo { display: none !important; }
/* Small subtle mark to replace large logo */
.small-logo{width:48px;height:48px;margin:0 auto 12px;display:block}
.small-logo svg{width:48px;height:48px;display:block;border-radius:8px;filter:drop-shadow(0 8px 18px rgba(2,6,23,0.55));}
/* Improve branding text size when logo is hidden */
.brand-text .name{font-size:1.25rem}
.hero-card{padding-top:2rem;padding-bottom:2rem}
.hero-title{font-size:2rem;font-weight:800;margin:0.5rem 0;color:#fff}
.hero-title .accent{color:var(--accent-cyan)}
.hero-sub{color:var(--muted);font-weight:600;margin-bottom:0.5rem}
.lead{color:rgba(230,237,243,0.85)}
.meta{display:flex;gap:12px;justify-content:center;color:var(--muted);font-size:.78rem;margin-top:12px}
.meta-item{background:rgba(255,255,255,0.02);padding:6px 10px;border-radius:999px}
/* Panels / glass */
.glass-panel{background:var(--panel);backdrop-filter: blur(16px) saturate(180%);-webkit-backdrop-filter: blur(16px) saturate(180%);box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5)}
.glass-panel-nav{background:var(--glass-nav);backdrop-filter: blur(12px);-webkit-backdrop-filter: blur(12px);}
.nav-bar{display:flex;align-items:center;justify-content:space-between;padding:0.6rem 1rem}

/* Layout grid */
.grid-layout{display:grid;grid-template-columns:1fr 2fr;gap:1.25rem}
.panel{background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);padding:1rem;border-radius:14px;border:1px solid rgba(255,255,255,0.03)}
.main-panel{min-height:320px}
.panel h3{margin:0 0 0.75rem 0;color:#fff}
.badge{background:rgba(255,255,255,0.02);padding:6px 10px;border-radius:999px;font-size:.75rem;color:var(--muted)}

/* Forms */
.label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:0.5rem}
.input,.textarea{width:100%;padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);background:rgba(3,7,17,0.45);color:var(--text);font-family:var(--mono)}
.textarea{min-height:140px;resize:vertical}
.upload-label{display:inline-block;background:rgba(255,255,255,0.02);padding:10px;border-radius:10px;cursor:pointer}

/* Inbox table */
.table-wrap{overflow:auto;border-radius:10px;border:1px solid rgba(255,255,255,0.04)}
table{width:100%;border-collapse:collapse}
thead{background:rgba(255,255,255,0.02);font-size:.8rem;color:var(--muted)}
th,td{padding:14px 12px;border-bottom:1px solid rgba(255,255,255,0.02);text-align:left}
tbody tr:hover{background:rgba(255,255,255,0.01)}

/* Footer */
.site-footer{border-top:1px solid rgba(255,255,255,0.03);margin-top:2rem}
.footer-inner{display:flex;justify-content:space-between;align-items:center;padding:1rem 0;color:var(--muted);font-size:.85rem}
.footer-inner nav a{margin-left:0.75rem;color:var(--muted);text-decoration:none}

/* Visual animation */
@keyframes pulse-slow{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:.75;transform:scale(1.05)}}
.animate-pulse-slow{animation:pulse-slow 8s ease-in-out infinite}

/* Slightly sharper panels + subtle hover */
.panel, .main-panel, .glass-panel{
    transform: translateZ(0);
}
.panel:hover{
    border-color: rgba(255,255,255,0.06);
    box-shadow: 0 28px 60px -36px rgba(6,182,212,0.10);
}

/* Custom scrollbar */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:rgba(15,23,42,0.8)}
::-webkit-scrollbar-thumb{background:rgba(6,182,212,0.22);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:rgba(6,182,212,0.44)}

/* Responsive */
@media (max-width:900px){
    .grid-layout{grid-template-columns:1fr}
    .hero-title{font-size:1.6rem}
    .footer-inner{flex-direction:column;gap:8px}
}

.pad-loaded-active {
    animation: border-pulse 2s infinite;
}

@keyframes border-pulse {
    0% { border-color: rgba(74, 222, 128, 0.5); box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.2); }
    70% { border-color: rgba(74, 222, 128, 0.8); box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); }
    100% { border-color: rgba(74, 222, 128, 0.5); box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}