*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  background: #f5f5f7;
  color: #1d1d1f;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
}

/* ---- GitHub link ---- */
.github-link {
  position: fixed;
  bottom: 1.2rem;
  right: 1.2rem;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #d2d2d7;
  color: #1d1d1f;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
  transition: transform .15s, box-shadow .15s;
}
.github-link:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

/* ---- shared header ---- */
.site-header {
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #e5e5ea;
  padding: .8rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: #1d1d1f;
  text-decoration: none;
  white-space: nowrap;
}
.site-title:hover { color: #0071e3; }
.site-nav {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.site-nav a {
  font-size: .85rem;
  color: #6e6e73;
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}
.site-nav a:hover { color: #0071e3; }

.lang-btn {
  font-size: .7rem;
  font-weight: 500;
  padding: .25rem .6rem;
  border: 1px solid #d2d2d7;
  border-radius: 6px;
  background: #fff;
  color: #6e6e73;
  cursor: pointer;
  transition: background .15s;
}
.lang-btn:hover { background: #e8e8ed; }
.lang-btn:active { transform: scale(.97); }

.page-title {
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
  margin: 2rem 0 .3rem;
  padding: 0 1rem;
}

.subtitle {
  font-size: .85rem;
  color: #86868b;
  margin: 2rem 0 1.5rem;
  text-align: center;
  padding: 0 1rem;
}
.page-title + .subtitle {
  margin-top: .3rem;
}
.subtitle a { color: #86868b; }

.note-box {
  max-width: 700px;
  margin: 0 auto 1.5rem;
  padding: .9rem 1.2rem;
  background: #fef9e7;
  border: 1px solid #f0d97a;
  border-radius: 8px;
  font-size: .85rem;
  line-height: 1.6;
  color: #5a4e2f;
}
.note-box a { color: #7a6a2f; }

/* ---- main content ---- */
.main-content {
  flex: 1;
  width: 100%;
  max-width: 860px;
  padding: 0 1.5rem 2rem;
}

/* ---- landing page cards ---- */
.landing-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1rem;
}
.landing-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2.5rem 2rem;
  background: #fff;
  border: 1px solid #e5e5ea;
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.landing-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  border-color: #0071e3;
}
.landing-card-icon { font-size: 3rem; margin-bottom: 1rem; }
.landing-card h2 { font-size: 1.1rem; font-weight: 600; margin-bottom: .6rem; }
.landing-card p { font-size: .85rem; color: #6e6e73; line-height: 1.5; }

/* ---- drop zone ---- */
.dropzone {
  border: 2px dashed #c7c7cc;
  border-radius: 16px;
  background: #fff;
  padding: 3rem 2rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.dropzone.dragover { border-color: #0071e3; background: #f0f4ff; }
.dropzone.has-file { border-color: #34c759; background: #f0faf3; }
.dropzone-icon { font-size: 2.5rem; margin-bottom: .8rem; }
.dropzone-text { font-size: .95rem; color: #6e6e73; line-height: 1.6; }
.dropzone-text strong { color: #1d1d1f; }
.file-name {
  margin-top: .8rem;
  font-size: .9rem;
  font-weight: 500;
  color: #1d1d1f;
  word-break: break-all;
}
.file-input { display: none; }

/* ---- sample button ---- */
.sample-link {
  display: block;
  text-align: center;
  margin-top: .6rem;
  font-size: .78rem;
  color: #6e6e73;
  cursor: pointer;
  text-decoration: underline;
  background: none;
  border: none;
}
.sample-link:hover { color: #0071e3; }
.sample-link:active { transform: none; }

/* ---- buttons ---- */
.actions {
  display: flex;
  justify-content: center;
  gap: .8rem;
  margin-top: 1.2rem;
}
button {
  font-size: .9rem;
  font-weight: 500;
  border: none;
  border-radius: 10px;
  padding: .7rem 1.8rem;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
}
button:active { transform: scale(.97); }
button:disabled { opacity: .4; cursor: not-allowed; }
.btn-primary { background: #0071e3; color: #fff; }
.btn-secondary { background: #e8e8ed; color: #1d1d1f; }

/* ---- progress ---- */
.progress { display: none; margin-top: 1.2rem; text-align: center; }
.progress.active { display: block; }
.spinner {
  width: 28px; height: 28px;
  border: 3px solid #e8e8ed;
  border-top-color: #0071e3;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  margin: 0 auto .6rem;
}
@keyframes spin { to { transform: rotate(360deg); } }
.progress-text { font-size: .85rem; color: #6e6e73; }

/* ---- error ---- */
.error {
  display: none;
  margin-top: 1rem;
  padding: .8rem 1rem;
  background: #fff0f0;
  border: 1px solid #ff3b30;
  border-radius: 10px;
  color: #ff3b30;
  font-size: .85rem;
}
.error.active { display: block; }

/* ---- result ---- */
.result { display: none; margin-top: 1.5rem; }
.result.active { display: block; }
.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .6rem;
  flex-wrap: wrap;
  gap: .5rem;
}
.result-header h2 { font-size: 1rem; font-weight: 600; }
.result-actions { display: flex; gap: .5rem; }
.result-actions button { font-size: .8rem; padding: .45rem 1rem; }

/* ---- XML code view ---- */
.xml-preview {
  background: #1d1d1f;
  color: #e8e8ed;
  border-radius: 12px;
  padding: 1.2rem;
  overflow: auto;
  max-height: 520px;
  font-family: "SF Mono", "Fira Code", "Cascadia Code", Menlo, Consolas, monospace;
  font-size: .8rem;
  line-height: 1.55;
  white-space: pre;
  tab-size: 2;
}
.xml-preview .tag { color: #ff7ab2; }
.xml-preview .attr-name { color: #6bdfff; }
.xml-preview .attr-val { color: #ffa14f; }
.xml-preview .comment { color: #7f8c8d; font-style: italic; }
.xml-preview .decl { color: #b4d273; }

/* ---- tab switcher ---- */
.tabs {
  display: flex;
  gap: 0;
  margin-bottom: .6rem;
}
.tab-btn {
  font-size: .85rem;
  font-weight: 500;
  padding: .5rem 1.2rem;
  border: 1px solid #d2d2d7;
  background: #f5f5f7;
  color: #6e6e73;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.tab-btn:first-child { border-radius: 8px 0 0 8px; }
.tab-btn:last-child  { border-radius: 0 8px 8px 0; }
.tab-btn.active {
  background: #0071e3;
  color: #fff;
  border-color: #0071e3;
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ---- TEI preview ---- */
.tei-preview {
  background: #fff;
  border: 1px solid #d2d2d7;
  border-radius: 12px;
  padding: 1.5rem 2rem;
  overflow: auto;
  max-height: 520px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  line-height: 1.7;
  color: #1d1d1f;
}

/* CETEIcean element styles */
.tei-preview tei-tei { display: block; }
.tei-preview tei-teiheader { display: none; }
.tei-preview tei-text { display: block; }
.tei-preview tei-front { display: block; margin-bottom: 1.5em; }
.tei-preview tei-body { display: block; }
.tei-preview tei-back { display: block; }
.tei-preview tei-div { display: block; margin-bottom: 1em; }
.tei-preview tei-head {
  display: block;
  font-weight: bold;
  margin: 1em 0 .5em;
}
.tei-preview tei-body > tei-div > tei-head { font-size: 1.5em; }
.tei-preview tei-div > tei-div > tei-head { font-size: 1.3em; }
.tei-preview tei-div > tei-div > tei-div > tei-head { font-size: 1.15em; }
.tei-preview tei-p {
  display: block;
  margin: .6em 0;
  text-align: justify;
}
.tei-preview tei-hi[rend~="bold"] { font-weight: bold; }
.tei-preview tei-hi[rend~="italic"] { font-style: italic; }
.tei-preview tei-hi[rend~="underline"] { text-decoration: underline; }
.tei-preview tei-list {
  display: block;
  margin: .8em 0 .8em 1.5em;
  padding: 0;
}
.tei-preview tei-list[rend="bulleted"] { list-style-type: disc; }
.tei-preview tei-list[rend="numbered"] { list-style-type: decimal; }
.tei-preview tei-item { display: list-item; margin: .3em 0; }
.tei-preview tei-table {
  display: table;
  border-collapse: collapse;
  margin: 1em 0;
  width: 100%;
}
.tei-preview tei-row { display: table-row; }
.tei-preview tei-cell {
  display: table-cell;
  border: 1px solid #d2d2d7;
  padding: .4em .6em;
}
.tei-preview tei-titlepage {
  display: block;
  text-align: center;
  margin-bottom: 2em;
}
.tei-preview tei-titlepart[type="Title"] {
  display: block;
  font-size: 1.8em;
  font-weight: bold;
  margin: .5em 0;
}
.tei-preview tei-docauthor { display: block; text-align: center; }
.tei-preview tei-doctitle { display: block; text-align: center; }
.tei-preview tei-note {
  display: inline;
  font-size: .8em;
  color: #0071e3;
  cursor: pointer;
  position: relative;
}
.tei-preview tei-note::before {
  content: "[" attr(n) "]";
  vertical-align: super;
}
.tei-preview tei-note > * { display: none; }
.tei-preview tei-note:hover > * {
  display: block;
  position: absolute;
  bottom: 1.5em;
  left: 0;
  background: #1d1d1f;
  color: #fff;
  padding: .6em .8em;
  border-radius: 8px;
  font-size: .9rem;
  line-height: 1.5;
  white-space: normal;
  min-width: 200px;
  max-width: 350px;
  z-index: 10;
  cursor: default;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.tei-preview tei-figure { display: block; text-align: center; margin: 1em 0; }
.tei-preview tei-graphic { display: block; }
.tei-preview tei-lb::after { content: "\a"; white-space: pre; }
.tei-preview tei-l { display: block; }
.tei-preview tei-lg { display: block; margin: 1em 0; }
.tei-preview tei-q::before { content: "\201C"; }
.tei-preview tei-q::after { content: "\201D"; }
.tei-preview tei-emph { font-style: italic; }
.tei-preview tei-ref { color: #0071e3; text-decoration: underline; cursor: pointer; }
.tei-preview tei-bibl { display: block; margin: .5em 0; padding-left: 2em; text-indent: -2em; }
.tei-preview tei-listbibl { display: block; margin: 1em 0; }
.tei-preview tei-closer { display: block; margin-top: 1em; }
.tei-preview tei-opener { display: block; margin-bottom: 1em; }
.tei-preview tei-salute { display: block; }
.tei-preview tei-signed { display: block; text-align: right; }
.tei-preview tei-dateline { display: block; }
.tei-preview tei-ab { display: block; margin: 1em 0; }
.tei-preview tei-seg { display: inline; }
.tei-preview tei-fw { display: none; }
.tei-preview tei-pb {
  display: block;
  border-top: 1px dashed #d2d2d7;
  color: #86868b;
  font-size: .8em;
  padding-top: .3em;
  margin: 1em 0;
}
.tei-preview tei-pb::before { content: "[p. " attr(n) "]"; }

/* ---- footer ---- */
.site-footer {
  width: 100%;
  padding: 1.2rem;
  text-align: center;
  font-size: .75rem;
  color: #aeaeb2;
  border-top: 1px solid #e5e5ea;
  margin-top: auto;
}
.site-footer a { color: #aeaeb2; }

/* ---- responsive ---- */
@media (max-width: 600px) {
  .site-header {
    padding: .6rem 1rem;
    flex-wrap: wrap;
    gap: .5rem;
  }
  .site-title { font-size: 1.1rem; }
  .site-nav { gap: .8rem; }
  .site-nav a { font-size: .75rem; }

  .main-content { padding: 0 1rem 1.5rem; }

  .landing-cards {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .landing-card { padding: 1.5rem 1.2rem; }

  .dropzone { padding: 2rem 1rem; }
  .dropzone-icon { font-size: 2rem; }

  .result-header { flex-direction: column; align-items: flex-start; }

  .xml-preview {
    font-size: .7rem;
    padding: .8rem;
    max-height: 400px;
    border-radius: 8px;
  }

  .tei-preview {
    padding: 1rem;
    max-height: 400px;
    border-radius: 8px;
  }

  .tei-preview tei-note:hover > * {
    min-width: 160px;
    max-width: 260px;
    font-size: .8rem;
  }
}

/* ---- dark mode variables ---- */
.dark {
  background: #1c1c1e; color: #f5f5f7;
}
.dark .github-link { background: #2c2c2e; border-color: #48484a; color: #f5f5f7; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.dark .site-header { background: #2c2c2e; border-bottom-color: #3a3a3c; }
.dark .site-title { color: #f5f5f7; }
.dark .site-title:hover { color: #64d2ff; }
.dark .site-nav a { color: #aeaeb2; }
.dark .site-nav a:hover { color: #64d2ff; }
.dark .lang-btn, .dark .theme-btn { background: #2c2c2e; border-color: #48484a; color: #aeaeb2; }
.dark .lang-btn:hover, .dark .theme-btn:hover { background: #3a3a3c; }
.dark .page-title { color: #f5f5f7; }
.dark .subtitle { color: #8e8e93; }
.dark .subtitle a { color: #8e8e93; }
.dark .note-box { background: #3a3520; border-color: #6b5c1f; color: #e8d89c; }
.dark .note-box a { color: #e8d89c; }
.dark .landing-card { background: #2c2c2e; border-color: #3a3a3c; color: #f5f5f7; }
.dark .landing-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.3); border-color: #64d2ff; }
.dark .landing-card p { color: #aeaeb2; }
.dark .dropzone { background: #2c2c2e; border-color: #48484a; }
.dark .dropzone.dragover { border-color: #64d2ff; background: #1a2a3a; }
.dark .dropzone.has-file { border-color: #30d158; background: #1a2e1a; }
.dark .dropzone-text { color: #aeaeb2; }
.dark .dropzone-text strong { color: #f5f5f7; }
.dark .file-name { color: #f5f5f7; }
.dark .btn-primary { background: #0a84ff; }
.dark .btn-secondary { background: #3a3a3c; color: #f5f5f7; }
.dark .sample-link { color: #8e8e93; }
.dark .sample-link:hover { color: #64d2ff; }
.dark .spinner { border-color: #3a3a3c; border-top-color: #0a84ff; }
.dark .progress-text { color: #8e8e93; }
.dark .error { background: #3a1a1a; border-color: #ff453a; color: #ff6961; }
.dark .result-header h2 { color: #f5f5f7; }
.dark .tab-btn { background: #2c2c2e; border-color: #48484a; color: #8e8e93; }
.dark .tab-btn.active { background: #0a84ff; color: #fff; border-color: #0a84ff; }
.dark .xml-preview { background: #000; }
.dark .tei-preview { background: #2c2c2e; border-color: #3a3a3c; color: #f5f5f7; }
.dark .tei-preview tei-cell { border-color: #48484a; }
.dark .tei-preview tei-note { color: #64d2ff; }
.dark .tei-preview tei-note:hover > * { background: #000; color: #f5f5f7; }
.dark .tei-preview tei-pb { border-top-color: #48484a; color: #8e8e93; }
.dark .tei-preview tei-ref { color: #64d2ff; }
.dark .site-footer { border-top-color: #3a3a3c; color: #636366; }
.dark .site-footer a { color: #636366; }

/* ---- theme toggle button ---- */
.theme-btn {
  font-size: .7rem;
  font-weight: 500;
  padding: .25rem .6rem;
  border: 1px solid #d2d2d7;
  border-radius: 6px;
  background: #fff;
  color: #6e6e73;
  cursor: pointer;
  transition: background .15s;
}
.theme-btn:hover { background: #e8e8ed; }
.theme-btn:active { transform: scale(.97); }