:root{
    --bg:#050816;
    --panel:#0b1020;
    --txt:#f9fafb;
    --muted:#9ca3af;
    --accent:#FFD24A;
    --accent-soft:rgba(255,210,74,0.15);
    --border:#1f2933;
    --danger:#f97373;
    --success:#4ade80;
    --radius:16px;
    --shadow:0 18px 45px rgba(0,0,0,.5);
    --input-bg:#111827;
}

*{box-sizing:border-box;margin:0;padding:0}
body.jbs-body{
    min-height:100vh;
    font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Inter,sans-serif;
    background: radial-gradient(circle at top left,#111827 0,#020617 45%,#000 100%);
    color:var(--txt);
}
a{color:#e4b100;text-decoration:none}
a:hover{text-decoration:underline}

.auth-main{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100vh;
    padding:2rem;
}
.jbs-auth-card{
    background:rgba(15,23,42,.95);
    border-radius:24px;
    box-shadow:var(--shadow);
    padding:2.4rem 2.6rem;
    width:100%;
    max-width:420px;
}
.jbs-logo-circle,
.jbs-logo-circle-small{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:linear-gradient(135deg,#3b82f6,#1d4ed8);
    color:#fff;
    font-weight:700;
    box-shadow:0 10px 25px rgba(37,99,235,.6);
}
.jbs-logo-circle{
    width:60px;height:60px;font-size:1.1rem;margin-bottom:1.5rem;
}
.jbs-logo-circle-small{
    width:36px;height:36px;font-size:.9rem;margin-right:.75rem;
}
.jbs-main{
    width:100%;
    max-width:1100px;
    margin:0 auto;
    padding:2.5rem 1.5rem 3.5rem;
}
h1{font-size:1.9rem;margin-bottom:.5rem}
h2{font-size:1.3rem;margin-bottom:.75rem}
.jbs-muted{color:var(--muted);font-size:.9rem}
.jbs-auth-footnote{margin-top:1.5rem;font-size:.9rem;color:var(--muted)}

.jbs-panel{
    background:rgba(15,23,42,.9);
    border-radius:var(--radius);
    border:1px solid rgba(148,163,184,.25);
    box-shadow:var(--shadow);
    padding:1.6rem 1.8rem;
    margin-bottom:1.8rem;
}

.jbs-form label{
    display:block;
    font-size:.9rem;
    margin-bottom:.85rem;
}
.jbs-form input[type="text"],
.jbs-form input[type="email"],
.jbs-form input[type="password"],
.jbs-form select,
.jbs-form textarea{
    margin-top:.35rem;
    width:100%;
    border-radius:12px;
    border:1px solid #1f2937;
    background:var(--input-bg);
    color:var(--txt);
    padding:.6rem .8rem;
    font-size:.9rem;
}
.jbs-form textarea{resize:vertical;min-height:80px}
.jbs-help-text{
    display:block;
    margin-top:.25rem;
    font-size:.75rem;
    color:var(--muted);
}

.jbs-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:.6rem 1.3rem;
    border-radius:999px;
    border:none;
    font-weight:600;
    font-size:.9rem;
    cursor:pointer;
    transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
    text-decoration:none;
}
.jbs-button-primary{
    background:linear-gradient(135deg,#fbbf24,#f59e0b);
    color:#111827;
    box-shadow:0 10px 25px rgba(245,158,11,.65);
}
.jbs-button-primary:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(245,158,11,.8);}
.jbs-button-secondary{
    background:rgba(37,99,235,.15);
    color:#bfdbfe;
    border:1px solid rgba(59,130,246,.6);
}
.jbs-button-ghost{
    background:transparent;
    color:var(--muted);
    border:1px solid rgba(148,163,184,.4);
}
.jbs-button-block{width:100%;margin-top:1rem}
.jbs-button-sm{padding:.3rem .8rem;font-size:.8rem}

.jbs-alert{
    border-radius:12px;
    padding:.75rem 1rem;
    font-size:.85rem;
    margin-bottom:1rem;
}
.jbs-alert-error{
    background:rgba(248,113,113,.1);
    border:1px solid rgba(248,113,113,.6);
    color:#fecaca;
}
.jbs-alert-success{
    background:rgba(74,222,128,.1);
    border:1px solid rgba(74,222,128,.6);
    color:#bbf7d0;
}

.jbs-topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:1rem 1.5rem;
    border-bottom:1px solid rgba(15,23,42,.8);
    background:linear-gradient(90deg,#020617,rgba(15,23,42,.9));
    position:sticky;
    top:0;
    z-index:20;
}
.jbs-topbar-title{font-weight:600;font-size:1.05rem}
.jbs-topbar-right{display:flex;align-items:center;gap:.8rem}
.jbs-topbar-user{font-size:.9rem;color:var(--muted)}
.jbs-topbar-button{font-size:.8rem;padding:.45rem .9rem}

.jbs-profile-card{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
}
.jbs-profile-left{display:flex;align-items:center;gap:1rem}
.jbs-avatar-profile{
    width:56px;height:56px;
    border-radius:999px;
    background:linear-gradient(135deg,#3b82f6,#1d4ed8);
    display:flex;align-items:center;justify-content:center;
    font-weight:700;
    font-size:1.3rem;
}
.jbs-profile-name{font-size:1.3rem}
.jbs-profile-email{font-size:.85rem}
.jbs-profile-stats{display:flex;gap:2rem;font-size:.8rem;color:var(--muted)}
.jbs-profile-stats strong{display:block;font-size:1rem;color:var(--txt)}

.jbs-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.jbs-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
@media(max-width:800px){
    .jbs-profile-card{flex-direction:column;align-items:flex-start}
    .jbs-grid-3{grid-template-columns:1fr}
    .jbs-grid-2{grid-template-columns:1fr}
}

.jbs-form-actions{margin-top:1rem;display:flex;gap:.8rem;align-items:center}
.jbs-checkbox-inline{
    display:flex;
    align-items:center;
    gap:.4rem;
    margin-top:1.85rem;
    font-size:.85rem;
    color:var(--muted);
}

.jbs-panel-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:1rem;
}
.jbs-badge{
    border-radius:999px;
    padding:.2rem .7rem;
    background:rgba(148,163,184,.15);
    font-size:.75rem;
    color:var(--muted);
}

.jbs-view-toggle{
    margin-bottom:1rem;
    display:flex;
    gap:.4rem;
}
.jbs-toggle-btn{
    border-radius:999px;
    border:1px solid rgba(148,163,184,.3);
    background:transparent;
    font-size:.8rem;
    padding:.2rem .8rem;
    color:var(--muted);
    cursor:pointer;
}
.jbs-toggle-btn.is-active{
    background:var(--accent-soft);
    border-color:var(--accent);
    color:var(--accent);
}

/* Masonry Grid */
.jbs-masonry{
    column-count:3;
    column-gap:1rem;
}
@media(max-width:1000px){.jbs-masonry{column-count:2}}
@media(max-width:700px){.jbs-masonry{column-count:1}}

.jbs-card-grid{
    break-inside:avoid;
    background:rgba(15,23,42,.96);
    border-radius:18px;
    border:1px solid rgba(148,163,184,.3);
    margin:0 0 1rem;
    padding:1rem;
    box-shadow:0 14px 30px rgba(0,0,0,.6);
    cursor:pointer;
    transition:transform .15s ease,box-shadow .15s ease;
}
.jbs-card-grid:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 40px rgba(0,0,0,.8);
}
.jbs-card-img{
    width:100%;
    max-height:220px;
    object-fit:cover;
    border-radius:14px;
    margin-bottom:.7rem;
}
.jbs-card-tag{
    display:inline-flex;
    padding:.2rem .6rem;
    border-radius:999px;
    background:rgba(59,130,246,.2);
    color:#bfdbfe;
    font-size:.7rem;
    margin-bottom:.4rem;
}
.jbs-card-title{font-size:1rem;margin-bottom:.25rem}
.jbs-card-meta{font-size:.8rem;color:var(--muted);margin-bottom:.4rem}
.jbs-card-text{font-size:.85rem;margin-bottom:.7rem;color:#e5e7eb}
.jbs-card-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:.75rem;
    color:var(--muted);
}

.jbs-item-list{display:flex;flex-direction:column;gap:1rem}
.jbs-item-card{
    border-radius:16px;
    border:1px solid rgba(148,163,184,.25);
    padding:1rem 1.1rem;
    background:rgba(15,23,42,.95);
}
.jbs-item-header{
    display:flex;
    justify-content:space-between;
    gap:1rem;
    margin-bottom:.5rem;
}
.jbs-item-meta{font-size:.8rem;color:var(--muted)}
.jbs-item-body{font-size:.9rem;color:#e5e7eb;margin-bottom:.6rem}
.jbs-item-footer{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:1rem;
    font-size:.8rem;
}
.jbs-item-files ul{margin:.3rem 0 0 .9rem;font-size:.8rem}
.jbs-link{color:#93c5fd;font-size:.8rem}
.jbs-link-danger{color:#fca5a5}

.jbs-upload-inline{display:flex;align-items:center;justify-content:flex-end}
.jbs-upload-label{
    position:relative;
    border-radius:999px;
    border:1px dashed rgba(148,163,184,.6);
    padding:.35rem .9rem;
    font-size:.78rem;
    color:var(--muted);
    cursor:pointer;
}
.jbs-upload-label input[type="file"]{
    position:absolute;
    inset:0;
    opacity:0;
    cursor:pointer;
}

.jbs-table{
    width:100%;
    border-collapse:collapse;
    font-size:.85rem;
    margin-top:.6rem;
}
.jbs-table th,
.jbs-table td{
    border-bottom:1px solid rgba(31,41,55,.8);
    padding:.5rem .4rem;
}
.jbs-table th{text-align:left;color:var(--muted);font-weight:500;font-size:.8rem}

/* Modal */
.jbs-modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.65);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:40;
}
.jbs-modal.is-open{display:flex;}
.jbs-modal-dialog{
    background:rgba(15,23,42,.98);
    border-radius:18px;
    max-width:620px;
    width:100%;
    padding:1.2rem 1.4rem 1.3rem;
    box-shadow:0 18px 55px rgba(0,0,0,.9);
}
.jbs-modal-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:.6rem;
}
.jbs-modal-meta{font-size:.8rem;color:var(--muted);margin-bottom:.7rem}
.jbs-modal-section h3{font-size:.9rem;margin:.4rem 0 .1rem}
.jbs-modal-section p{font-size:.86rem;color:#e5e7eb}
.jbs-modal-close{
    border:none;
    background:transparent;
    color:var(--muted);
    font-size:1.2rem;
    cursor:pointer;
}

.jbs-admin-stats{
    display:flex;
    gap:2rem;
    font-size:.85rem;
    color:var(--muted);
}
.jbs-admin-stats strong{display:block;color:var(--txt);font-size:1.1rem}
.jbs-admin-links li{margin:.35rem 0;font-size:.9rem}

@media(max-width:700px){
    .jbs-item-footer{flex-direction:column;align-items:flex-start}
    .jbs-admin-stats{flex-direction:column}
}

.jbs-profile-mentor {
    margin-top: 1rem;
    padding: .75rem 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    font-size: .9rem;
}