.menu-area { flex: 1; padding: 16px 20px 20px; overflow-y: auto; }
.menu-section { margin-bottom: 20px; }
.section-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.section-icon { width: 20px; height: 20px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 10px; }
.icon-myclass { background: linear-gradient(45deg, #ffecd2, #fcb69f); } .icon-story { background: linear-gradient(45deg, #4facfe, #00f2fe); } .icon-5min { background: linear-gradient(45deg, #43e97b, #38f9d7); } .icon-series { background: linear-gradient(45deg, #fa709a, #fee140); } .icon-textbook { background: linear-gradient(45deg, #a8edea, #fed6e3); }
.section-title { font-size: 16px; font-weight: 700; color: #333; }
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.menu-card { background: white; border: 1px solid #e8e8e8; border-radius: 10px; padding: 12px; display: flex; align-items: center; gap: 8px; text-decoration: none; color: #333; transition: all 0.2s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.05); min-height: 50px; }
.menu-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); border-color: #ff9500; }
.menu-icon { font-size: 16px; flex-shrink: 0; }
.menu-text { font-size: 14px; font-weight: 500; line-height: 1.3; word-break: keep-all; overflow-wrap: break-word; }