.create-activity-screen { min-height: 100vh; background: #fffcf6; color: #003b6f; padding: 32px 24px 70px; box-sizing: border-box; } .create-activity-header { width: min(100%%, 760px); margin: 0 auto 38px; display: flex; align-items: flex-start; gap: 18px; } .create-activity-header h1 { margin: 4px 0 0; color: #003b6f; font-size: clamp(30px, 5vw, 44px); line-height: 1.08; } .create-activity-content { width: min(100%%, 760px); margin: 0 auto; display: flex; flex-direction: column; gap: 28px; } .create-section { background: #ffffff; border: 1px solid #dce7ef; border-radius: 28px; padding: 26px; box-sizing: border-box; } .create-section h2 { margin: 5px 0 20px; color: #003b6f; font-size: 24px; }
.activity-kids-list { display: flex; flex-wrap: wrap; gap: 14px; } .activity-kid-card { flex: 1 1 210px; display: flex; align-items: center; gap: 14px; padding: 16px; border: 2px solid #dce7ef; border-radius: 22px; background: #fff; color: #003b6f; font: inherit; text-align: left; cursor: pointer; transition: 0.2s ease; } .activity-kid-card.selected { border-color: #69cbb3; background: #effaf7; } .activity-kid-avatar { width: 52px; height: 52px; min-width: 52px; border-radius: 18px; display: flex; align-items: center; justify-content: center; background: #e6f6f1; color: #003b6f; font-size: 20px; font-weight: 800; } .activity-kid-info { display: flex; flex-direction: column; gap: 3px; } .activity-kid-info strong { font-size: 17px; } .activity-kid-info span { color: #7890a5; font-size: 14px; }
.activity-type-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .activity-type-option { display: flex; align-items: center; gap: 14px; padding: 18px; border: 2px solid #dce7ef; border-radius: 22px; background: #fff; color: #003b6f; font: inherit; text-align: left; cursor: pointer; transition: 0.2s ease; } .activity-type-option.selected { border-color: #69cbb3; background: #effaf7; } .activity-type-icon { width: 48px; height: 48px; min-width: 48px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: #fff0b8; color: #003b6f; font-size: 21px; font-weight: 800; } .activity-type-option > span:last-child { display: flex; flex-direction: column; gap: 3px; } .activity-type-option strong { font-size: 17px; } .activity-type-option small { color: #7890a5; font-size: 13px; } @media (max-width: 560px) { .activity-type-options { grid-template-columns: 1fr; } }
.interest-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; } .interest-option { min-height: 92px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border: 2px solid #dce7ef; border-radius: 20px; background: #fff; color: #003b6f; font: inherit; font-size: 24px; cursor: pointer; transition: 0.2s ease; } .interest-option span { font-size: 14px; font-weight: 700; } .interest-option:nth-child(1) { background: #effaf7; } .interest-option:nth-child(2) { background: #eef7ff; } .interest-option:nth-child(3) { background: #fff0f3; } .interest-option:nth-child(4) { background: #fff8d9; } .interest-option:nth-child(5) { background: #f2efff; } .interest-option:nth-child(6) { background: #fff3e8; } .interest-option.selected { border-color: #003b6f; box-shadow: 0 0 0 2px #003b6f; } .section-helper { margin: -10px 0 8px; color: #7890a5; line-height: 1.5; } @media (max-width: 560px) { .interest-options { grid-template-columns: repeat(2, 1fr); } }
.create-activity-next { width: 100%; min-height: 58px; margin-top: 4px; border: 0; border-radius: 999px; background: #003b6f; color: #fff; font: inherit; font-size: 17px; font-weight: 800; cursor: pointer; } .create-activity-screen .form-error { min-height: 20px; margin: 0; color: #a33b35; font-size: 14px; text-align: center; }
.study-materials-screen { min-height: 100vh; background: #fffcf6; color: #003b6f; padding: 32px 24px 70px; box-sizing: border-box; } .study-materials-header { width: min(100%, 760px); margin: 0 auto 38px; display: flex; align-items: flex-start; gap: 18px; } .study-materials-header h1 { margin: 4px 0 8px; color: #003b6f; font-size: clamp(30px, 5vw, 44px); line-height: 1.08; } .study-materials-header .section-helper { margin: 8px 0 0; } .study-materials-content { width: min(100%, 760px); margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.upload-material-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 34px 24px; background: #fff; border: 2px dashed #cbdde8; border-radius: 28px; } .upload-material-icon { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; border-radius: 22px; background: #e6f6f1; color: #003b6f; font-size: 30px; font-weight: 800; } .upload-material-card h2 { margin: 0 0 8px; color: #003b6f; font-size: 23px; } .upload-material-card p { max-width: 440px; margin: 0 0 20px; color: #7890a5; line-height: 1.5; } .upload-material-card .secondary-button { min-width: 180px; padding: 13px 22px; border: 0; border-radius: 999px; background: #eef7ff; color: #003b6f; font: inherit; font-weight: 800; cursor: pointer; } .upload-material-card small { margin-top: 12px; color: #8aa0b2; }
.study-material-file-list { display: flex; flex-direction: column; gap: 10px; } .study-material-file-item { padding: 13px 16px; background: #effaf7; border: 1px solid #d4eee7; border-radius: 16px; color: #003b6f; font-size: 14px; } .study-material-file-item.file-error { background: #fff0ee; border-color: #f3d2ce; color: #a33b35; } .study-topic-section { padding: 26px; background: #fff; border: 1px solid #dce7ef; border-radius: 28px; } .study-topic-divider { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; color: #8aa0b2; font-size: 12px; font-weight: 800; letter-spacing: 2px; } .study-topic-divider::before, .study-topic-divider::after { content: ""; flex: 1; height: 1px; background: #dce7ef; } .study-topic-section label { display: block; margin-bottom: 12px; color: #003b6f; font-size: 17px; } .study-topic-section textarea { width: 100%; min-height: 120px; padding: 16px 18px; border: 1px solid #d5e2ea; border-radius: 20px; box-sizing: border-box; resize: vertical; color: #003b6f; background: #fff; font: inherit; line-height: 1.5; outline: none; } .study-topic-section textarea:focus { border-color: #69cbb3; box-shadow: 0 0 0 3px rgba(105,203,179,.15); }
.create-my-activity-button { width: 100%; min-height: 60px; border: 0; border-radius: 999px; background: #003b6f; color: #fff; font: inherit; font-size: 17px; font-weight: 800; cursor: pointer; } .study-materials-screen .form-error { min-height: 20px; margin: 0; color: #a33b35; font-size: 14px; text-align: center; }
.custom-interest-wrap { margin-top: 22px; padding-top: 20px; border-top: 1px solid #e3ebf0; } .custom-interest-wrap label { display: block; margin-bottom: 9px; color: #003b6f; font-size: 16px; font-weight: 800; } .custom-interest-wrap input { width: 100%; padding: 15px 17px; border: 1px solid #d5e2ea; border-radius: 18px; box-sizing: border-box; background: #fff; color: #003b6f; font: inherit; outline: none; } .custom-interest-wrap input:focus { border-color: #69cbb3; box-shadow: 0 0 0 3px rgba(105,203,179,.15); } .custom-interest-wrap small { display: block; margin-top: 8px; color: #8aa0b2; font-size: 12px; line-height: 1.4; }
.quiz-length-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; } .quiz-length-option { padding: 16px 12px; border: 1px solid #d6e1eb; border-radius: 18px; background: #fff; color: #003b67; font: inherit; font-weight: 700; cursor: pointer; } .quiz-length-option.selected { background: #eaf8f4; border: 2px solid #45c7a5; } @media (max-width: 600px) { .quiz-length-options { grid-template-columns: 1fr; } }
.game-type-options { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 16px; } .game-type-option { padding: 16px 10px; border: 1px solid #d6e1eb; border-radius: 18px; background: #fff; color: #003b67; font: inherit; font-weight: 700; cursor: pointer; } .game-type-option.selected { background: #eaf8f4; border: 2px solid #45c7a5; } @media (max-width: 700px) { .game-type-options { grid-template-columns: repeat(2, 1fr); } .game-type-option:last-child { grid-column: 1 / -1; } }
.game-type-options { grid-template-columns: repeat(3, 1fr); } @media (max-width: 700px) { .game-type-options { grid-template-columns: repeat(2, 1fr); } .game-type-option:last-child { grid-column: auto; } }