body { font-family: system-ui, Arial; margin: 0; background:#0f1216; color:#e8eef7; }
header { padding: 16px; background:#141a22; border-bottom:1px solid #233041; }
h1 { margin: 0 0 8px 0; font-size: 20px; }
main { padding: 16px; }
.card { background:#141a22; border:1px solid #233041; border-radius: 12px; padding: 12px; }
.grid { display:grid; gap: 12px; grid-template-columns: 1fr; }
.row { display:flex; gap: 8px; align-items:center; flex-wrap: wrap; }
.cols { display:grid; gap: 8px; grid-template-columns: 1fr 1fr; }
textarea { width:100%; min-height: 160px; background:#0f1216; color:#e8eef7; border:1px solid #233041; border-radius: 8px; padding: 8px; }
input, select { background:#0f1216; color:#e8eef7; border:1px solid #233041; border-radius: 8px; padding: 6px 8px; }
button { background:#0f1216; color:#e8eef7; border:1px solid #2f7fc1; border-radius: 10px; padding: 8px 10px; cursor:pointer; }
button:hover { filter: brightness(1.1); }
pre { background:#0f1216; border:1px solid #233041; border-radius: 8px; padding: 8px; overflow:auto; }
.list { display:grid; gap: 8px; }
.item { border:1px solid #233041; border-radius: 10px; padding: 8px; background:#0f1216; }
.item .top { display:flex; justify-content:space-between; gap:8px; align-items:center; }
.badge { font-size: 12px; opacity: .85; }
.small { font-size: 12px; opacity: .8; }
.locked { border-color: #c12f2f; }