*{box-sizing:border-box;font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
html,body{margin:0;height:100%;background:#f6f8fb;color:#0b1726}
body{display:flex;flex-direction:column}
header{background:#111827;color:#fff;padding:16px 24px;display:flex;align-items:center;justify-content:space-between}
header h1{margin:0;font-size:18px}
.key-row{display:flex;gap:8px;align-items:center}
.key-row input{padding:8px;border-radius:6px;border:1px solid #374151}
button{cursor:pointer;padding:0;width:80px;height:36px;border-radius:6px;border:none;background:#2563eb;color:#fff}
button.danger{background:#dc2626}
main{display:flex;flex-direction:row;gap:24px;padding:24px;flex:1;overflow:hidden}
.create{background:#fff;padding:16px;border-radius:8px;box-shadow:0 1px 3px rgba(2,6,23,0.08);flex:4;display:flex;flex-direction:column;overflow:hidden}
.list{background:#fff;padding:16px;border-radius:8px;box-shadow:0 1px 3px rgba(2,6,23,0.08);flex:6;display:flex;flex-direction:column;overflow:hidden}
.create h2,.list h2{margin-top:0}
#createForm input{width:100%;padding:8px;margin:8px 0;border:1px solid #e5e7eb;border-radius:6px}
.form-actions{text-align:right}
#items{margin-top:12px;flex:1;overflow-y:auto;border:1px solid #e5e7eb;border-radius:6px}
.item{display:flex;align-items:center;justify-content:space-between;padding:10px;border-bottom:1px solid #f3f4f6}
.item .left{display:flex;gap:12px;align-items:center}
.item img{width:64px;height:64px;border:1px solid #e5e7eb;border-radius:6px}
.item .meta{max-width:560px}
.item .meta b{display:block}
.item .actions{display:flex;gap:8px}
.modal{position:fixed;inset:0;background:rgba(2,6,23,0.5);display:flex;align-items:center;justify-content:center}
.modal.hidden{display:none}
.modal-content{background:#fff;padding:16px;border-radius:8px;width:90%;max-width:640px;position:relative}
.close{position:absolute;right:8px;top:8px;background:transparent;color:#111827;font-size:22px;padding:4px}
.modal .modal-actions{text-align:right;margin-top:12px}
.small{font-size:12px;color:#6b7280}
.toast-container{position:fixed;bottom:20px;left:20px;z-index:9999;display:flex;flex-direction:column;gap:8px}
.toast{background:#111827;color:#fff;padding:12px 16px;border-radius:6px;box-shadow:0 4px 12px rgba(2,6,23,0.15);animation:slideIn 0.3s ease-out}
.toast.success{background:#16a34a}
.toast.error{background:#dc2626}
@keyframes slideIn{from{transform:translateX(-400px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes slideOut{to{transform:translateX(-400px);opacity:0}}