* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 system-ui, sans-serif; background: #14161a; color: #e8e8e8; }
header { display: flex; gap: 8px; align-items: center; padding: 8px 12px; background: #1d2026; flex-wrap: wrap; }
header h1 { font-size: 18px; margin: 0 auto 0 0; }
h1 { margin-top: 0; }
button { padding: 6px 12px; border: 1px solid #3a3f4a; border-radius: 6px; background: #2a2e37; color: inherit; cursor: pointer; }
button:hover:not(:disabled) { background: #363b47; }
button:disabled { opacity: .4; cursor: default; }
button.active, #sendBtn { background: #d33; border-color: #d33; }
.card { max-width: 640px; margin: 24px auto; padding: 20px; background: #1d2026; border-radius: 10px; }
#login .card { margin-top: 18vh; max-width: 340px; }
label { display: block; margin-bottom: 12px; }
input[type=password], textarea { width: 100%; margin-top: 6px; padding: 8px; border-radius: 6px; border: 1px solid #3a3f4a; background: #14161a; color: inherit; font: inherit; }
#panoList { list-style: none; }
#panoList li { padding: 8px 0; border-bottom: 1px solid #2a2e37; cursor: pointer; }
#panoList li:hover { color: #ff7a7a; }
#editor { display: flex; flex-direction: column; height: 100vh; }
#editor[hidden], section[hidden] { display: none; }
#viewer { flex: 1; min-height: 0; }
#viewer.drawing, #viewer.drawing * { cursor: crosshair !important; }
.tools { margin: 0 auto; display: flex; gap: 4px; }
#hint { margin: 0; padding: 4px 12px; min-height: 28px; background: #1d2026; color: #aab; font-size: 13px; }
dialog { border: 0; border-radius: 10px; background: #1d2026; color: inherit; width: min(480px, 92vw); }
dialog::backdrop { background: rgba(0, 0, 0, .6); }
menu { display: flex; justify-content: flex-end; gap: 8px; padding: 0; margin: 0; }
#busy { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); display: grid; place-content: center; text-align: center; z-index: 100; }
#busy[hidden], #toast[hidden] { display: none; }
.spinner { width: 44px; height: 44px; margin: 0 auto; border: 4px solid #555; border-top-color: #d33; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#toast { position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%); padding: 10px 18px; background: #b32; border-radius: 8px; z-index: 200; max-width: 90vw; }