@charset "UTF-8";

:root {
    --primary:#073bb7;
    --accent:#3478ff;
    --page:#f3f5f8;
    --tile:#f0f3fb;
    --ink:#181818;
    --muted:#606060;
}

* { box-sizing:border-box; }
html { height:100%; font-size:62.5%; overflow:hidden; }
body {
    height:100%;
    margin:0;
    overflow:hidden;
    background:var(--page);
    color:var(--ink);
    font-family:"Microsoft YaHei", sans-serif;
    font-size:14px;
}
button, a { font:inherit; -webkit-tap-highlight-color:transparent; }
button { border:0; cursor:pointer; }
a { color:inherit; text-decoration:none; }
:focus-visible { outline:3px solid rgba(52,120,255,.45); outline-offset:2px; }

.supervision-page {
    display:flex;
    flex-direction:column;
    width:min(100%, 760px);
    height:100%;
    margin:0 auto;
    overflow:hidden;
    background:var(--page);
}
.app-bar {
    position:relative;
    z-index:2;
    flex:0 0 46px;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:46px;
    background:var(--accent);
    color:#fff;
}
.app-bar-title { font-size:15px; font-weight:500; }
.back-btn {
    position:absolute;
    inset:0 auto 0 0;
    display:grid;
    place-items:center;
    width:46px;
    height:46px;
    padding:0;
    background:transparent;
    color:#fff;
}
.back-icon {
    width:22px;
    height:22px;
    background:url(../images/icon_return.png) no-repeat center / contain;
}

main { flex:1 1 auto; min-height:0; }
#calendar-page {
    width:100%;
    height:100%;
    padding:13px 13px max(16px, env(safe-area-inset-bottom));
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
}
.card {
    width:100%;
    margin-bottom:13px;
    border-radius:13px;
    background:#fff;
    box-shadow:0 5px 14px rgba(30,48,80,.045);
}

.card { padding:13px; }
.calendar-top { 
    display:flex; 
    align-items:center; 
    justify-content:space-between; 
    margin-bottom:20px; 
}
.ai-title { 
    display:flex; 
    align-items:center; 
    margin:0; 
    color:#111; 
    font-size:17px; 
    font-weight:700;
    line-height:30px;
}
.ai-title img{
    width:24px;
    margin-right:7px;
}
.month-box { 
    display:flex; 
    align-items:center; 
    gap:10px; 
}
.month-btn {
    display:grid;
    place-items:center;
    width:30px;
    height:30px;
    padding:0;
    border-radius:50%;
    background:#f2f5fc;
    color:var(--primary);
}
.chevron {
    width:8px;
    height:8px;
    border-left:1.5px solid currentColor;
    border-bottom:1.5px solid currentColor;
    transform:rotate(45deg);
}
#nextMonth .chevron { transform:rotate(225deg); }
.month-text { min-width:94px; color:#3b3b3b; font-size:16px; font-weight:700; text-align:center; white-space:nowrap; }
.week-row,
.calendar-grid { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:10px; }
.week-row { margin-bottom:10px; color:var(--primary); font-size:15px; font-weight:700; text-align:center; }
.week-row div { display:grid; place-items:center; height:20px; }
.day-item,
.empty-box { min-width:0; height:42px; }
.day-item {
    display:grid;
    place-items:center;
    width:100%;
    padding:0;
    border:0;
    border-radius:8px;
    background:var(--tile);
    color:#363636;
    font-size:14px;
    transition:transform .15s ease, border-color .15s ease;
}
.day-item:active { transform:scale(.96); }
.day-item.active {
    border:2px solid var(--accent);
    background:#f5f8ff;
    box-shadow:0 1px 3px rgba(52,120,255,.22);
}
.day-dot { width:5px; height:5px; margin-top:-8px; border-radius:50%; background:#fb5323; }

.ai-card { padding:14px 13px; }

.ai-card:first-of-type { min-height:88px; }
.ai-card .title-icon { font-size:0; }
.ai-card .title-icon::before {
    content:"✓";
    font-size:13px;
    line-height:1;
}
.ai-card:last-child .ai-title .title-icon {
    border:0;
    border-radius:8px 8px 5px 5px;
    background:transparent;
    font-size:0;
}
.ai-card:last-child .ai-title .title-icon::before {
    content:"";
    width:18px;
    height:12px;
    border:2px solid var(--primary);
    border-radius:5px;
    box-shadow:inset 0 -3px 0 rgba(7,59,183,.12);
}
.ai-card:last-child .ai-title .title-icon::after {
    content:"";
    position:absolute;
    top:1px;
    left:8px;
    width:5px;
    height:3px;
    border:1.5px solid var(--primary);
    border-bottom:0;
    border-radius:4px 4px 0 0;
}
#dayDetail{margin-top:10px;}
#overallFeedback{margin-top:15px;}
.summary { color:#454545; font-size:14px; line-height:1.7; }
.feedback-item { display:flex; align-items:flex-start; gap:10px; margin-top:14px; }
.feedback-item:first-child { margin-top:0; }
.feedback-content { min-width:0; }
.icon-box {
    position:relative;
    display:grid;
    place-items:center;
    width:29px;
    height:29px;
    flex:0 0 29px;
    border-radius:5px;
    font-size:22px;
    font-weight:400;
}
.icon-box img{
    width:18px;
}
.bg-blue { background:#dbeafe; color:#3b82f6; }
.bg-orange { background:#fff1c9; color:#ff6848; }
.bg-green { background:#d9f9e7; color:#13c992; }
.feedback-title { margin-bottom:5px; color:#161616; font-size:14px; line-height:1.45; }
.feedback-desc { margin-bottom:4px; color:#606060; font-size:14px; line-height:1.45; }
.blue { color:#2d8cff; }
.green { color:#00c993; }
.red { color:#ff5a38; }
.feedback-link {
    display:inline-block;
    font-size:14px;
    font-weight:600;
}
.feedback-link a{
    color:#ff4c32;
}

@media (max-width:360px) {
    #calendar-page { padding-right:10px; padding-left:10px; }
    .card { padding-right:10px; padding-left:10px; }
    .week-row, .calendar-grid { gap:7px; }
    .month-box { gap:5px; }
    .month-text { min-width:86px; font-size:16px; }
}

/*****AI督学助手 end*****/