/* Green Learning Design System — Phase 1 */
:root {
  --color-primary-900: #0b3d2c;
  --color-primary-800: #105238;
  --color-primary-700: #176b45;
  --color-primary-600: #218257;
  --color-primary-100: #dff5e8;
  --color-primary-50: #f1fbf5;
  --color-blue-100: #e6f2ff;
  --color-blue-700: #24649a;
  --color-amber-100: #fff3cf;
  --color-amber-700: #8b6214;
  --color-danger-700: #a92f35;
  --color-danger-100: #fde8e8;
  --color-surface: #ffffff;
  --color-canvas: #f4f7f4;
  --color-border: #dce5df;
  --color-text: #18352a;
  --color-muted: #687b72;
  --shadow-sm: 0 2px 8px rgba(15, 65, 44, 0.08);
  --shadow-md: 0 12px 32px rgba(15, 65, 44, 0.13);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --touch-target: 48px;
  --motion-fast: 120ms;
  --motion-base: 180ms;
  --motion-slow: 280ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --sidebar-width: 248px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Thai", sans-serif;
  color: var(--color-text);
  background: var(--color-canvas);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--color-canvas); }
body { min-height: 100vh; margin: 0; color: var(--color-text); background: var(--color-canvas); line-height: 1.55; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid rgba(33, 130, 87, 0.35); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.muted { color: var(--color-muted); }
.eyebrow { margin: 0 0 var(--space-1); color: var(--color-primary-600); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.13em; }

.button {
  min-height: var(--touch-target); padding: 0 var(--space-5); border: 1px solid transparent; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); cursor: pointer; font-weight: 750;
  transition: transform var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) linear, box-shadow var(--motion-fast) linear;
}
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button--primary { color: #fff; background: var(--color-primary-700); box-shadow: 0 5px 15px rgba(23, 107, 69, 0.2); }
.button--primary:hover { background: var(--color-primary-800); }
.button--secondary { color: var(--color-text); background: #eef3ef; border-color: var(--color-border); }
.button--danger { color: #fff; background: var(--color-danger-700); }
.button--ghost { min-height: 42px; padding-inline: var(--space-4); color: var(--color-muted); background: transparent; border-color: var(--color-border); }
.button--wide { width: 100%; }
.button-spinner { display: none; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.42); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.button.is-loading .button-spinner { display: block; }
.button.is-loading { pointer-events: none; opacity: .82; }
.icon-button { width: var(--touch-target); height: var(--touch-target); border: 0; border-radius: 50%; display: inline-grid; place-items: center; background: transparent; cursor: pointer; font-size: 1.2rem; }
.icon-button:hover { background: var(--color-primary-50); }

.offline-banner { position: fixed; inset: 0 0 auto; z-index: 1000; padding: 8px 16px; color: #fff; background: #754c0a; text-align: center; font-size: .9rem; font-weight: 700; }

/* Authentication */
.auth-page { display: grid; place-items: center; padding: var(--space-5); background: var(--color-primary-900); background-image: radial-gradient(circle at 15% 20%, rgba(92, 190, 132, .18), transparent 30%), radial-gradient(circle at 85% 80%, rgba(181, 224, 131, .12), transparent 28%); }
.auth-shell { width: min(980px, 100%); min-height: 580px; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: 0 28px 70px rgba(0, 0, 0, .25); }
.auth-brand { padding: clamp(40px, 7vw, 78px); display: flex; flex-direction: column; justify-content: center; color: #fff; background: linear-gradient(145deg, var(--color-primary-800), var(--color-primary-600)); position: relative; overflow: hidden; }
.auth-brand::after { content: ""; position: absolute; width: 230px; height: 230px; right: -85px; bottom: -90px; border: 32px solid rgba(255,255,255,.08); border-radius: 50%; }
.auth-brand .eyebrow { color: #bfe7ce; }
.auth-brand h1 { margin: 0 0 var(--space-4); font-size: clamp(2.2rem, 5vw, 3.7rem); line-height: 1; letter-spacing: -.04em; }
.auth-brand p:last-child { max-width: 33ch; color: #dcece2; }
.brand-mark { width: 74px; height: 74px; margin-bottom: var(--space-5); display: grid; place-items: center; border-radius: 22px; background: rgba(255,255,255,.14); font-size: 2.3rem; }
.brand-mark--small { width: 46px; height: 46px; margin: 0; border-radius: 14px; background: var(--color-primary-100); font-size: 1.5rem; }
.auth-card { padding: clamp(32px, 6vw, 72px); display: flex; flex-direction: column; justify-content: center; }
.auth-card__heading { display: flex; align-items: center; gap: var(--space-2); color: var(--color-muted); font-size: .88rem; font-weight: 700; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #45ae73; box-shadow: 0 0 0 4px var(--color-primary-100); }
.auth-card h2 { margin: var(--space-2) 0 0; font-size: clamp(1.7rem, 3vw, 2.2rem); }
.auth-card > .muted { margin: var(--space-2) 0 var(--space-5); }
.login-form { display: grid; gap: var(--space-4); }
.field { display: grid; gap: 7px; font-size: .92rem; font-weight: 700; }
.field input { width: 100%; min-height: 52px; padding: 10px 14px; color: var(--color-text); background: #fbfdfb; border: 1px solid #cddbd2; border-radius: var(--radius-sm); outline: none; transition: border-color var(--motion-fast), box-shadow var(--motion-fast); }
.field input:focus { border-color: var(--color-primary-600); box-shadow: 0 0 0 4px rgba(33, 130, 87, .12); }
.form-message { margin-bottom: var(--space-4); padding: 12px 14px; border-radius: var(--radius-sm); display: flex; align-items: center; gap: 10px; font-size: .9rem; font-weight: 650; }
.form-message span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font-weight: 900; }
.form-message--error { color: #84242a; background: var(--color-danger-100); }
.form-message--error span { color: white; background: var(--color-danger-700); }
.login-form.has-error input { animation: input-shake var(--motion-slow) var(--ease-standard); }

/* Admin shell */
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; width: var(--sidebar-width); padding: var(--space-5) var(--space-4); display: flex; flex-direction: column; overflow-y: auto; background: var(--color-surface); border-right: 1px solid var(--color-border); }
.brand { min-height: 56px; display: flex; align-items: center; gap: var(--space-3); }
.brand > span:last-child { display: grid; line-height: 1.25; }
.brand small { margin-top: 3px; color: var(--color-muted); font-size: .72rem; }
.nav-list { margin-top: var(--space-6); display: grid; gap: var(--space-2); }
.nav-item { min-height: var(--touch-target); padding: 0 var(--space-3); display: flex; align-items: center; gap: var(--space-3); border-radius: var(--radius-sm); color: var(--color-muted); font-weight: 700; transition: background-color var(--motion-fast), color var(--motion-fast); }
.nav-item:hover, .nav-item.is-active { color: var(--color-primary-800); background: var(--color-primary-50); }
.nav-item__icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--color-primary-100); }
.sidebar__footer { margin-top: auto; padding: var(--space-4); border-radius: var(--radius-sm); background: #f6f9f7; color: var(--color-muted); font-size: .78rem; }
.sidebar__footer p { margin: var(--space-2) 0 0; }
.environment-pill { color: var(--color-primary-700); font-weight: 800; }
.admin-content { min-height: 100vh; margin-left: var(--sidebar-width); }
.topbar { min-height: 88px; padding: var(--space-4) clamp(20px, 4vw, 48px); display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); background: rgba(255,255,255,.96); border-bottom: 1px solid var(--color-border); }
.topbar h1 { margin: 0; font-size: clamp(1.35rem, 2vw, 1.8rem); }
.topbar__actions { display: flex; align-items: center; gap: var(--space-3); }
.notification-button { position: relative; background: #f4f8f5; }
.user-summary { min-width: 150px; display: flex; align-items: center; gap: var(--space-3); }
.user-summary > span:last-child { display: grid; line-height: 1.35; }
.user-summary small { color: var(--color-muted); font-size: .73rem; }
.avatar { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--color-primary-700); font-weight: 800; }
.page-content { max-width: 1400px; margin: 0 auto; padding: clamp(20px, 4vw, 48px); }
.dropdown { position: relative; }
.dropdown-panel { position: absolute; z-index: 50; top: calc(100% + 10px); right: 0; width: min(350px, calc(100vw - 32px)); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-md); }
.dropdown-panel__header { min-height: 58px; padding: 0 var(--space-4); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--color-border); }
.dropdown-panel__header span { color: var(--color-muted); font-size: .8rem; }
.empty-state { display: grid; place-items: center; color: var(--color-muted); text-align: center; }
.empty-state--compact { min-height: 160px; padding: var(--space-5); }
.empty-state--compact span { width: 42px; height: 42px; display: grid; place-items: center; color: var(--color-primary-700); background: var(--color-primary-100); border-radius: 50%; }
.empty-state p { margin: var(--space-3) 0 0; }
.mobile-sheet, .bottom-nav { display: none; }

.welcome-card { min-height: 230px; padding: clamp(28px, 5vw, 54px); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); color: #fff; background: linear-gradient(130deg, var(--color-primary-900), var(--color-primary-600)); overflow: hidden; box-shadow: var(--shadow-md); }
.welcome-card__badge { padding: 6px 12px; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; background: rgba(255,255,255,.1); font-size: .78rem; font-weight: 800; }
.welcome-card h2 { margin: var(--space-4) 0 var(--space-2); font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.1; }
.welcome-card p { max-width: 620px; margin: 0; color: #d9eee1; }
.welcome-illustration { width: 170px; height: 150px; flex: 0 0 auto; position: relative; display: grid; place-items: center; font-size: 5rem; }
.welcome-illustration span:first-child { position: absolute; right: 0; top: 0; font-size: 2.4rem; }
.section-heading { margin: var(--space-7) 0 var(--space-4); display: flex; align-items: end; justify-content: space-between; gap: var(--space-4); }
.section-heading h2 { margin: 0; font-size: 1.35rem; }
.live-status { padding: 7px 12px; display: flex; align-items: center; gap: 8px; border-radius: 999px; color: var(--color-primary-700); background: var(--color-primary-100); font-size: .8rem; font-weight: 750; }
.live-status span { width: 8px; height: 8px; border-radius: 50%; background: #35a568; }
.status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }
.status-card { min-height: 142px; padding: var(--space-5); display: flex; align-items: flex-start; gap: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.status-card__icon { width: 46px; height: 46px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 13px; font-weight: 900; }
.status-card__icon--green { color: var(--color-primary-700); background: var(--color-primary-100); }
.status-card__icon--blue { color: var(--color-blue-700); background: var(--color-blue-100); }
.status-card__icon--amber { color: var(--color-amber-700); background: var(--color-amber-100); }
.status-card div { display: grid; }
.status-card small { color: var(--color-muted); }
.status-card strong { margin-top: 3px; font-size: 1.08rem; }
.status-card p { margin: 5px 0 0; color: var(--color-muted); font-size: .83rem; }
.is-skeleton .skeleton-target { position: relative; overflow: hidden; color: transparent; border-color: #e6ece8; background: #edf2ef; box-shadow: none; }
.is-skeleton .skeleton-target * { visibility: hidden; }
.is-skeleton .skeleton-target::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); animation: skeleton 1s linear infinite; }
.foundation-note { margin-top: var(--space-5); padding: var(--space-4) var(--space-5); display: flex; align-items: flex-start; gap: var(--space-3); border: 1px solid #cbded2; border-radius: var(--radius-md); background: var(--color-primary-50); }
.foundation-note > span { width: 25px; height: 25px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--color-primary-700); font-weight: 900; }
.foundation-note p { margin: 2px 0 0; color: var(--color-muted); }

/* Phase 2 Core Data */
.content-card { margin-bottom: var(--space-5); padding: clamp(18px,3vw,30px); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.content-card__header { margin-bottom: var(--space-5); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.content-card__header h2,.content-card h3 { margin: 0; }
.compact-card { padding: var(--space-5); }
.button-row,.form-actions,.inline-form,.summary-pills { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.filter-bar { margin-bottom: var(--space-4); padding: var(--space-3); display: grid; grid-template-columns: minmax(180px,2fr) repeat(2,minmax(130px,1fr)) auto; gap: var(--space-2); border-radius: var(--radius-sm); background: var(--color-primary-50); }
.filter-bar input,.filter-bar select,.field select,.inline-form input { min-height: var(--touch-target); padding: 9px 12px; border: 1px solid #cddbd2; border-radius: var(--radius-sm); background: white; }
.form-card { max-width: 900px; margin-inline: auto; }
.data-form { display: grid; gap: var(--space-5); }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-4); }
.form-grid__wide { grid-column: 1/-1; }
.form-actions { margin-top: var(--space-5); justify-content: flex-end; }
.table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.data-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.data-table th,.data-table td { padding: 13px 14px; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: middle; }
.data-table thead th { color: var(--color-muted); background: #f7faf8; font-size: .78rem; text-transform: uppercase; white-space: nowrap; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.table-actions { display: flex; gap: 5px; white-space: nowrap; }
.table-actions .button { min-height: 38px; padding-inline: 10px; font-size: .78rem; }
.badge { display: inline-flex; padding: 4px 9px; border-radius: 999px; color: var(--color-muted); background: #edf2ef; font-size: .72rem; font-weight: 800; }
.badge--success { color: var(--color-primary-700); background: var(--color-primary-100); }
.badge--danger,.summary-pills .danger { color: var(--color-danger-700); background: var(--color-danger-100); }
.pagination { margin-top: var(--space-4); display: flex; justify-content: space-between; align-items: center; color: var(--color-muted); font-size: .85rem; }
.pagination div { display: flex; gap: 4px; }.pagination a { min-width: 38px; min-height: 38px; display: grid; place-items: center; border-radius: 9px; }.pagination a.is-active { color: white; background: var(--color-primary-700); }
.profile-card { margin-bottom: var(--space-5); padding: var(--space-5); display: flex; align-items: center; gap: var(--space-4); border-radius: var(--radius-md); color: var(--color-text); background: white; box-shadow: var(--shadow-sm); }.profile-card .button-row { margin-left: auto; }.avatar--large { width: 64px; height: 64px; font-size: 1.4rem; }
.timeline { display: grid; gap: 0; }.timeline article { padding: 0 0 var(--space-5) 28px; position: relative; border-left: 2px solid var(--color-primary-100); }.timeline article>span { position: absolute; width: 14px; height: 14px; left: -8px; top: 4px; border: 3px solid white; border-radius: 50%; background: var(--color-primary-600); }.timeline p { margin: 3px 0; color: var(--color-muted); }.timeline a { color: var(--color-primary-700); font-size: .82rem; font-weight: 700; }
.access-roles { margin-bottom: var(--space-5); padding: var(--space-4); display: flex; gap: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }.access-roles legend { padding: 0 8px; font-weight: 800; }.access-roles label { min-height: 44px; display: flex; align-items: center; gap: 8px; }.permission-matrix select { min-width: 110px; min-height: 42px; border: 1px solid var(--color-border); border-radius: 8px; background: white; }
.summary-pills span { padding: 6px 10px; border-radius: 999px; background: #edf2ef; font-size: .78rem; font-weight: 750; }.text-danger { color: var(--color-danger-700); font-weight: 700; }

/* Phase 3 Agriculture */
.plot-qr { width:96px; height:96px; padding:5px; border:1px solid var(--color-border); border-radius:10px; background:#fff; }
.field textarea,.data-form textarea,.evidence-upload select,.evidence-upload input,.task-builder select,.task-builder input { width:100%; min-height:var(--touch-target); padding:10px 12px; border:1px solid #cddbd2; border-radius:var(--radius-sm); background:#fff; font:inherit; }
.checkbox-row { min-height:52px; display:flex; align-items:center; gap:10px; }.checkbox-row input { width:22px; min-height:22px; }
.metric-grid { margin:var(--space-5) 0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-4); }.metric-grid--compact { grid-template-columns:repeat(3,minmax(0,1fr)); }.metric-card { min-height:145px; padding:var(--space-5); display:grid; align-content:center; border:1px solid var(--color-border); border-radius:var(--radius-md); background:#fff; box-shadow:var(--shadow-sm); transition:transform var(--motion-fast),box-shadow var(--motion-fast); }.metric-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }.metric-card>span { font-size:1.65rem; }.metric-card strong { margin-top:8px; font-size:1.75rem; }.metric-card small { color:var(--color-muted); }.metric-card--warning { border-color:#eed8ab; background:#fffaf0; }
.quick-link-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-3); }.quick-link-grid a { min-height:64px; padding:var(--space-4); display:flex; align-items:center; border-radius:var(--radius-sm); color:var(--color-primary-800); background:var(--color-primary-50); font-weight:800; }
.workflow-track { margin:var(--space-5) 0; display:grid; grid-template-columns:repeat(6,1fr); gap:5px; }.workflow-track span { padding:12px 6px; border-radius:8px; background:#e8efeb; color:var(--color-muted); text-align:center; font-size:.78rem; font-weight:750; }.workflow-track .is-current { color:#fff; background:var(--color-primary-700); }
.member-picker { padding:var(--space-4); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; border:1px solid var(--color-border); border-radius:var(--radius-sm); }.member-picker label { min-height:44px; display:flex; align-items:center; gap:8px; }.task-builder { display:grid; gap:8px; }.task-builder>div { display:grid; grid-template-columns:minmax(180px,1fr) 2fr; gap:8px; }
.task-builder--assignees .task-builder__row { grid-template-columns:minmax(180px,1fr) minmax(220px,1.4fr) minmax(190px,1fr) minmax(190px,1fr); padding:12px; border:1px solid var(--color-border); border-radius:var(--radius-sm); background:#f8fbf9; }
.attendance-actions { margin-bottom:var(--space-3); display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); }.task-assignees { margin-top:6px; color:var(--color-primary-700)!important; font-weight:700; }
.duty-admin-grid { display:grid; grid-template-columns:minmax(300px,.8fr) minmax(420px,1.2fr); gap:var(--space-4); }.admin-duty-task,.duty-task { margin-bottom:var(--space-4); padding:var(--space-4); border:1px solid var(--color-border); border-radius:var(--radius-md); background:#fff; }.admin-duty-task p,.duty-task p { color:var(--color-muted); }.evidence-upload { margin-top:var(--space-3); display:grid; grid-template-columns:140px 1fr auto; gap:8px; }.evidence-strip { margin-top:var(--space-3); display:flex; gap:8px; overflow-x:auto; }.evidence-strip img { width:88px; height:68px; border-radius:9px; object-fit:cover; }
.holiday-banner { margin-bottom:var(--space-5); padding:var(--space-5); display:flex; gap:var(--space-4); align-items:center; border:1px solid #ecd29c; border-radius:var(--radius-md); background:#fff8e7; }.holiday-banner>span { font-size:2rem; }.holiday-banner p { margin:3px 0 0; color:var(--color-muted); }
.notification-list { display:grid; padding:8px; }.notification-list a { padding:10px 12px; display:grid; border-radius:8px; }.notification-list a:hover { background:var(--color-primary-50); }.notification-list small { color:var(--color-muted); }
.student-duty-page { min-height:100vh; background:#edf5f0; }.student-topbar { min-height:72px; padding:8px max(18px,calc((100vw - 900px)/2)); background:#fff; border-bottom:1px solid var(--color-border); }.student-duty-shell { width:min(900px,100%); margin:0 auto; padding:clamp(16px,4vw,36px); }.student-login-card { width:min(520px,100%); margin:6vh auto; padding:clamp(24px,6vw,48px); border-radius:var(--radius-lg); background:#fff; box-shadow:var(--shadow-md); }.student-login-card h1 { margin:0; }.student-welcome { margin-bottom:var(--space-5); display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); }.student-welcome h1 { margin:3px 0; }.duty-step-list { display:grid; gap:var(--space-4); }.duty-session-card { min-height:150px; padding:var(--space-5); border-radius:var(--radius-md); background:#fff; box-shadow:var(--shadow-sm); }.duty-session-card h2 { margin:12px 0 4px; }.duty-session-card p { color:var(--color-muted); }.duty-big-button { width:100%; min-height:64px; font-size:1.05rem; }.duty-section { margin:var(--space-5) 0; }.attendance-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3); }.duty-item { padding:var(--space-4); display:grid; gap:5px; border-radius:var(--radius-md); background:#fff; }.duty-item small { color:var(--color-muted); }.segmented-actions { margin-top:10px; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:5px; }.duty-status-button { min-height:52px; padding:6px; border:1px solid var(--color-border); border-radius:10px; background:#f5f8f6; font-weight:800; }.duty-status-button.is-selected { color:#fff; background:var(--color-primary-700); border-color:var(--color-primary-700); }.duty-task header { display:flex; justify-content:space-between; gap:var(--space-3); }.success-panel { padding:var(--space-7); border-radius:var(--radius-lg); background:var(--color-primary-100); text-align:center; }

/* Phase 4 Green Station kiosk */
.student-session-list{display:grid;gap:var(--space-4)}.student-session-card,.student-action-card,.student-task-card{padding:var(--space-5);border:1px solid var(--color-border);border-radius:var(--radius-md);background:#fff;box-shadow:var(--shadow-sm)}.student-session-card{min-height:145px;display:block}.student-session-card h2{margin:12px 0 5px}.student-session-card p,.student-action-card p,.student-task-card p{color:var(--color-muted)}.student-action-card{margin:var(--space-5) 0}.student-action-card h2{margin-top:0}.student-task-card{margin:10px 0;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}.student-task-card p{margin:4px 0 0}.button--full{width:100%;min-height:58px}.muted{display:block;color:var(--color-muted)}
.session-summary-card.is-closed{border-color:var(--color-primary-300);animation:session-closed var(--motion-slow) var(--ease-standard) both}.waste-journey-line{display:block;white-space:nowrap}.waste-journey-line+.waste-journey-line{margin-top:5px}.evidence-filter-bar{grid-template-columns:minmax(180px,1.6fr) repeat(4,minmax(130px,1fr)) auto}.evidence-card-cover{width:92px;height:92px;flex:0 0 auto;border-radius:14px;object-fit:cover;background:var(--color-primary-50)}

/* Phase 5 Student Experience */
.activity-evidence-grid,.evidence-photo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-4)}.activity-evidence-grid>a{min-height:150px;padding:var(--space-5);display:flex;align-items:center;gap:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-md);background:linear-gradient(145deg,#fff,#f3f9f4);box-shadow:var(--shadow-sm)}.activity-evidence-grid h3{margin:8px 0 3px}.activity-evidence-grid p{margin:0;color:var(--color-muted)}.evidence-cover-icon{font-size:2.6rem}.evidence-center-upload{grid-template-columns:1.2fr .7fr 1.2fr auto;align-items:end;margin-bottom:var(--space-5)}.evidence-photo-grid figure{margin:0;overflow:hidden;border:1px solid var(--color-border);border-radius:var(--radius-md);background:#fff}.evidence-photo-grid img{width:100%;height:220px;display:block;object-fit:cover}.evidence-photo-grid figcaption{padding:12px}.botanical-passport-card{background:linear-gradient(145deg,#fff,#f2f8ef)}
.inline-form{display:flex;align-items:center;gap:6px;min-width:520px}.inline-form input{width:105px}.inline-form input[name="description"]{width:190px}.review-row,.redemption-list article,.ledger-row{padding:13px 0;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--color-border)}.garden-admin-grid,.garden-shop-grid,.badge-shelf,.reward-grid,.mission-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--space-3)}.garden-admin-grid article,.garden-shop-grid article,.badge-shelf article,.reward-card,.mission-card{padding:var(--space-4);display:grid;gap:9px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:#fff}.garden-emoji,.garden-shop-grid article>span,.badge-shelf article>span,.reward-card>span{font-size:2.1rem}.green-profile-shell{width:min(1100px,100%)}.profile-hero{position:relative;margin-bottom:var(--space-5);padding:clamp(24px,5vw,44px);border-radius:var(--radius-lg);color:#fff;background:linear-gradient(140deg,#176b45,#0b3d2c);box-shadow:var(--shadow-md)}.profile-hero h1{margin:3px 0}.profile-hero>form{position:absolute;top:24px;right:24px}.profile-hero .button--ghost{color:#fff;border-color:rgba(255,255,255,.45)}.profile-score{margin-top:28px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.profile-score article{padding:18px;border-radius:16px;background:rgba(255,255,255,.12)}.profile-score span,.profile-score small{display:block;color:#d9eee4}.profile-score strong{display:block;font-size:2rem}.profile-section{margin:var(--space-5) 0;padding:clamp(18px,4vw,32px);border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow-sm)}.mission-card h3,.reward-card h3{margin:3px 0}.mission-card p,.reward-card p{margin:0;color:var(--color-muted)}.mission-card form{margin-top:auto}.mission-state{padding:9px;border-radius:10px;text-align:center;color:var(--color-primary-700);background:var(--color-primary-100);font-weight:800}.badge-shelf article{text-align:center}.virtual-garden{background:linear-gradient(#f8fff9,#eff8f0)}.garden-stage-v1{min-height:290px;position:relative;margin:18px 0;border-radius:24px;overflow:hidden;background:linear-gradient(#b8e3ff 0 58%,#83bd62 58% 100%)}.garden-sky{position:absolute;top:25px;right:35px;font-size:3.2rem}.garden-ground{position:absolute;right:20px;bottom:28px;left:20px;display:flex;align-items:end;justify-content:center;gap:20px;flex-wrap:wrap}.garden-object{position:relative;font-size:clamp(2.8rem,8vw,5.2rem);filter:drop-shadow(0 7px 4px rgba(0,0,0,.14))}.garden-object small{position:absolute;right:-8px;bottom:0;padding:2px 6px;border-radius:999px;color:#fff;background:#176b45;font-size:.65rem}.garden-settings{display:grid;grid-template-columns:1fr 1fr auto;align-items:end;gap:12px}.positive{color:#176b45}.negative{color:#b42318}@media(max-width:680px){.profile-hero>form{position:static;margin-top:18px}.profile-score,.garden-settings{grid-template-columns:1fr}.inline-form{min-width:680px}.garden-stage-v1{min-height:240px}}
.inventory-check-heading,.inventory-count-card header { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-3); }.inventory-check-heading small { color:var(--color-muted); }.inventory-count-grid { margin-top:var(--space-3); display:grid; gap:var(--space-3); }.inventory-count-card { padding:var(--space-4); border:1px solid var(--color-border); border-radius:var(--radius-md); background:#fff; }.inventory-count-card.is-checked { border-color:var(--color-primary-300); }.inventory-count-card h3 { margin:8px 0 0; }.inventory-count-card p { color:var(--color-muted); }.inventory-count-form { display:grid; grid-template-columns:minmax(150px,.55fr) minmax(220px,1fr) auto; align-items:end; gap:var(--space-3); }.inventory-result--match { color:var(--color-primary-700); }.inventory-result--shortage,.inventory-result--overage { color:var(--color-danger-700); }.inventory-result--pending { color:var(--color-muted); }.inline-inventory-form { min-width:520px; display:grid; grid-template-columns:110px minmax(210px,1fr) auto; gap:8px; align-items:center; }

/* Toasts and modal system */
.toast-region { position: fixed; z-index: 200; right: var(--space-5); bottom: var(--space-5); display: grid; gap: var(--space-3); pointer-events: none; }
.toast { position: relative; min-width: min(360px, calc(100vw - 32px)); min-height: 60px; padding: 10px 8px 10px 12px; display: flex; align-items: center; gap: var(--space-3); overflow: visible; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: white; box-shadow: var(--shadow-md); pointer-events: auto; animation: toast-in var(--motion-slow) var(--ease-standard) both; }
.toast.is-leaving { animation: toast-out var(--motion-base) var(--ease-standard) both; }
.toast__icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; font-weight: 900; }
.toast--success .toast__icon { color: #fff; background: var(--color-primary-600); animation: check-pop var(--motion-slow) var(--ease-standard); }
.toast--error .toast__icon { color: #fff; background: var(--color-danger-700); }
.toast__close { margin-left: auto; width: 40px; height: 40px; }
.toast-particle { --angle: calc(var(--particle-index) * 60deg); position: absolute; left: 27px; top: 28px; width: 5px; height: 5px; border-radius: 2px; background: #f4c95d; animation: particle .55s var(--ease-standard) both; transform: rotate(var(--angle)) translateY(-25px); }
.toast-particle--0 { --particle-index: 0; }
.toast-particle--1 { --particle-index: 1; }
.toast-particle--2 { --particle-index: 2; }
.toast-particle--3 { --particle-index: 3; }
.toast-particle--4 { --particle-index: 4; }
.toast-particle--5 { --particle-index: 5; }
.modal-backdrop { position: fixed; inset: 0; z-index: 300; padding: var(--space-4); display: grid; place-items: center; background: rgba(8, 30, 21, .56); opacity: 0; transition: opacity var(--motion-base) linear; }
.modal-backdrop.is-open { opacity: 1; }
.modal { width: min(430px, 100%); padding: var(--space-6); border-radius: var(--radius-lg); background: white; box-shadow: 0 25px 70px rgba(0,0,0,.25); text-align: center; transform: translateY(8px) scale(.98); transition: transform var(--motion-base) var(--ease-standard); }
.modal-backdrop.is-open .modal { transform: translateY(0) scale(1); }
.modal__icon { width: 58px; height: 58px; margin: 0 auto var(--space-4); display: grid; place-items: center; border-radius: 18px; color: var(--color-primary-700); background: var(--color-primary-100); font-size: 1.6rem; }
.modal__icon--warning { color: var(--color-amber-700); background: var(--color-amber-100); }
.modal h2 { margin: 0; font-size: 1.35rem; }
.modal p { margin: var(--space-2) 0 var(--space-5); color: var(--color-muted); }
.modal__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.modal__actions form, .modal__actions button { width: 100%; }

.error-page { display: grid; place-items: center; padding: var(--space-5); background: var(--color-primary-50); }
.error-card { width: min(480px, 100%); padding: var(--space-7); border-radius: var(--radius-lg); background: white; box-shadow: var(--shadow-md); text-align: center; }
.error-card > span { color: var(--color-primary-600); font-size: 3.5rem; font-weight: 900; }
.error-card h1 { margin: 0; }
.error-card p { margin: var(--space-2) 0 var(--space-5); color: var(--color-muted); }

.developer-credit { padding: 18px clamp(18px,4vw,48px); color: var(--color-muted); background: rgba(255,255,255,.88); border-top: 1px solid var(--color-border); text-align: center; font-size: .82rem; font-weight: 700; line-height: 1.6; }
.auth-page > .developer-credit,.error-page > .developer-credit { position: fixed; right: 0; bottom: 0; left: 0; z-index: 5; }
.student-duty-page > .developer-credit { margin-top: auto; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes input-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }
@keyframes check-pop { 0% { transform: scale(.65); } 70% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes particle { from { opacity: 1; transform: rotate(var(--angle)) translateY(-4px); } to { opacity: 0; transform: rotate(var(--angle)) translateY(-30px); } }
@keyframes skeleton { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes session-closed { from { opacity:.7; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }

@media (max-width: 900px) {
  :root { --sidebar-width: 210px; }
  .admin-content,.page-content,.content-card { min-width: 0; }
  .filter-bar { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .evidence-filter-bar { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .filter-bar > .button { width: 100%; }
  .status-grid { grid-template-columns: 1fr; }
  .topbar { padding-inline: var(--space-5); }
  .logout-button { display: none; }
  .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.duty-admin-grid { grid-template-columns:1fr; }
}

@media (max-width: 720px) {
  body.admin-page { padding-bottom: 76px; }
  .auth-page { padding: 0; display: block; background: white; }
  .auth-shell { min-height: 100vh; grid-template-columns: 1fr; border-radius: 0; box-shadow: none; }
  .auth-brand { min-height: 220px; padding: 34px 28px; }
  .auth-brand h1 { font-size: 2.35rem; }
  .auth-brand p:last-child { margin: 0; }
  .brand-mark { width: 55px; height: 55px; margin-bottom: 14px; border-radius: 16px; font-size: 1.8rem; }
  .auth-card { padding: 34px 24px 44px; justify-content: start; }
  .sidebar { display: none; }
  .admin-content { margin-left: 0; }
  .topbar { min-height: 76px; padding: 12px 18px; }
  .topbar__actions > .dropdown, .user-summary > span:last-child { display: none; }
  .page-content { padding: 18px; }
  .welcome-card { min-height: 220px; padding: 28px 24px; }
  .welcome-illustration { display: none; }
  .section-heading { margin-top: 34px; align-items: flex-start; }
  .live-status { font-size: .72rem; }
  .bottom-nav { position: fixed; inset: auto 0 0; z-index: 100; min-height: 68px; padding: 5px 10px max(5px, env(safe-area-inset-bottom)); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(72px,1fr); overflow-x: auto; border-top: 1px solid var(--color-border); background: white; box-shadow: 0 -6px 20px rgba(15,65,44,.08); }
  .bottom-nav__item { min-height: 56px; border: 0; border-radius: 10px; display: grid; place-items: center; align-content: center; gap: 2px; color: var(--color-muted); background: transparent; font-size: .72rem; font-weight: 750; }
  .bottom-nav__item span:first-child { font-size: 1.2rem; }
  .bottom-nav__item.is-active { color: var(--color-primary-700); background: var(--color-primary-50); }
  .mobile-sheet { position: fixed; z-index: 150; right: 12px; bottom: 78px; left: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: white; box-shadow: var(--shadow-md); }
  .toast-region { right: 16px; bottom: 84px; left: 16px; }
  .admin-content .developer-credit { padding-bottom: 88px; }
  .auth-page > .developer-credit,.error-page > .developer-credit { position: static; }
  .toast { min-width: 0; width: 100%; }
  .modal { padding: 26px 22px; }
  .content-card__header,.profile-card { align-items: flex-start; flex-direction: column; }
  .profile-card .button-row { margin-left: 0; }
  .filter-bar,.form-grid { grid-template-columns: 1fr; }
  .form-grid__wide { grid-column: auto; }
  .data-table:not(.permission-matrix) thead { display: none; }
  .data-table:not(.permission-matrix),.data-table:not(.permission-matrix) tbody,.data-table:not(.permission-matrix) tr,.data-table:not(.permission-matrix) td { display: block; width: 100%; }
  .data-table:not(.permission-matrix) tr { padding: 10px; border-bottom: 1px solid var(--color-border); }
  .data-table:not(.permission-matrix) td { padding: 7px 8px; border: 0; }
  .data-table:not(.permission-matrix) td[data-label]::before { content: attr(data-label) ": "; color: var(--color-muted); font-weight: 700; }
  .table-actions { flex-wrap: wrap; }
  .pagination { align-items: flex-start; gap: var(--space-3); flex-direction: column; }
  .quick-link-grid,.attendance-grid,.member-picker { grid-template-columns:1fr; }.task-builder>div,.task-builder--assignees .task-builder__row,.evidence-upload,.inventory-count-form { grid-template-columns:1fr; }.workflow-track { grid-template-columns:repeat(3,1fr); }.student-welcome { align-items:flex-start; }
}

@media (max-width: 390px) {
  .section-heading { display: grid; }
  .live-status { width: fit-content; }
  .modal__actions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .toast-particle { display: none; }
}

.field--full{grid-column:1/-1}.cms-action-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.cms-action-grid>a{min-height:165px;padding:24px;display:grid;align-content:start;border:1px solid var(--color-border);border-radius:18px;background:linear-gradient(145deg,#fff,#f5faf6);transition:transform .18s ease,box-shadow .18s ease}.cms-action-grid>a:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}.cms-action-grid>a>span{width:44px;height:44px;margin-bottom:18px;display:grid;place-items:center;border-radius:13px;color:var(--color-primary-700);background:var(--color-primary-50);font-size:1.3rem}.cms-action-grid strong{color:var(--color-ink)}.cms-action-grid small{margin-top:6px;color:var(--color-muted);line-height:1.55}.cms-order-input{width:95px}.cms-upload-form{padding-bottom:8px}.cms-media-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.cms-media-grid article{border:1px solid var(--color-border);border-radius:18px;background:white;overflow:hidden}.cms-media-grid article.is-inactive{opacity:.58}.cms-media-grid img{width:100%;height:220px;display:block;object-fit:cover;background:var(--color-primary-50)}.cms-media-grid article>div{padding:18px;display:grid;gap:8px}.cms-media-grid small,.cms-media-grid p{margin:0;color:var(--color-muted);line-height:1.55}.cms-media-grid form,.table-actions form{display:inline-flex;margin:0}.cms-media-grid .button{justify-self:start}.table-actions{align-items:center}
@media(max-width:1100px){.cms-action-grid{grid-template-columns:repeat(2,1fr)}.cms-media-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.cms-action-grid,.cms-media-grid{grid-template-columns:1fr}.field--full{grid-column:auto}.cms-media-grid img{height:240px}}
.stat-grid{margin-bottom:var(--space-5);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4)}.stat-card{min-height:132px;padding:var(--space-5);display:grid;align-content:start;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);box-shadow:var(--shadow-sm)}.stat-card>span{color:var(--color-muted);font-size:.82rem;font-weight:750}.stat-card>strong{margin:9px 0 5px;color:var(--color-primary-800);font-size:2rem;line-height:1}.stat-card>small{color:var(--color-muted)}.stat-card a{color:var(--color-primary-700);font-weight:800}@media(max-width:1100px){.stat-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:620px){.stat-grid{grid-template-columns:1fr}}

/* Phase 6 reports and executive analytics */
.executive-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:22px}.executive-heading h2{margin:4px 0 8px;font-size:clamp(1.8rem,4vw,3rem)}.executive-heading p{margin:0;color:var(--color-muted)}.report-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.report-actions form{margin:0}.report-filter{display:flex;align-items:end;gap:10px;flex-wrap:wrap;margin-bottom:24px;padding:18px;border:1px solid var(--color-border);border-radius:18px;background:#fff}.report-filter label{display:grid;gap:5px;min-width:150px;color:var(--color-muted);font-size:.76rem;font-weight:800}.report-filter input,.report-filter select{min-height:42px;padding:8px 10px;border:1px solid var(--color-border);border-radius:10px;background:#fff;font:inherit}.executive-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:20px}.executive-kpis>a{display:grid;gap:7px;padding:22px;border:1px solid var(--color-border);border-radius:18px;color:var(--color-text);background:#fff;text-decoration:none;box-shadow:var(--shadow-sm)}.executive-kpis small{color:var(--color-muted)}.executive-kpis strong{font-size:2rem;line-height:1}.executive-kpis span{color:var(--color-primary);font-size:.78rem;font-weight:800}.report-catalog{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}.report-catalog__card{position:relative;padding:24px;border:1px solid var(--color-border);border-radius:18px;color:var(--color-text);background:#fff;text-decoration:none}.report-catalog__card>span{position:absolute;top:18px;right:18px}.report-catalog__card small{color:var(--color-primary);font-weight:850}.report-catalog__card h2{margin:12px 0 8px}.report-catalog__card p{color:var(--color-muted)}.report-chart-card{margin-bottom:20px}.report-bars{display:grid;gap:10px}.report-bars>div{display:grid;grid-template-columns:minmax(90px,160px) 1fr 80px;gap:10px;align-items:center}.report-bars span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-muted);font-size:.78rem}.report-bars i{height:12px;border-radius:999px;background:linear-gradient(90deg,var(--color-primary) var(--bar-size),#e6ece8 var(--bar-size))}.report-bars strong{text-align:right;font-size:.82rem}.report-table-card{padding:0}.report-table td,.report-table th{white-space:nowrap}.privacy-note{padding:12px 16px;border-left:4px solid #b0782c;border-radius:8px;background:#fff7e9;color:#69491f}.suppressed{color:#8c6c46;font-style:italic}@media(max-width:760px){.executive-heading{display:grid}.report-filter{display:grid}.report-filter label{width:100%}.report-filter input,.report-filter select{width:100%}.report-bars>div{grid-template-columns:90px 1fr 62px}.report-actions{width:100%}}@media print{.sidebar,.topbar,.bottom-nav,.developer-credit,.report-filter,.report-actions,.notification-panel{display:none!important}.admin-content{margin:0!important}.page-content{padding:0!important}.content-card{box-shadow:none!important}.report-table{font-size:10pt}.report-table thead{display:table-header-group}.report-table tr{break-inside:avoid}}

/* v7.1 Agriculture Easy Mode */
.easy-form-card{max-width:980px}.easy-form-card .muted,.muted{color:var(--color-muted)}.easy-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.easy-field--wide{grid-column:1/-1}.easy-advanced{padding:14px 16px;border:1px solid var(--color-border);border-radius:14px;background:#fafcfb}.easy-advanced>summary{cursor:pointer;font-weight:800;color:var(--color-primary-800)}.easy-advanced[open]>summary{margin-bottom:16px}.easy-warning{display:grid;gap:10px;padding:20px;border:1px solid #ead6a5;border-radius:16px;background:#fff9e9}.easy-warning strong{font-size:1.1rem}.easy-note{padding:12px 14px;border-radius:12px;background:var(--color-primary-50);color:var(--color-muted)}.easy-section-heading{display:flex;justify-content:space-between;align-items:end;gap:14px}.easy-section-heading h3{margin:0}.plot-picker-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.plot-picker-card{min-height:64px;padding:12px 14px;display:flex;align-items:center;gap:12px;border:1px solid var(--color-border);border-radius:14px;background:#fff;cursor:pointer}.plot-picker-card:has(input:checked){border-color:var(--color-primary-600);background:var(--color-primary-50)}.plot-picker-card input{width:22px;height:22px}.plot-picker-card span{display:grid;gap:2px}.plot-picker-card small{color:var(--color-muted)}.easy-action-panel{margin-top:18px}.easy-action-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.easy-action-grid a{min-height:118px;padding:18px;display:grid;align-content:center;gap:5px;border:1px solid var(--color-border);border-radius:16px;background:#fff;color:var(--color-text);text-decoration:none;box-shadow:var(--shadow-sm)}.easy-action-grid a:hover{border-color:var(--color-primary-300);background:var(--color-primary-50)}.easy-action-grid span{font-size:1.65rem}.easy-action-grid strong{font-size:1rem}.easy-action-grid small{color:var(--color-muted)}.easy-duty-grid{display:grid;grid-template-columns:minmax(300px,.8fr) minmax(420px,1.2fr);gap:16px}.easy-one-click{margin-bottom:14px}.attendance-card-list{display:grid;gap:8px}.attendance-card{padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--color-border);border-radius:12px;background:#fff}.attendance-card>div{display:grid}.attendance-card small{color:var(--color-muted)}.duty-task-list{display:grid;gap:12px}.easy-duty-task{padding:14px;border:1px solid var(--color-border);border-radius:16px;background:#fff}.easy-duty-task__head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.easy-duty-task__head>div{display:grid;gap:5px}.easy-duty-task__head small{color:var(--color-muted)}.easy-task-actions{margin-top:12px;display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap}.easy-task-actions form{margin:0}.easy-task-actions details>summary{list-style:none;cursor:pointer}.easy-task-actions details>summary::-webkit-details-marker{display:none}.easy-problem-form{margin-top:8px;min-width:min(360px,72vw)}.easy-photo-details{margin-top:10px}.easy-photo-details>summary{cursor:pointer;color:var(--color-primary-700);font-weight:750}.easy-photo-details .evidence-upload{grid-template-columns:1fr auto}.easy-duty-hero p{margin:4px 0;color:var(--color-muted)}.easy-sticky-actions{padding-top:6px}
@media(max-width:800px){.easy-form-grid,.plot-picker-grid,.easy-action-grid,.easy-duty-grid{grid-template-columns:1fr}.easy-field--wide{grid-column:auto}.easy-section-heading{align-items:flex-start;flex-direction:column}.attendance-card{align-items:flex-start;flex-direction:column}.attendance-card .inline-form{width:100%}.attendance-card .inline-form select{flex:1}.easy-duty-task__head{align-items:flex-start}.easy-action-grid a{min-height:92px}.easy-sticky-actions{position:sticky;bottom:0;z-index:5;margin-inline:-18px;margin-bottom:-18px;padding:12px 18px;background:rgba(255,255,255,.95);border-top:1px solid var(--color-border);backdrop-filter:blur(8px)}}

/* v7.1.1 - ultra simple agriculture duty */
.easy-area-grid{display:grid;gap:1rem}.easy-area-card{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem;border:1px solid var(--color-border);border-radius:16px}.easy-area-card h3{margin:.45rem 0}.easy-area-card p{margin:0}.easy-member-picker{max-height:58vh;overflow:auto}.easy-duty-actions{margin-top:1rem}.easy-inspection-card textarea{margin-top:.75rem}.easy-advanced{margin-top:.75rem}.easy-advanced summary{cursor:pointer;font-weight:700}.duty-home-easy .quick-action-card--primary{transform:none}@media(max-width:720px){.easy-area-card{align-items:stretch;flex-direction:column}.easy-area-card .button{width:100%}.easy-member-picker{max-height:none}}
/* v7.1.5 duty area-first mobile UX */
.duty-area-card{background:#fff;border:1px solid var(--border,#dfe8e1);border-radius:20px;padding:18px;margin:16px 0;box-shadow:0 8px 24px rgba(20,70,45,.05)}
.duty-area-card>header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:14px}.duty-area-card h3{margin:.35rem 0}.duty-area-students{display:grid;gap:10px}.duty-student-row{border:1px solid #e4ece6;border-radius:16px;padding:12px;display:grid;gap:10px}.duty-student-row small{display:block;color:#6d7e72}.participation-form{display:grid;grid-template-columns:1fr minmax(160px,220px);gap:8px;align-items:center}.participation-form select{min-height:42px;border:1px solid #d7e2da;border-radius:10px;padding:8px}.segmented-actions.compact{gap:6px;flex-wrap:wrap}.duty-task-check{border-top:1px dashed #d7e2da;margin-top:14px;padding-top:14px}.duty-leader-panel{background:#f7fbf8}
@media(max-width:700px){.duty-area-card{padding:14px}.duty-area-card>header{display:block}.duty-area-card>header>strong{display:block;margin-top:8px}.participation-form{grid-template-columns:1fr}.duty-status-button{min-height:44px}.segmented-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.duty-task-check .segmented-actions{grid-template-columns:1fr}.duty-big-button{width:100%;min-height:54px}}

/* v7.1.6 duty inspector compact UX for many students */
.duty-quick-summary{display:grid;grid-template-columns:repeat(5,minmax(90px,1fr));gap:10px;margin:0 0 14px}.duty-quick-summary>div{padding:12px 14px;border:1px solid var(--color-border);border-radius:14px;background:#fff;display:grid;gap:2px}.duty-quick-summary small{color:var(--color-muted);font-weight:750}.duty-quick-summary strong{font-size:1.45rem}.duty-quick-summary .needs-action{border-color:#ead6a5;background:#fff9e9}.duty-quick-summary .is-done{background:var(--color-primary-50)}
.duty-toolbar{position:sticky;top:0;z-index:8;display:grid;grid-template-columns:1fr auto;gap:10px;padding:10px 0;background:rgba(247,251,248,.96);backdrop-filter:blur(8px)}.duty-toolbar input{min-height:46px;padding:10px 14px;border:1px solid var(--color-border);border-radius:13px;background:#fff;font:inherit}.duty-toolbar form{margin:0}.duty-leader-strip{padding:12px 14px!important;border-radius:14px!important;background:#f7fbf8!important}.duty-section-title{display:flex;justify-content:space-between;align-items:end;margin:12px 0}.duty-section-title h2{margin:0 0 4px}
.duty-area-compact{margin:10px 0;border:1px solid var(--color-border);border-radius:16px;background:#fff;overflow:hidden;box-shadow:var(--shadow-sm)}.duty-area-compact>summary{list-style:none;cursor:pointer;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}.duty-area-compact>summary::-webkit-details-marker{display:none}.duty-area-compact>summary>div{display:flex;align-items:center;gap:8px;min-width:0}.duty-area-compact>summary strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.duty-area-compact>summary small{color:var(--color-muted);white-space:nowrap}.duty-area-compact[open]>summary{border-bottom:1px solid var(--color-border);background:var(--color-primary-50)}.duty-area-compact__body{padding:12px}.duty-student-list{display:grid;gap:7px}.duty-student-compact{padding:9px 10px;border:1px solid #e4ece6;border-radius:12px;display:grid;grid-template-columns:minmax(160px,1fr) auto;gap:8px 12px;align-items:center}.duty-student-compact__name{display:grid}.duty-student-compact__name small{color:var(--color-muted)}.duty-attendance-buttons{display:grid;grid-template-columns:repeat(4,minmax(54px,1fr));gap:5px;margin:0}.duty-attendance-buttons .duty-status-button{min-height:38px;padding:6px 9px}.duty-exception{grid-column:1/-1}.duty-exception>summary{cursor:pointer;color:var(--color-muted);font-size:.78rem;font-weight:750}.duty-exception-form{margin-top:7px;display:grid;grid-template-columns:1fr minmax(170px,240px);gap:7px}.duty-exception-form select{min-height:40px;border:1px solid var(--color-border);border-radius:10px;padding:7px}.duty-area-result{margin-top:10px;padding-top:10px;border-top:1px dashed var(--color-border)}.duty-area-result p{margin:3px 0 8px}.duty-area-result textarea{width:100%;margin-bottom:8px}.duty-result-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.duty-finish-bar{position:sticky;bottom:0;z-index:9;margin-top:14px;padding:10px 0;display:flex;align-items:center;justify-content:space-between;gap:10px;background:rgba(247,251,248,.96);backdrop-filter:blur(8px)}
@media(max-width:760px){.duty-quick-summary{grid-template-columns:repeat(5,minmax(72px,1fr));overflow-x:auto}.duty-toolbar{grid-template-columns:1fr}.duty-toolbar .button{width:100%}.duty-student-compact{grid-template-columns:1fr}.duty-attendance-buttons{grid-template-columns:repeat(4,1fr)}.duty-exception{grid-column:auto}.duty-exception-form{grid-template-columns:1fr}.duty-result-buttons{grid-template-columns:1fr}.duty-finish-bar{align-items:stretch;flex-direction:column}.duty-finish-bar .button{width:100%}.duty-area-compact>summary{align-items:flex-start}.duty-area-compact>summary>div{flex-wrap:wrap}}

/* v7.1.7 Duty Inspector - polished, easy-to-scan UX */
.duty-inspector-page{max-width:1120px;margin:0 auto;padding:24px 18px 110px}.duty-inspector-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px;padding:22px 24px;border:1px solid var(--color-border);border-radius:22px;background:linear-gradient(135deg,#ffffff 0%,#f3fbf6 100%);box-shadow:0 10px 30px rgba(31,94,61,.06)}.duty-inspector-hero h1{margin:4px 0 6px;font-size:clamp(1.6rem,3vw,2.25rem)}.duty-inspector-user{display:flex;align-items:center;gap:10px;min-width:300px;justify-content:flex-end}.duty-inspector-user>div:nth-child(2){display:grid}.duty-inspector-user small{color:var(--color-muted)}.duty-inspector-avatar{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--color-primary-100);font-size:1.4rem}.duty-logout-button{min-height:42px}.duty-progress-panel{display:grid;grid-template-columns:1.2fr 1fr;gap:18px;align-items:center;padding:18px 20px;border:1px solid var(--color-border);border-radius:20px;background:#fff;margin-bottom:12px}.duty-progress-copy{display:grid;gap:7px}.duty-progress-label{font-size:.8rem;font-weight:800;color:var(--color-primary-700)}.duty-progress-copy strong{font-size:1.08rem}.duty-progress-track{height:8px;border-radius:99px;background:#e9f1eb;overflow:hidden}.duty-progress-track span{display:block;height:100%;border-radius:inherit;background:var(--color-primary-600)}.duty-progress-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.duty-progress-stats>div{padding:10px 12px;border-radius:14px;background:#f8fbf9;display:grid;gap:1px;text-align:center}.duty-progress-stats span{font-size:.76rem;color:var(--color-muted);font-weight:750}.duty-progress-stats strong{font-size:1.28rem}.duty-progress-stats .is-warning{background:#fff7e6}.duty-progress-stats .is-success{background:#eef8f1}.duty-toolbar--polished{position:sticky;top:0;z-index:10;padding:10px 0 12px;background:rgba(247,251,248,.94);backdrop-filter:blur(9px)}.duty-search-wrap{position:relative}.duty-search-wrap>span{position:absolute;left:14px;top:50%;transform:translateY(-50%)}.duty-search-wrap input{width:100%;padding-left:42px!important}.duty-all-present{min-width:170px}.duty-leader-card{display:flex;align-items:center;gap:12px;padding:13px 16px;margin:0 0 18px;border:1px solid #d9e9df;border-radius:16px;background:#f5fbf7}.duty-leader-card__icon{font-size:1.25rem}.duty-leader-card div{display:grid}.duty-leader-card small{font-size:.75rem;color:var(--color-muted)}.duty-section-heading-polished{display:flex;align-items:end;justify-content:space-between;gap:14px;margin:22px 0 10px}.duty-section-heading-polished h2{margin:3px 0 0;font-size:1.32rem}.duty-section-heading-polished>small{padding:7px 10px;border-radius:999px;background:#eef6f0;color:var(--color-primary-800);font-weight:800}.duty-area-stack{display:grid;gap:12px}.duty-area-card-v2{border:1px solid #dce8df;border-radius:20px;background:#fff;overflow:hidden;box-shadow:0 8px 24px rgba(24,78,49,.05)}.duty-area-card-v2>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px}.duty-area-card-v2>summary::-webkit-details-marker{display:none}.duty-area-card-v2[open]>summary{border-bottom:1px solid #e4ece6;background:#f7fbf8}.duty-area-summary-main{display:flex;align-items:center;gap:12px;min-width:0}.duty-area-summary-main>div{display:grid;gap:2px}.duty-area-summary-main strong{font-size:1.05rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.duty-area-summary-main small{color:var(--color-muted)}.duty-area-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:1.25rem;flex:0 0 auto}.duty-area-icon.is-soil{background:#eff8ef}.duty-area-icon.is-hydro{background:#edf8fb}.duty-area-summary-status{display:flex;align-items:center;gap:7px;padding:7px 10px;border-radius:999px;background:#f5f7f5;white-space:nowrap}.duty-area-summary-status.is-success{background:#eaf7ee;color:#1f6f43}.duty-area-summary-status.is-warning{background:#fff4dd;color:#805812}.duty-chevron{font-size:1.15rem;transition:transform .18s ease}.duty-area-card-v2[open] .duty-chevron{transform:rotate(180deg)}.duty-area-body-v2{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:18px;padding:16px 18px 18px}.duty-block-title{display:flex;align-items:end;justify-content:space-between;gap:10px;margin-bottom:9px}.duty-block-title small{color:var(--color-muted);font-size:.76rem}.duty-student-table{display:grid;gap:7px}.duty-student-row-v2{display:grid;grid-template-columns:minmax(180px,1fr) auto;gap:10px 14px;align-items:center;padding:10px 11px;border:1px solid #e3ebe5;border-radius:14px;background:#fff}.duty-student-person{display:flex;align-items:center;gap:10px;min-width:0}.duty-student-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#eef6f0;color:var(--color-primary-800);font-weight:900;flex:0 0 auto}.duty-student-person>div{display:grid;min-width:0}.duty-student-person strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.duty-student-person small{color:var(--color-muted);font-size:.76rem}.duty-attendance-buttons-v2{display:grid;grid-template-columns:repeat(4,minmax(48px,1fr));gap:5px;margin:0}.duty-pill{min-height:38px;padding:6px 9px;border:1px solid #dce5df;border-radius:10px;background:#fff;font:inherit;font-weight:800;cursor:pointer}.duty-pill.is-selected{border-color:transparent;color:#fff}.duty-pill.is-present{background:#218257}.duty-pill.is-absent{background:#b54249}.duty-pill.is-leave{background:#9a741f}.duty-pill.is-late{background:#6a5fa3}.duty-exception-v2{grid-column:1/-1}.duty-exception-v2>summary{cursor:pointer;font-size:.76rem;color:var(--color-muted);font-weight:750}.duty-exception-form-v2{display:grid;grid-template-columns:auto auto minmax(180px,1fr);gap:7px;margin-top:8px}.duty-exception-form-v2 select{min-height:42px;border:1px solid var(--color-border);border-radius:10px;padding:7px}.duty-inspection-block{padding:14px;border-radius:16px;background:#f8fbf9;border:1px solid #e0ebe3}.duty-result-form-v2{display:grid;gap:10px}.duty-result-actions-v2{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.duty-result-card{min-height:94px;padding:10px 8px;border:1px solid #dfe7e1;border-radius:14px;background:#fff;display:grid;place-items:center;align-content:center;gap:2px;text-align:center;font:inherit;cursor:pointer}.duty-result-card>span{font-size:1.35rem}.duty-result-card strong{font-size:.9rem}.duty-result-card small{font-size:.68rem;color:var(--color-muted)}.duty-result-card.is-selected.is-good,.duty-result-card.is-good:hover{border-color:#84c69f;background:#ecf8f0}.duty-result-card.is-selected.is-problem,.duty-result-card.is-problem:hover{border-color:#e8c06f;background:#fff7e6}.duty-result-card.is-selected.is-skip,.duty-result-card.is-skip:hover{border-color:#c5cec8;background:#f2f4f3}.duty-result-form-v2 textarea{width:100%;min-height:72px;padding:10px 12px;border:1px solid var(--color-border);border-radius:12px;resize:vertical;background:#fff}.duty-photo-v2{margin-top:10px}.duty-photo-v2>summary{cursor:pointer;font-weight:750;color:var(--color-primary-700)}.duty-photo-v2>summary span{font-size:.72rem;color:var(--color-muted);font-weight:600}.duty-finish-bar-v2{position:sticky;bottom:0;z-index:12;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:18px;padding:13px 16px;border:1px solid #dce8df;border-radius:18px;background:rgba(255,255,255,.96);box-shadow:0 -6px 24px rgba(25,75,48,.08);backdrop-filter:blur(9px)}.duty-finish-bar-v2>div{display:grid}.duty-finish-bar-v2 small{color:var(--color-muted)}
@media(max-width:900px){.duty-area-body-v2{grid-template-columns:1fr}.duty-progress-panel{grid-template-columns:1fr}.duty-inspector-hero{align-items:flex-start}.duty-inspector-user{min-width:0}}
@media(max-width:700px){.duty-inspector-page{padding:14px 12px 100px}.duty-inspector-hero{display:grid;padding:16px}.duty-inspector-user{width:100%;justify-content:flex-start}.duty-inspector-user form{margin-left:auto}.duty-progress-stats{grid-template-columns:repeat(3,1fr)}.duty-toolbar--polished{grid-template-columns:1fr}.duty-all-present{width:100%}.duty-area-card-v2>summary{padding:13px 14px}.duty-area-summary-status strong{display:none}.duty-area-body-v2{padding:12px}.duty-student-row-v2{grid-template-columns:1fr}.duty-attendance-buttons-v2{grid-template-columns:repeat(4,1fr)}.duty-exception-v2{grid-column:auto}.duty-exception-form-v2{grid-template-columns:1fr}.duty-result-actions-v2{grid-template-columns:repeat(3,1fr)}.duty-result-card{min-height:84px}.duty-result-card small{display:none}.duty-finish-bar-v2{align-items:stretch;flex-direction:column}.duty-finish-bar-v2 .button{width:100%;min-height:52px}.duty-block-title{align-items:flex-start;flex-direction:column}.duty-leader-card strong{font-size:.88rem}}

/* v7.2 Duty + Student Dashboard */
.mobile-top-logout{display:none;margin:0}.duty-teacher-review{margin:0 0 16px;padding:14px 18px;border:1px solid #f0d69a;border-radius:16px;background:#fff8e8}.duty-teacher-review>div{display:flex;align-items:center;gap:12px}.duty-teacher-review>div>span{font-size:1.5rem}.duty-teacher-review strong,.duty-teacher-review small{display:block}.duty-teacher-review small{margin-top:2px;color:var(--color-muted)}.duty-teacher-review.is-approved{border-color:#cde6d5;background:#eff9f2}.duty-summary-hero{margin-bottom:16px}.duty-summary-notice{margin:0 0 16px;padding:12px 14px;border-radius:12px;background:#fff7e5;color:#76510b;font-weight:700}.duty-summary-filter{grid-template-columns:repeat(3,minmax(170px,1fr)) auto;align-items:end}.duty-summary-filter .field{margin:0}.duty-table-code{display:block;color:var(--color-muted);margin-top:2px}.duty-stat-pill{display:inline-grid;place-items:center;min-width:36px;height:32px;padding:0 9px;border-radius:999px;font-weight:900;background:#f2f5f3}.duty-stat-pill.is-good{background:#e8f6ed;color:#1d7347}.duty-stat-pill.is-late{background:#f0edfb;color:#5e4d9b}.duty-stat-pill.is-bad{background:#fbeaec;color:#9a3038}.duty-stat-pill.is-leave{background:#fff4dd;color:#795514}.duty-profile-section{padding:22px;border:1px solid #dce9df;border-radius:22px;background:linear-gradient(135deg,#fff 0%,#f3faf5 100%)}.duty-profile-heading{margin-bottom:14px}.duty-profile-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.duty-profile-stats article{display:grid;gap:3px;padding:14px;border:1px solid #e0ebe3;border-radius:16px;background:#fff}.duty-profile-stats span{font-weight:750;color:var(--color-muted)}.duty-profile-stats strong{font-size:1.7rem}.duty-profile-stats small{color:var(--color-muted)}.duty-profile-pending{margin-top:10px;padding:10px 12px;border-radius:12px;background:#fff7e4;color:#72510c;font-size:.9rem}.duty-profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}.duty-profile-grid h3{margin:0 0 9px}.duty-profile-assignments{display:flex;flex-wrap:wrap;gap:7px}.duty-profile-assignments span{padding:8px 10px;border-radius:999px;background:#edf7f0;font-weight:750}.duty-profile-history{display:grid;gap:6px}.duty-profile-history>div{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:8px 10px;border-radius:10px;background:#fff;border:1px solid #e4ece6}.duty-profile-history small{color:var(--color-muted)}
@media(max-width:900px){.duty-summary-filter{grid-template-columns:1fr 1fr}.duty-profile-grid{grid-template-columns:1fr}}
@media(max-width:700px){.mobile-top-logout{display:block}.topbar__actions>.logout-button{display:none}.topbar__actions .user-summary{display:none}.duty-summary-filter{grid-template-columns:1fr}.duty-summary-filter .button{width:100%}.duty-profile-section{padding:16px}.duty-profile-heading{align-items:flex-start}.duty-profile-heading .button{width:100%;margin-top:8px}.duty-profile-stats{grid-template-columns:repeat(2,1fr)}.duty-profile-history>div{grid-template-columns:1fr auto}.duty-profile-history small{grid-column:1/-1}.bottom-nav{overflow-x:auto;justify-content:flex-start}.bottom-nav__item{min-width:72px;flex:0 0 72px}}