@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;600;700;800&display=swap");:root{--paper:#fff7ec;--cream:#fffdf8;--ink:#3a2e22;--soft:#8a7b6b;--line:#f0e2cc;--sunny:#ffb627;--coral:#ff6f61;--leaf:#3cb371;--sky:#39a0d6;--grape:#9b6bd6;--mint:#e7f7ef;--blush:#ffe6de;--shadow:0 14px 34px rgba(58,46,34,.11)}*{box-sizing:border-box}body,html{margin:0;padding:0;overflow-x:hidden;max-width:100%}body{background:var(--paper);color:var(--ink);font-family:Nunito,system-ui,sans-serif;-webkit-font-smoothing:antialiased}.disp{font-family:Fredoka,system-ui,sans-serif}::selection{background:var(--sunny);color:var(--ink)}a{color:inherit;text-decoration:none}button{font-family:inherit;cursor:pointer}.wrap{max-width:1080px;margin:0 auto;padding:0 20px}.row{display:flex;align-items:center;gap:10px}.grid{display:grid;grid-gap:24px;gap:24px;grid-template-columns:1fr}@media (min-width:640px){.grid{grid-template-columns:1fr 1fr}}@media (min-width:960px){.grid{grid-template-columns:1fr 1fr 1fr}}.surface{background:rgba(255,253,248,.86);border:2px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}header .wrap.row{height:auto!important;min-height:68px;max-width:100%;flex-wrap:nowrap;gap:10px;padding-top:8px;padding-bottom:8px}@media (max-width:640px){header .wrap.row{gap:6px;padding-left:12px;padding-right:12px}

  /* !important is required: Header.tsx sets these inline.
     必须用 !important：Header.tsx 用行内样式设定了这些。 */header .disp{font-size:15px!important;white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important;flex-shrink:0!important}header .wrap.row>a{flex-shrink:0!important;min-width:auto!important;gap:6px!important}header .btn{padding:8px 10px!important;font-size:13px!important;white-space:nowrap}}@media (max-width:359px){header .disp{display:none!important}}.hero-stage{position:relative;overflow:hidden;background:radial-gradient(circle at 10% 20%,rgba(60,179,113,.18),transparent 26%),radial-gradient(circle at 88% 28%,rgba(57,160,214,.17),transparent 24%),linear-gradient(180deg,#ffe9b8 0,var(--paper) 100%)}.hero-stage:before{content:"";inset:0;background-image:linear-gradient(hsla(0,0%,100%,.34) 1px,transparent 0),linear-gradient(90deg,hsla(0,0%,100%,.34) 1px,transparent 0);background-size:44px 44px;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.75),transparent);mask-image:linear-gradient(180deg,rgba(0,0,0,.75),transparent)}.hero-art-wall,.hero-stage:before{position:absolute;pointer-events:none}.hero-art-wall{inset:18px 0 auto 0;height:250px}.hero-art{position:absolute;width:clamp(96px,15vw,168px);aspect-ratio:4/5;border:8px solid #fff;border-radius:16px;box-shadow:0 18px 38px rgba(58,46,34,.16);opacity:.78}.hero-art.one{left:max(16px,calc(50% - 520px));top:22px;transform:rotate(-8deg);background:radial-gradient(circle at 24% 28%,var(--sunny) 0 13%,transparent 14%),linear-gradient(135deg,transparent 0 58%,rgba(60,179,113,.72) 59%),linear-gradient(45deg,#f7c9e2,#bfe7ff)}.hero-art.two{right:max(22px,calc(50% - 500px));top:8px;transform:rotate(7deg);background:radial-gradient(circle at 74% 24%,#fff 0 10%,transparent 11%),linear-gradient(130deg,rgba(255,111,97,.85) 0 40%,transparent 41%),repeating-linear-gradient(45deg,#ddf7ef 0 16px,#fff2b8 16px 32px)}.hero-art.three{left:max(96px,calc(50% - 360px));top:138px;transform:rotate(5deg);width:clamp(86px,12vw,128px);background:radial-gradient(circle at 50% 34%,rgba(155,107,214,.76) 0 18%,transparent 19%),linear-gradient(160deg,#ffe6de,#f5f8b8)}.trust-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-gap:12px;gap:12px;margin-top:34px}.trust-item{min-height:88px;padding:16px;border-radius:18px;background:rgba(255,253,248,.74);border:2px solid hsla(37,55%,87%,.9);text-align:left}.pill{gap:6px;padding:5px 12px;border-radius:999px;font-size:12px}.btn,.pill{display:inline-flex;align-items:center;font-weight:700}.btn{gap:8px;border:none;padding:12px 22px;border-radius:999px;font-size:15px}.btn-coral{background:var(--coral);color:#fff}.btn-leaf{background:var(--leaf);color:#fff}.btn-sky{background:var(--sky);color:#fff}.btn-ghost{background:var(--cream);color:var(--ink);border:2px solid var(--line)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn:hover{filter:saturate(1.04) brightness(.99);transform:translateY(-1px)}.input{width:100%;padding:12px 16px;border-radius:14px;background:var(--cream);border:2px solid var(--line);color:var(--ink);font-family:Nunito,sans-serif;font-weight:600;outline:none}.input:focus{border-color:var(--coral)}.label{font-family:Fredoka,sans-serif;font-weight:700;font-size:14px;display:block;margin-bottom:6px}.card{position:relative;background:var(--cream);border:2px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 10px 26px rgba(58,46,34,.08);transition:transform .25s ease,box-shadow .25s ease}.card:hover{transform:translateY(-4px) rotate(0deg)!important;box-shadow:0 18px 40px rgba(58,46,34,.16)}.card img{width:100%;display:block;border-bottom:2px solid var(--line)}.art-card-image{aspect-ratio:4/3;object-fit:cover;background:var(--line)}.card-body{padding:16px}.card-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}.tape{position:absolute;z-index:2;left:50%;transform:translateX(-50%) rotate(-3deg);top:-8px;width:80px;height:24px;border-radius:3px;opacity:.7}.clamp3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:10px 20px;border-radius:999px;font-weight:700;font-family:Fredoka,sans-serif;z-index:50}.modal-backdrop{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:rgba(58,46,34,.48);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal-panel{width:min(100%,560px);max-height:calc(100vh - 40px);overflow-y:auto;padding:24px;border:2px solid var(--line);border-radius:20px;background:var(--cream);box-shadow:0 24px 70px rgba(58,46,34,.28)}.btn-badge{min-height:44px;background:var(--grape);color:#fff}.icon-button{width:44px;height:44px;flex:0 0 44px;display:inline-grid;place-items:center;border:2px solid var(--line);border-radius:50%;background:var(--cream);color:var(--soft)}.teacher-action-stack{display:grid;justify-items:end;grid-gap:8px;gap:8px}.badge-award-modal{width:min(100%,680px)}.badge-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:10px;gap:10px;padding:0;border:0}.badge-picker legend{grid-column:1/-1}.badge-choice{min-height:64px;display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;grid-gap:10px;gap:10px;padding:10px 12px;border:2px solid var(--line);border-radius:16px;background:var(--cream);cursor:pointer;transition:border-color .2s ease,background .2s ease}.badge-choice:focus-within{outline:3px solid color-mix(in srgb,var(--sky) 45%,transparent);outline-offset:2px}.badge-choice.selected{border-color:var(--grape);background:color-mix(in srgb,var(--grape) 8%,var(--cream))}.badge-choice.unavailable{opacity:.52;cursor:not-allowed}.badge-choice input{width:18px;height:18px;accent-color:var(--grape)}.badge-choice small,.badge-choice strong{display:block}.badge-choice small{margin-top:2px;color:var(--soft)}.badge-mark{width:46px;height:46px;display:inline-grid;place-items:center;flex:0 0 46px;border-radius:15px;color:var(--ink);background:color-mix(in srgb,var(--sunny) 24%,var(--cream));border:2px solid color-mix(in srgb,var(--sunny) 40%,var(--line))}.badge-curious,.badge-observe{background:color-mix(in srgb,var(--sky) 18%,var(--cream));border-color:color-mix(in srgb,var(--sky) 35%,var(--line))}.badge-kind,.badge-share{background:color-mix(in srgb,var(--coral) 14%,var(--cream));border-color:color-mix(in srgb,var(--coral) 30%,var(--line))}.badge-focus,.badge-refine{background:color-mix(in srgb,var(--grape) 14%,var(--cream));border-color:color-mix(in srgb,var(--grape) 30%,var(--line))}.badge-experiment{background:color-mix(in srgb,var(--leaf) 14%,var(--cream));border-color:color-mix(in srgb,var(--leaf) 30%,var(--line))}.field-help{color:var(--soft);font-size:13px;line-height:1.5;margin:-2px 0 8px}.character-count{color:var(--soft);font-size:12px;text-align:right;margin:4px 0 0}.form-error{color:var(--coral);font-weight:800;margin:12px 0 0}.badge-definition-copy{padding:12px;border-radius:14px;background:color-mix(in srgb,var(--grape) 8%,var(--cream));line-height:1.55;font-size:14px}.modal-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:22px}.badge-confirm-card,.badge-preview{display:flex;align-items:center;gap:14px;padding:16px;border:2px solid color-mix(in srgb,var(--grape) 28%,var(--line));border-radius:18px;background:color-mix(in srgb,var(--grape) 8%,var(--cream))}.badge-preview span,.badge-preview strong{display:block}.badge-preview div>span{color:var(--soft);font-size:13px;margin-top:2px}.badge-confirm-list{display:grid;grid-gap:0;gap:0;margin:16px 0 0;border:2px solid var(--line);border-radius:16px;overflow:hidden}.badge-confirm-list>div{display:grid;grid-template-columns:140px minmax(0,1fr);grid-gap:14px;gap:14px;padding:12px 14px;background:var(--cream)}.badge-confirm-list>div+div{border-top:2px solid var(--line)}.badge-confirm-list dt{color:var(--soft);font-size:13px;font-weight:800}.badge-confirm-list dd{margin:0;line-height:1.55}.badge-success{display:grid;justify-items:center;grid-gap:12px;gap:12px;padding:38px 12px 18px;text-align:center}.badge-success>span{width:58px;height:58px;display:grid;place-items:center;border-radius:50%;color:#fff;background:var(--leaf)}.badge-success p{font-size:20px;margin:0}.badge-admin-history{margin-top:18px;padding-top:16px;border-top:2px solid var(--line)}.badge-history-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}.badge-history-row>span{display:inline-flex;align-items:center;gap:8px;font-weight:800}.badge-history-row button{min-height:40px;padding:6px 12px;border:2px solid color-mix(in srgb,var(--coral) 32%,var(--line));border-radius:999px;color:var(--coral);background:var(--cream);font-weight:800}.badge-evidence-section{margin-top:24px;padding:18px;border:2px solid color-mix(in srgb,var(--grape) 24%,var(--line));border-radius:20px;background:color-mix(in srgb,var(--grape) 6%,var(--cream))}.badge-section-icon{width:42px;height:42px;display:grid;place-items:center;flex:0 0 42px;border-radius:14px;color:var(--grape);background:color-mix(in srgb,var(--grape) 14%,var(--cream))}.badge-evidence-list{display:grid;grid-gap:10px;gap:10px;margin-top:16px}.badge-evidence-card{border:2px solid var(--line);border-radius:16px;background:var(--cream);overflow:hidden}.badge-evidence-card summary{min-height:64px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;grid-gap:12px;gap:12px;padding:10px 14px;cursor:pointer;list-style:none}.badge-evidence-card summary::-webkit-details-marker{display:none}.badge-evidence-card summary span,.badge-evidence-card summary strong{display:block}.badge-evidence-card summary span span{color:var(--soft);font-size:12px;margin-top:2px}.badge-evidence-card[open] summary{border-bottom:2px solid var(--line)}.badge-evidence-body{padding:16px}.badge-evidence-body>p:nth-child(3){display:flex;align-items:center;gap:6px}.badge-revoked-label{padding:4px 8px;border-radius:999px;color:var(--coral);background:color-mix(in srgb,var(--coral) 12%,var(--cream));font-size:12px;font-weight:800}.empty-gallery{display:grid;grid-template-columns:1fr;grid-gap:22px;gap:22px;align-items:center;padding:28px;margin-top:28px}.empty-frames{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:12px;gap:12px}.empty-frame{aspect-ratio:4/5;border:7px solid #fff;border-radius:14px;box-shadow:0 12px 22px rgba(58,46,34,.12);background:linear-gradient(140deg,var(--blush),#fff4b8)}.empty-frame:nth-child(2){transform:translateY(12px) rotate(4deg);background:linear-gradient(140deg,#dff4ff,var(--mint))}.empty-frame:nth-child(3){transform:rotate(-5deg);background:linear-gradient(140deg,#f0e5ff,#ffe3c0)}.upload-shell{display:grid;grid-template-columns:minmax(0,.95fr) minmax(320px,1fr);grid-gap:28px;gap:28px;align-items:start}.upload-drop{border-radius:20px;overflow:hidden;cursor:pointer;border:3px dashed var(--line);background:var(--cream)}.upload-drop,.upload-preview{display:block;min-height:430px}.upload-preview{width:100%;aspect-ratio:4/5;object-fit:cover}.upload-placeholder{min-height:430px}.upload-stepper{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:10px;gap:10px;margin:20px 0}.upload-step{padding:10px 12px;border-radius:14px;border:2px solid var(--line);background:rgba(255,253,248,.72);font-weight:800;font-size:13px}.auth-shell{display:grid;grid-template-columns:minmax(300px,420px) minmax(0,1fr);grid-gap:28px;gap:28px;align-items:stretch}.auth-art,.auth-panel{padding:28px}.auth-art{position:relative;overflow:hidden;min-height:420px;background:linear-gradient(140deg,rgba(255,182,39,.32),rgba(57,160,214,.18)),var(--cream)}.auth-art:after{content:"";position:absolute;right:-42px;bottom:-42px;width:210px;height:210px;border-radius:50%;background:rgba(255,111,97,.18)}.dashboard-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-gap:12px;gap:12px;margin-top:24px}.summary-cell{padding:16px;border-radius:16px;background:var(--cream);border:2px solid var(--line)}.review-card{transform:none!important}.review-card img{aspect-ratio:4/3;object-fit:cover}@media (prefers-reduced-motion:reduce){.card{transition:none}}.hide-sm{display:inline}@media (max-width:640px){.hide-sm{display:none}}@media (max-width:900px){.dashboard-summary,.trust-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.auth-shell,.upload-shell{grid-template-columns:1fr}.auth-art{min-height:280px}}@media (max-width:640px){.wrap{padding:0 16px}.hero-art-wall{opacity:.42}.dashboard-summary,.trust-strip,.upload-stepper{grid-template-columns:1fr}.empty-gallery{padding:20px}.upload-drop,.upload-placeholder,.upload-preview{min-height:280px}.btn{max-width:100%;justify-content:center}.badge-confirm-list>div,.badge-picker{grid-template-columns:1fr}.badge-confirm-list>div{gap:4px}.modal-actions .btn{width:100%}.teacher-action-stack{width:100%;justify-items:stretch}.teacher-action-stack>.btn{width:100%}}