@import url("role-portal.css");

:root{
  --bg:#f4efe7;--paper:#fffdfa;--paper2:#faf6f0;--ink:#1d1712;--muted:#776d63;--line:#e5dbce;
  --clay:#8b4028;--clay2:#b7653e;--wine:#492117;--wine2:#6e301e;--gold:#d3a04a;--gold2:#efce87;
  --green:#4c735c;--blue:#5b7484;--nav:#17110e;--shadow:0 16px 44px rgba(60,40,26,.085);
  --r:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;background:var(--bg);color:var(--ink)}
a{text-decoration:none;color:inherit}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
.container{width:min(1280px,calc(100% - 48px));margin:auto}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.btn{display:inline-flex;align-items:center;justify-content:center;border:0;padding:11px 16px;border-radius:13px;font-weight:850;gap:7px}
.btn.primary{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#21150d}
.btn.dark{background:var(--wine);color:#fff}
.btn.ghost{background:#fff;border:1px solid var(--line);color:var(--ink)}
.btn.soft{background:#efe6d9;color:#6f3b25}
.muted{color:var(--muted)}
.small{font-size: 15px}
.tiny{font-size: 18px}
.badge{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:999px;background:#f0e3ce;color:#7a432c;font-size: 16px;font-weight:850}
.badge.green{background:#deeadf;color:#42664e}
.badge.dark{background:#392016;color:#f3d9b7}
.page{padding:32px 0 94px}
.page-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:22px}
.page-head h1{font-size: 46px;margin:0 0 6px;letter-spacing:-.02em}
.page-head p{margin:0;color:var(--muted)}
.section-title{display:flex;align-items:end;justify-content:space-between;gap:16px;margin:30px 0 14px}
.section-title h2{font-size: 32px;margin:0}.section-title p{font-size: 18px;color:var(--muted);margin:5px 0 0}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.split{display:grid;grid-template-columns:1.7fr 1fr;gap:20px}
.list-card{padding:18px}
.sep{height:1px;background:var(--line);margin:18px 0}
.inline{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.right{margin-left:auto}

/* Student top navigation */
.student-nav{position:sticky;top:0;z-index:100;background:rgba(255,253,250,.9);backdrop-filter:blur(18px);border-bottom:1px solid rgba(215,201,185,.8)}
.student-nav .inner{height:76px;display:flex;align-items:center;gap:22px}
.logo{font-size: 30px;font-weight:950;white-space:nowrap}.logo span{color:var(--clay)}
.student-links{display:flex;align-items:center;gap:4px;flex:1;margin-left:14px}
.student-links a{padding:10px 12px;border-radius:12px;font-size: 20px;color:#645a50}
.student-links a.active,.student-links a:hover{background:#efe5d8;color:#6f321f;font-weight:900}
.nav-user{display:flex;align-items:center;gap:9px}.avatar-sm{width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,#b25f3c,#6e2f1e);color:#fff;display:grid;place-items:center;font-weight:900}
.icon-btn{width:38px;height:38px;border-radius:12px;border:1px solid var(--line);background:#fff}

/* Floating ten-level panel */
.level-float{position:fixed;right:22px;bottom:22px;z-index:80;width:234px;padding:17px;border-radius:22px;background:linear-gradient(145deg,#2a160f,#4b2418);color:#f5e4ce;border:1px solid rgba(255,255,255,.12);box-shadow:0 25px 65px rgba(34,19,12,.28)}
.level-float .head{display:flex;justify-content:space-between}.level-float b{color:#efc778}
.track{height:8px;border-radius:999px;background:#5b463a;overflow:hidden;margin:12px 0}.track i{display:block;height:100%;background:linear-gradient(90deg,#c58a3b,#efce82);width:46%}
.level-float .foot{display:flex;justify-content:space-between;font-size: 18px;color:#cbbdaf;margin-bottom:10px}.level-float a{font-size: 18px;color:#efc87b;font-weight:900}

/* homepage */
.landing{min-height:100vh;color:#f7efe4;background:
 radial-gradient(circle at 86% 8%,rgba(176,66,34,.34),transparent 24%),
 radial-gradient(circle at 12% 33%,rgba(215,166,78,.13),transparent 22%),
 linear-gradient(135deg,#0d1114,#17100d 57%,#35130a)}
.landing .top{height:88px;display:flex;align-items:center;gap:25px}.landing .links{display:flex;gap:25px;margin-left:auto;color:#c8bdb2;font-size: 20px}
.home-hero{display:grid;grid-template-columns:1.25fr .75fr;gap:60px;align-items:center;padding:76px 0 105px}
.eyebrow{font-size: 16px;letter-spacing:.18em;color:#efc778;font-weight:900}
.home-hero h1{font-size: 102px;line-height:1.12;margin:20px 0 24px;letter-spacing:-.045em}.home-hero h1 span{color:#e3b15a}
.home-hero p{color:#c8bdb3;font-size: 27px;line-height:1.9;max-width:740px}
.orb{width:380px;height:380px;border-radius:50%;display:grid;place-items:center;margin:auto;background:radial-gradient(circle at 40% 30%,#bf6040,#702a1c 52%,#220d08 78%,#080707);box-shadow:0 40px 110px rgba(188,68,35,.3);font-family:serif;color:#efc57c;font-size: 158px}
.home-section{padding:60px 0}.home-section h2{font-size: 57px;margin:10px 0}.home-section p{color:#bcb0a5;line-height:1.8}
.portal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px}
.portal{position:relative;min-height:260px;padding:24px;border:1px solid rgba(255,255,255,.11);border-radius:25px;background:linear-gradient(155deg,rgba(255,255,255,.06),rgba(255,255,255,.015))}
.portal h3{font-size: 30px;margin:28px 0 7px}.portal p{font-size: 20px}.portal .go{position:absolute;bottom:22px;color:#edc575;font-weight:900}

/* login */
.login-page{min-height:100vh;display:grid;grid-template-columns:1.15fr .85fr;background:linear-gradient(135deg,#19110d,#3d1b12)}
.login-art{padding:70px;color:#f6ebdd;display:flex;flex-direction:column;justify-content:center}.login-art h1{font-size: 81px;margin:14px 0}.login-art p{color:#c6b8ab;line-height:1.8}
.login-panel{background:#f6f0e8;padding:60px;display:flex;align-items:center}.login-box{max-width:430px;width:100%;margin:auto}.login-box input,.login-box select{width:100%;padding:14px 15px;border:1px solid var(--line);border-radius:13px;background:#fff;margin-top:12px}

/* student dashboard */
.growth-hero{padding:30px 34px;border-radius:28px;background:linear-gradient(135deg,#2d180f,#592a1b);color:#f7e9d6;position:relative;overflow:hidden}
.growth-hero:after{content:"";position:absolute;width:350px;height:350px;border:1px solid rgba(239,201,122,.15);border-radius:50%;right:-150px;top:-190px}
.growth-hero h2{font-size: 50px;margin:10px 0}.growth-hero p{color:#c8b9aa}
.levelbar{display:grid;grid-template-columns:repeat(10,1fr);gap:9px;margin-top:25px}.levelbar i{height:11px;border-radius:999px;background:#59463b}.levelbar i.on{background:linear-gradient(90deg,#c78d3d,#efca7a)}
.metric{padding:20px}.metric span{font-weight:900;color:var(--clay)}.metric strong{display:block;font-size: 44px;margin:7px 0}.metric small{color:var(--muted)}
.task-row{display:grid;grid-template-columns:58px 1fr auto;align-items:center;padding:16px 18px;margin-bottom:10px}.task-row .tid{font-weight:950;color:var(--clay)}.task-row small{display:block;color:var(--muted);margin-top:4px}.status{padding:7px 10px;border-radius:999px;background:#f0e3ca;font-size: 18px}.status.ok{background:#dfeade;color:#41634b}
.pet-card{padding:22px;background:linear-gradient(145deg,#3b2016,#24130e);color:#f2dcbf}.pet-orb{width:118px;height:118px;margin:20px auto;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 40% 30%,#b75e3c,#63281b 60%,#27100b);font-family:serif;color:#efc779;font-size: 57px}

/* Gallery + pagination */
.gallery-hero{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:30px;border-radius:28px;background:linear-gradient(125deg,#f0dfc8,#fffaf3);border:1px solid #e4d3bd}
.filters{display:flex;gap:8px;flex-wrap:wrap}.chip{padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size: 16px}.chip.active{background:var(--wine);color:#fff;border-color:var(--wine)}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}
.student-card,.art-card{overflow:hidden}
.art-cover{height:185px;padding:18px;display:flex;align-items:flex-end;color:#fff;background:linear-gradient(135deg,#dec8a7,#945d45);position:relative}
.art-cover:after{content:"作品";position:absolute;right:18px;top:16px;font-size: 51px;font-family:serif;color:rgba(255,255,255,.46)}
.card-body{padding:17px}.card-body h3{margin:0 0 7px}.card-meta{display:flex;justify-content:space-between;align-items:center}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.tags span{font-size: 18px;padding:5px 8px;border-radius:999px;background:#f0e7dc;color:#6a5d52}
.pagination{display:flex;justify-content:center;align-items:center;gap:7px;margin-top:28px}.pagination a,.pagination button{min-width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;font-size: 18px}.pagination .active{background:var(--wine);color:#fff;border-color:var(--wine)}

/* public profile */
.profile-cover{min-height:238px;border-radius:30px;background:linear-gradient(135deg,#402117,#823c25);color:#fff;padding:34px;display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:end}
.avatar-big{width:108px;height:108px;border-radius:28px;background:linear-gradient(145deg,#d0875d,#76321f);display:grid;place-items:center;color:#fff;font-size: 56px;font-weight:950;border:4px solid rgba(255,255,255,.15)}
.profile-cover h1{margin:0 0 5px}.profile-cover p{margin:0;color:#d8c9bb}.profile-kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.profile-kpi div{min-width:90px;padding:13px;border:1px solid rgba(255,255,255,.13);border-radius:15px;background:rgba(255,255,255,.05);text-align:center}.profile-kpi b{font-size: 33px;display:block}
.tabbar{display:flex;gap:5px;padding:6px;background:#eee4d8;border-radius:15px;width:max-content;max-width:100%;overflow:auto}.tabbar a{padding:9px 13px;border-radius:10px;font-size: 18px;white-space:nowrap}.tabbar a.active{background:#fff;font-weight:900;color:#6f3823}
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.work-tile{height:160px;border-radius:17px;background:linear-gradient(135deg,#d5bea0,#8e563f);padding:16px;display:flex;align-items:flex-end;color:#fff;font-weight:900}
.message-box{padding:20px}.message{padding:12px 0;border-bottom:1px solid var(--line)}.message:last-child{border-bottom:0}.message p{margin:5px 0}
textarea{width:100%;min-height:88px;border:1px solid var(--line);border-radius:13px;padding:11px;background:#fbf8f3;resize:vertical}

/* archive */
.archive-tabs{display:flex;gap:6px;overflow:auto;padding-bottom:4px;margin-bottom:18px}.archive-tabs a{white-space:nowrap;padding:9px 12px;border-radius:11px;color:#675d53;font-size: 18px}.archive-tabs a.active{background:var(--wine);color:#fff;font-weight:900}
.archive-hero{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;padding:27px}.privacy-pills{display:flex;gap:6px;flex-wrap:wrap}.privacy-pills span{font-size: 18px;padding:5px 8px;border-radius:999px;background:#eee5da;color:#675a4e}
.result-card{padding:18px;min-height:155px}.result-card .glyph{font-size: 62px;font-family:serif;color:var(--clay);font-weight:900}.result-card b{display:block;margin:6px 0}.result-card p{font-size: 18px;line-height:1.65;color:var(--muted)}
.timeline{padding:22px}.tl{border-left:2px solid #e0d4c7;padding-left:20px;margin-left:7px}.tl-item{position:relative;padding-bottom:22px}.tl-item:before{content:"";width:10px;height:10px;border-radius:50%;background:var(--clay);border:3px solid #faf5ee;position:absolute;left:-27px;top:4px}
.info-card{padding:20px}.photo-slot{height:240px;border-radius:19px;border:1px dashed #ccb8a4;background:#fbf5ee;display:grid;place-items:center;color:#8e7b6b;text-align:center}
.reward-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.reward{padding:17px;border-radius:17px;background:#f0e7da}.reward b{display:block;color:#75402a}
.switch-row{display:flex;justify-content:space-between;align-items:center;padding:15px 0;border-bottom:1px solid var(--line)}.switch{width:44px;height:24px;border-radius:999px;background:#d5c8ba;position:relative}.switch.on{background:#6f8c75}.switch i{position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:3px;left:3px}.switch.on i{left:23px}

/* level center */
.level-map{display:grid;grid-template-columns:repeat(10,1fr);gap:9px}.lv{padding:17px 7px;border-radius:16px;text-align:center;background:#eae1d5}.lv.on{background:var(--wine);color:#f4ddbd}.lv b{display:block;font-size: 30px}.lv small{font-size: 18px}
.rule-row{display:grid;grid-template-columns:58px 1.4fr 1fr 1fr auto;gap:10px;align-items:center;padding:17px;margin-top:9px}
.level-detail-hero{padding:28px;background:linear-gradient(135deg,#f0e2cd,#fff9f0);border-radius:27px;border:1px solid #e1d0ba}
.task-detail{display:grid;grid-template-columns:1.4fr .8fr;gap:20px}.evidence{padding:20px}.evidence-box{height:220px;border-radius:18px;background:linear-gradient(135deg,#30231d,#82503a);display:grid;place-items:center;color:#efc77d;font-size: 45px;font-family:serif}

/* workshops */
.feature-hero{padding:32px;border-radius:28px;background:linear-gradient(135deg,#222526,#50392e);color:#fff}.feature-hero h1{font-size: 50px}.tool-card{padding:21px;min-height:170px}.tool-icon{width:43px;height:43px;border-radius:13px;background:#f0e2cd;color:#89452c;display:grid;place-items:center;font-weight:900}
.stage-banner{padding:32px;border-radius:28px;background:linear-gradient(120deg,#4b1e15,#843921);color:#fff}.event-card{overflow:hidden}.event-cover{height:150px;background:linear-gradient(135deg,#342822,#985943);display:grid;place-items:center;color:#efc77d;font-family:serif;font-size: 48px}.event-body{padding:18px}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.step{padding:15px;border-radius:15px;background:#eee5da;text-align:center}.step.active{background:#f0dfc4;color:#6e3a25;font-weight:900}

/* Other roles left navigation */
.role-shell{display:grid;grid-template-columns:230px 1fr;min-height:100vh}.side{position:sticky;top:0;height:100vh;background:#17120f;color:#eadfd2;padding:26px 18px}.side.blue{background:#111920}.side h2{font-size: 27px;margin:0 0 5px}.side small{color:#92867c}
.side-links{margin-top:25px}.side-links a{display:block;padding:12px 13px;border-radius:12px;color:#b7aca2;font-size: 20px;margin:3px 0}.side-links a.active{background:#4a2619;color:#f3dbbb;font-weight:900}.side.blue .side-links a.active{background:#243845;color:#e8f0f4}
.role-main{padding:30px 36px}.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.kpi{padding:18px}.kpi strong{font-size: 42px;display:block;margin-top:4px}
.table{overflow:hidden}.thead,.tr{display:grid;grid-template-columns:1.05fr 1.55fr 1fr .9fr .8fr;gap:10px;padding:13px 16px;align-items:center}.thead{background:#eee6dc;color:#75695f;font-size: 18px}.tr{border-top:1px solid #ede3d8;font-size: 18px}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.field label{display:block;font-size: 18px;color:var(--muted);margin-bottom:6px}.field input,.field select,.field textarea{width:100%;padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff}
.reset-guidance{margin-bottom:16px;background:#f1f7fb}.reset-guidance p{margin:7px 0 0;color:var(--muted);line-height:1.6}.reset-password-result{margin-top:18px;background:#fff7df}.reset-password-result p{margin:8px 0;color:var(--muted)}.reset-password-result code{display:inline-block;margin:5px 12px 5px 0;padding:10px 13px;border-radius:10px;background:#fff;color:#43291e;font-size:18px;font-weight:900;letter-spacing:.05em}.reset-request-empty{margin:0;padding:20px 16px;color:var(--muted)}
.chart{height:230px;padding:22px;display:flex;align-items:end;gap:12px}.bar{flex:1;background:linear-gradient(#375b6a,#8cafbd);border-radius:8px 8px 3px 3px;min-height:35px}

/* footer */
.footer{padding:40px 0 90px;color:#887c70;font-size: 18px;text-align:center}

@media(max-width:1080px){
  .student-links{overflow:auto}.student-nav .inner{height:auto;min-height:76px;padding:10px 0}
  .home-hero,.split,.task-detail{grid-template-columns:1fr}.portal-grid,.gallery-grid,.grid4,.kpis{grid-template-columns:repeat(2,1fr)}
  .level-float{display:none}.role-shell{grid-template-columns:1fr}.side{display:none}.login-page{grid-template-columns:1fr}.login-art{display:none}
  .profile-cover,.archive-hero{grid-template-columns:1fr}.level-map{grid-template-columns:repeat(5,1fr)}
}
@media(max-width:720px){
  .container{width:min(100% - 28px,1280px)}.gallery-grid,.grid2,.grid3,.grid4,.portal-grid,.kpis,.reward-grid,.work-grid{grid-template-columns:1fr}
  .page-head,.gallery-hero{align-items:flex-start;flex-direction:column}.home-hero h1{font-size: 69px}.orb{width:285px;height:285px}
  .profile-kpi{grid-template-columns:repeat(3,1fr)}.rule-row{grid-template-columns:48px 1fr}.rule-row>*:nth-child(n+3){display:none}.role-main{padding:22px}
}

/* =========================================
   儿童友好设计系统（Kids Design System）
   摒弃冷硬边框与深色背景，用圆润轻盈的视觉风格。
   在 main.kids-page 内启用，不影响既有页面。
   ========================================= */

:root{
  --kids-bg:#F8F1E3;
  --kids-card:#FFFFFF;
  --kids-text:#334155;
  --kids-text-sub:#94A3B8;
  --kids-blue:#7DD3FC;
  --kids-blue-deep:#0284C7;
  --kids-green:#6EE7B7;
  --kids-green-deep:#059669;
  --kids-yellow:#FDE047;
  --kids-yellow-deep:#D97706;
  --kids-pink:#FDA4AF;
  --kids-purple:#C4B5FD;
  --kids-orange:#FB923C;
  --kids-radius-lg:20px;
  --kids-radius-md:12px;
  --kids-shadow:0 8px 24px rgba(149,157,165,.08);
  --kids-shadow-hover:0 12px 32px rgba(149,157,165,.12);
}

.kids-page{
  background:var(--kids-bg);
  color:var(--kids-text);
  font-family:'PingFang SC','Microsoft YaHei','Comic Sans MS',sans-serif;
  margin:0;
  padding:24px;
  min-height:calc(100vh - 76px);
}
.kids-container{max-width:1200px;margin:0 auto}

/* 通用卡片 */
.kids-card{
  background:var(--kids-card);
  border-radius:var(--kids-radius-lg);
  box-shadow:var(--kids-shadow);
  padding:24px;
  border:2px solid transparent;
  transition:all .3s ease;
}
.kids-card:hover{
  transform:translateY(-4px);
  border-color:var(--kids-blue);
  box-shadow:var(--kids-shadow-hover);
}

/* 按钮 */
.btn-kids-primary{
  background:var(--kids-green);
  color:#064E3B;
  border:none;
  border-radius:50px;
  padding:12px 24px;
  font-size: 21px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(110,231,183,.4);
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  transition:all .2s;
  font-family:inherit;
}
.btn-kids-primary:hover{background:var(--kids-green-deep);color:#fff;transform:translateY(-2px);box-shadow:0 8px 20px rgba(16,185,129,.4)}
.btn-kids-ghost{
  background:#fff;
  color:var(--kids-text);
  border:1px solid #E5DBC7;
  border-radius:50px;
  padding:10px 20px;
  font-size: 20px;
  font-weight:700;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
  text-decoration:none;
  font-family:inherit;
}
.btn-kids-ghost:hover{border-color:var(--kids-blue);color:var(--kids-blue-deep)}

/* 标签 */
.kids-tag{display:inline-flex;padding:4px 12px;border-radius:999px;font-size: 16px;font-weight:700;align-items:center;gap:4px}
.kids-tag-blue{background:rgba(125,211,252,.25);color:#075985}
.kids-tag-green{background:rgba(110,231,183,.3);color:#047857}
.kids-tag-yellow{background:rgba(253,224,71,.3);color:#92400E}
.kids-tag-pink{background:rgba(253,164,175,.25);color:#BE123C}
.kids-tag-purple{background:rgba(196,181,253,.3);color:#5B21B6}

/* 数字统计 */
.kids-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0 20px}
.kids-stat{text-align:center;padding:8px;border-radius:12px;background:#F5EBD6}
.kids-stat-value{font-size: 39px;font-weight:800;margin:0;line-height:1.1}
.kids-stat-label{font-size: 18px;color:var(--kids-text-sub);margin:4px 0 0}

/* 头像 */
.kids-avatar{
  width:96px;height:96px;border-radius:50%;
  background:linear-gradient(135deg,#FED7AA,#FB923C);
  display:grid;place-items:center;color:#fff;font-size: 57px;font-weight:900;
  margin:0 auto 12px;box-shadow:0 6px 16px rgba(251,146,60,.3);border:4px solid #fff;
}
.kids-avatar.lg{width:110px;height:110px;font-size: 63px}

/* 等级徽章 */
.kids-level-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px;border-radius:999px;
  background:linear-gradient(135deg,#FEF3C7,#FDE68A);
  color:#92400E;font-size: 18px;font-weight:800;
  box-shadow:0 2px 8px rgba(245,158,11,.2);
}

/* 宠物 */
.kids-pet-orb{
  width:74px;height:74px;border-radius:50%;margin:0 auto 8px;
  background:radial-gradient(circle at 35% 30%,#FCD34D,#F59E0B 50%,#B45309 100%);
  display:grid;place-items:center;font-family:serif;color:#fff;font-size: 45px;font-weight:900;
  box-shadow:0 6px 18px rgba(245,158,11,.4);border:3px solid #fff;
}

/* 布局 */
.kids-bento{display:grid;gap:20px;margin-bottom:20px}
.kids-bento-hero{grid-template-columns:1fr 2fr}
.kids-bento-dims{grid-template-columns:repeat(4,1fr)}
.kids-bento-mid{grid-template-columns:1.3fr 1fr}
.kids-bento-bottom{grid-template-columns:1fr 1fr 1fr}
.kids-stack{display:grid;grid-template-rows:auto 1fr;gap:20px;min-width:0}
.kids-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

/* 快捷入口 */
.kids-quick{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:20px 14px;text-decoration:none;color:inherit;gap:4px;
}
.kids-quick-icon{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;font-size: 36px;margin-bottom:6px}
.kids-quick b{font-size: 21px;font-weight:800}
.kids-quick small{font-size: 18px;color:var(--kids-text-sub)}

/* 闪光时刻 */
.kids-highlight-row{
  display:flex;align-items:center;gap:14px;
  background:linear-gradient(135deg,#F8FAFC,#FEF3C7);
  border-radius:14px;padding:14px;
}
.kids-highlight-cover{
  width:60px;height:60px;border-radius:12px;
  background:linear-gradient(135deg,#C4B5FD,#8B5CF6);
  display:grid;place-items:center;font-size: 42px;flex-shrink:0;
  box-shadow:0 4px 12px rgba(139,92,246,.25);
}
.kids-highlight-title{font-size: 21px;font-weight:800;margin:0 0 4px}
.kids-highlight-meta{font-size: 18px;color:#475569;margin:0;line-height:1.6}

/* 维度卡 */
.kids-dim{
  display:block;text-align:center;padding:22px 14px;
  cursor:pointer;text-decoration:none;color:inherit;
  border:0;width:100%;font-family:inherit;
}
.kids-dim-glyph{
  width:54px;height:54px;margin:0 auto 10px;border-radius:16px;
  display:grid;place-items:center;font-family:serif;font-size: 33px;font-weight:900;color:#fff;
}
.kids-dim-glyph.learn{background:linear-gradient(135deg,#7DD3FC,#0EA5E9)}
.kids-dim-glyph.create{background:linear-gradient(135deg,#C4B5FD,#8B5CF6)}
.kids-dim-glyph.perform{background:linear-gradient(135deg,#FDA4AF,#F43F5E)}
.kids-dim-glyph.share{background:linear-gradient(135deg,#6EE7B7,#10B981)}
.kids-dim-value{font-size: 33px;font-weight:800;color:var(--kids-text);margin:0}
.kids-dim-label{font-size: 18px;color:var(--kids-text-sub);margin:2px 0 10px}

/* 进度条 */
.kids-progress{height:10px;border-radius:999px;background:#E5DBC7;overflow:hidden}
.kids-progress>i{display:block;height:100%;background:linear-gradient(90deg,var(--kids-blue),var(--kids-green));border-radius:999px;transition:width .6s ease}

/* 等级格子 */
.kids-level-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:8px;margin-top:8px}
.kids-lv-tile{
  padding:12px 4px;text-align:center;border-radius:12px;
  background:#EFE3CC;color:#94A3B8;border:0;cursor:pointer;
  transition:all .2s;font-family:inherit;
}
.kids-lv-tile:hover{transform:translateY(-2px)}
.kids-lv-tile b{display:block;font-size: 27px;font-weight:900;margin-bottom:2px}
.kids-lv-tile small{font-size: 18px}
.kids-lv-tile.done{background:linear-gradient(135deg,#6EE7B7,#34D399);color:#064E3B}
.kids-lv-tile.now{background:linear-gradient(135deg,#FDE047,#F59E0B);color:#78350F;box-shadow:0 4px 12px rgba(245,158,11,.4);transform:scale(1.06)}
.kids-lv-tile.future{background:#EFE3CC;color:#94A3B8}
.kids-level-foot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-size: 18px;color:var(--kids-text-sub)}
.kids-level-foot a{color:var(--kids-blue-deep);font-weight:700;text-decoration:none}
.kids-level-foot a:hover{text-decoration:underline}

/* 段落标题 */
.kids-section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px}
.kids-section-title h2{font-size: 27px;margin:0;display:flex;align-items:center;gap:8px;font-weight:800}
.kids-section-title .more{font-size: 18px;color:var(--kids-text-sub);text-decoration:none;font-weight:600}
.kids-section-title .more:hover{color:var(--kids-blue-deep)}

/* 作品 */
.kids-works{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.kids-work-tile{
  position:relative;height:110px;border-radius:14px;padding:14px;
  display:flex;align-items:flex-end;color:#fff;font-weight:800;font-size: 20px;
  cursor:pointer;transition:transform .2s;overflow:hidden;border:0;text-align:left;
  font-family:inherit;box-shadow:0 4px 12px rgba(0,0,0,.1);
}
.kids-work-tile:hover{transform:scale(1.03);box-shadow:0 8px 20px rgba(0,0,0,.15)}
.kids-work-tile .tag{position:absolute;top:10px;right:10px;font-size: 15px;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.85);color:#334155;font-weight:700}

/* 时间线 */
.kids-timeline{position:relative;padding-left:24px}
.kids-timeline:before{content:"";position:absolute;left:8px;top:4px;bottom:4px;width:2px;background:#E5DBC7;border-radius:2px}
.kids-tl-item{position:relative;padding-bottom:14px}
.kids-tl-item:before{content:"";position:absolute;left:-22px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--kids-green);border:3px solid #fff;box-shadow:0 0 0 2px var(--kids-green)}
.kids-tl-item:last-child{padding-bottom:0}
.kids-tl-item b{font-size: 20px;display:block;margin-bottom:2px;color:var(--kids-text);font-weight:700}
.kids-tl-item small{font-size: 18px;color:var(--kids-text-sub)}

/* 荣誉 */
.kids-honor-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kids-honor{padding:14px 8px;border-radius:12px;background:#F5EBD6;text-align:center;cursor:pointer;transition:all .2s;text-decoration:none;color:inherit;display:block}
.kids-honor:hover{background:#FEF3C7;transform:translateY(-2px)}
.kids-honor-icon{font-size: 42px;margin-bottom:4px}
.kids-honor b{display:block;font-size: 18px;color:var(--kids-text);margin-bottom:2px;font-weight:700}
.kids-honor small{font-size: 18px;color:var(--kids-text-sub)}

/* 评语标签 */
.kids-words{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.kids-words span{font-size: 18px;padding:6px 12px;border-radius:999px;background:#EFE3CC;color:#64748B;font-weight:600}
.kids-words span.hot{background:linear-gradient(135deg,#FEF3C7,#FDE68A);color:#92400E;font-weight:700}
.kids-motto{font-size: 20px;color:#475569;line-height:1.7;margin:12px 0;font-style:italic}
.kids-goal{
  background:linear-gradient(135deg,#FEF3C7,#FDE68A);
  border-left:3px solid #F59E0B;border-radius:10px;
  padding:10px 12px;font-size: 18px;color:#92400E;line-height:1.6;margin-top:12px;font-weight:600;
}

/* 留言 */
.kids-msg{padding:10px 12px;border-radius:12px;background:#F5EBD6;margin-bottom:8px;display:flex;gap:10px;align-items:flex-start}
.kids-msg-avatar{width:36px;height:36px;border-radius:50%;color:#fff;display:grid;place-items:center;font-size: 21px;font-weight:800;flex-shrink:0}
.kids-msg-body{flex:1;min-width:0}
.kids-msg b{font-size: 18px;color:var(--kids-text);font-weight:700}
.kids-msg p{font-size: 18px;color:#64748B;margin:2px 0 0;line-height:1.5}

/* 模态 */
.kids-modal{position:fixed;inset:0;background:rgba(15,23,42,.4);backdrop-filter:blur(4px);display:none;place-items:center;z-index:200;padding:20px}
.kids-modal.show{display:grid}
.kids-modal-card{width:min(440px,90%);background:#fff;border-radius:24px;padding:24px;box-shadow:0 24px 60px rgba(0,0,0,.18)}
.kids-modal-card h3{font-size: 27px;margin:0 0 8px;font-weight:800}
.kids-modal-card p{font-size: 20px;color:#64748B;line-height:1.7;margin:0 0 16px}
.kids-modal-actions{display:flex;gap:8px;flex-wrap:wrap}

/* profile 渐变 */
.kids-profile{background:linear-gradient(135deg,#E0F2FE 0%,#FFFFFF 100%);text-align:center}
.kids-profile-name{font-size: 33px;font-weight:800;margin:4px 0 6px;color:var(--kids-text)}
.kids-profile-school{font-size: 18px;color:var(--kids-text-sub);margin:0 0 8px}
.kids-profile-quote{font-size: 18px;color:#475569;line-height:1.6;margin:10px 0 0;font-style:italic}

/* 响应式 */
@media(max-width:1080px){
  .kids-bento-hero,.kids-bento-mid,.kids-bento-bottom{grid-template-columns:1fr}
  .kids-bento-dims{grid-template-columns:repeat(2,1fr)}
  .kids-level-grid{grid-template-columns:repeat(5,1fr)}
  .kids-grid-3{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:720px){
  .kids-page{padding:16px}
  .kids-bento-dims,.kids-grid-3{grid-template-columns:1fr}
  .kids-level-grid{grid-template-columns:repeat(5,1fr)}
  .kids-works{grid-template-columns:1fr}
  .kids-stat-row{grid-template-columns:repeat(3,1fr);gap:8px}
  .kids-stat-value{font-size: 30px}
  .kids-level-foot{flex-direction:column;align-items:flex-start;gap:6px}
}

/* 作品分类不再依赖系统 emoji：用柔和色点保留识别，文字保持清楚。 */
.work-category-badge{--work-category:#8cae72;display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;background:#f4f7ef;color:#5b6e57;font-size:14px;font-weight:850;line-height:1.2;white-space:nowrap}
.work-category-badge i,.work-category-control__field>i{display:block;flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--work-category);box-shadow:0 0 0 3px color-mix(in srgb,var(--work-category) 16%,transparent)}
.work-category-badge--xun-body,.work-category-control--xun-body{--work-category:#75a9bd}.work-category-badge--clay,.work-category-control--clay{--work-category:#cf9063}.work-category-badge--stage,.work-category-control--stage{--work-category:#9c8bbd}
.work-category-control{--work-category:#8cae72;display:inline-flex;align-items:center;gap:6px;color:#7a8792;font-size:13px;font-weight:800;white-space:nowrap}
.work-category-control__field{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border:1px solid #e6e1d5;border-radius:10px;background:#fffdf8}
.work-category-control select{appearance:none;min-width:88px;padding:2px 18px 2px 0;border:0;background:linear-gradient(45deg,transparent 50%,#8a9aa5 50%) right 6px center/5px 5px no-repeat,linear-gradient(135deg,#8a9aa5 50%,transparent 50%) right 2px center/5px 5px no-repeat;color:#516673;font:inherit;font-weight:850;outline:none;cursor:pointer}
.work-category-control select:focus-visible{outline:3px solid rgba(117,169,189,.28);outline-offset:3px;border-radius:5px}
.gallery-work-placeholder{position:absolute;left:17px;top:14px;display:grid;place-items:center;width:58px;height:58px;border:2px solid rgba(255,255,255,.78);border-radius:20px;background:rgba(255,255,255,.72);color:#607384;font-size:15px;font-weight:900;z-index:2}.gallery-work-placeholder--clay{background:#fff3e9;color:#9a6548}.gallery-work-placeholder--stage{background:#f2edfb;color:#716087}

@media(max-width:560px){.work-category-control{width:100%;justify-content:space-between}.work-category-control__field{flex:1;justify-content:flex-end}.work-category-control select{min-width:0;width:100%}}