* { box-sizing: border-box; }
body { margin: 0px; font-family: system-ui, "PingFang SC", "Microsoft YaHei", sans-serif; background: rgb(244, 247, 236); color: rgb(44, 58, 44); }
header { display: flex; gap: 12px; align-items: center; background: rgb(62, 107, 62); color: rgb(255, 255, 255); padding: 10px 16px; }
header nav { margin-left: auto; display: flex; gap: 8px; }
button { padding: 10px 16px; font-size: 15px; border-radius: 10px; border: 1px solid rgb(200, 216, 192); background: rgb(255, 255, 255); cursor: pointer; min-height: 40px; }
button:hover { background: rgb(234, 243, 226); }
main { padding: 14px; }
.hidden { display: none !important; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.card { background: rgb(255, 255, 255); border-radius: 14px; padding: 12px; box-shadow: rgba(0, 0, 0, 0.067) 0px 2px 8px; position: relative; }
.card.mature { outline: rgb(240, 180, 41) solid 3px; }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; background: rgb(255, 255, 255); padding: 8px; border-radius: 10px; }
#v-main .topbar { gap: 10px; padding: 10px 14px; border: 1px solid rgb(225, 235, 220); border-radius: 16px; box-shadow: rgba(61, 99, 57, 0.07) 0px 4px 14px; background: rgb(255, 253, 248); }
#v-main .topbar #cname { font-size: 17px; color: rgb(44, 66, 45); letter-spacing: 0.02em; margin: 0px 2px; white-space: nowrap; }
#v-main .topbar button { min-height: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0px 15px; font-size: 14px; font-weight: 650; color: rgb(51, 71, 58); background: rgb(255, 255, 255); border: 1px solid rgb(207, 226, 201); border-radius: 16px; box-shadow: rgba(61, 99, 57, 0.08) 0px 1px 3px; transition: transform 0.16s, box-shadow 0.16s, background 0.16s, border-color 0.16s; white-space: nowrap; }
#v-main .topbar button:hover { transform: translateY(-1px); background: rgb(241, 248, 236); border-color: rgb(179, 214, 171); box-shadow: rgba(61, 99, 57, 0.12) 0px 4px 10px; }
#v-main .topbar button:active { transform: translateY(0px); box-shadow: rgba(61, 99, 57, 0.1) 0px 1px 3px; }
#v-main .topbar button:focus-visible { outline: rgb(65, 173, 104) solid 2px; outline-offset: 2px; }
#v-main .topbar button[onclick="go('classes')"] { width: 40px; min-width: 40px; padding: 0px; font-size: 17px; font-weight: 800; }
#v-main .topbar button[onclick="revertLast()"] { border-color: rgb(236, 201, 168); background: rgb(255, 250, 243); color: rgb(138, 90, 46); }
#v-main .topbar button[onclick="revertLast()"]:hover { background: rgb(253, 241, 226); border-color: rgb(223, 169, 111); }
@media (max-width: 720px) {
  }
.modal { position: fixed; inset: 0px; z-index: 9999; isolation: isolate; background: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; }
.box { position: relative; z-index: 1; background: rgb(255, 255, 255); padding: 20px; border-radius: 14px; max-width: 520px; width: 92%; max-height: 86vh; overflow: auto; }
.qk { display: flex; gap: 6px; flex-wrap: wrap; max-width: 100%; }
.qk button { font-weight: 700; flex: 1 1 0px; min-width: 0px; padding: 8px 4px; font-size: 14px; white-space: nowrap; }
#toast { position: fixed; z-index: 10000; bottom: 20px; left: 50%; transform: translateX(-50%); background: rgb(51, 51, 51); color: rgb(255, 255, 255); padding: 8px 16px; border-radius: 8px; display: none; }
.grow { animation: 0.8s ease 0s 1 normal none running wig; }
.stageup { animation: 2s ease 0s 1 normal none running pop; }
@keyframes wig { 
  50% { transform: scale(1.08) rotate(2deg); }
}
@keyframes pop { 
  0% { transform: scale(0.8); }
  40% { transform: scale(1.15); }
}
@media (max-width: 1366px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0px !important; margin: -1px !important; overflow: hidden !important; clip: rect(0px, 0px, 0px, 0px) !important; white-space: nowrap !important; border: 0px !important; }
.auth-page { background: rgb(220, 239, 251); height: 100dvh; overflow: hidden; }
.auth-page main { padding: 0px; height: 100%; }
.auth-view { height: 100%; min-height: 0px; }
.auth-shell { position: relative; min-height: 100svh; overflow: hidden; background: rgb(220, 239, 251); }
.auth-background { position: absolute; inset: 0px; background: url("auth-bg-desktop.png") center center / cover no-repeat; }
.auth-overlay { position: relative; z-index: 1; min-height: 100svh; display: flex; align-items: center; justify-content: flex-end; padding: 28px clamp(34px, 3.6vw, 72px) 28px 24px; }
.auth-card { width: clamp(455px, 25.5vw, 500px); flex: 0 0 auto; max-height: calc(-56px + 100svh); overflow-y: auto; scrollbar-width: thin; background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(12px); border-radius: 28px; padding: 38px 40px 34px; box-shadow: rgba(38, 74, 41, 0.22) 0px 26px 80px; border: 1px solid rgba(225, 236, 220, 0.96); }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 2px solid rgb(237, 241, 234); margin: 0px 0px 30px; }
.auth-tab { border: 0px; border-radius: 0px; background: transparent; color: rgb(138, 151, 138); font-size: 20px; font-weight: 750; padding: 18px 13px 16px; position: relative; min-height: auto; }
.auth-tab:hover { background: transparent; color: rgb(31, 139, 73); }
.auth-tab.active { color: rgb(31, 139, 73); }
.auth-tab.active::after { content: ""; position: absolute; height: 3px; border-radius: 3px; background: rgb(30, 169, 87); left: 12%; right: 12%; bottom: -2px; }
.auth-form { display: flex; flex-direction: column; gap: 18px; }
.auth-form > label { font-size: 15px; font-weight: 700; color: rgb(52, 71, 51); display: grid; gap: 10px; }
.input-wrap { display: block; position: relative; }
.input-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 17px; opacity: 0.72; }
.auth-form input:not([type="checkbox"]) { display: block; width: 100%; height: 56px; padding: 0px 44px 0px 42px; border: 1px solid rgb(213, 224, 210); border-radius: 13px; background: rgb(251, 253, 249); font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 15px; color: rgb(36, 56, 36); outline: none; }
.auth-form input:focus { border-color: rgb(30, 169, 87); box-shadow: rgba(30, 169, 87, 0.12) 0px 0px 0px 4px; background: rgb(255, 255, 255); }
.password-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0px; background: transparent; padding: 6px; min-height: auto; font-size: 17px; }
.auth-assist { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: rgb(93, 109, 92); padding: 2px 0px; }
.remember { display: flex; align-items: center; gap: 6px; font-weight: 400 !important; }
.remember input { accent-color: rgb(30, 169, 87); width: 17px; height: 17px; }
.text-button { border: 0px; background: transparent; min-height: auto; padding: 2px; color: rgb(31, 139, 73); font-size: 14px; }
.text-button.strong { font-weight: 800; }
.primary-button { height: 54px; margin-top: 7px; border: 0px; border-radius: 27px; background: linear-gradient(135deg, rgb(39, 173, 89) 0%, rgb(21, 147, 72) 100%); color: rgb(255, 255, 255); font-weight: 750; font-size: 16px; letter-spacing: 0.015em; box-shadow: rgba(25, 143, 70, 0.22) 0px 8px 20px; display: flex; align-items: center; justify-content: center; gap: 9px; transition: transform 0.18s, box-shadow 0.18s, background 0.18s; }
.primary-button:hover { background: linear-gradient(135deg, rgb(42, 180, 94) 0%, rgb(23, 143, 73) 100%); box-shadow: rgba(25, 143, 70, 0.26) 0px 10px 24px; transform: translateY(-1px); }
.primary-button-icon { position: relative; width: 17px; height: 17px; display: inline-block; transform: rotate(-18deg); }
.primary-button-icon::before { content: ""; position: absolute; left: 2px; top: 2px; width: 12px; height: 9px; border-width: 2px 2px 2px 3px; border-style: solid; border-color: currentcolor; border-image: initial; border-radius: 100% 0px; transform: rotate(-8deg); }
.primary-button-icon::after { content: ""; position: absolute; left: 7px; top: 8px; width: 8px; height: 2px; background: currentcolor; border-radius: 2px; transform: rotate(40deg); transform-origin: left center; }
.auth-switch { text-align: center; margin: 4px 0px 0px; color: rgb(122, 136, 119); font-size: 14px; }
.auth-info { display: flex; gap: 12px; align-items: flex-start; background: rgb(240, 248, 236); border-radius: 15px; padding: 16px 17px; margin-top: 8px; font-size: 22px; color: rgb(47, 122, 62); }
.auth-info div { display: grid; gap: 2px; font-size: 13px; }
.auth-info b { color: rgb(60, 107, 65); }
.auth-info span { color: rgb(125, 141, 123); }
.activation-help { margin: 0px; font-size: 13px; color: rgb(122, 136, 119); text-align: center; }
.register-help { text-align: center; margin-top: -4px; padding-top: 0px; }
.auth-card:has(#auth-register-form:not(.hidden)) { padding: 22px 34px 20px; max-height: calc(-24px + 100dvh); scrollbar-width: none; overflow: hidden !important; }
.auth-card:has(#auth-register-form:not(.hidden))::-webkit-scrollbar { display: none; }
.auth-card:has(#auth-register-form:not(.hidden)) .auth-tabs { margin-bottom: 14px; }
.auth-card:has(#auth-register-form:not(.hidden)) .auth-tab { padding-top: 11px; padding-bottom: 10px; }
.auth-card:has(#auth-register-form:not(.hidden)) .auth-form { gap: 9px; }
.auth-card:has(#auth-register-form:not(.hidden)) .auth-form > label { gap: 5px; line-height: 1.15; }
.auth-card:has(#auth-register-form:not(.hidden)) .auth-form input:not([type="checkbox"]) { height: 46px; }
.auth-card:has(#auth-register-form:not(.hidden)) .register-help { margin-top: -3px; }
.auth-card:has(#auth-register-form:not(.hidden)) .primary-button { height: 50px; margin-top: 1px; }
.auth-card:has(#auth-register-form:not(.hidden)) .auth-switch { margin-top: 0px; }
.auth-card:has(#auth-register-form:not(.hidden)) .auth-info { margin-top: 2px; padding: 10px 14px; }
.auth-card:has(#auth-register-form:not(.hidden)) .auth-info div { gap: 1px; }
.auth-message { border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.auth-message.error { background: rgb(255, 242, 238); color: rgb(163, 60, 46); border: 1px solid rgb(242, 210, 202); }
@media (min-width: 1600px) {
  .auth-card { width: 500px; }
}
@media (max-width: 1599px) and (min-width: 1200px) {
  .auth-overlay { padding-right: clamp(34px, 3.2vw, 56px); }
}
@media (max-width: 1199px) and (min-width: 769px) {
  .auth-overlay { padding-right: 28px; }
  .auth-card { width: 430px; padding: 28px 30px 26px; }
}
@media (max-height: 820px) and (min-width: 769px) {
  .auth-card { padding: 18px 28px 16px; max-height: calc(-28px + 100svh); }
  .auth-tabs { margin-bottom: 12px; }
  .auth-tab { padding-top: 9px; padding-bottom: 9px; }
  .auth-form { gap: 7px; }
  .auth-form > label { gap: 5px; font-size: 14px; }
  .auth-form input:not([type="checkbox"]) { height: 42px; }
  .auth-assist { font-size: 13px; }
  .primary-button { height: 46px; margin-top: 2px; }
  .auth-switch { margin: 0px; font-size: 13px; }
  .activation-help { font-size: 12px; }
  .auth-info { padding: 8px 12px; margin-top: 2px; }
  .auth-info div { font-size: 12px; }
  .auth-card:has(#auth-register-form:not(.hidden)) { padding: 12px 28px 10px; overflow: hidden; }
  .auth-card:has(#auth-register-form:not(.hidden)) .auth-tabs { margin-bottom: 7px; }
  .auth-card:has(#auth-register-form:not(.hidden)) .auth-tab { padding-top: 7px; padding-bottom: 7px; }
  .auth-card:has(#auth-register-form:not(.hidden)) .auth-form { gap: 5px; }
  .auth-card:has(#auth-register-form:not(.hidden)) .auth-form > label { gap: 3px; font-size: 13px; }
  .auth-card:has(#auth-register-form:not(.hidden)) .auth-form input:not([type="checkbox"]) { height: 39px; }
  .auth-card:has(#auth-register-form:not(.hidden)) .register-help { margin-top: -2px; font-size: 12px; }
  .auth-card:has(#auth-register-form:not(.hidden)) .primary-button { height: 43px; }
  .auth-card:has(#auth-register-form:not(.hidden)) .auth-info { padding: 7px 11px; margin-top: 1px; }
  .auth-card:has(#auth-register-form:not(.hidden)) .auth-info div { font-size: 11px; }
}
@media (max-width: 768px) {
  .auth-background { background-image: url("auth-bg-mobile.png"), url("auth-bg-desktop.png"); background-size: cover, cover; background-position: center top, 42% center; background-repeat: no-repeat; }
  .auth-overlay { align-items: flex-start; justify-content: center; padding: 34vh 16px 24px; overflow-y: auto; }
  .auth-card { width: calc(100% - 32px); max-width: 480px; max-height: none; overflow: visible; border-radius: 22px; padding: 26px 24px; }
}
.class-home { min-height: calc(-64px + 100vh); padding: 34px clamp(24px, 5vw, 78px) 60px; background: radial-gradient(circle at 20% 10%, rgba(198, 235, 176, 0.28), transparent 28%), linear-gradient(rgb(247, 251, 242) 0%, rgb(243, 248, 238) 100%); }
.class-home-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.class-home-head h2 { margin: 3px 0px 6px; font-size: 30px; color: rgb(32, 53, 35); }
.class-eyebrow { margin: 0px; color: rgb(91, 139, 83); font-weight: 800; font-size: 13px; letter-spacing: 0.12em; }
.class-home-sub { margin: 0px; color: rgb(122, 136, 119); font-size: 14px; }
.farm-primary { border: 0px; background: linear-gradient(135deg, rgb(56, 183, 101), rgb(33, 142, 78)); color: rgb(255, 255, 255); font-weight: 800; box-shadow: rgba(33, 142, 78, 0.2) 0px 10px 24px; }
.farm-primary:hover { background: linear-gradient(135deg, rgb(66, 191, 108), rgb(33, 142, 78)); color: rgb(255, 255, 255); }
.class-create-button { padding: 12px 20px; border-radius: 14px; }
.class-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 20px; align-items: start; }
.class-empty { grid-column: 1 / -1; min-height: 430px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 1px dashed rgb(203, 220, 198); border-radius: 24px; background: rgba(255, 255, 255, 0.72); box-shadow: rgba(80, 110, 70, 0.07) 0px 10px 36px; }
.class-empty-visual { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 48px; margin-bottom: 12px; }
.class-empty-visual span:first-child { font-size: 32px; transform: translateY(15px) rotate(-8deg); }
.class-empty h3 { margin: 0px 0px 7px; font-size: 24px; color: rgb(45, 67, 46); }
.class-empty p { margin: 0px 0px 20px; color: rgb(123, 137, 121); }
.class-empty .farm-primary { border-radius: 14px; padding: 12px 20px; }
.class-card { position: relative; overflow: hidden; background: rgb(255, 255, 255); border: 1px solid rgb(225, 235, 220); border-radius: 20px; padding: 22px; box-shadow: rgba(61, 99, 57, 0.11) 0px 12px 34px; transition: transform 0.18s, box-shadow 0.18s; }
.class-card:hover { transform: translateY(-2px); box-shadow: rgba(61, 99, 57, 0.15) 0px 16px 40px; }
.class-card-accent { position: absolute; inset: 0px 0px auto; height: 7px; background: linear-gradient(90deg, rgb(128, 200, 106), rgb(47, 166, 92)); }
.class-card-top { display: flex; align-items: center; justify-content: space-between; margin: 3px 0px 12px; }
.class-card-icon { width: 42px; height: 42px; border-radius: 13px; background: rgb(239, 248, 233); display: grid; place-items: center; font-size: 22px; }
.class-grade { background: rgb(242, 247, 238); color: rgb(92, 119, 88); border: 1px solid rgb(220, 232, 215); border-radius: 999px; padding: 6px 10px; font-size: 12px; font-weight: 700; }
.class-card h3 { font-size: 23px; margin: 0px 0px 18px; color: rgb(39, 58, 41); }
.class-card-stats { display: flex; gap: 28px; border-top: 1px solid rgb(237, 242, 234); border-bottom: 1px solid rgb(237, 242, 234); padding: 15px 0px; margin-bottom: 16px; }
.class-card-stats > div { display: grid; gap: 1px; }
.class-card-stats strong { font-size: 23px; color: rgb(43, 156, 85); }
.class-card-stats span { font-size: 12px; color: rgb(138, 149, 135); }
.class-card-actions { display: grid; grid-template-columns: 1.35fr 0.8fr 0.65fr; gap: 8px; }
.class-card-actions button { min-height: 40px; }
.class-enter { border-radius: 11px; }
.class-secondary { background: rgb(255, 255, 255); color: rgb(96, 112, 95); border: 1px solid rgb(216, 226, 212); }
.class-secondary:hover { background: rgb(246, 250, 243); }
.class-danger-link { background: rgb(255, 247, 245); color: rgb(217, 90, 77); border: 1px solid rgb(240, 201, 196); }
.class-danger-link:hover { background: rgb(255, 240, 237); }
.class-modal { position: fixed; inset: 0px; z-index: 1000; background: rgba(27, 42, 29, 0.48); backdrop-filter: blur(5px); display: grid; place-items: center; padding: 20px; }
.class-dialog { width: min(480px, -32px + 100vw); background: rgb(255, 255, 255); border-radius: 22px; box-shadow: rgba(24, 42, 26, 0.28) 0px 28px 80px; overflow: hidden; border: 1px solid rgb(229, 236, 225); }
.class-dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px 18px; border-bottom: 1px solid rgb(237, 242, 234); }
.class-dialog-kicker { display: block; color: rgb(105, 160, 97); font-size: 12px; font-weight: 800; letter-spacing: 0.1em; margin-bottom: 4px; }
.class-dialog-head h3 { margin: 0px; font-size: 22px; color: rgb(38, 59, 40); }
.class-dialog-close { border: 0px; background: rgb(246, 248, 244); width: 36px; height: 36px; min-height: 36px; padding: 0px; border-radius: 50%; font-size: 22px; color: rgb(115, 128, 113); }
.class-dialog-body { padding: 22px 24px 8px; display: grid; gap: 17px; }
.class-dialog-body label { display: grid; gap: 7px; color: rgb(67, 84, 67); font-size: 14px; font-weight: 750; }
.class-dialog-body input { height: 50px; border: 1px solid rgb(215, 226, 211); border-radius: 12px; padding: 0px 14px; font: inherit; outline: none; background: rgb(251, 253, 249); }
.class-dialog-body input:focus { border-color: rgb(65, 173, 104); box-shadow: rgba(65, 173, 104, 0.12) 0px 0px 0px 4px; background: rgb(255, 255, 255); }
.class-modal-error { background: rgb(255, 242, 238); border: 1px solid rgb(242, 210, 202); color: rgb(163, 60, 46); border-radius: 10px; padding: 10px 12px; font-size: 13px; }
.class-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 24px 22px; }
.class-dialog-actions button { min-width: 96px; border-radius: 12px; }
.class-danger-button { background: linear-gradient(135deg, rgb(228, 107, 95), rgb(204, 77, 67)) !important; box-shadow: rgba(204, 77, 67, 0.2) 0px 8px 20px !important; }
.class-delete-copy { padding: 30px 28px 12px; text-align: center; }
.class-delete-icon { font-size: 38px; margin-bottom: 10px; }
.class-delete-copy strong { display: block; font-size: 19px; color: rgb(59, 63, 58); }
.class-delete-copy p { margin: 8px auto 0px; color: rgb(126, 134, 125); font-size: 13px; max-width: 320px; line-height: 1.7; }
@media (max-width: 720px) {
  .class-home { padding: 24px 16px 40px; }
  .class-home-head { align-items: flex-start; flex-direction: column; }
  .class-create-button { width: 100%; }
  .class-grid { grid-template-columns: 1fr; }
  .class-card-actions { grid-template-columns: 1fr 1fr; }
  .class-card-actions .class-enter { grid-column: 1 / -1; }
  .class-empty { min-height: 360px; }
}
.student-empty { margin: 38px auto 0px; max-width: 560px; min-height: 360px; border: 1px dashed rgb(203, 220, 198); border-radius: 24px; background: rgba(255, 255, 255, 0.72); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 34px 28px; box-shadow: rgba(66, 101, 60, 0.06) 0px 10px 34px; }
.student-empty-art { display: flex; align-items: flex-end; gap: 4px; margin-bottom: 10px; }
.student-empty-art .seed-dot { font-size: 38px; line-height: 1; color: rgb(139, 107, 73); }
.student-empty-art .seedling { font-size: 54px; line-height: 1; }
.student-empty h3 { margin: 0px 0px 8px; font-size: 24px; color: rgb(45, 67, 46); }
.student-empty p { margin: 0px; max-width: 440px; color: rgb(118, 132, 117); line-height: 1.7; }
.student-empty-actions { display: flex; gap: 12px; margin-top: 22px; }
.student-empty-actions button { min-width: 132px; border-radius: 13px; }
.student-manage-button { border-color: rgb(183, 214, 179); background: rgb(239, 248, 236); color: rgb(44, 127, 72); font-weight: 750; }
.student-mode-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px 24px 0px; }
.student-mode-tabs button { border: 1px solid rgb(217, 228, 213); background: rgb(247, 250, 245); color: rgb(113, 128, 111); min-height: 42px; }
.student-mode-tabs button.active { background: rgb(237, 248, 233); color: rgb(38, 139, 77); border-color: rgb(185, 220, 183); font-weight: 800; }
.student-dialog-body textarea { width: 100%; resize: vertical; min-height: 150px; border: 1px solid rgb(215, 226, 211); border-radius: 12px; padding: 12px 14px; font: inherit; outline: none; background: rgb(251, 253, 249); }
.student-dialog-body textarea:focus { border-color: rgb(65, 173, 104); box-shadow: rgba(65, 173, 104, 0.12) 0px 0px 0px 4px; background: rgb(255, 255, 255); }
.student-form-note { margin: 7px 0px 0px; color: rgb(136, 148, 134); font-size: 12px; line-height: 1.6; }
.student-auto-row { margin-top: 14px; padding: 13px 14px; border: 1px solid rgb(224, 234, 220); border-radius: 13px; background: rgb(247, 251, 244); align-items: center; cursor: pointer; display: flex !important; gap: 12px !important; }
.student-auto-row > span:last-child { display: grid; gap: 2px; }
.student-auto-row strong { font-size: 14px; color: rgb(49, 85, 53); }
.student-auto-row small { font-size: 12px; color: rgb(125, 138, 122); font-weight: 400; }
.student-switch-wrap { position: relative; display: inline-flex; flex: 0 0 auto; }
.student-switch-wrap input { position: absolute; opacity: 0; pointer-events: none; }
.student-switch { width: 46px; height: 26px; border-radius: 999px; background: rgb(201, 212, 198); position: relative; transition: 0.18s; }
.student-switch::after { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%; background: rgb(255, 255, 255); left: 3px; top: 3px; box-shadow: rgba(0, 0, 0, 0.18) 0px 1px 5px; transition: 0.18s; }
.student-switch-wrap input:checked + .student-switch { background: rgb(47, 180, 94); }
.student-switch-wrap input:checked + .student-switch::after { transform: translateX(20px); }
.batch-source-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.batch-source-tabs button { min-height: 40px; border: 1px solid rgb(220, 230, 216); background: rgb(245, 248, 243); color: rgb(116, 130, 114); border-radius: 11px; }
.batch-source-tabs button.active { background: rgb(238, 248, 234); border-color: rgb(184, 220, 181); color: rgb(38, 139, 77); font-weight: 800; }
.excel-dropzone { min-height: 190px; border: 1.5px dashed rgb(188, 216, 184); border-radius: 16px; background: linear-gradient(rgb(251, 254, 249), rgb(244, 250, 241)); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; cursor: pointer; transition: 0.18s; }
.excel-dropzone:hover { border-color: rgb(85, 173, 105); background: rgb(241, 249, 237); }
.excel-drop-icon { font-size: 38px; margin-bottom: 6px; }
.excel-dropzone strong { font-size: 16px; color: rgb(54, 82, 58); margin-bottom: 4px; }
.excel-dropzone span { font-size: 12px; color: rgb(132, 145, 129); margin-bottom: 12px; }
.excel-dropzone button { min-height: 36px; padding: 6px 14px; }
.excel-preview { margin-top: 12px; border: 1px solid rgb(223, 233, 219); border-radius: 13px; background: rgb(255, 255, 255); padding: 12px; }
.excel-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.excel-preview-head strong { font-size: 14px; color: rgb(49, 85, 53); }
.excel-preview-head span { font-size: 11px; color: rgb(109, 138, 104); background: rgb(238, 247, 234); border-radius: 999px; padding: 4px 8px; }
.excel-name-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.excel-name-chips span { font-size: 12px; color: rgb(79, 98, 77); background: rgb(244, 248, 242); border: 1px solid rgb(224, 233, 220); border-radius: 999px; padding: 4px 8px; }
@media (max-width: 720px) {
  .student-empty { margin-top: 22px; min-height: 320px; }
  .student-empty-actions { width: 100%; flex-direction: column; }
  .student-empty-actions button { width: 100%; }
  .student-mode-tabs { padding-left: 18px; padding-right: 18px; }
}
.stu-card { overflow: visible; }
.plant-visual { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; overflow: hidden; }
.plant-stage-image, .plot-stage-image { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: contain; display: block; background: rgb(255, 255, 255); }
.plant-stage-emoji { font-size: 38px; line-height: 1; color: rgb(138, 160, 127); }
.plot-soil-wrap { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; }
.plot-soil-img { position: absolute; left: 50%; bottom: 0px; width: 86%; height: auto; aspect-ratio: 1 / 1; transform: translate(-50%, 20.6%); object-fit: contain; object-position: center bottom; display: block; z-index: 1; pointer-events: none; }
.plot-soil-fallback { display: none; position: absolute; left: 8%; right: 8%; bottom: 4%; height: 34%; z-index: 0; pointer-events: none; background-color: rgb(171, 123, 83); background-image: radial-gradient(72% 46% at 74% 84%, rgba(58, 34, 16, 0.3), rgba(58, 34, 16, 0) 72%), radial-gradient(56% 40% at 24% 14%, rgba(255, 232, 199, 0.32), rgba(255, 232, 199, 0) 70%), radial-gradient(120% 92% at 30% 14%, rgb(200, 150, 106), rgb(171, 123, 83) 52%, rgb(141, 97, 64) 100%); clip-path: polygon(15% 5%, 33% 0px, 67% 1%, 86% 6%, 93% 26%, 97% 54%, 99% 80%, 94% 97%, 76% 100%, 50% 97%, 25% 100%, 8% 96%, 3% 79%, 1% 51%, 6% 24%); transition: filter 0.15s; }
.plot-soil-fallback::after { content: ""; position: absolute; inset: 13% 9% 16%; border-radius: 42% / 32%; background: repeating-linear-gradient(101deg, rgba(66, 40, 20, 0.2) 0px, rgba(66, 40, 20, 0.2) 2px, rgba(255, 240, 220, 0.09) 2px, rgba(255, 240, 220, 0.09) 6px, rgba(0, 0, 0, 0) 6px, rgba(0, 0, 0, 0) 15px); }
.plot-soil-label { position: absolute; left: 0px; right: 0px; bottom: 0px; text-align: center; font-size: 12px; font-weight: 800; color: rgb(255, 248, 236); text-shadow: rgba(58, 34, 16, 0.75) 0px 1px 3px; letter-spacing: 0.5px; z-index: 2; pointer-events: none; }
.plant-emoji-fallback { display: none; }
.plant-emoji-fallback.on { display: inline-block; }
.clickable { cursor: pointer; }
.plot.empty:hover .plot-soil-img, .plot-unit.empty:hover .plot-soil-img { filter: brightness(1.07); }
#v-main { min-height: calc(-62px + 100vh); padding-bottom: 34px; }
#v-main .toolbar { background: rgb(255, 255, 255); border: 1px solid rgb(230, 239, 225); box-shadow: rgba(70, 104, 58, 0.05) 0px 4px 14px; }
/* 管理视图卡片网格：列数由「调整卡片」滑杆决定（默认 6 列，范围 4~8）。
   #cards 使用 --cols-eff = min(用户设定, 当前宽度可容纳列数)，窄屏自动降列，不产生横向滚动。 */
.grid { display: grid; gap: 20px 22px; align-items: start; }
#cards { --cols-eff: var(--cols, 6); grid-template-columns: repeat(var(--cols-eff), minmax(0px, 1fr)); max-width: 1900px; margin: 0px auto; }
@media (max-width: 899px) {
  .grid { gap: 16px 16px; }
}
@media (max-width: 640px) {
  #cards { --cols-eff: 2; }
}
.stu-card { position: relative; display: flex; flex-direction: column; gap: 0px; background: rgb(255, 253, 247); border: 1px solid rgb(242, 236, 223); border-radius: 16px; padding: 8px; box-shadow: rgba(120, 100, 70, 0.06) 0px 1px 4px; cursor: default; transition: transform 0.18s, box-shadow 0.18s; }
.stu-card:hover { transform: translateY(-2px); box-shadow: rgba(120, 100, 70, 0.11) 0px 6px 16px; }
.stu-card.batch { cursor: default; }
.stu-card.selected { box-shadow: rgba(56, 183, 101, 0.45) 0px 0px 0px 2px, rgba(70, 105, 60, 0.1) 0px 4px 12px; }
.card-top { display: flex; align-items: center; gap: 6px; min-height: 22px; padding: 0px 2px; }
.card-top-gap { flex: 1 1 auto; }
.card-plot { flex: 0 0 auto; font-size: 11px; font-weight: 800; color: rgb(171, 152, 116); letter-spacing: 0.03em; }
.card-check { flex: 0 0 auto; width: 18px; height: 18px; accent-color: rgb(47, 180, 94); cursor: pointer; }
/* 批量模式：卡片顶部选择圆圈（未选空心 / 已选绿色实心勾） */
.card-pick { flex: 0 0 auto; width: 19px; height: 19px; border-radius: 50%; border: 1.8px solid #cfc8b6; background: #fffdf7; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .12s ease; position: relative; }
.card-pick i { display: none; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.card-pick.on { background: #2fb45e; border-color: #2fb45e; }
.card-pick.on i { display: block; }
.card-pick:hover { border-color: #9fd6ad; }
.card-pick:active { transform: scale(.9); }
.stu-card.batch { cursor: pointer; }
.stu-card.picked { border-color: #9fd6ad; box-shadow: 0 0 0 2px rgba(47,180,94,.28), 0 2px 8px rgba(70,105,60,.1); }
.card-dots { flex: 0 0 auto; width: 26px; height: 22px; min-height: 22px; padding: 0px; border: 0px; border-radius: 8px; background: transparent; color: rgb(192, 182, 162); font-size: 11px; font-weight: 800; letter-spacing: 0.09em; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s, color 0.15s; }
.card-dots:hover { background: rgb(247, 241, 228); color: rgb(138, 124, 92); }
.card-visual { position: relative; display: block; width: 100%; height: 200px; margin: 2px 0px 0px; border-radius: 13px; background: linear-gradient(rgb(253, 250, 243), rgb(247, 241, 227)); overflow: hidden; cursor: pointer; }
.card-visual .card-plant-img { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: contain; object-position: center center; display: block; background: transparent; }
.card-visual .plot-soil-wrap { position: absolute; inset: 0px; width: 100%; height: 100%; }
.card-visual .plot-soil-img { width: 82%; }
.card-visual .plant-stage-emoji { position: absolute; inset: 0px; display: none; align-items: center; justify-content: center; font-size: 52px; }
.card-visual .plant-stage-emoji.plant-emoji-fallback.on { display: flex; }
.card-info { display: flex; flex-direction: column; gap: 4px; padding: 9px 3px 1px; }
.card-main-line { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.card-name { flex: 1 1 auto; min-width: 0px; font-size: 15px; font-weight: 800; color: rgb(51, 48, 42); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-plant { flex: 0 1 auto; min-width: 0px; font-size: 12.5px; font-weight: 700; color: rgb(47, 143, 86); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 54%; }
.card-stage-line { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.card-stage { flex: 1 1 auto; min-width: 0px; font-size: 11px; font-weight: 600; color: rgb(162, 149, 124); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-growth { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: rgb(162, 149, 124); white-space: nowrap; }
.card-bar { width: 100%; height: 5px; border-radius: 999px; background: rgb(240, 232, 216); overflow: hidden; margin: 1px 0px 2px; }
.card-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, rgb(124, 207, 146), rgb(47, 157, 94)); transition: width 0.35s; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card-score { font-size: 13px; font-weight: 800; color: rgb(217, 147, 43); white-space: nowrap; }
.card-group { font-size: 11.5px; font-weight: 600; color: rgb(162, 149, 124); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 56%; }
.stu-card.mature { border-color: rgb(242, 227, 189); box-shadow: rgba(200, 150, 60, 0.09) 0px 1px 4px; }
.stu-card.mature .card-stage { color: rgb(184, 121, 26); }
.stu-card.mature .card-bar i { background: linear-gradient(90deg, rgb(244, 205, 116), rgb(223, 162, 32)); }
.stu-card.empty .card-plant { color: rgb(176, 164, 141); }
.stu-card.empty .card-stage { color: rgb(194, 183, 161); }
.card-menu { position: fixed; z-index: 1200; min-width: 144px; padding: 5px; background: rgb(255, 255, 255); border: 1px solid rgb(230, 239, 226); border-radius: 13px; box-shadow: rgba(40, 64, 40, 0.16) 0px 14px 34px; display: flex; flex-direction: column; gap: 2px; }
.card-menu button { width: 100%; min-height: 34px; padding: 7px 10px; border: 0px; border-radius: 9px; background: transparent; color: rgb(63, 85, 64); font-size: 13px; font-weight: 700; text-align: left; }
.card-menu button:hover { background: rgb(242, 248, 238); }
.card-menu .menu-harvest { color: rgb(184, 121, 26); }
.card-menu .menu-harvest:hover { background: rgb(253, 246, 232); }
.growth-bar { height: 9px; border-radius: 999px; background: rgb(231, 239, 226); overflow: hidden; }
.growth-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, rgb(92, 197, 126), rgb(47, 154, 92)); transition: width 0.35s; }
.growth-bar.big { height: 12px; }
.growth-mature { font-style: normal; font-weight: 800; color: rgb(184, 121, 26); background: rgb(253, 243, 224); border-radius: 999px; padding: 1px 8px; }
.add-btn { min-height: 44px; font-size: 18px; font-weight: 800; border-radius: 12px; border: 1px solid rgb(207, 230, 207); background: linear-gradient(rgb(245, 251, 244), rgb(230, 245, 230)); color: rgb(33, 142, 78); cursor: pointer; padding: 6px 8px; transition: background 0.15s, transform 0.1s; }
.add-btn:hover { background: linear-gradient(rgb(234, 247, 233), rgb(216, 240, 216)); }
.add-btn:active { transform: scale(0.97); }
.ghost-btn { min-height: 32px; font-size: 12px; font-weight: 700; padding: 4px 6px; border-radius: 9px; border: 1px solid rgb(238, 242, 234); background: rgb(251, 253, 249); color: rgb(139, 154, 135); cursor: pointer; transition: 0.15s; }
.ghost-btn:hover { background: rgb(242, 247, 239); color: rgb(92, 111, 88); }
.ghost-btn.on { border-color: rgb(56, 183, 101); color: rgb(33, 142, 78); background: rgb(238, 250, 240); }
.modal-score .box { max-width: 620px; border-radius: 20px; padding: 20px 22px 18px; }
.modal-score h3 { margin: 0px 0px 14px; }
.score-dialog-name { font-size: 19px; color: rgb(38, 56, 42); font-weight: 800; }
.score-panel { display: flex; flex-direction: column; gap: 16px; }
.score-sec h4 { display: flex; align-items: center; gap: 8px; margin: 0px 0px 9px; font-size: 14px; font-weight: 800; color: rgb(74, 95, 72); letter-spacing: 0.02em; }
.sec-mark { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 7px; font-size: 13px; font-weight: 800; color: rgb(255, 255, 255); }
.sec-mark.plus { background: rgb(47, 168, 98); }
.sec-mark.minus { background: rgb(217, 138, 128); }
.reason-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 9px; }
.reason-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 62px; padding: 10px 13px; border-radius: 14px; border: 1px solid rgb(216, 233, 211); background: linear-gradient(rgb(250, 253, 248), rgb(241, 249, 238)); color: rgb(47, 107, 65); text-align: left; transition: transform 0.12s, box-shadow 0.15s, background 0.15s; }
.reason-btn:hover { background: linear-gradient(rgb(244, 252, 240), rgb(230, 246, 226)); box-shadow: rgba(47, 168, 98, 0.16) 0px 6px 16px; border-color: rgb(181, 220, 174); }
.reason-btn:active { transform: scale(0.98); }
.reason-label { font-size: 14px; font-weight: 800; color: rgb(51, 71, 58); }
.reason-val { font-size: 15px; font-weight: 800; color: rgb(33, 142, 78); }
.reason-btn.minus { border-color: rgb(240, 219, 214); background: linear-gradient(rgb(255, 250, 249), rgb(253, 241, 238)); }
.reason-btn.minus:hover { background: linear-gradient(rgb(255, 246, 244), rgb(251, 231, 226)); border-color: rgb(232, 188, 180); box-shadow: rgba(196, 106, 90, 0.14) 0px 6px 16px; }
.reason-btn.minus .reason-val { color: rgb(197, 97, 77); }
.score-empty { margin: 0px; font-size: 13px; color: rgb(147, 160, 143); }
.score-custom { border-top: 1px solid rgb(239, 243, 236); padding-top: 12px; }
.score-custom summary { cursor: pointer; font-size: 13px; font-weight: 700; color: rgb(125, 143, 122); list-style: none; }
.score-custom summary::-webkit-details-marker { display: none; }
.score-custom summary::before { content: "＋ "; font-weight: 800; color: rgb(159, 181, 154); }
.score-custom-row { display: flex; gap: 8px; margin-top: 10px; }
.score-custom-row input { width: 110px; height: 40px; border: 1px solid rgb(217, 229, 213); border-radius: 11px; padding: 0px 12px; font: inherit; background: rgb(251, 253, 249); }
.score-custom-row button { flex: 1 1 auto; border-radius: 11px; }
.modal-close-btn { width: 100%; margin-top: 14px; border-radius: 12px; background: rgb(247, 250, 244); border: 1px solid rgb(228, 236, 224); color: rgb(107, 124, 104); font-weight: 700; }
.farm { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; padding: 0; border: 0; border-radius: 18px; background: #7fae62; box-shadow: 0 10px 30px rgba(63,99,51,.18); isolation: isolate; }
.farm-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; z-index: 0; pointer-events: none; user-select: none; }
.farm-class-name { position: absolute; z-index: 4; left: 50%; top: 17.6%; width: 14.5%; transform: translate(-50%,-50%); overflow: hidden; color: #603616; font-size: clamp(10px,1.35vw,24px); font-weight: 900; line-height: 1.1; letter-spacing: .04em; text-align: center; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 0 rgba(255,226,151,.7); pointer-events: none; }
/* 中央农田矩阵：固定在舞台内部的种植区域，绝不参与撑高 farm。
   注意：这里不能写 z-index —— 一旦成为 stacking context，植物图的 multiply 白底就会失效。 */
.panorama-field-area { position: absolute; display: grid; align-content: stretch; overflow: visible;
  left: var(--ff-left, 21.5%); right: var(--ff-right, 21.5%); top: var(--ff-top, 33.5%); bottom: var(--ff-bottom, 24%);
  grid-template-columns: repeat(var(--panorama-cols, 8), minmax(0,1fr));
  grid-template-rows: repeat(var(--panorama-rows, 5), minmax(0,1fr));
  column-gap: var(--ff-gapx, .9%); row-gap: 0; }
.panorama-plot { position: relative; display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; cursor: pointer; }
/* 悬停只能作用于植物本身：给田块加 transform / filter 会生成 stacking context，植物白底会露出来 */
.panorama-plot:hover .panorama-plant-img { transform: translateX(-50%) translateY(-3%) scale(var(--ff-rowscale, 1)); filter: brightness(1.06); }
.panorama-plot:focus-visible { outline: 2px solid #fff39a; outline-offset: -5px; }
/* 层级靠 DOM 顺序（行优先、后排先画），绝不能给田块加 z-index：
   田块一旦成为 stacking context，植物图的 multiply 白底就会失效。 */
.panorama-soil-img { position: absolute; left: 50%; bottom: -18%; width: 112%; height: calc(100% * .74); max-width: none; object-fit: fill; transform: translateX(-50%) scale(1.06,.55); transform-origin: 50% 100%; pointer-events: none; }
/* 植物以根部为锚点从田中心向上生长，允许向上超出土壤；overflow 必须 visible。
   正式植物图为 RGB 白底（437/460），必须用 multiply 让白底融入背景；透明 PNG 不受影响 */
.panorama-plant-img { position: absolute; left: 50%; bottom: 4%; width: var(--ff-plantw, 130%); height: var(--ff-planth, 300%); max-width: none; object-fit: contain; object-position: 50% 100%; transform: translateX(-50%) scale(var(--ff-rowscale, 1)); transform-origin: 50% 100%; mix-blend-mode: multiply; transition: transform .16s ease, filter .16s ease; pointer-events: none; }
.panorama-plot.mature .panorama-plant-img { filter: drop-shadow(0 3px 4px rgba(255,214,77,.4)); }
.panorama-plot-no { position: absolute; left: 2%; top: 6%; min-width: 1.9em; padding: .06em .34em; border: 1px solid rgba(96,58,25,.32); border-radius: 999px; background: rgba(255,246,213,.92); color: #5b3617; font-size: clamp(8px,.72vw,12px); font-weight: 900; line-height: 1.25; text-align: center; box-shadow: 0 1px 3px rgba(70,42,16,.18); pointer-events: none; }
#v-plot h2#plott { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.detail-no { font-size: 22px; font-weight: 800; color: rgb(62, 107, 62); }
.detail-name { font-size: 24px; }
.detail-score { font-size: 14px; font-weight: 600; color: rgb(123, 137, 121); }
.detail-score b { font-size: 20px; color: rgb(224, 138, 30); }
.detail-hero { display: flex; gap: 20px; align-items: center; background: rgb(255, 255, 255); border-radius: 20px; padding: 18px; box-shadow: rgba(44, 58, 44, 0.07) 0px 2px 12px; flex-wrap: wrap; }
.detail-visual { position: relative; width: 240px; height: 240px; flex: 0 0 auto; background: rgb(255, 255, 255); border-radius: 16px; border: 1px solid rgb(238, 244, 234); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.detail-visual .plant-stage-emoji { font-size: 84px; }
.detail-info { flex: 1 1 300px; min-width: 240px; display: flex; flex-direction: column; gap: 9px; }
.detail-info h4 { margin: 0px; font-size: 26px; color: rgb(44, 58, 44); }
.detail-stage { margin: 0px; font-size: 15px; font-weight: 600; color: rgb(74, 95, 72); }
.preview-tag { display: inline-block; margin-left: 8px; font-size: 12px; font-weight: 700; font-style: normal; color: rgb(184, 121, 26); background: rgb(253, 243, 224); border-radius: 999px; padding: 2px 9px; }
.growth-line { display: flex; align-items: center; gap: 10px; font-size: 15px; color: rgb(74, 95, 72); }
.growth-line b { font-size: 23px; color: rgb(33, 142, 78); }
.growth-line em { font-style: normal; font-size: 13px; color: rgb(139, 154, 135); }
.detail-quick { display: flex; gap: 8px; flex-wrap: wrap; }
.detail-quick .add-btn { flex: 1 1 120px; min-height: 46px; font-size: 16px; }
.detail-sub { margin: 18px 0px 8px; font-size: 15px; font-weight: 800; color: rgb(74, 95, 72); }
.plot-meta { margin: 12px 0px 4px; color: rgb(109, 124, 106); font-size: 13px; }
.plot-harvest { margin: 6px 0px 0px; min-height: 44px; }
.stage-track { display: grid; grid-template-columns: repeat(10, minmax(0px, 1fr)); gap: 8px; margin-bottom: 16px; }
.stage-node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; background: rgb(255, 255, 255); border: 2px solid rgb(238, 242, 234); border-radius: 12px; padding: 6px 4px; min-height: 0px; cursor: pointer; opacity: 0.55; filter: saturate(0.45); transition: 0.15s; }
.stage-node .plant-visual { width: 100%; height: 74px; border-radius: 8px; overflow: hidden; }
.stage-node b { font-size: 11px; color: rgb(139, 154, 135); }
.stage-node em { font-size: 11px; font-style: normal; font-weight: 600; color: rgb(92, 111, 88); text-align: center; line-height: 1.15; }
.stage-node i { position: absolute; right: 5px; top: 4px; font-size: 10px; font-style: normal; color: rgb(154, 171, 150); }
.stage-node.reached { opacity: 0.88; filter: saturate(0.72); }
.stage-node.future { opacity: 0.42; filter: saturate(0.3); }
.stage-node.current { opacity: 1; filter: none; border-color: rgb(56, 183, 101); background: rgb(247, 253, 246); box-shadow: rgba(56, 183, 101, 0.2) 0px 4px 14px; }
.stage-node.current b { color: rgb(33, 142, 78); }
.stage-node.viewing { outline: rgb(240, 180, 41) solid 2px; outline-offset: 2px; }
.stage-node:hover { opacity: 1; filter: none; border-color: rgb(191, 224, 196); }
.plot-pick { margin-top: 16px; border-top: 1px solid rgb(238, 242, 234); padding-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.plot-pick > .pick-head, .plot-pick > #pick-list, .plot-pick > .pick-empty, .plot-pick > .pick-group { flex: 1 1 100%; width: 100%; min-width: 0px; }
.plot-pick-open { min-height: 44px; }
.pick-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.pick-head h5 { margin: 0px; font-size: 16px; color: rgb(74, 95, 72); }
.pick-search { flex: 1 1 200px; min-height: 42px; border: 1px solid rgb(223, 233, 217); border-radius: 12px; padding: 8px 12px; font-size: 14px; background: rgb(255, 255, 255); color: rgb(44, 58, 44); }
.pick-search:focus { outline: none; border-color: rgb(56, 183, 101); box-shadow: rgba(56, 183, 101, 0.133) 0px 0px 0px 3px; }
.pick-group { margin-bottom: 16px; }
.pick-group h6 { margin: 0px 0px 8px; font-size: 13px; font-weight: 800; color: rgb(74, 95, 72); }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; }
.pick-card { background: rgb(255, 255, 255); border: 1px solid rgb(226, 236, 221); border-radius: 16px; padding: 10px; display: flex; flex-direction: column; gap: 8px; box-shadow: rgba(44, 58, 44, 0.05) 0px 2px 8px; }
.pick-card.open { border-color: rgb(56, 183, 101); box-shadow: rgba(56, 183, 101, 0.17) 0px 6px 18px; }
.pick-main { border: 0px; background: transparent; padding: 0px; min-height: 0px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; }
.pick-main:hover { background: transparent; }
.pick-main .plant-visual { width: 100%; height: 104px; border-radius: 10px; overflow: hidden; }
.pick-main b { font-size: 15px; color: rgb(44, 58, 44); }
.pick-main small { font-size: 11px; color: rgb(139, 154, 135); }
.pick-choose { font-size: 14px; padding: 9px 10px; min-height: 40px; border-radius: 10px; }
.pick-stages { display: grid; grid-template-columns: repeat(5, minmax(0px, 1fr)); gap: 4px; }
.pick-stage { position: relative; background: rgb(255, 255, 255); border: 1px solid rgb(234, 242, 230); border-radius: 8px; padding: 2px; }
.pick-stage .plant-visual { height: 40px; }
.pick-stage i { position: absolute; right: 3px; bottom: 1px; font-size: 10px; font-style: normal; color: rgb(154, 171, 150); }
.pick-stage-note { font-size: 11px; color: rgb(139, 154, 135); margin: 4px 0px 0px; text-align: center; }
.pick-empty { color: rgb(139, 154, 135); font-size: 13px; padding: 12px; text-align: center; }
.stu-card.grow .card-visual img { animation: 0.8s ease 0s 1 normal none running plantSway; }
.stu-card.stageup { animation: 1.6s cubic-bezier(0.2, 0.9, 0.3, 1.2) 0s 1 normal none running cardPop; }
.stu-card.stageup .card-visual img { animation: 1.6s cubic-bezier(0.2, 0.9, 0.3, 1.2) 0s 1 normal none running plantBloom; }
/* 全景植物用带 translateX(-50%) 的专用动画，否则动画期间会丢掉居中位移 */
.panorama-plot.grow .panorama-plant-img { animation: 0.8s ease 0s 1 normal none running panoramaPlantSway; }
.panorama-plot.stageup .panorama-plant-img { animation: 1.6s cubic-bezier(0.2, 0.9, 0.3, 1.2) 0s 1 normal none running panoramaPlantBloom; }
@keyframes panoramaPlantSway {
  0% { transform: translateX(-50%) scale(var(--ff-rowscale, 1)) rotate(0deg); }
  25% { transform: translateX(-50%) scale(calc(var(--ff-rowscale, 1) * 1.03)) rotate(2.2deg); }
  62% { transform: translateX(-50%) scale(calc(var(--ff-rowscale, 1) * 1.02)) rotate(-1.6deg); }
  100% { transform: translateX(-50%) scale(var(--ff-rowscale, 1)) rotate(0deg); }
}
@keyframes panoramaPlantBloom {
  0% { transform: translateX(-50%) scale(var(--ff-rowscale, 1)); }
  20% { transform: translateX(-50%) scale(calc(var(--ff-rowscale, 1) * 1.13)); }
  56% { transform: translateX(-50%) scale(calc(var(--ff-rowscale, 1) * 1.01)); }
  100% { transform: translateX(-50%) scale(var(--ff-rowscale, 1)); }
}
@keyframes plantSway { 
  0% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(2.2deg) scale(1.03); }
  62% { transform: rotate(-1.6deg) scale(1.02); }
  100% { transform: rotate(0deg) scale(1); }
}
@keyframes cardPop { 
  0% { transform: scale(1); }
  18% { transform: scale(1.045); }
  48% { transform: scale(0.995); }
  100% { transform: scale(1); }
}
@keyframes plantBloom { 
  0% { transform: scale(1); }
  20% { transform: scale(1.13); }
  56% { transform: scale(1.01); }
  100% { transform: scale(1); }
}
.float-plus { position: fixed; transform: translate(-50%, 0px); font-size: 27px; font-weight: 800; color: rgb(33, 142, 78); text-shadow: rgb(255, 255, 255) 0px 2px 10px, rgb(255, 255, 255) 0px 0px 3px; pointer-events: none; opacity: 0; transition: opacity 0.25s, transform 1s cubic-bezier(0.2, 0.8, 0.3, 1); z-index: 70; }
.float-plus.show { opacity: 1; transform: translate(-50%, -60px); }
.growth-float { position: fixed; transform: translate(-50%, 0px) scale(0.9); display: flex; align-items: center; gap: 10px; background: rgb(255, 255, 255); border: 2px solid rgb(125, 219, 160); border-radius: 999px; padding: 6px 18px 6px 8px; box-shadow: rgba(47, 154, 92, 0.2) 0px 12px 32px; opacity: 0; transition: opacity 0.22s, transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.3); pointer-events: none; z-index: 70; max-width: min(420px, 86vw); }
.growth-float.show { opacity: 1; transform: translate(-50%, -14px) scale(1); }
.growth-float .gf-visual { width: 40px; height: 40px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.growth-float .gf-visual img { width: 100%; height: 100%; object-fit: contain; }
.growth-float b { font-size: 15px; color: rgb(33, 142, 78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1450px) {
  .detail-visual { width: 200px; height: 200px; }
  .stage-track { gap: 6px; }
  .stage-node .plant-visual { height: 58px; }
  .stage-node em { font-size: 10px; }
  .pick-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
@media (max-width: 900px) {
  .stage-track { grid-template-columns: repeat(5, minmax(0px, 1fr)); }
  .pick-grid { grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); }
  .detail-visual { width: 160px; height: 160px; }
  .plot-pick-open { width: 100%; }
}
#presentBar { display: none; }
body.present { background: rgb(26, 46, 26); }
body.present header { display: none !important; }
body.present #v-main .toolbar, body.present #v-main .teacher-toolbar, body.present #v-main .manage-only { display: none !important; }
body.present #v-main #cards { display: none !important; }
body.present #v-main #farm { display: block !important; }
body.present #v-main .farm { border-radius: 0px; }
body.present #presentBar, body.present #presentBar.hidden { gap: 12px; align-items: center; justify-content: center; background: rgb(26, 46, 26); color: rgb(255, 255, 255); padding: 10px 16px; font-size: 18px; display: flex !important; }

body.present #v-main #batchbar { display: none !important; }

/* ============================================================
   批量选择模式 · 调整卡片数量 · 小组管理
   —— 全部沿用奶油白 / 自然绿体系，不使用对标应用的紫色
   ============================================================ */

/* ---------- 顶部小组筛选 chips ---------- */
.group-chips{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.group-chip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:4px 12px;font-size:13px;font-weight:700;border-radius:999px;border:1px solid #dbe6d4;background:#fff;color:#4c5b48;cursor:pointer}
.group-chip:hover{background:#f2f8ec}
.group-chip.on{background:#eaf7e6;border-color:#9fd6ad;color:#1f8b49}
.gc-dot{width:9px;height:9px;border-radius:50%;background:var(--gc,#4aa85e);flex:0 0 auto}

/* ---------- 批量操作条 ---------- */
.batch-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px;padding:10px 14px;background:#f6fbf1;border:1px solid #dcecd2;border-radius:14px;box-shadow:0 1px 4px rgba(90,120,80,.06)}
.batch-count{font-size:13.5px;font-weight:600;color:#5c6b57}
.batch-count b{font-size:16px;font-weight:800;color:#1f8b49;margin:0 2px}
.batch-gap{flex:1 1 auto}
.batch-bar button{min-height:36px;padding:6px 16px;font-size:13.5px;font-weight:800;border-radius:10px;cursor:pointer}
.batch-all{border:1px solid #cfe3c6;background:#fff;color:#3f6b4a}
.batch-all:hover{background:#eef7e8}
.batch-add{border:1px solid #9fd6ad;background:#eaf7e6;color:#1f8b49}
.batch-add:hover:not(:disabled){background:#ddf1d6}
.batch-sub{border:1px solid #f0ccc4;background:#fdf3f1;color:#c5614d}
.batch-sub:hover:not(:disabled){background:#fbe8e4}
.batch-cancel{border:1px solid #e2ddd0;background:#fff;color:#7b7466}
.batch-cancel:hover{background:#f7f4ec}
.batch-bar button:disabled{opacity:.45;cursor:not-allowed}
body.present #v-main #batchbar{display:none!important}

/* ---------- 调整卡片数量 浮层 ---------- */
.col-pop-wrap{position:relative;display:inline-block}
.col-pop{position:absolute;z-index:60;top:calc(100% + 8px);left:0;width:264px;padding:14px 16px 12px;background:#fffef9;border:1px solid #e8e2d3;border-radius:14px;box-shadow:0 14px 34px rgba(70,90,60,.16)}
.col-pop b{display:block;font-size:13.5px;font-weight:800;color:#3f4a3b;margin-bottom:10px}
.col-pop input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;background:linear-gradient(90deg,#a8dcb4,#4aa85e);outline:none;cursor:pointer}
.col-pop input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#2f9d5e;border:3px solid #fff;box-shadow:0 1px 5px rgba(40,90,50,.35);cursor:grab}
.col-pop input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#2f9d5e;border:3px solid #fff;box-shadow:0 1px 5px rgba(40,90,50,.35);cursor:grab}
.col-pop-ends{display:flex;align-items:center;justify-content:space-between;margin-top:8px;font-size:12px;color:#8d8674}
.col-pop-val{font-size:12.5px;font-weight:800;color:#1f8b49}
.col-pop-val i{font-style:normal;font-size:15px}

/* ---------- 通用小按钮 ---------- */
.ghost-btn{min-height:32px;padding:4px 12px;font-size:13px;font-weight:700;border-radius:10px;border:1px solid #dfe4d6;background:#fff;color:#4c5b48;cursor:pointer}
.ghost-btn:hover{background:#f2f8ec;border-color:#c3d9bb}

/* ---------- 批量加分 / 扣分 弹窗 ---------- */
.bmodal,.bmmodal{position:fixed;inset:0;z-index:10040;background:rgba(27,42,29,.5);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:24px}
.bdialog{width:min(1000px,calc(100vw - 40px));max-height:calc(100vh - 48px);display:flex;flex-direction:column;background:#fdfcf7;border:1px solid #e6e9dc;border-radius:20px;box-shadow:0 30px 80px rgba(24,42,26,.3);overflow:hidden}
.bdialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px 12px;border-bottom:1px solid #eef0e6}
.bdialog-head h3{margin:0;font-size:17px;font-weight:800;color:#2f3a2c}
.bdialog-close{width:34px;height:34px;min-height:34px;padding:0;border:0;border-radius:10px;background:transparent;color:#9a9385;font-size:22px;line-height:1;cursor:pointer}
.bdialog-close:hover{background:#f2f0e6;color:#5d5a4e}
.bdialog-body{padding:14px 20px 6px;overflow:auto;flex:1 1 auto;min-height:0}
.bdialog-search{display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid #e4e6da;background:#fff;border-radius:12px;min-height:42px}
.bdialog-search span{font-size:14px;opacity:.55}
.bdialog-search input{flex:1 1 auto;min-height:40px;border:0;background:transparent;font-size:14px;outline:none;color:#3c4438}
.bdialog-reasons{margin-top:14px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.bdialog-reasons .reason-btn{min-height:74px;border-radius:14px;padding:12px 14px}
.bdialog-foot{display:flex;justify-content:flex-end;gap:10px;padding:12px 20px 16px;border-top:1px solid #eef0e6;background:#fdfcf7}
.bdialog .reason-grid{display:grid;gap:9px}
.bmodal .score-custom,.bmmodal .score-custom{margin:14px 0 6px}

/* ---------- 添加成员 弹窗 ---------- */
.bmmodal{z-index:10050}
.bmdialog{width:min(1080px,calc(100vw - 40px));max-height:calc(100vh - 48px);display:flex;flex-direction:column;background:#fdfcf7;border:1px solid #e6e9dc;border-radius:20px;box-shadow:0 30px 80px rgba(24,42,26,.3);overflow:hidden}
.mm-top{display:flex;align-items:center;gap:12px}
.mm-top .bdialog-search{flex:1 1 auto}
.mm-selected{flex:0 0 auto;font-size:13.5px;font-weight:600;color:#5c6b57}
.mm-selected b{font-size:16px;font-weight:800;color:#1f8b49;margin:0 2px}
.mm-bulk{display:flex;gap:8px;margin:12px 0}
.mm-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;padding-bottom:8px}
.mm-item{display:flex;align-items:center;gap:8px;text-align:left;min-height:52px;padding:7px 10px;border:1px solid #e6e9dc;border-radius:12px;background:#fff;cursor:pointer;transition:background .14s ease,border-color .14s ease}
.mm-item:hover{background:#f5faf0;border-color:#c8dfc0}
.mm-item.on{background:#eaf7e6;border-color:#9fd6ad}
.mm-pick{flex:0 0 auto;width:18px;height:18px;border-radius:50%;border:1.8px solid #cfc8b6;background:#fffdf7;display:inline-flex;align-items:center;justify-content:center}
.mm-pick i{display:none;width:8px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.mm-item.on .mm-pick{background:#2fb45e;border-color:#2fb45e}
.mm-item.on .mm-pick i{display:block}
.mm-main{min-width:0;display:flex;flex-direction:column;gap:1px}
.mm-main b{font-size:13.5px;font-weight:800;color:#33302a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mm-main small{display:flex;align-items:center;gap:5px;font-size:10.5px;color:#a2957c;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mm-move{font-style:normal;color:var(--gc,#4aa85e);font-weight:700}
@media(max-width:1100px){.mm-list{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:880px){.mm-list{grid-template-columns:repeat(3,minmax(0,1fr))}.bdialog-reasons{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.mm-list{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- 小组管理视图 ---------- */
#v-groups{max-width:1100px;margin:0 auto;padding:18px 6px 60px}
.gm-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px}
.gm-head h2{margin:2px 0 0;font-size:24px;font-weight:800;color:#2f3a2c}
.gm-list{display:flex;flex-direction:column;gap:12px}
.gm-empty{padding:80px 20px;text-align:center;color:#8d8674}
.gm-empty-art{font-size:46px;opacity:.5;margin-bottom:12px}
.gm-empty p{margin:0;font-size:14.5px}
.gm-card{display:flex;align-items:center;gap:14px;padding:16px 18px;background:#fffdf7;border:1px solid #eceae0;border-left:5px solid var(--gc,#4aa85e);border-radius:14px;box-shadow:0 1px 4px rgba(120,100,70,.06)}
.gm-dot{flex:0 0 auto;width:12px;height:12px;border-radius:50%;background:var(--gc,#4aa85e)}
.gm-main{flex:1 1 auto;min-width:0}
.gm-main b{display:block;font-size:15.5px;font-weight:800;color:#33302a}
.gm-n{font-size:12.5px;font-weight:700;color:#a2957c}
.gm-main small{display:block;margin-top:2px;font-size:12.5px;color:#a2957c;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gm-actions{flex:0 0 auto;display:flex;gap:8px}
.gm-danger{color:#c5614d;border-color:#f0ccc4}
.gm-danger:hover{background:#fdf3f1;border-color:#e7b6aa}

/* ---------- 创建 / 编辑 小组 弹窗 ---------- */
#gmodal{z-index:10060}
.group-dialog{width:min(460px,calc(100vw - 32px))}
.group-color-field{margin-top:16px}
.group-color-label{display:block;font-size:13px;font-weight:700;color:#5c6b57;margin-bottom:9px}
.group-colors{display:grid;grid-template-columns:repeat(9,1fr);gap:9px}
.group-color-swatch{width:26px;height:26px;min-height:26px;padding:0;border-radius:50%;background:var(--c,#4aa85e);border:2px solid transparent;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}
.group-color-swatch:hover{transform:scale(1.1)}
.group-color-swatch.on{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--c,#4aa85e)}
@media(max-width:520px){.group-colors{grid-template-columns:repeat(6,1fr)}}

/* ============================================================
   顶部三区布局 + 老师设置下拉 + 植物图鉴
   —— 沿用奶油白 / 自然绿体系，不使用对标应用的紫色
   ============================================================ */

/* ---------- 顶部第一行：左(班级) / 中(搜索) / 右(功能) ---------- */
#v-main .topbar{display:flex;align-items:center;gap:14px;padding:10px 14px;margin-bottom:10px;background:#fffdf8;border:1px solid #e1ebdc;border-radius:18px;box-shadow:0 4px 14px rgba(61,99,57,.07)}
.topbar-left{display:flex;align-items:center;gap:9px;flex:0 0 auto;min-width:0}
.topbar-right{display:flex;align-items:center;gap:7px;flex:0 0 auto;margin-left:auto}
.topbar-center{flex:1 1 auto;display:flex;justify-content:center;min-width:0}
#v-main .topbar .topbar-icon{width:40px;min-width:40px;padding:0;font-size:19px;font-weight:800;line-height:1}
#v-main .topbar .topbar-avatar{width:40px;min-width:40px;padding:0;font-size:19px;background:#eaf7e6;border-color:#bfe0b8}
.topbar-class{display:flex;flex-direction:column;gap:1px;min-width:0;max-width:200px}
.topbar-class b{font-size:16px;font-weight:800;color:#2c422d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-class small{font-size:11px;font-weight:600;color:#9aa89a;white-space:nowrap}
.topbar-search{display:flex;align-items:center;gap:8px;width:100%;max-width:320px;padding:0 14px;background:#fff;border:1px solid #dfe9da;border-radius:999px;box-shadow:inset 0 1px 2px rgba(60,90,55,.05)}
.topbar-search span{font-size:13px;opacity:.5}
#v-main .topbar .topbar-search input{flex:1 1 auto;min-width:0;min-height:38px;border:0;background:transparent;box-shadow:none;font-size:14px;outline:none}
#v-main .topbar .topbar-search input:focus{background:transparent;box-shadow:none;border:0px}
#v-main .topbar .topbar-search:focus-within{border-color:#41ad68;box-shadow:0 0 0 4px rgba(65,173,104,.13)}
.topbar-right button{font-size:13.5px;padding:0 13px;border-radius:999px}
#v-main .topbar .topbar-atlas{background:#eaf7e6;border-color:#bfe0b8;color:#1f8b49;font-weight:800}

/* ---------- 顶部第二行：工具条 ---------- */
#v-main .toolbar-actions{gap:8px;padding:8px 12px;margin-bottom:12px;background:#fffdf8;border:1px solid #e5ecdf;border-radius:14px;box-shadow:0 2px 8px rgba(61,99,57,.05)}
.tb-zone{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tb-filters{gap:7px}
.tb-gap{flex:1 1 auto}
.tb-sep{width:1px;height:22px;background:#e4e9dd;border-radius:1px}
#v-main .toolbar-actions button{min-height:34px;height:34px;padding:0 12px;font-size:13px;font-weight:700;border-radius:999px;border:1px solid #dfe9da;background:#fff;color:#4a5a49;white-space:nowrap}
#v-main .toolbar-actions button:hover{background:#f2f8ec;border-color:#c3d9bb}
#v-main .toolbar-actions .tb-batch{background:#eaf7e6;border-color:#bfe0b8;color:#1f8b49;font-weight:800}
#v-main .toolbar-actions select{min-height:34px;height:34px;padding:0 8px;font-size:13px;border:1px solid #dfe9da;border-radius:999px;background:#fff;color:#4a5a49}

/* ---------- 老师设置下拉 ---------- */
.teacher-wrap{position:relative;display:inline-flex}
#v-main .topbar .teacher-btn{background:#eaf7e6;border-color:#bfe0b8;color:#1f8b49;font-weight:800;gap:6px}
.teacher-btn .caret{font-size:10px;opacity:.7}
.teacher-menu{position:absolute;z-index:70;top:calc(100% + 10px);right:0;width:280px;max-height:min(72vh,620px);overflow-y:auto;overscroll-behavior:contain;padding:6px;background:#fffefb;border:1px solid #e6ecdf;border-radius:16px;box-shadow:0 18px 44px rgba(50,72,45,.18)}
.teacher-menu::-webkit-scrollbar{width:8px}
.teacher-menu::-webkit-scrollbar-thumb{background:#dfe6d8;border-radius:8px;border:2px solid #fffefb}
.teacher-menu::-webkit-scrollbar-thumb:hover{background:#c9d6c0}
.teacher-menu::-webkit-scrollbar-track{background:transparent}
.tgroup+.tgroup{margin-top:4px;padding-top:6px;border-top:1px solid #eef1e8}
.tgroup-title{padding:7px 10px 5px;font-size:11.5px;font-weight:800;color:#9aa89a;letter-spacing:.04em}
.titem{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:6px 10px;border:0;border-radius:11px;background:transparent;color:#3a4638;font-size:14px;font-weight:600;text-align:left;cursor:pointer;transition:background .14s ease,color .14s ease}
.titem .ti{width:22px;flex:0 0 auto;text-align:center;font-size:15px;opacity:.85}
.titem .tx{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.titem:hover{background:#f2f8ec;color:#1f8b49}
.titem:active{background:#e6f3e0}
.titem:focus-visible{outline:2px solid #41ad68;outline-offset:-2px}
.titem[disabled]{opacity:.5;cursor:not-allowed;background:transparent}
.titem[disabled]:hover{background:transparent;color:#3a4638}
.titem-danger{color:#c0392b}
.titem-danger:hover{background:#fdeeec;color:#a5281a}
.titem-danger .ti{opacity:1}
.tsoon{margin-left:auto;flex:0 0 auto;padding:1px 7px;border-radius:999px;background:#f0f2ea;color:#9aa89a;font-size:10.5px;font-weight:700}

/* ---------- 植物图鉴 ---------- */
#v-atlas{max-width:1680px;width:calc(100% - 48px);margin:0 auto;padding:18px 0 60px}
.atlas-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px}
.atlas-head h2{margin:2px 0 0;font-size:24px;font-weight:800;color:#2f3a2c}
#v-atlas .atlas-head button{min-height:36px;padding:0 14px;border-radius:999px;font-size:13.5px;font-weight:700}
.atlas-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.atlas-search{display:flex;align-items:center;gap:8px;padding:0 14px;min-height:38px;background:#fff;border:1px solid #e1ebdc;border-radius:999px}
.atlas-search input{min-height:36px;border:0;background:transparent;box-shadow:none;font-size:14px;outline:none}
.atlas-cats{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.atlas-chip{min-height:32px;padding:0 13px;border:1px solid #dfe9da;background:#fff;color:#4a5a49;border-radius:999px;font-size:13px;font-weight:700;cursor:pointer}
.atlas-chip:hover{background:#f2f8ec}
.atlas-chip.on{background:#eaf7e6;border-color:#9fd6ad;color:#1f8b49}
.atlas-count{margin-left:auto;font-size:12.5px;font-weight:700;color:#a2957c}
.atlas-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.atlas-card{display:flex;gap:14px;padding:16px;background:#fffdf7;border:1px solid #eceae0;border-radius:18px;box-shadow:0 1px 4px rgba(120,100,70,.05)}
.atlas-visual{flex:0 0 100px;width:100px;height:100px;border-radius:12px;background:linear-gradient(180deg,#fdfaf3,#f5eede);overflow:hidden;position:relative}
.atlas-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.atlas-body{flex:1 1 auto;min-width:0}
.atlas-body b{display:block;font-size:14.5px;font-weight:800;color:#33302a}
.atlas-body small{display:block;margin-top:2px;font-size:11.5px;color:#a2957c}
.atlas-stages{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin-top:7px}
.atlas-stage{position:relative;display:block;aspect-ratio:1/1;border-radius:8px;background:#f8f5ea;overflow:hidden}
.atlas-stage .plant-visual{position:absolute;inset:0;display:block;width:100%;height:100%}
.atlas-stage .plant-stage-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:transparent}
.atlas-stage .plant-stage-emoji{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:14px}
.atlas-stage i{position:absolute;right:1px;bottom:1px;padding:0 3px;border-radius:4px;background:rgba(255,255,255,.85);color:#8d8674;font-size:9px;font-style:normal;font-weight:700}
.atlas-empty{padding:60px 20px;text-align:center;color:#9aa89a}

@media(max-width:1080px){
  .topbar{flex-wrap:wrap}
  .topbar-center{order:3;flex:1 1 100%}
  .topbar-search{max-width:none}
}
@media(max-width:820px){
  #v-main .topbar .topbar-right{flex-wrap:wrap}
  .atlas-list{grid-template-columns:1fr}
}


/* 单人加减分弹窗：宽大三列布局，右上角醒目关闭叉号。 */
.modal-score .box{
  position:relative;
  width:min(960px,92vw);
  max-width:960px;
  max-height:min(760px,86vh);
  overflow-y:auto;
  padding:20px 24px 22px;
  border-radius:26px;
}
.modal-score #mt{padding-right:48px;margin-bottom:14px;}
.modal-score .reason-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;}
.modal-score .reason-btn{min-height:70px;padding:11px 15px;cursor:pointer;}
.modal-score .score-panel{gap:16px;}
.modal-score .score-close-x{
  position:sticky;top:0;float:right;z-index:5;
  width:40px;height:40px;margin:-8px -9px 0 8px;
  display:grid;place-items:center;line-height:1;
  border:1px solid #e4e9e5;border-radius:50%;
  background:#fff;color:#65756b;font-size:29px;cursor:pointer;
}
.modal-score .score-close-x:hover{background:#f8eded;color:#c43a3a;}
.modal-score .modal-close-btn{display:none;}
.score-close-x{display:none;}
@media(max-width:700px){
 .modal-score .box{width:96vw;padding:17px 13px;}
 .modal-score #mt{padding-right:0;}
 .modal-score .reason-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
 .modal-score .reason-btn{min-height:70px;padding:10px;}
}

/* 管理视图顶部工具栏随页面滚动保持可见，卡片区域照常滚动。 */
#v-main:not(.hidden) > .topbar {
  position:sticky;
  top:0;
  z-index:120;
  background:#fffdf8;
}

/* 正式卡通农场全景：仅作用于农场，管理卡片与其交互保持原样。 */
#farm.farm { background:#7fae62;touch-action:none; }
#farm .farm-bg-img { object-fit:fill; }
#farm .farm-class-name { top:17.6%;width:14.5%;max-width:14.5%;padding:0;transform:translate(-50%,-50%);
  border-radius:0;background:transparent;box-shadow:none;
  color:#603616;font-size:clamp(10px,1.35vw,24px);text-shadow:0 1px 0 rgba(255,226,151,.7); }
#farm .panorama-world { position:absolute;inset:0;z-index:1;transform-origin:50% 50%;will-change:transform; }
#farm .panorama-field-area {
  left:var(--ff-left,15.5%);right:var(--ff-right,13%);top:var(--ff-top,25.5%);bottom:var(--ff-bottom,18%);
  column-gap:.85%;row-gap:2.1%;
}
#farm .panorama-plot { isolation:auto; }
#farm .panorama-soil-img {
  left:50%;bottom:-16%;width:112%;height:78%;max-width:none;
  object-fit:fill;object-position:center bottom;
  transform:translateX(-50%) scale(1,.58);transform-origin:50% 100%;filter:none;
  z-index:var(--ff-soil-depth,20);
}
#farm .panorama-plant-img {
  /* 原图等比显示；宽度随类别和阶段变化，底部始终锚定同一土壤种植点。 */
  left:50%;bottom:18%;width:var(--ff-plant-width,88%);height:auto;max-width:none;max-height:none!important;
  object-fit:contain;object-position:center bottom;
  transform:translateX(-50%);transform-origin:50% 100%;
  mix-blend-mode:normal!important;filter:none!important;opacity:1;
  z-index:var(--ff-plant-depth,21);transition:transform .16s ease;
}
#farm .panorama-plant-img.panorama-tree { min-width:0; }
#farm .panorama-plot:hover .panorama-plant-img { transform:translateX(-50%) translateY(-2%);filter:none!important; }
body.farm-only #app-header,
body.farm-only #v-main > .topbar,
body.farm-only #v-main > .toolbar,
body.farm-only #v-main > #batchbar,
body.farm-only #v-main > #student-empty { display:none!important; }
body.farm-only #v-main { padding-top:0!important; }
body.farm-only #farm { margin-top:0!important; }
#farm .panorama-back-manage {
  position:absolute;right:1.5%;top:1.5%;z-index:1200;
  min-height:36px;padding:7px 15px;border:1px solid #b7d6a3;
  border-radius:999px;background:rgba(255,252,229,.95);
  color:#2f6339;font-size:14px;font-weight:800;
  box-shadow:0 3px 10px #36652730;cursor:pointer;
}
#farm .panorama-back-manage:hover { background:white; }
#farm .panorama-plot-no {
  z-index:1100;left:50%;top:auto;bottom:1%;transform:translateX(-50%);
  min-width:28px;min-height:16px;white-space:nowrap;font-size:clamp(9px,.78vw,12px);
  background:rgba(255,247,214,.97);
}
#farm .panorama-controls { position:absolute;right:1.5%;bottom:1.5%;z-index:1200;display:flex;align-items:center;gap:3px;
  padding:4px;border:1px solid #b7d6a3;border-radius:999px;background:rgba(255,252,229,.95);box-shadow:0 3px 10px #36652730; }
#farm .panorama-controls button { min-width:32px;height:30px;padding:0 8px;border:0;border-radius:999px;background:transparent;
  color:#2f6339;font-size:14px;font-weight:900;cursor:pointer; }
#farm .panorama-controls button:hover { background:#fff; }
#farm .panorama-controls .panorama-zoom-value { min-width:54px;font-size:12px; }

/* 全景功能已下线：全屏展示改为班级卡片，不加载农场画面。 */
body.present #v-main #cards{display:grid!important}
body.present #v-main #farm{display:none!important}