:root{
  --paper:#F3EEE1;
  --paper-line:#DCD5C2;
  --card:#FFFDF7;
  --ink:#2B2822;
  --ink-dim:#7A7566;
  --seal:#C23B33;
  --seal-dim:#8E2C26;
  --sage:#5F7A5E;
  --radius:6px;
}
*{box-sizing:border-box;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:'Inter',sans-serif;font-size:14px;
  background-image:
    linear-gradient(var(--paper-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--paper-line) 1px, transparent 1px);
  background-size:28px 28px;
  background-position:-1px -1px;
}
.app{max-width:880px;margin:0 auto;padding:20px 20px 60px;}

.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:10px;}
.brand{font-weight:600;font-size:17px;display:flex;align-items:center;gap:8px;}
.stamp-mark{
  font-family:'Noto Serif SC',serif;font-weight:700;
  color:var(--card);background:var(--seal);
  width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:4px;font-size:16px;
}
.stats{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink-dim);}

.tabbar{display:flex;gap:6px;margin-bottom:20px;border-bottom:1px solid var(--paper-line);}
.tab{
  background:none;border:none;padding:9px 16px;cursor:pointer;
  font-size:13px;font-weight:500;color:var(--ink-dim);
  border-bottom:2px solid transparent;font-family:'Inter',sans-serif;
}
.tab.active{color:var(--seal);border-bottom-color:var(--seal);}

.toolbar{margin-bottom:12px;}
input[type=text]{
  width:100%;background:var(--card);border:1px solid var(--paper-line);color:var(--ink);
  border-radius:var(--radius);padding:9px 12px;font-family:'Inter',sans-serif;font-size:13px;
}
input[type=text]:focus{outline:none;border-color:var(--seal-dim);}

.tag-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;}
.tag-chip{
  font-family:'JetBrains Mono',monospace;font-size:11px;padding:3px 10px;border-radius:20px;
  background:var(--card);border:1px solid var(--paper-line);color:var(--ink-dim);cursor:pointer;
}
.tag-chip.active{border-color:var(--sage);color:var(--sage);}

.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;}
.term-card{
  background:var(--card);border:1px solid var(--paper-line);border-radius:var(--radius);
  padding:14px;position:relative;
}
.term-card .hanzi{font-family:'Noto Serif SC',serif;font-weight:700;font-size:28px;line-height:1;margin-bottom:4px;}
.term-card .pinyin{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink-dim);margin-bottom:6px;}
.term-card .english{font-size:13px;margin-bottom:10px;}
.term-card .cat{
  font-size:10px;color:var(--sage);background:rgba(95,122,94,.1);
  padding:2px 7px;border-radius:10px;display:inline-block;margin-bottom:10px;
}
.term-card .actions{display:flex;gap:6px;}
.term-card .known-stamp{
  position:absolute;top:10px;right:10px;color:var(--seal);
  border:2px solid var(--seal);border-radius:4px;padding:1px 6px;
  font-size:10px;font-weight:700;letter-spacing:.05em;
  transform:rotate(-8deg);opacity:.85;font-family:'Noto Serif SC',serif;
}

.btn{
  background:var(--card);border:1px solid var(--paper-line);color:var(--ink);
  padding:6px 12px;border-radius:var(--radius);cursor:pointer;font-size:12px;font-weight:500;
}
.btn:hover{border-color:var(--seal-dim);}
.btn-primary{background:var(--seal);border-color:var(--seal);color:#fff;}
.btn-primary:hover{background:var(--seal-dim);}
.btn-danger{color:var(--seal-dim);}

.empty-state{
  text-align:center;padding:50px 20px;color:var(--ink-dim);
  border:1px dashed var(--paper-line);border-radius:var(--radius);grid-column:1/-1;
}
.empty-state .em-title{font-family:'Noto Serif SC',serif;font-weight:700;font-size:16px;color:var(--ink);margin-bottom:6px;}

.add-form{
  background:var(--card);border:1px solid var(--paper-line);border-radius:var(--radius);
  padding:20px;display:flex;flex-direction:column;gap:14px;max-width:420px;
}
.add-form label{font-size:12px;color:var(--ink-dim);display:flex;flex-direction:column;gap:5px;}

.review-wrap{display:flex;justify-content:center;padding:20px 0;}
.flip-card{
  width:280px;background:var(--card);border:1px solid var(--paper-line);border-radius:10px;
  padding:30px 20px;text-align:center;cursor:pointer;min-height:220px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
}
.flip-card .big-hanzi{font-family:'Noto Serif SC',serif;font-weight:700;font-size:52px;}
.flip-card .reveal{color:var(--ink-dim);font-size:13px;}
.flip-card .reveal .pinyin{font-family:'JetBrains Mono',monospace;margin-bottom:4px;}
.review-actions{display:flex;gap:10px;justify-content:center;margin-top:16px;}
.review-progress{text-align:center;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink-dim);margin-bottom:14px;}

.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(8px);
  background:var(--seal-dim);color:#fff;padding:10px 18px;border-radius:var(--radius);
  font-size:13px;font-weight:500;opacity:0;transition:all .25s;pointer-events:none;z-index:100;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

@media (max-width:520px){
  .app{padding:14px 14px 50px;}
  .flip-card{width:100%;}
}