:root { --deep: #0d4d39; --forest: #145b42; --green: #2e8058; --mint: #dbf0dd; --cream: #f8f7f0; --ink: #18372c; --muted: #718279; --line: #dce5dc; --orange: #f4b75c; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: "DM Sans", sans-serif; }
.app-shell { min-height: 100vh; display: flex; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 255px; background: var(--deep); color: #ecf7ed; padding: 34px 19px 24px; display: flex; flex-direction: column; z-index: 5; }
.brand { display: flex; align-items: center; gap: 10px; color: white; text-decoration: none; font-size: 20px; font-weight: 700; line-height: .76; letter-spacing: -.6px; padding: 0 11px 43px; }.brand i { font-family: Fraunces, serif; font-size: 13px; font-weight: 600; letter-spacing: -.2px; }.brand small { display:block; margin-top:7px; color:#9fc8aa; font-size:8px; font-family:"DM Sans",sans-serif; font-style:normal; font-weight:700; letter-spacing:1px; }.brand-mark { width:37px; height:37px; border-radius:12px 12px 12px 2px; background:#8cc96d; color:var(--deep); display:grid; place-items:center; font-family:Fraunces,serif; font-size:25px; transform:rotate(-7deg); }
.menu-label { color: #91baa1; letter-spacing: 1.3px; font-size: 10px; font-weight: 700; padding: 0 12px 9px; }.sidebar nav { display: grid; gap: 3px; }.nav-item { color: #d6eadd; text-decoration:none; display:flex; align-items:center; gap: 13px; border-radius: 10px; padding: 10px 12px; font-size: 14px; font-weight: 500; transition: .2s; }.nav-item:hover { background: #1b654b; }.nav-item.active { background:#e5f2de; color: var(--deep); font-weight: 700; box-shadow: 0 7px 18px #062e20a0; }.nav-icon { width: 18px; text-align:center; font-size: 18px; }.nav-spinner { margin-left:auto; display: none; }.sidebar-bottom { margin: auto 9px 0; color:#b8d7bc; font-size: 12px; line-height: 1.55; }.sidebar-bottom p { margin: 5px 0; }.leaf { color:#9ed77e; font-size:25px; }
.main-content { width: calc(100% - 255px); margin-left:255px; }.topbar { height:75px; padding: 0 55px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:#fcfcf8; }.crumb { color:#6b7f75; font-size:13px; }.crumb span { margin:0 9px; color:#a8b5ad; }.profile { display:flex; gap:11px; align-items:center; font-size:13px; font-weight:600; }.avatar { width:34px; height:34px; display:grid; place-items:center; background:var(--orange); color:#6b4520; border-radius:50%; font-weight:700; }.menu-toggle { display:none; }
.hero { min-height: 255px; background: #dcefd8; padding:46px 55px 37px; display:flex; overflow:hidden; justify-content:space-between; position:relative; }.eyebrow { text-transform:uppercase; color:#487b52; font-size:11px; font-weight:700; letter-spacing:1.3px; margin:3px 0 11px; }.hero h1 { font-family:Fraunces, serif; letter-spacing:-1.5px; font-size:38px; margin:0; line-height:1.08; color:#164932; }.intro { color:#4e6e5e; font-size:15px; max-width:550px; line-height:1.55; margin:13px 0; }.hero-art { width:260px; height:178px; align-self:center; position:relative; opacity:.92; }.sun { position:absolute; background:#f5c966; width:85px; height:85px; border-radius:50%; right:40px; top:2px; }.ground { position:absolute; width:360px; height:105px; border-radius:50% 50% 0 0; background:#75ac67; bottom:-67px; right:-30px; }.plant { position:absolute; font-size:118px; line-height:.4; color:#347c52; z-index:1; }.plant-one { bottom:23px; left:46px; transform:rotate(-18deg); }.plant-two { bottom:4px; right:30px; color:#286f49; transform:rotate(20deg); }
.workspace { max-width: 950px; margin: 38px auto 23px; padding:0 32px; }.section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:19px; }.section-heading h2 { font-family:Fraunces,serif; margin:0 0 5px; letter-spacing:-.5px; font-size:24px; }.section-heading p { font-size:13px; margin:0; color:var(--muted); }.progress { font-size:11px; color:#789185; }.progress b { margin-left:10px; font-size:19px; color:var(--green); }.progress em { font-style:normal; }.resource-form { background:#fff; border:1px solid var(--line); border-radius:15px; padding:27px; box-shadow:0 12px 28px #1d51330c; }.form-grid { display:grid; grid-template-columns: 1.3fr 1fr 1fr; gap:15px; }.resource-form label { color:#527064; display:grid; gap:7px; font-size:12px; font-weight:700; } input, textarea { border:1px solid #d5e0d6; color:var(--ink); border-radius:8px; font:inherit; padding:11px 12px; outline:none; transition:.2s; } input:focus, textarea:focus { border-color:#5ea177; box-shadow:0 0 0 3px #dcefd8; } textarea { min-height:90px; resize:vertical; }.text-label { margin-top:16px; }.dropzone { margin-top:19px; min-height:135px; border:1.5px dashed #9fbea8; background:#fbfdf9; border-radius:10px; align-content:center; justify-items:center; text-align:center; cursor:pointer; padding:15px; }.dropzone input { display:none; }.dropzone strong { font-size:13px; color:#426a53; }.dropzone u { color:var(--green); text-underline-offset:2px; }.dropzone small { color:#8a9d91; font-size:11px; font-weight:400; }.upload-circle { background:#d9efd9; width:31px; height:31px; border-radius:50%; display:grid; place-items:center; color:var(--green); font-size:20px; }.form-footer { display:flex; align-items:center; justify-content:space-between; margin-top:22px; }.form-footer p { margin:0; color:#8a9d91; font-size:11px; }.lock { color:var(--green); font-size:16px; }.primary-button { border:0; border-radius:8px; background:var(--green); color:#fff; padding:11px 17px; display:flex; align-items:center; gap:10px; font:700 13px "DM Sans"; cursor:pointer; box-shadow:0 8px 13px #286b4540; }.primary-button:hover { background:#196b46; }.primary-button span:last-child { font-size:17px; }.notice { max-width:886px; margin:20px auto -16px; padding:12px 16px; border-radius:8px; font-size:13px; }.notice.success { color:#125b36; background:#dff2e4; }.notice.error { color:#8c3e20; background:#fff0e9; }
.quick-links { max-width:950px; padding:0 32px 40px; margin:auto; display:grid; grid-template-columns:repeat(3, 1fr); gap:15px; }.quick-links article { padding:18px; background:#f0f5ed; border-radius:11px; }.card-icon { color:var(--green); font-size:18px; }.quick-links h3 { margin:9px 0 4px; font-size:13px; }.quick-links p { margin:0; color:#789185; font-size:12px; line-height:1.45; }
.collection { max-width:950px; padding:0 32px 46px; margin:auto; }.collection-header { display:flex; align-items:center; justify-content:space-between; margin:34px 0 16px; }.collection-header h2 { font-family:Fraunces,serif; font-size:23px; letter-spacing:-.5px; margin:0; }.collection-header span { color:#718279; font-size:12px; }.empty-state { background:#fff; border:1px dashed #b7cdbc; border-radius:13px; padding:37px 20px; text-align:center; }.empty-state > span { color:var(--green); font-size:31px; }.empty-state h3 { margin:7px 0 5px; font-size:15px; }.empty-state p { color:#7f9388; max-width:330px; font-size:13px; line-height:1.5; margin:0 auto; }.resource-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:15px; }.resource-card, .map-card, .exam-card { background:#fff; border:1px solid var(--line); border-radius:12px; padding:18px; box-shadow:0 5px 18px #1d51330a; }.item-top, .map-meta { display:flex; justify-content:space-between; align-items:flex-start; min-height:31px; }.resource-symbol { color:var(--green); background:#def0df; height:32px; width:32px; display:grid; place-items:center; border-radius:9px; font-size:18px; }.icon-button, .remove-card { border:0; width:27px; height:27px; border-radius:50%; background:#f3f6f2; color:#7b9083; font-size:21px; line-height:1; cursor:pointer; }.icon-button:hover, .remove-card:hover { background:#ffe9e1; color:#b64d2b; }.tag { display:inline-block; background:#eff5ec; color:#568064; padding:4px 8px; border-radius:20px; font-size:10px; font-weight:700; margin-top:11px; }.resource-card h3, .exam-card h3 { margin:9px 0 4px; font-size:15px; line-height:1.3; }.resource-card p { font-size:12px; color:#718279; margin:0 0 8px; }.content-preview { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; line-height:1.45; }.resource-card small, .map-card > small { display:block; color:#a0aea5; font-size:10px; margin-top:15px; }.file-link { color:var(--green); font-size:12px; font-weight:700; text-decoration:none; display:flex; justify-content:space-between; padding-top:8px; border-top:1px solid #eef2ed; margin-top:10px; }.file-link span { font-size:16px; }.reminder { border-left:2px solid #8ec579; padding-left:7px; color:#578263 !important; }.two-columns { grid-template-columns:1fr 1fr; margin-top:17px; }
.audio-list, .exam-list { display:grid; gap:12px; }.audio-card { background:white; border:1px solid var(--line); padding:15px 16px; border-radius:12px; display:flex; align-items:center; gap:14px; }.audio-info { flex:1; }.audio-info h3 { margin:0 0 3px; font-size:15px; }.audio-info p { margin:0 0 10px; color:#789185; font-size:12px; }.audio-card audio { width:100%; height:32px; }.map-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:15px; }.map-meta span { color:#62806b; font-size:11px; font-weight:700; }.mind-map { position:relative; min-height:170px; background:#f4f8f0; border-radius:10px; margin-top:12px; display:flex; flex-wrap:wrap; align-content:center; justify-content:space-around; gap:13px; padding:16px; overflow:hidden; }.mind-map:before { content:""; position:absolute; inset:50% 20px auto; border-top:1px dashed #a8c9a7; }.mind-map strong { z-index:1; width:92px; min-height:54px; display:grid; place-items:center; padding:8px; text-align:center; color:white; background:var(--green); border-radius:12px; font-size:13px; box-shadow:0 6px 13px #2e805636; }.mind-map span { z-index:1; max-width:110px; text-align:center; background:#fff; border:1px solid #d5e6d3; color:#527064; padding:7px 9px; border-radius:16px; font-size:11px; }.instructions { margin:8px 0 14px; padding:9px 10px; background:#f5f8f2; border-radius:7px; color:#698072; font-size:12px; }.question { padding:12px 0; border-top:1px solid #edf1ec; font-size:13px; }.question b { display:block; line-height:1.45; }.reveal-answer { border:0; padding:5px 0 0; background:none; color:var(--green); cursor:pointer; font:700 11px "DM Sans"; }.answer { display:none; color:#476e55; background:#e6f3e4; padding:8px 10px; border-radius:6px; font-size:12px; margin:7px 0 0; }.answer.visible { display:block; }.flashcard-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:15px; }.flashcard { perspective:1000px; min-height:186px; position:relative; cursor:pointer; border:0; background:none; padding:0; text-align:left; }.flashcard-inner { height:186px; transition:transform .55s; transform-style:preserve-3d; }.flashcard.flipped .flashcard-inner { transform:rotateY(180deg); }.flashcard-face { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:23px; border-radius:13px; backface-visibility:hidden; text-align:center; }.flashcard-front { color:#194f38; background:#e2f0dc; border:1px solid #cae2c9; }.flashcard-back { color:#fff; background:var(--green); transform:rotateY(180deg); }.flashcard-face span { text-transform:uppercase; font-size:9px; letter-spacing:1px; opacity:.8; }.flashcard-face strong { font-family:Fraunces,serif; font-size:21px; line-height:1.2; margin:11px 0; }.flashcard-face small { font-size:10px; opacity:.8; }.remove-card { position:absolute; right:9px; top:9px; z-index:2; background:#fffdfc; }
.spinner { width:13px; height:13px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .6s linear infinite; }.button-spinner { display:none; }.page-loader { position:fixed; inset:0; z-index:10; display:flex; align-items:center; justify-content:center; gap:12px; background:#0d4d39e8; color:white; font-weight:600; opacity:0; visibility:hidden; transition:.2s; }.page-loader.show { opacity:1; visibility:visible; }.spinner-large { width:28px; height:28px; border-width:3px; color:#a5da89; }.loading .button-spinner { display:inline-block; } @keyframes spin { to { transform:rotate(360deg); } }
@media (max-width: 780px) { .sidebar { transform:translateX(-100%); transition:.25s; }.sidebar.open { transform:translateX(0); }.main-content { margin-left:0; width:100%; }.topbar { padding:0 22px; }.menu-toggle { display:block; border:0; background:none; font-size:22px; color:var(--deep); }.profile span { display:none; }.hero { padding:38px 25px; min-height:230px; }.hero h1 { font-size:31px; }.hero-art { display:none; }.workspace, .quick-links, .collection { padding-left:20px; padding-right:20px; }.form-grid, .quick-links, .resource-grid, .flashcard-grid, .map-grid { grid-template-columns:1fr; }.section-heading { align-items:start; gap:12px; }.progress { white-space:nowrap; }.form-footer { gap:14px; }.form-footer p { display:none; }.audio-card { align-items:flex-start; }.audio-card .resource-symbol { flex:0 0 auto; } }