:root { --goal-green:#087a59; --goal-deep:#064d3b; }
body { background:#f4faf6; }
.goals-hero {
    min-height:420px;
    background:radial-gradient(circle at 82% 45%,rgba(255,215,92,.42),transparent 21%),linear-gradient(125deg,#e8fbf1 0%,#cceede 56%,#f9efc9 100%);
}
.goals-hero::before { content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 58%,rgba(255,255,255,.34));pointer-events:none; }
.goals-hero__copy { position:relative;z-index:4; }
.goals-hero>div>span { color:var(--goal-green); }
.goals-hero h1 { color:#123f34; }
.goals-hero h1 em { color:var(--goal-green);text-shadow:0 2px 0 #fff; }
.goals-hero p { color:#527267; }
.goals-hero a { background:linear-gradient(135deg,#10966e,#087455);box-shadow:0 12px 24px rgba(8,116,85,.23); }
.determination-stage { position:relative;align-self:stretch;min-height:330px;isolation:isolate; }
.determination-stage img { position:absolute;z-index:3;right:-2%;bottom:-58px;width:min(630px,53vw);max-height:455px;object-fit:contain;object-position:center bottom;filter:drop-shadow(-3px 0 #fff) drop-shadow(3px 0 #fff) drop-shadow(0 -3px #fff) drop-shadow(0 3px #fff) drop-shadow(0 19px 18px rgba(4,66,47,.22));animation:determinedArrival .9s cubic-bezier(.16,.85,.28,1.1) both; }
.determination-ring { position:absolute;z-index:1;right:8%;top:9%;width:270px;height:270px;border:2px solid rgba(8,122,89,.28);border-radius:50%;box-shadow:0 0 0 18px rgba(255,255,255,.2),0 0 0 42px rgba(8,122,89,.07);animation:resolvePulse 2.4s ease-in-out infinite; }
.determination-lines { position:absolute;z-index:2;right:3%;top:18%;display:grid;gap:21px;transform:rotate(-13deg); }
.determination-lines i { display:block;width:145px;height:5px;border-radius:99px;background:linear-gradient(90deg,transparent,#f0b735);animation:speedLine 1.5s ease-in-out infinite; }
.determination-lines i:nth-child(2){width:95px;animation-delay:.18s}.determination-lines i:nth-child(3){width:125px;animation-delay:.36s}
.determination-stage strong,.determination-stage small { position:absolute;z-index:5;right:0;text-transform:uppercase;letter-spacing:.16em;transform:rotate(-5deg); }
.determination-stage strong { right:5%;top:12%;padding:8px 13px;background:#f0bd3d;color:#183e34;font:800 12px 'Be Vietnam Pro';box-shadow:5px 5px 0 rgba(8,91,67,.16); }
.determination-stage small { right:6%;top:24%;color:#17775c;font-size:9px;font-weight:800; }
@keyframes determinedArrival { from{opacity:0;transform:translate3d(90px,24px,0) scale(.91)} to{opacity:1;transform:none} }
@keyframes resolvePulse { 50%{transform:scale(1.05);opacity:.72} }
@keyframes speedLine { 0%,100%{transform:translateX(15px);opacity:.15}50%{transform:translateX(-15px);opacity:.85} }

.goal-grid { gap:34px 28px;padding:12px 7px; }
.goal-card {
    --paper:#eaf8f1;--paper-deep:#ccebdc;--pin:#db554c;--goal-accent:#128866;
    position:relative;
    overflow:visible;
    border:0;
    border-radius:3px 5px 4px 2px;
    background:linear-gradient(108deg,rgba(255,255,255,.42),transparent 42%),var(--paper);
    box-shadow:0 16px 25px rgba(31,65,53,.14),0 2px 3px rgba(31,65,53,.12);
    transform:rotate(-.55deg);
    transform-origin:50% 0;
    animation:paperBreathe 5.8s ease-in-out infinite;
}
.goal-card:nth-child(even){transform:rotate(.65deg);animation-delay:-2.1s}.goal-card:nth-child(3n){transform:rotate(-.25deg);animation-delay:-3.7s}
.goal-card::after { content:"";position:absolute;right:0;bottom:0;width:38px;height:38px;background:linear-gradient(135deg,transparent 49%,rgba(85,88,75,.08) 50%,var(--paper-deep) 52%);clip-path:polygon(100% 0,0 100%,100% 100%);pointer-events:none; }
.goal-card:hover { box-shadow:0 21px 32px rgba(31,65,53,.2);transform:rotate(0) translateY(-6px);animation-play-state:paused; }
.goal-pin { position:absolute;z-index:8;left:50%;top:-10px;width:20px;height:20px;border:4px solid rgba(255,255,255,.72);border-radius:50%;background:var(--pin);box-shadow:0 4px 6px rgba(44,42,35,.3);transform:translateX(-50%); }
.goal-pin::after { content:"";position:absolute;left:5px;top:14px;width:2px;height:10px;background:rgba(77,61,54,.35);transform:rotate(8deg); }
.goal-card--sky { --paper:#e8f4fc;--paper-deep:#c8e2f2;--goal-accent:#327ea9;--pin:#e2a832; }
.goal-card--sunshine { --paper:#fff5c9;--paper-deep:#eddda0;--goal-accent:#a87611;--pin:#df654b; }
.goal-card--coral { --paper:#ffebe5;--paper-deep:#f1cec5;--goal-accent:#bd5e4c;--pin:#4e91a7; }
.goal-card--lavender { --paper:#f0eafb;--paper-deep:#d9cdef;--goal-accent:#7356a2;--pin:#d49536; }
.goal-card--midnight { --paper:#263c4b;--paper-deep:#172a36;--goal-accent:#7cdec1;--pin:#f1bb3d;color:#eef7f4; }
.goal-card--midnight .card-body h3 a,.goal-card--midnight .motivation strong { color:#f2faf7; }
.goal-card--midnight .card-body>p,.goal-card--midnight .motivation a,.goal-card--midnight .motivation small,.goal-card--midnight .progress-copy { color:#bdd0ca; }
.goal-card .card-cover { border-radius:2px 4px 0 0; }
.goal-card .card-body { position:relative;background:transparent; }
.goal-card .progress i { background:linear-gradient(90deg,var(--goal-accent),#e0b83f); }
@keyframes paperBreathe { 0%,100%{translate:0 0}45%{translate:0 2px}55%{translate:1px 1px} }

/* Compact student notebook card */
.goal-card { min-height:0; }
.goal-card .card-body {
    padding:24px 20px 18px 45px;
    background-image:
        linear-gradient(90deg,transparent 0 27px,rgba(226,93,91,.34) 28px 29px,transparent 30px),
        repeating-linear-gradient(0deg,transparent 0 27px,rgba(74,139,184,.14) 28px 29px);
    background-position:0 0,0 13px;
}
.goal-paper-head { display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px; }
.goal-card .goal-sticker {
    position:static;
    width:38px;
    height:38px;
    border:3px solid rgba(255,255,255,.86);
    border-radius:11px;
    background:rgba(255,255,255,.64);
    box-shadow:0 3px 8px rgba(35,67,56,.1);
    font-size:1.15rem;
}
.goal-card .goal-type {
    position:static;
    padding:5px 9px;
    border:1px solid color-mix(in srgb,var(--goal-accent) 22%,transparent);
    background:rgba(255,255,255,.52);
    color:var(--goal-accent);
    font-size:.5rem;
    letter-spacing:.07em;
    text-transform:uppercase;
}
.goal-card .card-body h3 { margin:0 0 10px;font-size:clamp(1.15rem,1.8vw,1.45rem);line-height:1.25;letter-spacing:-.7px; }
.goal-card .card-body h3 a { display:block;color:var(--goal-accent);font-weight:800;text-decoration-thickness:2px;text-underline-offset:4px; }
.goal-card .card-body h3 a:hover { text-decoration:underline; }
.goal-card .card-body>p { min-height:43px;margin:0 0 13px;color:#596b64;font-size:.64rem;line-height:1.65; }
.goal-card .progress-copy { font-size:.54rem; }
.goal-card .progress { height:6px;margin-top:5px;background:rgba(255,255,255,.7); }
.goal-card .motivation { gap:4px;margin-top:12px;padding-top:10px;border-top:1px dashed rgba(47,92,76,.2); }
.goal-card .motivation strong { font-size:.57rem; }
.goal-card .motivation a,.goal-card .motivation small { font-size:.54rem; }
.goal-open { display:flex;margin-top:12px;padding-top:10px;border-top:1px solid rgba(47,92,76,.13);align-items:center;justify-content:space-between;color:var(--goal-accent);font-size:.57rem;font-weight:800; }
.goal-open span { display:grid;width:24px;height:24px;place-items:center;border-radius:50%;background:var(--goal-accent);color:#fff;font-size:.75rem;transition:.2s; }
.goal-open:hover span { transform:translateX(3px); }
.goal-card .card-admin { position:absolute;right:45px;bottom:18px;margin:0;transform:translateY(44px);opacity:0;transition:.2s; }
.goal-card:hover .card-admin,.goal-card:focus-within .card-admin { transform:none;opacity:1; }
.goal-card:has(.card-admin) .goal-open { padding-right:82px; }
.goal-card--midnight .card-body>p { color:#c0d1cb; }
.goal-card--midnight .goal-open { border-color:rgba(255,255,255,.15);color:#8be2c7; }

.goal-encouragement { margin-bottom:30px;padding:28px;border:1px solid #d8e9e1;border-radius:24px;background:linear-gradient(145deg,#fff,#f2faf6);box-shadow:0 15px 38px rgba(30,77,60,.07); }
.goal-encouragement .detail-heading { margin-bottom:18px; }
.encouragement-list { display:grid;gap:10px; }
.encouragement-empty { padding:24px;border:1px dashed #bcdccd;border-radius:15px;color:#71867d;font-size:.68rem;text-align:center; }
.encouragement-note { position:relative;display:grid;grid-template-columns:42px minmax(0,1fr) 28px;gap:11px;padding:13px;border-radius:16px;background:#fff;border:1px solid #e4eee9;box-shadow:0 5px 15px rgba(27,75,57,.035); }
.encouragement-avatar { display:grid;width:42px;height:42px;overflow:hidden;place-items:center;border:3px solid #fff;border-radius:14px;background:#dff3e9;color:#137556;font-size:.75rem;font-weight:800;box-shadow:0 3px 10px rgba(19,117,86,.12); }
.encouragement-avatar img { width:100%;height:100%;object-fit:cover; }
.encouragement-note header { display:flex;flex-wrap:wrap;gap:8px;align-items:baseline; }
.encouragement-note strong { color:#194b3b;font-size:.7rem; }
.encouragement-note time { color:#91a199;font-size:.5rem; }
.encouragement-note p { margin:5px 0 0;color:#51665e;font-size:.68rem;line-height:1.65;overflow-wrap:anywhere; }
.encouragement-note form button { width:27px;height:27px;padding:0;border:0;border-radius:50%;background:transparent;color:#9baba4;cursor:pointer;font-size:20px;line-height:1; }
.encouragement-note form button:hover { background:#fee9e7;color:#c95850; }
.encouragement-composer { margin-top:14px;padding:14px;border:1px solid #d7e9e0;border-radius:17px;background:#fff; }
.encouragement-composer>div { display:flex;gap:10px;align-items:flex-start; }
.encouragement-composer>div>span { display:grid;width:34px;height:34px;flex:0 0 34px;place-items:center;border-radius:11px;background:#e1f4eb;color:#13805e; }
.encouragement-composer textarea { width:100%;min-height:70px;padding:7px;border:0;outline:0;resize:vertical;color:#294d41;font:500 .7rem/1.65 'Be Vietnam Pro'; }
.encouragement-composer footer { display:flex;padding-top:10px;border-top:1px solid #edf2ef;align-items:center;justify-content:space-between; }
.encouragement-composer small { color:#95a49e;font-size:.52rem; }
.encouragement-composer button { padding:10px 14px;border:0;border-radius:11px;background:linear-gradient(135deg,#12936b,#087455);color:#fff;cursor:pointer;font:800 .62rem 'Be Vietnam Pro';box-shadow:0 8px 16px rgba(8,116,85,.18); }
.encouragement-composer button:hover { transform:translateY(-1px); }
.encouragement-login { display:block;margin-top:14px;padding:13px;border-radius:13px;background:#108764;color:#fff;font-size:.65rem;font-weight:700;text-align:center; }

.goal-color-picker { margin:0;padding:0;border:0; }
.goal-color-picker legend { margin-bottom:9px;color:#18243a;font-size:.68rem;font-weight:700; }
.goal-color-picker legend small { margin-left:5px;color:#727c8c;font-weight:400; }
.goal-color-picker>div { display:grid;grid-template-columns:repeat(6,1fr);gap:8px; }
.color-choice input { position:absolute;opacity:0;pointer-events:none; }
.color-choice span { display:grid;gap:6px;padding:9px 5px;border:2px solid transparent;border-radius:11px;color:#687588;cursor:pointer;font-size:9px;text-align:center;transition:.2s; }
.color-choice i { display:block;width:100%;height:31px;border-radius:7px;background:#eaf8f1;box-shadow:inset 0 0 0 1px rgba(25,60,48,.07); }
.color-choice--sky i{background:#e8f4fc}.color-choice--sunshine i{background:#fff5c9}.color-choice--coral i{background:#ffebe5}.color-choice--lavender i{background:#f0eafb}.color-choice--midnight i{background:#263c4b}
.color-choice input:checked+span { border-color:#15916c;background:#f0faf6;color:#11644c;font-weight:800;transform:translateY(-2px); }

@media(max-width:900px){.goals-hero{min-height:600px}.determination-stage{min-height:270px}.determination-stage img{right:auto;left:50%;bottom:-60px;width:min(610px,90vw);transform:translateX(-50%);animation:determinedArrivalMobile .9s cubic-bezier(.16,.85,.28,1.1) both}.determination-ring{right:50%;transform:translateX(50%)}.determination-stage strong{right:10%}.determination-stage small{right:9%}.goal-color-picker>div{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.goals-hero{min-height:565px}.determination-stage{min-height:235px}.determination-stage img{bottom:-42px;width:105vw;max-height:290px}.determination-ring{width:190px;height:190px}.determination-stage strong{right:2%;top:8%;font-size:9px}.determination-stage small{right:2%;top:22%;font-size:7px}.goal-grid{gap:28px}.goal-card{animation-duration:7s}.goal-color-picker>div{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.goal-encouragement{padding:18px 13px;border-radius:18px}.encouragement-note{grid-template-columns:37px minmax(0,1fr) 25px;padding:11px 9px}.encouragement-avatar{width:37px;height:37px}.encouragement-composer{padding:11px}.encouragement-composer button span{display:none}}
@media(max-width:620px){.goal-card .card-body{padding:22px 16px 16px 39px;background-image:linear-gradient(90deg,transparent 0 23px,rgba(226,93,91,.32) 24px 25px,transparent 26px),repeating-linear-gradient(0deg,transparent 0 27px,rgba(74,139,184,.14) 28px 29px)}.goal-card .card-admin{position:static;margin-top:10px;transform:none;opacity:1}.goal-card:has(.card-admin) .goal-open{padding-right:0}}
@media(prefers-reduced-motion:reduce){.determination-stage img,.determination-ring,.determination-lines i,.goal-card{animation:none}.goal-card:hover{transform:translateY(-4px)}}
@keyframes determinedArrivalMobile { from{opacity:0;transform:translate3d(-40%,24px,0) scale(.91)}to{opacity:1;transform:translateX(-50%) scale(1)} }