/* =========================================================
   梦羽学习屋 · 界面样式
   目标：大按钮、少文字、温和圆角，三年级自己能操作
   ========================================================= */
:root{
  --violet:#7C3AED;
  --violet-soft:#EDE7FE;
  --pink:#EC4899;
  --pink-soft:#FDE7F3;
  --cyan:#0891B2;
  --cyan-soft:#DFF6FB;
  --green:#16A34A;
  --green-soft:#DCFCE7;
  --amber:#D97706;
  --amber-soft:#FEF3C7;
  --red:#DC2626;
  --red-soft:#FEE2E2;

  --ink:#20232E;
  --ink-2:#5B6478;
  --ink-3:#8A93A6;
  --line:#E9E7F2;
  --line-2:#F2F0F8;

  --card:#FFFFFF;
  --bg:#F7F5FF;
  --grad:linear-gradient(135deg,#7C3AED 0%,#EC4899 100%);
  --grad-soft:linear-gradient(135deg,#F3EDFE 0%,#FDE9F4 100%);

  --r-sm:10px;
  --r-md:14px;
  --r-lg:20px;
  --r-xl:26px;
  --r-pill:999px;

  --shadow-1:0 1px 2px rgba(32,35,46,.04), 0 6px 18px -8px rgba(32,35,46,.12);
  --shadow-2:0 10px 30px -12px rgba(124,58,237,.28), 0 2px 6px rgba(32,35,46,.05);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'PingFang SC','Microsoft YaHei',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.6;color:var(--ink);
  background:
    radial-gradient(70% 50% at 12% 0%, rgba(124,58,237,.10), transparent 60%),
    radial-gradient(60% 45% at 92% 6%, rgba(236,72,153,.10), transparent 62%),
    var(--bg);
  background-attachment:fixed;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
[hidden]{display:none !important}
.mono{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
:focus-visible{outline:3px solid rgba(124,58,237,.35);outline-offset:2px;border-radius:8px}

/* ---------------- 登录 ---------------- */
.login{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-card{
  width:100%;max-width:420px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-xl);padding:32px 26px;box-shadow:var(--shadow-2);
}
.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.login-brand h1{font-size:22px;margin:0;letter-spacing:-.02em}
.login-brand p{margin:2px 0 0;font-size:12px;color:var(--ink-3)}
.brand-mark{
  width:44px;height:44px;border-radius:14px;background:var(--grad);color:#fff;
  display:grid;place-items:center;flex:none;box-shadow:0 8px 20px -8px rgba(124,58,237,.7);
}
.brand-mark svg{width:22px;height:22px}
.brand-mark.sm{width:36px;height:36px;border-radius:12px}
.brand-mark.sm svg{width:18px;height:18px}
.login-hint{margin:0 0 20px;color:var(--ink-2);font-size:14.5px}
.login-form{display:flex;flex-direction:column;gap:16px}
.login-foot{margin:18px 0 0;font-size:12.5px;color:var(--ink-3);text-align:center;line-height:1.7}

/* ---------------- 表单 ---------------- */
.field{display:flex;flex-direction:column;gap:7px}
.field > span{font-size:13.5px;font-weight:600;color:var(--ink-2)}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:var(--r-md);
  background:#FCFBFF;font-size:16px;transition:border-color .2s, box-shadow .2s;
}
.field textarea{min-height:92px;resize:vertical;line-height:1.55}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--violet);box-shadow:0 0 0 4px rgba(124,58,237,.12);background:#fff;
}
.field .hint{font-size:12.5px;color:var(--ink-3)}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* ---------------- 按钮 ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;border-radius:var(--r-pill);font-weight:600;font-size:15.5px;
  transition:transform .18s ease, box-shadow .2s ease, background-color .2s ease, opacity .2s;
  white-space:nowrap;
}
.btn svg{width:18px;height:18px}
.btn:active{transform:scale(.97)}
.btn-lg{width:100%;padding:16px 22px;font-size:17px}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 10px 24px -10px rgba(124,58,237,.7)}
.btn-primary:hover{box-shadow:0 14px 30px -12px rgba(236,72,153,.6)}
.btn-ghost{background:#fff;border:1.5px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:#DAD5EC;background:#FBFAFF}
.btn-soft{background:var(--violet-soft);color:var(--violet)}
.btn-soft:hover{background:#E3DAFC}
.btn-danger{background:var(--red-soft);color:var(--red)}
.btn[disabled]{opacity:.6;pointer-events:none}
.btn-sm{padding:9px 14px;font-size:14px}
.icon-btn{
  width:40px;height:40px;border-radius:var(--r-pill);display:grid;place-items:center;
  color:var(--ink-2);background:#fff;border:1.5px solid var(--line);
  transition:background-color .2s, color .2s;
}
.icon-btn:hover{background:#F7F5FF;color:var(--ink)}

/* ---------------- 应用外壳 ---------------- */
.app{min-height:100vh;padding-bottom:calc(84px + var(--safe-bottom))}
.topbar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;background:rgba(255,255,255,.86);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
}
.topbar-left{display:flex;align-items:center;gap:10px;min-width:0}
.topbar-title{min-width:0}
.topbar-title strong{display:block;font-size:16.5px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-title span{font-size:11.5px;color:var(--ink-3)}
.topbar-right{display:flex;align-items:center;gap:8px}
.who{font-size:13px;color:var(--ink-2);background:#F5F3FC;border-radius:var(--r-pill);padding:5px 12px;white-space:nowrap}
@media (max-width:520px){.who{display:none}}
.menu-wrap{position:relative}
.menu{
  position:absolute;right:0;top:48px;min-width:168px;z-index:40;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-2);padding:6px;display:flex;flex-direction:column;
}
.menu a,.menu button{padding:11px 14px;border-radius:10px;font-size:15px;text-align:left;color:var(--ink)}
.menu a:hover,.menu button:hover{background:#F7F5FF}
.menu button{color:var(--red)}
.main{max-width:820px;margin:0 auto;padding:18px 16px 8px}

.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:35;
  display:flex;justify-content:center;gap:2px;
  padding:8px 8px calc(8px + var(--safe-bottom));
  background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-top:1px solid var(--line);
}
.tabbar a{
  flex:1;max-width:120px;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:7px 4px;border-radius:var(--r-md);color:var(--ink-3);font-size:11.5px;font-weight:600;
  transition:color .2s, background-color .2s;
}
.tabbar a svg{width:23px;height:23px}
.tabbar a.active{color:var(--violet);background:var(--violet-soft)}

/* ---------------- 卡片 ---------------- */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:18px;box-shadow:var(--shadow-1);margin-bottom:14px;
}
.card.plain{box-shadow:none;background:#FCFBFF}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.card-head h2{margin:0;font-size:17px;letter-spacing:-.01em}
.card-head .sub{font-size:12.5px;color:var(--ink-3)}
.section-title{font-size:15px;font-weight:700;color:var(--ink-2);margin:22px 4px 10px}

.grid{display:grid;gap:12px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:560px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:1fr}}
@media (max-width:420px){.grid-2{grid-template-columns:1fr}}

/* 数字卡片 */
.stat{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:15px 16px;box-shadow:var(--shadow-1);
}
.stat .k{font-size:12.5px;color:var(--ink-3);display:flex;align-items:center;gap:6px}
.stat .v{font-size:26px;font-weight:800;letter-spacing:-.02em;margin-top:4px;font-family:'JetBrains Mono',ui-monospace,monospace}
.stat .u{font-size:13px;font-weight:600;color:var(--ink-3);margin-left:3px}
.stat.violet{background:linear-gradient(160deg,#F6F1FE,#fff)}
.stat.pink{background:linear-gradient(160deg,#FDEFF6,#fff)}
.stat.cyan{background:linear-gradient(160deg,#EAF9FD,#fff)}
.stat.green{background:linear-gradient(160deg,#EDFBEF,#fff)}

/* 大按钮入口 */
.hero-actions{display:grid;gap:12px;grid-template-columns:1.4fr 1fr}
@media (max-width:520px){.hero-actions{grid-template-columns:1fr}}
.action-tile{
  display:flex;align-items:center;gap:14px;padding:18px;border-radius:var(--r-lg);
  background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-1);
  transition:transform .18s ease, box-shadow .2s ease;
}
.action-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.action-tile .ico{
  width:48px;height:48px;border-radius:16px;display:grid;place-items:center;flex:none;color:#fff;
}
.action-tile .ico svg{width:24px;height:24px}
.action-tile .ico.violet{background:linear-gradient(135deg,#7C3AED,#A855F7)}
.action-tile .ico.pink{background:linear-gradient(135deg,#EC4899,#F472B6)}
.action-tile .ico.cyan{background:linear-gradient(135deg,#06B6D4,#22D3EE)}
.action-tile .ico.green{background:linear-gradient(135deg,#16A34A,#4ADE80)}
.action-tile b{display:block;font-size:16.5px}
.action-tile span{font-size:13px;color:var(--ink-3)}

/* 星期柱状 */
.week{display:flex;align-items:flex-end;gap:8px;height:92px;margin-top:6px}
.week .day{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%}
.week .bar{width:100%;border-radius:8px;background:linear-gradient(180deg,#C4B5FD,#7C3AED);min-height:6px;transition:height .4s ease}
.week .bar.zero{background:#EDEBF5}
.week .lb{font-size:11px;color:var(--ink-3);font-family:'JetBrains Mono',ui-monospace,monospace}

/* 列表项 */
.list{display:flex;flex-direction:column;gap:10px}
.item{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:13px;box-shadow:var(--shadow-1);transition:transform .16s ease, border-color .2s;
}
.item:active{transform:scale(.995)}
.item:hover{border-color:#DCD6F0}
.item .thumb{
  width:74px;height:74px;border-radius:var(--r-md);flex:none;overflow:hidden;
  background:#F2F0F8;display:grid;place-items:center;color:#B9B3CC;
}
.item .thumb img{width:100%;height:100%;object-fit:cover}
.item .body{min-width:0;flex:1}
.item .body .t{font-size:15px;font-weight:600;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.item .body .m{font-size:12.5px;color:var(--ink-3);margin-top:5px;display:flex;gap:8px;flex-wrap:wrap}
.item .body .m i{font-style:normal}
.item .go{align-self:center;color:var(--ink-3)}

/* 标签 */
.badge{
  display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;
  padding:4px 10px;border-radius:var(--r-pill);background:#F3F1FA;color:var(--ink-2);
}
.badge.violet{background:var(--violet-soft);color:var(--violet)}
.badge.pink{background:var(--pink-soft);color:#BE185D}
.badge.cyan{background:var(--cyan-soft);color:#0E7490}
.badge.green{background:var(--green-soft);color:#15803D}
.badge.amber{background:var(--amber-soft);color:#B45309}
.badge.red{background:var(--red-soft);color:#B91C1C}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  padding:10px 15px;border-radius:var(--r-pill);border:1.5px solid var(--line);
  background:#FCFBFF;font-size:14.5px;font-weight:600;color:var(--ink-2);
  transition:all .18s ease;
}
.chip.active{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 8px 18px -10px rgba(124,58,237,.7)}
.chip.sm{padding:6px 12px;font-size:13px}

/* 拍照上传 */
.upload-grid{display:grid;gap:12px;grid-template-columns:repeat(3,1fr)}
@media (max-width:560px){.upload-grid{grid-template-columns:1fr}}
.upload-tile{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  min-height:150px;padding:16px;border-radius:var(--r-lg);border:2px dashed #DAD4EE;background:#FCFBFF;
  text-align:center;transition:border-color .2s, background-color .2s;
}
.upload-tile:hover{border-color:var(--violet);background:#F8F5FF}
.upload-tile.has{border-style:solid;border-color:var(--line);background:#fff;padding:8px}
.upload-tile .lb{font-size:14.5px;font-weight:700}
.upload-tile .hint{font-size:12px;color:var(--ink-3)}
.upload-tile img{width:100%;height:150px;object-fit:cover;border-radius:var(--r-md)}
.upload-tile input{position:absolute;inset:0;opacity:0;cursor:pointer}
.upload-tile .redo{
  position:absolute;right:8px;top:8px;background:rgba(255,255,255,.94);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:4px 10px;font-size:12px;font-weight:600;color:var(--ink-2);
}

/* 复习卡 */
.review-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:20px;box-shadow:var(--shadow-2);
}
.review-progress{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--ink-3);margin-bottom:12px}
.progress-track{height:8px;border-radius:var(--r-pill);background:#EFEDF7;overflow:hidden;margin-bottom:18px}
.progress-fill{height:100%;border-radius:var(--r-pill);background:var(--grad);transition:width .35s ease}
.review-photo{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:#F7F6FB;margin-bottom:14px}
.review-photo img{width:100%;max-height:340px;object-fit:contain}
.review-text{font-size:17px;line-height:1.75;white-space:pre-wrap;word-break:break-word}
.answer-box{margin-top:16px;padding:16px;border-radius:var(--r-lg);background:var(--green-soft);border:1px solid #BBF7D0}
.answer-box .lb{font-size:12.5px;font-weight:700;color:#15803D;margin-bottom:6px}
.answer-box.mine{background:var(--red-soft);border-color:#FECACA}
.answer-box.mine .lb{color:#B91C1C}
.judge{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
@media (max-width:420px){.judge{grid-template-columns:1fr}}
.judge button{padding:16px 8px;border-radius:var(--r-lg);font-size:16px;font-weight:700;border:1.5px solid var(--line);background:#fff}
.judge button.bad{color:#B91C1C;border-color:#FECACA;background:var(--red-soft)}
.judge button.fuzzy{color:#B45309;border-color:#FDE68A;background:var(--amber-soft)}
.judge button.good{color:#15803D;border-color:#BBF7D0;background:var(--green-soft)}

/* 空状态与加载 */
.empty{text-align:center;padding:44px 20px;color:var(--ink-3)}
.empty svg{width:52px;height:52px;margin:0 auto 12px;color:#CFC9E4}
.empty b{display:block;color:var(--ink-2);font-size:16px;margin-bottom:6px}
.loading{padding:40px;text-align:center;color:var(--ink-3)}
.spin{
  width:22px;height:22px;border-radius:50%;margin:0 auto 10px;
  border:2.5px solid rgba(124,58,237,.25);border-top-color:var(--violet);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* 表格 */
.table{width:100%;border-collapse:collapse;font-size:14.5px}
.table th,.table td{padding:11px 8px;text-align:left;border-bottom:1px solid var(--line-2)}
.table th{font-size:12.5px;color:var(--ink-3);font-weight:700}
.table tr:last-child td{border-bottom:0}
.table .num{font-family:'JetBrains Mono',ui-monospace,monospace;color:var(--ink-2)}

/* 条形分布 */
.bars{display:flex;flex-direction:column;gap:10px}
.bars .row{display:grid;grid-template-columns:104px 1fr 46px;align-items:center;gap:10px;font-size:14px}
.bars .track{height:12px;border-radius:var(--r-pill);background:#EFEDF7;overflow:hidden}
.bars .fill{height:100%;border-radius:var(--r-pill);background:var(--grad)}
.bars .fill.cyan{background:linear-gradient(90deg,#06B6D4,#22D3EE)}
.bars .fill.pink{background:linear-gradient(90deg,#EC4899,#F472B6)}
.bars .fill.amber{background:linear-gradient(90deg,#D97706,#FBBF24)}
.bars .n{text-align:right;color:var(--ink-3);font-family:'JetBrains Mono',ui-monospace,monospace}

/* 模态 */
.modal-mask{
  position:fixed;inset:0;z-index:60;background:rgba(32,35,46,.42);
  display:grid;place-items:center;padding:18px;
}
.modal{
  width:100%;max-width:480px;max-height:88vh;overflow:auto;
  background:#fff;border-radius:var(--r-xl);padding:22px;box-shadow:var(--shadow-2);
}
.modal h3{margin:0 0 14px;font-size:18px}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
.modal-actions .btn{flex:1}
@media (min-width:520px){.modal-actions .btn{flex:0 0 auto}}

/* Toast */
.toast{
  position:fixed;left:50%;bottom:calc(96px + var(--safe-bottom));z-index:80;
  transform:translate(-50%,24px);opacity:0;pointer-events:none;
  max-width:90vw;padding:13px 20px;border-radius:var(--r-pill);
  background:rgba(32,35,46,.92);color:#fff;font-size:14.5px;font-weight:500;
  transition:transform .3s ease, opacity .3s ease;
}
.toast.show{transform:translate(-50%,0);opacity:1}
.toast.err{background:rgba(185,28,28,.95)}

/* 打印复习卷 */
.print-root{display:none}
@media print{
  body{background:#fff}
  .app,.login,.toast,.modal-mask{display:none !important}
  .print-root{display:block;padding:0}
  .print-root h1{font-size:20px;margin:0 0 4px}
  .print-root .meta{font-size:12px;color:#666;margin-bottom:16px}
  .print-root .p-item{border:1px solid #ddd;border-radius:10px;padding:14px;margin-bottom:14px;page-break-inside:avoid}
  .print-root .p-q{font-size:15px;line-height:1.7;white-space:pre-wrap}
  .print-root .p-a{margin-top:10px;padding-top:10px;border-top:1px dashed #ddd;color:#166534;font-size:14px;white-space:pre-wrap}
  .print-root img{max-width:100%;max-height:260px;object-fit:contain;margin:8px 0}
  .print-root .p-tag{font-size:12px;color:#666;margin-bottom:6px}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}