@font-face {
    font-family: 'Noto Sans Mono';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/NotoSansMono-Regular.woff2') format('woff2'),
         url('../fonts/NotoSansMono-Regular.woff') format('woff'),
         url('../fonts/NotoSansMono-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Noto Sans Mono';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/Noto-Sans-Mono-Bold.ttf.woff') format('woff');
}

.etymon-header {
    font-size: 2em;
    font-family: 'Noto Sans Mono', 'Courier New', monospace;
    font-weight: bold;
    color: #2c3e50;
}
.meaning-block {
    display: flex;
    gap: 30px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.meaning-item {
    font-size: 1.1em;
}
.meaning-lang {
    color: #7f8c8d;
    font-size: 0.85em;
    margin-right: 5px;
}
.derivates-block {
    margin-top: 12px;
}
.derivate-link {
    display: inline-block;
    font-family: 'Noto Sans Mono', 'Courier New', monospace;
    font-weight: bold;
    background: #eaf4fb;
    border: 1px solid #aed6f1;
    border-radius: 4px;
    padding: 2px 10px;
    margin: 2px 4px 2px 0;
    color: #2980b9;
    text-decoration: none;
    font-size: 1em;
}
.derivate-link:hover { background: #d6eaf8; }
.derived-from { color: #7f8c8d; font-size: 0.9em; margin-top: 6px; }

.lang-group {
    margin-bottom: 5px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
}
.lang-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 10px 15px;
    background: #f4f6f7;
    cursor: pointer;
    user-select: none;
}
.lang-header:hover { background: #eaecee; }
.lang-name {
    font-weight: bold;
    font-size: 1em;
    min-width: 180px;
}
.lang-summary {
    font-family: 'Noto Sans Mono', 'Courier New', monospace;
    font-size: 1em;
    color: #333;
    flex: 1;
}
.lang-toggle {
    color: #aaa;
    font-size: 0.8em;
    margin-left: auto;
}
.lang-body {
    display: none;
    padding: 0;
}
.lang-body.open { display: block; }

.form-row {
    display: grid;
    grid-template-columns: 220px 1fr auto;
    gap: 0;
    border-top: 1px solid #e8e8e8;
    align-items: start;
}
.form-row-label {
    padding: 10px 15px;
    color: #555;
    font-size: 0.9em;
    border-right: 1px solid #e8e8e8;
    background: #fafafa;
}
.form-row-value {
    padding: 10px 15px;
}
.form-text {
    font-family: 'Noto Sans Mono', 'Courier New', monospace;
    font-size: 1.15em;
    font-weight: bold;
}
.form-meaning {
    font-size: 0.9em;
    color: #555;
    margin-top: 2px;
}
.form-refs {
    font-size: 0.85em;
    margin-top: 4px;
}
.ref-link {
    color: #2980b9;
    text-decoration: none;
    border-bottom: 1px dotted #2980b9;
}
.ref-link:hover { color: #1a5276; }
.form-row-ctx {
    padding: 8px 15px;
    border-left: 1px solid #e8e8e8;
}
.ctx-toggle {
    font-size: 0.78em;
    color: #aaa;
    cursor: pointer;
    white-space: nowrap;
}
.ctx-toggle:hover { color: #555; }
.ctx-text {
    display: none;
    font-size: 0.85em;
    color: #555;
    margin-top: 6px;
    white-space: pre-wrap;
    border-left: 3px solid #d5d8dc;
    padding-left: 8px;
}
.ctx-text.open { display: block; }