/* ============================================================
   Mains Answer Writing Mode
   ============================================================ */

.mains-setup,
.mains-write,
.mains-result,
.mains-loading {
  max-width: 920px;
  margin: 0 auto;
  padding: 24px;
  animation: fadeInUp var(--duration-slow) var(--ease-out) both;
}

.mains-setup__header,
.mains-write__header,
.mains-result__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 28px;
}

.mains-setup__back,
.mains-write__back,
.mains-result__back {
  padding: 6px 10px;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  border-radius: var(--radius-sm);
}

.mains-setup__back:hover,
.mains-write__back:hover,
.mains-result__back:hover {
  background: var(--color-bg-hover);
}

.mains-setup__badge,
.mains-result__badge,
.mains-write__badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #1e4a8a;
  background: color-mix(in srgb, #2563eb 12%, transparent);
  border: 1px solid color-mix(in srgb, #2563eb 25%, transparent);
}

.mains-setup__title,
.mains-result__hero h1 {
  margin: 8px 0 4px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.mains-setup__sub {
  margin: 0;
  color: var(--color-text-secondary);
}

.mains-section {
  margin-bottom: 24px;
}

.mains-section h2 {
  margin: 0 0 12px;
  font-size: var(--font-size-base);
}

.mains-section--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.mains-section label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.mains-select,
.mains-input,
.mains-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

.mains-textarea { min-height: 100px; resize: vertical; }

.mains-mark-grid,
.mains-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.mains-mark-card,
.mains-mode-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  text-align: left;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  cursor: pointer;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}

.mains-mode-grid { grid-template-columns: 1fr 1fr; }

.mains-mark-card strong,
.mains-mode-card strong {
  font-size: var(--font-size-sm);
}

.mains-mark-card span,
.mains-mode-card span {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.mains-mark-card.is-active,
.mains-mode-card.is-active {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px color-mix(in srgb, #2563eb 20%, transparent);
}

.mains-setup__submit { width: 100%; margin-top: 8px; }

.mains-history { display: flex; flex-direction: column; gap: 10px; }

.mains-history-item {
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}

.mains-history-item__top {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 6px;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.mains-history-item p {
  margin: 0;
  font-size: var(--font-size-sm);
}

.mains-empty {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

/* Writing screen */
.mains-write__header {
  align-items: center;
  justify-content: space-between;
}

.mains-write__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.mains-write__timer {
  font-family: ui-monospace, monospace;
  font-size: 1.25rem;
  font-weight: var(--font-weight-bold);
  color: #2563eb;
}

.mains-write__target {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.mains-write__question {
  padding: 20px;
  margin-bottom: 16px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, color-mix(in srgb, #2563eb 8%, var(--color-bg-elevated)), var(--color-bg-elevated));
  border: 1px solid color-mix(in srgb, #2563eb 20%, var(--color-border));
}

.mains-write__directive {
  display: inline-block;
  margin-bottom: 8px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  background: #2563eb;
  color: #fff;
}

.mains-write__question h1 {
  margin: 0 0 10px;
  font-family: Georgia, serif;
  font-size: 1.2rem;
  line-height: 1.45;
}

.mains-write__context {
  margin: 0 0 10px;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.mains-write__hints {
  margin: 0;
  padding-left: 18px;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.mains-write__guide {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  margin-bottom: 14px;
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  border: 1px dashed var(--color-border);
  font-size: var(--font-size-sm);
}

.mains-write__guide strong { white-space: nowrap; }

.mains-write__editor-wrap {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-elevated);
}

.mains-write__editor {
  width: 100%;
  min-height: 320px;
  padding: 20px;
  border: none;
  resize: vertical;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.05rem;
  line-height: 1.75;
  background: transparent;
  color: var(--color-text-primary);
}

.mains-write__editor:focus { outline: none; }

.mains-write__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
}

.mains-write__wc {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.mains-write__wc--under { color: #d97706; }
.mains-write__wc--good { color: #16a34a; }
.mains-write__wc--over { color: #dc2626; }

.mains-write__actions { display: flex; gap: 8px; }

/* Loading */
.mains-loading {
  text-align: center;
  padding: 80px 24px;
}

.mains-loading__spinner {
  width: 48px;
  height: 48px;
  margin: 0 auto 20px;
  border: 3px solid var(--color-border);
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Result */
.mains-result__hero {
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 24px;
  margin-bottom: 20px;
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
}

.mains-result__grade {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  font-size: 2rem;
  font-weight: var(--font-weight-bold);
  font-family: Georgia, serif;
}

.mains-result__grade--a { background: #dcfce7; color: #166534; }
.mains-result__grade--b { background: #dbeafe; color: #1e40af; }
.mains-result__grade--c { background: #fef3c7; color: #92400e; }
.mains-result__grade--d { background: #ffedd5; color: #c2410c; }
.mains-result__grade--e { background: #fee2e2; color: #991b1b; }

.mains-result__score-val {
  display: block;
  font-size: 2.2rem;
  font-weight: var(--font-weight-bold);
  color: #2563eb;
  line-height: 1;
}

.mains-result__score-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.mains-result__score-sub {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.mains-result__panel {
  margin-bottom: 18px;
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
}

.mains-result__panel h2 {
  margin: 0 0 12px;
  font-size: 1rem;
}

.mains-result__panel--mentor {
  background: linear-gradient(135deg, color-mix(in srgb, #2563eb 10%, var(--color-bg-elevated)), var(--color-bg-elevated));
  border-color: color-mix(in srgb, #2563eb 25%, var(--color-border));
}

.mains-result__question {
  margin: 0;
  font-family: Georgia, serif;
  line-height: 1.5;
}

.mains-dim-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.mains-dim {
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--color-bg);
}

.mains-dim__head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: var(--font-size-sm);
}

.mains-dim__track {
  height: 6px;
  border-radius: 999px;
  background: var(--color-border);
  overflow: hidden;
}

.mains-dim__track span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #2563eb;
}

.mains-dim--weak .mains-dim__track span { background: #dc2626; }
.mains-dim--mid .mains-dim__track span { background: #d97706; }
.mains-dim--strong .mains-dim__track span { background: #16a34a; }

.mains-dim__comment {
  margin: 8px 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.mains-result__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.mains-list {
  margin: 0;
  padding-left: 18px;
  font-size: var(--font-size-sm);
}

.mains-list--good li { color: #166534; }
.mains-list--warn li { color: #92400e; }
.mains-list--miss li { color: #1e40af; }
.mains-list--err li { color: #991b1b; }

.mains-outline__block {
  margin-bottom: 12px;
}

.mains-outline__block strong {
  display: block;
  margin-bottom: 4px;
  font-size: var(--font-size-sm);
}

.mains-outline__block p,
.mains-outline__block ul {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: 1.55;
}

.mains-model-answer,
.mains-your-answer {
  font-family: Georgia, serif;
  font-size: var(--font-size-sm);
  line-height: 1.7;
  color: var(--color-text-primary);
}

.mains-result__panel--model {
  border-color: color-mix(in srgb, #16a34a 30%, var(--color-border));
}

.mains-result__panel--yours {
  opacity: 0.85;
}

.mains-result__actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

/* Workspace card */
.workspace-card--mains-writing .workspace-card__icon {
  color: #2563eb;
  background: color-mix(in srgb, #2563eb 12%, transparent);
}

.workspace-card--mains-writing:hover .workspace-card__icon {
  background: #2563eb;
  color: #fff;
}

/* Note editor button */
.note-editor__mains-btn {
  color: #2563eb;
  background: color-mix(in srgb, #2563eb 12%, transparent);
  border-color: #2563eb;
}

.note-editor__mains-btn:hover {
  background: #2563eb;
  color: #fff;
}

@media (max-width: 768px) {
  .mains-mark-grid { grid-template-columns: 1fr; }
  .mains-section--grid { grid-template-columns: 1fr; }
  .mains-result__grid { grid-template-columns: 1fr; }
  .mains-result__hero { flex-direction: column; text-align: center; }
}