#notes-view {
    box-sizing: border-box;
    padding: 20px;
    overflow: auto;
    background: var(--skin-0c1611, #0c1611);
    color: var(--skin-cbe8d9, #cbe8d9);
    font-family: inherit;
}
#notes-view.active {
    display: flex;
    flex-direction: column;
}
#notes-view header, #notes-view footer { display: flex; align-items: center; gap: 12px; }
#notes-view header { justify-content: space-between; }
#notes-view h2 { margin: 0; color: #ffb94f; font-size: 1rem; letter-spacing: .12em; }
#notes-view p { color: var(--skin-91ad9e, #91ad9e); font-size: .8rem; }
#notes-view button { font: inherit; color: var(--skin-d4f5df, #d4f5df); background: var(--skin-142a20, #142a20); border: 1px solid var(--skin-438768, #438768); padding: 8px 12px; cursor: pointer; }
#notes-text { box-sizing: border-box; display: block; width: 100%; flex: 1 1 0; min-height: 160px; resize: none;
    background: var(--skin-060e09, #060e09); color: var(--skin-d4f5df, #d4f5df); border: 1px solid var(--skin-438768, #438768); padding: 14px; font: 1rem/1.6 monospace; tab-size: 4; }
#notes-text:focus-visible, #notes-view button:focus-visible { outline: 2px solid #ffb94f; outline-offset: 2px; }
#notes-view footer { flex-wrap: wrap; margin-top: 12px; font-size: .75rem; }
#notes-status { flex: 1 1 220px; }
#notes-count { white-space: nowrap; color: var(--skin-91ad9e, #91ad9e); }
@media (max-width: 500px) { #notes-view { padding: 12px; } #notes-text { font-size: .9rem; } }

#notes-view .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }