* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; font-size: 14px; background: #f5f5f5; color: #222; min-height: 100vh; padding-bottom: 52px; }

header { background: #1a1a2e; color: #fff; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; }
header h1 { font-size: 16px; font-weight: 600; }
header a { color: #aaa; font-size: 13px; text-decoration: none; }
header a:hover { color: #fff; }

footer { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid #e5e5e5; padding: 10px 24px; display: flex; justify-content: space-between; align-items: center; z-index: 50; }
.sync-area { display: flex; align-items: center; gap: 10px; }
.sync-label { font-size: 12px; color: #666; }
#btn-sync { padding: 6px 14px; font-size: 12px; background: #0070f3; color: #fff; border: none; border-radius: 4px; cursor: pointer; }
#btn-sync:hover { background: #005fd4; }
#btn-sync:disabled { background: #ccc; cursor: default; }
#btn-sync.synced { background: #1a6e35; cursor: default; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.badge-licensed, .badge-A { background: #d4edda; color: #155724; }
.badge-other { background: #f8d7da; color: #721c24; }

.btn-compose { padding: 4px 10px; font-size: 12px; background: #1a6e35; color: #fff; border: none; border-radius: 4px; cursor: pointer; }
.btn-compose:hover { background: #145428; }
.btn-find { padding: 4px 10px; font-size: 12px; background: #0070f3; color: #fff; border: none; border-radius: 4px; cursor: pointer; white-space: nowrap; }
.btn-find:hover { background: #005fd4; }
.btn-find:disabled { opacity: .5; cursor: default; }

#composer { position: fixed; right: 0; top: 0; bottom: 0; width: 50vw; background: #fff; box-shadow: -2px 0 16px rgba(0,0,0,.15); transform: translateX(100%); transition: transform .25s ease; display: flex; flex-direction: column; z-index: 100; }
@media (max-width: 768px) { #composer { width: 100vw; } }
#composer.open { transform: translateX(0); }
.composer-header { background: #1a1a2e; padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; }
.composer-header h2 { font-size: 15px; color: #fff; }
.composer-header button { background: none; border: none; color: #fff; font-size: 22px; cursor: pointer; line-height: 1; }
.composer-body { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.composer-body label { font-size: 12px; color: #555; display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.composer-body input, .composer-body textarea { padding: 9px 12px; border: 1px solid #ccc; border-radius: 6px; font-size: 13px; font-family: inherit; }
.composer-body textarea { resize: vertical; min-height: 50vh; line-height: 1.6; }
.composer-footer { padding: 16px 20px; border-top: 1px solid #eee; }
.btn-send { width: 100%; padding: 11px; background: #1a1a2e; color: #fff; border: none; border-radius: 6px; font-size: 14px; cursor: pointer; font-weight: 600; }
.btn-send:hover { background: #2d2d5e; }
.btn-send:disabled { opacity: .5; cursor: default; }
.send-msg { margin-top: 8px; font-size: 12px; text-align: center; }
.send-msg.ok { color: #155724; }
.send-msg.err { color: #721c24; }

.empty-state { text-align: center; padding: 80px 24px; color: #bbb; }
.empty-state p { font-size: 16px; margin-top: 8px; }
.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid #ccc; border-top-color: #0070f3; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: middle; margin-right: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }