.jbg-app{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#fff;border:1px solid #ddd;border-radius:14px;padding:18px;max-width:100%;box-sizing:border-box}
.jbg-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.jbg-header h2{margin:0;font-size:28px}.jbg-subtitle{color:#666;margin-top:4px}
.jbg-filters{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin-bottom:16px}
.jbg-filters label,.jbg-form-grid label{display:flex;flex-direction:column;gap:5px;font-weight:600}
.jbg-filters select,.jbg-form-grid input,.jbg-form-grid textarea{padding:10px;border:1px solid #bbb;border-radius:8px;background:#fff}
.jbg-primary{border:0;border-radius:8px;padding:11px 15px;font-weight:700;cursor:pointer;background:#222;color:#fff}
.jbg-tabs{display:flex;gap:8px;overflow:auto;margin:10px 0 16px}.jbg-tab{white-space:nowrap;padding:10px 14px;border:1px solid #bbb;background:#f6f6f6;border-radius:8px;cursor:pointer}
.jbg-tab.active{background:#222;color:#fff;border-color:#222}
.jbg-students-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.jbg-student-card{display:flex;gap:12px;align-items:center;border:1px solid #ddd;border-radius:12px;padding:12px}
.jbg-student-card img,.jbg-avatar{width:58px;height:58px;border-radius:50%;object-fit:cover;flex:0 0 58px}
.jbg-avatar{display:flex;align-items:center;justify-content:center;background:#eee;font-weight:800}
.jbg-table-wrap{overflow:auto;border:1px solid #ddd;border-radius:10px}
.jbg-grade-table{border-collapse:separate;border-spacing:0;min-width:1050px;width:100%;background:#fff}
.jbg-grade-table th,.jbg-grade-table td{border-right:1px solid #ddd;border-bottom:1px solid #ddd;padding:6px;text-align:center}
.jbg-grade-table th{background:#f5f5f5;position:sticky;top:0;z-index:2}
.jbg-grade-table .sticky{position:sticky;left:0;z-index:3;background:#fff;min-width:210px;text-align:left}
.jbg-grade-table th.sticky{background:#f5f5f5;z-index:4}
.jbg-grade-table .final{min-width:130px}.jbg-grade{width:58px;padding:8px 4px;text-align:center;border:1px solid #bbb;border-radius:6px}
.jbg-grade.term-final{font-weight:800;border-width:2px}.jbg-grade.saving{opacity:.45}.jbg-grade.saved{outline:2px solid #999}
.jbg-help{font-size:13px;color:#666;margin-top:8px}
.jbg-msg{padding:9px 12px;border-radius:8px;margin-bottom:10px}.jbg-msg.ok{background:#eef7ee}.jbg-msg.err{background:#fdeeee}
.jbg-modal{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:99999;display:flex;align-items:center;justify-content:center;padding:18px}
.jbg-modal[hidden]{display:none}.jbg-modal-card{background:#fff;width:min(620px,100%);max-height:90vh;overflow:auto;border-radius:14px;padding:20px;position:relative}
.jbg-close{position:absolute;right:12px;top:10px;border:0;background:transparent;font-size:28px;cursor:pointer}
.jbg-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}.jbg-form-grid .wide{grid-column:1/-1}
.jbg-notice{padding:15px;border:1px solid #ddd;border-radius:10px;background:#fafafa}
@media(max-width:700px){.jbg-app{padding:12px;border-radius:8px}.jbg-header h2{font-size:23px}.jbg-filters{align-items:stretch}.jbg-filters label,.jbg-filters select,.jbg-primary{width:100%}.jbg-form-grid{grid-template-columns:1fr}.jbg-form-grid .wide{grid-column:auto}}

.jbg-student-table{border-collapse:separate;border-spacing:0;width:100%;min-width:700px;background:#fff}
.jbg-student-table th,.jbg-student-table td{padding:10px 12px;border-right:1px solid #ddd;border-bottom:1px solid #ddd;text-align:left;vertical-align:middle}
.jbg-student-table th{background:#f5f5f5;position:sticky;top:0;z-index:2}
.jbg-student-table td.photo{width:72px}
.jbg-student-table img,.jbg-student-table .jbg-avatar{width:46px;height:46px;border-radius:50%;object-fit:cover}

.jbg-manage{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.jbg-manage-box{border:1px solid #ddd;border-radius:12px;padding:16px;background:#fafafa}
.jbg-manage-box h3{margin-top:0}
.jbg-manage-box form{display:flex;flex-direction:column;gap:12px}
.jbg-manage-box label{display:flex;flex-direction:column;gap:5px;font-weight:600}
.jbg-manage-box input,.jbg-manage-box select{padding:10px;border:1px solid #bbb;border-radius:8px;background:#fff}
.jbg-delete-student{border:1px solid #aaa;background:#fff;border-radius:7px;padding:7px 10px;cursor:pointer}
.jbg-delete-student:hover{background:#f1f1f1}

.jbg-top-actions{display:flex;justify-content:flex-start;margin:4px 0 12px}
.jbg-secondary{border:1px solid #999;background:#fff;border-radius:8px;padding:10px 14px;font-weight:700;cursor:pointer}
.jbg-secondary.active{background:#222;color:#fff;border-color:#222}
#jbg-manage-area{margin-bottom:16px}
#jbg-manage-area[hidden]{display:none}
.jbg-grade-table.combined{min-width:1900px}
.jbg-grade-table .term-head{text-align:center;font-weight:800;background:#ececec}
.jbg-grade-table .term2-start{border-left:4px solid #444 !important}
.jbg-grade-table td.term2-start{border-left:4px solid #444 !important}

/* v0.1.4 - compact desktop gradebook */
.jbg-grade-table.combined{
    min-width:0;
    width:100%;
    table-layout:fixed;
}
.jbg-grade-table.combined th,
.jbg-grade-table.combined td{
    padding:3px 2px;
    font-size:12px;
}
.jbg-grade-table.combined .sticky{
    min-width:0;
    width:118px;
    max-width:118px;
}
.jbg-grade-table.combined .name{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.jbg-grade-table.combined th:not(.sticky){
    width:38px;
}
.jbg-grade-table.combined th.final{
    width:50px;
    font-size:11px;
    line-height:1.15;
}
.jbg-grade-table.combined .jbg-grade{
    width:30px;
    min-width:30px;
    max-width:30px;
    box-sizing:border-box;
    padding:5px 1px;
    font-size:12px;
}
.jbg-grade-table.combined .term-final{
    width:36px;
    min-width:36px;
    max-width:36px;
}
.jbg-grade-table.combined .term2-start{
    border-left-width:3px !important;
}
.jbg-actions{
    white-space:nowrap;
}
.jbg-edit-student,
.jbg-delete-student{
    border:1px solid #aaa;
    background:#fff;
    border-radius:7px;
    padding:7px 9px;
    cursor:pointer;
    margin-right:5px;
}
.jbg-edit-student:hover,
.jbg-delete-student:hover{
    background:#f1f1f1;
}

@media(max-width:900px){
    .jbg-grade-table.combined{
        min-width:1040px;
        table-layout:fixed;
    }
}

/* v0.1.5 - student column + photo */
.jbg-grade-table.combined{
    width:100%;
    table-layout:fixed;
}
.jbg-grade-table.combined .sticky{
    width:150px !important;
    min-width:150px !important;
    max-width:150px !important;
}
.jbg-grade-table.combined th:not(.sticky){
    width:auto !important;
}
.jbg-grade-table.combined .name{
    padding:3px 5px;
}
.jbg-grade-student{
    display:flex;
    align-items:center;
    gap:5px;
    min-width:0;
}
.jbg-grade-student > span:last-child{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.jbg-grade-photo,
.jbg-grade-avatar{
    width:25px;
    height:25px;
    min-width:25px;
    border-radius:50%;
    object-fit:cover;
}
.jbg-grade-avatar{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#eee;
    font-size:9px;
    font-weight:700;
}
@media(min-width:901px){
    .jbg-grade-table.combined .jbg-grade{
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
        padding:4px 0 !important;
    }
}
@media(max-width:900px){
    .jbg-grade-table.combined .sticky{
        width:130px !important;
        min-width:130px !important;
        max-width:130px !important;
    }
}

/* v0.1.6 */
.jbg-student-table .jbg-notes-cell{
    min-width:180px;
    max-width:320px;
    white-space:normal;
    line-height:1.35;
}

/* v0.1.7 - separate management view */
.jbg-manage-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin:4px 0 16px;
}
.jbg-manage-header h3{margin:0}
.jbg-existing{margin-top:18px}
.jbg-existing h4{margin:0 0 8px;font-size:14px}
.jbg-mini-table{
    width:100%;
    border-collapse:collapse;
    background:#fff;
}
.jbg-mini-table th,
.jbg-mini-table td{
    border:1px solid #ddd;
    padding:8px 10px;
    text-align:left;
}
.jbg-mini-table th{background:#f3f3f3}

/* v0.1.8 */
.jbg-mini-actions{
    white-space:nowrap;
}
.jbg-mini-actions button{
    border:1px solid #aaa;
    background:#fff;
    border-radius:6px;
    padding:6px 8px;
    margin-right:5px;
    cursor:pointer;
}
.jbg-mini-actions button:hover{
    background:#f1f1f1;
}

/* v0.1.9 */
#jbg-manage-message{
    margin-bottom:12px;
}

/* v0.2.0 */
.jbg-grade-label{
    width:100%;
    min-width:0;
    box-sizing:border-box;
    border:1px solid #bbb;
    border-radius:4px;
    padding:3px 1px;
    font-size:9px;
    text-align:center;
}
.jbg-label-row th{background:#fafafa}
.jbg-card-link{
    border:0;
    background:transparent;
    padding:0;
    cursor:pointer;
    text-align:left;
    font:inherit;
}
.jbg-card-link:hover{text-decoration:underline}
.jbg-card-modal-card{width:min(900px,96vw)}
.jbg-card-head{display:flex;gap:16px;align-items:center;margin-bottom:16px}
.jbg-card-photo{width:90px;height:90px;border-radius:12px;object-fit:cover;flex:0 0 90px}
.jbg-card-no-photo{display:flex;align-items:center;justify-content:center;background:#eee;font-weight:800}
.jbg-card-head h2{margin:0 0 6px}
.jbg-card-notes{padding:10px;background:#f7f7f7;border-radius:8px;margin-bottom:15px}
.jbg-card-grades{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:7px}
.jbg-card-grade{border:1px solid #ddd;border-radius:7px;padding:7px;display:flex;justify-content:space-between;gap:8px}
.jbg-card-grade span{font-size:12px}
.jbg-card-grade.final{font-weight:700;border-width:2px}
.jbg-backup-box{border:1px solid #ddd;border-radius:12px;padding:16px;background:#fafafa;margin-bottom:16px}
.jbg-backup-box h3{margin-top:0}
.jbg-backup-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.jbg-restore-label{display:inline-flex;align-items:center;gap:8px;border:1px solid #aaa;background:#fff;border-radius:8px;padding:9px 12px;font-weight:700}

/* v0.2.1 */
.jbg-card-student{
    border:1px solid #777;
    background:#f7f7f7;
    border-radius:7px;
    padding:7px 9px;
    cursor:pointer;
    margin-right:5px;
}
.jbg-card-student:hover{background:#ececec}
.jbg-grade:out-of-range{
    outline:2px solid #999;
}

/* v0.2.2 - integer grade fields without spinner arrows */
.jbg-grade{
    appearance:textfield;
    -moz-appearance:textfield;
}
.jbg-grade::-webkit-outer-spin-button,
.jbg-grade::-webkit-inner-spin-button{
    -webkit-appearance:none;
    margin:0;
}

/* v0.2.3 */
.jbg-top-actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}

/* v0.2.4 - top action buttons */
.jbg-top-actions{
    display:flex !important;
    align-items:center;
    justify-content:flex-start;
    gap:10px !important;
    flex-wrap:wrap;
}

/* v0.2.5 - bulk Excel import */
.jbg-import-box .jbg-help{
    margin-bottom:12px;
}
#jbg-import-result{
    margin-top:12px;
}
.jbg-import-errors{
    margin-top:10px;
    max-height:220px;
    overflow:auto;
    border:1px solid #ddd;
    background:#fff;
    border-radius:8px;
    padding:10px 12px;
    font-size:13px;
}
.jbg-import-errors ul{
    margin:6px 0 0 20px;
}

/* v0.2.6 - manual grade colors */
.jbg-grade-cell{
    position:relative;
    transition:background .12s ease;
}
.jbg-grade-wrap{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}
.jbg-color-button{
    position:absolute;
    right:0;
    bottom:0;
    width:10px;
    height:10px;
    min-width:10px;
    padding:0;
    margin:0;
    border:0;
    background:transparent;
    font-size:9px;
    line-height:9px;
    color:#777;
    cursor:pointer;
    opacity:.7;
}
.jbg-color-button:hover{
    opacity:1;
}
.jbg-color-palette{
    position:absolute;
    z-index:50;
    top:100%;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:4px;
    padding:5px;
    border:1px solid #aaa;
    border-radius:7px;
    background:#fff;
    box-shadow:0 3px 12px rgba(0,0,0,.18);
    white-space:nowrap;
}
.jbg-palette-color{
    width:18px;
    height:18px;
    min-width:18px;
    border:1px solid #777;
    border-radius:50%;
    padding:0;
    cursor:pointer;
}
.jbg-palette-none{
    background:#fff;
    position:relative;
}
.jbg-palette-none::after{
    content:"";
    position:absolute;
    width:18px;
    height:2px;
    background:#b00020;
    transform:rotate(-45deg);
    left:-1px;
    top:7px;
}
.jbg-palette-red{background:#f6caca}
.jbg-palette-orange{background:#f8d8b2}
.jbg-palette-yellow{background:#f6efb2}
.jbg-palette-green{background:#cce8c7}
.jbg-palette-blue{background:#c9e4f5}
.jbg-palette-purple{background:#dfcef2}

.jbg-color-red{background:#f9dddd !important}
.jbg-color-orange{background:#fae4ca !important}
.jbg-color-yellow{background:#fbf5c9 !important}
.jbg-color-green{background:#def0da !important}
.jbg-color-blue{background:#dceefa !important}
.jbg-color-purple{background:#eadff5 !important}

.jbg-grade-cell[class*="jbg-color-"] .jbg-grade{
    background:transparent !important;
}

/* v0.3.0 */
.jbg-palette-red{background:#d71920 !important}
.jbg-palette-pink{background:#f6caca !important}
.jbg-color-red{background:#ef4444 !important}
.jbg-color-pink{background:#f9dddd !important}
.jbg-lesson-entry{border:1px solid #ddd;border-radius:10px;padding:14px;margin-bottom:18px;background:#fafafa}
.jbg-lesson-entry h3,.jbg-lesson-list h3{margin:0 0 12px}
.jbg-lesson-form{display:grid;grid-template-columns:160px 150px 1fr;gap:10px;align-items:end}
.jbg-lesson-form label{display:flex;flex-direction:column;gap:5px;font-weight:600}
.jbg-lesson-form input,.jbg-lesson-form select,.jbg-lesson-form textarea{box-sizing:border-box;width:100%;border:1px solid #bbb;border-radius:7px;padding:8px;font:inherit}
.jbg-lesson-description{grid-column:3}.jbg-lesson-buttons{grid-column:1/-1;display:flex;gap:8px}
.jbg-lesson-table{width:100%;border-collapse:collapse}.jbg-lesson-table th,.jbg-lesson-table td{border:1px solid #ddd;padding:8px 10px;vertical-align:top;text-align:left}
.jbg-lesson-table th{background:#f3f3f3}.jbg-lesson-table td:nth-child(2),.jbg-lesson-table th:nth-child(2){width:55px;text-align:center}
.jbg-lesson-text{white-space:pre-wrap}
@media(max-width:700px){.jbg-lesson-form{grid-template-columns:1fr 1fr}.jbg-lesson-description{grid-column:1/-1}}

/* v0.3.1 - lesson form vertical alignment */
.jbg-lesson-form{
    align-items:start !important;
}
.jbg-lesson-form > label{
    align-self:start;
    margin:0 !important;
}
.jbg-lesson-form > label > input,
.jbg-lesson-form > label > select,
.jbg-lesson-form > label > textarea{
    margin-top:0 !important;
}

/* v0.4.0 - independent Gradebook login */
.jbg-login-shell{min-height:55vh;display:flex;align-items:center;justify-content:center;padding:24px 12px;box-sizing:border-box}
.jbg-login-card{width:min(420px,100%);background:#fff;border:1px solid #ddd;border-radius:14px;padding:24px;box-sizing:border-box;box-shadow:0 8px 28px rgba(0,0,0,.08)}
.jbg-login-card h2{margin:0 0 20px;text-align:center;font-size:25px}
#jbg-front-login-form{display:flex;flex-direction:column;gap:14px}
#jbg-front-login-form label{display:flex;flex-direction:column;gap:6px;font-weight:700}
#jbg-front-login-form input{width:100%;box-sizing:border-box;padding:11px 12px;border:1px solid #aaa;border-radius:8px;font:inherit}
#jbg-front-login-form .jbg-primary{width:100%;margin-top:4px}
#jbg-login-message{margin-top:12px}
.jbg-login-warning{border:1px solid #d6b36a;background:#fff8e7;border-radius:8px;padding:12px;line-height:1.45}
.jbg-logout-button{border:1px solid #999;background:#fff;color:#222;border-radius:8px;padding:9px 12px;font-weight:700;cursor:pointer;white-space:nowrap}
.jbg-logout-button:hover{background:#f3f3f3}
@media(max-width:600px){.jbg-header{align-items:flex-start;gap:10px}.jbg-logout-button{padding:8px 10px;font-size:12px}}

/* v0.4.1 - position + Excel export */
.jbg-grade-table.combined .jbg-position-head,
.jbg-grade-table.combined .jbg-position-cell{
    width:42px !important;
    min-width:42px !important;
    max-width:42px !important;
    text-align:center;
}
.jbg-position-input{
    width:34px;
    min-width:34px;
    max-width:34px;
    box-sizing:border-box;
    padding:4px 2px;
    border:1px solid #bbb;
    border-radius:5px;
    text-align:center;
    font-size:11px;
}
.jbg-position-input.saved{
    outline:2px solid #aaa;
}

/* v1.0.1 - round grade color palette (Multi-user style) */
.jbg-app .jbg-color-palette{
    gap:6px !important;
    padding:6px 7px !important;
    border-radius:10px !important;
}
.jbg-app .jbg-color-palette .jbg-palette-color{
    width:22px !important;
    height:22px !important;
    min-width:22px !important;
    max-width:22px !important;
    min-height:22px !important;
    max-height:22px !important;
    padding:0 !important;
    margin:0 !important;
    border:1px solid #777 !important;
    border-radius:50% !important;
    box-sizing:border-box !important;
    appearance:none !important;
    -webkit-appearance:none !important;
}
.jbg-app .jbg-color-palette .jbg-palette-none::after{
    width:22px !important;
    left:-1px !important;
    top:9px !important;
}


/* v1.0.2 - Multi-user style color trigger: upper-right corner */
.jbg-app .jbg-grade-wrap{
    position:relative;
}
.jbg-app .jbg-color-button{
    position:absolute !important;
    right:-1px !important;
    top:-2px !important;
    bottom:auto !important;
    width:10px !important;
    height:10px !important;
    min-width:10px !important;
    padding:0 !important;
    margin:0 !important;
    border:1px solid #777 !important;
    border-radius:50% !important;
    background:#fff;
    cursor:pointer;
    z-index:2;
    opacity:1;
    font-size:0 !important;
    line-height:0 !important;
}
.jbg-app .jbg-color-button:hover{opacity:1;}
.jbg-app .jbg-grade-cell.jbg-color-red .jbg-color-button{background:#ef4444;}
.jbg-app .jbg-grade-cell.jbg-color-pink .jbg-color-button{background:#f9dddd;}
.jbg-app .jbg-grade-cell.jbg-color-orange .jbg-color-button{background:#fae4ca;}
.jbg-app .jbg-grade-cell.jbg-color-yellow .jbg-color-button{background:#fbf5c9;}
.jbg-app .jbg-grade-cell.jbg-color-green .jbg-color-button{background:#def0da;}
.jbg-app .jbg-grade-cell.jbg-color-blue .jbg-color-button{background:#dceefa;}
.jbg-app .jbg-grade-cell.jbg-color-purple .jbg-color-button{background:#eadff5;}