:root { --mood-accent:#6366f1; --mood-green:#10b981; --mood-yellow:#f59e0b; --mood-red:#ef4444; }
.student-mood-page { margin:0; min-height:100vh; color:#172033; background:radial-gradient(circle at 12% 0%,#ffe6b8 0,#fff7eb 28%,#f2fbff 72%,#eef6ff 100%); font-family:Pretendard,system-ui,-apple-system,sans-serif; padding-bottom:80px; }
.student-mood-page [hidden],.student-v4-mood-card [hidden] { display:none!important; }
.student-mood-header { position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:9px 20px; border-bottom:1px solid #dfe4ef; background:rgba(255,255,255,.92); backdrop-filter:blur(12px); }
.student-mood-header a { min-height:44px; display:flex; align-items:center; gap:12px; background:linear-gradient(135deg,#f8b94d,#818cf8); color:#4f46e5; font-size:19px; font-weight:850; text-decoration:none; background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.student-mood-header > span { color:#64748b; font-size:13px; }
.student-mood-shell { width:min(540px,calc(100% - 40px)); margin:0 auto; padding:24px 0; }
.student-mood-card { margin-bottom:24px; padding:28px 24px; border:1px solid #dfe4ef; border-radius:24px; background:rgba(255,255,255,.96); box-shadow:0 16px 36px rgba(51,65,85,.09); }
.student-mood-card h1,.student-mood-card h2 { margin:0 0 20px; color:#172033; font-size:18px; font-weight:850; }
.student-mood-grid { display:grid; gap:14px; }
.student-mood-grid-five { grid-template-columns:repeat(auto-fit,minmax(92px,1fr)); }
.student-mood-grid-three { grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); }
.student-mood-grid button { min-height:118px; padding:16px 10px; border:1.5px solid #d9deea; border-radius:20px; background:#fbfcff; color:#64748b; cursor:pointer; transition:transform .16s ease,border-color .16s ease,background .16s ease; }
.student-mood-grid button:hover,.student-mood-grid button:focus-visible { transform:translateY(-2px); border-color:var(--mood-accent); outline:3px solid rgba(99,102,241,.18); outline-offset:2px; }
.student-mood-grid button i,.student-mood-grid button .student-mood-emoji { display:block; margin-bottom:12px; font-size:36px; line-height:1; }
.student-mood-grid button span { display:block; font-size:14px; font-weight:750; line-height:1.35; }
.student-mood-grid button.is-selected { border-color:var(--mood-accent); background:#eef2ff; color:#4f46e5; box-shadow:0 8px 18px rgba(99,102,241,.15); }
.student-mood-grid button.is-selected i { color:var(--mood-accent); }
.student-mood-grid [data-mood="great"].is-selected,.student-mood-grid [data-mood="good"].is-selected { border-color:var(--mood-green); background:#ecfdf5; color:#047857; }
.student-mood-grid [data-mood="great"].is-selected i,.student-mood-grid [data-mood="good"].is-selected i { color:var(--mood-green); }
.student-mood-grid [data-mood="average"].is-selected { border-color:var(--mood-yellow); background:#fffbeb; color:#b45309; }
.student-mood-grid [data-mood="average"].is-selected i { color:var(--mood-yellow); }
.student-mood-grid [data-mood="worried"].is-selected,.student-mood-grid [data-mood="hard"].is-selected { border-color:var(--mood-red); background:#fef2f2; color:#b91c1c; }
.student-mood-grid [data-mood="worried"].is-selected i,.student-mood-grid [data-mood="hard"].is-selected i { color:var(--mood-red); }
.student-mood-grid-three button { min-height:134px; }
.student-mood-private { display:grid; grid-template-columns:auto 1fr; align-items:start; gap:14px; margin-top:18px; padding:16px; border:1px solid #c7d2fe; border-radius:18px; background:#eef2ff; color:#3730a3; }
.student-mood-private > i { font-size:22px; }
.student-mood-private strong,.student-mood-private p { margin:0; }
.student-mood-private p { margin-top:4px; color:#5b6479; font-size:12px; line-height:1.5; }
.student-mood-categories { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:8px; }
.student-mood-categories button { min-height:44px; border:1px solid #a5b4fc; border-radius:999px; background:#fff; padding:0 16px; color:#4338ca; font:inherit; font-weight:800; cursor:pointer; }
.student-mood-categories button.is-selected { border-color:#4f46e5; background:#4f46e5; color:#fff; }
.student-mood-detail { grid-column:1 / -1; display:grid; gap:7px; color:#3730a3; font-size:13px; font-weight:800; }
.student-mood-detail textarea { width:100%; box-sizing:border-box; resize:vertical; border:1px solid #c7d2fe; border-radius:14px; background:#fff; padding:13px; color:#172033; font:inherit; line-height:1.5; }
.student-mood-detail small { color:#64748b; font-size:11px; font-weight:600; }
.student-mood-private > a,.student-mood-private > button { grid-column:1 / -1; min-height:44px; display:inline-flex; align-items:center; justify-content:center; padding:0 16px; border:0; border-radius:14px; background:#4f46e5; color:white; font:inherit; font-weight:800; text-decoration:none; white-space:nowrap; cursor:pointer; }
.student-mood-submit { width:100%; min-height:62px; border:0; border-radius:20px; background:linear-gradient(135deg,#10b981,#059669); color:white; box-shadow:0 12px 24px rgba(16,185,129,.3); font-size:18px; font-weight:850; cursor:pointer; }
.student-mood-submit:disabled { opacity:.58; cursor:wait; }
.student-mood-info,.student-mood-status { text-align:center; color:#64748b; font-size:13px; line-height:1.6; }
.student-mood-status { min-height:24px; margin:14px 0 0; }
.student-mood-done { text-align:center; padding:48px 28px; }
.student-mood-done > i { color:#ec4899; font-size:64px; }
.student-mood-done h2 { margin:18px 0 10px; font-size:26px; }
.student-mood-done p { color:#64748b; line-height:1.65; }
.student-mood-done button { min-height:48px; margin-top:14px; padding:0 22px; border:1px solid #c7d2fe; border-radius:16px; background:#eef2ff; color:#4f46e5; font-weight:800; cursor:pointer; }
.student-v4-mood-card { padding:18px; border:1px solid #e4e7ef; border-radius:20px; background:#fff; }
.student-v4-mood-card .student-mood-card { padding:18px 14px; margin-bottom:14px; box-shadow:none; border-radius:18px; }
.student-v4-mood-card .student-mood-grid-five { grid-template-columns:repeat(2,minmax(0,1fr)); }
.student-v4-mood-card .student-mood-grid-three { grid-template-columns:1fr; }
.student-v4-mood-card .student-mood-grid button { min-height:70px; display:flex; align-items:center; gap:10px; text-align:left; }
.student-v4-mood-card .student-mood-grid button i,.student-v4-mood-card .student-mood-grid button .student-mood-emoji { margin:0; font-size:25px; }
.student-v4-mood-card .student-mood-private { grid-template-columns:auto 1fr; }
.student-v4-mood-card .student-mood-private a,.student-v4-mood-card .student-mood-private button { grid-column:1 / -1; justify-content:center; }
@media (max-width:760px) { .student-mood-grid-five { grid-template-columns:repeat(2,minmax(0,1fr)); } .student-mood-grid-three { grid-template-columns:1fr; } .student-mood-private { grid-template-columns:auto 1fr; } .student-mood-private a,.student-mood-private button { grid-column:1 / -1; justify-content:center; } }
@media (max-width:480px) { .student-mood-header { padding:4px 16px; } .student-mood-shell { width:calc(100% - 28px); padding-top:18px; } .student-mood-card { padding:20px 16px; border-radius:20px; } }