.cn-item {
    background: var(--card2); border: 1.5px solid var(--border);
    border-radius: 12px; padding: 10px 12px;
    transition: border-color .15s;
}
.cn-item:hover { border-color: rgba(202,138,4,.4); }
.cn-item-text { font-size: 13.5px; color: var(--text); line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.cn-item-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.cn-date { font-size: 11px; color: var(--muted); }
.cn-item-btns { display: flex; gap: 6px; }
.cn-edit-btn, .cn-del-btn {
    background: none; border: none; cursor: pointer;
    color: var(--muted); padding: 4px 6px; border-radius: 6px;
    font-size: 12px; transition: color .15s, background .15s;
}
.cn-edit-btn:hover { color: #ca8a04; background: rgba(202,138,4,.1); }
.cn-del-btn:hover  { color: #ef4444; background: rgba(239,68,68,.1); }
.cn-empty { text-align: center; color: var(--muted); padding: 30px 0; }
.cn-empty i { font-size: 32px; display: block; margin-bottom: 8px; opacity: .4; }
.cn-empty p { font-size: 13px; margin: 0; }
.cn-composer {
    display: flex; gap: 8px; align-items: flex-end;
    padding: 10px 16px 14px; border-top: 1px solid var(--border);
}
.cn-composer textarea {
    flex: 1; padding: 10px 12px; border-radius: 10px;
    border: 1.5px solid var(--border); background: var(--card2);
    color: var(--text); font-size: 13px; resize: none; outline: none;
    transition: border-color .15s; font-family: inherit;
}
.cn-composer textarea:focus { border-color: #ca8a04; }
.cn-composer button {
    padding: 10px 16px; background: #ca8a04; color: #fff;
    border: none; border-radius: 10px; font-size: 13px;
    font-weight: 700; cursor: pointer; white-space: nowrap;
}
.cn-edit-area {
    width: 100%; padding: 8px; border-radius: 8px;
    border: 1.5px solid #ca8a04; background: var(--card2);
    color: var(--text); font-size: 13px; resize: vertical;
    outline: none; box-sizing: border-box; font-family: inherit;
}