@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@500;700;900&family=Noto+Sans+SC:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Noto Sans SC', sans-serif;
  color: #1B2A4A;
  background: #FAFAF8;
}

.ep-serif { font-family: 'Noto Serif SC', serif; }
.ep-mono { font-family: 'IBM Plex Mono', monospace; }

.ep-app {
  max-width: 780px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}

.ep-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}
.ep-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 18px; }
.ep-link-btn {
  background: none; border: none; cursor: pointer;
  font-size: 12px; opacity: .6; display: flex; align-items: center; gap: 4px;
  font-family: 'Noto Sans SC', sans-serif; color: #1B2A4A;
}
.ep-link-btn:hover { opacity: 1; }

.ep-card {
  background: #fff; border: 1px solid #D8DCCB; border-radius: 4px;
}
.ep-ruled { background-image: repeating-linear-gradient(#FAFAF8 0 27px, #E4E8D8 27px 28px); }

.ep-tag { background: #F4DAD6; color: #B23A2E; font-family: 'IBM Plex Mono', monospace; }
.ep-tag-green { background: #DCEBE1; color: #2F6F4E; font-family: 'IBM Plex Mono', monospace; }
.ep-tag-blue { background: #DCE6EC; color: #2C5F7C; font-family: 'IBM Plex Mono', monospace; }

.ep-btn {
  font-family: 'Noto Sans SC', sans-serif; border: 1px solid #D8DCCB; background: #fff;
  border-radius: 4px; padding: 8px 14px; cursor: pointer; font-size: 14px;
  display: inline-flex; align-items: center; gap: 6px; color: #1B2A4A;
}
.ep-btn:hover { background: #f7f7f4; }
.ep-btn:disabled { opacity: .4; cursor: not-allowed; }
.ep-btn-primary { background: #1B2A4A; color: #FAFAF8; border-color: #1B2A4A; }
.ep-btn-primary:hover { background: #24365f; }
.ep-btn-seal { background: #B23A2E; color: #fff; border-color: #B23A2E; }
.ep-btn-seal:hover { background: #9c3126; }

input:not([type="radio"]):not([type="checkbox"]), textarea, select {
  font-family: 'Noto Sans SC', sans-serif; background: #FAFAF8; border: 1px solid #D8DCCB;
  border-radius: 4px; padding: 10px 12px; font-size: 14px; color: #1B2A4A; width: 100%;
}
input:focus, textarea:focus, select:focus { outline: 2px solid #1B2A4A; outline-offset: 1px; }

input[type="radio"], input[type="checkbox"] {
  width: 16px; height: 16px; flex-shrink: 0; accent-color: #1B2A4A; cursor: pointer;
}

.ep-divider { border-top: 1px dashed #C9CFC0; }

.ep-seal {
  border: 3px solid #B23A2E; color: #B23A2E; border-radius: 9999px;
  transform: rotate(-8deg); display: flex; flex-direction: column; align-items: center;
  justify-content: center; flex-shrink: 0;
}

.ep-modal-overlay {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  z-index: 50;
}

.ep-section-heading {
  font-family: 'Noto Serif SC', serif; font-size: 18px; font-weight: 700;
  margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid #1B2A4A;
}

.ep-score-badge {
  border-radius: 4px; font-family: 'IBM Plex Mono', monospace; font-weight: 600;
  padding: 4px 12px; font-size: 14px; display: inline-block;
}
.ep-score-badge .full { opacity: .6; }

label.ep-radio, label.ep-check {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px; cursor: pointer;
}

a { color: inherit; }