@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700;800&display=swap');
:root{
    --ink:#162821;
    --muted:#718078;
    --line:#dce6df;
    --paper:#f4f7f3;
    --green:#126d53;
    --lime:#d5f27a;
    --white:#fff;
    --shadow:0 18px 50px #163d2a12
}
*{
    box-sizing:border-box
}
body{
    margin:0;
    color:var(--ink);
    background:var(--paper);
    font:15px/1.65 Manrope,'Noto Sans SC',sans-serif
}
.shell{
    max-width:1200px;
    margin:auto;
    padding:0 40px
}
.top{
    height:84px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid var(--line)
}
.brand{
    display:flex;
    align-items:center;
    gap:11px;
    color:var(--ink);
    text-decoration:none;
    font-weight:800;
    font-size:19px;
    letter-spacing:.03em
}
.brand small{
    display:block;
    font-size:10px;
    color:var(--muted);
    font-weight:500;
    letter-spacing:.12em;
    margin-top:-2px
}
.logo{
    height:38px;
    width:38px;
    border-radius:12px;
    display:block;
    object-fit:cover;
    flex:none
}
.top-user{
    color:var(--muted);
    font-size:13px
}
main{
    padding-top:38px
}
.auth-layout{
    min-height:600px;
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:70px;
    align-items:center;
    padding:20px 4% 65px
}
.intro{
    padding-left:14px
}
.eyebrow{
    font:500 10px 'DM Mono',monospace;
    letter-spacing:.19em;
    color:var(--green);
    text-transform:uppercase
}
.intro h1{
    font-size:clamp(38px,5vw,62px);
    letter-spacing:-.055em;
    line-height:1.22;
    margin:20px 0
}
.intro h1 em{
    font-style:normal;
    color:var(--green)
}
.intro>p{
    max-width:440px;
    color:var(--muted);
    font-size:16px
}
.steps{
    display:flex;
    gap:34px;
    margin-top:54px
}
.steps>div{
    display:flex;
    gap:11px;
    align-items:flex-start;
    font-size:15px;
    font-weight:700
}
.steps b{
    color:var(--green);
    font:500 11px 'DM Mono';
    border-top:2px solid var(--lime);
    padding-top:6px
}
.steps small{
    color:var(--muted);
    font-size:13px;
    font-weight:400
}
.auth-card,.panel{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:20px;
    padding:30px;
    box-shadow:var(--shadow)
}
.auth-card{
    max-width:440px;
    width:100%;
    justify-self:end
}
.tabs{
    display:flex;
    gap:24px;
    border-bottom:1px solid var(--line);
    margin-bottom:22px
}
.tab{
    border:0;
    background:transparent;
    padding:0 0 12px;
    color:var(--muted);
    cursor:pointer;
    font:600 15px Manrope,'Noto Sans SC',sans-serif;
    position:relative
}
.tab.active{
    color:var(--green)
}
.tab.active:after{
    content:'';
    height:2px;
    background:var(--green);
    position:absolute;
    bottom:-1px;
    left:0;
    right:0
}
.field{
    margin:15px 0
}
.field label{
    display:block;
    font-size:12px;
    font-weight:700;
    margin-bottom:7px
}
.hint{
    color:var(--muted);
    font-size:11px;
    font-weight:400;
    margin-left:5px
}
.field input,.field textarea,.field select{
    width:100%;
    border:1px solid var(--line);
    border-radius:9px;
    padding:11px 12px;
    background:#fbfcfa;
    color:var(--ink);
    outline:none;
    font:14px Manrope,'Noto Sans SC',sans-serif
}
.field input:focus,.field textarea:focus,.field select:focus{
    border-color:#72ad91;
    box-shadow:0 0 0 3px #126d5310
}
.code-row{
    display:flex;
    gap:8px
}
.code-row input{
    min-width:0
}
.button{
    border:0;
    border-radius:9px;
    padding:10px 16px;
    cursor:pointer;
    font:600 13px Manrope,'Noto Sans SC',sans-serif;
    transition:.18s
}
.button:hover{
    transform:translateY(-1px)
}
.button.primary{
    background:var(--green);
    color:white
}
.button.primary:hover{
    background:#0c5843
}
.button.secondary{
    background:#edf3ee;
    color:var(--ink);
    border:1px solid var(--line)
}
.button.full{
    width:100%;
    margin-top:8px;
    padding:12px
}
.auth-foot{
    color:var(--muted);
    font-size:11px;
    margin:15px 0 0
}
.role-options{
    display:flex;
    gap:20px;
    font-size:13px
}
.role-options label{
    font-weight:500
}
.notice{
    font-size:12px;
    padding:9px 11px;
    border-radius:8px;
    margin:0 0 12px;
    background:#fff3dc;
    color:#815815
}
.notice.ok{
    background:#e8f5ee;
    color:#17634b
}
.hidden{
    display:none!important
}
.welcome{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 0 24px
}
.term-label{
    display:inline-block;
    padding:6px 12px;
    border:1px solid #dcebdc;
    border-radius:8px;
    background:#edf5e9;
    color:var(--green);
    font-size:14px;
    font-weight:700;
    letter-spacing:.01em
}
.welcome h2{
    font-size:28px;
    letter-spacing:-.04em;
    margin:4px 0
}
.welcome p{
    margin:0;
    color:var(--muted);
    font-size:13px
}
.stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    margin-bottom:32px
}
.stat{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:14px;
    padding:17px 20px
}
.stat b{
    display:block;
    font-size:23px;
    letter-spacing:-.04em
}
.stat span{
    font-size:11px;
    color:var(--muted)
}
.section-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:24px 0 13px
}
.section-head h3{
    font-size:19px;
    margin:2px 0
}
.create-form{
    margin-bottom:27px
}
.two-col,.columns{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px
}
.columns{
    align-items:start;
    gap:26px
}
.columns .section-head{
    margin-top:0
}
.card-list{
    display:grid;
    gap:12px
}
.item-card{
    background:white;
    border:1px solid var(--line);
    border-radius:14px;
    padding:17px 19px
}
.item-card h4{
    margin:0 0 7px;
    font-size:15px
}
.lang-tag{
    display:inline-block;
    vertical-align:middle;
    margin-left:7px;
    padding:2px 7px;
    border-radius:6px;
    background:#eaf4e7;
    color:var(--green);
    font:10px 'DM Mono',monospace
}
.item-card p{
    white-space:pre-wrap;
    color:var(--muted);
    font-size:13px;
    margin:0 0 10px
}
.meta{
    font:11px 'DM Mono';
    color:var(--muted)
}
.codebox{
    width:100%;
    min-height:180px;
    border:1px solid var(--line);
    border-radius:9px;
    background:#10231c;
    color:#e0f1e7;
    padding:13px;
    font:12px/1.6 'DM Mono',monospace;
    resize:vertical
}
.item-card .button{
    margin-top:10px
}
.result{
    font-size:12px;
    font-weight:700;
    color:var(--green);
    margin-top:7px;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    line-height:1.7
}
.result.fail{
    color:#a4513b
}
footer{
    display:flex;
    justify-content:space-between;
    border-top:1px solid var(--line);
    padding:20px 0;
    margin-top:55px;
    color:#89958e;
    font-size:11px
}
footer span{
    font-family:'DM Mono'
}
.class-panel{
    margin:0 0 30px;
    padding:21px 24px
}
.class-panel h3{
    font-size:18px;
    margin:4px 0 12px
}
.class-info{
    font-size:13px;
    color:var(--muted);
    margin:0 0 12px
}
.class-info strong{
    font:700 15px 'DM Mono';
    color:var(--green);
    margin-right:10px
}
.class-info span{
    font-size:11px
}
.member-list{
    display:flex;
    flex-wrap:wrap;
    gap:9px
}
.member{
    display:flex;
    align-items:center;
    gap:9px;
    background:#f5f8f4;
    border:1px solid var(--line);
    border-radius:10px;
    padding:8px 12px;
    font-size:12px
}
.member>span:last-child{
    color:var(--muted);
    font:11px 'DM Mono'
}
.avatar{
    width:25px;
    height:25px;
    border-radius:8px;
    display:grid;
    place-items:center;
    background:var(--lime);
    color:var(--green);
    font-weight:800
}
.empty-members{
    font-size:12px;
    color:var(--muted)
}
.class-tools{
    display:flex;
    gap:9px;
    align-items:center;
    margin:12px 0
}
.class-tools input{
    min-width:190px;
    max-width:360px;
    flex:1;
    border:1px solid var(--line);
    border-radius:9px;
    padding:10px 12px;
    font:13px Manrope,'Noto Sans SC',sans-serif
}
.class-card{
    width:100%;
    border:1px solid var(--line);
    border-radius:13px;
    background:#fff;
    padding:14px 16px
}
.class-card-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px
}
.invite-line{
    margin:7px 0 11px;
    color:var(--muted);
    font-size:12px
}
.invite-line strong{
    font:700 13px 'DM Mono';
    color:var(--green);
    margin-left:5px
}
.class-card .member-list{
    padding-top:8px;
    border-top:1px solid #edf1ed
}
.create-form{
    padding:26px
}
.question-list{
    display:grid;
    gap:13px;
    margin:17px 0
}
.question-form{
    padding:17px;
    border:1px solid var(--line);
    border-radius:13px;
    background:#fafcf9
}
.question-form-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:10px
}
.question-form-head b{
    font-size:13px
}
.remove-question{
    border:0;
    background:transparent;
    color:#9b5947;
    font-size:11px;
    cursor:pointer
}
.question-top{
    display:grid;
    grid-template-columns:1fr 150px 110px;
    gap:12px
}
.question-form .field{
    margin:10px 0
}
.publish-row{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:14px
}
.type-tag,.score-tag,.lang-tag{
    display:inline-block;
    vertical-align:middle;
    margin-left:6px;
    padding:2px 7px;
    border-radius:6px;
    background:#eaf4e7;
    color:var(--green);
    font:10px 'DM Mono',monospace
}
.type-tag{
    background:#edf1f8;
    color:#415d7a;
    font-family:'Noto Sans SC',sans-serif
}
.score-tag{
    background:#fbf3d9;
    color:#856b1d
}
.question-summary{
    padding-top:7px;
    border-top:1px solid #edf1ed
}
.student-question{
    padding:15px 0 4px;
    margin-top:13px;
    border-top:1px solid var(--line)
}
.student-question h5{
    margin:0 0 7px;
    font-size:14px
}
.student-question>p{
    margin:6px 0;
    color:var(--muted);
    font-size:13px
}
.activity-card>.meta{
    padding-bottom:5px
}
.activity-card .student-question .codebox{
    display:block
}
@media(max-width:850px){
    .shell{
        padding:0 20px
    }
.auth-layout{
        grid-template-columns:1fr;
        gap:30px;
        padding:40px 0
    }
.intro{
        padding:0
    }
.steps{
        margin-top:30px;
        gap:20px
    }
.auth-card{
        justify-self:stretch;
        max-width:none
    }
.columns{
        grid-template-columns:1fr
    }
.stats{
        gap:8px
    }
.two-col{
        grid-template-columns:1fr
    }
}
@media(max-width:500px){
    .steps{
        gap:10px
    }
.steps>div{
        font-size:13px
    }
.steps small{
        font-size:11px
    }
.auth-card,.panel{
        padding:21px
    }
.welcome h2{
        font-size:22px
    }
.stats{
        grid-template-columns:1fr 1fr
    }
.stats .stat:last-child{
        display:none
    }
}
@media(max-width:650px){
    .question-top{
        grid-template-columns:1fr 1fr
    }
.question-top .field:first-child{
        grid-column:1/-1
    }
.class-tools{
        flex-wrap:wrap
    }
.class-tools input{
        max-width:none;
        width:100%
    }
.class-card-title{
        align-items:flex-start;
        flex-direction:column
    }
}
.learning-panel{
    margin:0 0 30px
}
.learning-panel .section-head{
    margin-top:0
}
.learning-hint{
    margin:0;
    color:var(--muted);
    font-size:15px;
    line-height:1.8
}
.learning-panel select{
    max-width:300px;
    border:1px solid var(--line);
    border-radius:8px;
    padding:9px 12px;
    background:#fbfcfa;
    color:var(--ink)
}
.learning-wrap{
    margin-top:16px
}
.table-scroll{
    overflow:auto;
    border:1px solid var(--line);
    border-radius:12px;
    background:#fff
}
.learning-table{
    width:100%;
    border-collapse:collapse;
    min-width:650px
}
.learning-table th,.learning-table td{
    padding:12px 14px;
    text-align:left;
    vertical-align:top;
    border-bottom:1px solid #edf1ed
}
.learning-table th{
    background:#f5f8f4;
    font-size:12px;
    white-space:nowrap
}
.learning-table td{
    font-size:13px;
    min-width:160px
}
.student-link{
    border:0;
    padding:0;
    background:none;
    color:var(--green);
    font:700 14px Manrope,"Noto Sans SC",sans-serif;
    cursor:pointer
}
.student-link:hover{
    text-decoration:underline
}
.missing{
    margin-top:5px;
    color:#a4513b;
    font-size:11px
}
.passed{
    margin-top:5px;
    color:var(--green);
    font-size:11px
}
.student-dialog{
    width:min(760px,calc(100% - 32px));
    max-height:85vh;
    overflow:auto;
    border:1px solid var(--line);
    border-radius:18px;
    padding:24px;
    background:var(--paper);
    color:var(--ink);
    box-shadow:0 24px 70px #10231c40
}
.student-dialog::backdrop{
    background:#10231c80
}
.student-dialog form{
    display:flex;
    justify-content:flex-end
}
.student-dialog h3{
    margin:4px 0 18px
}
.student-dialog pre{
    white-space:pre-wrap;
    overflow:auto;
    background:#10231c;
    color:#e0f1e7;
    padding:12px;
    border-radius:8px;
    font:12px/1.6 "DM Mono",monospace
}
.student-dialog details{
    font-size:12px
}
.dialog-close{
    margin-left:auto
}
.test-case-list{
    display:grid;
    gap:12px;
    margin:14px 0
}
.test-case{
    border:1px solid var(--line);
    border-radius:11px;
    padding:12px 14px;
    background:#fff
}
.test-case-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:6px;
    font-size:12px
}
.remove-case{
    border:0;
    background:transparent;
    color:#9b5947;
    font-size:11px;
    cursor:pointer
}
.add-test-case{
    margin-bottom:8px
}
.editor-shell{
    display:grid;
    grid-template-columns:46px minmax(0,1fr);
    border:1px solid #233d33;
    border-radius:10px;
    overflow:hidden;
    background:#10231c;
    min-height:220px
}
.line-gutter{
    overflow:hidden;
    user-select:none;
    text-align:right;
    padding:13px 9px 13px 4px;
    background:#0b1b15;
    color:#688174;
    font:12px/1.6 'DM Mono',monospace
}
.line-gutter span{
    display:block;
    height:1.6em
}
.line-gutter span.error-line{
    color:#ff695d;
    background:#3b1d1a
}
.editor-pane{
    position:relative;
    min-width:0;
    min-height:220px;
    overflow:hidden
}
.code-highlight{
    position:absolute;
    inset:0;
    margin:0;
    padding:13px;
    overflow:hidden;
    white-space:pre;
    font:12px/1.6 'DM Mono',monospace;
    color:#e0f1e7;
    pointer-events:none
}
.editor-input.codebox{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    min-height:220px;
    margin:0;
    border:0;
    border-radius:0;
    resize:vertical;
    overflow:auto;
    padding:13px;
    background:transparent;
    color:transparent;
    -webkit-text-fill-color:transparent;
    caret-color:#e0f1e7;
    font:12px/1.6 'DM Mono',monospace;
    white-space:pre;
    tab-size:4
}
.editor-input::selection{
    background:#6fa18766
}
.squiggle{
    text-decoration-line:underline;
    text-decoration-style:wavy;
    text-decoration-color:#ff6156;
    text-underline-offset:3px;
    background:#ff61561c
}
.live-diagnostics{
    margin:7px 0 10px;
    padding:8px 11px;
    border-left:3px solid #d94b45;
    border-radius:5px;
    background:#fff1ef;
    color:#a63630;
    font:12px/1.7 'DM Mono',monospace;
    white-space:pre-wrap
}
.live-diagnostics.compile-fail{border-left-color:#d94b45;background:#fff1ef;color:#a63630}
.completed-panel{
    margin-top:28px;
    border:1px solid var(--line);
    border-radius:15px;
    background:#eef3ee;
    padding:15px 18px
}
.completed-panel>summary{
    font-weight:700;
    cursor:pointer;
    list-style:none
}
.completed-panel>summary::-webkit-details-marker{
    display:none
}
.completed-panel[open]>summary{
    margin-bottom:14px
}
.completed-question{
    background:#f9fbf8;
    border-radius:10px;
    padding:15px!important
}
.completion-state{
    padding:7px 10px;
    margin:8px 0;
    border-radius:7px;
    background:#e8f5ee;
    color:#17634b;
    font-size:12px;
    font-weight:700
}
.completion-state.pending-review{
    background:#fff3dc;
    color:#815815
}
.attempt-history{
    margin:10px 0;
    font-size:12px
}
.attempt-history>summary{
    cursor:pointer;
    color:var(--green);
    font-weight:700
}
.code-editor-disclosure { margin: 10px 0; }
.code-editor-disclosure > summary {
    cursor: pointer;
    padding: 9px 12px;
    border: 1px solid #c9e3f8;
    border-radius: 8px;
    background: #eaf5ff;
    color: #176da4;
    font-weight: 700;
}
.code-editor-disclosure[open] > summary { margin-bottom: 8px; }
.attempt-row{
    display:grid;
    gap:4px;
    padding:9px 0;
    border-bottom:1px solid var(--line)
}
.attempt-row pre,.review-controls~details pre{
    white-space:pre-wrap;
    overflow:auto;
    background:#10231c;
    color:#e0f1e7;
    padding:10px;
    border-radius:8px
}
.student-actions{
    display:flex;
    gap:9px;
    flex-wrap:wrap;
    margin-top:8px
}
.student-actions .button{
    margin-top:0
}
.review-controls{
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
    margin:10px 0;
    padding:11px;
    border:1px solid #ecd9a5;
    background:#fffaf0;
    border-radius:9px
}
.review-controls b{
    font-size:12px;
    color:#815815;
    width:100%
}
.review-controls select,.review-controls input{
    padding:8px;
    border:1px solid var(--line);
    border-radius:7px;
    background:#fff
}
.review-controls input{
    width:110px
}
.review-controls .button{
    padding:8px 12px
}
.student-question .editor-shell{
    margin-top:4px
}


.workspace-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 22px;
    padding: 7px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #eaf0eb;
}
.workspace-tab {
    border: 0;
    border-radius: 8px;
    padding: 10px 16px;
    background: transparent;
    color: var(--muted);
    font: 600 13px Manrope, 'Noto Sans SC', sans-serif;
    cursor: pointer;
}
.workspace-tab:hover { color: var(--green); background: #f7faf7; }
.workspace-tab.active { color: white; background: var(--green); }
.workspace-panel { min-width: 0; margin-bottom: 28px; }
.submission-toolbar { align-items: end; gap: 16px; flex-wrap: wrap; }
.submission-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.submission-filters input, .submission-filters select {
    min-height: 40px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 11px;
    background: white;
    color: var(--ink);
    font: 13px Manrope, 'Noto Sans SC', sans-serif;
}
.submission-filters input { min-width: min(300px, 65vw); }
.submission-group {
    border: 1px solid var(--line);
    border-radius: 13px;
    background: white;
    overflow: hidden;
}
.submission-group > summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 15px 18px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    list-style-position: inside;
}
.submission-group[open] > summary { border-bottom: 1px solid var(--line); background: #f7faf7; }
.submission-group-items { display: grid; gap: 10px; padding: 12px; }
.submission-card { box-shadow: none; }
@media (max-width: 650px) {
    .workspace-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .workspace-tab { padding: 10px 8px; }
    .submission-filters { width: 100%; }
    .submission-filters input, .submission-filters select { flex: 1; min-width: 0; }
    .submission-group > summary { align-items: flex-start; flex-direction: column; }
}

/* Shared desktop workspace and blue-and-white palette */
:root {
    --ink: #111827;
    --muted: #64748b;
    --line: #d9e6f2;
    --paper: #ffffff;
    --green: #1682c8;
    --lime: #9ad8ff;
    --white: #ffffff;
    --shadow: 0 14px 40px #155b8a10;
}
body { background: #ffffff; }
main { padding-top: 20px; }
.shell:has(#appView:not(.hidden)) { max-width: 1640px; }
.app-layout {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    align-items: start;
    gap: 26px;
}
.workspace-main { min-width: 0; }
.workspace-nav {
    position: sticky;
    top: 18px;
    display: grid;
    align-content: start;
    gap: 8px;
    margin: 0;
    padding: 10px;
    min-height: min(700px, calc(100vh - 150px));
    background: #edf7ff;
    border-color: #cfe6f8;
}
.workspace-tab {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    text-align: left;
    font-size: 15px;
}
.workspace-tab:hover { background: #dff1ff; }
.workspace-tab.active { background: #1682c8; }
.submission-group[open] > summary { background: #f2f8fd; }
.question-form { background: #f7fbff; }
.grader-field { display: grid; gap: 8px; margin: 14px 0; }
.grader-field textarea { width: 100%; min-height: 150px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.grader-field small { color: var(--muted, #657780); line-height: 1.6; }
.test-case { background: #ffffff; }
.completed-panel { background: #eef7ff; }
.completed-question { background: #f6fbff; }
.editor-input::selection { background: #62b4ec66; }
.welcome { padding: 0 0 10px; }
.today-label {
    margin: 0 0 5px;
    color: #111827;
    font-size: 16px;
    font-weight: 700;
}
.term-label {
    padding: 6px 12px;
    border-color: #c7e5fa;
    background: #eaf5ff;
    color: #126da8;
    font-size: 16px;
    font-weight: 800;
}
.welcome h2 { margin: 5px 0 0; }
.stats {
    gap: 8px;
    margin-bottom: 16px;
}
.stat {
    display: flex;
    align-items: baseline;
    gap: 9px;
    min-height: 52px;
    padding: 8px 12px;
    border-radius: 10px;
}
.stat b { display: inline-block; font-size: 18px; }
.stat span { font-size: 11px; }
.workspace-main > .workspace-panel { margin-bottom: 18px; }
.workspace-main > .panel { padding: 20px 22px; }
.learning-panel { margin-bottom: 18px; }
.button.primary { background: #1682c8; }
.button.primary:hover { background: #0969ad; }
.button.secondary { background: #eaf5ff; border-color: #c9e3f8; }
.button.secondary:hover { background: #d9efff; }
.notice { background: #eef7ff; color: #365a78; }
.notice.ok { background: #e7f4ff; color: #155f91; }
.field input, .field textarea, .field select,
.class-tools input, .learning-panel select,
.review-controls select, .review-controls input,
.submission-filters input, .submission-filters select {
    border-color: #cfe0ee;
    background-color: #f8fbff;
}
.field input:focus, .field textarea:focus, .field select:focus {
    border-color: #62b4ec;
    box-shadow: 0 0 0 3px #1682c81a;
}
.term-label, .assistant-card, .assistant-note { box-shadow: none; }
.member, .question-form, .completed-panel, .completed-question,
.learning-table th, .class-info, .completion-state {
    background-color: #f2f8fd;
}
.class-card .member-list, .question-summary, .learning-table th,
.learning-table td { border-color: #e3edf6; }
.type-tag, .lang-tag { background: #e8f5ff; color: #176da4; }
.score-tag { background: #eef7ff; color: #426b8c; }
.completion-state { color: #146c9f; }
.completion-state.pending-review, .review-controls {
    background: #f2f8ff;
    border-color: #cfe3f3;
}
.review-controls b { color: #315c7c; }
.passed, .student-link, .attempt-history > summary { color: #1479b5; }
.assistant-intro { margin: 0 0 16px; color: var(--muted); }
.assistant-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.assistant-card, .assistant-note {
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #fff;
    padding: 18px;
}
.assistant-category {
    color: #1479b5;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
}
.assistant-card h4 { margin: 5px 0 8px; font-size: 17px; }
.assistant-card p { margin: 0 0 14px; color: var(--muted); font-size: 13px; }
.assistant-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.assistant-links a { text-decoration: none; }
.assistant-links .button { font-size: 13px; }
.assistant-links .text-link { color: #1479b5; font-size: 13px; font-weight: 700; }
.assistant-note { margin-top: 14px; background: #f7fbff; }
.assistant-note ol { margin: 8px 0 0; padding-left: 22px; color: var(--muted); font-size: 13px; }
.assistant-note li + li { margin-top: 4px; }
.ai-status { margin: 0 0 12px; }
.ai-review-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 10px 0 4px; }
.ai-review-button:disabled { opacity: .6; cursor: not-allowed; }
.ai-advice {
    margin: 8px 0 12px;
    padding: 14px 16px;
    border: 1px solid #cfe3f3;
    border-radius: 10px;
    background: #f2f8ff;
    color: #183247;
    white-space: pre-wrap;
    line-height: 1.7;
    overflow-wrap: anywhere;
}
.ai-advice-controls { display: flex; justify-content: flex-end; margin: -6px 0 12px; }
.ai-advice-toggle {
    border: 0;
    padding: 4px 8px;
    background: transparent;
    color: #1479b5;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}
.ai-advice-toggle:hover { text-decoration: underline; }
@media (max-width: 850px) {
    .app-layout { grid-template-columns: 160px minmax(0, 1fr); gap: 16px; }
    .workspace-main > .panel { padding: 18px; }
}
@media (max-width: 650px) {
    .app-layout { grid-template-columns: 1fr; gap: 12px; }
    .workspace-nav { position: static; min-height: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .workspace-tab { min-height: 44px; padding: 10px; text-align: center; font-size: 14px; }
    .assistant-grid { grid-template-columns: 1fr; }
    .welcome { align-items: flex-start; gap: 12px; }
    .welcome h2 { font-size: 22px; }
}
/* Focused student work and teacher review pages */
.detail-mode .welcome, .detail-mode #stats { display: none; }
.detail-mode .workspace-main > .workspace-panel { margin-bottom: 0; }
.practice-category-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.practice-category-button { display:grid; gap:10px; min-height:112px; padding:22px; text-align:left; border:1px solid var(--line); border-radius:14px; background:#f3f9ff; color:var(--ink); cursor:pointer; font:inherit; }
.practice-category-button:hover { border-color:#8fcaf1; background:#eaf5ff; }
.practice-category-button b { font-size:20px; }
.practice-category-button span { color:var(--muted); }
.practice-question-list { display:grid; gap:10px; margin-top:14px; }
.practice-question-row { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px; border:1px solid var(--line); border-radius:10px; background:#fbfdff; }
.practice-question-row p { margin:8px 0 0; }
.student-question.task-focused { display:grid; grid-template-columns:minmax(260px,1fr) minmax(0,2fr); gap:18px; align-items:start; padding:0; border:0; }
.task-problem, .task-code, .submission-problem-pane, .submission-code-pane { min-width:0; }
.student-task-layout, .submission-detail-layout { display:grid; grid-template-columns:minmax(260px,1fr) minmax(0,2fr); gap:18px; align-items:start; }
.task-problem, .submission-problem-pane { position:sticky; top:14px; max-height:calc(100vh - 32px); overflow:auto; }
.task-code .codebox, .submission-code-pane pre { min-height:55vh; }
.submission-group-page h3 { margin:16px 0; }
.submission-group-button { width:100%; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 20px; border:1px solid var(--line); border-radius:13px; background:white; color:var(--ink); text-align:left; font:inherit; cursor:pointer; }
.submission-group-button + .submission-group-button { margin-top:10px; }
.submission-group-button:hover { background:#f2f8fd; border-color:#9ecff0; }
.submission-record-list { display:grid; gap:10px; }
.submission-record-row { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.submission-record-row p { white-space:pre-wrap; overflow-wrap:anywhere; }
.submission-problem-text, .submission-error-detail { margin-top:14px; color:var(--muted); white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.65; }
.submission-result-box { margin-top:16px; padding:14px; border-radius:10px; background:#f1f8ff; }
.submission-result-box p { margin:8px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; }
.submission-sample-box { margin-top:14px; padding:12px; border:1px solid var(--line); border-radius:10px; background:#fbfdff; }
.submission-sample-box p { margin:9px 0 4px; color:var(--muted); font-size:12px; }
.submission-sample-box pre { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; font:12px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; }
.submission-code-pane .review-code-fold { position:sticky; top:12px; }
.submission-code-pane .review-code-fold pre { max-height:calc(100vh - 90px); overflow:auto; }
@media(max-width:850px) {
  .practice-category-grid { grid-template-columns:1fr; }
  .student-task-layout, .submission-detail-layout { grid-template-columns:1fr; }
  .task-problem, .submission-problem-pane { position:static; max-height:none; }
  .submission-record-row, .practice-question-row { align-items:flex-start; flex-direction:column; }
}