.sm-opslagstavle { width: 100%; }
.sm-opslagstavle__toolbar { display:flex; gap:12px; align-items:center; margin: 12px 0 20px; }
.sm-opslagstavle__new-btn {
    background: var(--sm-primary, #4f46e5); color: #fff; border:0; padding:10px 18px;
    border-radius:6px; cursor:pointer; font-size:14px; font-weight:600;
}
.sm-opslagstavle__filter { padding:8px 10px; border:1px solid #ddd; border-radius:6px; }

.sm-opslagstavle__list { display:grid; gap:16px; }
.sm-opslagstavle--grid .sm-opslagstavle__list { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.sm-opslagstavle--list .sm-opslagstavle__list { grid-template-columns: 1fr; }

.sm-opslagstavle__item {
    position: relative; background:#fff; border:1px solid #eaeaea; border-radius:10px;
    padding:16px; display:flex; flex-direction:column; gap:10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.sm-opslagstavle--list .sm-opslagstavle__item { flex-direction: row; align-items: flex-start; }
.sm-opslagstavle--list .sm-opslagstavle__media { width:160px; flex-shrink:0; }
.sm-opslagstavle__item.is-pinned { border-color:#f5c518; background:#fffdf4; }
.sm-opslagstavle__pin { position:absolute; top:8px; right:10px; color:#f5c518; font-size:18px; }

.sm-opslagstavle__media img { width:100%; height:auto; border-radius:6px; display:block; }
.sm-opslagstavle__head { display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:13px; color:#666; }
.sm-opslagstavle__name { color:#1a1a2e; }
.sm-opslagstavle__cat { background:#eef; color:#334; padding:2px 8px; border-radius:10px; font-size:11px; }
.sm-opslagstavle__date { margin-left:auto; }
.sm-opslagstavle__msg { font-size:15px; line-height:1.5; color:#222; }
.sm-opslagstavle__expiry { font-size:12px; color:#999; margin:0; }
.sm-opslagstavle__contact {
    align-self:flex-start; padding:6px 12px; background:#f3f3f7; color:#1a1a2e;
    border-radius:6px; text-decoration:none; font-size:13px;
}
.sm-opslagstavle__empty { color:#888; padding:24px; text-align:center; background:#fafafa; border-radius:8px; }

.sm-opslagstavle__form { display:grid; gap:12px; margin-top:20px; padding:20px; background:#fafafa; border-radius:10px; }
.sm-opslagstavle__form label { display:flex; flex-direction:column; gap:4px; font-size:13px; color:#444; }
.sm-opslagstavle__form input, .sm-opslagstavle__form select, .sm-opslagstavle__form textarea {
    padding:8px 10px; border:1px solid #ddd; border-radius:6px; font:inherit;
}
.sm-opslagstavle__actions { display:flex; gap:10px; justify-content:flex-end; }
.sm-opslagstavle__cancel { background:#eee; border:0; padding:10px 16px; border-radius:6px; cursor:pointer; }
.sm-opslagstavle__submit { background: var(--sm-primary, #4f46e5); color:#fff; border:0; padding:10px 18px; border-radius:6px; cursor:pointer; font-weight:600; }
.sm-opslagstavle__status { margin:0; font-size:13px; }
.sm-opslagstavle__status.is-error { color:#b32d2e; }
.sm-opslagstavle__status.is-ok    { color:#137333; }

/* Editor preview */
.sm-opslagstavle-wrapper { padding:16px; background:#f7f7fb; border:1px dashed #cfd2dc; border-radius:8px; }
.sm-opslagstavle-preview p { margin:4px 0; }